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

package/dist/MenuItem.cjs

@@ -1,149 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/MenuItem/MenuItem.tsx
-const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forward-prop").createShouldForwardProp)([
-	"color",
-	"textColor",
-	"sizeToken",
-	"selected",
-	"highlighted",
-	"disabled",
-	"dense",
-	"disableGutters",
-	"divider"
-]);
-const baseStyle = ({ theme }) => ({
-	display: "flex",
-	alignItems: "center",
-	gap: theme.space[1],
-	cursor: "pointer",
-	fontFamily: theme.fonts.body,
-	lineHeight: theme.lineHeights.base,
-	listStyle: "none",
-	userSelect: "none",
-	whiteSpace: "nowrap",
-	transition: "background-color 0.12s ease",
-	outline: "none"
-});
-const sizeVariants = ({ theme, sizeToken, dense, disableGutters }) => {
-	const s = theme.sizes[sizeToken];
-	const verticalPadding = dense ? theme.space[.5] : void 0;
-	return {
-		paddingTop: verticalPadding ?? theme.space[s.paddingTop],
-		paddingBottom: verticalPadding ?? theme.space[s.paddingBottom],
-		paddingLeft: disableGutters ? 0 : theme.space[s.paddingLeft],
-		paddingRight: disableGutters ? 0 : theme.space[s.paddingRight],
-		fontSize: theme.fontSizes[s.fontSize]
-	};
-};
-const dividerStyle = ({ theme, divider }) => divider ? {
-	borderBottomWidth: theme.borderWidths.thin,
-	borderBottomStyle: "solid",
-	borderBottomColor: (0, require_src.src_exports.get)(theme, "border.light")
-} : {};
-const interactionStyles = ({ theme, color, textColor, selected, highlighted, disabled }) => {
-	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
-	const hoverBg = `${main}1F`;
-	const selectedBg = `${main}29`;
-	const activeSelectedBg = `${main}3D`;
-	if (disabled) return {
-		color: (0, require_src.src_exports.get)(theme, "text.disabled"),
-		cursor: "not-allowed",
-		pointerEvents: "none"
-	};
-	const baseColor = textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : main;
-	return {
-		color: selected ? main : baseColor,
-		backgroundColor: selected ? highlighted ? activeSelectedBg : selectedBg : highlighted ? hoverBg : "transparent",
-		"&:hover": { backgroundColor: selected ? activeSelectedBg : hoverBg }
-	};
-};
-const MenuItemRoot = require_src.styled("li", {
-	name: "MenuItem",
-	label: "MenuItem",
-	shouldForwardProp
-})(baseStyle, sizeVariants, dividerStyle, interactionStyles);
-const CheckSlot = require_src.styled("span", {
-	name: "MenuItem",
-	slot: "check",
-	label: "MenuItemCheck"
-})({
-	display: "inline-flex",
-	width: "1.125rem",
-	flexShrink: 0
-});
-function isKeyboardFocus(element) {
-	try {
-		return element.matches(":focus-visible");
-	} catch {
-		return false;
-	}
-}
-/**
-* @description A single option row for `Select`'s listbox. Rendered as a semantic
-* `<li role="option">` (override via `as`). Selection/highlight/density props are
-* injected by `Select`; used on its own it renders a static, styled row.
-*/
-function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor, size: sizeProp, dense = false, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, id, className, "data-testid": dataTestid }) {
-	const theme = require_theme.useTheme();
-	const color = colorProp ?? require_themeDefault.themeDefault(theme, "color", "primary");
-	const size = sizeProp ?? require_themeDefault.themeDefault(theme, "size", "md");
-	const rootRef = (0, react.useRef)(null);
-	const [isFocusVisible, setIsFocusVisible] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		if (autoFocus) rootRef.current?.focus();
-	}, [autoFocus]);
-	const handleClick = () => {
-		if (!disabled) onSelect?.(value);
-	};
-	const handleMouseDown = (event) => {
-		event.preventDefault();
-	};
-	const handleFocus = (event) => {
-		if (focusVisibleClassName && isKeyboardFocus(event.currentTarget)) setIsFocusVisible(true);
-	};
-	const handleBlur = () => {
-		setIsFocusVisible(false);
-	};
-	const rootClassName = [className, isFocusVisible ? focusVisibleClassName : void 0].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuItemRoot, {
-		as,
-		ref: rootRef,
-		id,
-		role: "option",
-		tabIndex: -1,
-		"aria-selected": selected,
-		"aria-disabled": disabled || void 0,
-		"data-value": value,
-		color,
-		textColor,
-		sizeToken: size,
-		selected,
-		highlighted,
-		disabled,
-		dense,
-		disableGutters,
-		divider,
-		className: rootClassName,
-		"data-testid": dataTestid,
-		onMouseDown: handleMouseDown,
-		onClick: handleClick,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-		children: [multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckSlot, {
-			"aria-hidden": true,
-			children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-				name: "check",
-				size: "1.125rem",
-				color: "inherit"
-			})
-		}), children]
-	});
-}
-//#endregion
-exports.MenuItem = MenuItem;
+const require_MenuItem = require("./MenuItem-CfdN4axw.cjs");
+exports.MenuItem = require_MenuItem.MenuItem;

