@soroush.tech/design-system 2.1.0-alpha.0 → 2.1.0-alpha.2

package/dist/Menu/ContextMenu.d.cts

@@ -1,16 +1,22 @@
-import { cn as PaperElevation, nt as Theme } from "../index-DvVQLBZc.cjs";
-import "../index-6zQ2VUlM.cjs";
-import { t as MenuItemValue } from "../MenuListContext-DJ_qJ1Uo.cjs";
-import { n as MenuItemData } from "../index-BlHFb150.cjs";
-import { n as MenuCloseReason } from "../index-Ba39mhDf.cjs";
+import { cn as PaperElevation, nt as Theme } from "../index-CK-uaK5U.cjs";
+import "../index-fwRQcB91.cjs";
+import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.cjs";
+import { t as MenuItemValue } from "../MenuListContext-BkQzp2DA.cjs";
+import { r as MenuListSlotProps } from "../index-DiQHPHUv.cjs";
+import { n as MenuItemData } from "../index-CykbbqeN.cjs";
+import { n as MenuCloseReason } from "../index-DA3M2w5w.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-BWiDilH8.mjs";
-import "../index-B1qv6yGM.mjs";
-import { t as MenuItemValue } from "../MenuListContext-DiZAVDCb.mjs";
-import { n as MenuItemData } from "../index-CW0DW6Aq.mjs";
-import { n as MenuCloseReason } from "../index-DhzjNAzv.mjs";
+import { cn as PaperElevation, nt as Theme } from "../index-B-1sp9oV.mjs";
+import "../index-C_n4ZPpQ.mjs";
+import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.mjs";
+import { t as MenuItemValue } from "../MenuListContext-BN1VV12-.mjs";
+import { r as MenuListSlotProps } from "../index-DOimZ1Wo.mjs";
+import { n as MenuItemData } from "../index-CRbfhyQ6.mjs";
+import { n as MenuCloseReason } from "../index-CPmemva9.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-DdPzSWZY.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-hJeCsQZX.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-BfJF32J2.cjs");
+const require_Menu = require("../Menu-DOOK_gM9.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-Ba39mhDf.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-DA3M2w5w.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-DhzjNAzv.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-CPmemva9.mjs";
 export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.mjs

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

package/dist/Menu/MenuItems.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("../MenuItem-CvCMGXuL.cjs");
+const require_MenuItem = require("../MenuItem-BWm8DC-S.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-BlHFb150.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CykbbqeN.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-CW0DW6Aq.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CRbfhyQ6.mjs";
 export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.mjs

@@ -1,4 +1,4 @@
-import { t as MenuItem } from "../MenuItem-DdPzSWZY.mjs";
+import { t as MenuItem } from "../MenuItem-hJeCsQZX.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-DvVQLBZc.cjs";
-import { t as MenuItemValue } from "../MenuListContext-DJ_qJ1Uo.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-BkQzp2DA.cjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-DiQHPHUv.cjs";
+export { type MenuItemValue, MenuList, MenuListProps, MenuListSlotProps };

package/dist/Menu/MenuList.d.mts

@@ -1,36 +1,3 @@
-import { nt as Theme } from "../index-BWiDilH8.mjs";
-import { t as MenuItemValue } from "../MenuListContext-DiZAVDCb.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-BN1VV12-.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-DOimZ1Wo.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-CX9V2DAu.mjs → Menu-Cv887y7O.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-DdPzSWZY.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-hJeCsQZX.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-BfJF32J2.cjs → Menu-DOOK_gM9.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-CvCMGXuL.cjs");
+const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_MenuItem = require("./MenuItem-BWm8DC-S.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.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-BfJF32J2.cjs");
+const require_Menu = require("./Menu-DOOK_gM9.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-DJ_qJ1Uo.cjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-BlHFb150.cjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-Ba39mhDf.cjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BkQzp2DA.cjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-DiQHPHUv.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CykbbqeN.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DA3M2w5w.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-DiZAVDCb.mjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CW0DW6Aq.mjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DhzjNAzv.mjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BN1VV12-.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-DOimZ1Wo.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CRbfhyQ6.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-CPmemva9.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-CX9V2DAu.mjs";
+import { t as Menu } from "./Menu-Cv887y7O.mjs";
 export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };

package/dist/{MenuItem-CvCMGXuL.cjs → MenuItem-BWm8DC-S.cjs}

@@ -5,7 +5,8 @@ const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
 const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
-const require_MenuList = require("./MenuList-DsJmxNPu.cjs");
+const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -135,7 +136,7 @@ function useMenuPlacement({ isOpen, anchorRef, surfaceRef, placement, align, mar
 */
 function Submenu({ anchorRef, listId, labelledBy, children }) {
 	const menu = useMenuContext();
-	const { align, margin, elevation, layer } = menu;
+	const { align, margin, elevation, layer, listProps } = menu;
 	const surfaceRef = (0, react.useRef)(null);
 	const isFlipped = useMenuPlacement({
 		isOpen: true,
@@ -163,6 +164,7 @@ function Submenu({ anchorRef, listId, labelledBy, children }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContext.Provider, {
 			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuList, {
+				...listProps,
 				id: listId,
 				"aria-labelledby": labelledBy,
 				width: "100%",
@@ -413,10 +415,14 @@ const getRowAria = (state) => ({
 	"aria-expanded": state.hasSubmenu ? state.isSubmenuOpen : void 0,
 	"aria-controls": state.isSubmenuOpen ? state.submenuId : void 0,
 	"aria-checked": state.role === "menuitem" ? void 0 : state.selected,
-	"aria-keyshortcuts": state.keyShortcuts ?? (typeof state.shortcut === "string" ? state.shortcut : void 0),
-	"aria-describedby": state.note ? state.noteId : void 0
+	"aria-keyshortcuts": state.keyShortcuts ?? (typeof state.shortcut === "string" ? state.shortcut : void 0)
 });
 const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
+const getTick = (role, selected) => role !== "menuitem" && selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+	name: "check",
+	size: "sm",
+	color: "inherit"
+}) : null;
 /**
 * @description A row of a list. Inside a `MenuList` it is a menu row - a `menuitem`
 * (or `menuitemradio` / `menuitemcheckbox`) with a leading icon column, its label and a
@@ -435,7 +441,6 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 	}, menu);
 	const rootRef = (0, react.useRef)(null);
 	const [isFocusVisible, setIsFocusVisible] = (0, react.useState)(false);
-	const noteId = (0, react.useId)();
 	const fallbackId = (0, react.useId)();
 	const hasSubmenu = isMenu && submenu !== void 0;
 	const { isOpen: isSubmenuOpen, entryRef, listId: submenuId, handleRowFocus, handleRowKeyDown, handleEntryKeyDown, handleEntryBlur } = useSubmenu(rootRef, hasSubmenu && !disabled);
@@ -511,16 +516,13 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 			})
 		}), children]
 	});
-	const tick = role !== "menuitem" && selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-		name: "check",
-		size: "sm",
-		color: "inherit"
-	}) : null;
 	const rowId = id ?? fallbackId;
 	const hasSecondaryAction = secondaryAction != null;
+	const hasNote = Boolean(note);
+	const isEntry = hasSubmenu || hasSecondaryAction || hasNote;
 	const row = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuItemRoot, {
 		...rootProps,
-		as: hasSubmenu || hasSecondaryAction ? "div" : as,
+		as: isEntry ? "div" : as,
 		id: rowId,
 		role,
 		...getRowAria({
@@ -530,18 +532,15 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 			isSubmenuOpen,
 			submenuId,
 			shortcut,
-			keyShortcuts,
-			note,
-			noteId
+			keyShortcuts
 		}),
-		title: note,
 		onKeyDown: handleKeyDown,
 		onKeyUp: handleKeyUp,
 		onPointerMove: handlePointerMove,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIconSlot, {
 				"aria-hidden": true,
-				children: startIcon ?? tick
+				children: startIcon ?? getTick(role, selected)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelSlot, {
 				"data-menu-label": true,
@@ -558,19 +557,23 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 					size: "sm",
 					color: "inherit"
 				})
-			}),
-			note && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				id: noteId,
-				hidden: true,
-				children: note
 			})
 		]
 	});
-	if (!hasSubmenu && !hasSecondaryAction) return row;
+	const noted = hasNote ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		title: note,
+		placement: "right",
+		isInteractive: false,
+		shouldDescribeChild: true,
+		isDescriptionPersistent: true,
+		shouldWrapDisabledChild: false,
+		children: row
+	}) : row;
+	if (!isEntry) return row;
 	if (!hasSubmenu) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EntrySlot, {
 		role: "none",
-		hasSecondaryAction: true,
-		children: [row, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, {
+		hasSecondaryAction,
+		children: [noted, hasSecondaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, {
 			"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 			children: secondaryAction
 		})]
@@ -583,7 +586,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 		onKeyDown: handleEntryKeyDown,
 		onBlur: handleEntryBlur,
 		children: [
-			row,
+			noted,
 			hasSecondaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, {
 				"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 				children: secondaryAction