@yamada-ui/menu 0.1.0

package/dist/menu-option-group.js

@@ -0,0 +1,276 @@
+"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-option-group.tsx
+var menu_option_group_exports = {};
+__export(menu_option_group_exports, {
+  MenuOptionGroup: () => MenuOptionGroup
+});
+module.exports = __toCommonJS(menu_option_group_exports);
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+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");
+
+// 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_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");
+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"
+  }
+) });
+
+// 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)(
+  ({ className, defaultValue, type, children, ...rest }, ref) => {
+    const isRadio = type === "radio";
+    defaultValue = isRadio ? "" : [];
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      ...rest,
+      defaultValue
+    });
+    const onChange = (0, import_react3.useCallback)(
+      (selectedValue) => {
+        if (isRadio && typeof value === "string")
+          setValue(selectedValue);
+        if (!isRadio && (0, import_utils4.isArray)(value)) {
+          const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
+          setValue(nextValue);
+        }
+      },
+      [isRadio, value, setValue]
+    );
+    const validChildren = (0, import_utils4.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 && (0, import_utils4.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
+      return (0, import_react3.cloneElement)(child, { type, onClick, isChecked });
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      MenuGroup,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-menu-option-group", className),
+        ...(0, import_utils4.omitObject)(rest, ["value", "onChange"]),
+        children: cloneChildren
+      }
+    );
+  }
+);
+MenuOptionGroup.displayName = "MenuOptionGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuOptionGroup
+});

package/dist/menu-option-group.mjs

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