package/dist/MenuItem.d.cts

@@ -1,52 +1,2 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { ElementType, ReactNode } from "react";
-//#region src/MenuItem/MenuItem.d.ts
-type MenuItemColor = keyof Theme['palette'];
-type MenuItemSize = keyof Theme['sizes'];
-type MenuItemTextColor = keyof Theme['text'];
-interface MenuItemProps {
-  /** The value this option represents - reported to `Select`'s `onChange`. */
-  value: string | number;
-  /** The option label. */
-  children: ReactNode;
-  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
-  as?: ElementType;
-  /** Disables the option - it cannot be highlighted or selected. */
-  disabled?: boolean;
-  /** Marks the option as the current selection. Injected by `Select`. */
-  selected?: boolean;
-  /** Marks the option as the keyboard-highlighted row. Injected by `Select`. */
-  highlighted?: boolean;
-  /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
-  multiple?: boolean;
-  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
-  color?: MenuItemColor;
-  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
-  textColor?: MenuItemTextColor;
-  /** Density token - resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
-  size?: MenuItemSize;
-  /** Compact vertical padding, independent of `size`. Default: `false`. */
-  dense?: boolean;
-  /** Remove the left and right padding. Default: `false`. */
-  disableGutters?: boolean;
-  /** Add a 1px bottom border to separate the row. Default: `false`. */
-  divider?: boolean;
-  /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
-  autoFocus?: boolean;
-  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
-  focusVisibleClassName?: string;
-  /** Fired with `value` when the option is chosen. Injected by `Select`. */
-  onSelect?: (value: string | number) => void;
-  id?: string;
-  className?: string;
-  'data-testid'?: string;
-}
-/**
- * @description A single option row for `Select`'s listbox. Rendered as a semantic
- * `<li role="option">` (override via `as`). Selection/highlight/density props are
- * injected by `Select`; used on its own it renders a static, styled row.
- */
-declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor, size: sizeProp, dense, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
-//#endregion
-export { MenuItem, MenuItemColor, MenuItemProps, MenuItemSize, MenuItemTextColor };
+import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-DCmH5f9I.cjs";
+export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };

package/dist/MenuItem.d.mts

@@ -1,52 +1,2 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { ElementType, ReactNode } from "react";
-//#region src/MenuItem/MenuItem.d.ts
-type MenuItemColor = keyof Theme['palette'];
-type MenuItemSize = keyof Theme['sizes'];
-type MenuItemTextColor = keyof Theme['text'];
-interface MenuItemProps {
-  /** The value this option represents - reported to `Select`'s `onChange`. */
-  value: string | number;
-  /** The option label. */
-  children: ReactNode;
-  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
-  as?: ElementType;
-  /** Disables the option - it cannot be highlighted or selected. */
-  disabled?: boolean;
-  /** Marks the option as the current selection. Injected by `Select`. */
-  selected?: boolean;
-  /** Marks the option as the keyboard-highlighted row. Injected by `Select`. */
-  highlighted?: boolean;
-  /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
-  multiple?: boolean;
-  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
-  color?: MenuItemColor;
-  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
-  textColor?: MenuItemTextColor;
-  /** Density token - resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
-  size?: MenuItemSize;
-  /** Compact vertical padding, independent of `size`. Default: `false`. */
-  dense?: boolean;
-  /** Remove the left and right padding. Default: `false`. */
-  disableGutters?: boolean;
-  /** Add a 1px bottom border to separate the row. Default: `false`. */
-  divider?: boolean;
-  /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
-  autoFocus?: boolean;
-  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
-  focusVisibleClassName?: string;
-  /** Fired with `value` when the option is chosen. Injected by `Select`. */
-  onSelect?: (value: string | number) => void;
-  id?: string;
-  className?: string;
-  'data-testid'?: string;
-}
-/**
- * @description A single option row for `Select`'s listbox. Rendered as a semantic
- * `<li role="option">` (override via `as`). Selection/highlight/density props are
- * injected by `Select`; used on its own it renders a static, styled row.
- */
-declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor, size: sizeProp, dense, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
-//#endregion
-export { MenuItem, MenuItemColor, MenuItemProps, MenuItemSize, MenuItemTextColor };
+import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-Cj5Rhh_9.mjs";
+export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };

