@galaxy-io/dls 2.10.1 → 2.10.3

package/dist/menu/ContextMenu.d.ts

@@ -34,6 +34,12 @@ export interface ContextMenuProps extends AriaAttributes {
      * @default MenuVariant.BASE
      */
     variant?: MenuVariant;
+    /**
+     * Accepted for parity with `Menu` and has no effect: a context menu opens at the pointer, so
+     * there is no trigger box to match. It sizes to its rows.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
     /** Controlled open state. When set, ContextMenu calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
     /**

package/dist/menu/Menu.d.ts

@@ -56,6 +56,13 @@ export interface MenuProps extends AriaAttributes {
      * @default false
      */
     isSearchable?: boolean;
+    /**
+     * The panel takes the trigger's width (a menu opened from a full-width row, such as a sidebar
+     * account button). The rows fill it. Never narrower than 160px. The root panel only: submenus
+     * size to their rows. No effect on `ContextMenu`, which opens at the pointer and has no trigger box.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
     /** Controlled open state. When set, Menu calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
     /**

package/dist/menu/Menu.js

@@ -163,18 +163,25 @@ var List = /*#__PURE__*/ styled("div")({
 	class: "gx-Menu-List-letxokg",
 	propsAsIs: false
 });
+/** `shouldMatchTriggerWidth`, root list: fills the panel at any width, still never under the minimum. */
+var LIST_MATCH_TRIGGER_WIDTH_CSS = "gx-Menu-LIST_MATCH_TRIGGER_WIDTH_CSS-l1m37gth";
+/**
+* `shouldMatchTriggerWidth`, root panel: a trigger narrower than the list's minimum still gets the
+* whole list (the panel is `border-box` with a hairline left and right).
+*/
+var PANEL_MATCH_TRIGGER_WIDTH_CSS = "gx-Menu-PANEL_MATCH_TRIGGER_WIDTH_CSS-p1ab151u";
 /** With search: the pinned field over the scrolling list, capped to the room on screen. */
 var SearchLayout = /*#__PURE__*/ styled("div")({
 	name: "SearchLayout",
-	class: "gx-Menu-SearchLayout-s1m37gth",
+	class: "gx-Menu-SearchLayout-s1nyz30c",
 	propsAsIs: false
 });
 /** With search: only the rows scroll. */
-var SEARCH_LIST_CSS = "gx-Menu-SEARCH_LIST_CSS-s1ab151u";
+var SEARCH_LIST_CSS = "gx-Menu-SEARCH_LIST_CSS-s1hougl1";
 /** "No results": a row's box, not interactive. */
 var MenuEmpty = /*#__PURE__*/ styled("div")({
 	name: "MenuEmpty",
-	class: "gx-Menu-MenuEmpty-m1nyz30c",
+	class: "gx-Menu-MenuEmpty-mjsjxm5",
 	propsAsIs: false
 });
 /**
@@ -183,53 +190,53 @@ var MenuEmpty = /*#__PURE__*/ styled("div")({
 * where they are.
 */
 var MENU_ITEM_VARIANT_TO_CSS_MAP = {
-	["DEFAULT"]: "gx-Menu-DEFAULT-d1hougl1",
-	["ERROR"]: "gx-Menu-ERROR-ejsjxm5"
+	["DEFAULT"]: "gx-Menu-DEFAULT-d11wn83l",
+	["ERROR"]: "gx-Menu-ERROR-eotc445"
 };
 /** A disabled row. Declared after the mode map. */
-var ITEM_DISABLED_CSS = "gx-Menu-ITEM_DISABLED_CSS-i11wn83l";
+var ITEM_DISABLED_CSS = "gx-Menu-ITEM_DISABLED_CSS-imfg9k5";
 /** `leading` / `trailing`: never squeezed, so only the text shrinks. */
 var Slot = /*#__PURE__*/ styled("span")({
 	name: "Slot",
-	class: "gx-Menu-Slot-sotc445",
+	class: "gx-Menu-Slot-s1aves2k",
 	propsAsIs: false
 });
 /** Label and description, stacked; the only part that shrinks. */
 var Content = /*#__PURE__*/ styled("span")({
 	name: "Content",
-	class: "gx-Menu-Content-cmfg9k5",
+	class: "gx-Menu-Content-c1n04r8w",
 	propsAsIs: false
 });
 /** The check marker's box (width per rung). */
 var CheckSlot = /*#__PURE__*/ styled("span")({
 	name: "CheckSlot",
-	class: "gx-Menu-CheckSlot-c1aves2k",
+	class: "gx-Menu-CheckSlot-cwavq3l",
 	propsAsIs: false
 });
 /** Icons, caps and markers never shrink. */
-var NO_SHRINK_CSS = "gx-Menu-NO_SHRINK_CSS-n1n04r8w";
+var NO_SHRINK_CSS = "gx-Menu-NO_SHRINK_CSS-n1dkclye";
 /** A section of rows. */
 var GroupRoot = /*#__PURE__*/ styled("div")({
 	name: "GroupRoot",
-	class: "gx-Menu-GroupRoot-gwavq3l",
+	class: "gx-Menu-GroupRoot-g1wbdfpl",
 	propsAsIs: false
 });
 /** The section heading. */
 var GroupLabel = /*#__PURE__*/ styled("div")({
 	name: "GroupLabel",
-	class: "gx-Menu-GroupLabel-g1dkclye",
+	class: "gx-Menu-GroupLabel-g1e1rrjq",
 	propsAsIs: false
 });
 /** While a term is set, a section with no row left disappears (a structural role selector). */
-var GROUP_FILTERED_CSS = "gx-Menu-GROUP_FILTERED_CSS-g1wbdfpl";
+var GROUP_FILTERED_CSS = "gx-Menu-GROUP_FILTERED_CSS-g28zrrg";
 /** The separator wrapper (`role="none"`; the `<hr>` inside is the separator). */
 var SeparatorRoot = /*#__PURE__*/ styled("div")({
 	name: "SeparatorRoot",
-	class: "gx-Menu-SeparatorRoot-s1e1rrjq",
+	class: "gx-Menu-SeparatorRoot-s1c0ylq3",
 	propsAsIs: false
 });
 /** Space above and below a separator's rule. */
-var SEPARATOR_CSS = "gx-Menu-SEPARATOR_CSS-s28zrrg";
+var SEPARATOR_CSS = "gx-Menu-SEPARATOR_CSS-sd934y5";
 var MenuRootContext = createContext(null);
 var MenuContext = createContext(null);
 /** The context for a part; throws outside a menu. */
@@ -447,7 +454,7 @@ function MenuList({ children, menuAttributes, className }) {
 		children: /* @__PURE__ */ jsx(List, {
 			...menuAttributes,
 			ref: setListRef,
-			className,
+			className: cx(depth === 0 && root.shouldMatchTriggerWidth && LIST_MATCH_TRIGGER_WIDTH_CSS, className),
 			onKeyDown: handleKeyDown,
 			onFocus: handleFocus,
 			onPointerEnter: handlePointerEnter,
@@ -891,7 +898,7 @@ function MenuSearchBody({ children, listId, triggerId, ariaLabel }) {
 * @internal Shared by Menu and ContextMenu; apps use those. The menu engine: a Popover in `MENU`
 * role (or `DIALOG` around a search field) holding the rows, opened by `popoverTrigger`.
 */
-var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM", variant: variantProp, placement = Placement.BOTTOM_START, isSearchable = false, isOpen, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, popoverTrigger, id, className, style, ...rest }, ref) {
+var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM", variant: variantProp, placement = Placement.BOTTOM_START, isSearchable = false, shouldMatchTriggerWidth = false, isOpen, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, popoverTrigger, id, className, style, ...rest }, ref) {
 	const variant = variantProp ?? "BASE";
 	const { isOpen: isOpenState, setOpen } = useControlledOpenState({
 		isOpen,
@@ -913,11 +920,14 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 	const triggerId = typeof triggerProps.id === "string" ? triggerProps.id : generatedTriggerId;
 	const closeTree = useCallback(() => setOpen(false), [setOpen]);
 	const term = isSearchable ? normalizeSearchTerm(rawTerm) : "";
+	const isMatchingTriggerWidth = shouldMatchTriggerWidth && popoverTrigger !== PopoverTrigger.CONTEXT_MENU;
+	const panelClassName = isMatchingTriggerWidth ? cx(PANEL_MATCH_TRIGGER_WIDTH_CSS, className) : className;
 	const rootValue = useMemo(() => ({
 		size,
 		variant,
 		term,
 		isSearchable,
+		shouldMatchTriggerWidth: isMatchingTriggerWidth,
 		closeTree,
 		search: isSearchable ? {
 			inputRef,
@@ -931,6 +941,7 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 		variant,
 		term,
 		isSearchable,
+		isMatchingTriggerWidth,
 		closeTree,
 		rawTerm
 	]);
@@ -973,12 +984,13 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 			role: isSearchable ? PopoverRole.DIALOG : PopoverRole.MENU,
 			variant: MENU_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
 			placement,
+			shouldMatchTriggerWidth: isMatchingTriggerWidth,
 			isOpen: isOpenState,
 			onOpenChange: setOpen,
 			isDisabled,
 			...ariaLabel === void 0 ? {} : { ariaLabel },
 			...id === void 0 ? {} : { id },
-			...className === void 0 ? {} : { className },
+			...panelClassName === void 0 ? {} : { className: panelClassName },
 			...style === void 0 ? {} : { style },
 			body,
 			children: triggerClone