import { jsxs, jsx } from "react/jsx-runtime";
import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-CTQWg_HO.js";
import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-D6EdDPeu.js";
import { icons } from "../../icons/icons.js";
import { Button } from "../button/button.js";
import { Popover } from "../popover/popover.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { cloneElement } from "react";
import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
/**
 * A simple menu component.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.triggerLabel] - The label of the trigger button.
 * @param {JSX.Element} [props.triggerIcon] - The icon of the trigger button.
 * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
 * @param {string} [props.tooltip] - Tooltip text to display on the trigger button.
 * @param {boolean} [props.keepOpen=false] - If `true`, the menu will not close when an item is selected.
 * @param {boolean} [props.openOnLongPress=false] - If `true`, the menu will open on long press instead of click. If enabled, a regular `onPress` event can also be passed to the trigger button to enable dual behavior.
 * @param {Object} [props.popoverProps] - Props to pass to the popover.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The Menu component.
 *
 * @example
 * <Menu>
 * 	<MenuSection label='Section 1'>
 * 		<MenuItem>Item 1</MenuItem>
 * 		<MenuItem>Item 2</MenuItem>
 * 	</MenuSection>
 * 	<MenuSection label='Section 2'>
 * 		<MenuItem>Item 3</MenuItem>
 * 		<MenuItem>Item 4</MenuItem>
 * 	</MenuSection>
 * </Menu>
 *
 * @example
 * <Menu>
 * 	<MenuItem>Item 1</MenuItem>
 * 	<MenuItem>Item 2</MenuItem>
 * 	<MenuSeparator />
 * 	<MenuItem>Item 3</MenuItem>
 * 	<MenuItem>Item 4</MenuItem>
 * </Menu>
 *
 * @example
 * <Menu>
 * 	<MenuItem>Item 1</MenuItem>
 * 	<MenuItem>Item 2</MenuItem>
 * 	<SubMenuItem
 * 		trigger={<MenuItem>Submenu</MenuItem>}
 * 	>
 * 		<MenuItem>Subitem 1</MenuItem>
 * 		<MenuItem>Subitem 2</MenuItem>
 * 	</SubMenuItem>
 * </Menu>
 *
 *
 * @preserve
 */
const Menu = (props) => {
  const {
    children,
    triggerLabel,
    triggerIcon = !triggerLabel && icons.hamburgerMenu,
    triggerProps,
    popoverProps,
    tooltip,
    keepOpen = false,
    "aria-label": ariaLabel = triggerLabel ?? __("Menu", "eightshift-ui-components"),
    openOnLongPress = false,
    hidden
  } = props;
  if (hidden) {
    return null;
  }
  let additionalProps = {};
  if (keepOpen) {
    additionalProps = {
      ...additionalProps,
      selectionMode: "multiple",
      selectedKeys: [],
      onSelectionChange: () => {
      },
      items: []
    };
  }
  if (openOnLongPress) {
    additionalProps.trigger = "longPress";
  }
  const hasSubmenuItems = Array.isArray(children) ? children.some((child) => child?.type?.displayName === "SubMenuItem") : children?.type?.displayName === "SubMenuItem";
  return /* @__PURE__ */ jsxs(
    $3674c52c6b3c5bce$export$27d2ad3c5815583e,
    {
      ...props,
      ...additionalProps,
      children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            icon: triggerIcon,
            tooltip,
            ...triggerProps,
            children: triggerLabel
          }
        ),
        /* @__PURE__ */ jsx(
          Popover,
          {
            className: "es:p-0! es:any-focus:outline-hidden",
            "aria-label": ariaLabel,
            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto"),
            ...popoverProps,
            children: /* @__PURE__ */ jsx(
              $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
              {
                className: "es:outline-hidden",
                ...props,
                ...additionalProps,
                children
              }
            )
          }
        )
      ]
    }
  );
};
/**
 * A wrapper for `MenuItem` components that visually groups them and ensures proper keyboard navigation.
 *
 * **Important**: <MenuSection> cannot be mixed with other <MenuItem> in the top-level of the same menu.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.label] - The label of the section.
 *
 * @returns {JSX.Element} The MenuSection component.
 *
 * @see {@link Menu} for usage example.
 *
 * @preserve
 */
