chore: DropdownMenuButton の内部ロジックを整理する

packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx

@@ -70,59 +70,88 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
   label,
   children,
   triggerSize,
-  onlyIconTrigger = false,
-  triggerIcon: TriggerIcon,
+  onlyIconTrigger,
+  triggerIcon,
   className,
-  ...props
+  ...rest
 }) => {
   const containerRef = React.useRef<HTMLUListElement>(null)
 
-  const triggerLabel = useMemo(() => {
-    const Icon = TriggerIcon || FaEllipsisIcon
-    return onlyIconTrigger ? (
-      <Icon alt={typeof label === 'string' ? label : innerText(label)} />
-    ) : (
-      label
-    )
-  }, [label, TriggerIcon, onlyIconTrigger])
-  const triggerSuffix = useMemo(
-    () => (onlyIconTrigger ? undefined : <FaCaretDownIcon alt="候補を開く" />),
-    [onlyIconTrigger],
-  )
-
   useKeyboardNavigation(containerRef)
 
+  const styles = useMemo(
+    () => ({
+      triggerWrapper: triggerWrapper({ className }),
+      triggerButton: triggerButton(),
+      actionList: actionList(),
+    }),
+    [className],
+  )
+
   return (
     <Dropdown>
-      <DropdownTrigger className={triggerWrapper({ className })}>
-        <Button
-          {...props}
-          suffix={triggerSuffix}
-          size={triggerSize}
-          square={onlyIconTrigger}
-          className={triggerButton()}
-        >
-          {triggerLabel}
-        </Button>
-      </DropdownTrigger>
+      <MemoizedTriggerButton
+        {...rest}
+        label={label}
+        onlyIconTrigger={onlyIconTrigger}
+        triggerIcon={triggerIcon}
+        triggerSize={triggerSize}
+        wrapperStyle={styles.triggerWrapper}
+        buttonStyle={styles.triggerButton}
+      />
       <DropdownContent>
-        <menu ref={containerRef} className={actionList()}>
+        <menu ref={containerRef} className={styles.actionList}>
           {renderButtonList(children)}
         </menu>
       </DropdownContent>
     </Dropdown>
   )
 }
 
