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 })}
/>
);
};