From acf364259b1bbb34bef7275b8377c310d49c2e95 Mon Sep 17 00:00:00 2001
From: "shingo.sasaki" <shingo.sasaki.0529@gmail.com>
Date: Tue, 25 Jun 2024 15:14:18 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Dropdown=20=E5=8F=8A=E3=81=B3=20FilterD?=
 =?UTF-8?q?ropdown=20=E3=81=AB=20onOpen/onClose=20=E3=82=AA=E3=83=97?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=20(#4722)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Dropdown 及び FilterDropdown に onOpen オプションを追加

* fix: onOpen でなく onToggle にする

* fix: 不要なコードを削除

* fix: useEffect を分離する

* fix: 不要な差分を戻す

* fix: マウント時に発火しないようにする

* fix: active の変更でのみ発火させる

* fix: eslint 違反を無視する

* fix: onToggle を onOpen / onClose に分割
---
 .../src/components/Dropdown/Dropdown.tsx         | 16 +++++++++++++++-
 .../FilterDropdown/FilterDropdown.stories.tsx    | 14 ++++++++++++++
 .../Dropdown/FilterDropdown/FilterDropdown.tsx   |  6 +++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
index 934ae542b5..aab22964c0 100644
--- a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
@@ -16,6 +16,11 @@ import { usePortal } from '../../hooks/usePortal'
 
 import { Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'
 
+type Props = {
+  onOpen?: () => void
+  onClose?: () => void
+}
+
 type DropdownContextType = {
   active: boolean
   triggerRect: Rect
@@ -44,7 +49,7 @@ export const DropdownContext = createContext<DropdownContextType>({
   contentId: '',
 })
 
-export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
+export const Dropdown: FC<PropsWithChildren<Props>> = ({ onOpen, onClose, children }) => {
   const [active, setActive] = useState(false)
   const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)
 
@@ -82,6 +87,15 @@ export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
     },
     [active, createPortal, isPortalRootMounted],
   )
+
+  useEffect(() => {
+    if (isPortalRootMounted()) {
+      if (active) onOpen?.()
+      else onClose?.()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active])
+
   // set the displayName explicit for DevTools
   DropdownContentRoot.displayName = 'DropdownContentRoot'
 
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx
index 09adc83da5..0aaa604adb 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx
@@ -49,6 +49,8 @@ export const Render: React.FC = () => {
               setValue('hoge')
               setText('')
             }}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             isFiltered={isFiltered}
           >
             <Fieldset
@@ -96,6 +98,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered2}
             onApply={() => setIsFiltered2(true)}
             onReset={() => setIsFiltered2(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
           >
             <p>You can change border color of the trigger button by setting `isFiltered`.</p>
           </FilterDropdown>
@@ -106,6 +110,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered3}
             onApply={() => setIsFiltered3(true)}
             onReset={() => setIsFiltered3(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             hasStatusText
           >
             <p>
@@ -122,6 +128,8 @@ export const Render: React.FC = () => {
               setValue('hoge')
               setText('')
             }}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             isFiltered={isFiltered}
             disabled
           >
@@ -134,6 +142,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered4}
             onApply={() => setIsFiltered4(true)}
             onReset={() => setIsFiltered4(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             hasStatusText
             decorators={{
               status: (txt) => <span data-wovn-enable="true">{`filtered.(${txt})`}</span>,
@@ -154,6 +164,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered4}
             onApply={() => setIsFiltered4(true)}
             onReset={() => setIsFiltered4(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             responseMessage={responseMessage}
           >
             <Stack gap={1}>
@@ -193,6 +205,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered2}
             onApply={() => setIsFiltered2(true)}
             onReset={() => setIsFiltered2(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             triggerSize="s"
           >
             <p>You can change border color of the trigger button by setting `isFiltered`.</p>
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 32959acb25..1b1962beb6 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -19,6 +19,8 @@ type Props = {
   onApply: React.MouseEventHandler<HTMLButtonElement>
   onCancel?: React.MouseEventHandler<HTMLButtonElement>
   onReset?: React.MouseEventHandler<HTMLButtonElement>
+  onOpen?: () => void
+  onClose?: () => void
   children: ReactNode
   hasStatusText?: boolean
   decorators?: DecoratorsType<
@@ -73,6 +75,8 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   onApply,
   onCancel,
   onReset,
+  onOpen,
+  onClose,
   children,
   hasStatusText,
   decorators,
@@ -140,7 +144,7 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   }, [isFiltered, triggerSize])
 
   return (
-    <Dropdown>
+    <Dropdown onOpen={onOpen} onClose={onClose}>
       <DropdownTrigger>
         <Button
           {...props}