diff --git a/packages/co-design-core/src/components/Popover/Popover.tsx b/packages/co-design-core/src/components/Popover/Popover.tsx index eeb3e07e..a33bf7bc 100644 --- a/packages/co-design-core/src/components/Popover/Popover.tsx +++ b/packages/co-design-core/src/components/Popover/Popover.tsx @@ -16,6 +16,12 @@ export interface PopoverProps extends CoComponentProps, Omit */ opened?: boolean; + /** + * Popover 의 open 상태를 자식 컴포넌트가 제어할 때 사용합니다. + * 만약 자식 컴포넌트에게 제어권을 주고, 강제로 open 상태를 toggle 하고 싶다면 flag 를 사용합니다. + */ + flag?: boolean; + /** Popover 컴포넌트에 포함시킬 요소를 넣습니다. */ content: React.ReactNode; @@ -84,6 +90,7 @@ const getPositionStyle = (placement: PopoverPlacement, target?: HTMLElement) => export const Popover = ({ children, opened, + flag, content, contentPadding = 'medium', withArrow = true, @@ -133,8 +140,8 @@ export const Popover = ({ const handleBlur = trigger === 'focus' ? () => setCurrentOpened(false) : undefined; useUpdateEffect(() => { - setCurrentOpened(opened); - }, [opened]); + setCurrentOpened((prev) => !prev); + }, [flag]); useUpdateEffect(() => { if (currentOpened) onOpen?.(); diff --git a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx index 368fd14c..7cc4231b 100644 --- a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx +++ b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx @@ -3,6 +3,7 @@ import { Modal } from '../../Modal'; import { Center } from '../../Center'; import { Popover } from '../Popover'; import { useToggle } from '@co-design/hooks'; +import { Menu } from '../../Menu'; export default { title: '@co-design/core/Popover', @@ -106,3 +107,47 @@ export const InModal = { ); }, }; + +export const OpenByChildren = { + render: (props) => { + return ( +
+ } {...props}> + + +
+ ); + }, +}; + +export const OpenByChildrenWithFlag = { + render: (props) => { + const [flag, toggleFlag] = useToggle(false); + + return ( +
+ + Not close + Not close + { + toggleFlag(); + }} + > + If click me, Popover close + + Not close + + } + {...props} + > + + +
+ ); + }, +};