@yamada-ui/menu 0.1.12 → 0.2.0

package/dist/chunk-4VY7HO44.mjs

@@ -0,0 +1,70 @@
+import {
+  useMenu,
+  useMenuDescendantsContext
+} from "./chunk-6ALPY7K4.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-562FLKUK.mjs

@@ -0,0 +1,32 @@
+import {
+  useMenu
+} from "./chunk-6ALPY7K4.mjs";
+
+// src/menu-group.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MenuGroup = forwardRef(
+  ({ className, title, children, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.group };
+    return /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-menu-group", className),
+        role: "group",
+        __css: css,
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx(ui.span, { className: cx("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+
+export {
+  MenuGroup
+};

package/dist/chunk-FLFY6YIF.mjs

@@ -0,0 +1,59 @@
+import {
+  MenuGroup
+} from "./chunk-562FLKUK.mjs";
+import {
+  MenuOptionItem
+} from "./chunk-MIXRGNW3.mjs";
+
+// src/menu-option-group.tsx
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+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) => {
+    const isRadio = type === "radio";
+    defaultValue = isRadio ? "" : [];
+    const [value, setValue] = useControllableState({
+      ...rest,
+      defaultValue
+    });
+    const onChange = useCallback(
+      (selectedValue) => {
+        if (isRadio && typeof value === "string")
+          setValue(selectedValue);
+        if (!isRadio && isArray(value)) {
+          const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
+          setValue(nextValue);
+        }
+      },
+      [isRadio, value, setValue]
+    );
+    const validChildren = getValidChildren(children);
+    const cloneChildren = validChildren.map((child) => {
+      if (child.type !== MenuOptionItem)
+        return child;
+      const onClick = (ev) => {
+        var _a, _b;
+        onChange(child.props.value);
+        (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
+      };
+      const isChecked = !isRadio && isArray(value) ? value.includes(child.props.value) : child.props.value === value;
+      return cloneElement(child, { type, onClick, isChecked });
+    });
+    return /* @__PURE__ */ jsx(
+      MenuGroup,
+      {
+        ref,
+        className: cx("ui-menu-option-group", className),
+        ...omitObject(rest, ["value", "onChange"]),
+        children: cloneChildren
+      }
+    );
+  }
+);
+MenuOptionGroup.displayName = "MenuOptionGroup";
+
+export {
+  MenuOptionGroup
+};

package/dist/chunk-IWMBG2LC.mjs

@@ -0,0 +1,59 @@
+import {
+  useMenu
+} from "./chunk-6ALPY7K4.mjs";
+
+// src/menu-button.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { PopoverTrigger } from "@yamada-ui/popover";
+import { ariaAttr, cx, dataAttr, funcAll, handlerAll } from "@yamada-ui/utils";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var MenuButton = forwardRef(
+  ({ className, children, as: As, ...rest }, ref) => {
+    const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu();
+    const onKeyDown = useCallback(
+      (ev) => {
+        const actions = {
+          Enter: funcAll(onOpen, onFocusFirstItem),
+          ArrowDown: funcAll(onOpen, onFocusFirstItem),
+          ArrowUp: funcAll(onOpen, onFocusLastItem)
+        };
+        const action = actions[ev.key];
+        if (!action)
+          return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        action();
+      },
+      [onFocusFirstItem, onFocusLastItem, onOpen]
+    );
+    const Component = As || Button;
+    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cx("ui-menu-button", className),
+        ...rest,
+        "data-active": dataAttr(isOpen),
+        "aria-expanded": ariaAttr(isOpen),
+        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown),
+        children: /* @__PURE__ */ jsx(ui.span, { __css: { pointerEvents: "none", flex: "1 1 auto", minW: 0 }, children })
+      }
+    ) });
+  }
+);
+var Button = forwardRef((rest, ref) => {
+  const { styles } = useMenu();
+  const css = {
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    outline: 0,
+    ...styles.button
+  };
+  return /* @__PURE__ */ jsx(ui.button, { ref, __css: css, ...rest });
+});
+
+export {
+  MenuButton
+};

package/dist/chunk-MIXRGNW3.mjs

