smarthr-ui 99.3.2 → 99.4.0

package/lib/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  handleClickTrigger: (rect: Rect) => void\n  handleDelegateClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  handleClickTrigger: () => {\n    /* noop */\n  },\n  handleDelegateClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n\n  const contentId = useId()\n  const { createPortal, portalRoot, isChildPortal, PortalParentProvider } = usePortal({\n    rootId: contentId,\n  })\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n\n  const latest = useLatest({\n    active,\n    isChildPortal,\n    portalRoot,\n    onOpen,\n    onClose,\n    createPortal,\n  })\n\n  const functions = useMemo(() => {\n    // This is the root container of a dropdown content located in outside the DOM tree\n    const DropdownContentRoot: FC<{ children: ReactNode }> = (props) =>\n      latest.active ? latest.createPortal(props.children) : null\n    DropdownContentRoot.displayName = 'DropdownContentRoot'\n\n    return {\n      DropdownContentRoot,\n      handleClickTrigger: (rect: Rect) => {\n        if (latest.active) {\n          setActive(false)\n          if (latest.onClose) requestAnimationFrame(() => latest.onClose?.())\n        } else {\n          setActive(true)\n          setTriggerRect(rect)\n          if (latest.onOpen) requestAnimationFrame(() => latest.onOpen?.())\n        }\n      },\n      handleDelegateClickCloser: () => {\n        setActive(false)\n        if (latest.onClose) requestAnimationFrame(() => latest.onClose?.())\n\n        // return focus to the Trigger\n        getFirstTabbable(triggerElementRef)?.focus()\n      },\n      handleClickBody: (e: any) => {\n        // ignore events from events within DropdownTrigger and DropdownContent\n        if (\n          latest.active &&\n          !isEventFromChild(e, triggerElementRef.current) &&\n          !latest.isChildPortal(e.target)\n        ) {\n          setActive(false)\n\n          if (latest.onClose) {\n            requestAnimationFrame(() => latest.onClose?.())\n          }\n        }\n      },\n      updateTriggerRect: () => {\n        if (triggerElementRef.current) {\n          setTriggerRect(triggerElementRef.current.getBoundingClientRect())\n        }\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    if (!active) return\n\n    document.body.addEventListener('click', functions.handleClickBody, false)\n    window.addEventListener('scroll', functions.updateTriggerRect, { passive: true })\n    window.addEventListener('resize', functions.updateTriggerRect, { passive: true })\n\n    return () => {\n      document.body.removeEventListener('click', functions.handleClickBody, false)\n      window.removeEventListener('scroll', functions.updateTriggerRect)\n      window.removeEventListener('resize', functions.updateTriggerRect)\n    }\n  }, [active, functions])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          handleClickTrigger: functions.handleClickTrigger,\n          handleDelegateClickCloser: functions.handleDelegateClickCloser,\n          DropdownContentRoot: functions.DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAML;;AAEE;AACD;AAED;;;;;;;;AASC;AAED;;;AAIE;;;AAIE;AACE;;;;;;;;;;;;;;;;;AAcA;;AAEF;;;AAII;;;AAKA;;;;;;AAMF;;;;;AAKN;;AAGE;;AAEA;AACA;AACA;AAEA;AACE;;;AAGF;AACF;;;;;AASQ;;;;;AAKD;AAMT;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useAnimationFrame } from '../../hooks/useAnimationFrame'\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  handleClickTrigger: (rect: Rect) => void\n  handleDelegateClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  handleClickTrigger: () => {\n    /* noop */\n  },\n  handleDelegateClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n\n  const contentId = useId()\n  const { createPortal, portalRoot, isChildPortal, PortalParentProvider } = usePortal({\n    rootId: contentId,\n  })\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const openFrame = useAnimationFrame()\n  const closeFrame = useAnimationFrame()\n\n  const latest = useLatest({\n    active,\n    isChildPortal,\n    portalRoot,\n    onOpen,\n    onClose,\n    createPortal,\n    openFrame,\n    closeFrame,\n  })\n\n  const functions = useMemo(() => {\n    // This is the root container of a dropdown content located in outside the DOM tree\n    const DropdownContentRoot: FC<{ children: ReactNode }> = (props) =>\n      latest.active ? latest.createPortal(props.children) : null\n    DropdownContentRoot.displayName = 'DropdownContentRoot'\n    const actualClose = () => {\n      if (latest.onClose) {\n        latest.closeFrame.request(() => latest.onClose?.())\n      }\n    }\n\n    return {\n      DropdownContentRoot,\n      handleClickTrigger: (rect: Rect) => {\n        if (latest.active) {\n          setActive(false)\n          actualClose()\n        } else {\n          setActive(true)\n          setTriggerRect(rect)\n\n          if (latest.onOpen) {\n            latest.openFrame.request(() => latest.onOpen?.())\n          }\n        }\n      },\n      handleDelegateClickCloser: () => {\n        setActive(false)\n        actualClose()\n\n        // return focus to the Trigger\n        getFirstTabbable(triggerElementRef)?.focus()\n      },\n      handleClickBody: (e: any) => {\n        // ignore events from events within DropdownTrigger and DropdownContent\n        if (\n          latest.active &&\n          !isEventFromChild(e, triggerElementRef.current) &&\n          !latest.isChildPortal(e.target)\n        ) {\n          setActive(false)\n          actualClose()\n        }\n      },\n      updateTriggerRect: () => {\n        if (triggerElementRef.current) {\n          setTriggerRect(triggerElementRef.current.getBoundingClientRect())\n        }\n      },\n    }\n  }, [latest])\n\n  useEffect(\n    () => () => {\n      latest.openFrame.cancel()\n      latest.closeFrame.cancel()\n    },\n    [latest],\n  )\n\n  useEffect(() => {\n    if (!active) return\n\n    document.body.addEventListener('click', functions.handleClickBody, false)\n    window.addEventListener('scroll', functions.updateTriggerRect, { passive: true })\n    window.addEventListener('resize', functions.updateTriggerRect, { passive: true })\n\n    return () => {\n      document.body.removeEventListener('click', functions.handleClickBody, false)\n      window.removeEventListener('scroll', functions.updateTriggerRect)\n      window.removeEventListener('resize', functions.updateTriggerRect)\n    }\n  }, [active, functions])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          handleClickTrigger: functions.handleClickTrigger,\n          handleDelegateClickCloser: functions.handleDelegateClickCloser,\n          DropdownContentRoot: functions.DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAuCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAML;;AAEE;AACD;AAED;AACA;AACA;;;;;;;;;;AAWC;AAED;;;AAIE;;AAEE;AACE;;AAEJ;;;AAIE;AACE;;AAEE;;;;;AAKA;AACE;;;;;;AAMJ;;AAGA;;AAEF;;;AAII;;;AAIA;;;;AAIF;;;;;AAKN;AAEA;AAEI;AACA;AACF;;AAKA;;AAEA;AACA;AACA;AAEA;AACE;;;AAGF;AACF;;;;;AASQ;;;;;AAKD;AAMT;;;"}

package/lib/components/Dropdown/Dropdown.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, createRef, useState, useContext, useId, useRef, useMemo, useEffect } from 'react';
+import { useAnimationFrame } from '../../hooks/useAnimationFrame.js';
 import { useLatest } from '../../hooks/useLatest.js';
 import { usePortal } from '../../hooks/usePortal.js';
 import { isEventFromChild, getFirstTabbable } from './dropdownHelper.js';
@@ -29,6 +30,8 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         rootId: contentId,
     });
     const triggerElementRef = useRef(null);
