diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index c9b0245..4ce494b 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/src/components/dropdown-menu/dropdown-menu.tsx @@ -124,8 +124,7 @@ const Trigger: FC<{ size={size} variant="contained" endIcon={} - {...props.restProps} - {...getTriggerProps(props.actionProps)} + {...getTriggerProps(props)} > {text} @@ -149,8 +148,7 @@ const IconTrigger: FC<{ 'inline-flex rounded-full bg-bgTransparent hover:bg-bgHover focus-visible:ring-2 focus-visible:ring-borderFocus active:bg-bgActive', 'p-2', )} - {...props.restProps} - {...getTriggerProps(props.actionProps)} + {...getTriggerProps(props)} > {label} {icon} diff --git a/src/components/dropdown-menu/hooks.ts b/src/components/dropdown-menu/hooks.ts index e99b3a6..4ea47fd 100644 --- a/src/components/dropdown-menu/hooks.ts +++ b/src/components/dropdown-menu/hooks.ts @@ -21,7 +21,10 @@ type MenuContext = { userProps?: HTMLProps, ) => Record; getItemProps: ( - userProps?: Omit, 'selected' | 'active'>, + userProps?: Omit< + HTMLProps, + 'selected' | 'active' + >, ) => Record; }; diff --git a/src/components/list-box/list-box.tsx b/src/components/list-box/list-box.tsx index e6a447e..1879f46 100644 --- a/src/components/list-box/list-box.tsx +++ b/src/components/list-box/list-box.tsx @@ -152,8 +152,7 @@ const Trigger: FC<{ variant="contained" fullWidth endIcon={} - {...props.restProps} - {...getTriggerProps(props.actionProps)} + {...getTriggerProps(props)} > {label} diff --git a/src/components/popover/hooks.ts b/src/components/popover/hooks.ts index 4a4f6b6..58bd81f 100644 --- a/src/components/popover/hooks.ts +++ b/src/components/popover/hooks.ts @@ -9,6 +9,7 @@ import { import { createContext, CSSProperties, + HTMLProps, KeyboardEvent, MutableRefObject, useContext, @@ -142,75 +143,66 @@ export const usePopoverContent = () => { ); }; -export const usePopoverTrigger = () => { +export const usePopoverTrigger = (): Omit< + HTMLProps, + 'selected' | 'active' +> => { const popover = usePopoverContext(); return useMemo(() => { switch (popover.type) { case 'tooltip': return { - actionProps: { - onMouseEnter: popover.onOpen, - onMouseLeave: popover.onClose, - onFocus: popover.onOpen, - onBlur: popover.onClose, - }, - restProps: { - 'aria-describedby': `${popover.rootId}_content`, - ref: popover.setTriggerRef, - }, + onMouseEnter: popover.onOpen, + onMouseLeave: popover.onClose, + onFocus: popover.onOpen, + onBlur: popover.onClose, + 'aria-describedby': `${popover.rootId}_content`, + ref: popover.setTriggerRef, }; case 'menu': return { - actionProps: { - onClick: popover.toggleOpen, - onKeyDown: (e: KeyboardEvent) => { - if (e.key === 'Enter') { - e.preventDefault(); - popover.toggleOpen(); - } - if (e.key === 'ArrowUp') { - e.preventDefault(); - popover.onOpen(); - } - if (e.key === 'ArrowDown') { - e.preventDefault(); - popover.onOpen(); - } - }, - }, - restProps: { - 'aria-haspopup': 'menu', - 'aria-expanded': popover.isOpen, - 'aria-controls': `${popover.rootId}_list`, - ref: popover.setTriggerRef, + onClick: popover.toggleOpen, + onKeyDown: (e: KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + popover.toggleOpen(); + } + if (e.key === 'ArrowUp') { + e.preventDefault(); + popover.onOpen(); + } + if (e.key === 'ArrowDown') { + e.preventDefault(); + popover.onOpen(); + } }, + 'aria-haspopup': 'menu', + 'aria-expanded': popover.isOpen, + 'aria-controls': `${popover.rootId}_list`, + ref: popover.setTriggerRef, }; case 'listbox': return { - actionProps: { - onClick: popover.toggleOpen, - onKeyDown: (e: KeyboardEvent) => { - if (e.key === 'Enter') { - e.preventDefault(); - popover.toggleOpen(); - } - if (e.key === 'ArrowUp') { - e.preventDefault(); - popover.onOpen(); - } - if (e.key === 'ArrowDown') { - e.preventDefault(); - popover.onOpen(); - } - }, - }, - restProps: { - role: 'combobox', - 'aria-haspopup': 'listbox', - 'aria-expanded': popover.isOpen, - 'aria-controls': `${popover.rootId}_list`, - ref: popover.setTriggerRef, + onClick: popover.toggleOpen, + onKeyDown: (e: KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + popover.toggleOpen(); + } + if (e.key === 'ArrowUp') { + e.preventDefault(); + popover.onOpen(); + } + if (e.key === 'ArrowDown') { + e.preventDefault(); + popover.onOpen(); + } }, + role: 'combobox', + 'aria-haspopup': 'listbox', + 'aria-expanded': popover.isOpen, + 'aria-controls': `${popover.rootId}_list`, + ref: popover.setTriggerRef, }; } }, [popover]); diff --git a/src/components/popover/popover.stories.tsx b/src/components/popover/popover.stories.tsx index 5674150..82ca8e4 100644 --- a/src/components/popover/popover.stories.tsx +++ b/src/components/popover/popover.stories.tsx @@ -15,7 +15,9 @@ export const Default: Story = { ( - + )} /> , 'selected' | 'active'>; - restProps: Record; - allProps: Record; - }) => ReactElement; + renderItem: ( + props: Omit, 'selected' | 'active'>, + ) => ReactElement; }> = ({ renderItem }) => { const props = usePopoverTrigger(); - return renderItem({ - ...props, - allProps: { ...props.actionProps, ...props.restProps }, - }); + return renderItem(props); }; export const Popover = { diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index 8c66c05..e6a120e 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -21,7 +21,7 @@ const Trigger: FC<{ }> = ({ renderItem }) => { return ( renderItem({ ...props.allProps })} + renderItem={(props) => renderItem({ ...props })} /> ); };