@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/Menu/ContextMenu.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_MenuList = require("../MenuList-D4imLXAa.cjs");
-const require_MenuItem = require("../MenuItem-BTP7Ijwi.cjs");
+const require_theme = require("../theme-DzfwuzMZ.cjs");
+const require_MenuList = require("../MenuList-BBAYeUvD.cjs");
+const require_MenuItem = require("../MenuItem-EJ4u73f0.cjs");
 const require_Menu_MenuItems = require("./MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -30,11 +30,12 @@ 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, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+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 }) {
 	const dp = require_theme.useDefaultProps("ContextMenu");
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
 	const layer = layerProp ?? dp.layer ?? "modal";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const color = colorProp ?? dp.color;
 	const textColor = textColorProp ?? dp.textColor;
 	const size = sizeProp ?? dp.size;
@@ -117,6 +118,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 			elevation,
 			layer,
 			margin,
+			borderRadius,
 			onKeyDown: handleSurfaceKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuContext.Provider, {
 				value: menuContext,

package/dist/Menu/ContextMenu.d.cts

@@ -1,8 +1,8 @@
-import { Gt as PaperElevation, W as Theme } from "../index-DJ0f69wh.cjs";
-import "../index-BxVTIMnB.cjs";
-import { t as MenuItemValue } from "../MenuListContext-DKUOhNyw.cjs";
-import { n as MenuItemData } from "../index-CknoXDLQ.cjs";
-import { n as MenuCloseReason } from "../index-DWjz5ZzG.cjs";
+import { cn as PaperElevation, nt as Theme } from "../index-XN4-ZqTB.cjs";
+import "../index-x3WC9ViD.cjs";
+import { t as MenuItemValue } from "../MenuListContext-BrCKLgKZ.cjs";
+import { n as MenuItemData } from "../index-CO-XxjiZ.cjs";
+import { n as MenuCloseReason } from "../index-fi-W3MOz.cjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 //#region src/Menu/ContextMenu/ContextMenu.d.ts
 interface TargetProps {
@@ -23,6 +23,8 @@ interface ContextMenuProps {
   /** The least room between the list and the window's edge - a `theme.space` key. Default: `2`. */
   marginThreshold?: keyof Theme['space'];
   /** Shadow depth of the surface. Default: `8`. */
+  /** Corner radius of the list, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
   elevation?: PaperElevation;
   /** Stacking layer from `theme.zOrder`. Default: `'modal'`. */
   layer?: keyof Theme['zOrder'];
@@ -47,6 +49,6 @@ 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, 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, 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;
 //#endregion
 export { ContextMenu, ContextMenuProps };

package/dist/Menu/ContextMenu.d.mts

@@ -1,8 +1,8 @@
-import { Gt as PaperElevation, W as Theme } from "../index-CJhK7JND.mjs";
-import "../index-DaIIo5QU.mjs";
-import { t as MenuItemValue } from "../MenuListContext-x-7lH4CH.mjs";
-import { n as MenuItemData } from "../index-BkzZxHVj.mjs";
-import { n as MenuCloseReason } from "../index-DGnXJwLj.mjs";
+import { cn as PaperElevation, nt as Theme } from "../index-CRQ7XLri.mjs";
+import "../index-fPRELf0V.mjs";
+import { t as MenuItemValue } from "../MenuListContext-BWL5fM_L.mjs";
+import { n as MenuItemData } from "../index-CRn4fWwA.mjs";
+import { n as MenuCloseReason } from "../index-lGpLM144.mjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 //#region src/Menu/ContextMenu/ContextMenu.d.ts
 interface TargetProps {
@@ -23,6 +23,8 @@ interface ContextMenuProps {
   /** The least room between the list and the window's edge - a `theme.space` key. Default: `2`. */
   marginThreshold?: keyof Theme['space'];
   /** Shadow depth of the surface. Default: `8`. */
+  /** Corner radius of the list, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
   elevation?: PaperElevation;
   /** Stacking layer from `theme.zOrder`. Default: `'modal'`. */
   layer?: keyof Theme['zOrder'];
@@ -47,6 +49,6 @@ 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, 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, 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;
 //#endregion
 export { ContextMenu, ContextMenuProps };

package/dist/Menu/ContextMenu.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps, r as useTheme } from "../theme-Z9_QludW.mjs";
-import { o as MenuActivationContext, t as MenuList } from "../MenuList-B7msJ1IG.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-DUn4IZKK.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-oBfFhJm9.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-Cz3cupC3.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-C21eR7d6.mjs";
 import { MenuItems } from "./MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,11 +29,12 @@ 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, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+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 }) {
 	const dp = useDefaultProps("ContextMenu");
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
 	const layer = layerProp ?? dp.layer ?? "modal";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const color = colorProp ?? dp.color;
 	const textColor = textColorProp ?? dp.textColor;
 	const size = sizeProp ?? dp.size;
@@ -116,6 +117,7 @@ function ContextMenu({ target, children, items, onClose, onSelect, marginThresho
 			elevation,
 			layer,
 			margin,
+			borderRadius,
 			onKeyDown: handleSurfaceKeyDown,
 			children: /* @__PURE__ */ jsx(MenuContext.Provider, {
 				value: menuContext,

package/dist/Menu/Menu.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Menu = require("../Menu-Cgg-sX4W.cjs");
+const require_Menu = require("../Menu-DXLjR9ga.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-DWjz5ZzG.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-fi-W3MOz.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-DGnXJwLj.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-lGpLM144.mjs";
 export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.mjs

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

package/dist/Menu/MenuItems.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("../MenuItem-BTP7Ijwi.cjs");
+const require_MenuItem = require("../MenuItem-EJ4u73f0.cjs");
 const require_Menu_MenuDivider = require("./MenuDivider.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region 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-CknoXDLQ.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CO-XxjiZ.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-BkzZxHVj.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CRn4fWwA.mjs";
 export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.mjs

@@ -1,4 +1,4 @@
-import { t as MenuItem } from "../MenuItem-DUn4IZKK.mjs";
+import { t as MenuItem } from "../MenuItem-C21eR7d6.mjs";
 import { MenuDivider } from "./MenuDivider.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region 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-D4imLXAa.cjs");
+const require_MenuList = require("../MenuList-BBAYeUvD.cjs");
 exports.MenuList = require_MenuList.MenuList;

package/dist/Menu/MenuList.d.cts

@@ -1,5 +1,5 @@
-import { W as Theme } from "../index-DJ0f69wh.cjs";
-import { t as MenuItemValue } from "../MenuListContext-DKUOhNyw.cjs";
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { t as MenuItemValue } from "../MenuListContext-BrCKLgKZ.cjs";
 import { KeyboardEvent, ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Menu/MenuList/MenuList.d.ts

package/dist/Menu/MenuList.d.mts

@@ -1,5 +1,5 @@
-import { W as Theme } from "../index-CJhK7JND.mjs";
-import { t as MenuItemValue } from "../MenuListContext-x-7lH4CH.mjs";
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { t as MenuItemValue } from "../MenuListContext-BWL5fM_L.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { KeyboardEvent, ReactNode } from "react";
 //#region src/Menu/MenuList/MenuList.d.ts

package/dist/Menu/MenuList.mjs

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

package/dist/{Menu-CrzHc_cn.mjs → Menu-CnG4ikZd.mjs}

@@ -1,8 +1,8 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
-import { o as MenuActivationContext, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-DUn4IZKK.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-Cz3cupC3.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-C21eR7d6.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,12 +37,13 @@ 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, 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, "data-testid": dataTestid }) {
 	const dp = useDefaultProps("Menu");
 	const align = alignProp ?? dp.align ?? "start";
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
 	const layer = layerProp ?? dp.layer ?? "modal";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const color = colorProp ?? dp.color;
 	const textColor = textColorProp ?? dp.textColor;
 	const size = sizeProp ?? dp.size;
@@ -138,6 +139,7 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 			elevation,
 			layer,
 			margin,
+			borderRadius,
 			onKeyDown: handleSurfaceKeyDown,
 			children: /* @__PURE__ */ jsx(MenuContext.Provider, {
 				value: menuContext,

package/dist/{Menu-Cgg-sX4W.cjs → Menu-DXLjR9ga.cjs}

@@ -1,8 +1,8 @@
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
-const require_MenuList = require("./MenuList-D4imLXAa.cjs");
-const require_MenuItem = require("./MenuItem-BTP7Ijwi.cjs");
+const require_MenuList = require("./MenuList-BBAYeUvD.cjs");
+const require_MenuItem = require("./MenuItem-EJ4u73f0.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -37,12 +37,13 @@ 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, 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, "data-testid": dataTestid }) {
 	const dp = require_theme.useDefaultProps("Menu");
 	const align = alignProp ?? dp.align ?? "start";
 	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
 	const elevation = elevationProp ?? dp.elevation ?? 8;
 	const layer = layerProp ?? dp.layer ?? "modal";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const color = colorProp ?? dp.color;
 	const textColor = textColorProp ?? dp.textColor;
 	const size = sizeProp ?? dp.size;
@@ -138,6 +139,7 @@ function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen = fals
 			elevation,
 			layer,
 			margin,
+			borderRadius,
 			onKeyDown: handleSurfaceKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuContext.Provider, {
 				value: menuContext,

package/dist/Menu.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuList = require("./MenuList-D4imLXAa.cjs");
+const require_MenuList = require("./MenuList-BBAYeUvD.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-Cgg-sX4W.cjs");
+const require_Menu = require("./Menu-DXLjR9ga.cjs");
 exports.ContextMenu = require_Menu_ContextMenu.ContextMenu;
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_Menu_MenuDivider.MenuDivider;

package/dist/Menu.d.cts

@@ -1,6 +1,6 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-DKUOhNyw.cjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CknoXDLQ.cjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DWjz5ZzG.cjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BrCKLgKZ.cjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CO-XxjiZ.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-fi-W3MOz.cjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.cjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.cjs";
 import { MenuList, MenuListProps } from "./Menu/MenuList.cjs";

package/dist/Menu.d.mts

@@ -1,6 +1,6 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-BkzZxHVj.mjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DGnXJwLj.mjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BWL5fM_L.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CRn4fWwA.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-lGpLM144.mjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.mjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.mjs";
 import { MenuList, MenuListProps } from "./Menu/MenuList.mjs";

package/dist/Menu.mjs

@@ -1,6 +1,6 @@
-import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
+import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-Cz3cupC3.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-CrzHc_cn.mjs";
+import { t as Menu } from "./Menu-CnG4ikZd.mjs";
 export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };

package/dist/{MenuItem-DUn4IZKK.mjs → MenuItem-C21eR7d6.mjs}

@@ -1,11 +1,12 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as getSurfaceRadius } from "./getSurfaceRadius-DTgqIzll.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
 import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
-import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-B7msJ1IG.mjs";
-import { t as computePopoverPosition } from "./computePopoverPosition-BIprs_xo.mjs";
-import { Children, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { t as useAnchoredPlacement } from "./useAnchoredPlacement-Pe7sY41E.mjs";
+import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-Cz3cupC3.mjs";
+import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Menu/MenuPaper.ts
 const elevationSystem = (0, src_exports.system)({ elevation: {
@@ -19,9 +20,10 @@ const MenuPaper = styled("div", {
 	shouldForwardProp: (prop) => ![
 		"elevation",
 		"layer",
-		"margin"
+		"margin",
+		"borderRadius"
 	].includes(prop)
-})(({ theme, layer, margin }) => ({
+})(({ theme, layer, margin, borderRadius }) => ({
 	position: "fixed",
 	top: 0,
 	left: 0,
@@ -30,7 +32,7 @@ const MenuPaper = styled("div", {
 	maxHeight: `calc(100vh - ${2 * margin}px)`,
 	overflowY: "auto",
 	backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "surfaceBg", "paper")}`),
-	borderRadius: theme.radii.sm,
+	borderRadius: getSurfaceRadius(theme, borderRadius),
 	visibility: "hidden"
 }), elevationSystem);
 //#endregion
@@ -94,81 +96,39 @@ function hasRoomBeside(anchorRect, width, viewportWidth, margin) {
 //#endregion
 //#region src/Menu/hooks/useMenuPlacement.ts
 /**
-* Places a menu's `position: fixed` surface in the window, next to its anchor - so a
-* scrolling panel's overflow never clips it, while it stays in the menu's own box in the
-* DOM. Placed before paint on every render while open, and again on resize and on any
-* scroll. The surface starts `visibility: hidden` and is shown here, as it is placed - in
-* the same layout pass, so it is visible by the time anything inside it takes focus.
-* Returns whether a list beside its row opened on the other side for want of room.
+* Places a menu's `position: fixed` surface in the window, next to its anchor, with the shared
+* `useAnchoredPlacement`. A submenu with room on neither side of its row opens under it (or over
+* it) instead, so it never covers the row it came from. Returns whether a list beside its row
+* opened on the other side for want of room.
 */
 function useMenuPlacement({ isOpen, anchorRef, surfaceRef, placement, align, margin, anchorPosition = null }) {
 	const [isFlipped, setIsFlipped] = useState(false);
-	const pointTop = anchorPosition?.top;
-	const pointLeft = anchorPosition?.left ?? 0;
-	const place = useCallback(() => {
-		const anchor = anchorRef.current;
-		const surface = surfaceRef.current;
-		if (!anchor || !surface) return;
-		const isPoint = pointTop !== void 0;
-		const anchorRect = anchor.getBoundingClientRect();
-		const paperRect = {
-			width: surface.offsetWidth,
-			height: surface.offsetHeight
-		};
-		const viewport = {
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
-		const isCramped = placement === "beside" && !hasRoomBeside(anchorRect, paperRect.width, viewport.width, margin);
-		const { top, left } = computePopoverPosition({
-			anchorReference: isPoint ? "anchorPosition" : "anchorEl",
-			anchorPosition: isPoint ? {
-				top: pointTop,
-				left: pointLeft
-			} : void 0,
-			anchorRect,
-			paperRect,
-			...getMenuOrigins(isCramped ? "below" : placement, align, isRtl(anchor)),
-			viewport,
-			marginThreshold: margin
-		});
-		surface.style.top = `${top}px`;
-		surface.style.left = `${left}px`;
-		const landed = surface.getBoundingClientRect();
-		const isOwnBox = paperRect.width > 0 && Math.round(landed.width) === paperRect.width;
-		const shiftTop = Math.round(landed.top - top);
-		const shiftLeft = Math.round(landed.left - left);
-		if (isOwnBox && (shiftTop !== 0 || shiftLeft !== 0)) {
-			surface.style.top = `${top - shiftTop}px`;
-			surface.style.left = `${left - shiftLeft}px`;
-		}
-		surface.style.visibility = "visible";
-		if (placement === "beside") {
-			const isOpeningRight = left + paperRect.width / 2 > anchorRect.left + anchorRect.width / 2;
-			const isRightPreferred = align === "start" !== isRtl(anchor);
-			setIsFlipped(!isCramped && isOpeningRight !== isRightPreferred);
-		}
+	const isCramped = useCallback(({ anchorRect, surfaceSize, viewport }) => placement === "beside" && !hasRoomBeside(anchorRect, surfaceSize.width, viewport.width, margin), [placement, margin]);
+	const getOrigins = useCallback((context) => getMenuOrigins(isCramped(context) ? "below" : placement, align, context.isRtl), [
+		isCramped,
+		placement,
+		align
+	]);
+	const onPlaced = useCallback((placed) => {
+		if (placement !== "beside") return;
+		const { anchorRect, surfaceSize, left, isRtl } = placed;
+		const isOpeningRight = left + surfaceSize.width / 2 > anchorRect.left + anchorRect.width / 2;
+		const isRightPreferred = align === "start" !== isRtl;
+		setIsFlipped(!isCramped(placed) && isOpeningRight !== isRightPreferred);
 	}, [
-		anchorRef,
-		surfaceRef,
 		placement,
 		align,
-		margin,
-		pointTop,
-		pointLeft
+		isCramped
 	]);
-	useLayoutEffect(() => {
-		if (isOpen) place();
+	useAnchoredPlacement({
+		isOpen,
+		anchorRef,
+		surfaceRef,
+		anchorPosition,
+		getOrigins,
+		margin,
+		onPlaced
 	});
-	useEffect(() => {
-		if (!isOpen) return void 0;
-		window.addEventListener("resize", place);
-		window.addEventListener("scroll", place, true);
-		return () => {
-			window.removeEventListener("resize", place);
-			window.removeEventListener("scroll", place, true);
-		};
-	}, [isOpen, place]);
 	return isFlipped;
 }
 //#endregion
@@ -459,7 +419,7 @@ 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": typeof state.shortcut === "string" ? state.shortcut : void 0,
+	"aria-keyshortcuts": state.keyShortcuts ?? (typeof state.shortcut === "string" ? state.shortcut : void 0),
 	"aria-describedby": state.note ? state.noteId : void 0
 });
 const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
@@ -470,7 +430,7 @@ const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
 * `<li role="option">` (override via `as`), whose selection, highlight and density props
 * `Select` injects; 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: textColorProp, size: sizeProp, dense: denseProp, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, role = "menuitem", startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, "data-testid": dataTestid }) {
+function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, role = "menuitem", startIcon, shortcut, "aria-keyshortcuts": keyShortcuts, note, onClick, submenu, emptyLabel, secondaryAction, shouldAnnounceSecondaryAction = false, id, className, "data-testid": dataTestid }) {
 	const menu = useMenuListContext();
 	const isMenu = menu !== null;
 	const { color, size, textColor, dense } = useRowLook({
@@ -576,6 +536,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 			isSubmenuOpen,
 			submenuId,
 			shortcut,
+			keyShortcuts,
 			note,
 			noteId
 		}),
@@ -616,7 +577,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 		role: "none",
 		hasSecondaryAction: true,
 		children: [row, /* @__PURE__ */ jsx(SecondaryActionSlot, {
-			"aria-hidden": true,
+			"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 			children: secondaryAction
 		})]
 	});
@@ -630,7 +591,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 		children: [
 			row,
 			hasSecondaryAction && /* @__PURE__ */ jsx(SecondaryActionSlot, {
-				"aria-hidden": true,
+				"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 				children: secondaryAction
 			}),
 			isSubmenuOpen && /* @__PURE__ */ jsx(Submenu, {