@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/Menu/ContextMenu.mjs

@@ -0,0 +1,145 @@
+import { o as styled } from "../src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-Z9_QludW.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-B7msJ1IG.mjs";
+import { a as MenuPaper, i as MenuContext, n as useMenuPlacement, t as MenuItem } from "../MenuItem-BR7ingQx.mjs";
+import { MenuItems } from "./MenuItems.mjs";
+import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Menu/ContextMenu/ContextMenu.tsx
+const ContextMenuPaper = styled(MenuPaper, {
+	name: "ContextMenu",
+	slot: "paper",
+	label: "ContextMenuPaper"
+})();
+const ContextMenuRoot = styled("div", {
+	name: "ContextMenu",
+	label: "ContextMenu"
+})({ display: "contents" });
+const isMenuKey = (event) => event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+/** The element given, listening for a right-click and the context-menu keys. */
+function ContextMenuTarget({ element, onContextMenu, onKeyDown }) {
+	return cloneElement(element, {
+		onContextMenu,
+		onKeyDown
+	});
+}
+/**
+* @description A `MenuList` opened at the pointer by a right-click over its target, or at
+* the focused element by the context-menu key or Shift+F10. It is placed and closes as
+* `Menu` does - Escape, a chosen row or focus leaving - and gives focus back to where it
+* was. The browser's own menu is held back only when this one opens.
+*/
+function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+	const dp = useDefaultProps("ContextMenu");
+	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
+	const elevation = elevationProp ?? dp.elevation ?? 8;
+	const layer = layerProp ?? dp.layer ?? "modal";
+	const color = colorProp ?? dp.color;
+	const textColor = textColorProp ?? dp.textColor;
+	const size = sizeProp ?? dp.size;
+	const dense = denseProp ?? dp.dense;
+	const theme = useTheme();
+	const [point, setPoint] = useState(null);
+	const isOpen = point !== null;
+	const rootRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const returnFocusRef = useRef(null);
+	const listId = useId();
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = useMemo(() => ({
+		align: "start",
+		margin,
+		elevation,
+		layer
+	}), [
+		margin,
+		elevation,
+		layer
+	]);
+	useMenuPlacement({
+		isOpen,
+		anchorRef: rootRef,
+		anchorPosition: point,
+		surfaceRef,
+		placement: "below",
+		align: "start",
+		margin
+	});
+	const openAt = (top, left) => {
+		returnFocusRef.current = document.activeElement;
+		setPoint({
+			top,
+			left
+		});
+	};
+	const close = useCallback((event, reason) => {
+		setPoint(null);
+		onClose?.(event, reason);
+		if (reason !== "blur") returnFocusRef.current.focus();
+	}, [onClose]);
+	const handleActivate = useCallback((_value, event) => close(event, "select"), [close]);
+	const handleContextMenu = (event) => {
+		target.props.onContextMenu?.(event);
+		event.preventDefault();
+		openAt(event.clientY, event.clientX);
+	};
+	const handleKeyDown = (event) => {
+		target.props.onKeyDown?.(event);
+		if (!isMenuKey(event)) return;
+		event.preventDefault();
+		const { bottom, left } = event.target.getBoundingClientRect();
+		openAt(bottom, left);
+	};
+	const handleSurfaceKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(event, "escapeKey");
+		}
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (isOpen && !event.currentTarget.contains(next)) close(event, "blur");
+	};
+	const hasRows = items ? items.length > 0 : Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ jsx(MenuItems, { items }) : children;
+	return /* @__PURE__ */ jsxs(ContextMenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ jsx(ContextMenuTarget, {
+			element: target,
+			onContextMenu: handleContextMenu,
+			onKeyDown: handleKeyDown
+		}), isOpen && /* @__PURE__ */ jsx(ContextMenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ jsx(MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ jsx(MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ jsx(MenuList, {
+						id: listId,
+						"aria-label": ariaLabel,
+						shouldAutoFocus: true,
+						onSelect,
+						color,
+						textColor,
+						size,
+						dense,
+						width: "100%",
+						children: hasRows ? rows : emptyLabel != null && /* @__PURE__ */ jsx(MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ContextMenu };

package/dist/Menu/Menu.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Menu = require("../Menu-BkKPTOfh.cjs");
+exports.Menu = require_Menu.Menu;

package/dist/Menu/Menu.d.cts

@@ -0,0 +1,2 @@
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-CWnbCxgw.cjs";
+export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.d.mts

@@ -0,0 +1,2 @@
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-DckSub2J.mjs";
+export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.mjs

@@ -0,0 +1,2 @@
+import { t as Menu } from "../Menu-tECbAEFj.mjs";
+export { Menu };

package/dist/Menu/MenuDivider.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/MenuDivider/MenuDivider.tsx
+const MenuDividerRoot = require_src.styled("li", {
+	name: "MenuDivider",
+	label: "MenuDivider"
+})(({ theme }) => ({
+	listStyle: "none",
+	height: 0,
+	marginTop: theme.space[.5],
+	marginBottom: theme.space[.5],
+	borderTopWidth: theme.borderWidths.thin,
+	borderTopStyle: "solid",
+	borderTopColor: (0, require_src.src_exports.get)(theme, "border.light")
+}));
+/**
+* @description A `role="separator"` line between groups of rows in a `MenuList`. The
+* arrow keys pass over it.
+*/
+function MenuDivider({ className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuDividerRoot, {
+		role: "separator",
+		className,
+		"data-testid": dataTestid
+	});
+}
+//#endregion
+exports.MenuDivider = MenuDivider;

package/dist/Menu/MenuDivider.d.cts

@@ -0,0 +1,12 @@
+//#region src/Menu/MenuDivider/MenuDivider.d.ts
+interface MenuDividerProps {
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="separator"` line between groups of rows in a `MenuList`. The
+ * arrow keys pass over it.
+ */
+declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;
+//#endregion
+export { MenuDivider, MenuDividerProps };

package/dist/Menu/MenuDivider.d.mts

@@ -0,0 +1,12 @@
+//#region src/Menu/MenuDivider/MenuDivider.d.ts
+interface MenuDividerProps {
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="separator"` line between groups of rows in a `MenuList`. The
+ * arrow keys pass over it.
+ */
+declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;
+//#endregion
+export { MenuDivider, MenuDividerProps };

package/dist/Menu/MenuDivider.mjs

@@ -0,0 +1,28 @@
+import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/MenuDivider/MenuDivider.tsx
+const MenuDividerRoot = styled("li", {
+	name: "MenuDivider",
+	label: "MenuDivider"
+})(({ theme }) => ({
+	listStyle: "none",
+	height: 0,
+	marginTop: theme.space[.5],
+	marginBottom: theme.space[.5],
+	borderTopWidth: theme.borderWidths.thin,
+	borderTopStyle: "solid",
+	borderTopColor: (0, src_exports.get)(theme, "border.light")
+}));
+/**
+* @description A `role="separator"` line between groups of rows in a `MenuList`. The
+* arrow keys pass over it.
+*/
+function MenuDivider({ className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ jsx(MenuDividerRoot, {
+		role: "separator",
+		className,
+		"data-testid": dataTestid
+	});
+}
+//#endregion
+export { MenuDivider };

package/dist/Menu/MenuItems.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MenuItem = require("../MenuItem-CfdN4axw.cjs");
+const require_Menu_MenuDivider = require("./MenuDivider.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/MenuItems/MenuItems.tsx
+const isDivider = (item) => "type" in item && item.type === "divider";
+/**
+* @description Menu rows from data: each entry a `MenuItem` (its label as `label`, its
+* submenu as more entries) or `{ type: 'divider' }`. It renders the same rows JSX children
+* would, so the two behave alike - inside a `MenuList`, a `Menu` or a `ContextMenu`.
+*/
+function MenuItems({ items }) {
+	let dividers = 0;
+	return items.map((item, index) => {
+		if (isDivider(item)) {
+			dividers += 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu_MenuDivider.MenuDivider, {}, `divider-${dividers}`);
+		}
+		const { label, submenu, ...row } = item;
+		const submenuRows = submenu?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItems, { items: submenu }) : null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+			...row,
+			submenu: submenu === void 0 ? void 0 : submenuRows,
+			children: label
+		}, item.value ?? `row-${index}`);
+	});
+}
+//#endregion
+exports.MenuItems = MenuItems;

package/dist/Menu/MenuItems.d.cts

@@ -0,0 +1,2 @@
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-DQcnJ5H4.cjs";
+export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.d.mts

@@ -0,0 +1,2 @@
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-C3KrFPCj.mjs";
+export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.mjs

@@ -0,0 +1,28 @@
+import { t as MenuItem } from "../MenuItem-BR7ingQx.mjs";
+import { MenuDivider } from "./MenuDivider.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/MenuItems/MenuItems.tsx
+const isDivider = (item) => "type" in item && item.type === "divider";
+/**
+* @description Menu rows from data: each entry a `MenuItem` (its label as `label`, its
+* submenu as more entries) or `{ type: 'divider' }`. It renders the same rows JSX children
+* would, so the two behave alike - inside a `MenuList`, a `Menu` or a `ContextMenu`.
+*/
+function MenuItems({ items }) {
+	let dividers = 0;
+	return items.map((item, index) => {
+		if (isDivider(item)) {
+			dividers += 1;
+			return /* @__PURE__ */ jsx(MenuDivider, {}, `divider-${dividers}`);
+		}
+		const { label, submenu, ...row } = item;
+		const submenuRows = submenu?.length ? /* @__PURE__ */ jsx(MenuItems, { items: submenu }) : null;
+		return /* @__PURE__ */ jsx(MenuItem, {
+			...row,
+			submenu: submenu === void 0 ? void 0 : submenuRows,
+			children: label
+		}, item.value ?? `row-${index}`);
+	});
+}
+//#endregion
+export { MenuItems };

package/dist/Menu/MenuList.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MenuList = require("../MenuList-D4imLXAa.cjs");
+exports.MenuList = require_MenuList.MenuList;

package/dist/Menu/MenuList.d.cts

@@ -0,0 +1,38 @@
+import { V as Theme } from "../index-DmJ7yWWi.cjs";
+import { t as MenuItemValue } from "../MenuListContext-vujGcRk9.cjs";
+import { KeyboardEvent, ReactNode } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Menu/MenuList/MenuList.d.ts
+interface MenuListProps extends SpaceProps<Theme>, LayoutProps<Theme> {
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Carry the arrow keys past the last row to the first, and back. Default: `true`. */
+  shouldWrap?: boolean;
+  /** Focus the selected row, or the first enabled one, on mount. Default: `false`. */
+  shouldAutoFocus?: boolean;
+  /** Accent color for every row - resolves to `theme.palette[color]`. A row's own value wins. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. A row's own value wins. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. A row's own value wins. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+ * move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+ * label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+ * rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+ */
+declare function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus, color, textColor, size, dense, onKeyDown, ...rest }: Readonly<MenuListProps>): import("react").JSX.Element;
+//#endregion
+export { type MenuItemValue, MenuList, MenuListProps };

package/dist/Menu/MenuList.d.mts

@@ -0,0 +1,38 @@
+import { V as Theme } from "../index-CVNJEUwJ.mjs";
+import { t as MenuItemValue } from "../MenuListContext-Dml16k0X.mjs";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { KeyboardEvent, ReactNode } from "react";
+//#region src/Menu/MenuList/MenuList.d.ts
+interface MenuListProps extends SpaceProps<Theme>, LayoutProps<Theme> {
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Carry the arrow keys past the last row to the first, and back. Default: `true`. */
+  shouldWrap?: boolean;
+  /** Focus the selected row, or the first enabled one, on mount. Default: `false`. */
+  shouldAutoFocus?: boolean;
+  /** Accent color for every row - resolves to `theme.palette[color]`. A row's own value wins. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. A row's own value wins. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. A row's own value wins. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+ * move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+ * label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+ * rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+ */
+declare function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus, color, textColor, size, dense, onKeyDown, ...rest }: Readonly<MenuListProps>): import("react").JSX.Element;
+//#endregion
+export { type MenuItemValue, MenuList, MenuListProps };

package/dist/Menu/MenuList.mjs

@@ -0,0 +1,2 @@
+import { t as MenuList } from "../MenuList-B7msJ1IG.mjs";
+export { MenuList };

package/dist/Menu-BkKPTOfh.cjs

@@ -0,0 +1,172 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_MenuList = require("./MenuList-D4imLXAa.cjs");
+const require_MenuItem = require("./MenuItem-CfdN4axw.cjs");
+const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/utils/assignRef.ts
+/** Hands `value` to a ref of either kind - a callback, or an object - when there is one. */
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+//#region src/Menu/Menu/Menu.tsx
+const MenuRoot = require_src.styled("div", {
+	name: "Menu",
+	label: "Menu"
+})({ display: "inline-flex" });
+/** The menu's trigger: the element given, as the button that opens the list. */
+function MenuTrigger({ element, id, elementRef, isOpen, listId, onClick, onKeyDown }) {
+	return (0, react.cloneElement)(element, {
+		id,
+		ref: elementRef,
+		"aria-haspopup": "menu",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? listId : void 0,
+		onClick,
+		onKeyDown
+	});
+}
+/**
+* @description A trigger and the `MenuList` it opens. Not modal: no focus trap, no scroll
+* lock, nothing laid over the page, so the pointer passes over it freely. The list is
+* placed `position: fixed` in the window next to the trigger, so a panel's overflow
+* can't clip it, but stays inside the menu's own box in the DOM. Escape or a chosen row
+* closes it and returns focus to the trigger; focus leaving it closes it where it went.
+*/
+function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+	const dp = require_theme.useDefaultProps("Menu");
+	const align = alignProp ?? dp.align ?? "start";
+	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
+	const elevation = elevationProp ?? dp.elevation ?? 8;
+	const layer = layerProp ?? dp.layer ?? "modal";
+	const color = colorProp ?? dp.color;
+	const textColor = textColorProp ?? dp.textColor;
+	const size = sizeProp ?? dp.size;
+	const dense = denseProp ?? dp.dense;
+	const theme = require_theme.useTheme();
+	const isControlled = isOpenProp !== void 0;
+	const [isOpenState, setIsOpenState] = (0, react.useState)(defaultOpen);
+	const isOpen = isControlled ? isOpenProp : isOpenState;
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const listId = (0, react.useId)();
+	const fallbackTriggerId = (0, react.useId)();
+	const triggerId = trigger.props.id ?? fallbackTriggerId;
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = (0, react.useMemo)(() => ({
+		align,
+		margin,
+		elevation,
+		layer
+	}), [
+		align,
+		margin,
+		elevation,
+		layer
+	]);
+	require_MenuItem.useMenuPlacement({
+		isOpen,
+		anchorRef: rootRef,
+		surfaceRef,
+		placement: "below",
+		align,
+		margin
+	});
+	const open = () => {
+		if (!isControlled) setIsOpenState(true);
+		onOpen?.();
+	};
+	const close = (0, react.useCallback)((event, reason) => {
+		if (!isControlled) setIsOpenState(false);
+		onClose?.(event, reason);
+		if (reason !== "blur") triggerRef.current?.focus();
+	}, [isControlled, onClose]);
+	const triggerProps = trigger.props;
+	const setTriggerRef = (0, react.useCallback)((element) => {
+		triggerRef.current = element;
+		assignRef(triggerProps.ref, element);
+	}, [triggerProps]);
+	const handleActivate = (0, react.useCallback)((_value, event) => close(event, "select"), [close]);
+	const handleTriggerClick = (event) => {
+		trigger.props.onClick?.(event);
+		if (isOpen) close(event, "triggerClick");
+		else open();
+	};
+	const handleTriggerKeyDown = (event) => {
+		trigger.props.onKeyDown?.(event);
+		if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			open();
+		}
+	};
+	const handleSurfaceKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(event, "escapeKey");
+		} else if (onStep && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			event.preventDefault();
+			const step = event.key === "ArrowRight" ? 1 : -1;
+			onStep(require_MenuItem.isRtl(event.currentTarget) ? -step : step);
+		}
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (isOpen && !event.currentTarget.contains(next)) close(event, "blur");
+	};
+	const hasRows = items ? items.length > 0 : react.Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu_MenuItems.MenuItems, { items }) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuTrigger, {
+			element: trigger,
+			id: triggerId,
+			elementRef: setTriggerRef,
+			isOpen,
+			listId,
+			onClick: handleTriggerClick,
+			onKeyDown: handleTriggerKeyDown
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuList, {
+						id: listId,
+						"aria-label": ariaLabel,
+						"aria-labelledby": ariaLabel ? void 0 : triggerId,
+						shouldAutoFocus: true,
+						onSelect,
+						color,
+						textColor,
+						size,
+						dense,
+						width: "100%",
+						children: hasRows ? rows : emptyLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Menu", {
+	enumerable: true,
+	get: function() {
+		return Menu;
+	}
+});