+    const openFrame = useAnimationFrame();
+    const closeFrame = useAnimationFrame();
     const latest = useLatest({
         active,
         isChildPortal,
@@ -36,30 +39,36 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         onOpen,
         onClose,
         createPortal,
+        openFrame,
+        closeFrame,
     });
     const functions = useMemo(() => {
         // This is the root container of a dropdown content located in outside the DOM tree
         const DropdownContentRoot = (props) => latest.active ? latest.createPortal(props.children) : null;
         DropdownContentRoot.displayName = 'DropdownContentRoot';
+        const actualClose = () => {
+            if (latest.onClose) {
+                latest.closeFrame.request(() => latest.onClose?.());
+            }
+        };
         return {
             DropdownContentRoot,
             handleClickTrigger: (rect) => {
                 if (latest.active) {
                     setActive(false);
-                    if (latest.onClose)
-                        requestAnimationFrame(() => latest.onClose?.());
+                    actualClose();
                 }
                 else {
                     setActive(true);
                     setTriggerRect(rect);
-                    if (latest.onOpen)
-                        requestAnimationFrame(() => latest.onOpen?.());
+                    if (latest.onOpen) {
+                        latest.openFrame.request(() => latest.onOpen?.());
+                    }
                 }
             },
             handleDelegateClickCloser: () => {
                 setActive(false);
-                if (latest.onClose)
-                    requestAnimationFrame(() => latest.onClose?.());
+                actualClose();
                 // return focus to the Trigger
                 getFirstTabbable(triggerElementRef)?.focus();
             },
@@ -69,9 +78,7 @@ const Dropdown = ({ onOpen, onClose, children }) => {
                     !isEventFromChild(e, triggerElementRef.current) &&
                     !latest.isChildPortal(e.target)) {
                     setActive(false);
-                    if (latest.onClose) {
-                        requestAnimationFrame(() => latest.onClose?.());
-                    }
+                    actualClose();
                 }
             },
             updateTriggerRect: () => {
@@ -81,6 +88,10 @@ const Dropdown = ({ onOpen, onClose, children }) => {
             },
         };
     }, [latest]);
