fix(DropdownMenuButton): RemoteDialogTrigger の考慮漏れを修正 (#5147)

kufu · Nov 28, 2024 · 63f209a · 63f209a
1 parent 2da022a
commit 63f209a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/packages/smarthr-ui/src/components/Dialog/RemoteDialogTrigger.tsx b/packages/smarthr-ui/src/components/Dialog/RemoteDialogTrigger.tsx
@@ -18,7 +18,7 @@ export const RemoteDialogTrigger: React.FC<
     onClick?: (open: () => void) => void
     children: Omit<ReactElement, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'variant'>
   }
-> = ({ targetId, children, onClick, variant }) => {
+> = ({ targetId, children, onClick, variant, ...rest }) => {
   const actualOnClick = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       if (onClick) {
@@ -38,8 +38,9 @@ export const RemoteDialogTrigger: React.FC<
         'aria-haspopup': 'true',
         'aria-controls': targetId,
         variant,
+        ...rest,
       }),
-    [children, variant, targetId, actualOnClick],
+    [children, actualOnClick, targetId, variant, rest],
   )
 
   return actualTrigger

diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx
@@ -119,7 +119,9 @@ export const renderButtonList = (children: Actions) =>
       return renderButtonList(item.props.children)
     }
 
-    if (!(item.type === Button || item.type === AnchorButton)) {
+    if (
+      !(item.type === Button || item.type === AnchorButton || item.type === RemoteDialogTrigger)
+    ) {
       return item
     }
 

diff --git a/...rthr-ui/src/components/Dropdown/DropdownMenuButton/stories/DropdownMenuButton.stories.tsx b/...rthr-ui/src/components/Dropdown/DropdownMenuButton/stories/DropdownMenuButton.stories.tsx
@@ -1,6 +1,8 @@
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 
-import { Button } from '../../../Button'
+import { AnchorButton, Button } from '../../../Button'
+import { RemoteDialogTrigger } from '../../../Dialog'
 import { FaGearIcon } from '../../../Icon'
 import { DropdownMenuButton } from '../DropdownMenuButton'
 import { DropdownMenuGroup } from '../DropdownMenuGroup'
@@ -19,8 +21,10 @@ export default {
   render: (args) => (
     <DropdownMenuButton {...args}>
       <Button>操作1</Button>
-      <Button>操作2</Button>
-      <Button>操作3</Button>
+      <AnchorButton href="#">操作2</AnchorButton>
+      <RemoteDialogTrigger targetId="remoteDialog" onClick={action('open-remote-dialog')}>
+        <Button>操作3</Button>
+      </RemoteDialogTrigger>
     </DropdownMenuButton>
   ),
   argTypes: {

diff --git a/...r-ui/src/components/Dropdown/DropdownMenuButton/stories/VRTDropdownMenuButton.stories.tsx b/...r-ui/src/components/Dropdown/DropdownMenuButton/stories/VRTDropdownMenuButton.stories.tsx
@@ -2,6 +2,7 @@ import { userEvent, within } from '@storybook/test'
 import React, { ComponentProps } from 'react'
 
 import { AnchorButton, Button } from '../../../Button'
+import { RemoteDialogTrigger } from '../../../Dialog'
 import { FaGearIcon } from '../../../Icon'
 import { Cluster } from '../../../Layout'
 import { DropdownMenuButton } from '../DropdownMenuButton'
@@ -43,7 +44,9 @@ export default {
               操作2
             </Button>
           </DropdownMenuGroup>
-          <Button>操作3</Button>
+          <RemoteDialogTrigger targetId="remote-dialog">
+            <Button>操作3</Button>
+          </RemoteDialogTrigger>
           <DropdownMenuGroup name="グループ2">
             <AnchorButton href="#">操作4</AnchorButton>
             <AnchorButton href="#">操作5</AnchorButton>