feat: Dropdown 及び FilterDropdown に onOpen/onClose オプションを追加する (#4722)

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

* fix: onOpen でなく onToggle にする

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

* fix: useEffect を分離する

* fix: 不要な差分を戻す

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

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

* fix: eslint 違反を無視する

* fix: onToggle を onOpen / onClose に分割

Author: s-sasaki-0529

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'
 

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>

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}