+    useEffect(() => () => {
+        latest.openFrame.cancel();
+        latest.closeFrame.cancel();
+    }, [latest]);
     useEffect(() => {
         if (!active)
             return;

package/lib/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  handleClickTrigger: (rect: Rect) => void\n  handleDelegateClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  handleClickTrigger: () => {\n    /* noop */\n  },\n  handleDelegateClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n\n  const contentId = useId()\n  const { createPortal, portalRoot, isChildPortal, PortalParentProvider } = usePortal({\n    rootId: contentId,\n  })\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n\n  const latest = useLatest({\n    active,\n    isChildPortal,\n    portalRoot,\n    onOpen,\n    onClose,\n    createPortal,\n  })\n\n  const functions = useMemo(() => {\n    // This is the root container of a dropdown content located in outside the DOM tree\n    const DropdownContentRoot: FC<{ children: ReactNode }> = (props) =>\n      latest.active ? latest.createPortal(props.children) : null\n    DropdownContentRoot.displayName = 'DropdownContentRoot'\n\n    return {\n      DropdownContentRoot,\n      handleClickTrigger: (rect: Rect) => {\n        if (latest.active) {\n          setActive(false)\n          if (latest.onClose) requestAnimationFrame(() => latest.onClose?.())\n        } else {\n          setActive(true)\n          setTriggerRect(rect)\n          if (latest.onOpen) requestAnimationFrame(() => latest.onOpen?.())\n        }\n      },\n      handleDelegateClickCloser: () => {\n        setActive(false)\n        if (latest.onClose) requestAnimationFrame(() => latest.onClose?.())\n\n        // return focus to the Trigger\n        getFirstTabbable(triggerElementRef)?.focus()\n      },\n      handleClickBody: (e: any) => {\n        // ignore events from events within DropdownTrigger and DropdownContent\n        if (\n          latest.active &&\n          !isEventFromChild(e, triggerElementRef.current) &&\n          !latest.isChildPortal(e.target)\n        ) {\n          setActive(false)\n\n          if (latest.onClose) {\n            requestAnimationFrame(() => latest.onClose?.())\n          }\n        }\n      },\n      updateTriggerRect: () => {\n        if (triggerElementRef.current) {\n          setTriggerRect(triggerElementRef.current.getBoundingClientRect())\n        }\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    if (!active) return\n\n    document.body.addEventListener('click', functions.handleClickBody, false)\n    window.addEventListener('scroll', functions.updateTriggerRect, { passive: true })\n    window.addEventListener('resize', functions.updateTriggerRect, { passive: true })\n\n    return () => {\n      document.body.removeEventListener('click', functions.handleClickBody, false)\n      window.removeEventListener('scroll', functions.updateTriggerRect)\n      window.removeEventListener('resize', functions.updateTriggerRect)\n    }\n  }, [active, functions])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          handleClickTrigger: functions.handleClickTrigger,\n          handleDelegateClickCloser: functions.handleDelegateClickCloser,\n          DropdownContentRoot: functions.DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAML;;AAEE;AACD;AAED;;;;;;;;AASC;AAED;;;AAIE;;;AAIE;AACE;;;;;;;;;;;;;;;;;AAcA;;AAEF;;;AAII;;;AAKA;;;;;;AAMF;;;;;AAKN;;AAGE;;AAEA;AACA;AACA;AAEA;AACE;;;AAGF;AACF;;;;;AASQ;;;;;AAKD;AAMT;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useAnimationFrame } from '../../hooks/useAnimationFrame'\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  handleClickTrigger: (rect: Rect) => void\n  handleDelegateClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  handleClickTrigger: () => {\n    /* noop */\n  },\n  handleDelegateClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n\n  const contentId = useId()\n  const { createPortal, portalRoot, isChildPortal, PortalParentProvider } = usePortal({\n    rootId: contentId,\n  })\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const openFrame = useAnimationFrame()\n  const closeFrame = useAnimationFrame()\n\n  const latest = useLatest({\n    active,\n    isChildPortal,\n    portalRoot,\n    onOpen,\n    onClose,\n    createPortal,\n    openFrame,\n    closeFrame,\n  })\n\n  const functions = useMemo(() => {\n    // This is the root container of a dropdown content located in outside the DOM tree\n    const DropdownContentRoot: FC<{ children: ReactNode }> = (props) =>\n      latest.active ? latest.createPortal(props.children) : null\n    DropdownContentRoot.displayName = 'DropdownContentRoot'\n    const actualClose = () => {\n      if (latest.onClose) {\n        latest.closeFrame.request(() => latest.onClose?.())\n      }\n    }\n\n    return {\n      DropdownContentRoot,\n      handleClickTrigger: (rect: Rect) => {\n        if (latest.active) {\n          setActive(false)\n          actualClose()\n        } else {\n          setActive(true)\n          setTriggerRect(rect)\n\n          if (latest.onOpen) {\n            latest.openFrame.request(() => latest.onOpen?.())\n          }\n        }\n      },\n      handleDelegateClickCloser: () => {\n        setActive(false)\n        actualClose()\n\n        // return focus to the Trigger\n        getFirstTabbable(triggerElementRef)?.focus()\n      },\n      handleClickBody: (e: any) => {\n        // ignore events from events within DropdownTrigger and DropdownContent\n        if (\n          latest.active &&\n          !isEventFromChild(e, triggerElementRef.current) &&\n          !latest.isChildPortal(e.target)\n        ) {\n          setActive(false)\n          actualClose()\n        }\n      },\n      updateTriggerRect: () => {\n        if (triggerElementRef.current) {\n          setTriggerRect(triggerElementRef.current.getBoundingClientRect())\n        }\n      },\n    }\n  }, [latest])\n\n  useEffect(\n    () => () => {\n      latest.openFrame.cancel()\n      latest.closeFrame.cancel()\n    },\n    [latest],\n  )\n\n  useEffect(() => {\n    if (!active) return\n\n    document.body.addEventListener('click', functions.handleClickBody, false)\n    window.addEventListener('scroll', functions.updateTriggerRect, { passive: true })\n    window.addEventListener('resize', functions.updateTriggerRect, { passive: true })\n\n    return () => {\n      document.body.removeEventListener('click', functions.handleClickBody, false)\n      window.removeEventListener('scroll', functions.updateTriggerRect)\n      window.removeEventListener('resize', functions.updateTriggerRect)\n    }\n  }, [active, functions])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          handleClickTrigger: functions.handleClickTrigger,\n          handleDelegateClickCloser: functions.handleDelegateClickCloser,\n          DropdownContentRoot: functions.DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAuCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAML;;AAEE;AACD;AAED;AACA;AACA;;;;;;;;;;AAWC;AAED;;;AAIE;;AAEE;AACE;;AAEJ;;;AAIE;AACE;;AAEE;;;;;AAKA;AACE;;;;;;AAMJ;;AAGA;;AAEF;;;AAII;;;AAIA;;;;AAIF;;;;;AAKN;AAEA;AAEI;AACA;AACF;;AAKA;;AAEA;AACA;AACA;AAEA;AACE;;;AAGF;AACF;;;;;AASQ;;;;;AAKD;AAMT;;"}

package/lib/components/Dropdown/DropdownCloser.cjs

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var components_Dropdown_DropdownContent = require('./DropdownContent.cjs');
 var components_Dropdown_DropdownContentInner = require('./DropdownContentInner.cjs');
 

package/lib/components/Dropdown/DropdownCloser.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo } from 'react';
-import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { DropdownContentContext } from './DropdownContent.js';
 import { DropdownContentInnerContext } from './DropdownContentInner.js';
 

package/lib/components/Dropdown/DropdownContentInner.cjs

@@ -3,12 +3,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useLatest = require('../../hooks/useLatest.cjs');
 var hooks_useTheme = require('../../hooks/useTheme.cjs');
+var libs_tabbable = require('../../libs/tabbable.cjs');
+var components_Dropdown_Dropdown = require('./Dropdown.cjs');
 var components_Dropdown_DropdownCloser = require('./DropdownCloser.cjs');
 var components_Dropdown_dropdownHelper = require('./dropdownHelper.cjs');
-var components_Dropdown_useKeyboardNavigation = require('./useKeyboardNavigation.cjs');
 
+const KEY_ESCAPE = /^Esc(ape)?$/;
 const classNameGenerator = index.tv({
     base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',
     variants: {
@@ -73,7 +76,80 @@ const DropdownContentInner = ({ triggerRect, children, className, controllable,
             focusTargetRef.current?.focus();
         }
     }, [isActive]);
-    components_Dropdown_useKeyboardNavigation.useKeyboardNavigation(wrapperRef, focusTargetRef);
+    const { triggerElementRef, rootTriggerRef, handleDelegateClickCloser } = React.useContext(components_Dropdown_Dropdown.DropdownContext);
+    const latest = hooks_useLatest.useLatest({
+        triggerElementRef,
+        rootTriggerRef,
+        handleDelegateClickCloser,
+    });
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Tab') {
+                if (!wrapperRef.current ||
+                    !latest.triggerElementRef.current ||
+                    !latest.rootTriggerRef?.current) {
+                    return;
+                }
+                const tabbablesInContent = libs_tabbable.tabbable(wrapperRef.current);
+                if (tabbablesInContent.length === 0) {
+                    return;
+                }
+                const trigger = libs_tabbable.tabbable(latest.triggerElementRef.current).at(-1);
+                const firstTabbable = tabbablesInContent[0];
+                if (e.target === trigger) {
+                    if (e.shiftKey) {
+                        // move focus previous of the Trigger
+                        return;
+                    }
+                    // focus a first tabbable element in the dropdown content
+                    e.preventDefault();
+                    firstTabbable.focus();
+                    return;
+                }
+                else if (e.shiftKey) {
+                    if (e.target === firstTabbable || e.target === focusTargetRef.current) {
+                        // focus the Trigger
+                        e.preventDefault();
+                        trigger.focus();
+                        latest.handleDelegateClickCloser();
+                    }
+                }
+                else if (e.target === tabbablesInContent.at(-1)) {
+                    // move focus next of the Trigger
+                    const rootTrigger = libs_tabbable.tabbable(latest.rootTriggerRef.current).at(-1);
+                    if (rootTrigger) {
+                        rootTrigger.focus();
+                        latest.handleDelegateClickCloser();
+                    }
+                }
+            }
+            else if (KEY_ESCAPE.test(e.key)) {
+                if (e.target && e.target === focusTargetRef.current) {
+                    latest.handleDelegateClickCloser();
+                    return;
+                }
+                const trigger = components_Dropdown_dropdownHelper.getFirstTabbable(latest.triggerElementRef);
+                if (trigger && e.target === trigger) {
+                    // close the dropdown when the Trigger is focused and Esc key is pressed
+                    latest.handleDelegateClickCloser();
+                    return;
+                }
+                if (wrapperRef.current) {
+                    for (const inner of libs_tabbable.tabbable(wrapperRef.current)) {
+                        if (inner === e.target) {
+                            // close the dropdown when an element that is included in dropdown content is focused and Esc key is pressed
+                            latest.handleDelegateClickCloser();
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [latest]);
     return (jsxRuntime.jsxs("div", { ...rest, ref: wrapperRef, className: actualClassName, style: style, children: [jsxRuntime.jsx("div", { ref: focusTargetRef, tabIndex: -1 }), controllable ? (jsxRuntime.jsx("div", { style: {
                     maxHeight: contentBox.maxHeight || undefined,
                 }, children: children })) : (jsxRuntime.jsx(DropdownContentInnerContext.Provider, { value: { maxHeight: contentBox.maxHeight }, children: jsxRuntime.jsx(components_Dropdown_DropdownCloser.DropdownCloser, { children: children }) }))] }));

package/lib/components/Dropdown/DropdownContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContentInner.cjs","sources":["../../../src/components/Dropdown/DropdownContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\n\nimport { DropdownCloser } from './DropdownCloser'\nimport { type ContentBoxStyle, type Rect, getContentBoxStyle } from './dropdownHelper'\nimport { useKeyboardNavigation } from './useKeyboardNavigation'\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n  variants: {\n    isActive: {\n      true: 'shr-visible',\n      false: 'shr-invisible',\n    },\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  triggerRect: Rect\n  controllable: boolean\n}>\n\nexport type ElementProps = Omit<ComponentProps<'div'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\ntype DropdownContentInnerContextType = {\n  maxHeight: string\n}\n\nexport const DropdownContentInnerContext = createContext<DropdownContentInnerContextType>({\n  maxHeight: '',\n})\n\nexport const DropdownContentInner: FC<Props> = ({\n  triggerRect,\n  children,\n  className,\n  controllable,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const [isActive, setIsActive] = useState(false)\n  const [contentBox, setContentBox] = useState<ContentBoxStyle>({\n    top: 'auto',\n    maxHeight: '',\n  })\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isActive, className }),\n    [isActive, className],\n  )\n\n  const style = (() => {\n    const defaultMargin = theme.spacingByChar(0.5)\n    const leftMargin =\n      contentBox.left === undefined ? defaultMargin : `max(${contentBox.left}, 0px)`\n    const rightMargin =\n      contentBox.right === undefined ? defaultMargin : `max(${contentBox.right}, 0px)`\n    const maxWidthStyle = `calc(100% - ${leftMargin} - ${rightMargin})`\n\n    return {\n      insetBlockStart: contentBox.top,\n      insetInlineStart: contentBox.left || undefined,\n      insetInlineEnd: contentBox.right || undefined,\n      maxWidth: maxWidthStyle,\n    }\n  })()\n\n  useEffect(() => {\n    if (wrapperRef.current) {\n      setContentBox(\n        getContentBoxStyle(\n          triggerRect,\n          {\n            width: wrapperRef.current.offsetWidth,\n            height: wrapperRef.current.offsetHeight,\n          },\n          {\n            width: document.body.clientWidth,\n            height: innerHeight,\n          },\n          {\n            top: scrollY,\n            left: scrollX,\n          },\n        ),\n      )\n      setIsActive(true)\n    }\n  }, [triggerRect])\n\n  // setIsActive(true) と同じ useEffect 内で直接 focus() を呼ぶことはできない。\n  // このコンポーネントは Dropdown が開かれた時のみマウントされるが、マウント直後は\n  // 位置計算が完了していないためコンテンツが誤った位置にちらつくのを防ぐために\n  // shr-invisible (visibility: hidden) でレンダリングされる。\n  // ちらつき防止には実寸法を保持したまま視覚的に隠せる visibility: hidden が唯一の手段となる。\n  // visibility: hidden の要素はフォーカスを受け付けないため、setIsActive(true) の直後に\n  // focus() を呼んでも DOM がまだ更新されておらず無効になる。\n  //\n  // useEffect([isActive]) であれば、isActive=true になった後の render commit 後に\n  // 必ず実行されることが保証されるため、この実装が最も信頼性が高い。\n  useEffect(() => {\n    if (isActive) {\n      focusTargetRef.current?.focus()\n    }\n  }, [isActive])\n\n  useKeyboardNavigation(wrapperRef, focusTargetRef)\n\n  return (\n    <div {...rest} ref={wrapperRef} className={actualClassName} style={style}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n      <div ref={focusTargetRef} tabIndex={-1} />\n      {controllable ? (\n        <div\n          style={{\n            maxHeight: contentBox.maxHeight || undefined,\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        <DropdownContentInnerContext.Provider value={{ maxHeight: contentBox.maxHeight }}>\n          <DropdownCloser>{children}</DropdownCloser>\n        </DropdownContentInnerContext.Provider>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAcM;AACL;AACD;AAEM;AAOL;;AAEA;AACE;AACA;AACD;AACD;AACA;;AAOA;;AAEE;AAEA;AAEA;;;AAIE;AACA;AACA;;;;AAKF;AACE;AAIM;AACA;;AAGA;AACA;;AAGA;AACA;AACD;;;AAKT;;;;;;;;;;;;;AAcI;;AAEJ;AAEA;AAEA;AAOU;AACD;AAWX;;;"}
+{"version":3,"file":"DropdownContentInner.cjs","sources":["../../../src/components/Dropdown/DropdownContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { tabbable } from '../../libs/tabbable'\n\nimport { DropdownContext } from './Dropdown'\nimport { DropdownCloser } from './DropdownCloser'\nimport {\n  type ContentBoxStyle,\n  type Rect,\n  getContentBoxStyle,\n  getFirstTabbable,\n} from './dropdownHelper'\n\nconst KEY_ESCAPE = /^Esc(ape)?$/\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n  variants: {\n    isActive: {\n      true: 'shr-visible',\n      false: 'shr-invisible',\n    },\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  triggerRect: Rect\n  controllable: boolean\n}>\n\nexport type ElementProps = Omit<ComponentProps<'div'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\ntype DropdownContentInnerContextType = {\n  maxHeight: string\n}\n\nexport const DropdownContentInnerContext = createContext<DropdownContentInnerContextType>({\n  maxHeight: '',\n})\n\nexport const DropdownContentInner: FC<Props> = ({\n  triggerRect,\n  children,\n  className,\n  controllable,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const [isActive, setIsActive] = useState(false)\n  const [contentBox, setContentBox] = useState<ContentBoxStyle>({\n    top: 'auto',\n    maxHeight: '',\n  })\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isActive, className }),\n    [isActive, className],\n  )\n\n  const style = (() => {\n    const defaultMargin = theme.spacingByChar(0.5)\n    const leftMargin =\n      contentBox.left === undefined ? defaultMargin : `max(${contentBox.left}, 0px)`\n    const rightMargin =\n      contentBox.right === undefined ? defaultMargin : `max(${contentBox.right}, 0px)`\n    const maxWidthStyle = `calc(100% - ${leftMargin} - ${rightMargin})`\n\n    return {\n      insetBlockStart: contentBox.top,\n      insetInlineStart: contentBox.left || undefined,\n      insetInlineEnd: contentBox.right || undefined,\n      maxWidth: maxWidthStyle,\n    }\n  })()\n\n  useEffect(() => {\n    if (wrapperRef.current) {\n      setContentBox(\n        getContentBoxStyle(\n          triggerRect,\n          {\n            width: wrapperRef.current.offsetWidth,\n            height: wrapperRef.current.offsetHeight,\n          },\n          {\n            width: document.body.clientWidth,\n            height: innerHeight,\n          },\n          {\n            top: scrollY,\n            left: scrollX,\n          },\n        ),\n      )\n      setIsActive(true)\n    }\n  }, [triggerRect])\n\n  // setIsActive(true) と同じ useEffect 内で直接 focus() を呼ぶことはできない。\n  // このコンポーネントは Dropdown が開かれた時のみマウントされるが、マウント直後は\n  // 位置計算が完了していないためコンテンツが誤った位置にちらつくのを防ぐために\n  // shr-invisible (visibility: hidden) でレンダリングされる。\n  // ちらつき防止には実寸法を保持したまま視覚的に隠せる visibility: hidden が唯一の手段となる。\n  // visibility: hidden の要素はフォーカスを受け付けないため、setIsActive(true) の直後に\n  // focus() を呼んでも DOM がまだ更新されておらず無効になる。\n  //\n  // useEffect([isActive]) であれば、isActive=true になった後の render commit 後に\n  // 必ず実行されることが保証されるため、この実装が最も信頼性が高い。\n  useEffect(() => {\n    if (isActive) {\n      focusTargetRef.current?.focus()\n    }\n  }, [isActive])\n\n  const { triggerElementRef, rootTriggerRef, handleDelegateClickCloser } =\n    useContext(DropdownContext)\n\n  const latest = useLatest({\n    triggerElementRef,\n    rootTriggerRef,\n    handleDelegateClickCloser,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab') {\n        if (\n          !wrapperRef.current ||\n          !latest.triggerElementRef.current ||\n          !latest.rootTriggerRef?.current\n        ) {\n          return\n        }\n\n        const tabbablesInContent = tabbable(wrapperRef.current)\n\n        if (tabbablesInContent.length === 0) {\n          return\n        }\n\n        const trigger = tabbable(latest.triggerElementRef.current).at(-1)\n        const firstTabbable = tabbablesInContent[0]\n\n        if (e.target === trigger) {\n          if (e.shiftKey) {\n            // move focus previous of the Trigger\n            return\n          }\n\n          // focus a first tabbable element in the dropdown content\n          e.preventDefault()\n          firstTabbable.focus()\n\n          return\n        } else if (e.shiftKey) {\n          if (e.target === firstTabbable || e.target === focusTargetRef.current) {\n            // focus the Trigger\n            e.preventDefault()\n            trigger!.focus()\n            latest.handleDelegateClickCloser()\n          }\n        } else if (e.target === tabbablesInContent.at(-1)) {\n          // move focus next of the Trigger\n          const rootTrigger = tabbable(latest.rootTriggerRef.current).at(-1)\n\n          if (rootTrigger) {\n            rootTrigger.focus()\n            latest.handleDelegateClickCloser()\n          }\n        }\n      } else if (KEY_ESCAPE.test(e.key)) {\n        if (e.target && e.target === focusTargetRef.current) {\n          latest.handleDelegateClickCloser()\n\n          return\n        }\n\n        const trigger = getFirstTabbable(latest.triggerElementRef)\n\n        if (trigger && e.target === trigger) {\n          // close the dropdown when the Trigger is focused and Esc key is pressed\n          latest.handleDelegateClickCloser()\n\n          return\n        }\n\n        if (wrapperRef.current) {\n          for (const inner of tabbable(wrapperRef.current)) {\n            if (inner === e.target) {\n              // close the dropdown when an element that is included in dropdown content is focused and Esc key is pressed\n              latest.handleDelegateClickCloser()\n\n              break\n            }\n          }\n        }\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [latest])\n\n  return (\n    <div {...rest} ref={wrapperRef} className={actualClassName} style={style}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n      <div ref={focusTargetRef} tabIndex={-1} />\n      {controllable ? (\n        <div\n          style={{\n            maxHeight: contentBox.maxHeight || undefined,\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        <DropdownContentInnerContext.Provider value={{ maxHeight: contentBox.maxHeight }}>\n          <DropdownCloser>{children}</DropdownCloser>\n        </DropdownContentInnerContext.Provider>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA;AAEA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAcM;AACL;AACD;AAEM;AAOL;;AAEA;AACE;AACA;AACD;AACD;AACA;;AAOA;;AAEE;AAEA;AAEA;;;AAIE;AACA;AACA;;;;AAKF;AACE;AAIM;AACA;;AAGA;AACA;;AAGA;AACA;AACD;;;AAKT;;;;;;;;;;;;;AAcI;;AAEJ;AAEA;;;;;AAOC;;AAGC;AACE;;AAGI;AACA;;;;AAOF;;;AAIA;AACA;AAEA;AACE;;;;;;;;;AAUK;AACL;;;;;;;AAMK;;AAEL;;;;;;;;AAQF;;;;;;;;;;AAeA;;AAEI;;;;;;;;AASR;AAEA;AAEA;AACE;AACF;AACF;AAEA;AAOU;AACD;AAWX;;;"}

package/lib/components/Dropdown/DropdownContentInner.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useMemo, useEffect } from 'react';
-import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { createContext, useState, useRef, useMemo, useEffect, useContext } from 'react';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
+import { useLatest } from '../../hooks/useLatest.js';
 import { useTheme } from '../../hooks/useTheme.js';
+import { tabbable } from '../../libs/tabbable.js';
+import { DropdownContext } from './Dropdown.js';
 import { DropdownCloser } from './DropdownCloser.js';
-import { getContentBoxStyle } from './dropdownHelper.js';
-import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { getContentBoxStyle, getFirstTabbable } from './dropdownHelper.js';
 
+const KEY_ESCAPE = /^Esc(ape)?$/;
 const classNameGenerator = ce({
     base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',
     variants: {
@@ -71,7 +74,80 @@ const DropdownContentInner = ({ triggerRect, children, className, controllable,
             focusTargetRef.current?.focus();
         }
     }, [isActive]);
-    useKeyboardNavigation(wrapperRef, focusTargetRef);
+    const { triggerElementRef, rootTriggerRef, handleDelegateClickCloser } = useContext(DropdownContext);
+    const latest = useLatest({
+        triggerElementRef,
+        rootTriggerRef,
+        handleDelegateClickCloser,
+    });
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Tab') {
+                if (!wrapperRef.current ||
+                    !latest.triggerElementRef.current ||
+                    !latest.rootTriggerRef?.current) {
+                    return;
+                }
+                const tabbablesInContent = tabbable(wrapperRef.current);
+                if (tabbablesInContent.length === 0) {
+                    return;
+                }
+                const trigger = tabbable(latest.triggerElementRef.current).at(-1);
+                const firstTabbable = tabbablesInContent[0];
+                if (e.target === trigger) {
+                    if (e.shiftKey) {
+                        // move focus previous of the Trigger
+                        return;
+                    }
+                    // focus a first tabbable element in the dropdown content
+                    e.preventDefault();
+                    firstTabbable.focus();
+                    return;
+                }
+                else if (e.shiftKey) {
+                    if (e.target === firstTabbable || e.target === focusTargetRef.current) {
+                        // focus the Trigger
+                        e.preventDefault();
+                        trigger.focus();
+                        latest.handleDelegateClickCloser();
+                    }
+                }
+                else if (e.target === tabbablesInContent.at(-1)) {
+                    // move focus next of the Trigger
+                    const rootTrigger = tabbable(latest.rootTriggerRef.current).at(-1);
+                    if (rootTrigger) {
+                        rootTrigger.focus();
+                        latest.handleDelegateClickCloser();
+                    }
+                }
+            }
+            else if (KEY_ESCAPE.test(e.key)) {
+                if (e.target && e.target === focusTargetRef.current) {
+                    latest.handleDelegateClickCloser();
+                    return;
+                }
+                const trigger = getFirstTabbable(latest.triggerElementRef);
+                if (trigger && e.target === trigger) {
+                    // close the dropdown when the Trigger is focused and Esc key is pressed
+                    latest.handleDelegateClickCloser();
+                    return;
+                }
+                if (wrapperRef.current) {
+                    for (const inner of tabbable(wrapperRef.current)) {
+                        if (inner === e.target) {
+                            // close the dropdown when an element that is included in dropdown content is focused and Esc key is pressed
+                            latest.handleDelegateClickCloser();
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [latest]);
     return (jsxs("div", { ...rest, ref: wrapperRef, className: actualClassName, style: style, children: [jsx("div", { ref: focusTargetRef, tabIndex: -1 }), controllable ? (jsx("div", { style: {
                     maxHeight: contentBox.maxHeight || undefined,
                 }, children: children })) : (jsx(DropdownContentInnerContext.Provider, { value: { maxHeight: contentBox.maxHeight }, children: jsx(DropdownCloser, { children: children }) }))] }));

package/lib/components/Dropdown/DropdownContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContentInner.js","sources":["../../../src/components/Dropdown/DropdownContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\n\nimport { DropdownCloser } from './DropdownCloser'\nimport { type ContentBoxStyle, type Rect, getContentBoxStyle } from './dropdownHelper'\nimport { useKeyboardNavigation } from './useKeyboardNavigation'\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n  variants: {\n    isActive: {\n      true: 'shr-visible',\n      false: 'shr-invisible',\n    },\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  triggerRect: Rect\n  controllable: boolean\n}>\n\nexport type ElementProps = Omit<ComponentProps<'div'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\ntype DropdownContentInnerContextType = {\n  maxHeight: string\n}\n\nexport const DropdownContentInnerContext = createContext<DropdownContentInnerContextType>({\n  maxHeight: '',\n})\n\nexport const DropdownContentInner: FC<Props> = ({\n  triggerRect,\n  children,\n  className,\n  controllable,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const [isActive, setIsActive] = useState(false)\n  const [contentBox, setContentBox] = useState<ContentBoxStyle>({\n    top: 'auto',\n    maxHeight: '',\n  })\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isActive, className }),\n    [isActive, className],\n  )\n\n  const style = (() => {\n    const defaultMargin = theme.spacingByChar(0.5)\n    const leftMargin =\n      contentBox.left === undefined ? defaultMargin : `max(${contentBox.left}, 0px)`\n    const rightMargin =\n      contentBox.right === undefined ? defaultMargin : `max(${contentBox.right}, 0px)`\n    const maxWidthStyle = `calc(100% - ${leftMargin} - ${rightMargin})`\n\n    return {\n      insetBlockStart: contentBox.top,\n      insetInlineStart: contentBox.left || undefined,\n      insetInlineEnd: contentBox.right || undefined,\n      maxWidth: maxWidthStyle,\n    }\n  })()\n\n  useEffect(() => {\n    if (wrapperRef.current) {\n      setContentBox(\n        getContentBoxStyle(\n          triggerRect,\n          {\n            width: wrapperRef.current.offsetWidth,\n            height: wrapperRef.current.offsetHeight,\n          },\n          {\n            width: document.body.clientWidth,\n            height: innerHeight,\n          },\n          {\n            top: scrollY,\n            left: scrollX,\n          },\n        ),\n      )\n      setIsActive(true)\n    }\n  }, [triggerRect])\n\n  // setIsActive(true) と同じ useEffect 内で直接 focus() を呼ぶことはできない。\n  // このコンポーネントは Dropdown が開かれた時のみマウントされるが、マウント直後は\n  // 位置計算が完了していないためコンテンツが誤った位置にちらつくのを防ぐために\n  // shr-invisible (visibility: hidden) でレンダリングされる。\n  // ちらつき防止には実寸法を保持したまま視覚的に隠せる visibility: hidden が唯一の手段となる。\n  // visibility: hidden の要素はフォーカスを受け付けないため、setIsActive(true) の直後に\n  // focus() を呼んでも DOM がまだ更新されておらず無効になる。\n  //\n  // useEffect([isActive]) であれば、isActive=true になった後の render commit 後に\n  // 必ず実行されることが保証されるため、この実装が最も信頼性が高い。\n  useEffect(() => {\n    if (isActive) {\n      focusTargetRef.current?.focus()\n    }\n  }, [isActive])\n\n  useKeyboardNavigation(wrapperRef, focusTargetRef)\n\n  return (\n    <div {...rest} ref={wrapperRef} className={actualClassName} style={style}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n      <div ref={focusTargetRef} tabIndex={-1} />\n      {controllable ? (\n        <div\n          style={{\n            maxHeight: contentBox.maxHeight || undefined,\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        <DropdownContentInnerContext.Provider value={{ maxHeight: contentBox.maxHeight }}>\n          <DropdownCloser>{children}</DropdownCloser>\n        </DropdownContentInnerContext.Provider>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAoBA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAcM;AACL;AACD;AAEM;AAOL;;AAEA;AACE;AACA;AACD;AACD;AACA;;AAOA;;AAEE;AAEA;AAEA;;;AAIE;AACA;AACA;;;;AAKF;AACE;AAIM;AACA;;AAGA;AACA;;AAGA;AACA;AACD;;;AAKT;;;;;;;;;;;;;AAcI;;AAEJ;AAEA;AAEA;AAOU;AACD;AAWX;;"}
+{"version":3,"file":"DropdownContentInner.js","sources":["../../../src/components/Dropdown/DropdownContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useTheme } from '../../hooks/useTheme'\nimport { tabbable } from '../../libs/tabbable'\n\nimport { DropdownContext } from './Dropdown'\nimport { DropdownCloser } from './DropdownCloser'\nimport {\n  type ContentBoxStyle,\n  type Rect,\n  getContentBoxStyle,\n  getFirstTabbable,\n} from './dropdownHelper'\n\nconst KEY_ESCAPE = /^Esc(ape)?$/\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-overflow-y-auto shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n  variants: {\n    isActive: {\n      true: 'shr-visible',\n      false: 'shr-invisible',\n    },\n  },\n})\n\ntype BaseProps = PropsWithChildren<{\n  triggerRect: Rect\n  controllable: boolean\n}>\n\nexport type ElementProps = Omit<ComponentProps<'div'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\ntype DropdownContentInnerContextType = {\n  maxHeight: string\n}\n\nexport const DropdownContentInnerContext = createContext<DropdownContentInnerContextType>({\n  maxHeight: '',\n})\n\nexport const DropdownContentInner: FC<Props> = ({\n  triggerRect,\n  children,\n  className,\n  controllable,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const [isActive, setIsActive] = useState(false)\n  const [contentBox, setContentBox] = useState<ContentBoxStyle>({\n    top: 'auto',\n    maxHeight: '',\n  })\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const focusTargetRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isActive, className }),\n    [isActive, className],\n  )\n\n  const style = (() => {\n    const defaultMargin = theme.spacingByChar(0.5)\n    const leftMargin =\n      contentBox.left === undefined ? defaultMargin : `max(${contentBox.left}, 0px)`\n    const rightMargin =\n      contentBox.right === undefined ? defaultMargin : `max(${contentBox.right}, 0px)`\n    const maxWidthStyle = `calc(100% - ${leftMargin} - ${rightMargin})`\n\n    return {\n      insetBlockStart: contentBox.top,\n      insetInlineStart: contentBox.left || undefined,\n      insetInlineEnd: contentBox.right || undefined,\n      maxWidth: maxWidthStyle,\n    }\n  })()\n\n  useEffect(() => {\n    if (wrapperRef.current) {\n      setContentBox(\n        getContentBoxStyle(\n          triggerRect,\n          {\n            width: wrapperRef.current.offsetWidth,\n            height: wrapperRef.current.offsetHeight,\n          },\n          {\n            width: document.body.clientWidth,\n            height: innerHeight,\n          },\n          {\n            top: scrollY,\n            left: scrollX,\n          },\n        ),\n      )\n      setIsActive(true)\n    }\n  }, [triggerRect])\n\n  // setIsActive(true) と同じ useEffect 内で直接 focus() を呼ぶことはできない。\n  // このコンポーネントは Dropdown が開かれた時のみマウントされるが、マウント直後は\n  // 位置計算が完了していないためコンテンツが誤った位置にちらつくのを防ぐために\n  // shr-invisible (visibility: hidden) でレンダリングされる。\n  // ちらつき防止には実寸法を保持したまま視覚的に隠せる visibility: hidden が唯一の手段となる。\n  // visibility: hidden の要素はフォーカスを受け付けないため、setIsActive(true) の直後に\n  // focus() を呼んでも DOM がまだ更新されておらず無効になる。\n  //\n  // useEffect([isActive]) であれば、isActive=true になった後の render commit 後に\n  // 必ず実行されることが保証されるため、この実装が最も信頼性が高い。\n  useEffect(() => {\n    if (isActive) {\n      focusTargetRef.current?.focus()\n    }\n  }, [isActive])\n\n  const { triggerElementRef, rootTriggerRef, handleDelegateClickCloser } =\n    useContext(DropdownContext)\n\n  const latest = useLatest({\n    triggerElementRef,\n    rootTriggerRef,\n    handleDelegateClickCloser,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab') {\n        if (\n          !wrapperRef.current ||\n          !latest.triggerElementRef.current ||\n          !latest.rootTriggerRef?.current\n        ) {\n          return\n        }\n\n        const tabbablesInContent = tabbable(wrapperRef.current)\n\n        if (tabbablesInContent.length === 0) {\n          return\n        }\n\n        const trigger = tabbable(latest.triggerElementRef.current).at(-1)\n        const firstTabbable = tabbablesInContent[0]\n\n        if (e.target === trigger) {\n          if (e.shiftKey) {\n            // move focus previous of the Trigger\n            return\n          }\n\n          // focus a first tabbable element in the dropdown content\n          e.preventDefault()\n          firstTabbable.focus()\n\n          return\n        } else if (e.shiftKey) {\n          if (e.target === firstTabbable || e.target === focusTargetRef.current) {\n            // focus the Trigger\n            e.preventDefault()\n            trigger!.focus()\n            latest.handleDelegateClickCloser()\n          }\n        } else if (e.target === tabbablesInContent.at(-1)) {\n          // move focus next of the Trigger\n          const rootTrigger = tabbable(latest.rootTriggerRef.current).at(-1)\n\n          if (rootTrigger) {\n            rootTrigger.focus()\n            latest.handleDelegateClickCloser()\n          }\n        }\n      } else if (KEY_ESCAPE.test(e.key)) {\n        if (e.target && e.target === focusTargetRef.current) {\n          latest.handleDelegateClickCloser()\n\n          return\n        }\n\n        const trigger = getFirstTabbable(latest.triggerElementRef)\n\n        if (trigger && e.target === trigger) {\n          // close the dropdown when the Trigger is focused and Esc key is pressed\n          latest.handleDelegateClickCloser()\n\n          return\n        }\n\n        if (wrapperRef.current) {\n          for (const inner of tabbable(wrapperRef.current)) {\n            if (inner === e.target) {\n              // close the dropdown when an element that is included in dropdown content is focused and Esc key is pressed\n              latest.handleDelegateClickCloser()\n\n              break\n            }\n          }\n        }\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [latest])\n\n  return (\n    <div {...rest} ref={wrapperRef} className={actualClassName} style={style}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n      <div ref={focusTargetRef} tabIndex={-1} />\n      {controllable ? (\n        <div\n          style={{\n            maxHeight: contentBox.maxHeight || undefined,\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        <DropdownContentInnerContext.Provider value={{ maxHeight: contentBox.maxHeight }}>\n          <DropdownCloser>{children}</DropdownCloser>\n        </DropdownContentInnerContext.Provider>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA4BA;AAEA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAcM;AACL;AACD;AAEM;AAOL;;AAEA;AACE;AACA;AACD;AACD;AACA;;AAOA;;AAEE;AAEA;AAEA;;;AAIE;AACA;AACA;;;;AAKF;AACE;AAIM;AACA;;AAGA;AACA;;AAGA;AACA;AACD;;;AAKT;;;;;;;;;;;;;AAcI;;AAEJ;AAEA;;;;;AAOC;;AAGC;AACE;;AAGI;AACA;;;;AAOF;;;AAIA;AACA;AAEA;AACE;;;;;;;;;AAUK;AACL;;;;;;;AAMK;;AAEL;;;;;;;;AAQF;;;;;;;;;;AAeA;;AAEI;;;;;;;;AASR;AAEA;AAEA;AACE;AACF;AACF;AAEA;AAOU;AACD;AAWX;;"}

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.cjs

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useObjectAttributes = require('../../../hooks/useObjectAttributes.cjs');
 require('../../../intl/IntlProvider.cjs');
 require('react-intl');
@@ -21,8 +21,48 @@ var components_Dropdown_DropdownCloser = require('../DropdownCloser.cjs');
 var components_Dropdown_DropdownContent = require('../DropdownContent.cjs');
 var components_Dropdown_DropdownTrigger = require('../DropdownTrigger.cjs');
 var components_Dropdown_DropdownMenuButton_DropdownMenuGroup = require('./DropdownMenuGroup.cjs');
-var components_Dropdown_DropdownMenuButton_useKeyboardNavigation = require('./useKeyboardNavigation.cjs');
 
+const TABBABLE_SELECTOR = 'li button,li a,li [tabindex]:not([tabindex="-1"])';
+const DISABLED_SELECTOR = ':disabled,[aria-disabled="true"]';
+const isElementEnabled = (element) => !element.matches(DISABLED_SELECTOR) && !element.querySelector(DISABLED_SELECTOR);
+const KEY_UP_REGEX = /^(Arrow)?(Up|Left)$/;
+const KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/;
+const moveFocus = (element, direction) => {
+    let hoveredItem = null;
+    const tabbableItems = [];
+    let focusedIndex = -1;
+    const pushTabbaleItem = (item) => {
+        tabbableItems.push(item);
+        if (document.activeElement === item) {
+            focusedIndex = tabbableItems.length - 1;
+        }
+    };
+    element.querySelectorAll(TABBABLE_SELECTOR).forEach((item) => {
+        if (hoveredItem === null && item.matches(':hover')) {
+            hoveredItem = item;
+        }
+        if (isElementEnabled(item)) {
+            pushTabbaleItem(item);
+        }
+    });
+    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 nextItem = tabbableItems[nextIndex];
+    if (nextItem instanceof HTMLElement) {
+        nextItem.focus();
+    }
+};
 const triggerObjectConverter = (trigger) => ({
     children: trigger,
 });
@@ -51,12 +91,39 @@ const { triggerWrapper, triggerButton, actionList, actionListItemButton } = clas
 const DropdownMenuButton = ({ trigger, children, onOpen, onClose, className, ...rest }) => {
     const { children: triggerChildren, size: triggerSize, onlyIcon: onlyIconTrigger, } = hooks_useObjectAttributes.useObjectAttributes(trigger, triggerObjectConverter);
     const containerRef = React.useRef(null);
-    components_Dropdown_DropdownMenuButton_useKeyboardNavigation(containerRef);
     const classNames = React.useMemo(() => ({
         triggerWrapper: triggerWrapper({ className }),
         triggerButton: triggerButton(),
         actionList: actionList(),
     }), [className]);
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!containerRef.current || !document.activeElement) {
+                return;
+            }
+            let direction = 0;
+            // HINT: tabとarrow keyで挙動を揃えるため、tabもhandling対象にする
+            if (e.key === 'Tab') {
+                // HINT: tbのデフォルトの挙動の場合のみ、preventDefaultが必要
+                e.preventDefault();
+                direction = e.shiftKey ? -1 : 1;
+            }
+            else if (KEY_UP_REGEX.test(e.key)) {
+                direction = -1;
+            }
+            else if (KEY_DOWN_REGEX.test(e.key)) {
+                direction = 1;
+            }
+            if (direction !== 0) {
+                moveFocus(containerRef.current, direction);
+            }
+        };
+        const eventKey = 'keydown';
+        document.addEventListener(eventKey, handleKeyDown);
+        return () => {
+            document.removeEventListener(eventKey, handleKeyDown);
+        };
+    }, []);
     return (jsxRuntime.jsxs(components_Dropdown_Dropdown.Dropdown, { onOpen: onOpen, onClose: onClose, children: [jsxRuntime.jsx(MemoizedTriggerButton, { ...rest, onlyIconTrigger: onlyIconTrigger, triggerSize: triggerSize, classNames: classNames, children: triggerChildren }), jsxRuntime.jsx(components_Dropdown_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("menu", { ref: containerRef, role: "menu", className: classNames.actionList, children: renderButtonList(children) }) })] }));
 };
 const MemoizedTriggerButton = React.memo(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuButton.cjs","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { Localizer } from '../../../intl'\nimport { type AnchorButton, Button, type BaseProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\nimport useKeyboardNavigation from './useKeyboardNavigation'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype BaseProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  useKeyboardNavigation(containerRef)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { active } = useContext(DropdownContext)\n\n  return (\n    <DropdownTrigger\n      className={classNames.triggerWrapper}\n      tooltip={{ show: !!onlyIconTrigger, message: children }}\n    >\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active ? (\n                  <Localizer\n                    id=\"smarthr-ui/DropdownMenuButton/triggerActive\"\n                    defaultText=\"候補を閉じる\"\n                  />\n                ) : (\n                  <Localizer\n                    id=\"smarthr-ui/DropdownMenuButton/triggerInactive\"\n                    defaultText=\"候補を開く\"\n                  />\n                )\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={children} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    const listItem = ref.current\n    if (!listItem) {\n      return\n    }\n\n    const setupButton = () => {\n      const button = listItem.querySelector('button,a')\n\n      if (button) {\n        button.setAttribute('role', 'menuitem')\n        button.setAttribute(\n          'class',\n          actionListItemButton({ className: button.getAttribute('class') }),\n        )\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n    observer.observe(listItem, {\n      childList: true,\n      subtree: true,\n      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;;AAIA;AAEI;;;AAGD;AAIH;AAiBF;AAEA;;;AA8CA;AAEA;;AAKI;;AAGF;AAEA;AACF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;;AAEA;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;;"}
+{"version":3,"file":"DropdownMenuButton.cjs","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { Localizer } from '../../../intl'\nimport { type AnchorButton, Button, type BaseProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype BaseProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof BaseProps>\ntype Props = BaseProps & ElementProps\n\nconst TABBABLE_SELECTOR = 'li button,li a,li [tabindex]:not([tabindex=\"-1\"])'\nconst DISABLED_SELECTOR = ':disabled,[aria-disabled=\"true\"]'\nconst isElementEnabled = (element: Element): boolean =>\n  !element.matches(DISABLED_SELECTOR) && !element.querySelector(DISABLED_SELECTOR)\nconst KEY_UP_REGEX = /^(Arrow)?(Up|Left)$/\nconst KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/\n\nconst moveFocus = (element: Element, direction: 1 | -1) => {\n  let hoveredItem: Element | null = null\n  const tabbableItems: Element[] = []\n  let focusedIndex: number = -1\n\n  const pushTabbaleItem = (item: Element) => {\n    tabbableItems.push(item)\n\n    if (document.activeElement === item) {\n      focusedIndex = tabbableItems.length - 1\n    }\n  }\n\n  element.querySelectorAll(TABBABLE_SELECTOR).forEach((item) => {\n    if (hoveredItem === null && item.matches(':hover')) {\n      hoveredItem = item\n    }\n\n    if (isElementEnabled(item)) {\n      pushTabbaleItem(item)\n    }\n  })\n\n  let nextIndex = 0\n\n  if (focusedIndex > -1) {\n    // フォーカスされているアイテムが存在する場合\n    nextIndex = (focusedIndex + direction + tabbableItems.length) % tabbableItems.length\n  } else if (hoveredItem) {\n    // ホバー状態のアイテムが存在する場合\n    nextIndex =\n      (tabbableItems.indexOf(hoveredItem) + direction + tabbableItems.length) % tabbableItems.length\n  } else if (direction === -1) {\n    nextIndex = tabbableItems.length - 1\n  }\n\n  const nextItem = tabbableItems[nextIndex]\n\n  if (nextItem instanceof HTMLElement) {\n    nextItem.focus()\n  }\n}\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!containerRef.current || !document.activeElement) {\n        return\n      }\n\n      let direction: -1 | 0 | 1 = 0\n\n      // HINT: tabとarrow keyで挙動を揃えるため、tabもhandling対象にする\n      if (e.key === 'Tab') {\n        // HINT: tbのデフォルトの挙動の場合のみ、preventDefaultが必要\n        e.preventDefault()\n        direction = e.shiftKey ? -1 : 1\n      } else if (KEY_UP_REGEX.test(e.key)) {\n        direction = -1\n      } else if (KEY_DOWN_REGEX.test(e.key)) {\n        direction = 1\n      }\n\n      if (direction !== 0) {\n        moveFocus(containerRef.current, direction)\n      }\n    }\n\n    const eventKey = 'keydown'\n\n    document.addEventListener(eventKey, handleKeyDown)\n\n    return () => {\n      document.removeEventListener(eventKey, handleKeyDown)\n    }\n  }, [])\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { active } = useContext(DropdownContext)\n\n  return (\n    <DropdownTrigger\n      className={classNames.triggerWrapper}\n      tooltip={{ show: !!onlyIconTrigger, message: children }}\n    >\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active ? (\n                  <Localizer\n                    id=\"smarthr-ui/DropdownMenuButton/triggerActive\"\n                    defaultText=\"候補を閉じる\"\n                  />\n                ) : (\n                  <Localizer\n                    id=\"smarthr-ui/DropdownMenuButton/triggerInactive\"\n                    defaultText=\"候補を開く\"\n                  />\n                )\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={children} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    const listItem = ref.current\n    if (!listItem) {\n      return\n    }\n\n    const setupButton = () => {\n      const button = listItem.querySelector('button,a')\n\n      if (button) {\n        button.setAttribute('role', 'menuitem')\n        button.setAttribute(\n          'class',\n          actionListItemButton({ className: button.getAttribute('class') }),\n        )\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n    observer.observe(listItem, {\n      childList: true,\n      subtree: true,\n      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoEA;AACA;AACA;AAEA;AACA;AAEA;;;AAGE;AAEA;AACE;AAEA;AACE;;AAEJ;;;;;AAOE;;;AAGF;;AAIA;;AAEE;;;;;AAIE;;AACG;AACL;;AAGF;AAEA;;;AAGF;AAEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;AAEA;AAEI;;;AAGD;;AAKD;;;;;;AAQE;;;AAGE;;;;;;;;AAOF;AACE;;AAEJ;;AAIA;AAEA;AACE;AACF;;AAGF;AAiBF;AAEA;;;AA8CA;AAEA;;AAKI;;AAGF;AAEA;AACF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;;AAEA;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;;"}