@yamada-ui/menu/dist/chunk-3UTYG3XF.mjs

Yamada UI menu component

"use client"
import {
  MenuIcon
} from "./chunk-D2UJVOJ7.mjs";
import {
  useMenu,
  useUpstreamMenuItem
} from "./chunk-IWH3B4PS.mjs";

// src/menu-button.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { ChevronIcon } from "@yamada-ui/icon";
import { PopoverTrigger } from "@yamada-ui/popover";
import {
  assignRef,
  cx,
  dataAttr,
  funcAll,
  handlerAll,
  mergeRefs
} from "@yamada-ui/utils";
import { useCallback, useId, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var MenuButton = forwardRef(
  ({ id, as, className, children, ...rest }, ref) => {
    var _a;
    const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
    const {
      buttonRef,
      open,
      onClose,
      onFocusFirstItem,
      onFocusLastItem,
      onOpen
    } = useMenu();
    const uuid = useId();
    id != null ? id : id = uuid;
    const onKeyDown = useCallback(
      (ev) => {
        if (ev.key === " ") ev.key = ev.code;
        const actions = {
          ArrowDown: funcAll(onOpen, onFocusFirstItem),
          ArrowUp: funcAll(onOpen, onFocusLastItem),
          Enter: funcAll(onOpen, onFocusFirstItem),
          Space: funcAll(onOpen, onFocusFirstItem)
        };
        const action = actions[ev.key];
        if (!action) return;
        ev.preventDefault();
        action();
      },
      [onFocusFirstItem, onFocusLastItem, onOpen]
    );
    const onItemKeyDown = useCallback(
      (ev) => {
        if (ev.key === " ") ev.key = ev.code;
        const actions = {
          ArrowLeft: open ? funcAll(onUpstreamRestoreFocus, onClose) : void 0,
          ArrowRight: !open ? funcAll(onOpen, onFocusFirstItem) : void 0,
          Enter: !open ? funcAll(onOpen, onFocusFirstItem) : void 0,
          Space: !open ? funcAll(onOpen, onFocusFirstItem) : void 0
        };
        const action = actions[ev.key];
        if (!action) return;
        ev.preventDefault();
        action();
      },
      [open, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
    );
    assignRef(onKeyDownRef, onItemKeyDown);
    const Component = useMemo(() => as ? ui(as) : Button, [as]);
    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
      Component,
      {
        id,
        ref: mergeRefs(buttonRef, ref),
        className: cx("ui-menu", className),
        "aria-haspopup": "menu",
        ...rest,
        "data-active": dataAttr(open),
        onKeyDown: handlerAll(rest.onKeyDown, onKeyDown),
        children
      }
    ) });
  }
);
MenuButton.displayName = "MenuButton";
MenuButton.__ui__ = "MenuButton";
var Button = forwardRef((rest, ref) => {
  const { styles } = useMenu();
  const css = {
    alignItems: "center",
    appearance: "none",
    display: "inline-flex",
    outline: 0,
    ...styles.button
  };
  return /* @__PURE__ */ jsx(ui.button, { ref, __css: css, ...rest });
});
var MenuItemButton = forwardRef(
  ({ className, children, icon, iconProps, innerProps, ...rest }, ref) => {
    return /* @__PURE__ */ jsxs(
      MenuButton,
      {
        ref,
        className: cx("ui-menu__item-button", className),
        flex: "1",
        ...rest,
        children: [
          /* @__PURE__ */ jsx(ui.span, { as: "span", flex: "1", ...innerProps, children }),
          /* @__PURE__ */ jsx(MenuIcon, { ...iconProps, children: icon != null ? icon : /* @__PURE__ */ jsx(ChevronIcon, { fontSize: "1.5em", transform: "rotate(-90deg)" }) })
        ]
      }
    );
  }
);
MenuItemButton.displayName = "MenuItemButton";
MenuItemButton.__ui__ = "MenuItemButton";

export {
  MenuButton,
  MenuItemButton
};
//# sourceMappingURL=chunk-3UTYG3XF.mjs.map