@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/menu/Menu.js

@@ -0,0 +1,1003 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Box from "../layout/Box.js";
+import Divider from "../layout/Divider.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import { InputSize } from "../inputs/Input.js";
+import SearchInput from "../inputs/SearchInput.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { ArrowUpRightIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+//#region src/menu/Menu.tsx
+/**
+* The menu button: a trigger element that opens a floating list of commands, navigated with the
+* arrow keys and typeahead, where choosing a command runs it and closes the list. The parts are
+* the rows of that list: `MenuItem` (a command, a link, or the opener of a submenu),
+* `MenuCheckboxItem` (an on/off option), `MenuRadioGroup` (one choice among options), `MenuGroup`
+* (a labelled section) and `MenuSeparator`. `isSearchable` adds a field that filters the rows.
+*
+* Built on `Popover` (`role` `MENU`): placement, stacking, Escape, outside press, motion and focus
+* return are Popover's. Menu adds the row anatomy, a roving-`tabIndex` keyboard model over the
+* rendered rows in DOM order, typeahead, the filter and submenus (each a nested `MANUAL` Popover).
+* `MenuRoot` is the shared engine that `ContextMenu` opens on right-click.
+*
+* A panel of fields or free content is a `Dropdown` or `Popover`; a form value is a `SelectInput`.
+*
+* SSR: only the trigger renders on the server. Nothing here touches `window` or `document` at
+* module scope; typeahead and hover timers live in refs.
+*/
+/** Row rung (canonical subset): 24px or 32px rows. */
+var MenuSize = /* @__PURE__ */ function(MenuSize) {
+	/** 24px rows, `body_sm` labels, 12px icons, 10px submenu caret: dense menus (table cells, toolbars; the 1.x density). */
+	MenuSize["SMALL"] = "SMALL";
+	/** 32px rows, `body_md` labels, 14px icons, 12px submenu caret. The default. */
+	MenuSize["MEDIUM"] = "MEDIUM";
+	return MenuSize;
+}({});
+/** Panel fill: a surface step (Constitution V-A surface set). */
+var MenuVariant = /* @__PURE__ */ function(MenuVariant) {
+	/** The canvas fill, `background.base`. The default. */
+	MenuVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. */
+	MenuVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
+	MenuVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. */
+	MenuVariant["TERTIARY"] = "TERTIARY";
+	return MenuVariant;
+}({});
+/** Row mode (Constitution V-A: MenuItem `DEFAULT` / `ERROR`; declared in `scripts/lint-dls.ts` `MODE_SETS`). */
+var MenuItemVariant = /* @__PURE__ */ function(MenuItemVariant) {
+	/** A monochrome row. The default. */
+	MenuItemVariant["DEFAULT"] = "DEFAULT";
+	/** A destructive command: error text and icon, error-tinted highlight. */
+	MenuItemVariant["ERROR"] = "ERROR";
+	return MenuItemVariant;
+}({});
+/** Narrowest and widest list (no width token exists; the `TOOLTIP_MAX_WIDTH` precedent). */
+/** The panel is `border-box` with a 0.5px hairline top and bottom (as in Dropdown). */
+/** Pointer rest before a submenu opens, or before an open one closes (a behavior constant, not motion). */
+var MENU_SUBMENU_HOVER_DELAY_MS = 150;
+/** Pause after which the typeahead prefix starts over. */
+var MENU_TYPEAHEAD_RESET_MS = 500;
+/** Every row role a list navigates. */
+var ROW_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]";
+/**
+* The row. Rendered as a `<button>`, or as a link (`as`) for `href` rows. `INTERACTIVE_RESET` sets
+* `padding: 0` and `background: none`, so this block is declared before every class composed onto
+* the row (`MENU_SIZE_TO_ITEM_CSS_MAP`, `MENU_ITEM_VARIANT_TO_CSS_MAP`, `ITEM_DISABLED_CSS`): at
+* equal specificity the later rule in the stylesheet wins.
+*/
+var ItemRoot = /*#__PURE__*/ styled("button")({
+	name: "ItemRoot",
+	class: "gx-Menu-ItemRoot-i1kxcddz",
+	propsAsIs: false
+});
+/** Row height, inline and block padding, and gap per rung (Constitution III-A.4). */
+var MENU_SIZE_TO_ITEM_CSS_MAP = {
+	["SMALL"]: "gx-Menu-SMALL-s14ltqej",
+	["MEDIUM"]: "gx-Menu-MEDIUM-m1sw24v2"
+};
+/** Label type step per rung. */
+var MENU_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD
+};
+/** Description and group-label type step per rung. */
+var MENU_SIZE_TO_SECONDARY_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM
+};
+/** Icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var MENU_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14
+};
+/** The submenu caret: 12px, 10px on the 24px rows (the collapsible Widget's caret). */
+var MENU_SIZE_TO_CARET_PX_MAP = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12
+};
+/** The caps that pair with the label step (Kbd pairing table). */
+var MENU_SIZE_TO_KBD_SIZE_MAP = {
+	["SMALL"]: KbdSize.SMALL,
+	["MEDIUM"]: KbdSize.MEDIUM
+};
+/** The search field takes the menu's rung. */
+var MENU_SIZE_TO_INPUT_SIZE_MAP = {
+	["SMALL"]: InputSize.SMALL,
+	["MEDIUM"]: InputSize.MEDIUM
+};
+/** The check marker's reserved width: the icon's width, so rows align checked or not. */
+var MENU_SIZE_TO_CHECK_SLOT_CSS_MAP = {
+	["SMALL"]: "gx-Menu-SMALL-s1ce9q2a",
+	["MEDIUM"]: "gx-Menu-MEDIUM-mitmqfw"
+};
+/** Group heading height and inset per rung. */
+var MENU_SIZE_TO_GROUP_LABEL_CSS_MAP = {
+	["SMALL"]: "gx-Menu-SMALL-subhcxf",
+	["MEDIUM"]: "gx-Menu-MEDIUM-me676av"
+};
+/** Identity over the four shared surface steps; the fill CSS is Popover's. */
+var MENU_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.BASE,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
+};
+/** Caps one surface step above the panel (the Tooltip rule). */
+var MENU_VARIANT_TO_KBD_VARIANT_MAP = {
+	["BASE"]: KbdVariant.PRIMARY,
+	["PRIMARY"]: KbdVariant.SECONDARY,
+	["SECONDARY"]: KbdVariant.TERTIARY,
+	["TERTIARY"]: KbdVariant.SECONDARY
+};
+/** Label color per row mode. */
+var MENU_ITEM_VARIANT_TO_TEXT_VARIANT_MAP = {
+	["DEFAULT"]: TextVariant.PRIMARY,
+	["ERROR"]: TextVariant.ERROR
+};
+/** Icon color per row mode. */
+var MENU_ITEM_VARIANT_TO_ICON_VARIANT_MAP = {
+	["DEFAULT"]: IconVariant.SECONDARY,
+	["ERROR"]: IconVariant.ERROR
+};
+/** The row list: content width between the two bounds, a 4px inset. */
+var List = /*#__PURE__*/ styled("div")({
+	name: "List",
+	class: "gx-Menu-List-letxokg",
+	propsAsIs: false
+});
+/** With search: the pinned field over the scrolling list, capped to the room on screen. */
+var SearchLayout = /*#__PURE__*/ styled("div")({
+	name: "SearchLayout",
+	class: "gx-Menu-SearchLayout-s1m37gth",
+	propsAsIs: false
+});
+/** With search: only the rows scroll. */
+var SEARCH_LIST_CSS = "gx-Menu-SEARCH_LIST_CSS-s1ab151u";
+/** "No results": a row's box, not interactive. */
+var MenuEmpty = /*#__PURE__*/ styled("div")({
+	name: "MenuEmpty",
+	class: "gx-Menu-MenuEmpty-m1nyz30c",
+	propsAsIs: false
+});
+/**
+* Highlight (hover, focus, an open submenu's row) and press per mode. Hover and press skip a
+* disabled row (the `aria-disabled` state attribute); focus keeps its fill so keyboard users see
+* where they are.
+*/
+var MENU_ITEM_VARIANT_TO_CSS_MAP = {
+	["DEFAULT"]: "gx-Menu-DEFAULT-d1hougl1",
+	["ERROR"]: "gx-Menu-ERROR-ejsjxm5"
+};
+/** A disabled row. Declared after the mode map. */
+var ITEM_DISABLED_CSS = "gx-Menu-ITEM_DISABLED_CSS-i11wn83l";
+/** `leading` / `trailing`: never squeezed, so only the text shrinks. */
+var Slot = /*#__PURE__*/ styled("span")({
+	name: "Slot",
+	class: "gx-Menu-Slot-sotc445",
+	propsAsIs: false
+});
+/** Label and description, stacked; the only part that shrinks. */
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-Menu-Content-cmfg9k5",
+	propsAsIs: false
+});
+/** The check marker's box (width per rung). */
+var CheckSlot = /*#__PURE__*/ styled("span")({
+	name: "CheckSlot",
+	class: "gx-Menu-CheckSlot-c1aves2k",
+	propsAsIs: false
+});
+/** Icons, caps and markers never shrink. */
+var NO_SHRINK_CSS = "gx-Menu-NO_SHRINK_CSS-n1n04r8w";
+/** A section of rows. */
+var GroupRoot = /*#__PURE__*/ styled("div")({
+	name: "GroupRoot",
+	class: "gx-Menu-GroupRoot-gwavq3l",
+	propsAsIs: false
+});
+/** The section heading. */
+var GroupLabel = /*#__PURE__*/ styled("div")({
+	name: "GroupLabel",
+	class: "gx-Menu-GroupLabel-g1dkclye",
+	propsAsIs: false
+});
+/** While a term is set, a section with no row left disappears (a structural role selector). */
+var GROUP_FILTERED_CSS = "gx-Menu-GROUP_FILTERED_CSS-g1wbdfpl";
+/** The separator wrapper (`role="none"`; the `<hr>` inside is the separator). */
+var SeparatorRoot = /*#__PURE__*/ styled("div")({
+	name: "SeparatorRoot",
+	class: "gx-Menu-SeparatorRoot-s1e1rrjq",
+	propsAsIs: false
+});
+/** Space above and below a separator's rule. */
+var SEPARATOR_CSS = "gx-Menu-SEPARATOR_CSS-s28zrrg";
+var MenuRootContext = createContext(null);
+var MenuContext = createContext(null);
+/** The context for a part; throws outside a menu. */
+function useMenuContext(part) {
+	const context = useContext(MenuContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Menu or ContextMenu`);
+	return context;
+}
+/** Lower-cased, trimmed term (the filter's comparison form). */
+function normalizeTerm(term) {
+	return term.trim().toLocaleLowerCase();
+}
+/** A row matches when the term is empty or its label (or description) contains it. */
+function matches(term, label, description) {
+	if (term === "") return true;
+	if (label.toLocaleLowerCase().includes(term)) return true;
+	return description?.toLocaleLowerCase().includes(term) ?? false;
+}
+/** The rows of a list element, in DOM order (portaled submenus are not descendants). */
+function getRows(list) {
+	if (list === null) return [];
+	return Array.from(list.querySelectorAll(ROW_SELECTOR));
+}
+/** Gives one row of the list `tabIndex` 0 and the rest -1. */
+function setRoving(list, target) {
+	for (const row of getRows(list)) row.tabIndex = row === target ? 0 : -1;
+}
+/** Focuses a row and makes it the list's roving row. */
+function focusRow(list, row, preventScroll = false) {
+	if (row === void 0) return;
+	setRoving(list, row);
+	row.focus({ preventScroll });
+}
+/** A printable character that should drive typeahead or the search term. */
+function isPrintableKey(event) {
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+/** A list of rows: roving focus, arrow keys, typeahead, submenu coordination. */
+function MenuList({ children, menuAttributes, className }) {
+	const root = useContext(MenuRootContext);
+	const outer = useContext(MenuContext);
+	if (root === null) throw new Error("MenuList must be rendered inside a Menu or ContextMenu");
+	const listRef = useRef(null);
+	const [openSubmenuId, setOpenSubmenuId] = useState(null);
+	const pendingRef = useRef(null);
+	const shouldFocusSubmenuRef = useRef(false);
+	const childListRef = useRef(null);
+	const typeaheadRef = useRef({
+		buffer: "",
+		timer: null
+	});
+	const labels = useMemo(() => /* @__PURE__ */ new WeakMap(), []);
+	const cancelPending = useCallback((rowId) => {
+		const pending = pendingRef.current;
+		if (pending === null) return;
+		if (rowId !== void 0 && !(pending.kind === "open" && pending.rowId === rowId)) return;
+		clearTimeout(pending.timer);
+		pendingRef.current = null;
+	}, []);
+	const setOpenSubmenu = useCallback((rowId, shouldFocus = false) => {
+		cancelPending();
+		shouldFocusSubmenuRef.current = shouldFocus;
+		setOpenSubmenuId(rowId);
+	}, [cancelPending]);
+	const scheduleSubmenu = useCallback((pending) => {
+		cancelPending();
+		const timer = setTimeout(() => {
+			pendingRef.current = null;
+			shouldFocusSubmenuRef.current = false;
+			setOpenSubmenuId(pending.kind === "open" ? pending.rowId : null);
+		}, MENU_SUBMENU_HOVER_DELAY_MS);
+		pendingRef.current = {
+			...pending,
+			timer
+		};
+	}, [cancelPending]);
+	useEffect(() => () => {
+		if (pendingRef.current !== null) clearTimeout(pendingRef.current.timer);
+		if (typeaheadRef.current.timer !== null) clearTimeout(typeaheadRef.current.timer);
+	}, []);
+	const list = useMemo(() => ({
+		listRef,
+		openSubmenuId,
+		setOpenSubmenu,
+		scheduleSubmenu,
+		cancelPending,
+		shouldFocusSubmenuRef,
+		childListRef
+	}), [
+		openSubmenuId,
+		setOpenSubmenu,
+		scheduleSubmenu,
+		cancelPending
+	]);
+	const parentSubmenu = useContext(SubmenuContext);
+	const depth = parentSubmenu === null ? 0 : (outer?.depth ?? 0) + 1;
+	const value = useMemo(() => ({
+		...root,
+		term: depth === 0 ? root.term : "",
+		depth,
+		labels,
+		list,
+		parent: parentSubmenu
+	}), [
+		root,
+		depth,
+		labels,
+		list,
+		parentSubmenu
+	]);
+	const setListRef = useCallback((node) => {
+		listRef.current = node;
+		if (parentSubmenu !== null) parentSubmenu.list.childListRef.current = node;
+		else root.rootListRef.current = node;
+	}, [parentSubmenu, root.rootListRef]);
+	useIsomorphicLayoutEffect(() => {
+		const rows = getRows(listRef.current);
+		if (parentSubmenu === null) {
+			const target = root.initialFocusRef.current === "last" ? rows.at(-1) : rows[0];
+			root.initialFocusRef.current = "first";
+			setRoving(listRef.current, target);
+		} else if (parentSubmenu.list.shouldFocusSubmenuRef.current) {
+			parentSubmenu.list.shouldFocusSubmenuRef.current = false;
+			focusRow(listRef.current, rows[0], true);
+		} else setRoving(listRef.current, rows[0]);
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		const rows = getRows(listRef.current);
+		if (rows.length > 0 && !rows.some((row) => row.tabIndex === 0)) setRoving(listRef.current, rows[0]);
+	});
+	/** Typeahead: the next row (wrapping) whose label starts with the typed prefix. */
+	const typeahead = (key, current, rows) => {
+		const state = typeaheadRef.current;
+		if (state.timer !== null) clearTimeout(state.timer);
+		state.buffer += key.toLocaleLowerCase();
+		state.timer = setTimeout(() => {
+			state.buffer = "";
+			state.timer = null;
+		}, MENU_TYPEAHEAD_RESET_MS);
+		const isRepeat = [...state.buffer].every((char) => char === state.buffer[0]);
+		const prefix = isRepeat ? state.buffer.slice(0, 1) : state.buffer;
+		const index = rows.indexOf(current);
+		const start = isRepeat ? index + 1 : index;
+		for (let offset = 0; offset < rows.length; offset += 1) {
+			const row = rows[(start + offset + rows.length) % rows.length];
+			if (row === void 0) continue;
+			if ((labels.get(row) ?? "").toLocaleLowerCase().startsWith(prefix)) {
+				focusRow(listRef.current, row);
+				return;
+			}
+		}
+	};
+	const handleKeyDown = (event) => {
+		const listElement = listRef.current;
+		const target = event.target;
+		if (listElement === null || !listElement.contains(target) || !target.matches(ROW_SELECTOR)) return;
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		const rows = getRows(listElement);
+		const index = rows.indexOf(target);
+		const last = rows.length - 1;
+		const search = depth === 0 ? root.search : null;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusRow(listElement, rows[index >= last ? 0 : index + 1]);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (index === 0 && search !== null) {
+					search.inputRef.current?.focus();
+					return;
+				}
+				focusRow(listElement, rows[index <= 0 ? last : index - 1]);
+				return;
+			case "Home":
+				event.preventDefault();
+				focusRow(listElement, rows[0]);
+				return;
+			case "End":
+				event.preventDefault();
+				focusRow(listElement, rows[last]);
+				return;
+			case "ArrowLeft":
+				if (parentSubmenu === null) return;
+				event.preventDefault();
+				parentSubmenu.list.setOpenSubmenu(null);
+				parentSubmenu.rowRef.current?.focus();
+				return;
+			case "Tab":
+				if (parentSubmenu === null) return;
+				event.preventDefault();
+				root.closeTree();
+				return;
+			case "Backspace":
+				if (search === null) return;
+				event.preventDefault();
+				search.setRawTerm(search.rawTerm.slice(0, -1));
+				search.inputRef.current?.focus();
+				return;
+			default:
+				if (!isPrintableKey(event)) return;
+				event.preventDefault();
+				if (search !== null) {
+					search.setRawTerm(search.rawTerm + event.key);
+					search.inputRef.current?.focus();
+					return;
+				}
+				if (event.key === " ") return;
+				typeahead(event.key, target, rows);
+		}
+	};
+	/** A focused row becomes the roving row. */
+	const handleFocus = (event) => {
+		const target = event.target;
+		if (listRef.current?.contains(target) && target.matches(ROW_SELECTOR)) setRoving(listRef.current, target);
+	};
+	/** Entering a submenu cancels its parent's pending close. */
+	const handlePointerEnter = () => {
+		parentSubmenu?.list.cancelPending();
+	};
+	return /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(List, {
+			...menuAttributes,
+			ref: setListRef,
+			className,
+			onKeyDown: handleKeyDown,
+			onFocus: handleFocus,
+			onPointerEnter: handlePointerEnter,
+			children
+		})
+	});
+}
+/** Set by a submenu row around its submenu's list: the parent list and the row. */
+var SubmenuContext = createContext(null);
+/** Renders one row element (not a component, so Popover and Tooltip clone the row itself). */
+function renderRow({ context, role, label, description, icon, leading, trailing, hotKeys, variant, isDisabled, isChecked, marker, onActivate, onKeyDown, rowId, isSubmenuRow, elementProps, className, style }) {
+	const { size, list, isSearchable, depth } = context;
+	const iconPx = MENU_SIZE_TO_ICON_PX_MAP[size];
+	const iconVariant = isDisabled ? IconVariant.DISABLED : MENU_ITEM_VARIANT_TO_ICON_VARIANT_MAP[variant];
+	const hasLeading = leading !== void 0 && leading !== null && leading !== false;
+	const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
+	const hoverFocuses = !(isSearchable && depth === 0);
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onActivate(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.currentTarget.click();
+		}
+	};
+	/** Space activates on keydown; keep the native keyup click from firing a second time. */
+	const handleKeyUp = (event) => {
+		if (event.key === " ") event.preventDefault();
+	};
+	const handlePointerMove = (event) => {
+		if (event.pointerType !== "mouse" || !hoverFocuses) return;
+		if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) focusRow(list.listRef.current, event.currentTarget, true);
+	};
+	const handlePointerEnter = (event) => {
+		if (event.pointerType !== "mouse") return;
+		if (isSubmenuRow) if (list.openSubmenuId === rowId) list.cancelPending();
+		else list.scheduleSubmenu({
+			kind: "open",
+			rowId
+		});
+		else if (list.openSubmenuId !== null) list.scheduleSubmenu({
+			kind: "close",
+			rowId
+		});
+		else list.cancelPending();
+	};
+	const handlePointerLeave = () => {
+		list.cancelPending(rowId);
+	};
+	return /* @__PURE__ */ jsxs(ItemRoot, {
+		...elementProps,
+		role,
+		tabIndex: -1,
+		...isDisabled ? { "aria-disabled": true } : {},
+		...isChecked === void 0 ? {} : { "aria-checked": isChecked },
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onKeyUp: handleKeyUp,
+		onPointerMove: handlePointerMove,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		className: cx(MENU_SIZE_TO_ITEM_CSS_MAP[size], MENU_ITEM_VARIANT_TO_CSS_MAP[variant], isDisabled && ITEM_DISABLED_CSS, className),
+		style,
+		children: [
+			hasLeading && /* @__PURE__ */ jsx(Slot, { children: leading }),
+			icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				size: iconPx,
+				variant: iconVariant,
+				className: NO_SHRINK_CSS
+			}),
+			/* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: MENU_SIZE_TO_TEXT_SIZE_MAP[size],
+				variant: isDisabled ? TextVariant.DISABLED : MENU_ITEM_VARIANT_TO_TEXT_VARIANT_MAP[variant],
+				lineClamp: 1,
+				children: label
+			}), description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: MENU_SIZE_TO_SECONDARY_TEXT_SIZE_MAP[size],
+				variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+				lineClamp: 2,
+				children: description
+			})] }),
+			hasTrailing && /* @__PURE__ */ jsx(Slot, { children: trailing }),
+			hotKeys !== void 0 && hotKeys.length > 0 && /* @__PURE__ */ jsx(Kbd, {
+				hotKeys,
+				size: MENU_SIZE_TO_KBD_SIZE_MAP[size],
+				variant: MENU_VARIANT_TO_KBD_VARIANT_MAP[context.variant],
+				isDisabled,
+				"aria-hidden": true,
+				className: NO_SHRINK_CSS
+			}),
+			isChecked !== void 0 && /* @__PURE__ */ jsx(CheckSlot, {
+				className: MENU_SIZE_TO_CHECK_SLOT_CSS_MAP[size],
+				children: isChecked && /* @__PURE__ */ jsx(Icon, {
+					component: CheckIcon,
+					size: iconPx,
+					variant: isDisabled ? IconVariant.DISABLED : IconVariant.PRIMARY
+				})
+			}),
+			marker === "submenu" && /* @__PURE__ */ jsx(Icon, {
+				component: CaretRightIcon,
+				size: MENU_SIZE_TO_CARET_PX_MAP[size],
+				variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+				className: NO_SHRINK_CSS
+			}),
+			marker === "external" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+				component: ArrowUpRightIcon,
+				size: iconPx,
+				variant: iconVariant,
+				className: NO_SHRINK_CSS
+			}), /* @__PURE__ */ jsx(VisuallyHidden, { children: " (opens in a new tab)" })] })
+		]
+	});
+}
+/** Wraps a disabled row with a reason in a Tooltip to its right. */
+function withDisabledReason(row, isDisabled, disabledReason) {
+	if (!isDisabled || disabledReason === void 0 || disabledReason === "") return row;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		body: disabledReason,
+		placement: Placement.RIGHT,
+		children: row
+	});
+}
+/** A command, a link, or the opener of a submenu. */
+var MenuItem = forwardRef(function MenuItem({ label, description, icon, leading, trailing, hotKeys, variant: variantProp, isDisabled = false, disabledReason, onSelect, href, as, isExternal = false, children, className, style, ...rest }, ref) {
+	const variant = variantProp ?? "DEFAULT";
+	const context = useMenuContext("MenuItem");
+	const rowId = useId();
+	const rowRef = useRef(null);
+	const mergedRef = useMergeRefs([useCallback((node) => {
+		rowRef.current = node;
+		if (node !== null) context.labels.set(node, label);
+	}, [context.labels, label]), ref]);
+	const isSubmenuRow = children !== void 0 && children !== null && children !== false;
+	const hasSubmenu = isSubmenuRow && !isDisabled;
+	const isSubmenuOpen = hasSubmenu && context.list.openSubmenuId === rowId;
+	const submenuParent = useMemo(() => ({
+		list: context.list,
+		rowRef,
+		rowId
+	}), [context.list, rowId]);
+	if (!matches(context.term, label, isSubmenuRow ? void 0 : description)) return null;
+	const isLink = href !== void 0 && !isSubmenuRow;
+	const elementProps = {
+		...rest,
+		ref: mergedRef
+	};
+	if (isLink) {
+		elementProps.as = isDisabled ? "a" : as ?? "a";
+		if (!isDisabled) {
+			elementProps.href = href;
+			if (isExternal) {
+				elementProps.target = "_blank";
+				elementProps.rel = "noopener noreferrer";
+			}
+		}
+	} else elementProps.type = "button";
+	const onActivate = () => {
+		if (isSubmenuRow) {
+			if (isSubmenuOpen) {
+				const childList = context.list.childListRef.current;
+				focusRow(childList, getRows(childList)[0]);
+			} else context.list.setOpenSubmenu(rowId, true);
+			return;
+		}
+		onSelect?.();
+		context.closeTree();
+	};
+	const onKeyDown = (event) => {
+		if (!hasSubmenu || event.key !== "ArrowRight") return;
+		event.preventDefault();
+		onActivate();
+	};
+	const row = renderRow({
+		context,
+		role: "menuitem",
+		label,
+		description,
+		icon,
+		leading,
+		trailing,
+		hotKeys,
+		variant,
+		isDisabled,
+		isChecked: void 0,
+		marker: isSubmenuRow ? "submenu" : isLink && isExternal ? "external" : null,
+		onActivate,
+		onKeyDown,
+		rowId,
+		isSubmenuRow: hasSubmenu,
+		elementProps,
+		className,
+		style
+	});
+	if (!hasSubmenu) return withDisabledReason(row, isDisabled, disabledReason);
+	return /* @__PURE__ */ jsx(Popover, {
+		trigger: PopoverTrigger.MANUAL,
+		role: PopoverRole.MENU,
+		placement: Placement.RIGHT_START,
+		variant: MENU_VARIANT_TO_POPOVER_VARIANT_MAP[context.variant],
+		isOpen: isSubmenuOpen,
+		onOpenChange: (isOpen) => {
+			if (!isOpen && context.list.openSubmenuId === rowId) context.list.setOpenSubmenu(null);
+		},
+		body: /* @__PURE__ */ jsx(SubmenuContext.Provider, {
+			value: submenuParent,
+			children: /* @__PURE__ */ jsx(MenuList, { children })
+		}),
+		children: row
+	});
+});
+MenuItem.displayName = "MenuItem";
+/** An on/off option; toggling keeps the menu open. */
+var MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ label, description, icon, leading, hotKeys, isChecked: isCheckedProp, defaultIsChecked = false, onChange, isDisabled = false, disabledReason, className, style, ...rest }, ref) {
+	const context = useMenuContext("MenuCheckboxItem");
+	const rowId = useId();
+	const mergedRef = useMergeRefs([useCallback((node) => {
+		if (node !== null) context.labels.set(node, label);
+	}, [context.labels, label]), ref]);
+	const [isChecked, setIsChecked] = useControlledState({
+		value: isCheckedProp,
+		defaultValue: defaultIsChecked,
+		onChange
+	});
+	if (!matches(context.term, label, description)) return null;
+	return withDisabledReason(renderRow({
+		context,
+		role: "menuitemcheckbox",
+		label,
+		description,
+		icon,
+		leading,
+		trailing: void 0,
+		hotKeys,
+		variant: "DEFAULT",
+		isDisabled,
+		isChecked,
+		marker: null,
+		onActivate: () => setIsChecked(!isChecked),
+		rowId,
+		isSubmenuRow: false,
+		elementProps: {
+			...rest,
+			ref: mergedRef,
+			type: "button"
+		},
+		className,
+		style
+	}), isDisabled, disabledReason);
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+/** One radio option row (internal; `MenuRadioGroup` renders one per option). */
+function MenuRadioRow({ option, isChecked, onChoose }) {
+	const context = useMenuContext("MenuRadioGroup");
+	const rowId = useId();
+	const register = useCallback((node) => {
+		if (node !== null) context.labels.set(node, option.label);
+	}, [context.labels, option.label]);
+	if (!matches(context.term, option.label, option.description)) return null;
+	const isDisabled = option.isDisabled ?? false;
+	return withDisabledReason(renderRow({
+		context,
+		role: "menuitemradio",
+		label: option.label,
+		description: option.description,
+		icon: option.icon,
+		leading: option.leading,
+		trailing: void 0,
+		hotKeys: option.hotKeys,
+		variant: "DEFAULT",
+		isDisabled,
+		isChecked,
+		marker: null,
+		onActivate: () => onChoose(option.id),
+		rowId,
+		isSubmenuRow: false,
+		elementProps: {
+			ref: register,
+			type: "button"
+		},
+		className: void 0,
+		style: void 0
+	}), isDisabled, option.disabledReason);
+}
+/** The heading of a group (and its accessible name). */
+function GroupHeading({ id, label, size }) {
+	return /* @__PURE__ */ jsx(GroupLabel, {
+		role: "presentation",
+		id,
+		className: MENU_SIZE_TO_GROUP_LABEL_CSS_MAP[size],
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: MENU_SIZE_TO_SECONDARY_TEXT_SIZE_MAP[size],
+			weight: TextWeight.MEDIUM,
+			variant: TextVariant.TERTIARY,
+			lineClamp: 1,
+			children: label
+		})
+	});
+}
+/** One choice among options; choosing closes the menu. */
+var MenuRadioGroupInner = forwardRef(function MenuRadioGroup({ options, value: valueProp, defaultValue = null, onChange, label, className, style, ...rest }, ref) {
+	const context = useMenuContext("MenuRadioGroup");
+	const headingId = useId();
+	const [value, setValue] = useControlledState({
+		value: valueProp,
+		defaultValue,
+		onChange: (next) => {
+			if (next !== null) onChange?.(next);
+		}
+	});
+	const hasLabel = label !== void 0 && label !== "";
+	const choose = (id) => {
+		setValue(id);
+		context.closeTree();
+	};
+	return /* @__PURE__ */ jsxs(GroupRoot, {
+		...rest,
+		ref,
+		role: "group",
+		...hasLabel ? { "aria-labelledby": headingId } : {},
+		className: cx(context.term !== "" && GROUP_FILTERED_CSS, className),
+		style,
+		children: [hasLabel && /* @__PURE__ */ jsx(GroupHeading, {
+			id: headingId,
+			label,
+			size: context.size
+		}), options.map((option) => /* @__PURE__ */ jsx(MenuRadioRow, {
+			option,
+			isChecked: value === option.id,
+			onChoose: choose
+		}, option.id))]
+	});
+});
+MenuRadioGroupInner.displayName = "MenuRadioGroup";
+/** One choice among options; choosing closes the menu. */
+var MenuRadioGroup = MenuRadioGroupInner;
+/** A labelled section of rows. */
+var MenuGroup = forwardRef(function MenuGroup({ label, children, className, style, ...rest }, ref) {
+	const context = useMenuContext("MenuGroup");
+	const headingId = useId();
+	const hasLabel = label !== void 0 && label !== "";
+	return /* @__PURE__ */ jsxs(GroupRoot, {
+		...rest,
+		ref,
+		role: "group",
+		...hasLabel ? { "aria-labelledby": headingId } : {},
+		className: cx(context.term !== "" && GROUP_FILTERED_CSS, className),
+		style,
+		children: [hasLabel && /* @__PURE__ */ jsx(GroupHeading, {
+			id: headingId,
+			label,
+			size: context.size
+		}), children]
+	});
+});
+MenuGroup.displayName = "MenuGroup";
+/** A hairline between rows; renders nothing while a search term is set. */
+var MenuSeparator = forwardRef(function MenuSeparator({ className, style, ...rest }, ref) {
+	if (useMenuContext("MenuSeparator").term !== "") return null;
+	return /* @__PURE__ */ jsx(SeparatorRoot, {
+		...rest,
+		ref,
+		role: "none",
+		className: cx(SEPARATOR_CSS, className),
+		style,
+		children: /* @__PURE__ */ jsx(Divider, {})
+	});
+});
+MenuSeparator.displayName = "MenuSeparator";
+/** The searchable body: the pinned field, the filtered `role="menu"` list and "No results". */
+function MenuSearchBody({ children, listId, triggerId, ariaLabel }) {
+	const root = useContext(MenuRootContext);
+	const layoutRef = useRef(null);
+	const [isEmpty, setIsEmpty] = useState(false);
+	const term = root?.term ?? "";
+	useIsomorphicLayoutEffect(() => {
+		setIsEmpty(term !== "" && getRows(layoutRef.current).length === 0);
+	}, [term]);
+	if (root === null || root.search === null) return null;
+	const { search, size } = root;
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		const rows = getRows(root.rootListRef.current);
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			focusRow(root.rootListRef.current, rows[0]);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			rows.find((row) => row.getAttribute("aria-disabled") !== "true")?.click();
+		}
+	};
+	return /* @__PURE__ */ jsxs(SearchLayout, {
+		ref: layoutRef,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				padding: 4,
+				children: /* @__PURE__ */ jsx(SearchInput, {
+					ref: search.inputRef,
+					value: search.rawTerm,
+					onChange: search.setRawTerm,
+					size: MENU_SIZE_TO_INPUT_SIZE_MAP[size],
+					isGhost: true,
+					fillWidth: true,
+					ariaLabel: "Search",
+					"aria-controls": listId,
+					onKeyDown: handleKeyDown
+				})
+			}),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(MenuList, {
+				className: SEARCH_LIST_CSS,
+				menuAttributes: {
+					role: "menu",
+					id: listId,
+					...ariaLabel === void 0 ? { "aria-labelledby": triggerId } : { "aria-label": ariaLabel }
+				},
+				children
+			}),
+			isEmpty && /* @__PURE__ */ jsx(MenuEmpty, {
+				className: MENU_SIZE_TO_ITEM_CSS_MAP[size],
+				children: /* @__PURE__ */ jsx(Text, {
+					size: MENU_SIZE_TO_TEXT_SIZE_MAP[size],
+					variant: TextVariant.TERTIARY,
+					children: "No results"
+				})
+			})
+		]
+	});
+}
+/**
+* @internal Shared by Menu and ContextMenu; apps use those. The menu engine: a Popover in `MENU`
+* role (or `DIALOG` around a search field) holding the rows, opened by `popoverTrigger`.
+*/
+var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM", variant: variantProp, placement = Placement.BOTTOM_START, isSearchable = false, isOpen, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, popoverTrigger, id, className, style, ...rest }, ref) {
+	const variant = variantProp ?? "BASE";
+	const { isOpen: isOpenState, setOpen } = useControlledOpenState({
+		isOpen,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const [rawTerm, setRawTerm] = useState("");
+	const [wasOpen, setWasOpen] = useState(isOpenState);
+	if (wasOpen !== isOpenState) {
+		setWasOpen(isOpenState);
+		if (isOpenState) setRawTerm("");
+	}
+	const initialFocusRef = useRef("first");
+	const rootListRef = useRef(null);
+	const inputRef = useRef(null);
+	const generatedTriggerId = useId();
+	const listId = useId();
+	const triggerProps = trigger.props;
+	const triggerId = typeof triggerProps.id === "string" ? triggerProps.id : generatedTriggerId;
+	const closeTree = useCallback(() => setOpen(false), [setOpen]);
+	const term = isSearchable ? normalizeTerm(rawTerm) : "";
+	const rootValue = useMemo(() => ({
+		size,
+		variant,
+		term,
+		isSearchable,
+		closeTree,
+		search: isSearchable ? {
+			inputRef,
+			rawTerm,
+			setRawTerm
+		} : null,
+		initialFocusRef,
+		rootListRef
+	}), [
+		size,
+		variant,
+		term,
+		isSearchable,
+		closeTree,
+		rawTerm
+	]);
+	/** ArrowDown / ArrowUp on a `CLICK` trigger open the menu on the first / last row. */
+	const handleTriggerKeyDown = (event) => {
+		const own = triggerProps.onKeyDown;
+		if (typeof own === "function") own(event);
+		if (event.defaultPrevented || isDisabled) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		const edge = event.key === "ArrowDown" ? "first" : "last";
+		if (!isOpenState) {
+			initialFocusRef.current = edge;
+			setOpen(true);
+			return;
+		}
+		if (isSearchable) {
+			inputRef.current?.focus();
+			return;
+		}
+		const rows = getRows(rootListRef.current);
+		focusRow(rootListRef.current, edge === "first" ? rows[0] : rows.at(-1));
+	};
+	const triggerClone = cloneElement(trigger, {
+		id: triggerId,
+		...popoverTrigger === PopoverTrigger.CLICK ? { onKeyDown: handleTriggerKeyDown } : {}
+	});
+	const body = isSearchable ? /* @__PURE__ */ jsx(MenuSearchBody, {
+		listId,
+		triggerId,
+		ariaLabel,
+		children
+	}) : /* @__PURE__ */ jsx(MenuList, { children });
+	return /* @__PURE__ */ jsx(MenuRootContext.Provider, {
+		value: rootValue,
+		children: /* @__PURE__ */ jsx(Popover, {
+			...rest,
+			ref,
+			trigger: popoverTrigger,
+			role: isSearchable ? PopoverRole.DIALOG : PopoverRole.MENU,
+			variant: MENU_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+			placement,
+			isOpen: isOpenState,
+			onOpenChange: setOpen,
+			isDisabled,
+			...ariaLabel === void 0 ? {} : { ariaLabel },
+			...id === void 0 ? {} : { id },
+			...className === void 0 ? {} : { className },
+			...style === void 0 ? {} : { style },
+			body,
+			children: triggerClone
+		})
+	});
+});
+MenuRoot.displayName = "MenuRoot";
+/** A menu button: a trigger that opens a list of commands, navigated with arrow keys and typeahead. */
+var Menu = forwardRef(function Menu(props, ref) {
+	return /* @__PURE__ */ jsx(MenuRoot, {
+		...props,
+		ref,
+		popoverTrigger: PopoverTrigger.CLICK
+	});
+});
+Menu.displayName = "Menu";
+//#endregion
+export { MenuCheckboxItem, MenuGroup, MenuItem, MenuItemVariant, MenuRadioGroup, MenuRoot, MenuSeparator, MenuSize, MenuVariant, Menu as default };