+const MemoizedTriggerButton = React.memo<
+  Pick<Props, 'onlyIconTrigger' | 'triggerSize' | 'label' | 'triggerIcon'> &
+    ElementProps & { wrapperStyle: string; buttonStyle: string }
+>(({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => (
+  <DropdownTrigger className={wrapperStyle}>
+    <Button
+      {...rest}
+      suffix={<ButtonSuffixIcon onlyIconTrigger={onlyIconTrigger} />}
+      size={triggerSize}
+      square={onlyIconTrigger}
+      className={buttonStyle}
+    >
+      <TriggerLabelText label={label} onlyIconTrigger={onlyIconTrigger} triggerIcon={triggerIcon} />
+    </Button>
+  </DropdownTrigger>
+))
+
+const TriggerLabelText = React.memo<Pick<Props, 'label' | 'onlyIconTrigger' | 'triggerIcon'>>(
+  ({ label, onlyIconTrigger, triggerIcon }) => {
+    if (!onlyIconTrigger) {
+      return label
+    }
+
+    const Icon = triggerIcon || FaEllipsisIcon
+
+    return <Icon alt={typeof label === 'string' ? label : innerText(label)} />
+  },
+)
+
+const ButtonSuffixIcon = React.memo<Pick<Props, 'onlyIconTrigger'>>(
+  ({ onlyIconTrigger }) => !onlyIconTrigger && <FaCaretDownIcon alt="候補を開く" />,
+)
+
 export const renderButtonList = (children: Actions) =>
   React.Children.map(children, (item): ReactNode => {
-    if (!(item && React.isValidElement(item))) return null
-    if (item.type === React.Fragment) {
-      return renderButtonList(item.props.children)
+    if (!item || !React.isValidElement(item)) {
+      return null
     }
 
-    if (item.type === DropdownMenuGroup) {
-      return item
+    switch (item.type) {
+      case React.Fragment:
+        return renderButtonList(item.props.children)
+      case DropdownMenuGroup:
+        return item
     }
 
     const actualElement = React.cloneElement(item as ReactElement, {

packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, type PropsWithChildren, type ReactNode } from 'react'
+import React, { ComponentProps, type PropsWithChildren, type ReactNode, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Text } from '../../Text'
@@ -36,13 +36,28 @@ export const DropdownMenuGroup: React.FC<Props & ElementProps> = ({
   name,
   children,
   className,
-}) => (
-  <li className={group({ className })}>
-    {name && (
-      <Text as="p" size="S" weight="bold" color="TEXT_GREY" leading="NONE" className={groupName()}>
-        {name}
+}) => {
+  const styles = useMemo(
+    () => ({
+      group: group({ className }),
+      groupName: groupName(),
+    }),
+    [className],
+  )
+
+  return (
+    <li className={styles.group}>
+      <NameText className={styles.groupName}>{name}</NameText>
+      <ul>{renderButtonList(children)}</ul>
+    </li>
+  )
+}
+
+const NameText = React.memo<PropsWithChildren<{ className: string }>>(
+  ({ children, className }) =>
+    children && (
+      <Text as="p" size="S" weight="bold" color="TEXT_GREY" leading="NONE" className={className}>
+        {children}
       </Text>
-    )}
-    <ul>{renderButtonList(children)}</ul>
-  </li>
+    ),
 )

packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts

@@ -4,35 +4,63 @@ const matchesDisabledState = (element: Element): boolean =>
   element.matches(':disabled') || element.getAttribute('aria-disabled') === 'true'
 
 const isElementDisabled = (element: Element): boolean => {
-  if (matchesDisabledState(element)) return true
-  return Array.from(element.querySelectorAll('*')).some((child) => matchesDisabledState(child))
+  if (matchesDisabledState(element)) {
+    return true
+  }
+
+  return Array.from(element.querySelectorAll('*')).some(matchesDisabledState)
 }
 
-const moveFocus = (
-  direction: number,
-  enabledItems: Element[],
-  focusedIndex: number,
-  hoveredItem: Element | null,
-) => {
-  const calculateNextIndex = () => {
-    if (focusedIndex > -1) {
-      // フォーカスされているアイテムが存在する場合
-      return (focusedIndex + direction + enabledItems.length) % enabledItems.length
-    }
+const KEY_UP_REGEX = /^(Arrow)?(Up|Left)$/
+const KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/
+
+const moveFocus = (element: Element, direction: 1 | -1) => {
+  const { hoveredItem, tabbableItems, focusedIndex } = Array.from(
+    element.querySelectorAll('li > *'),
+  ).reduce(
+    (
+      acc: {
+        hoveredItem: Element | null
+        tabbableItems: Element[]
+        focusedIndex: number
+      },
+      item,
+    ) => {
+      if (item.matches(':hover') && acc.hoveredItem === null) {
+        acc.hoveredItem = item
+      }
 
-    if (hoveredItem) {
-      // ホバー状態のアイテムが存在する場合
-      return (
-        (enabledItems.indexOf(hoveredItem) + direction + enabledItems.length) % enabledItems.length
-      )
-    }
+      if (!isElementDisabled(item)) {
+        acc.tabbableItems.push(item)
+
+        if (document.activeElement === item) {
+          acc.focusedIndex = acc.tabbableItems.length - 1
+        }
+      }
 
-    // どちらもない場合は最初のアイテムからスタート
-    return direction > 0 ? 0 : enabledItems.length - 1
+      return acc
+    },
+    {
+      hoveredItem: null,
+      tabbableItems: [],
+      focusedIndex: -1,
+    },
+  )
+
+  let nextIndex = 0
+
+  if (focusedIndex > -1) {
+    // フォーカスされているアイテムが存在する場合
+    nextIndex = (focusedIndex + direction + tabbableItems.length) % tabbableItems.length
+  } else if (hoveredItem) {
+    // ホバー状態のアイテムが存在する場合
+    nextIndex =
+      (tabbableItems.indexOf(hoveredItem) + direction + tabbableItems.length) % tabbableItems.length
+  } else if (direction === -1) {
+    nextIndex = tabbableItems.length - 1
   }
 
-  const nextIndex = calculateNextIndex()
-  const nextItem = enabledItems[nextIndex]
+  const nextItem = tabbableItems[nextIndex]
 
   if (nextItem instanceof HTMLElement) {
     nextItem.focus()
@@ -46,57 +74,18 @@ const useKeyboardNavigation = (containerRef: React.RefObject<HTMLElement>) => {
         return
       }
 
-      const allItems = Array.from(containerRef.current.querySelectorAll('li > *'))
-      const {
-        hoveredItem,
-        tabbableItems: enabledItems,
-        focusedIndex,
-      } = allItems.reduce(
-        (
-          acc: {
-            hoveredItem: Element | null
-            tabbableItems: Element[]
-            focusedIndex: number
-          },
-          item,
-        ) => {
-          if (item.matches(':hover') && acc.hoveredItem === null) {
-            acc.hoveredItem = item
-          }
-
-          const isDisabled = isElementDisabled(item)
-
-          if (isDisabled) {
-            return acc
-          }
-
-          acc.tabbableItems.push(item)
-          if (document.activeElement === item) {
-            acc.focusedIndex = acc.tabbableItems.length - 1
-          }
-
-          return acc
-        },
-        {
-          hoveredItem: null,
-          tabbableItems: [],
-          focusedIndex: -1,
-        },
-      )
-
-      if (['Up', 'ArrowUp', 'Left', 'ArrowLeft'].includes(e.key)) {
-        moveFocus(-1, enabledItems, focusedIndex, hoveredItem)
-      }
-
-      if (['Down', 'ArrowDown', 'Right', 'ArrowRight'].includes(e.key)) {
-        moveFocus(1, enabledItems, focusedIndex, hoveredItem)
+      if (KEY_UP_REGEX.test(e.key)) {
+        moveFocus(containerRef.current, -1)
+      } else if (KEY_DOWN_REGEX.test(e.key)) {
+        moveFocus(containerRef.current, 1)
       }
     },
     [containerRef],
   )
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown)
+
     return () => {
       document.removeEventListener('keydown', handleKeyDown)
     }