From b0ed64c2494a3c2fcc8514c2bf7407bb2ae9418c Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Fri, 22 Sep 2023 18:58:40 +0900
Subject: [PATCH] =?UTF-8?q?popover=20=EC=9D=98=20flag=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Popover/Popover.tsx        | 12 ++++-
 .../Popover/stories/Popover.stories.tsx       | 45 +++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/co-design-core/src/components/Popover/Popover.tsx b/packages/co-design-core/src/components/Popover/Popover.tsx
index eeb3e07e..455e64b1 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<PopoverStylesNames>, 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,
@@ -115,6 +122,7 @@ export const Popover = ({
       !targetRef.current.contains(e.target as HTMLElement) &&
       !balloonRef.current.contains(e.target as HTMLElement)
     ) {
+      console.log('hhh');
       setCurrentOpened(false);
     }
   });
@@ -133,8 +141,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 (
+      <Center style={{ width: 500, height: 500 }}>
+        <Popover placement="bottom" content={<Content />} {...props}>
+          <button>Popover</button>
+        </Popover>
+      </Center>
+    );
+  },
+};
+
+export const OpenByChildrenWithFlag = {
+  render: (props) => {
+    const [flag, toggleFlag] = useToggle(false);
+
+    return (
+      <Center style={{ width: 500, height: 500 }}>
+        <Popover
+          flag={flag}
+          placement="bottom"
+          content={
+            <Menu>
+              <Menu.Item>Not close</Menu.Item>
+              <Menu.Item>Not close</Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  toggleFlag();
+                }}
+              >
+                If click me, Popover close
+              </Menu.Item>
+              <Menu.Item>Not close</Menu.Item>
+            </Menu>
+          }
+          {...props}
+        >
+          <button>Popover</button>
+        </Popover>
+      </Center>
+    );
+  },
+};