@yamada-ui/menu 0.1.0

package/dist/menu-divider.js

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu-divider.tsx
+var menu_divider_exports = {};
+__export(menu_divider_exports, {
+  MenuDivider: () => MenuDivider
+});
+module.exports = __toCommonJS(menu_divider_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+
+// src/menu-divider.tsx
+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 });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuDivider
+});

package/dist/menu-divider.mjs

@@ -0,0 +1,7 @@
+import {
+  MenuDivider
+} from "./chunk-OFZGIB33.mjs";
+import "./chunk-6ALPY7K4.mjs";
+export {
+  MenuDivider
+};

package/dist/menu-group.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type MenuGroupProps = HTMLUIProps<'div'>;
+declare const MenuGroup: _yamada_ui_core.Component<"div", MenuGroupProps>;
+
+export { MenuGroup, MenuGroupProps };

package/dist/menu-group.js

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu-group.tsx
+var menu_group_exports = {};
+__export(menu_group_exports, {
+  MenuGroup: () => MenuGroup
+});
+module.exports = __toCommonJS(menu_group_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  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
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuGroup
+});

package/dist/menu-group.mjs

@@ -0,0 +1,7 @@
+import {
+  MenuGroup
+} from "./chunk-OFZGIB33.mjs";
+import "./chunk-6ALPY7K4.mjs";
+export {
+  MenuGroup
+};

package/dist/menu-item.d.ts

@@ -0,0 +1,23 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { ReactElement } from 'react';
+
+type MenuItemOptions = {
+    isDisabled?: boolean;
+    isFocusable?: boolean;
+    closeOnSelect?: boolean;
+    icon?: ReactElement;
+    command?: string;
+};
+type MenuItemProps = HTMLUIProps<'button'> & MenuItemOptions;
+declare const MenuItem: _yamada_ui_core.Component<"button", MenuItemProps>;
+type MenuOptionItemOptions = {
+    icon?: ReactElement | null;
+    value?: string;
+    isChecked?: boolean;
+    type?: 'radio' | 'checkbox';
+};
+type MenuOptionItemProps = Omit<MenuItemProps, 'icon' | 'command'> & MenuOptionItemOptions;
+declare const MenuOptionItem: _yamada_ui_core.Component<"button", MenuOptionItemProps>;
+
+export { MenuItem, MenuItemProps, MenuOptionItem, MenuOptionItemProps };

package/dist/menu-item.js

@@ -0,0 +1,202 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu-item.tsx
+var menu_item_exports = {};
+__export(menu_item_exports, {
+  MenuItem: () => MenuItem,
+  MenuOptionItem: () => MenuOptionItem
+});
+module.exports = __toCommonJS(menu_item_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_use_clickable = require("@yamada-ui/use-clickable");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+
+// src/menu-item.tsx
+var import_jsx_runtime2 = 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"));
+};
+var MenuItem = (0, import_core2.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 = (0, import_react2.useRef)(null);
+    const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
+    const isFocused = index === focusedIndex;
+    const onClick = (0, import_react2.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 = (0, import_react2.useCallback)(
+      (ev) => {
+        var _a;
+        (_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
+        setFocusedIndex(index);
+      },
+      [props, setFocusedIndex, index]
+    );
+    const rest = (0, import_use_clickable.useClickable)({
+      onClick,
+      onFocus,
+      ref: (0, import_utils2.mergeRefs)(register, buttonRef, ref),
+      isDisabled,
+      isFocusable
+    });
+    (0, import_utils2.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 && !(0, import_utils2.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;
+    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__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.button,
+      {
+        ...props,
+        ...rest,
+        as,
+        type,
+        role: "menu-item",
+        tabInde: isFocused ? 0 : -1,
+        className: (0, import_utils2.cx)("ui-menu-item", className),
+        __css: css,
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
+          children,
+          command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
+        ]
+      }
+    );
+  }
+);
+var MenuOptionItem = (0, import_core2.forwardRef)(
+  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      MenuItem,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-menu-option-item", className),
+        "aria-checked": (0, import_utils2.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,
+          children
+        ]
+      }
+    );
+  }
+);
+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",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuItem,
+  MenuOptionItem
+});

package/dist/menu-item.mjs

@@ -0,0 +1,9 @@
+import {
+  MenuItem,
+  MenuOptionItem
+} from "./chunk-OFZGIB33.mjs";
+import "./chunk-6ALPY7K4.mjs";
+export {
+  MenuItem,
+  MenuOptionItem
+};

package/dist/menu-list.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type MenuListProps = HTMLUIProps<'section'>;
+declare const MenuList: _yamada_ui_core.Component<"section", MenuListProps>;
+
+export { MenuList, MenuListProps };

package/dist/menu-list.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu-list.tsx
+var menu_list_exports = {};
+__export(menu_list_exports, {
+  MenuList: () => MenuList
+});
+module.exports = __toCommonJS(menu_list_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_popover2 = require("@yamada-ui/popover");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/menu.tsx
+var import_core = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+
+// 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)
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuList
+});

package/dist/menu-list.mjs

@@ -0,0 +1,7 @@
+import {
+  MenuList
+} from "./chunk-OFZGIB33.mjs";
+import "./chunk-6ALPY7K4.mjs";
+export {
+  MenuList
+};

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

@@ -0,0 +1,15 @@
+import { HTMLUIProps, ComponentArgs } from '@yamada-ui/core';
+import { Ref } from 'react';
+
+type MenuOptionGroupOptions<Y extends string | string[] = string> = {
+    value?: Y;
+    defaultValue?: Y;
+    type?: 'radio' | 'checkbox';
+    onChange?: (value: Y) => void;
+};
+type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<HTMLUIProps<'div'>, keyof MenuOptionGroupOptions> & MenuOptionGroupOptions<Y>;
+declare const MenuOptionGroup: (<Y extends string | string[] = string>(props: Omit<HTMLUIProps<"div">, keyof MenuOptionGroupOptions<string>> & MenuOptionGroupOptions<Y> & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element) & ComponentArgs;
+
+export { MenuOptionGroup, MenuOptionGroupProps };