@@ -0,0 +1,168 @@
+import {
+  useMenu,
+  useMenuDescendant
+} from "./chunk-6ALPY7K4.mjs";
+
+// src/menu-item.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { useClickable } from "@yamada-ui/use-clickable";
+import {
+  ariaAttr,
+  cx,
+  isActiveElement,
+  isHTMLElement,
+  mergeRefs,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isTargetMenuItem = (target) => {
+  var _a;
+  return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
+};
+var MenuItem = forwardRef(
+  ({
+    as,
+    className,
+    type,
+    isDisabled,
+    isFocusable,
+    closeOnSelect: customCloseOnSelect,
+    icon,
+    command,
+    children,
+    ...props
+  }, ref) => {
+    const {
+      focusedIndex,
+      setFocusedIndex,
+      isOpen,
+      onClose,
+      closeOnSelect: generalCloseOnSelect,
+      menuRef,
+      styles
+    } = useMenu();
+    const trulyDisabled = isDisabled && !isFocusable;
+    const buttonRef = useRef(null);
+    const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
+    const isFocused = index === focusedIndex;
+    const onClick = useCallback(
+      (ev) => {
+        var _a;
+        (_a = props.onClick) == null ? void 0 : _a.call(props, ev);
+        if (!isTargetMenuItem(ev.currentTarget))
+          return;
+        if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
+          onClose();
+      },
+      [props, customCloseOnSelect, generalCloseOnSelect, onClose]
+    );
+    const onFocus = useCallback(
+      (ev) => {
+        var _a;
+        (_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
+        setFocusedIndex(index);
+      },
+      [props, setFocusedIndex, index]
+    );
+    const rest = useClickable({
+      onClick,
+      onFocus,
+      ref: mergeRefs(register, buttonRef, ref),
+      isDisabled,
+      isFocusable
+    });
+    useUpdateEffect(() => {
+      if (!isOpen)
+        return;
+      if (isFocused && !trulyDisabled && buttonRef.current) {
+        requestAnimationFrame(() => {
+          var _a;
+          return (_a = buttonRef.current) == null ? void 0 : _a.focus();
+        });
+      } else if (menuRef.current && !isActiveElement(menuRef.current)) {
+        menuRef.current.focus();
+      }
+    }, [isFocused, trulyDisabled, menuRef, isOpen]);
+    type = as || type ? type != null ? type : void 0 : "button";
+    children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: { pointerEvents: "none", flex: 1 }, children }) : children;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ jsxs(
+      ui.button,
+      {
+        ...props,
+        ...rest,
+        as,
+        type,
+        role: "menu-item",
+        tabIndex: isFocused ? 0 : -1,
+        className: cx("ui-menu-item", className),
+        __css: css,
+        children: [
+          icon ? /* @__PURE__ */ jsx(MenuIcon, { children: icon }) : null,
+          children,
+          command ? /* @__PURE__ */ jsx(MenuCommand, { children: command }) : null
+        ]
+      }
+    );
+  }
+);
+var MenuOptionItem = forwardRef(
+  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        ref,
+        className: cx("ui-menu-option-item", className),
+        "aria-checked": ariaAttr(isChecked),
+        closeOnSelect,
+        ...rest,
+        children: [
+          icon !== null ? /* @__PURE__ */ jsx(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ jsx(CheckIcon, {}) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+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",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+
+export {
+  MenuItem,
+  MenuOptionItem
+};

package/dist/chunk-VMGROBTU.mjs

@@ -0,0 +1,17 @@
+import {
+  useMenu
+} from "./chunk-6ALPY7K4.mjs";
+
+// src/menu-divider.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+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 });
+});
+
+export {
+  MenuDivider
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Menu, MenuProps, useMenu, useMenuDescendant, useMenuDescendantsContext } from './menu.js';
+export { Menu, MenuProps } from './menu.js';
 export { MenuButton, MenuButtonProps } from './menu-button.js';
 export { MenuList, MenuListProps } from './menu-list.js';
 export { MenuItem, MenuItemProps, MenuOptionItem, MenuOptionItemProps } from './menu-item.js';

package/dist/index.js

@@ -27,10 +27,7 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuList: () => MenuList,
   MenuOptionGroup: () => MenuOptionGroup,
-  MenuOptionItem: () => MenuOptionItem,
-  useMenu: () => useMenu,
-  useMenuDescendant: () => useMenuDescendant,
-  useMenuDescendantsContext: () => useMenuDescendantsContext
+  MenuOptionItem: () => MenuOptionItem
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -497,8 +494,5 @@ var MenuDivider = (0, import_core6.forwardRef)(({ className, ...rest }, ref) =>
   MenuItem,
   MenuList,
   MenuOptionGroup,
-  MenuOptionItem,
-  useMenu,
-  useMenuDescendant,
-  useMenuDescendantsContext
+  MenuOptionItem
 });