package/dist/MenuItem.mjs

@@ -1,148 +1,2 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
-import { t as Icon } from "./Icon-CH3asUJu.mjs";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/MenuItem/MenuItem.tsx
-const shouldForwardProp = createShouldForwardProp([
-	"color",
-	"textColor",
-	"sizeToken",
-	"selected",
-	"highlighted",
-	"disabled",
-	"dense",
-	"disableGutters",
-	"divider"
-]);
-const baseStyle = ({ theme }) => ({
-	display: "flex",
-	alignItems: "center",
-	gap: theme.space[1],
-	cursor: "pointer",
-	fontFamily: theme.fonts.body,
-	lineHeight: theme.lineHeights.base,
-	listStyle: "none",
-	userSelect: "none",
-	whiteSpace: "nowrap",
-	transition: "background-color 0.12s ease",
-	outline: "none"
-});
-const sizeVariants = ({ theme, sizeToken, dense, disableGutters }) => {
-	const s = theme.sizes[sizeToken];
-	const verticalPadding = dense ? theme.space[.5] : void 0;
-	return {
-		paddingTop: verticalPadding ?? theme.space[s.paddingTop],
-		paddingBottom: verticalPadding ?? theme.space[s.paddingBottom],
-		paddingLeft: disableGutters ? 0 : theme.space[s.paddingLeft],
-		paddingRight: disableGutters ? 0 : theme.space[s.paddingRight],
-		fontSize: theme.fontSizes[s.fontSize]
-	};
-};
-const dividerStyle = ({ theme, divider }) => divider ? {
-	borderBottomWidth: theme.borderWidths.thin,
-	borderBottomStyle: "solid",
-	borderBottomColor: (0, src_exports.get)(theme, "border.light")
-} : {};
-const interactionStyles = ({ theme, color, textColor, selected, highlighted, disabled }) => {
-	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
-	const hoverBg = `${main}1F`;
-	const selectedBg = `${main}29`;
-	const activeSelectedBg = `${main}3D`;
-	if (disabled) return {
-		color: (0, src_exports.get)(theme, "text.disabled"),
-		cursor: "not-allowed",
-		pointerEvents: "none"
-	};
-	const baseColor = textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : main;
-	return {
-		color: selected ? main : baseColor,
-		backgroundColor: selected ? highlighted ? activeSelectedBg : selectedBg : highlighted ? hoverBg : "transparent",
-		"&:hover": { backgroundColor: selected ? activeSelectedBg : hoverBg }
-	};
-};
-const MenuItemRoot = styled("li", {
-	name: "MenuItem",
-	label: "MenuItem",
-	shouldForwardProp
-})(baseStyle, sizeVariants, dividerStyle, interactionStyles);
-const CheckSlot = styled("span", {
-	name: "MenuItem",
-	slot: "check",
-	label: "MenuItemCheck"
-})({
-	display: "inline-flex",
-	width: "1.125rem",
-	flexShrink: 0
-});
-function isKeyboardFocus(element) {
-	try {
-		return element.matches(":focus-visible");
-	} catch {
-		return false;
-	}
-}
-/**
-* @description A single option row for `Select`'s listbox. Rendered as a semantic
-* `<li role="option">` (override via `as`). Selection/highlight/density props are
-* injected by `Select`; used on its own it renders a static, styled row.
-*/
-function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor, size: sizeProp, dense = false, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, id, className, "data-testid": dataTestid }) {
-	const theme = useTheme();
-	const color = colorProp ?? themeDefault(theme, "color", "primary");
-	const size = sizeProp ?? themeDefault(theme, "size", "md");
-	const rootRef = useRef(null);
-	const [isFocusVisible, setIsFocusVisible] = useState(false);
-	useEffect(() => {
-		if (autoFocus) rootRef.current?.focus();
-	}, [autoFocus]);
-	const handleClick = () => {
-		if (!disabled) onSelect?.(value);
-	};
-	const handleMouseDown = (event) => {
-		event.preventDefault();
-	};
-	const handleFocus = (event) => {
-		if (focusVisibleClassName && isKeyboardFocus(event.currentTarget)) setIsFocusVisible(true);
-	};
-	const handleBlur = () => {
-		setIsFocusVisible(false);
-	};
-	const rootClassName = [className, isFocusVisible ? focusVisibleClassName : void 0].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ jsxs(MenuItemRoot, {
-		as,
-		ref: rootRef,
-		id,
-		role: "option",
-		tabIndex: -1,
-		"aria-selected": selected,
-		"aria-disabled": disabled || void 0,
-		"data-value": value,
-		color,
-		textColor,
-		sizeToken: size,
-		selected,
-		highlighted,
-		disabled,
-		dense,
-		disableGutters,
-		divider,
-		className: rootClassName,
-		"data-testid": dataTestid,
-		onMouseDown: handleMouseDown,
-		onClick: handleClick,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-		children: [multiple && /* @__PURE__ */ jsx(CheckSlot, {
-			"aria-hidden": true,
-			children: selected && /* @__PURE__ */ jsx(Icon, {
-				name: "check",
-				size: "1.125rem",
-				color: "inherit"
-			})
-		}), children]
-	});
-}
-//#endregion
+import { t as MenuItem } from "./MenuItem-BR7ingQx.mjs";
 export { MenuItem };

