@soroush.tech/design-system 2.0.0 → 2.1.0-alpha.1

package/dist/Menu/ContextMenu.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-yC1f5WR2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
-const require_MenuList = require("../MenuList-DsJmxNPu.cjs");
-const require_MenuItem = require("../MenuItem-DXRw3Yca.cjs");
+const require_MenuList = require("../MenuList-CSaaR3jt.cjs");
+const require_MenuItem = require("../MenuItem-Bg4iRvVe.cjs");
 const require_Menu_MenuItems = require("./MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -30,7 +30,7 @@ function ContextMenuTarget({ element, onContextMenu, onKeyDown }) {
 * `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, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, slotProps, "data-testid": dataTestid }) {
 	const dp = require_theme.useDefaultProps("ContextMenu");
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
@@ -41,7 +41,9 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 	const size = sizeProp ?? dp.size;
 	const dense = denseProp ?? dp.dense;
 	const theme = require_theme.useTheme();
-	const [point, setPoint] = (0, react.useState)(null);
+	const [openPoint, setOpenPoint] = (0, react.useState)(null);
+	const isControlled = isOpenProp !== void 0;
+	const point = isControlled ? isOpenProp && anchorPosition || null : openPoint;
 	const isOpen = point !== null;
 	const rootRef = (0, react.useRef)(null);
 	const surfaceRef = (0, react.useRef)(null);
@@ -52,11 +54,13 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		align: "start",
 		margin,
 		elevation,
-		layer
+		layer,
+		listProps: slotProps?.list
 	}), [
 		margin,
 		elevation,
-		layer
+		layer,
+		slotProps?.list
 	]);
 	require_MenuItem.useMenuPlacement({
 		isOpen,
@@ -67,27 +71,31 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		align: "start",
 		margin
 	});
+	(0, react.useLayoutEffect)(() => {
+		if (isControlled && isOpen) returnFocusRef.current = document.activeElement;
+	}, [isControlled, isOpen]);
 	const openAt = (top, left) => {
 		returnFocusRef.current = document.activeElement;
-		setPoint({
+		setOpenPoint({
 			top,
 			left
 		});
 	};
 	const close = (0, react.useCallback)((event, reason) => {
-		setPoint(null);
+		if (!isControlled) setOpenPoint(null);
 		onClose?.(event, reason);
-		if (reason !== "blur") returnFocusRef.current.focus();
-	}, [onClose]);
+		if (reason !== "blur") returnFocusRef.current?.focus();
+	}, [isControlled, onClose]);
 	const handleActivate = (0, react.useCallback)((_value, event) => close(event, "select"), [close]);
 	const handleContextMenu = (event) => {
-		target.props.onContextMenu?.(event);
+		target?.props.onContextMenu?.(event);
+		if (isControlled) return;
 		event.preventDefault();
 		openAt(event.clientY, event.clientX);
 	};
 	const handleKeyDown = (event) => {
-		target.props.onKeyDown?.(event);
-		if (!isMenuKey(event)) return;
+		target?.props.onKeyDown?.(event);
+		if (isControlled || !isMenuKey(event)) return;
 		event.preventDefault();
 		const { bottom, left } = event.target.getBoundingClientRect();
 		openAt(bottom, left);
@@ -109,7 +117,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		className,
 		"data-testid": dataTestid,
 		onBlur: handleBlur,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuTarget, {
+		children: [target && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuTarget, {
 			element: target,
 			onContextMenu: handleContextMenu,
 			onKeyDown: handleKeyDown
@@ -125,6 +133,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuActivationContext.Provider, {
 					value: handleActivate,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuList, {
+						...slotProps?.list,
 						id: listId,
 						"aria-label": ariaLabel,
 						shouldAutoFocus: true,

package/dist/Menu/ContextMenu.d.cts

@@ -1,16 +1,22 @@
-import { cn as PaperElevation, nt as Theme } from "../index-Lsm4v8fB.cjs";
-import "../index-323PrYLR.cjs";
-import { t as MenuItemValue } from "../MenuListContext-BwgQHUu9.cjs";
-import { n as MenuItemData } from "../index-DbgrItbx.cjs";
-import { n as MenuCloseReason } from "../index-Dm7vQHor.cjs";
+import { cn as PaperElevation, nt as Theme } from "../index-C6a3kDn2.cjs";
+import "../index-CJMvoc8h.cjs";
+import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.cjs";
+import { t as MenuItemValue } from "../MenuListContext-AnAxu0he.cjs";
+import { r as MenuListSlotProps } from "../index-Biqpy7c9.cjs";
+import { n as MenuItemData } from "../index-Dvx5TRET.cjs";
+import { n as MenuCloseReason } from "../index-CgyyM3ty.cjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 interface TargetProps {
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
 interface ContextMenuProps {
-  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. */
-  target: ReactElement<TargetProps>;
+  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. Optional when the app opens the menu itself, with `isOpen` and `anchorPosition`. */
+  target?: ReactElement<TargetProps>;
+  /** Whether the menu is open, when the app decides: it then opens at `anchorPosition` - from a hit test, a shortcut, a toolbar button - and asks to close through `onClose`, whatever was right-clicked. Without it, the menu opens at the target's right-click or context-menu key, as before. */
+  isOpen?: boolean;
+  /** With `isOpen`: where the menu opens - a point in the window, client coordinates, as Popover's. A changed point moves the open list. Without one, the menu stays closed. */
+  anchorPosition?: PopoverPosition;
   /** `MenuItem` rows and `MenuDivider`s. */
   children?: ReactNode;
   /** The rows as data, in place of `children`. */
@@ -40,6 +46,10 @@ interface ContextMenuProps {
   /** Names the list. */
   'aria-label'?: string;
   className?: string;
+  /** Props for a part: `list` is the `role="menu"` list - and every submenu's - for the app's `data-*`, class and `aria-*`. The menu's own `role`, `id` and name win. */
+  slotProps?: {
+    list?: MenuListSlotProps;
+  };
   'data-testid'?: string;
 }
 /**
@@ -48,5 +58,5 @@ interface ContextMenuProps {
  * `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.
  */
-declare function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+declare function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
 export { ContextMenu, ContextMenuProps };

package/dist/Menu/ContextMenu.d.mts

@@ -1,16 +1,22 @@
-import { cn as PaperElevation, nt as Theme } from "../index-CR8qkP8U.mjs";
-import "../index-1Xzj0iAs.mjs";
-import { t as MenuItemValue } from "../MenuListContext-DbnAoUdJ.mjs";
-import { n as MenuItemData } from "../index-CJYWGPVO.mjs";
-import { n as MenuCloseReason } from "../index-BAzMLTVi.mjs";
+import { cn as PaperElevation, nt as Theme } from "../index-DOH6uskj.mjs";
+import "../index-BL5Kj3Ka.mjs";
+import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.mjs";
+import { t as MenuItemValue } from "../MenuListContext-DURKFg_T.mjs";
+import { r as MenuListSlotProps } from "../index-B2XL_zZY.mjs";
+import { n as MenuItemData } from "../index-Dg0FPoms.mjs";
+import { n as MenuCloseReason } from "../index-ZyigJMkV.mjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 interface TargetProps {
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
 interface ContextMenuProps {
-  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. */
-  target: ReactElement<TargetProps>;
+  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. Optional when the app opens the menu itself, with `isOpen` and `anchorPosition`. */
+  target?: ReactElement<TargetProps>;
+  /** Whether the menu is open, when the app decides: it then opens at `anchorPosition` - from a hit test, a shortcut, a toolbar button - and asks to close through `onClose`, whatever was right-clicked. Without it, the menu opens at the target's right-click or context-menu key, as before. */
+  isOpen?: boolean;
+  /** With `isOpen`: where the menu opens - a point in the window, client coordinates, as Popover's. A changed point moves the open list. Without one, the menu stays closed. */
+  anchorPosition?: PopoverPosition;
   /** `MenuItem` rows and `MenuDivider`s. */
   children?: ReactNode;
   /** The rows as data, in place of `children`. */
@@ -40,6 +46,10 @@ interface ContextMenuProps {
   /** Names the list. */
   'aria-label'?: string;
   className?: string;
+  /** Props for a part: `list` is the `role="menu"` list - and every submenu's - for the app's `data-*`, class and `aria-*`. The menu's own `role`, `id` and name win. */
+  slotProps?: {
+    list?: MenuListSlotProps;
+  };
   'data-testid'?: string;
 }
 /**
@@ -48,5 +58,5 @@ interface ContextMenuProps {
  * `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.
  */
-declare function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+declare function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
 export { ContextMenu, ContextMenuProps };

package/dist/Menu/ContextMenu.mjs

@@ -1,9 +1,9 @@
 import { o as styled } from "../src-B-rNjHIL.mjs";
 import { n as useDefaultProps, r as useTheme } from "../theme-DyyZQFzQ.mjs";
-import { o as MenuActivationContext, t as MenuList } from "../MenuList-CGZgfBno.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-vXHGPK8g.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-D7Pvpn_K.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-kRGVRI6G.mjs";
 import { MenuItems } from "./MenuItems.mjs";
-import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Menu/ContextMenu/ContextMenu.tsx
 const ContextMenuPaper = styled(MenuPaper, {
@@ -29,7 +29,7 @@ function ContextMenuTarget({ element, onContextMenu, onKeyDown }) {
 * `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, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, slotProps, "data-testid": dataTestid }) {
 	const dp = useDefaultProps("ContextMenu");
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
@@ -40,7 +40,9 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 	const size = sizeProp ?? dp.size;
 	const dense = denseProp ?? dp.dense;
 	const theme = useTheme();
-	const [point, setPoint] = useState(null);
+	const [openPoint, setOpenPoint] = useState(null);
+	const isControlled = isOpenProp !== void 0;
+	const point = isControlled ? isOpenProp && anchorPosition || null : openPoint;
 	const isOpen = point !== null;
 	const rootRef = useRef(null);
 	const surfaceRef = useRef(null);
@@ -51,11 +53,13 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		align: "start",
 		margin,
 		elevation,
-		layer
+		layer,
+		listProps: slotProps?.list
 	}), [
 		margin,
 		elevation,
-		layer
+		layer,
+		slotProps?.list
 	]);
 	useMenuPlacement({
 		isOpen,
@@ -66,27 +70,31 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		align: "start",
 		margin
 	});
+	useLayoutEffect(() => {
+		if (isControlled && isOpen) returnFocusRef.current = document.activeElement;
+	}, [isControlled, isOpen]);
 	const openAt = (top, left) => {
 		returnFocusRef.current = document.activeElement;
-		setPoint({
+		setOpenPoint({
 			top,
 			left
 		});
 	};
 	const close = useCallback((event, reason) => {
-		setPoint(null);
+		if (!isControlled) setOpenPoint(null);
 		onClose?.(event, reason);
-		if (reason !== "blur") returnFocusRef.current.focus();
-	}, [onClose]);
+		if (reason !== "blur") returnFocusRef.current?.focus();
+	}, [isControlled, onClose]);
 	const handleActivate = useCallback((_value, event) => close(event, "select"), [close]);
 	const handleContextMenu = (event) => {
-		target.props.onContextMenu?.(event);
+		target?.props.onContextMenu?.(event);
+		if (isControlled) return;
 		event.preventDefault();
 		openAt(event.clientY, event.clientX);
 	};
 	const handleKeyDown = (event) => {
-		target.props.onKeyDown?.(event);
-		if (!isMenuKey(event)) return;
+		target?.props.onKeyDown?.(event);
+		if (isControlled || !isMenuKey(event)) return;
 		event.preventDefault();
 		const { bottom, left } = event.target.getBoundingClientRect();
 		openAt(bottom, left);
@@ -108,7 +116,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 		className,
 		"data-testid": dataTestid,
 		onBlur: handleBlur,
-		children: [/* @__PURE__ */ jsx(ContextMenuTarget, {
+		children: [target && /* @__PURE__ */ jsx(ContextMenuTarget, {
 			element: target,
 			onContextMenu: handleContextMenu,
 			onKeyDown: handleKeyDown
@@ -124,6 +132,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 				children: /* @__PURE__ */ jsx(MenuActivationContext.Provider, {
 					value: handleActivate,
 					children: /* @__PURE__ */ jsx(MenuList, {
+						...slotProps?.list,
 						id: listId,
 						"aria-label": ariaLabel,
 						shouldAutoFocus: true,

package/dist/Menu/Menu.cjs

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

package/dist/Menu/Menu.d.cts

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

package/dist/Menu/Menu.d.mts

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

package/dist/Menu/Menu.mjs

@@ -1 +1 @@
-export { t as Menu } from "../Menu-D4AIpdJv.mjs";
+export { t as Menu } from "../Menu-C_4jYHWE.mjs";

package/dist/Menu/MenuItems.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("../MenuItem-DXRw3Yca.cjs");
+const require_MenuItem = require("../MenuItem-Bg4iRvVe.cjs");
 const require_Menu_MenuDivider = require("./MenuDivider.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Menu/MenuItems/MenuItems.tsx

package/dist/Menu/MenuItems.d.cts

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

package/dist/Menu/MenuItems.d.mts

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

package/dist/Menu/MenuItems.mjs

@@ -1,4 +1,4 @@
-import { t as MenuItem } from "../MenuItem-vXHGPK8g.mjs";
+import { t as MenuItem } from "../MenuItem-kRGVRI6G.mjs";
 import { MenuDivider } from "./MenuDivider.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Menu/MenuItems/MenuItems.tsx

package/dist/Menu/MenuList.cjs

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

package/dist/Menu/MenuList.d.cts

@@ -1,36 +1,3 @@
-import { nt as Theme } from "../index-Lsm4v8fB.cjs";
-import { t as MenuItemValue } from "../MenuListContext-BwgQHUu9.cjs";
-import { KeyboardEvent, ReactNode } from "react";
-import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-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;
-export { type MenuItemValue, MenuList, MenuListProps };
+import { t as MenuItemValue } from "../MenuListContext-AnAxu0he.cjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-Biqpy7c9.cjs";
+export { type MenuItemValue, MenuList, MenuListProps, MenuListSlotProps };

package/dist/Menu/MenuList.d.mts

@@ -1,36 +1,3 @@
-import { nt as Theme } from "../index-CR8qkP8U.mjs";
-import { t as MenuItemValue } from "../MenuListContext-DbnAoUdJ.mjs";
-import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-import { KeyboardEvent, ReactNode } from "react";
-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;
-export { type MenuItemValue, MenuList, MenuListProps };
+import { t as MenuItemValue } from "../MenuListContext-DURKFg_T.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-B2XL_zZY.mjs";
+export { type MenuItemValue, MenuList, MenuListProps, MenuListSlotProps };

package/dist/Menu/MenuList.mjs

@@ -1 +1 @@
-export { t as MenuList } from "../MenuList-CGZgfBno.mjs";
+export { t as MenuList } from "../MenuList-D7Pvpn_K.mjs";

package/dist/{Menu-Bx9jaHOy.cjs → Menu-C6eIdA1J.cjs}

@@ -1,8 +1,8 @@
 const require_src = require("./src-yC1f5WR2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
-const require_MenuList = require("./MenuList-DsJmxNPu.cjs");
-const require_MenuItem = require("./MenuItem-DXRw3Yca.cjs");
+const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_MenuItem = require("./MenuItem-Bg4iRvVe.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -36,7 +36,7 @@ function MenuTrigger({ element, id, elementRef, isOpen, listId, onClick, onKeyDo
 * 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, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, slotProps, "data-testid": dataTestid }) {
 	const dp = require_theme.useDefaultProps("Menu");
 	const align = alignProp ?? dp.align ?? "start";
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
@@ -62,12 +62,14 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 		align,
 		margin,
 		elevation,
-		layer
+		layer,
+		listProps: slotProps?.list
 	}), [
 		align,
 		margin,
 		elevation,
-		layer
+		layer,
+		slotProps?.list
 	]);
 	require_MenuItem.useMenuPlacement({
 		isOpen,
@@ -145,6 +147,7 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuActivationContext.Provider, {
 					value: handleActivate,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuList, {
+						...slotProps?.list,
 						id: listId,
 						"aria-label": ariaLabel,
 						"aria-labelledby": ariaLabel ? void 0 : triggerId,

package/dist/{Menu-D4AIpdJv.mjs → Menu-C_4jYHWE.mjs}

@@ -1,8 +1,8 @@
 import { o as styled } from "./src-B-rNjHIL.mjs";
 import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
-import { o as MenuActivationContext, t as MenuList } from "./MenuList-CGZgfBno.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-vXHGPK8g.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-kRGVRI6G.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,7 +36,7 @@ function MenuTrigger({ element, id, elementRef, isOpen, listId, onClick, onKeyDo
 * 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, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, slotProps, "data-testid": dataTestid }) {
 	const dp = useDefaultProps("Menu");
 	const align = alignProp ?? dp.align ?? "start";
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
@@ -62,12 +62,14 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 		align,
 		margin,
 		elevation,
-		layer
+		layer,
+		listProps: slotProps?.list
 	}), [
 		align,
 		margin,
 		elevation,
-		layer
+		layer,
+		slotProps?.list
 	]);
 	useMenuPlacement({
 		isOpen,
@@ -145,6 +147,7 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 				children: /* @__PURE__ */ jsx(MenuActivationContext.Provider, {
 					value: handleActivate,
 					children: /* @__PURE__ */ jsx(MenuList, {
+						...slotProps?.list,
 						id: listId,
 						"aria-label": ariaLabel,
 						"aria-labelledby": ariaLabel ? void 0 : triggerId,

package/dist/Menu.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuList = require("./MenuList-DsJmxNPu.cjs");
+const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
 const require_Menu_MenuDivider = require("./Menu/MenuDivider.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 const require_Menu_ContextMenu = require("./Menu/ContextMenu.cjs");
-const require_Menu = require("./Menu-Bx9jaHOy.cjs");
+const require_Menu = require("./Menu-C6eIdA1J.cjs");
 exports.ContextMenu = require_Menu_ContextMenu.ContextMenu;
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_Menu_MenuDivider.MenuDivider;

package/dist/Menu.d.cts

@@ -1,7 +1,7 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BwgQHUu9.cjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-DbgrItbx.cjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-Dm7vQHor.cjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-AnAxu0he.cjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-Biqpy7c9.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-Dvx5TRET.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-CgyyM3ty.cjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.cjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.cjs";
-import { MenuList, MenuListProps } from "./Menu/MenuList.cjs";
-export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuProps, MenuStep, useMenuListContext };
+export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuListSlotProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.d.mts

@@ -1,7 +1,7 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-DbnAoUdJ.mjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CJYWGPVO.mjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-BAzMLTVi.mjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-DURKFg_T.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-B2XL_zZY.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-Dg0FPoms.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-ZyigJMkV.mjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.mjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.mjs";
-import { MenuList, MenuListProps } from "./Menu/MenuList.mjs";
-export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuProps, MenuStep, useMenuListContext };
+export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuListSlotProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.mjs

@@ -1,6 +1,6 @@
-import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-CGZgfBno.mjs";
+import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
 import { MenuDivider } from "./Menu/MenuDivider.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { ContextMenu } from "./Menu/ContextMenu.mjs";
-import { t as Menu } from "./Menu-D4AIpdJv.mjs";
+import { t as Menu } from "./Menu-C_4jYHWE.mjs";
 export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };