feat(system): add more control to Popover

This commit is contained in:
Pavel Prichodko 2022-04-11 21:01:29 +02:00
parent 70143feea6
commit 03c4b96176
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 4 additions and 3 deletions

View File

@ -9,15 +9,17 @@ import type { Ref } from 'react'
interface TriggerProps { interface TriggerProps {
children: [React.ReactElement, React.ReactElement] children: [React.ReactElement, React.ReactElement]
open?: boolean
onOpenChange?: (open: boolean) => void
} }
const PopoverTrigger = (props: TriggerProps, ref: Ref<HTMLButtonElement>) => { const PopoverTrigger = (props: TriggerProps, ref: Ref<HTMLButtonElement>) => {
const { children, ...triggerProps } = props const { children, open, onOpenChange, ...triggerProps } = props
const [trigger, content] = children const [trigger, content] = children
return ( return (
<Primitive.Root> <Primitive.Root open={open} onOpenChange={onOpenChange}>
<Primitive.Trigger asChild> <Primitive.Trigger asChild>
{cloneElement(trigger, { ref, ...triggerProps })} {cloneElement(trigger, { ref, ...triggerProps })}
</Primitive.Trigger> </Primitive.Trigger>

View File

@ -6,7 +6,6 @@ export type Variants = VariantProps<typeof Content>
export const Content = styled('div', { export const Content = styled('div', {
backgroundColor: 'white', backgroundColor: 'white',
padding: '$4',
borderRadius: 8, borderRadius: 8,
boxShadow: boxShadow:
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',