package/dist/index.mjs

@@ -1,17 +1,24 @@
 import {
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
+  MenuButton
+} from "./chunk-IWMBG2LC.mjs";
+import {
+  MenuDivider
+} from "./chunk-VMGROBTU.mjs";
+import {
+  MenuList
+} from "./chunk-4VY7HO44.mjs";
+import {
+  MenuOptionGroup
+} from "./chunk-FLFY6YIF.mjs";
+import {
+  MenuGroup
+} from "./chunk-562FLKUK.mjs";
+import {
   MenuItem,
-  MenuList,
-  MenuOptionGroup,
   MenuOptionItem
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-MIXRGNW3.mjs";
 import {
-  Menu,
-  useMenu,
-  useMenuDescendant,
-  useMenuDescendantsContext
+  Menu
 } from "./chunk-6ALPY7K4.mjs";
 export {
   Menu,
@@ -21,8 +28,5 @@ export {
   MenuItem,
   MenuList,
   MenuOptionGroup,
-  MenuOptionItem,
-  useMenu,
-  useMenuDescendant,
-  useMenuDescendantsContext
+  MenuOptionItem
 };

package/dist/menu-button.mjs

@@ -1,6 +1,6 @@
 import {
   MenuButton
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-IWMBG2LC.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuButton

package/dist/menu-divider.mjs

@@ -1,6 +1,6 @@
 import {
   MenuDivider
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-VMGROBTU.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuDivider

package/dist/menu-group.mjs

@@ -1,6 +1,6 @@
 import {
   MenuGroup
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-562FLKUK.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuGroup

package/dist/menu-item.d.ts

@@ -3,18 +3,53 @@ import { HTMLUIProps } from '@yamada-ui/core';
 import { ReactElement } from 'react';
 
 type MenuItemOptions = {
+    /**
+     * If `true`, the menu item will be disabled.
+     *
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * If `true`, the menu item will be focusable.
+     *
+     * @default false
+     */
     isFocusable?: boolean;
+    /**
+     * If `true`, the list element will be closed when selected.
+     *
+     * @default false
+     */
     closeOnSelect?: boolean;
+    /**
+     * The menu item icon to use.
+     */
     icon?: ReactElement;
+    /**
+     * Right-aligned label text content, useful for displaying hotkeys.
+     */
     command?: string;
 };
 type MenuItemProps = HTMLUIProps<'button'> & MenuItemOptions;
 declare const MenuItem: _yamada_ui_core.Component<"button", MenuItemProps>;
 type MenuOptionItemOptions = {
+    /**
+     * The menu option item icon to use.
+     */
     icon?: ReactElement | null;
+    /**
+     * The value of the menu option item.
+     */
     value?: string;
+    /**
+     * If `true`, the checkbox or radio will be checked.
+     *
+     * @default false
+     */
     isChecked?: boolean;
+    /**
+     * The type of the menu option item.
+     */
     type?: 'radio' | 'checkbox';
 };
 type MenuOptionItemProps = Omit<MenuItemProps, 'icon' | 'command'> & MenuOptionItemOptions;

package/dist/menu-item.mjs

@@ -1,7 +1,7 @@
 import {
   MenuItem,
   MenuOptionItem
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-MIXRGNW3.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuItem,

package/dist/menu-list.mjs

@@ -1,6 +1,6 @@
 import {
   MenuList
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-4VY7HO44.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuList

package/dist/menu-option-group.d.ts

@@ -2,9 +2,23 @@ import { HTMLUIProps, ComponentArgs } from '@yamada-ui/core';
 import { Ref } from 'react';
 
 type MenuOptionGroupOptions<Y extends string | string[] = string> = {
+    /**
+     * The value of the menu item group.
+     */
     value?: Y;
+    /**
+     * The initial value of the menu item group.
+     */
     defaultValue?: Y;
+    /**
+     * The type of the menu option group.
+     *
+     * @default 'checkbox'
+     */
     type?: 'radio' | 'checkbox';
+    /**
+     * The callback fired when any children checkbox is checked or unchecked.
+     */
     onChange?: (value: Y) => void;
 };
 type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<HTMLUIProps<'div'>, keyof MenuOptionGroupOptions> & MenuOptionGroupOptions<Y>;

package/dist/menu-option-group.js

@@ -28,8 +28,8 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 
 // src/menu-group.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
 
 // src/menu.tsx
 var import_core = require("@yamada-ui/core");
@@ -50,17 +50,40 @@ var [MenuProvider, useMenu] = (0, import_utils.createContext)({
   errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
 });
 
+// src/menu-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MenuGroup = (0, import_core2.forwardRef)(
+  ({ className, title, children, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.group };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-group", className),
+        role: "group",
+        __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,
+          children
+        ]
+      }
+    );
+  }
+);
+
 // src/menu-item.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_use_clickable = require("@yamada-ui/use-clickable");
-var import_utils2 = require("@yamada-ui/utils");
+var import_utils3 = require("@yamada-ui/utils");
 var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var isTargetMenuItem = (target) => {
   var _a;
-  return (0, import_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
 };
-var MenuItem = (0, import_core2.forwardRef)(
+var MenuItem = (0, import_core3.forwardRef)(
   ({
     as,
     className,
@@ -108,11 +131,11 @@ var MenuItem = (0, import_core2.forwardRef)(
     const rest = (0, import_use_clickable.useClickable)({
       onClick,
       onFocus,
-      ref: (0, import_utils2.mergeRefs)(register, buttonRef, ref),
+      ref: (0, import_utils3.mergeRefs)(register, buttonRef, ref),
       isDisabled,
       isFocusable
     });
-    (0, import_utils2.useUpdateEffect)(() => {
+    (0, import_utils3.useUpdateEffect)(() => {
       if (!isOpen)
         return;
       if (isFocused && !trulyDisabled && buttonRef.current) {
@@ -120,12 +143,12 @@ var MenuItem = (0, import_core2.forwardRef)(
           var _a;
           return (_a = buttonRef.current) == null ? void 0 : _a.focus();
         });
-      } else if (menuRef.current && !(0, import_utils2.isActiveElement)(menuRef.current)) {
+      } else if (menuRef.current && !(0, import_utils3.isActiveElement)(menuRef.current)) {
         menuRef.current.focus();
       }
     }, [isFocused, trulyDisabled, menuRef, isOpen]);
     type = as || type ? type != null ? type : void 0 : "button";
-    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { pointerEvents: "none", flex: 1 }, children }) : children;
+    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, children }) : children;
     const css = {
       textDecoration: "none",
       color: "inherit",
@@ -139,8 +162,8 @@ var MenuItem = (0, import_core2.forwardRef)(
       gap: "0.75rem",
       ...styles.item
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core2.ui.button,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_core3.ui.button,
       {
         ...props,
         ...rest,
@@ -148,36 +171,36 @@ var MenuItem = (0, import_core2.forwardRef)(
         type,
         role: "menu-item",
         tabIndex: isFocused ? 0 : -1,
-        className: (0, import_utils2.cx)("ui-menu-item", className),
+        className: (0, import_utils3.cx)("ui-menu-item", className),
         __css: css,
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuIcon, { children: icon }) : null,
           children,
-          command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
+          command ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuCommand, { children: command }) : null
         ]
       }
     );
   }
 );
-var MenuOptionItem = (0, import_core2.forwardRef)(
+var MenuOptionItem = (0, import_core3.forwardRef)(
   ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       MenuItem,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-menu-option-item", className),
-        "aria-checked": (0, import_utils2.ariaAttr)(isChecked),
+        className: (0, import_utils3.cx)("ui-menu-option-item", className),
+        "aria-checked": (0, import_utils3.ariaAttr)(isChecked),
         closeOnSelect,
         ...rest,
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null,
           children
         ]
       }
     );
   }
 );