const MenuSection = (props) => {
  const { children, label } = props;
  return /* @__PURE__ */ jsxs(
    $3674c52c6b3c5bce$export$4b1545b4f2016d26,
    {
      className: clsx(
        "es:space-y-1 es:border-b es:border-b-secondary-200 es:last:border-b-0",
        label && "es:pt-2 es:first:pt-1.5 es:last:pb-0",
        !label && "es:has-[>_:only-child]:pb-0"
      ),
      children: [
        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-1.5 es:text-xs es:font-medium es:text-secondary-400", children: label }),
        children
      ]
    }
  );
};
/**
 * A menu separator.
 *
 * @returns {JSX.Element} The MenuSeparator component.
 *
 * @see {@link Menu} for usage example.
 *
 * @preserve
 */
const MenuSeparator = () => {
  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200" });
};
/**
 * A menu item.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - The icon of the item.
 * @param {string} [props.shortcut] - A slot for text like the keyboard shortcut, displayed on the right side of the item.
 * @param {boolean} [props.checked] - If `true`, the item is marked as checked. This is visually represented by a checkmark icon.
 * @param {boolean} [props.selected] - If `true`, the item is marked as selected. This is visually represented by a circle.
 * @param {boolean} [props.disabled] - If `true`, the item will be disabled.
 * @param {JSX.Element} [props.endIcon] - The icon at the right side of the item.
 * @param {Function} [props.onClick] - Function to run when the item is clicked.
 * @param {string} [props.className] - Classes to pass to the menu item.
 *
 * @returns {JSX.Element} The MenuItem component.
 *
 * @see {@link Menu} for usage example.
 *
 * @preserve
 */
const MenuItem = (props) => {
  const {
    icon,
    children,
    checked,
    selected,
    disabled,
    endIcon,
    onClick,
    shortcut,
    className,
    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components")
  } = props;
  return /* @__PURE__ */ jsxs(
    $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
    {
      ...props,
      "aria-label": ariaLabel,
      isDisabled: disabled,
      className: clsx(
        "es:mx-1 es:mb-1 es:flex es:min-w-44 es:min-h-9 es:items-center es:gap-1.5",
        "es:first:mt-1 es:icon:size-5 es:icon:text-secondary-500",
        "es:select-none es:rounded-xl es:py-1.5 es:px-2.5 es:text-sm es:transition",
        "es:any-focus:outline-hidden",
        !disabled && "es:hover:bg-secondary-100 es:focus-visible:inset-ring es:focus-visible:inset-ring-secondary-100/30 es:focus-visible:bg-secondary-100 es:contrast-more:focus-visible:bg-accent-500/15",
        disabled ? "es:text-secondary-400" : "es:text-secondary-800",
        className
      ),
      onAction: onClick,
      children: [
        checked === true && icons.menuItemCheck,
        selected === true && icons.menuItemCircle,
        (selected === false || checked === false) && icons.dummySpacer,
        icon,
        children,
        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400", children: shortcut }),
        endIcon && /* @__PURE__ */ jsx("div", { className: clsx(!shortcut && "es:ml-auto es:pl-2"), children: endIcon })
      ]
    }
  );
};
/**
 * A supplementary menu item that triggers a submenu.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} props.trigger - The trigger button for the submenu. **This should be a `MenuItem`.**
 * @param {boolean} [props.keepOpen=false] - If `true`, the submenu will not close when an item is selected.
 * @param {Object} [props.popoverProps] - Props to pass to the popover.
 *
 * @returns {JSX.Element} The SubMenuItem component.
 *
 * @see {@link Menu} for usage example.
 *
 * @preserve
 */
const SubMenuItem = (props) => {
  const { children, trigger, popoverProps, keepOpen } = props;
  let additionalProps = {};
  if (keepOpen) {
    additionalProps = {
      ...additionalProps,
      selectionMode: "multiple",
      selectedKeys: [],
      onSelectionChange: () => {
      },
      items: []
    };
  }
  return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
    cloneElement(trigger, {
      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400", children: icons.caretRightFill })
    }),
    /* @__PURE__ */ jsx(
      Popover,
      {
        "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
        className: "es:p-0! es:any-focus:outline-hidden",
        offset: -1,
        ...popoverProps,
        children: /* @__PURE__ */ jsx(
          $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
          {
            "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
            className: "es:any-focus:outline-hidden",
            ...additionalProps,
            children
          }
        )
      }
    )
  ] });
};
SubMenuItem.displayName = "SubMenuItem";
export {
  Menu,
  MenuItem,
  MenuSection,
  MenuSeparator,
  SubMenuItem
};
