import { jsxs, jsx } from "react/jsx-runtime";
import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BPvqJny4.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-CQ8H6Noi.js";
import { RichLabel } from "../rich-label/rich-label.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-CN_q3KUs.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 {ButtonProps} [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 {PopoverProps} [props.popoverProps] - Props to pass to the popover.
 * @param {boolean} [props.disabled] - If `true`, the trigger button is disabled.
 * @param {boolean} [props.manualWidth=false] - If `true`, the popover will not have a fixed width.
 * @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,
    disabled,
    manualWidth,
    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,
            disabled,
            ...triggerProps,
            children: triggerLabel
          }
        ),
        /* @__PURE__ */ jsx(
          Popover,
          {
            "aria-label": ariaLabel,
            ...popoverProps,
            className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
            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-2.5 es:last:pb-0",
        !label && "es:has-[>_:only-child]:pb-0"
      ),
      children: [
        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-2.5 es:text-sm es:text-secondary-500", 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:my-1 es:border-b es:border-secondary-300" });
};
/**
 * 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 {string|JSX.Element} [props.subtitle] - The subtitle below the main label.
 * @param {Function} [props.onClick] - Function to run when the item is clicked.
 * @param {boolean} [props.danger] - If `true`, the item appearance is tweaked to indicate a dangerous action.
 * @param {boolean} [props.primary] - If `true`, the item appearance is tweaked to indicate a primary action.
 * @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,
    subtitle,
    checked,
    selected,
    disabled,
    endIcon,
    onClick,
    shortcut,
    danger,
    primary,
    className,
    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components")
  } = props;
  let itemIcon = icon;
  if (checked === true) {
    itemIcon = icons.menuItemCheck;
  } else if (selected === true) {
    itemIcon = icons.menuItemCircle;
  } else if (selected === false || checked === false) {
    itemIcon = icons.dummySpacer;
  }
  return /* @__PURE__ */ jsxs(
    $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
    {
      ...props,
      "aria-label": ariaLabel,
      isDisabled: disabled,
      className: clsx(
        "es:mx-1 es:mb-0.5 es:flex es:min-w-44 es:min-h-9.5 es:items-center es:gap-1.5",
        "es:first:mt-1",
        "es:last:mb-1",
        "es:select-none es:rounded-xl es:py-1.5 es:px-2.5 es:text-sm es:transition",
        "es:any-focus:outline-hidden",
        "es:icon:shrink-0",
        !disabled && "es:focus-visible:inset-ring",
        !disabled && !(danger || primary) && "es:hover:bg-secondary-950/5 es:focus-visible:inset-ring-secondary-950/10 es:focus-visible:bg-secondary-950/5 es:contrast-more:focus-visible:bg-accent-800",
        !disabled && danger && "es:hover:bg-red-500/5 es:focus-visible:inset-ring-red-600/30 es:focus-visible:bg-red-600/5 es:hover:text-red-900 es:focus-visible:text-red-950 es:contrast-more:focus-visible:bg-red-800",
        !disabled && primary && "es:hover:bg-accent-500/5 es:focus-visible:inset-ring-accent-600/30 es:focus-visible:bg-accent-600/5 es:hover:text-accent-900 es:focus-visible:text-accent-950 es:contrast-more:focus-visible:bg-accent-700",
        !disabled && "es:contrast-more:focus-visible:text-white! es:contrast-more:focus-visible:icon:text-white!",
        disabled ? "es:text-secondary-400" : "es:text-secondary-800",
        className
      ),
      onAction: onClick,
      children: [
        /* @__PURE__ */ jsx(
          RichLabel,
          {
            icon: itemIcon,
            label: children,
            subtitle,
            iconClassName: clsx(danger && "es:not-contrast-more:icon:text-red-700!", primary && "es:not-contrast-more:icon:text-accent-600!"),
            noColor: true
          }
        ),
        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400 es:contrast-more:text-current es:shrink-0", children: shortcut }),
        endIcon && /* @__PURE__ */ jsx("div", { className: clsx("es:shrink-0 es:icon:shrink-0", !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 {boolean} [props.manualWidth=false] - If `true`, the popover will not have a fixed width.
 * @param {PopoverProps} [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, manualWidth } = 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 es:contrast-more:text-current", children: icons.caretRightFill })
    }),
    /* @__PURE__ */ jsx(
      Popover,
      {
        "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
        offset: -1,
        ...popoverProps,
        className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
        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";
/**
 * A decorative menu section header, used to label groups of menu items.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The MenuSectionHeader component.
 *
 * @example
 * <MenuSectionHeader>Section</MenuSectionHeader>
 *
 * @preserve
 */
const MenuSectionHeader = (props) => {
  const {
    children,
    className,
    hidden
  } = props;
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
    {
      ...props,
      className: clsx(
        "es:mx-1 es:p-2.5 es:pb-1 es:flex es:min-w-44 es:items-center es:gap-1.5",
        "es:select-none es:text-sm",
        "es:icon:shrink-0",
        "es:text-secondary-500",
        className
      ),
      isDisabled: true,
      children
    }
  );
};
MenuSectionHeader.displayName = "MenuSectionHeader";
export {
  Menu,
  MenuItem,
  MenuSection,
  MenuSectionHeader,
  MenuSeparator,
  SubMenuItem
};
