@yamada-ui/menu 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/menu
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/menu
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/menu
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/menu
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-6ALPY7K4.mjs

@@ -0,0 +1,111 @@
+// src/menu.tsx
+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 { jsx } from "react/jsx-runtime";
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = createDescendant();
+var [MenuProvider, useMenu] = createContext({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+var Menu = (props) => {
+  const [styles, mergedProps] = useMultiComponentStyle("Menu", props);
+  const {
+    initialFocusRef,
+    closeOnSelect = true,
+    placement = "bottom-start",
+    duration = 0.2,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const descendants = useDescendants();
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  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 });
+    });
+  }, []);
+  const onFocusFirstItem = useCallback(() => {
+    const id = setTimeout(() => {
+      if (initialFocusRef)
+        return;
+      const first = descendants.enabledfirstValue();
+      if (first)
+        setFocusedIndex(first.index);
+    });
+    timeoutIds.current.add(id);
+  }, [descendants, initialFocusRef]);
+  const onFocusLastItem = useCallback(() => {
+    const id = setTimeout(() => {
+      if (initialFocusRef)
+        return;
+      const last = descendants.enabledlastValue();
+      if (last)
+        setFocusedIndex(last.index);
+    });
+    timeoutIds.current.add(id);
+  }, [descendants, initialFocusRef]);
+  const onOpenInternal = useCallback(() => {
+    var _a;
+    (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
+    onFocusMenu();
+  }, [onFocusMenu, rest]);
+  const [isOpen, onOpen, onClose] = useDisclosure({ ...props, onOpen: onOpenInternal });
+  useUpdateEffect(() => {
+    if (!isOpen)
+      setFocusedIndex(-1);
+  }, [isOpen]);
+  useUnmountEffect(() => {
+    timeoutIds.current.forEach((id) => clearTimeout(id));
+    timeoutIds.current.clear();
+  });
+  return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      value: {
+        isOpen,
+        onOpen,
+        onClose,
+        onFocusFirstItem,
+        onFocusLastItem,
+        closeOnSelect,
+        focusedIndex,
+        setFocusedIndex,
+        menuRef,
+        styles
+      },
+      children: /* @__PURE__ */ jsx(
+        Popover,
+        {
+          ...{
+            ...rest,
+            isOpen,
+            onOpen,
+            onClose,
+            placement,
+            duration,
+            initialFocusRef,
+            closeOnButton: false
+          }
+        }
+      )
+    }
+  ) });
+};
+
+export {
+  useMenuDescendantsContext,
+  useMenuDescendant,
+  useMenu,
+  Menu
+};

package/dist/chunk-OFZGIB33.mjs

@@ -0,0 +1,374 @@
+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",
+        tabInde: 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
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Menu, MenuProps, useMenu, useMenuDescendant, useMenuDescendantsContext } 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';
+export { MenuGroup, MenuGroupProps } from './menu-group.js';
+export { MenuOptionGroup, MenuOptionGroupProps } from './menu-option-group.js';
+export { MenuDivider, MenuDividerProps } from './menu-divider.js';
+import '@yamada-ui/core';
+import '@yamada-ui/popover';
+import 'react';