@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e4f8e4e

package/dist/DropdownMenu/DropdownMenu.js

@@ -4,8 +4,10 @@
 
 /**
  * @file DropdownMenu.tsx
- * @input Uses React, StyleX, usePopover, Button, Icon, useListFocus
- * @output Exports DropdownMenu component
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
+ *   useListFocus, and the shared viewport-safe menu-width resolver
+ * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
+ *   presentation
  * @position Core implementation; consumed by index.ts
  *
  * Supports two modes with a single keyboard/focus path:
@@ -30,27 +32,54 @@ import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from
 import * as stylex from '@stylexjs/stylex';
 import { usePopoverInternal } from "../Popover/usePopover.js";
 import { Button } from "../Button/index.js";
+import { Heading } from "../Heading/index.js";
 import { Icon } from "../Icon/index.js";
 import { renderDropdownItems } from "./renderDropdownItems.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
 import { DropdownMenuContext } from "./DropdownMenuContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
+import { useFocusReturnVisibility } from "../hooks/useFocusReturnVisibility.js";
+import { useMenuOverflow } from "./useMenuOverflow.js";
+import { resolveMenuWidth } from "./menuWidth.js";
+import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
+import { MenuBottomSheet } from "./MenuBottomSheet.js";
+import { MenuBottomSheetActionList } from "./MenuBottomSheetActionList.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
-import { spacingVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
 import { useTranslator } from "../i18n/index.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MENU_VIEWPORT_GUTTER = spacingVars['--spacing-4'];
+const MENU_MAX_INLINE_SIZE = `calc(100vi - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px)) - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-right, 0px)))`;
+const MENU_MAX_INLINE_SIZE_FALLBACK = `calc(100vw - ${MENU_VIEWPORT_GUTTER} - ${MENU_VIEWPORT_GUTTER})`;
+const MENU_MAX_BLOCK_SIZE = `min(300px, calc(100dvb - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-top, 0px)) - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-bottom, 0px))))`;
+const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(300px, calc(100vh - ${MENU_VIEWPORT_GUTTER} - ${MENU_VIEWPORT_GUTTER}))`;
+const MENU_POSITION_AREA_MAX_INLINE_SIZE = `calc(100% - max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))`;
+const MENU_POSITION_AREA_MAX_INLINE_SIZE_FALLBACK = `calc(100% - ${MENU_VIEWPORT_GUTTER})`;
+const MENU_INLINE_EDGE_GUTTER = `max(${MENU_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))`;
+const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
+const _temp = {
+  kzqmXN: "x1uyokj7",
+  "$$css": true
+};
 const styles = {
+  triggerOpen: {
+    kKwaWg: "xpl5ynk",
+    $$css: true
+  },
   dropdown: {
     kB7OPa: "x9f619",
     k1xSpc: "x78zum5",
     kXwgrk: "xdt5ytf",
     kOIVth: "x1lsbc85",
-    kskxy: "xuyqlj2",
-    kORKVm: "x1odjw0f",
+    kI3sdo: "x1a2a7pz",
+    ks0D6T: "xs2v1xk",
+    kskxy: "x1hkkhfe",
     "--_dropdown-menu-radius": "x1fcsqxe",
     "--_dropdown-menu-padding": "xgory14",
     kmVPX3: "x9epnlk",
@@ -61,17 +90,81 @@ const styles = {
     kAMwcw: "xlr8y92",
     $$css: true
   },
-  popover: {
-    k7Eaqz: "xrzjruh",
+  scrollable: {
+    kORKVm: "x1odjw0f",
+    kXHlph: "x6ikm8r",
+    kZeWKH: "xish69e",
+    $$css: true
+  },
+  popoverViewport: {
+    kB7OPa: "x9f619",
+    kskxy: "x1hkkhfe",
+    $$css: true
+  },
+  popoverViewportAligned: {
+    ks0D6T: "xbd96yr",
+    $$css: true
+  },
+  popoverViewportStart: {
+    k71WvV: "xxeicf8",
+    $$css: true
+  },
+  popoverViewportEnd: {
+    keTefX: "x47fqr9",
+    $$css: true
+  },
+  popoverViewportBlockStart: {
+    k1K539: "x1kps3mo",
+    $$css: true
+  },
+  popoverViewportBlockEnd: {
+    keoZOQ: "xsoubt3",
+    $$css: true
+  },
+  popoverViewportCentered: {
+    keTefX: "x47fqr9",
+    k71WvV: "xxeicf8",
+    ks0D6T: "xs2v1xk",
+    $$css: true
+  },
+  popoverViewportBlockCentered: {
+    keoZOQ: "xsoubt3",
+    k1K539: "x1kps3mo",
+    ks0D6T: "xs2v1xk",
+    $$css: true
+  },
+  popoverAligned: {
+    k7Eaqz: "x1ks9poc",
+    $$css: true
+  },
+  popoverCentered: {
+    k7Eaqz: "xagy28z",
     $$css: true
   },
   popoverCustomWidth: width => [{
-    k7Eaqz: (typeof width === 'number' ? `${width}px` : width) != null ? "xkj4a21" : typeof width === 'number' ? `${width}px` : width,
+    k7Eaqz: width != null ? "xkj4a21" : width,
     $$css: true
   }, {
-    "--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width)
+    "--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }],
+  popoverCustomIntrinsicWidth: width => [_temp, {
+    "--x-inlineSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
   }]
 };
+const bottomSheetStyles = {
+  content: {
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  rootHeading: {
+    keTefX: "x6i7dpz",
+    $$css: true
+  },
+  viewHeading: {
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  }
+};
 
 // =============================================================================
 // Types
@@ -103,15 +196,16 @@ const styles = {
  * A dropdown menu component that displays a list of actionable items.
  *
  * Supports two modes:
- * - **Data-driven**: pass `items` for static menus with optional custom rendering
- * - **Compound-component**: pass JSX children for dynamic, stateful, or lazy-loaded menus
- *
- * Both modes share the same DOM-based keyboard navigation via useListFocus.
+ * - **Data-driven**: pass `items` and choose either the default anchored
+ *   popover or the modal bottom-sheet presentation.
+ * - **Compound-component**: pass JSX children for dynamic, stateful, or
+ *   lazy-loaded anchored popover menus.
  *
  * @example
  * ```
  * <DropdownMenu
  *   button={{ label: 'Actions' }}
+ *   presentation={useBottomSheet ? 'bottom-sheet' : 'popover'}
  *   items={[
  *     { label: 'Edit', onClick: () => handleEdit() },
  *     { label: 'Delete', onClick: () => handleDelete() },
@@ -123,7 +217,179 @@ const styles = {
 // at render time so it respects the active InternationalizationProvider
 // locale.
 const DEFAULT_BUTTON_I18N_KEY = '@astryx.dropdownMenu.label';
-export function DropdownMenu({
+function DropdownMenuBottomSheet({
+  button: buttonFromProps,
+  isMenuOpen: controlledIsOpen,
+  onOpenChange,
+  onClick,
+  hasChevron = true,
+  items,
+  presentation: _presentation,
+  menuWidth: _menuWidth,
+  placement: _placement,
+  alignment: _alignment,
+  className,
+  style,
+  xstyle,
+  'data-testid': testId,
+  ...rest
+}) {
+  const t = useTranslator();
+  const button = buttonFromProps ?? {
+    label: t(DEFAULT_BUTTON_I18N_KEY)
+  };
+  const backLabel = t('@astryx.dropdownMenu.back');
+  const buttonRef = useRef(null);
+  const actionListRef = useRef(null);
+  const openModalityRef = useRef('pointer');
+  const {
+    isFocusRingSuppressed,
+    onFocusReturnTargetFocus,
+    prepareFocusReturn,
+    resetFocusReturn
+  } = useFocusReturnVisibility();
+  const viewHeadingRef = useRef(null);
+  const previousSubmenuDepthRef = useRef(0);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [submenuPath, setSubmenuPath] = useState([]);
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+  const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
+  if (previousIsOpen !== isOpen) {
+    setPreviousIsOpen(isOpen);
+    if (!isOpen && submenuPath.length > 0) {
+      setSubmenuPath([]);
+    }
+  }
+  const currentSubmenu = submenuPath.at(-1);
+  const currentItems = currentSubmenu?.items ?? items;
+  const currentTitle = currentSubmenu?.label ?? button.label;
+  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : button.label;
+  const setOpen = useCallback(nextIsOpen => {
+    if (!nextIsOpen) {
+      setSubmenuPath([]);
+      prepareFocusReturn();
+    } else {
+      resetFocusReturn();
+    }
+    onOpenChange?.(nextIsOpen);
+    if (!isControlled) {
+      setInternalIsOpen(nextIsOpen);
+    }
+  }, [isControlled, onOpenChange, prepareFocusReturn, resetFocusReturn]);
+  const handleSelect = useCallback(item => {
+    if (item.isDisabled) {
+      return;
+    }
+    item.onClick?.();
+    if (item.hasCloseOnSelect !== false) {
+      setOpen(false);
+    }
+  }, [setOpen]);
+  const isIconOnly = button.isIconOnly === true;
+  const resolvedEndContent = button.endContent ?? (hasChevron && !isIconOnly ? /*#__PURE__*/_jsx(Icon, {
+    icon: "chevronDown",
+    size: "sm",
+    color: "inherit"
+  }) : undefined);
+  useEffect(() => {
+    if (!isOpen || openModalityRef.current !== 'keyboard') {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      actionListRef.current?.querySelector('button:not(:disabled), a[href]')?.focus({
+        preventScroll: true
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [currentItems, isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      previousSubmenuDepthRef.current = 0;
+      return;
+    }
+    if (submenuPath.length === previousSubmenuDepthRef.current) {
+      return;
+    }
+    previousSubmenuDepthRef.current = submenuPath.length;
+    const frame = requestAnimationFrame(() => {
+      viewHeadingRef.current?.focus({
+        preventScroll: true
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, submenuPath.length]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      ...button,
+      ref: buttonRef,
+      xstyle: [isOpen && styles.triggerOpen, button.xstyle, isFocusRingSuppressed && focusOutlineStyles.suppressed],
+      tooltip: isOpen ? undefined : button.tooltip,
+      endContent: resolvedEndContent,
+      onPointerDown: event => {
+        button.onPointerDown?.(event);
+        openModalityRef.current = 'pointer';
+      },
+      onKeyDown: event => {
+        button.onKeyDown?.(event);
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+          openModalityRef.current = 'keyboard';
+        }
+      },
+      onFocus: event => {
+        button.onFocus?.(event);
+        onFocusReturnTargetFocus();
+      },
+      onClick: () => {
+        onClick?.();
+        setOpen(!isOpen);
+      },
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      "data-testid": testId
+    }), /*#__PURE__*/_jsx(MenuBottomSheet, {
+      isOpen: isOpen,
+      onOpenChange: setOpen,
+      finalFocusRef: buttonRef,
+      label: sheetLabel,
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: actionListRef,
+        ...rest,
+        ...mergeProps(themeProps('dropdown-menu', {
+          presentation: 'bottom-sheet'
+        }), stylex.props(bottomSheetStyles.content, xstyle), className, style),
+        children: [/*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 x1q0g3np x6s0dn4 xzye2dw x1p37lm5"
+          },
+          children: [submenuPath.length > 0 && /*#__PURE__*/_jsx(Button, {
+            label: backLabel,
+            variant: "ghost",
+            size: "sm",
+            icon: /*#__PURE__*/_jsx(Icon, {
+              icon: "chevronLeft",
+              size: "sm",
+              xstyle: rtlStyles.mirror
+            }),
+            isIconOnly: true,
+            onClick: () => setSubmenuPath(path => path.slice(0, -1))
+          }), /*#__PURE__*/_jsx(Heading, {
+            ref: viewHeadingRef,
+            level: 3,
+            tabIndex: -1,
+            xstyle: [bottomSheetStyles.viewHeading, submenuPath.length === 0 && bottomSheetStyles.rootHeading],
+            children: currentTitle
+          })]
+        }), /*#__PURE__*/_jsx(MenuBottomSheetActionList, {
+          items: currentItems,
+          onSelect: handleSelect,
+          onOpenSubmenu: item => setSubmenuPath(path => [...path, item])
+        })]
+      })
+    })]
+  });
+}
+function DropdownMenuPopover({
   button: buttonFromProps,
   isMenuOpen: controlledIsOpen,
   onOpenChange,
@@ -132,6 +398,7 @@ export function DropdownMenu({
   hasChevron = true,
   placement = 'below',
   alignment = 'start',
+  presentation: _presentation,
   className,
   style,
   xstyle,
@@ -160,14 +427,25 @@ export function DropdownMenu({
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const isControlled = controlledIsOpen !== undefined;
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
 
-  // Close menu + return focus to trigger
+  // Keyboard dismissal returns focus to the trigger. Pointer dismissal leaves
+  // focus where the browser put it; Safari can otherwise paint a focus-visible
+  // ring on the trigger after a touch selection. Native popover restoration
+  // can happen before `toggle`, so explicitly blur that pointer-restored case.
   const handleLayerHide = useCallback(() => {
     onOpenChange?.(false);
     if (!isControlled) {
       setInternalIsOpen(false);
     }
-    buttonRef.current?.focus();
+    const trigger = buttonRef.current;
+    if (getInteractionModality() === 'keyboard') {
+      trigger?.focus();
+    } else if (document.activeElement === trigger) {
+      trigger?.blur();
+    }
   }, [isControlled, onOpenChange]);
 
   // Defer item focus until the layer has committed open, so focus restore
@@ -336,7 +614,10 @@ export function DropdownMenu({
     size: "sm",
     color: "inherit"
   }) : undefined);
-  const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
+  const requestedWidthLimit = alignment === 'center' ? MENU_MAX_INLINE_SIZE_FALLBACK : MENU_POSITION_AREA_MAX_INLINE_SIZE_FALLBACK;
+  const resolvedMenuWidth = menuWidth ? resolveMenuWidth(menuWidth, requestedWidthLimit) : null;
+  const popoverXstyle = resolvedMenuWidth ? resolvedMenuWidth.property === 'inlineSize' ? styles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value) : styles.popoverCustomWidth(resolvedMenuWidth.value) : alignment === 'center' ? styles.popoverCentered : styles.popoverAligned;
+  const isSidePlacement = placement === 'start' || placement === 'end';
   // Context for compound items
   const contextValue = useMemo(() => ({
     closeMenu,
@@ -345,6 +626,7 @@ export function DropdownMenu({
 
   // Resolve menu content: data-driven items become components
   const menuContent = props.items !== undefined ? renderDropdownItems(items) : children;
+  const hasOverflow = useMenuOverflow(listRef, menuContent, popover.isOpen);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       ...button,
@@ -360,6 +642,7 @@ export function DropdownMenu({
           /* eslint-enable react-compiler/react-compiler */
         }
       },
+      xstyle: [isOpen && styles.triggerOpen, button.xstyle],
       tooltip: isOpen ? undefined : button.tooltip,
       endContent: resolvedEndContent,
       onClick: handleButtonClick,
@@ -373,19 +656,19 @@ export function DropdownMenu({
       ref: listRef,
       id: menuId,
       role: "menu"
-      // Focus target for pointer opens (not in the Tab order): holding
-      // focus on the container keeps key events (arrows, typeahead,
-      // Escape, Tab) inside the menu without highlighting any item.
-      // Mirrors the DropdownMenuSubMenu flyout container.
+      // Pointer opens focus the container so arrows, typeahead, Escape and
+      // Tab remain owned by the menu without pre-highlighting an item.
+      // An overflowing menu joins the Tab order so its scrollable region is
+      // keyboard-accessible; Tab still dismisses through listKeyDown.
       ,
-      tabIndex: -1
+      tabIndex: hasOverflow ? 0 : -1
       // Give the menu an accessible name from its trigger's label, so
       // screen readers announce e.g. "Actions menu" rather than an unnamed
       // menu (menus-13).
       ,
       "aria-label": button.label,
       onKeyDown: listKeyDown,
-      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, xstyle), className, style),
+      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, hasOverflow && styles.scrollable, xstyle), className, style),
       children: /*#__PURE__*/_jsx(DropdownMenuContext, {
         value: contextValue,
         children: menuContent
@@ -394,8 +677,39 @@ export function DropdownMenu({
       placement,
       alignment,
       offset: spacingVars['--spacing-1'],
-      xstyle: [popoverXstyle, layerAnimations[placement]]
+      xstyle: [styles.popoverViewport, alignment === 'center' ? isSidePlacement ? styles.popoverViewportBlockCentered : styles.popoverViewportCentered : [styles.popoverViewportAligned, isSidePlacement ? alignment === 'start' ? styles.popoverViewportBlockStart : styles.popoverViewportBlockEnd : alignment === 'start' ? styles.popoverViewportStart : styles.popoverViewportEnd], popoverXstyle, layerAnimations[placement]]
     })]
   });
 }
+export function DropdownMenu(props) {
+  const {
+    onOpenChange
+  } = props;
+  const requestedPresentation = 'items' in props ? props.presentation ?? 'popover' : 'popover';
+  const resolvedPresentation = useAdaptivePresentation(requestedPresentation);
+  const isControlled = props.isMenuOpen !== undefined;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = isControlled ? props.isMenuOpen : internalIsOpen;
+  const handleOpenChange = useCallback(nextIsOpen => {
+    onOpenChange?.(nextIsOpen);
+    if (!isControlled) {
+      setInternalIsOpen(nextIsOpen);
+    }
+  }, [isControlled, onOpenChange]);
+  const sharedProps = {
+    ...props,
+    isMenuOpen: isOpen,
+    onOpenChange: handleOpenChange
+  };
+  if (resolvedPresentation === 'bottom-sheet' && 'items' in props && props.items !== undefined) {
+    return /*#__PURE__*/_jsx(DropdownMenuBottomSheet, {
+      ...sharedProps,
+      presentation: "bottom-sheet"
+    });
+  }
+  return /*#__PURE__*/_jsx(DropdownMenuPopover, {
+    ...sharedProps,
+    presentation: "popover"
+  });
+}
 DropdownMenu.displayName = 'DropdownMenu';

package/dist/DropdownMenu/DropdownMenuContext.d.ts

@@ -1,7 +1,7 @@
 /** Menu size, derived from the trigger button size. */
 export type DropdownMenuSize = 'sm' | 'md' | 'lg';
 export interface DropdownMenuContextValue {
-    /** Close the menu and return focus to trigger */
+    /** Close the menu; keyboard dismissal returns focus to the trigger. */
     closeMenu: () => void;
     /** Menu size derived from button size */
     menuSize: DropdownMenuSize;

package/dist/DropdownMenu/DropdownMenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAgBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
+{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAgBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}

package/dist/DropdownMenu/DropdownMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqD5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BA0DvB;yBAtEe,gBAAgB"}
+{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuD5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BA0DvB;yBAtEe,gBAAgB"}

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -43,7 +43,7 @@ const menuItemStyles = {
     kMv6JI: "x9ynric",
     kGuDYH: "xcr08ib",
     kMwMTN: "x1tgivj0",
-    kWkggS: "xjbqb8w x1c52tdz",
+    kWkggS: "xjbqb8w x1c52tdz x1anq1lc",
     kkrTdU: "x1ypdohk x16khyan",
     k9WMMc: "x1yc453h",
     kI3sdo: "x1a2a7pz",

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file DropdownMenuSubMenu.tsx
  * @input React, stylex, useLayer (context mode), useListFocus, useMenuHover,
- *   useTypeahead, Item, Icon, Spinner, DropdownMenu context + item roles.
+ *   useTypeahead, the shared viewport-safe menu-width resolver, Item, Icon,
+ *   Spinner, and DropdownMenu context + item roles
  * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
  *   flyout menu of its own children/items.
  * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
@@ -55,7 +56,10 @@ interface DropdownMenuSubMenuBaseProps extends Pick<BaseProps, 'xstyle' | 'class
      * @default false
      */
     hasSpinner?: boolean;
-    /** Fixed flyout width. Defaults to sizing to its content (min 160px). */
+    /**
+     * Minimum flyout width. The flyout may grow for its content but is capped to
+     * the available viewport space. Defaults to intrinsic sizing (min 160px).
+     */
     menuWidth?: number | string;
     /** Called when the flyout opens or closes. */
     onOpenChange?: (isOpen: boolean) => void;

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwF5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAqVX;yBAvVe,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAsB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4H5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAkWX;yBApWe,mBAAmB"}