From ec31a5cba75ca43a3ae95464b775ef31d52ac521 Mon Sep 17 00:00:00 2001
From: s-sasaki-0529 <shingo.sasaki.0529@gmail.com>
Date: Mon, 17 Jun 2024 18:59:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20onToggle=20=E3=82=92=20onOpen=20/=20onCl?=
 =?UTF-8?q?ose=20=E3=81=AB=E5=88=86=E5=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Dropdown/Dropdown.tsx           | 10 ++++++----
 .../FilterDropdown/FilterDropdown.stories.tsx      | 14 ++++++++++++++
 .../Dropdown/FilterDropdown/FilterDropdown.tsx     |  8 +++++---
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
index 2baf613e56..aab22964c0 100644
--- a/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/Dropdown.tsx
@@ -17,7 +17,8 @@ import { usePortal } from '../../hooks/usePortal'
 import { Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'
 
 type Props = {
-  onToggle?: (active: boolean) => void
+  onOpen?: () => void
+  onClose?: () => void
 }
 
 type DropdownContextType = {
@@ -48,7 +49,7 @@ export const DropdownContext = createContext<DropdownContextType>({
   contentId: '',
 })
 
-export const Dropdown: FC<PropsWithChildren<Props>> = ({ onToggle, children }) => {
+export const Dropdown: FC<PropsWithChildren<Props>> = ({ onOpen, onClose, children }) => {
   const [active, setActive] = useState(false)
   const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)
 
@@ -88,8 +89,9 @@ export const Dropdown: FC<PropsWithChildren<Props>> = ({ onToggle, children }) =
   )
 
   useEffect(() => {
-    if (isPortalRootMounted() && onToggle) {
-      onToggle(active)
+    if (isPortalRootMounted()) {
+      if (active) onOpen?.()
+      else onClose?.()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active])
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 ee996c1372..1b1962beb6 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -19,7 +19,8 @@ type Props = {
   onApply: React.MouseEventHandler<HTMLButtonElement>
   onCancel?: React.MouseEventHandler<HTMLButtonElement>
   onReset?: React.MouseEventHandler<HTMLButtonElement>
-  onToggle?: (active: boolean) => void
+  onOpen?: () => void
+  onClose?: () => void
   children: ReactNode
   hasStatusText?: boolean
   decorators?: DecoratorsType<
@@ -74,7 +75,8 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   onApply,
   onCancel,
   onReset,
-  onToggle,
+  onOpen,
+  onClose,
   children,
   hasStatusText,
   decorators,
@@ -142,7 +144,7 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   }, [isFiltered, triggerSize])
 
   return (
-    <Dropdown onToggle={onToggle}>
+    <Dropdown onOpen={onOpen} onClose={onClose}>
       <DropdownTrigger>
         <Button
           {...props}