-var MenuIcon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
+var MenuIcon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useMenu();
   const css = {
     flexShrink: 0,
@@ -187,14 +210,14 @@ var MenuIcon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
     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 });
+  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_core2.forwardRef)(({ className, ...rest }, ref) => {
+var MenuCommand = (0, import_core3.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 });
+  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_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+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",
   {
     fill: "currentColor",
@@ -202,29 +225,6 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { view
   }
 ) });
 
-// src/menu-group.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MenuGroup = (0, import_core3.forwardRef)(
-  ({ className, title, children, ...rest }, ref) => {
-    const { styles } = useMenu();
-    const css = { ...styles.group };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_core3.ui.div,
-      {
-        ref,
-        className: (0, import_utils3.cx)("ui-menu-group", className),
-        role: "group",
-        __css: css,
-        ...rest,
-        children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { className: (0, import_utils3.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
-          children
-        ]
-      }
-    );
-  }
-);
-
 // src/menu-option-group.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MenuOptionGroup = (0, import_react3.forwardRef)(

package/dist/menu-option-group.mjs

@@ -1,6 +1,8 @@
 import {
   MenuOptionGroup
-} from "./chunk-OXXUVU6S.mjs";
+} from "./chunk-FLFY6YIF.mjs";
+import "./chunk-562FLKUK.mjs";
+import "./chunk-MIXRGNW3.mjs";
 import "./chunk-6ALPY7K4.mjs";
 export {
   MenuOptionGroup

package/dist/menu.d.ts

@@ -2126,6 +2126,11 @@ type MenuContext = MenuOptions & {
 declare const useMenu: () => MenuContext;
 
 type MenuOptions = {
+    /**
+     * If `true`, the list element will be closed when value is selected.
+     *
+     * @default true
+     */
     closeOnSelect?: boolean;
 };
 type MenuProps = ThemeProps<'Menu'> & Omit<PopoverProps, 'closeOnButton'> & MenuOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/menu",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "Yamada UI menu component",
   "keywords": [
     "yamada",
@@ -35,13 +35,13 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.3.0",
+    "@yamada-ui/core": "0.3.1",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/popover": "0.1.11",
-    "@yamada-ui/transitions": "0.1.11",
+    "@yamada-ui/popover": "0.2.0",
+    "@yamada-ui/transitions": "0.2.0",
     "@yamada-ui/use-disclosure": "0.1.1",
     "@yamada-ui/use-descendant": "0.1.1",
-    "@yamada-ui/use-clickable": "0.1.1",
+    "@yamada-ui/use-clickable": "0.2.0",
     "@yamada-ui/use-controllable-state": "0.1.2"
   },
   "devDependencies": {
@@ -76,6 +76,6 @@
     "build:fast": "tsup src",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "gen:types": "tsx ../../../scripts/generate-types"
+    "gen:docs": "tsx ../../../scripts/generate-docs"
   }
 }

package/dist/chunk-OXXUVU6S.mjs

@@ -1,374 +0,0 @@
-import {
-  useMenu,
-  useMenuDescendant,
-  useMenuDescendantsContext
-} from "./chunk-6ALPY7K4.mjs";
-
-// src/menu-button.tsx
-import { ui as ui4, forwardRef as forwardRef6 } from "@yamada-ui/core";
-import { PopoverTrigger } from "@yamada-ui/popover";
-import { ariaAttr as ariaAttr2, cx as cx6, dataAttr, funcAll, handlerAll as handlerAll2 } from "@yamada-ui/utils";
-import { useCallback as useCallback4 } from "react";
-
-// 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)
-    }
-  );
-});
-
-// src/menu-item.tsx
-import { ui, forwardRef as forwardRef2 } from "@yamada-ui/core";
-import { useClickable } from "@yamada-ui/use-clickable";
-import {
-  ariaAttr,
-  cx as cx2,
-  isActiveElement,
-  isHTMLElement,
-  mergeRefs as mergeRefs2,
-  useUpdateEffect
-} from "@yamada-ui/utils";
-import { useCallback as useCallback2, useRef } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var isTargetMenuItem = (target) => {
-  var _a;
-  return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
-};
-var MenuItem = forwardRef2(
-  ({
-    as,
-    className,
-    type,
-    isDisabled,
-    isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    icon,
-    command,
-    children,
-    ...props
-  }, ref) => {
-    const {
-      focusedIndex,
-      setFocusedIndex,
-      isOpen,
-      onClose,
-      closeOnSelect: generalCloseOnSelect,
-      menuRef,
-      styles
-    } = useMenu();
-    const trulyDisabled = isDisabled && !isFocusable;
-    const buttonRef = useRef(null);
-    const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
-    const isFocused = index === focusedIndex;
-    const onClick = useCallback2(
-      (ev) => {
-        var _a;
-        (_a = props.onClick) == null ? void 0 : _a.call(props, ev);
-        if (!isTargetMenuItem(ev.currentTarget))
-          return;
-        if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
-          onClose();
-      },
-      [props, customCloseOnSelect, generalCloseOnSelect, onClose]
-    );
-    const onFocus = useCallback2(
-      (ev) => {
-        var _a;
-        (_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
-        setFocusedIndex(index);
-      },
-      [props, setFocusedIndex, index]
-    );
-    const rest = useClickable({
-      onClick,
-      onFocus,
-      ref: mergeRefs2(register, buttonRef, ref),
-      isDisabled,
-      isFocusable
-    });
-    useUpdateEffect(() => {
-      if (!isOpen)
-        return;
-      if (isFocused && !trulyDisabled && buttonRef.current) {
-        requestAnimationFrame(() => {
-          var _a;
-          return (_a = buttonRef.current) == null ? void 0 : _a.focus();
-        });
-      } else if (menuRef.current && !isActiveElement(menuRef.current)) {
-        menuRef.current.focus();
-      }
-    }, [isFocused, trulyDisabled, menuRef, isOpen]);
-    type = as || type ? type != null ? type : void 0 : "button";
-    children = icon || command ? /* @__PURE__ */ jsx2(ui.span, { style: { pointerEvents: "none", flex: 1 }, children }) : children;
-    const css = {
-      textDecoration: "none",
-      color: "inherit",
-      userSelect: "none",
-      display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
-      flex: "0 0 auto",
-      outline: 0,
-      gap: "0.75rem",
-      ...styles.item
-    };
-    return /* @__PURE__ */ jsxs(
-      ui.button,
-      {
-        ...props,
-        ...rest,
-        as,
-        type,
-        role: "menu-item",
-        tabIndex: isFocused ? 0 : -1,
-        className: cx2("ui-menu-item", className),
-        __css: css,
-        children: [
-          icon ? /* @__PURE__ */ jsx2(MenuIcon, { children: icon }) : null,
-          children,
-          command ? /* @__PURE__ */ jsx2(MenuCommand, { children: command }) : null
-        ]
-      }
-    );
-  }
-);
-var MenuOptionItem = forwardRef2(
-  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      MenuItem,
-      {
-        ref,
-        className: cx2("ui-menu-option-item", className),
-        "aria-checked": ariaAttr(isChecked),
-        closeOnSelect,
-        ...rest,
-        children: [
-          icon !== null ? /* @__PURE__ */ jsx2(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ jsx2(CheckIcon, {}) }) : null,
-          children
-        ]
-      }
-    );
-  }
-);
-var MenuIcon = forwardRef2(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "0.85em",
-    ...styles.icon
-  };
-  return /* @__PURE__ */ jsx2(ui.span, { ref, className: cx2("ui-menu-icon", className), __css: css, ...rest });
-});
-var MenuCommand = forwardRef2(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.command };
-  return /* @__PURE__ */ jsx2(ui.span, { ref, className: cx2("ui-menu-command", className), __css: css, ...rest });
-});
-var CheckIcon = () => /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx2(
-  "polygon",
-  {
-    fill: "currentColor",
-    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
-  }
-) });
-
-// src/menu-group.tsx
-import { ui as ui2, forwardRef as forwardRef3 } from "@yamada-ui/core";
-import { cx as cx3 } from "@yamada-ui/utils";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MenuGroup = forwardRef3(
-  ({ className, title, children, ...rest }, ref) => {
-    const { styles } = useMenu();
-    const css = { ...styles.group };
-    return /* @__PURE__ */ jsxs2(
-      ui2.div,
-      {
-        ref,
-        className: cx3("ui-menu-group", className),
-        role: "group",
-        __css: css,
-        ...rest,
-        children: [
-          title ? /* @__PURE__ */ jsx3(ui2.span, { className: cx3("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
-          children
-        ]
-      }
-    );
-  }
-);
-
-// src/menu-option-group.tsx
-import { useControllableState } from "@yamada-ui/use-controllable-state";
-import { cx as cx4, getValidChildren, omitObject, isArray } from "@yamada-ui/utils";
-import { cloneElement, forwardRef as forwardRef4, useCallback as useCallback3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var MenuOptionGroup = forwardRef4(
-  ({ className, defaultValue, type, children, ...rest }, ref) => {
-    const isRadio = type === "radio";
-    defaultValue = isRadio ? "" : [];
-    const [value, setValue] = useControllableState({
-      ...rest,
-      defaultValue
-    });
-    const onChange = useCallback3(
-      (selectedValue) => {
-        if (isRadio && typeof value === "string")
-          setValue(selectedValue);
-        if (!isRadio && isArray(value)) {
-          const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
-          setValue(nextValue);
-        }
-      },
-      [isRadio, value, setValue]
-    );
-    const validChildren = getValidChildren(children);
-    const cloneChildren = validChildren.map((child) => {
-      if (child.type !== MenuOptionItem)
-        return child;
-      const onClick = (ev) => {
-        var _a, _b;
-        onChange(child.props.value);
-        (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
-      };
-      const isChecked = !isRadio && isArray(value) ? value.includes(child.props.value) : child.props.value === value;
-      return cloneElement(child, { type, onClick, isChecked });
-    });
-    return /* @__PURE__ */ jsx4(
-      MenuGroup,
-      {
-        ref,
-        className: cx4("ui-menu-option-group", className),
-        ...omitObject(rest, ["value", "onChange"]),
-        children: cloneChildren
-      }
-    );
-  }
-);
-MenuOptionGroup.displayName = "MenuOptionGroup";
-
-// src/menu-divider.tsx
-import { ui as ui3, forwardRef as forwardRef5 } from "@yamada-ui/core";
-import { cx as cx5 } from "@yamada-ui/utils";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var MenuDivider = forwardRef5(({ className, ...rest }, ref) => {
-  const { styles } = useMenu();
-  const css = { ...styles.divider };
-  return /* @__PURE__ */ jsx5(ui3.hr, { ref, className: cx5("ui-menu-divider", className), __css: css, ...rest });
-});
-
-// src/menu-button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var MenuButton = forwardRef6(
-  ({ className, children, as: As, ...rest }, ref) => {
-    const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu();
-    const onKeyDown = useCallback4(
-      (ev) => {
-        const actions = {
-          Enter: funcAll(onOpen, onFocusFirstItem),
-          ArrowDown: funcAll(onOpen, onFocusFirstItem),
-          ArrowUp: funcAll(onOpen, onFocusLastItem)
-        };
-        const action = actions[ev.key];
-        if (!action)
-          return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        action();
-      },
-      [onFocusFirstItem, onFocusLastItem, onOpen]
-    );
-    const Component = As || Button;
-    return /* @__PURE__ */ jsx6(PopoverTrigger, { children: /* @__PURE__ */ jsx6(
-      Component,
-      {
-        ref,
-        className: cx6("ui-menu-button", className),
-        ...rest,
-        "data-active": dataAttr(isOpen),
-        "aria-expanded": ariaAttr2(isOpen),
-        onKeyDown: handlerAll2(rest.onKeyDown, onKeyDown),
-        children: /* @__PURE__ */ jsx6(ui4.span, { __css: { pointerEvents: "none", flex: "1 1 auto", minW: 0 }, children })
-      }
-    ) });
-  }
-);
-var Button = forwardRef6((rest, ref) => {
-  const { styles } = useMenu();
-  const css = {
-    display: "inline-flex",
-    appearance: "none",
-    alignItems: "center",
-    outline: 0,
-    ...styles.button
-  };
-  return /* @__PURE__ */ jsx6(ui4.button, { ref, __css: css, ...rest });
-});
-
-export {
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuOptionItem,
-  MenuGroup,
-  MenuOptionGroup,
-  MenuDivider
-};