@yamada-ui/menu 1.3.20-next-20241113111354 → 1.3.20-next-20241114172614

package/dist/{chunk-TDS7X2BY.mjs → chunk-72J22E3I.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   MenuIcon
-} from "./chunk-7FDQPFQM.mjs";
+} from "./chunk-X5YYJEDZ.mjs";
 import {
   useMenu,
   useUpstreamMenuItem
@@ -37,10 +37,12 @@ var MenuButton = forwardRef(
     id != null ? id : id = uuid;
     const onKeyDown = useCallback(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
           ArrowDown: funcAll(onOpen, onFocusFirstItem),
           ArrowUp: funcAll(onOpen, onFocusLastItem),
-          Enter: funcAll(onOpen, onFocusFirstItem)
+          Enter: funcAll(onOpen, onFocusFirstItem),
+          Space: funcAll(onOpen, onFocusFirstItem)
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -51,9 +53,12 @@ var MenuButton = forwardRef(
     );
     const onItemKeyDown = useCallback(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
           ArrowLeft: isOpen ? funcAll(onUpstreamRestoreFocus, onClose) : void 0,
-          ArrowRight: !isOpen ? funcAll(onOpen, onFocusFirstItem) : void 0
+          ArrowRight: !isOpen ? funcAll(onOpen, onFocusFirstItem) : void 0,
+          Enter: !isOpen ? funcAll(onOpen, onFocusFirstItem) : void 0,
+          Space: !isOpen ? funcAll(onOpen, onFocusFirstItem) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -70,7 +75,6 @@ var MenuButton = forwardRef(
         id,
         ref: mergeRefs(buttonRef, ref),
         className: cx("ui-menu", className),
-        "aria-expanded": isOpen,
         "aria-haspopup": "menu",
         ...rest,
         "data-active": dataAttr(isOpen),
@@ -117,4 +121,4 @@ export {
   MenuButton,
   MenuItemButton
 };
-//# sourceMappingURL=chunk-TDS7X2BY.mjs.map
+//# sourceMappingURL=chunk-72J22E3I.mjs.map

package/dist/chunk-72J22E3I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-button.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { KeyboardEvent, ReactNode } from \"react\"\nimport type { MenuIconProps } from \"./menu-item\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport {\n  assignRef,\n  cx,\n  dataAttr,\n  funcAll,\n  handlerAll,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo } from \"react\"\nimport { useMenu, useUpstreamMenuItem } from \"./menu-context\"\nimport { MenuIcon } from \"./menu-item\"\n\nexport interface MenuButtonProps extends HTMLUIProps<\"button\"> {}\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n  ({ id, as, className, children, ...rest }, ref) => {\n    const { onKeyDownRef, onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n    const {\n      buttonRef,\n      isOpen,\n      onClose,\n      onFocusFirstItem,\n      onFocusLastItem,\n      onOpen,\n    } = useMenu()\n    const uuid = useId()\n\n    id ??= uuid\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent) => {\n        if (ev.key === \" \") ev.key = ev.code\n\n        const actions: { [key: string]: Function } = {\n          ArrowDown: funcAll(onOpen, onFocusFirstItem),\n          ArrowUp: funcAll(onOpen, onFocusLastItem),\n          Enter: funcAll(onOpen, onFocusFirstItem),\n          Space: funcAll(onOpen, onFocusFirstItem),\n        }\n\n        const action = actions[ev.key]\n\n        if (!action) return\n\n        ev.preventDefault()\n\n        action()\n      },\n      [onFocusFirstItem, onFocusLastItem, onOpen],\n    )\n\n    const onItemKeyDown = useCallback(\n      (ev: KeyboardEvent<HTMLDivElement>) => {\n        if (ev.key === \" \") ev.key = ev.code\n\n        const actions: { [key: string]: Function | undefined } = {\n          ArrowLeft: isOpen\n            ? funcAll(onUpstreamRestoreFocus, onClose)\n            : undefined,\n          ArrowRight: !isOpen ? funcAll(onOpen, onFocusFirstItem) : undefined,\n          Enter: !isOpen ? funcAll(onOpen, onFocusFirstItem) : undefined,\n          Space: !isOpen ? funcAll(onOpen, onFocusFirstItem) : undefined,\n        }\n\n        const action = actions[ev.key]\n\n        if (!action) return\n\n        ev.preventDefault()\n\n        action()\n      },\n      [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose],\n    )\n\n    assignRef(onKeyDownRef, onItemKeyDown)\n\n    const Component = useMemo(() => (as ? ui(as) : Button), [as])\n\n    return (\n      <PopoverTrigger>\n        <Component\n          id={id}\n          ref={mergeRefs(buttonRef, ref)}\n          className={cx(\"ui-menu\", className)}\n          aria-haspopup=\"menu\"\n          {...rest}\n          data-active={dataAttr(isOpen)}\n          onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n        >\n          {children}\n        </Component>\n      </PopoverTrigger>\n    )\n  },\n)\n\nMenuButton.displayName = \"MenuButton\"\nMenuButton.__ui__ = \"MenuButton\"\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n  const { styles } = useMenu()\n\n  const css: CSSUIObject = {\n    alignItems: \"center\",\n    appearance: \"none\",\n    display: \"inline-flex\",\n    outline: 0,\n    ...styles.button,\n  }\n\n  return <ui.button ref={ref} __css={css} {...rest} />\n})\n\nexport interface MenuItemButtonProps extends MenuButtonProps {\n  icon?: ReactNode\n  iconProps?: MenuIconProps\n  innerProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuItemButton = forwardRef<MenuItemButtonProps, \"button\">(\n  ({ className, children, icon, iconProps, innerProps, ...rest }, ref) => {\n    return (\n      <MenuButton\n        ref={ref}\n        className={cx(\"ui-menu__item-button\", className)}\n        flex=\"1\"\n        {...rest}\n      >\n        <ui.span as=\"span\" flex=\"1\" {...innerProps}>\n          {children}\n        </ui.span>\n\n        <MenuIcon {...iconProps}>\n          {icon ?? <ChevronIcon fontSize=\"1.5em\" transform=\"rotate(-90deg)\" />}\n        </MenuIcon>\n      </MenuButton>\n    )\n  },\n)\n\nMenuItemButton.displayName = \"MenuItemButton\"\nMenuItemButton.__ui__ = \"MenuItemButton\"\n"],"mappings":"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","names":[]}

package/dist/{chunk-GWDM6IJK.mjs → chunk-N7KSYRKD.mjs}

@@ -8,11 +8,11 @@ import {
 import { forwardRef, ui } from "@yamada-ui/core";
 import { PopoverContent } from "@yamada-ui/popover";
 import { cx, handlerAll, mergeRefs } from "@yamada-ui/utils";
-import { useCallback } from "react";
+import { useCallback, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 var MenuList = forwardRef(
-  ({ className, children, contentProps, ...rest }, ref) => {
-    var _a;
+  ({ id, className, children, contentProps, ...rest }, ref) => {
+    var _a, _b;
     const {
       buttonRef,
       focusedIndex,
@@ -21,7 +21,10 @@ var MenuList = forwardRef(
       styles,
       onClose
     } = useMenu();
+    const uuid = useId();
+    id != null ? id : id = uuid;
     const descendants = useMenuDescendantsContext();
+    const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id;
     const onNext = useCallback(() => {
       const next = descendants.enabledNextValue(focusedIndex);
       if (next) setFocusedIndex(next.index);
@@ -46,7 +49,7 @@ var MenuList = forwardRef(
           End: onLast,
           Escape: onClose,
           Home: onFirst,
-          Tab: (ev2) => ev2.preventDefault()
+          Tab: onClose
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -58,8 +61,12 @@ var MenuList = forwardRef(
     return /* @__PURE__ */ jsx(
       PopoverContent,
       {
+        id,
         as: "div",
         className: "ui-menu__content",
+        "aria-activedescendant": activedescendantId,
+        "aria-labelledby": (_b = buttonRef.current) == null ? void 0 : _b.id,
+        role: "menu",
         __css: { ...styles.content },
         ...contentProps,
         onKeyDown: handlerAll(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown),
@@ -68,8 +75,6 @@ var MenuList = forwardRef(
           {
             ref: mergeRefs(menuRef, ref),
             className: cx("ui-menu__list", className),
-            "aria-labelledby": (_a = buttonRef.current) == null ? void 0 : _a.id,
-            role: "menu",
             tabIndex: -1,
             __css: { ...styles.list },
             ...rest,
@@ -86,4 +91,4 @@ MenuList.__ui__ = "MenuList";
 export {
   MenuList
 };
-//# sourceMappingURL=chunk-GWDM6IJK.mjs.map
+//# sourceMappingURL=chunk-N7KSYRKD.mjs.map

package/dist/chunk-N7KSYRKD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-list.tsx"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useId } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu-context\"\n\nexport interface MenuListProps extends HTMLUIProps<\"ul\"> {\n  contentProps?: MotionPropsWithoutChildren\n}\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n  ({ id, className, children, contentProps, ...rest }, ref) => {\n    const {\n      buttonRef,\n      focusedIndex,\n      menuRef,\n      setFocusedIndex,\n      styles,\n      onClose,\n    } = useMenu()\n    const uuid = useId()\n    id ??= uuid\n\n    const descendants = useMenuDescendantsContext()\n\n    const activedescendantId = descendants.value(focusedIndex)?.node.id\n\n    const onNext = useCallback(() => {\n      const next = descendants.enabledNextValue(focusedIndex)\n\n      if (next) setFocusedIndex(next.index)\n    }, [descendants, focusedIndex, setFocusedIndex])\n\n    const onPrev = useCallback(() => {\n      const prev = descendants.enabledPrevValue(focusedIndex)\n\n      if (prev) setFocusedIndex(prev.index)\n    }, [descendants, focusedIndex, setFocusedIndex])\n\n    const onFirst = useCallback(() => {\n      const first = descendants.enabledFirstValue()\n\n      if (first) setFocusedIndex(first.index)\n    }, [descendants, setFocusedIndex])\n\n    const onLast = useCallback(() => {\n      const last = descendants.enabledLastValue()\n\n      if (last) setFocusedIndex(last.index)\n    }, [descendants, setFocusedIndex])\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent) => {\n        const actions: { [key: string]: KeyboardEventHandler } = {\n          ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n          ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n          End: onLast,\n          Escape: onClose,\n          Home: onFirst,\n          Tab: onClose,\n        }\n\n        const action = actions[ev.key]\n\n        if (!action) return\n\n        ev.preventDefault()\n        action(ev)\n      },\n      [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n    )\n\n    return (\n      <PopoverContent\n        id={id}\n        as=\"div\"\n        className=\"ui-menu__content\"\n        aria-activedescendant={activedescendantId}\n        aria-labelledby={buttonRef.current?.id}\n        role=\"menu\"\n        __css={{ ...styles.content }}\n        {...contentProps}\n        onKeyDown={handlerAll(contentProps?.onKeyDown, onKeyDown)}\n      >\n        <ui.div\n          ref={mergeRefs(menuRef, ref)}\n          className={cx(\"ui-menu__list\", className)}\n          tabIndex={-1}\n          __css={{ ...styles.list }}\n          {...rest}\n        >\n          {children}\n        </ui.div>\n      </PopoverContent>\n    )\n  },\n)\n\nMenuList.displayName = \"MenuList\"\nMenuList.__ui__ = \"MenuList\"\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,YAAY,iBAAiB;AAC1C,SAAS,aAAa,aAAa;AAiF3B;AA1ED,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,IAAI,WAAW,UAAU,cAAc,GAAG,KAAK,GAAG,QAAQ;AAd/D;AAeI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,QAAQ;AACZ,UAAM,OAAO,MAAM;AACnB,2BAAO;AAEP,UAAM,cAAc,0BAA0B;AAE9C,UAAM,sBAAqB,iBAAY,MAAM,YAAY,MAA9B,mBAAiC,KAAK;AAEjE,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,UAAU,YAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,WAAW,iBAAiB,KAAK,UAAU;AAAA,UAC3C,SAAS,iBAAiB,KAAK,SAAS;AAAA,UACxC,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,QACP;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,eAAO,EAAE;AAAA,MACX;AAAA,MACA,CAAC,cAAc,SAAS,SAAS,QAAQ,QAAQ,MAAM;AAAA,IACzD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAG;AAAA,QACH,WAAU;AAAA,QACV,yBAAuB;AAAA,QACvB,oBAAiB,eAAU,YAAV,mBAAmB;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,EAAE,GAAG,OAAO,QAAQ;AAAA,QAC1B,GAAG;AAAA,QACJ,WAAW,WAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,KAAK,UAAU,SAAS,GAAG;AAAA,YAC3B,WAAW,GAAG,iBAAiB,SAAS;AAAA,YACxC,UAAU;AAAA,YACV,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,YACvB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;","names":[]}

package/dist/{chunk-3NSBHYCK.mjs → chunk-VPMWBZWN.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-SWY6VV4V.mjs";
 import {
   MenuOptionItem
-} from "./chunk-7FDQPFQM.mjs";
+} from "./chunk-X5YYJEDZ.mjs";
 
 // src/menu-option-group.tsx
 import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -66,4 +66,4 @@ MenuOptionGroup.__ui__ = "MenuOptionGroup";
 export {
   MenuOptionGroup
 };
-//# sourceMappingURL=chunk-3NSBHYCK.mjs.map
+//# sourceMappingURL=chunk-VPMWBZWN.mjs.map

package/dist/{chunk-7FDQPFQM.mjs → chunk-X5YYJEDZ.mjs}

@@ -10,8 +10,8 @@ import {
 import { forwardRef, ui } from "@yamada-ui/core";
 import { useClickable } from "@yamada-ui/use-clickable";
 import {
-  ariaAttr,
   cx,
+  dataAttr,
   funcAll,
   handlerAll,
   isActiveElement,
@@ -19,7 +19,7 @@ import {
   mergeRefs,
   useUpdateEffect
 } from "@yamada-ui/utils";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var isTargetMenuItem = (target) => {
   var _a;
@@ -27,6 +27,7 @@ var isTargetMenuItem = (target) => {
 };
 var MenuItem = forwardRef(
   ({
+    id,
     className,
     children,
     closeOnSelect: customCloseOnSelect,
@@ -36,7 +37,7 @@ var MenuItem = forwardRef(
     isFocusable,
     ...props
   }, ref) => {
-    var _a;
+    var _a, _b;
     const {
       closeOnSelect,
       focusedIndex,
@@ -50,14 +51,18 @@ var MenuItem = forwardRef(
       onUpstreamClose
     } = useMenu();
     const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
-    const trulyDisabled = isDisabled && !isFocusable;
+    const [isDownstreamOpen, setDownstreamOpen] = useState(false);
+    const uuid = useId();
     const itemRef = useRef(null);
     const hasDownstreamRef = useRef(false);
     const onKeyDownRef = useRef(
       () => void 0
     );
+    id != null ? id : id = uuid;
+    const trulyDisabled = isDisabled && !isFocusable;
+    const type = (_b = itemRef.current) == null ? void 0 : _b.getAttribute("type");
+    const role = !!type ? type === "checkbox" ? "menuitemcheckbox" : "menuitemradio" : "menuitem";
     const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
-    const [isDownstreamOpen, setDownstreamOpen] = useState(false);
     const isFocused = index === focusedIndex;
     const onMouseOver = useCallback(() => {
       if (isDisabled) return;
@@ -88,8 +93,10 @@ var MenuItem = forwardRef(
     }, [setFocusedIndex, index]);
     const onKeyDown = useCallback(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
-          ArrowLeft: isNested ? funcAll(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isNested ? funcAll(onUpstreamRestoreFocus, onClose) : void 0,
+          Space: !hasDownstreamRef.current ? funcAll(onUpstreamClose, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -97,9 +104,10 @@ var MenuItem = forwardRef(
         ev.stopPropagation();
         action();
       },
-      [onUpstreamRestoreFocus, onClose, isNested]
+      [isNested, onUpstreamRestoreFocus, onClose, onUpstreamClose]
     );
     const rest = useClickable({
+      clickOnSpace: false,
       focusOnClick: false,
       ...props,
       ref: mergeRefs(register, itemRef, ref),
@@ -113,9 +121,9 @@ var MenuItem = forwardRef(
     });
     useUpdateEffect(() => {
       if (!isOpen) return;
-      const id = requestAnimationFrameId.current;
+      const id2 = requestAnimationFrameId.current;
       if (isFocused && !trulyDisabled && itemRef.current) {
-        if (id) cancelAnimationFrame(id);
+        if (id2) cancelAnimationFrame(id2);
         requestAnimationFrameId.current = requestAnimationFrame(() => {
           var _a2;
           (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
@@ -125,7 +133,7 @@ var MenuItem = forwardRef(
         menuRef.current.focus({ preventScroll: true });
       }
       return () => {
-        if (id) cancelAnimationFrame(id);
+        if (id2) cancelAnimationFrame(id2);
       };
     }, [isFocused, trulyDisabled, menuRef, isOpen]);
     children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: { flex: 1 }, children }) : children;
@@ -154,12 +162,13 @@ var MenuItem = forwardRef(
         children: /* @__PURE__ */ jsxs(
           ui.div,
           {
-            ...rest,
-            ...isDownstreamOpen ? { "data-active": "" } : {},
+            id,
             className: cx("ui-menu__item", className),
-            role: "menuitem",
-            tabIndex: isFocused ? 0 : -1,
+            "data-focus": dataAttr(isDownstreamOpen),
             __css: css,
+            ...rest,
+            role,
+            tabIndex: !isDownstreamOpen && isFocused ? 0 : -1,
             children: [
               icon ? /* @__PURE__ */ jsx(MenuIcon, { children: icon }) : null,
               children,
@@ -180,7 +189,7 @@ var MenuOptionItem = forwardRef(
       {
         ref,
         className: cx("ui-menu__item--option", className),
-        "aria-checked": ariaAttr(isChecked),
+        "aria-checked": isChecked,
         closeOnSelect,
         ...rest,
         children: [
@@ -249,4 +258,4 @@ export {
   MenuIcon,
   MenuCommand
 };
-//# sourceMappingURL=chunk-7FDQPFQM.mjs.map
+//# sourceMappingURL=chunk-X5YYJEDZ.mjs.map

package/dist/chunk-X5YYJEDZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-item.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type {\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  ReactElement,\n} from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n  cx,\n  dataAttr,\n  funcAll,\n  handlerAll,\n  isActiveElement,\n  isHTMLElement,\n  mergeRefs,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport {\n  UpstreamMenuItemProvider,\n  useMenu,\n  useMenuDescendant,\n  useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n  return (\n    isHTMLElement(target) &&\n    !!target.getAttribute(\"role\")?.startsWith(\"menuitem\")\n  )\n}\n\ninterface MenuItemOptions {\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * Right-aligned label text content, useful for displaying hotkeys.\n   */\n  command?: string\n  /**\n   * The menu item icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * If `true`, the menu item will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the menu item will be focusable.\n   *\n   * @default false\n   */\n  isFocusable?: boolean\n}\n\nexport interface MenuItemProps extends HTMLUIProps, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"div\">(\n  (\n    {\n      id,\n      className,\n      children,\n      closeOnSelect: customCloseOnSelect,\n      command,\n      icon,\n      isDisabled,\n      isFocusable,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      closeOnSelect,\n      focusedIndex,\n      isNested,\n      isOpen,\n      menuRef,\n      requestAnimationFrameId,\n      setFocusedIndex,\n      styles,\n      onClose,\n      onUpstreamClose,\n    } = useMenu()\n    const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n    const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n    const uuid = useId()\n    const itemRef = useRef<HTMLDivElement>(null)\n    const hasDownstreamRef = useRef<boolean>(false)\n    const onKeyDownRef = useRef<KeyboardEventHandler<HTMLDivElement>>(\n      () => void 0,\n    )\n\n    id ??= uuid\n\n    const trulyDisabled = isDisabled && !isFocusable\n    const type = itemRef.current?.getAttribute(\"type\")\n    const role = !!type\n      ? type === \"checkbox\"\n        ? \"menuitemcheckbox\"\n        : \"menuitemradio\"\n      : \"menuitem\"\n\n    const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n    const isFocused = index === focusedIndex\n\n    const onMouseOver = useCallback(() => {\n      if (isDisabled) return\n\n      setFocusedIndex(index)\n    }, [index, isDisabled, setFocusedIndex])\n\n    const onMouseLeave = useCallback(() => {\n      if (isDisabled) return\n\n      setFocusedIndex(-1)\n    }, [setFocusedIndex, isDisabled])\n\n    const onClick = useCallback(\n      (ev: MouseEvent<HTMLDivElement>) => {\n        if (!isTargetMenuItem(ev.currentTarget)) return\n\n        const hasDownstream = hasDownstreamRef.current\n\n        if (customCloseOnSelect ?? (!hasDownstream && closeOnSelect)) {\n          onClose()\n          onUpstreamClose?.()\n        }\n      },\n      [customCloseOnSelect, closeOnSelect, onClose, onUpstreamClose],\n    )\n\n    const onFocus = useCallback(() => {\n      setFocusedIndex(index)\n    }, [setFocusedIndex, index])\n\n    const onRestoreFocus = useCallback(() => {\n      itemRef.current?.focus()\n\n      setFocusedIndex(index)\n    }, [setFocusedIndex, index])\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent<HTMLDivElement>) => {\n        if (ev.key === \" \") ev.key = ev.code\n\n        const actions: { [key: string]: Function | undefined } = {\n          ArrowLeft: isNested\n            ? funcAll(onUpstreamRestoreFocus, onClose)\n            : undefined,\n          Space: !hasDownstreamRef.current\n            ? funcAll(onUpstreamClose, onClose)\n            : undefined,\n        }\n\n        const action = actions[ev.key]\n\n        if (!action) return\n\n        ev.preventDefault()\n        ev.stopPropagation()\n\n        action()\n      },\n      [isNested, onUpstreamRestoreFocus, onClose, onUpstreamClose],\n    )\n\n    const rest = useClickable<HTMLDivElement>({\n      clickOnSpace: false,\n      focusOnClick: false,\n      ...props,\n      ref: mergeRefs(register, itemRef, ref),\n      isDisabled,\n      isFocusable,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n      onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n      onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n    })\n\n    useUpdateEffect(() => {\n      if (!isOpen) return\n\n      const id = requestAnimationFrameId.current\n\n      if (isFocused && !trulyDisabled && itemRef.current) {\n        if (id) cancelAnimationFrame(id)\n\n        requestAnimationFrameId.current = requestAnimationFrame(() => {\n          itemRef.current?.focus({ preventScroll: true })\n\n          requestAnimationFrameId.current = null\n        })\n      } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n        menuRef.current.focus({ preventScroll: true })\n      }\n\n      return () => {\n        if (id) cancelAnimationFrame(id)\n      }\n    }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n    children =\n      icon || command ? (\n        <ui.span style={{ flex: 1 }}>{children}</ui.span>\n      ) : (\n        children\n      )\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      color: \"inherit\",\n      display: \"flex\",\n      flex: \"0 0 auto\",\n      gap: \"0.75rem\",\n      outline: 0,\n      textAlign: \"start\",\n      textDecoration: \"none\",\n      userSelect: \"none\",\n      width: \"100%\",\n      ...styles.item,\n    }\n\n    return (\n      <UpstreamMenuItemProvider\n        value={{\n          hasDownstreamRef,\n          setDownstreamOpen,\n          onKeyDownRef,\n          onUpstreamRestoreFocus: onRestoreFocus,\n        }}\n      >\n        <ui.div\n          id={id}\n          className={cx(\"ui-menu__item\", className)}\n          data-focus={dataAttr(isDownstreamOpen)}\n          __css={css}\n          {...rest}\n          role={role}\n          tabIndex={!isDownstreamOpen && isFocused ? 0 : -1}\n        >\n          {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n          {children}\n          {command ? <MenuCommand>{command}</MenuCommand> : null}\n        </ui.div>\n      </UpstreamMenuItemProvider>\n    )\n  },\n)\n\nMenuItem.displayName = \"MenuItem\"\nMenuItem.__ui__ = \"MenuItem\"\n\ninterface MenuOptionItemOptions {\n  /**\n   * The type of the menu option item.\n   */\n  type?: \"checkbox\" | \"radio\"\n  /**\n   * The menu option item icon to use.\n   */\n  icon?: null | ReactElement\n  /**\n   * If `true`, the checkbox or radio will be checked.\n   *\n   * @default false\n   */\n  isChecked?: boolean\n  /**\n   * The value of the menu option item.\n   */\n  value?: string\n}\n\nexport interface MenuOptionItemProps\n  extends Omit<MenuItemProps, \"command\" | \"icon\" | \"value\">,\n    MenuOptionItemOptions {}\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n  (\n    { className, children, closeOnSelect = false, icon, isChecked, ...rest },\n    ref,\n  ) => {\n    return (\n      <MenuItem\n        ref={ref}\n        className={cx(\"ui-menu__item--option\", className)}\n        aria-checked={isChecked}\n        closeOnSelect={closeOnSelect}\n        {...rest}\n      >\n        {icon !== null ? (\n          <MenuIcon opacity={isChecked ? 1 : 0}>\n            {icon || <CheckIcon />}\n          </MenuIcon>\n        ) : null}\n        {children}\n      </MenuItem>\n    )\n  },\n)\n\nMenuOptionItem.displayName = \"MenuOptionItem\"\nMenuOptionItem.__ui__ = \"MenuOptionItem\"\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useMenu()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      flexShrink: 0,\n      fontSize: \"0.85em\",\n      justifyContent: \"center\",\n      ...styles.icon,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-menu__item__icon\", className)}\n        aria-hidden\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nMenuIcon.displayName = \"MenuIcon\"\nMenuIcon.__ui__ = \"MenuIcon\"\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useMenu()\n\n    const css: CSSUIObject = { ...styles.command }\n\n    return (\n      <ui.span\n        ref={ref}\n        className={cx(\"ui-menu__item__command\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nMenuCommand.displayName = \"MenuCommand\"\nMenuCommand.__ui__ = \"MenuCommand\"\n\nconst CheckIcon: FC = () => (\n  <svg height=\"1em\" viewBox=\"0 0 14 14\" width=\"1em\">\n    <polygon\n      fill=\"currentColor\"\n      points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n    />\n  </svg>\n)\n"],"mappings":"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","names":["_a","id"]}

package/dist/index.js

@@ -294,6 +294,7 @@ var isTargetMenuItem = (target) => {
 };
 var MenuItem = (0, import_core4.forwardRef)(
   ({
+    id,
     className,
     children,
     closeOnSelect: customCloseOnSelect,
@@ -303,7 +304,7 @@ var MenuItem = (0, import_core4.forwardRef)(
     isFocusable,
     ...props
   }, ref) => {
-    var _a;
+    var _a, _b;
     const {
       closeOnSelect,
       focusedIndex,
@@ -317,14 +318,18 @@ var MenuItem = (0, import_core4.forwardRef)(
       onUpstreamClose
     } = useMenu();
     const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
-    const trulyDisabled = isDisabled && !isFocusable;
+    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react3.useState)(false);
+    const uuid = (0, import_react3.useId)();
     const itemRef = (0, import_react3.useRef)(null);
     const hasDownstreamRef = (0, import_react3.useRef)(false);
     const onKeyDownRef = (0, import_react3.useRef)(
       () => void 0
     );
+    id != null ? id : id = uuid;
+    const trulyDisabled = isDisabled && !isFocusable;
+    const type = (_b = itemRef.current) == null ? void 0 : _b.getAttribute("type");
+    const role = !!type ? type === "checkbox" ? "menuitemcheckbox" : "menuitemradio" : "menuitem";
     const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
-    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react3.useState)(false);
     const isFocused = index === focusedIndex;
     const onMouseOver = (0, import_react3.useCallback)(() => {
       if (isDisabled) return;
@@ -355,8 +360,10 @@ var MenuItem = (0, import_core4.forwardRef)(
     }, [setFocusedIndex, index]);
     const onKeyDown = (0, import_react3.useCallback)(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
-          ArrowLeft: isNested ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isNested ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0,
+          Space: !hasDownstreamRef.current ? (0, import_utils4.funcAll)(onUpstreamClose, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -364,9 +371,10 @@ var MenuItem = (0, import_core4.forwardRef)(
         ev.stopPropagation();
         action();
       },
-      [onUpstreamRestoreFocus, onClose, isNested]
+      [isNested, onUpstreamRestoreFocus, onClose, onUpstreamClose]
     );
     const rest = (0, import_use_clickable.useClickable)({
+      clickOnSpace: false,
       focusOnClick: false,
       ...props,
       ref: (0, import_utils4.mergeRefs)(register, itemRef, ref),
@@ -380,9 +388,9 @@ var MenuItem = (0, import_core4.forwardRef)(
     });
     (0, import_utils4.useUpdateEffect)(() => {
       if (!isOpen) return;
-      const id = requestAnimationFrameId.current;
+      const id2 = requestAnimationFrameId.current;
       if (isFocused && !trulyDisabled && itemRef.current) {
-        if (id) cancelAnimationFrame(id);
+        if (id2) cancelAnimationFrame(id2);
         requestAnimationFrameId.current = requestAnimationFrame(() => {
           var _a2;
           (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
@@ -392,7 +400,7 @@ var MenuItem = (0, import_core4.forwardRef)(
         menuRef.current.focus({ preventScroll: true });
       }
       return () => {
-        if (id) cancelAnimationFrame(id);
+        if (id2) cancelAnimationFrame(id2);
       };
     }, [isFocused, trulyDisabled, menuRef, isOpen]);
     children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { flex: 1 }, children }) : children;
@@ -421,12 +429,13 @@ var MenuItem = (0, import_core4.forwardRef)(
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_core4.ui.div,
           {
-            ...rest,
-            ...isDownstreamOpen ? { "data-active": "" } : {},
+            id,
             className: (0, import_utils4.cx)("ui-menu__item", className),
-            role: "menuitem",
-            tabIndex: isFocused ? 0 : -1,
+            "data-focus": (0, import_utils4.dataAttr)(isDownstreamOpen),
             __css: css,
+            ...rest,
+            role,
+            tabIndex: !isDownstreamOpen && isFocused ? 0 : -1,
             children: [
               icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { children: icon }) : null,
               children,
@@ -447,7 +456,7 @@ var MenuOptionItem = (0, import_core4.forwardRef)(
       {
         ref,
         className: (0, import_utils4.cx)("ui-menu__item--option", className),
-        "aria-checked": (0, import_utils4.ariaAttr)(isChecked),
+        "aria-checked": isChecked,
         closeOnSelect,
         ...rest,
         children: [
@@ -528,10 +537,12 @@ var MenuButton = (0, import_core5.forwardRef)(
     id != null ? id : id = uuid;
     const onKeyDown = (0, import_react4.useCallback)(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
           ArrowDown: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem),
           ArrowUp: (0, import_utils5.funcAll)(onOpen, onFocusLastItem),
-          Enter: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem)
+          Enter: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem),
+          Space: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem)
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -542,9 +553,12 @@ var MenuButton = (0, import_core5.forwardRef)(
     );
     const onItemKeyDown = (0, import_react4.useCallback)(
       (ev) => {
+        if (ev.key === " ") ev.key = ev.code;
         const actions = {
           ArrowLeft: isOpen ? (0, import_utils5.funcAll)(onUpstreamRestoreFocus, onClose) : void 0,
-          ArrowRight: !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0
+          ArrowRight: !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0,
+          Enter: !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0,
+          Space: !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -561,7 +575,6 @@ var MenuButton = (0, import_core5.forwardRef)(
         id,
         ref: (0, import_utils5.mergeRefs)(buttonRef, ref),
         className: (0, import_utils5.cx)("ui-menu", className),
-        "aria-expanded": isOpen,
         "aria-haspopup": "menu",
         ...rest,
         "data-active": (0, import_utils5.dataAttr)(isOpen),
@@ -675,8 +688,8 @@ var import_utils8 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MenuList = (0, import_core8.forwardRef)(
-  ({ className, children, contentProps, ...rest }, ref) => {
-    var _a;
+  ({ id, className, children, contentProps, ...rest }, ref) => {
+    var _a, _b;
     const {
       buttonRef,
       focusedIndex,
@@ -685,7 +698,10 @@ var MenuList = (0, import_core8.forwardRef)(
       styles,
       onClose
     } = useMenu();
+    const uuid = (0, import_react6.useId)();
+    id != null ? id : id = uuid;
     const descendants = useMenuDescendantsContext();
+    const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id;
     const onNext = (0, import_react6.useCallback)(() => {
       const next = descendants.enabledNextValue(focusedIndex);
       if (next) setFocusedIndex(next.index);
@@ -710,7 +726,7 @@ var MenuList = (0, import_core8.forwardRef)(
           End: onLast,
           Escape: onClose,
           Home: onFirst,
-          Tab: (ev2) => ev2.preventDefault()
+          Tab: onClose
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -722,8 +738,12 @@ var MenuList = (0, import_core8.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_popover4.PopoverContent,
       {
+        id,
         as: "div",
         className: "ui-menu__content",
+        "aria-activedescendant": activedescendantId,
+        "aria-labelledby": (_b = buttonRef.current) == null ? void 0 : _b.id,
+        role: "menu",
         __css: { ...styles.content },
         ...contentProps,
         onKeyDown: (0, import_utils8.handlerAll)(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown),
@@ -732,8 +752,6 @@ var MenuList = (0, import_core8.forwardRef)(
           {
             ref: (0, import_utils8.mergeRefs)(menuRef, ref),
             className: (0, import_utils8.cx)("ui-menu__list", className),
-            "aria-labelledby": (_a = buttonRef.current) == null ? void 0 : _a.id,
-            role: "menu",
             tabIndex: -1,
             __css: { ...styles.list },
             ...rest,