package/dist/MenuList-B7msJ1IG.mjs

@@ -0,0 +1,187 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/MenuActivationContext.ts
+/**
+* Set by a `Menu` around its lists: told when any row anywhere in the menu is chosen, with
+* or without a `value`, so the whole menu can close. Internal - not exported from the
+* subpath.
+*/
+const MenuActivationContext = createContext(null);
+//#endregion
+//#region src/Menu/MenuListContext.ts
+/**
+* Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+* (`menuitem`); without it, the row is `Select`'s `option`.
+*/
+const MenuListContext = createContext(null);
+const useMenuListContext = () => useContext(MenuListContext);
+//#endregion
+//#region src/Menu/MenuList/utils/getOwnRows.ts
+const ROW_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* The rows that belong to `list` itself, in document order. A nested submenu is a
+* `role="menu"` of its own inside the list, so a row counts only when its nearest
+* `role="menu"` is `list` - no per-list index state is kept anywhere.
+*/
+function getOwnRows(list) {
+	return Array.from(list.querySelectorAll(ROW_SELECTOR)).filter((row) => row.closest("[role=\"menu\"]") === list);
+}
+/** Whether a row can take focus and be chosen. */
+function isRowEnabled(row) {
+	return row.getAttribute("aria-disabled") !== "true";
+}
+//#endregion
+//#region src/Menu/MenuList/utils/getNextRow.ts
+/**
+* The enabled row a key moves to from `current` (which may be absent from `rows`, as when
+* focus is still on the list itself). Disabled rows are skipped; `shouldWrap` carries
+* `next` past the last row to the first and `previous` before the first to the last.
+*/
+function getNextRow(rows, current, step, shouldWrap) {
+	const enabled = rows.filter(isRowEnabled);
+	if (step === "first") return enabled[0];
+	if (step === "last") return enabled.at(-1);
+	const index = enabled.indexOf(current);
+	if (index === -1) return step === "next" ? enabled[0] : enabled.at(-1);
+	const target = index + (step === "next" ? 1 : -1);
+	if (target >= 0 && target < enabled.length) return enabled[target];
+	if (!shouldWrap) return void 0;
+	return target < 0 ? enabled.at(-1) : enabled[0];
+}
+//#endregion
+//#region src/Menu/MenuList/utils/findRowByText.ts
+/** A row's label text, without its icon, shortcut or note. */
+function getRowText(row) {
+	return (row.querySelector("[data-menu-label]") ?? row).textContent.trim().toLowerCase();
+}
+/**
+* The row type-ahead moves to. One key typed again and again (`r`, `r`, `r`) cycles
+* through the rows starting with it; distinct keys typed together (`re`) build a prefix,
+* matched from the current row onward so typing on stays where it is while it matches.
+*/
+function findRowByText(rows, current, typed) {
+	const enabled = rows.filter(isRowEnabled);
+	const query = typed.toLowerCase();
+	const isRepeating = [...query].every((key) => key === query[0]);
+	const start = enabled.indexOf(current);
+	const from = isRepeating ? start + 1 : Math.max(start, 0);
+	const ordered = [...enabled.slice(from), ...enabled.slice(0, from)];
+	const prefix = isRepeating ? query[0] : query;
+	return ordered.find((row) => getRowText(row).startsWith(prefix));
+}
+//#endregion
+//#region src/Menu/MenuList/MenuList.tsx
+const STEP_BY_KEY = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	Home: "first",
+	End: "last"
+};
+const TYPEAHEAD_TIMEOUT = 500;
+const shouldForwardProp = createShouldForwardProp([...props]);
+const layoutWithoutSize = (styleProps) => (0, src_exports.layout)({
+	...styleProps,
+	size: void 0
+});
+const MenuListRoot = styled("ul", {
+	name: "MenuList",
+	label: "MenuList",
+	shouldForwardProp,
+	systemProps: [src_exports.space, layoutWithoutSize]
+})(({ theme }) => ({
+	listStyle: "none",
+	margin: 0,
+	paddingLeft: 0,
+	paddingRight: 0,
+	paddingTop: theme.space[.5],
+	paddingBottom: theme.space[.5],
+	outline: "none",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${theme.palette[themeDefault(theme, "color", "primary")].main}`,
+		outlineOffset: `-${theme.borderWidths.base}`
+	}
+}));
+const isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+/**
+* @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.
+*/
+function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus = false, color, textColor, size, dense, onKeyDown, ...rest }) {
+	const listRef = useRef(null);
+	const typed = useRef({
+		keys: "",
+		time: 0
+	});
+	const onMenuActivate = useContext(MenuActivationContext);
+	const parent = useMenuListContext();
+	const dp = useDefaultProps("MenuList");
+	const shouldWrap = shouldWrapProp ?? dp.shouldWrap ?? true;
+	const rowColor = color ?? parent?.color ?? dp.color;
+	const rowTextColor = textColor ?? parent?.textColor ?? dp.textColor;
+	const rowSize = size ?? parent?.size ?? dp.size;
+	const rowDense = dense ?? parent?.dense ?? dp.dense;
+	useEffect(() => {
+		const list = listRef.current;
+		if (!shouldAutoFocus || !list) return;
+		const rows = getOwnRows(list).filter(isRowEnabled);
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+	}, [shouldAutoFocus]);
+	const context = useMemo(() => ({
+		onActivate: (value, event) => {
+			if (value !== void 0) onSelect?.(value);
+			if (parent) parent.onActivate(value, event);
+			else onMenuActivate?.(value, event);
+		},
+		color: rowColor,
+		textColor: rowTextColor,
+		size: rowSize,
+		dense: rowDense
+	}), [
+		onSelect,
+		onMenuActivate,
+		parent,
+		rowColor,
+		rowTextColor,
+		rowSize,
+		rowDense
+	]);
+	const handleKeyDown = (event) => {
+		const list = event.currentTarget;
+		if (event.target.closest("[role=\"menu\"]") !== list) return;
+		const rows = getOwnRows(list);
+		const current = list.ownerDocument.activeElement;
+		const step = STEP_BY_KEY[event.key];
+		let target;
+		if (step) target = getNextRow(rows, current, step, shouldWrap);
+		else if (isPrintableKey(event)) {
+			const now = Date.now();
+			const isFresh = now - typed.current.time > TYPEAHEAD_TIMEOUT;
+			typed.current = {
+				keys: (isFresh ? "" : typed.current.keys) + event.key,
+				time: now
+			};
+			target = findRowByText(rows, current, typed.current.keys);
+		}
+		if (step || target) event.preventDefault();
+		target?.focus();
+		onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(MenuListContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(MenuListRoot, {
+			...rest,
+			ref: listRef,
+			role: "menu",
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			children
+		})
+	});
+}
+//#endregion
+export { useMenuListContext as a, MenuListContext as i, getNextRow as n, MenuActivationContext as o, getOwnRows as r, MenuList as t };