TriggerのrenderItemをHTMLPropsで解決させる

k35o · Sep 21, 2024 · 149b5f0 · 149b5f0
1 parent 283cecb
commit 149b5f0
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 74 deletions.
diff --git 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={<ChevronDown className="size-8" />}
- {...props.restProps}
- {...getTriggerProps(props.actionProps)}
+ {...getTriggerProps(props)}
  >
  {text}
  </Button>
@@ -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)}
  >
  <span className="sr-only">{label}</span>
  {icon}

diff --git a/src/components/dropdown-menu/hooks.ts b/src/components/dropdown-menu/hooks.ts
@@ -21,7 +21,10 @@ type MenuContext = {
  userProps?: HTMLProps<HTMLElement>,
  ) => Record<string, unknown>;
  getItemProps: (
- userProps?: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'>,
+ userProps?: Omit<
+ HTMLProps<HTMLButtonElement>,
+ 'selected' | 'active'
+ >,
  ) => Record<string, unknown>;
 };
 

diff --git 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={<ChevronDown className="size-8" />}
- {...props.restProps}
- {...getTriggerProps(props.actionProps)}
+ {...getTriggerProps(props)}
  >
  {label}
  </Button>

diff --git 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<HTMLButtonElement>,
+ '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
@@ -15,7 +15,9 @@ export const Default: Story = {
  <Popover.Root>
  <Popover.Trigger
  renderItem={(props) => (
- <Button {...props.allProps}>Popover</Button>
+ <Button {...props} type="button" size="md">
+ Popover
+ </Button>
  )}
  />
  <Popover.Content

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -167,18 +167,13 @@ const Content: FC<{
 };
 
 const Trigger: FC<{
- renderItem: (props: {
- actionProps: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'>;
- restProps: Record<string, unknown>;
- allProps: Record<string, unknown>;
- }) => ReactElement;
+ renderItem: (
+ props: Omit<HTMLProps<HTMLButtonElement>, '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
@@ -21,7 +21,7 @@ const Trigger: FC<{
 }> = ({ renderItem }) => {
  return (
  <Popover.Trigger
- renderItem={(props) => renderItem({ ...props.allProps })}
+ renderItem={(props) => renderItem({ ...props })}
  />
  );
 };