@yamada-ui/menu 0.2.10 → 0.2.11

package/dist/{chunk-3IEZAEQF.mjs → chunk-3RUBEAMY.mjs}

@@ -1,9 +1,9 @@
 import {
   MenuGroup
-} from "./chunk-YDLVWG5I.mjs";
+} from "./chunk-QBVCLEL4.mjs";
 import {
   MenuOptionItem
-} from "./chunk-7YDTXOPR.mjs";
+} from "./chunk-PVB36WH4.mjs";
 
 // src/menu-option-group.tsx
 import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -11,7 +11,13 @@ import { cx, getValidChildren, omitObject, isArray } from "@yamada-ui/utils";
 import { cloneElement, forwardRef, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 var MenuOptionGroup = forwardRef(
-  ({ className, defaultValue, type, children, ...rest }, ref) => {
+  ({
+    className,
+    defaultValue,
+    type,
+    children,
+    ...rest
+  }, ref) => {
     const isRadio = type === "radio";
     defaultValue = isRadio ? "" : [];
     const [value, setValue] = useControllableState({

package/dist/chunk-C6C2WO75.mjs

@@ -0,0 +1,72 @@
+import {
+  useMenu,
+  useMenuDescendantsContext
+} from "./chunk-DB6N4OUS.mjs";
+
+// src/menu-list.tsx
+import { forwardRef } from "@yamada-ui/core";
+import { PopoverContent } from "@yamada-ui/popover";
+import { cx, handlerAll, mergeRefs } from "@yamada-ui/utils";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var MenuList = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
+    const descendants = useMenuDescendantsContext();
+    const onNext = useCallback(() => {
+      const next = descendants.enabledNextValue(focusedIndex);
+      if (next)
+        setFocusedIndex(next.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onPrev = useCallback(() => {
+      const prev = descendants.enabledPrevValue(focusedIndex);
+      if (prev)
+        setFocusedIndex(prev.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onFirst = useCallback(() => {
+      const first = descendants.enabledfirstValue();
+      if (first)
+        setFocusedIndex(first.index);
+    }, [descendants, setFocusedIndex]);
+    const onLast = useCallback(() => {
+      const last = descendants.enabledlastValue();
+      if (last)
+        setFocusedIndex(last.index);
+    }, [descendants, setFocusedIndex]);
+    const onKeyDown = useCallback(
+      (ev) => {
+        const actions = {
+          Tab: (ev2) => ev2.preventDefault(),
+          Escape: onClose,
+          ArrowDown: focusedIndex === -1 ? onFirst : onNext,
+          ArrowUp: focusedIndex === -1 ? onLast : onPrev,
+          Home: onFirst,
+          End: onLast
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        action(ev);
+      },
+      [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
+    );
+    const css = { ...styles.list };
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        ref: mergeRefs(menuRef, ref),
+        className: cx("ui-menu-list", className),
+        role: "menu",
+        tabIndex: -1,
+        __css: css,
+        ...rest,
+        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown)
+      }
+    );
+  }
+);
+
+export {
+  MenuList
+};

package/dist/{chunk-6IUWMOKW.mjs → chunk-DB6N4OUS.mjs}

@@ -1,10 +1,21 @@
 // src/menu.tsx
-import { useMultiComponentStyle, omitThemeProps } from "@yamada-ui/core";
+import {
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
 import { Popover } from "@yamada-ui/popover";
 import { createDescendant } from "@yamada-ui/use-descendant";
 import { useDisclosure } from "@yamada-ui/use-disclosure";
-import { createContext, useUnmountEffect, useUpdateEffect } from "@yamada-ui/utils";
-import { useCallback, useRef, useState } from "react";
+import {
+  createContext,
+  useUnmountEffect,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
 import { jsx } from "react/jsx-runtime";
 var {
   DescendantsContextProvider,
@@ -30,10 +41,12 @@ var Menu = (props) => {
   const menuRef = useRef(null);
   const timeoutIds = useRef(/* @__PURE__ */ new Set([]));
   const onFocusMenu = useCallback(() => {
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
-    });
+    requestAnimationFrame(
+      () => {
+        var _a;
+        return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
+      }
+    );
   }, []);
   const onFocusFirstItem = useCallback(() => {
     const id = setTimeout(() => {
@@ -60,7 +73,10 @@ var Menu = (props) => {
     (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
     onFocusMenu();
   }, [onFocusMenu, rest]);
-  const { isOpen, onOpen, onClose } = useDisclosure({ ...props, onOpen: onOpenInternal });
+  const { isOpen, onOpen, onClose } = useDisclosure({
+    ...props,
+    onOpen: onOpenInternal
+  });
   useUpdateEffect(() => {
     if (!isOpen)
       setFocusedIndex(-1);

package/dist/{chunk-CSEIVNH6.mjs → chunk-PLWLG3PU.mjs}

@@ -1,6 +1,6 @@
 import {
   useMenu
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 
 // src/menu-divider.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -9,7 +9,15 @@ import { jsx } from "react/jsx-runtime";
 var MenuDivider = forwardRef(({ className, ...rest }, ref) => {
   const { styles } = useMenu();
   const css = { ...styles.divider };
-  return /* @__PURE__ */ jsx(ui.hr, { ref, className: cx("ui-menu-divider", className), __css: css, ...rest });
+  return /* @__PURE__ */ jsx(
+    ui.hr,
+    {
+      ref,
+      className: cx("ui-menu-divider", className),
+      __css: css,
+      ...rest
+    }
+  );
 });
 
 export {

package/dist/{chunk-7YDTXOPR.mjs → chunk-PVB36WH4.mjs}

@@ -1,7 +1,7 @@
 import {
   useMenu,
   useMenuDescendant
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 
 // src/menu-item.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -14,7 +14,10 @@ import {
   mergeRefs,
   useUpdateEffect
 } from "@yamada-ui/utils";
-import { useCallback, useRef } from "react";
+import {
+  useCallback,
+  useRef
+} from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var isTargetMenuItem = (target) => {
   var _a;
@@ -137,23 +140,43 @@ var MenuOptionItem = forwardRef(
     );
   }
 );
-var MenuIcon = forwardRef(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.icon
-  };
-  return /* @__PURE__ */ jsx(ui.span, { ref, className: cx("ui-menu-icon", className), __css: css, ...rest });
-});
-var MenuCommand = forwardRef(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.command };
-  return /* @__PURE__ */ jsx(ui.span, { ref, className: cx("ui-menu-command", className), __css: css, ...rest });
-});
+var MenuIcon = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = {
+      flexShrink: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "0.85em",
+      ...styles.icon
+    };
+    return /* @__PURE__ */ jsx(
+      ui.span,
+      {
+        ref,
+        className: cx("ui-menu-icon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var MenuCommand = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.command };
+    return /* @__PURE__ */ jsx(
+      ui.span,
+      {
+        ref,
+        className: cx("ui-menu-command", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
 var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx(
   "polygon",
   {

package/dist/{chunk-YDLVWG5I.mjs → chunk-QBVCLEL4.mjs}

@@ -1,6 +1,6 @@
 import {
   useMenu
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 
 // src/menu-group.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -19,7 +19,14 @@ var MenuGroup = forwardRef(
         __css: css,
         ...rest,
         children: [
-          title ? /* @__PURE__ */ jsx(ui.span, { className: cx("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          title ? /* @__PURE__ */ jsx(
+            ui.span,
+            {
+              className: cx("ui-menu-group-title"),
+              __css: styles.groupTitle,
+              children: title
+            }
+          ) : null,
           children
         ]
       }

package/dist/{chunk-W3C6GCGE.mjs → chunk-WXTXC73G.mjs}

@@ -1,6 +1,6 @@
 import {
   useMenu
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 
 // src/menu-button.tsx
 import { ui, forwardRef } from "@yamada-ui/core";

package/dist/index.js

@@ -63,10 +63,12 @@ var Menu = (props) => {
   const menuRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const onFocusMenu = (0, import_react.useCallback)(() => {
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
-    });
+    requestAnimationFrame(
+      () => {
+        var _a;
+        return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
+      }
+    );
   }, []);
   const onFocusFirstItem = (0, import_react.useCallback)(() => {
     const id = setTimeout(() => {
@@ -93,7 +95,10 @@ var Menu = (props) => {
     (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
     onFocusMenu();
   }, [onFocusMenu, rest]);
-  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({ ...props, onOpen: onOpenInternal });
+  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
+    ...props,
+    onOpen: onOpenInternal
+  });
   (0, import_utils.useUpdateEffect)(() => {
     if (!isOpen)
       setFocusedIndex(-1);
@@ -194,61 +199,63 @@ var import_popover3 = require("@yamada-ui/popover");
 var import_utils3 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var MenuList = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
-  const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
-  const descendants = useMenuDescendantsContext();
-  const onNext = (0, import_react3.useCallback)(() => {
-    const next = descendants.enabledNextValue(focusedIndex);
-    if (next)
-      setFocusedIndex(next.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onPrev = (0, import_react3.useCallback)(() => {
-    const prev = descendants.enabledPrevValue(focusedIndex);
-    if (prev)
-      setFocusedIndex(prev.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onFirst = (0, import_react3.useCallback)(() => {
-    const first = descendants.enabledfirstValue();
-    if (first)
-      setFocusedIndex(first.index);
-  }, [descendants, setFocusedIndex]);
-  const onLast = (0, import_react3.useCallback)(() => {
-    const last = descendants.enabledlastValue();
-    if (last)
-      setFocusedIndex(last.index);
-  }, [descendants, setFocusedIndex]);
-  const onKeyDown = (0, import_react3.useCallback)(
-    (ev) => {
-      const actions = {
-        Tab: (ev2) => ev2.preventDefault(),
-        Escape: onClose,
-        ArrowDown: focusedIndex === -1 ? onFirst : onNext,
-        ArrowUp: focusedIndex === -1 ? onLast : onPrev,
-        Home: onFirst,
-        End: onLast
-      };
-      const action = actions[ev.key];
-      if (!action)
-        return;
-      ev.preventDefault();
-      action(ev);
-    },
-    [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
-  );
-  const css = { ...styles.list };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_popover3.PopoverContent,
-    {
-      ref: (0, import_utils3.mergeRefs)(menuRef, ref),
-      className: (0, import_utils3.cx)("ui-menu-list", className),
-      role: "menu",
-      tabIndex: -1,
-      __css: css,
-      ...rest,
-      onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown)
-    }
-  );
-});
+var MenuList = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
+    const descendants = useMenuDescendantsContext();
+    const onNext = (0, import_react3.useCallback)(() => {
+      const next = descendants.enabledNextValue(focusedIndex);
+      if (next)
+        setFocusedIndex(next.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onPrev = (0, import_react3.useCallback)(() => {
+      const prev = descendants.enabledPrevValue(focusedIndex);
+      if (prev)
+        setFocusedIndex(prev.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onFirst = (0, import_react3.useCallback)(() => {
+      const first = descendants.enabledfirstValue();
+      if (first)
+        setFocusedIndex(first.index);
+    }, [descendants, setFocusedIndex]);
+    const onLast = (0, import_react3.useCallback)(() => {
+      const last = descendants.enabledlastValue();
+      if (last)
+        setFocusedIndex(last.index);
+    }, [descendants, setFocusedIndex]);
+    const onKeyDown = (0, import_react3.useCallback)(
+      (ev) => {
+        const actions = {
+          Tab: (ev2) => ev2.preventDefault(),
+          Escape: onClose,
+          ArrowDown: focusedIndex === -1 ? onFirst : onNext,
+          ArrowUp: focusedIndex === -1 ? onLast : onPrev,
+          Home: onFirst,
+          End: onLast
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        action(ev);
+      },
+      [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
+    );
+    const css = { ...styles.list };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_popover3.PopoverContent,
+      {
+        ref: (0, import_utils3.mergeRefs)(menuRef, ref),
+        className: (0, import_utils3.cx)("ui-menu-list", className),
+        role: "menu",
+        tabIndex: -1,
+        __css: css,
+        ...rest,
+        onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown)
+      }
+    );
+  }
+);
 
 // src/menu-item.tsx
 var import_core4 = require("@yamada-ui/core");
@@ -377,23 +384,43 @@ var MenuOptionItem = (0, import_core4.forwardRef)(
     );
   }
 );
-var MenuIcon = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.icon
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-icon", className), __css: css, ...rest });
-});
-var MenuCommand = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.command };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-command", className), __css: css, ...rest });
-});
+var MenuIcon = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = {
+      flexShrink: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "0.85em",
+      ...styles.icon
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.span,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-menu-icon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var MenuCommand = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.command };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.span,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-menu-command", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "polygon",
   {
@@ -419,7 +446,14 @@ var MenuGroup = (0, import_core5.forwardRef)(
         __css: css,
         ...rest,
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { className: (0, import_utils5.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core5.ui.span,
+            {
+              className: (0, import_utils5.cx)("ui-menu-group-title"),
+              __css: styles.groupTitle,
+              children: title
+            }
+          ) : null,
           children
         ]
       }
@@ -433,7 +467,13 @@ var import_utils6 = require("@yamada-ui/utils");
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuOptionGroup = (0, import_react5.forwardRef)(
-  ({ className, defaultValue, type, children, ...rest }, ref) => {
+  ({
+    className,
+    defaultValue,
+    type,
+    children,
+    ...rest
+  }, ref) => {
     const isRadio = type === "radio";
     defaultValue = isRadio ? "" : [];
     const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
@@ -483,7 +523,15 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuDivider = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useMenu();
   const css = { ...styles.divider };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.ui.hr, { ref, className: (0, import_utils7.cx)("ui-menu-divider", className), __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_core6.ui.hr,
+    {
+      ref,
+      className: (0, import_utils7.cx)("ui-menu-divider", className),
+      __css: css,
+      ...rest
+    }
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   MenuButton
-} from "./chunk-W3C6GCGE.mjs";
+} from "./chunk-WXTXC73G.mjs";
 import {
   MenuDivider
-} from "./chunk-CSEIVNH6.mjs";
+} from "./chunk-PLWLG3PU.mjs";
 import {
   MenuList
-} from "./chunk-47P6GKNZ.mjs";
+} from "./chunk-C6C2WO75.mjs";
 import {
   MenuOptionGroup
-} from "./chunk-3IEZAEQF.mjs";
+} from "./chunk-3RUBEAMY.mjs";
 import {
   MenuGroup
-} from "./chunk-YDLVWG5I.mjs";
+} from "./chunk-QBVCLEL4.mjs";
 import {
   MenuItem,
   MenuOptionItem
-} from "./chunk-7YDTXOPR.mjs";
+} from "./chunk-PVB36WH4.mjs";
 import {
   Menu
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 export {
   Menu,
   MenuButton,

package/dist/menu-button.mjs

@@ -1,7 +1,7 @@
 import {
   MenuButton
-} from "./chunk-W3C6GCGE.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-WXTXC73G.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuButton
 };

package/dist/menu-divider.js

@@ -50,7 +50,15 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var MenuDivider = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useMenu();
   const css = { ...styles.divider };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.hr, { ref, className: (0, import_utils2.cx)("ui-menu-divider", className), __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core2.ui.hr,
+    {
+      ref,
+      className: (0, import_utils2.cx)("ui-menu-divider", className),
+      __css: css,
+      ...rest
+    }
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/menu-divider.mjs

@@ -1,7 +1,7 @@
 import {
   MenuDivider
-} from "./chunk-CSEIVNH6.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-PLWLG3PU.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuDivider
 };

package/dist/menu-group.js

@@ -60,7 +60,14 @@ var MenuGroup = (0, import_core2.forwardRef)(
         __css: css,
         ...rest,
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { className: (0, import_utils2.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.span,
+            {
+              className: (0, import_utils2.cx)("ui-menu-group-title"),
+              __css: styles.groupTitle,
+              children: title
+            }
+          ) : null,
           children
         ]
       }

package/dist/menu-group.mjs

@@ -1,7 +1,7 @@
 import {
   MenuGroup
-} from "./chunk-YDLVWG5I.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-QBVCLEL4.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuGroup
 };

package/dist/menu-item.js

@@ -171,23 +171,43 @@ var MenuOptionItem = (0, import_core2.forwardRef)(
     );
   }
 );
-var MenuIcon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.icon
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { ref, className: (0, import_utils2.cx)("ui-menu-icon", className), __css: css, ...rest });
-});
-var MenuCommand = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.command };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { ref, className: (0, import_utils2.cx)("ui-menu-command", className), __css: css, ...rest });
-});
+var MenuIcon = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = {
+      flexShrink: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "0.85em",
+      ...styles.icon
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.span,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-icon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var MenuCommand = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.command };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.span,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-command", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "polygon",
   {

package/dist/menu-item.mjs

@@ -1,8 +1,8 @@
 import {
   MenuItem,
   MenuOptionItem
-} from "./chunk-7YDTXOPR.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-PVB36WH4.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuItem,
   MenuOptionItem

package/dist/menu-list.js

@@ -49,61 +49,63 @@ var [MenuProvider, useMenu] = (0, import_utils.createContext)({
 
 // src/menu-list.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var MenuList = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
-  const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
-  const descendants = useMenuDescendantsContext();
-  const onNext = (0, import_react2.useCallback)(() => {
-    const next = descendants.enabledNextValue(focusedIndex);
-    if (next)
-      setFocusedIndex(next.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onPrev = (0, import_react2.useCallback)(() => {
-    const prev = descendants.enabledPrevValue(focusedIndex);
-    if (prev)
-      setFocusedIndex(prev.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onFirst = (0, import_react2.useCallback)(() => {
-    const first = descendants.enabledfirstValue();
-    if (first)
-      setFocusedIndex(first.index);
-  }, [descendants, setFocusedIndex]);
-  const onLast = (0, import_react2.useCallback)(() => {
-    const last = descendants.enabledlastValue();
-    if (last)
-      setFocusedIndex(last.index);
-  }, [descendants, setFocusedIndex]);
-  const onKeyDown = (0, import_react2.useCallback)(
-    (ev) => {
-      const actions = {
-        Tab: (ev2) => ev2.preventDefault(),
-        Escape: onClose,
-        ArrowDown: focusedIndex === -1 ? onFirst : onNext,
-        ArrowUp: focusedIndex === -1 ? onLast : onPrev,
-        Home: onFirst,
-        End: onLast
-      };
-      const action = actions[ev.key];
-      if (!action)
-        return;
-      ev.preventDefault();
-      action(ev);
-    },
-    [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
-  );
-  const css = { ...styles.list };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_popover2.PopoverContent,
-    {
-      ref: (0, import_utils2.mergeRefs)(menuRef, ref),
-      className: (0, import_utils2.cx)("ui-menu-list", className),
-      role: "menu",
-      tabIndex: -1,
-      __css: css,
-      ...rest,
-      onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown)
-    }
-  );
-});
+var MenuList = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
+    const descendants = useMenuDescendantsContext();
+    const onNext = (0, import_react2.useCallback)(() => {
+      const next = descendants.enabledNextValue(focusedIndex);
+      if (next)
+        setFocusedIndex(next.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onPrev = (0, import_react2.useCallback)(() => {
+      const prev = descendants.enabledPrevValue(focusedIndex);
+      if (prev)
+        setFocusedIndex(prev.index);
+    }, [descendants, focusedIndex, setFocusedIndex]);
+    const onFirst = (0, import_react2.useCallback)(() => {
+      const first = descendants.enabledfirstValue();
+      if (first)
+        setFocusedIndex(first.index);
+    }, [descendants, setFocusedIndex]);
+    const onLast = (0, import_react2.useCallback)(() => {
+      const last = descendants.enabledlastValue();
+      if (last)
+        setFocusedIndex(last.index);
+    }, [descendants, setFocusedIndex]);
+    const onKeyDown = (0, import_react2.useCallback)(
+      (ev) => {
+        const actions = {
+          Tab: (ev2) => ev2.preventDefault(),
+          Escape: onClose,
+          ArrowDown: focusedIndex === -1 ? onFirst : onNext,
+          ArrowUp: focusedIndex === -1 ? onLast : onPrev,
+          Home: onFirst,
+          End: onLast
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        action(ev);
+      },
+      [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
+    );
+    const css = { ...styles.list };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_popover2.PopoverContent,
+      {
+        ref: (0, import_utils2.mergeRefs)(menuRef, ref),
+        className: (0, import_utils2.cx)("ui-menu-list", className),
+        role: "menu",
+        tabIndex: -1,
+        __css: css,
+        ...rest,
+        onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown)
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MenuList

package/dist/menu-list.mjs

@@ -1,7 +1,7 @@
 import {
   MenuList
-} from "./chunk-47P6GKNZ.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-C6C2WO75.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuList
 };

package/dist/menu-option-group.js

@@ -65,7 +65,14 @@ var MenuGroup = (0, import_core2.forwardRef)(
         __css: css,
         ...rest,
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { className: (0, import_utils2.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.span,
+            {
+              className: (0, import_utils2.cx)("ui-menu-group-title"),
+              __css: styles.groupTitle,
+              children: title
+            }
+          ) : null,
           children
         ]
       }
@@ -200,23 +207,43 @@ var MenuOptionItem = (0, import_core3.forwardRef)(
     );
   }
 );
-var MenuIcon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.icon
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { ref, className: (0, import_utils3.cx)("ui-menu-icon", className), __css: css, ...rest });
-});
-var MenuCommand = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.command };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { ref, className: (0, import_utils3.cx)("ui-menu-command", className), __css: css, ...rest });
-});
+var MenuIcon = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = {
+      flexShrink: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "0.85em",
+      ...styles.icon
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.span,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-menu-icon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var MenuCommand = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.command };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.span,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-menu-command", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "polygon",
   {
@@ -228,7 +255,13 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { view
 // src/menu-option-group.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MenuOptionGroup = (0, import_react3.forwardRef)(
-  ({ className, defaultValue, type, children, ...rest }, ref) => {
+  ({
+    className,
+    defaultValue,
+    type,
+    children,
+    ...rest
+  }, ref) => {
     const isRadio = type === "radio";
     defaultValue = isRadio ? "" : [];
     const [value, setValue] = (0, import_use_controllable_state.useControllableState)({

package/dist/menu-option-group.mjs

@@ -1,9 +1,9 @@
 import {
   MenuOptionGroup
-} from "./chunk-3IEZAEQF.mjs";
-import "./chunk-YDLVWG5I.mjs";
-import "./chunk-7YDTXOPR.mjs";
-import "./chunk-6IUWMOKW.mjs";
+} from "./chunk-3RUBEAMY.mjs";
+import "./chunk-QBVCLEL4.mjs";
+import "./chunk-PVB36WH4.mjs";
+import "./chunk-DB6N4OUS.mjs";
 export {
   MenuOptionGroup
 };

package/dist/menu.js

@@ -57,10 +57,12 @@ var Menu = (props) => {
   const menuRef = (0, import_react.useRef)(null);
   const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
   const onFocusMenu = (0, import_react.useCallback)(() => {
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
-    });
+    requestAnimationFrame(
+      () => {
+        var _a;
+        return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
+      }
+    );
   }, []);
   const onFocusFirstItem = (0, import_react.useCallback)(() => {
     const id = setTimeout(() => {
@@ -87,7 +89,10 @@ var Menu = (props) => {
     (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
     onFocusMenu();
   }, [onFocusMenu, rest]);
-  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({ ...props, onOpen: onOpenInternal });
+  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
+    ...props,
+    onOpen: onOpenInternal
+  });
   (0, import_utils.useUpdateEffect)(() => {
     if (!isOpen)
       setFocusedIndex(-1);

package/dist/menu.mjs

@@ -3,7 +3,7 @@ import {
   useMenu,
   useMenuDescendant,
   useMenuDescendantsContext
-} from "./chunk-6IUWMOKW.mjs";
+} from "./chunk-DB6N4OUS.mjs";
 export {
   Menu,
   useMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/menu",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Yamada UI menu component",
   "keywords": [
     "yamada",
@@ -35,14 +35,14 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.5.1",
-    "@yamada-ui/utils": "0.1.3",
-    "@yamada-ui/popover": "0.2.9",
-    "@yamada-ui/transitions": "0.2.7",
-    "@yamada-ui/use-disclosure": "0.2.4",
-    "@yamada-ui/use-descendant": "0.1.4",
-    "@yamada-ui/use-clickable": "0.2.2",
-    "@yamada-ui/use-controllable-state": "0.1.4"
+    "@yamada-ui/core": "0.5.2",
+    "@yamada-ui/utils": "0.1.4",
+    "@yamada-ui/popover": "0.2.10",
+    "@yamada-ui/transitions": "0.2.8",
+    "@yamada-ui/use-disclosure": "0.2.5",
+    "@yamada-ui/use-descendant": "0.1.5",
+    "@yamada-ui/use-clickable": "0.2.3",
+    "@yamada-ui/use-controllable-state": "0.1.5"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-47P6GKNZ.mjs

@@ -1,70 +0,0 @@
-import {
-  useMenu,
-  useMenuDescendantsContext
-} from "./chunk-6IUWMOKW.mjs";
-
-// src/menu-list.tsx
-import { forwardRef } from "@yamada-ui/core";
-import { PopoverContent } from "@yamada-ui/popover";
-import { cx, handlerAll, mergeRefs } from "@yamada-ui/utils";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var MenuList = forwardRef(({ className, ...rest }, ref) => {
-  const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
-  const descendants = useMenuDescendantsContext();
-  const onNext = useCallback(() => {
-    const next = descendants.enabledNextValue(focusedIndex);
-    if (next)
-      setFocusedIndex(next.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onPrev = useCallback(() => {
-    const prev = descendants.enabledPrevValue(focusedIndex);
-    if (prev)
-      setFocusedIndex(prev.index);
-  }, [descendants, focusedIndex, setFocusedIndex]);
-  const onFirst = useCallback(() => {
-    const first = descendants.enabledfirstValue();
-    if (first)
-      setFocusedIndex(first.index);
-  }, [descendants, setFocusedIndex]);
-  const onLast = useCallback(() => {
-    const last = descendants.enabledlastValue();
-    if (last)
-      setFocusedIndex(last.index);
-  }, [descendants, setFocusedIndex]);
-  const onKeyDown = useCallback(
-    (ev) => {
-      const actions = {
-        Tab: (ev2) => ev2.preventDefault(),
-        Escape: onClose,
-        ArrowDown: focusedIndex === -1 ? onFirst : onNext,
-        ArrowUp: focusedIndex === -1 ? onLast : onPrev,
-        Home: onFirst,
-        End: onLast
-      };
-      const action = actions[ev.key];
-      if (!action)
-        return;
-      ev.preventDefault();
-      action(ev);
-    },
-    [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
-  );
-  const css = { ...styles.list };
-  return /* @__PURE__ */ jsx(
-    PopoverContent,
-    {
-      ref: mergeRefs(menuRef, ref),
-      className: cx("ui-menu-list", className),
-      role: "menu",
-      tabIndex: -1,
-      __css: css,
-      ...rest,
-      onKeyDown: handlerAll(rest.onKeyDown, onKeyDown)
-    }
-  );
-});
-
-export {
-  MenuList
-};