@astryxdesign/core 0.7.2 → 0.7.3-canary.06872b4

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -9,7 +9,9 @@
  *   Spinner, and DropdownMenu context + item roles
  * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
  *   menu of its own children/items: a flyout beside the row, or, on a phone,
- *   a drilled-in view in place of the parent rows.
+ *   a drilled-in view in place of the parent rows. With a header or footer,
+ *   that surface is a modal dialog rendered into the root's surface host,
+ *   beside every menu element.
  * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
  *   alongside plain items.
  *
@@ -54,12 +56,13 @@ import * as stylex from '@stylexjs/stylex';
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { MenuRegionsContext } from "./menuRegionsContext.js";
+import { moveRegionsTab } from "./menuRegionStops.js";
 import { Item } from "../Item/index.js";
 import { useLayer } from "../Layer/useLayer.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
-import { isMenuPressActivation, useMenuPress } from "../hooks/useMenuPress.js";
+import { isMenuPressActivation, MENU_PRESS_SURFACE_ATTR, useMenuPress } from "../hooks/useMenuPress.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
 import { useMenuOverflow } from "./useMenuOverflow.js";
 import { resolveMenuWidth } from "./menuWidth.js";
@@ -67,11 +70,14 @@ import "../Layer/layerViewportInset.stylex.js";
 import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { composeEventHandlers, mergeProps, rtlStyles } from "../utils/index.js";
+import { composeEventHandlers, isImeKeyEvent, isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { getInteractionModality } from "../utils/interactionModality.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
-import { DropdownMenuContext, DropdownMenuRootOpenContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
+import { DropdownMenuContext, DropdownMenuRootOpenContext, DropdownMenuSurfaceContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
 import { useTranslator } from "../i18n/index.js";
@@ -129,6 +135,21 @@ const _temp = {
   "$$css": true
 };
 const flyoutStyles = {
+  scrollable: {
+    kORKVm: "x1odjw0f",
+    kXHlph: "x6ikm8r",
+    kZeWKH: "xish69e",
+    $$css: true
+  },
+  touchPinchZoom: {
+    kFalU9: "x1j4r261",
+    $$css: true
+  },
+  touchPanYPinchZoom: {
+    kFalU9: "xge0x1e",
+    kZeWKH: "xish69e",
+    $$css: true
+  },
   popoverViewport: {
     kB7OPa: "x9f619",
     kskxy: "x1uh1i8a",
@@ -151,6 +172,94 @@ const flyoutStyles = {
 
 // The drilled-in list shows in place of the parent rows, inside the parent's
 // own box: no surface, shadow or cap of its own.
+// With a header or footer the sub-menu's surface is a frame holding the
+// header, the sub-menu's own role="menu" element and the footer, in one column
+// under the flyout's block cap: the regions keep their height and the rows
+// shrink and scroll between them.
+// A drilled-in view with a header or footer takes the root menu's place, so
+// it caps where the root does when the root's `menuMaxHeight` lifts the 300px
+// cap; the viewport still bounds it.
+const _temp2 = {
+  kskxy: "x1jols5v",
+  "$$css": true
+};
+const dynamicRegionStyles = {
+  viewMaxHeight: maxHeight => [_temp2, {
+    "--x-maxHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`min(${maxHeight}, ${layerViewportInset.maxBlockSize})`)
+  }]
+};
+const regionStyles = {
+  frame: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kskxy: "x1uh1i8a",
+    "--_dropdown-menu-radius": "x1fcsqxe",
+    "--_dropdown-menu-padding": "xgory14",
+    kaIpWk: "x1n97fys",
+    $$css: true
+  },
+  menu: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    kzQI83: "x1iyjqo2",
+    kmuXW: "xs83m0k",
+    kAzted: "x2lwn1j",
+    kmVPX3: "x9epnlk",
+    kI3sdo: "x1a2a7pz",
+    k7VYTy: "xpdipgo",
+    kfSwDN: "x87ps6o",
+    $$css: true
+  },
+  hidden: {
+    k1xSpc: "x1s85apg",
+    $$css: true
+  }
+};
+/**
+ * Close every open flyout with a header or footer whose row sits in `menu`.
+ * Such a flyout renders beside the root's menu, not inside the flyout that
+ * holds its row, so hiding that flyout does not hide it. Each closes through
+ * the popover API, as DropdownMenu closes its flyouts when it hides, so its
+ * layer's toggle handling resets its state and reports the close; its own
+ * nested flyouts close the same way, innermost first.
+ */
+function hideRegionedFlyoutsIn(menu) {
+  if (menu == null) {
+    return;
+  }
+  const doc = menu.ownerDocument;
+  const rows = menu.querySelectorAll('[aria-expanded="true"][aria-controls]');
+  for (const row of [...rows].reverse()) {
+    const frame = doc.getElementById(row.getAttribute('aria-controls') ?? '');
+    if (frame?.getAttribute('data-astryx-submenu-regions') !== 'flyout') {
+      continue;
+    }
+    const flyout = frame.closest('[popover]');
+    if (flyout == null) {
+      continue;
+    }
+    if (typeof flyout.hidePopover === 'function') {
+      if (flyout.matches(':popover-open')) {
+        flyout.hidePopover();
+      }
+    } else if (flyout.style.display === 'block') {
+      // Without the popover API the layer toggles `display`; mirror it and
+      // tell its reconciler, as DropdownMenu's own sweep does.
+      flyout.style.display = 'none';
+      const toggle = new Event('toggle', {
+        bubbles: false
+      });
+      Object.defineProperty(toggle, 'newState', {
+        value: 'closed',
+        configurable: true
+      });
+      flyout.dispatchEvent(toggle);
+    }
+  }
+}
 
 /**
  * A single menu row that reveals a nested flyout of its own items. The row
@@ -182,6 +291,8 @@ export function DropdownMenuSubMenu(props) {
     menuWidth,
     onOpenChange,
     presentation = 'adaptive',
+    header,
+    footer,
     children,
     xstyle,
     className,
@@ -200,9 +311,25 @@ export function DropdownMenuSubMenu(props) {
   } = props;
   const t = useTranslator();
   const menuCtx = useDropdownMenuContext();
+  const rootSurface = use(DropdownMenuSurfaceContext);
   const rootHasRegions = use(MenuRegionsContext);
   const menuSize = menuCtx?.menuSize ?? 'md';
   const canOpen = !isDisabled;
+  // With a header or footer the sub-menu's surface holds controls that are not
+  // menu items, so it is a modal dialog around the sub-menu's menu, rendered
+  // into the root's surface host: outside every menu element. A root that
+  // renders no host (no surface context, as in ContextMenu) has nowhere
+  // outside its menu to put them, so the sub-menu shows its rows alone there.
+  const wantsRegions = isRenderable(header) || isRenderable(footer);
+  const rootHostsSurfaces = rootSurface != null;
+  const hasRegions = wantsRegions && rootHostsSurfaces;
+  const surfaceHost = rootSurface?.host.getElement() ?? null;
+  useDevWarning('DropdownMenuSubMenu', 'header and footer show only inside a DropdownMenu; this menu has no place outside its rows for them, so they are not rendered.', wantsRegions && !rootHostsSurfaces);
+  const frameId = useId();
+  const frameRef = useRef(null);
+  const headerRef = useRef(null);
+  const footerRef = useRef(null);
+  const [isMenuKeyboardFocused, setIsMenuKeyboardFocused] = useState(false);
   const contentId = useId();
   const generatedTriggerId = useId();
   // A caller's `id` names the row; the flyout stays labelled by it.
@@ -225,17 +352,31 @@ export function DropdownMenuSubMenu(props) {
   }) : t('@astryx.dropdownMenu.back');
   const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
   const isOpen = isDrillIn ? isOnStack : isFlyoutOpen;
+
+  // Whether focus is anywhere in this flyout's frame, a level nested in it
+  // included: React brings a nested level's focus events back here through
+  // its portal, where the DOM would not.
+  const isFocusInFrameRef = useRef(false);
+  // A pointer that left while focus was inside: the flyout closes once focus
+  // leaves too.
+  const closeWhenFocusLeavesRef = useRef(false);
   const layer = useLayer({
     mode: 'context',
     lightDismiss: false,
     onShow: useCallback(() => {
+      closeWhenFocusLeavesRef.current = false;
       setIsFlyoutOpen(true);
       onOpenChange?.(true);
     }, [onOpenChange]),
     onHide: useCallback(() => {
+      closeWhenFocusLeavesRef.current = false;
+      // Whatever closed this flyout, a flyout with a header or footer opened
+      // from one of its rows closes with it: that flyout renders beside the
+      // root's menu, not inside this one, so hiding this one leaves it shown.
+      hideRegionedFlyoutsIn(triggerRef.current?.ownerDocument.getElementById(contentId) ?? null);
       setIsFlyoutOpen(false);
       onOpenChange?.(false);
-    }, [onOpenChange])
+    }, [onOpenChange, contentId])
   });
   const showLayer = useCallback(() => {
     if (canOpen) {
@@ -243,8 +384,42 @@ export function DropdownMenuSubMenu(props) {
     }
   }, [canOpen, layer]);
   const hideLayer = useCallback(() => {
+    // A pointer leaving a flyout with a header or footer does not close it
+    // while focus is inside: what was typed into its field stays.
+    if (hasRegions && isFocusInFrameRef.current) {
+      closeWhenFocusLeavesRef.current = true;
+      return;
+    }
     layer.hide();
+  }, [layer, hasRegions]);
+  const handleFrameFocus = useCallback(() => {
+    isFocusInFrameRef.current = true;
+  }, []);
+  const handleFrameBlur = useCallback(event => {
+    isFocusInFrameRef.current = false;
+    if (!closeWhenFocusLeavesRef.current) {
+      return;
+    }
+    // Focus moving to another control in the frame keeps it open.
+    const next = event.relatedTarget;
+    if (next instanceof Node && event.currentTarget.contains(next)) {
+      return;
+    }
+    // Focus moving into a level nested in this one (React brings that
+    // focus event back through its portal), or moved by the browser itself
+    // (an arrow key in a native radio group, whose focus event follows a
+    // microtask checkpoint), arrives after this blur: decide in a task of
+    // its own, once the move has completed.
+    setTimeout(() => {
+      if (!isFocusInFrameRef.current && closeWhenFocusLeavesRef.current && triggerRef.current?.isConnected === true) {
+        closeWhenFocusLeavesRef.current = false;
+        layer.hide();
+      }
+    }, 0);
   }, [layer]);
+  const handleFramePointerEnter = useCallback(() => {
+    closeWhenFocusLeavesRef.current = false;
+  }, []);
 
   // Dedicated roving-focus + typeahead for this flyout level. The boundary
   // selector scopes item collection and key handling to this flyout's own
@@ -267,8 +442,9 @@ export function DropdownMenuSubMenu(props) {
       focusTrigger: true
     })
   });
-  // A drilled-in list scrolls with the root menu, not on its own.
-  const hasOverflow = useMenuOverflow(menuRef, children, isOpen && !isDrillIn);
+  // A drilled-in list scrolls with the root menu, not on its own, unless it
+  // has a header or footer: then its rows scroll between them.
+  const hasOverflow = useMenuOverflow(menuRef, children, isOpen && (!isDrillIn || hasRegions));
   const typeahead = useTypeahead({
     getItemLabels: () => getItems().map(el => el.textContent),
     onMatch: focusItem,
@@ -295,10 +471,10 @@ export function DropdownMenuSubMenu(props) {
     isOpen: isFlyoutOpen,
     isEnabled: canOpen && !isDrillIn && isRootMenuOpen,
     // The safe triangle toward the flyout's near edge is built from the
-    // flyout this component renders, not the hook's own list ref.
-    flyoutRef: menuRef
+    // flyout this component renders, not the hook's own list ref: the
+    // frame, with a header or footer.
+    flyoutRef: hasRegions ? frameRef : menuRef
   });
-
   // Where focus lands once a pushed view shows: the first row after Back for
   // a keyboard open, the list itself for a pointer open; and the row itself
   // once its view is popped.
@@ -465,14 +641,25 @@ export function DropdownMenuSubMenu(props) {
   // only act on our own, letting the deeper level keep ownership. No manual
   // stopPropagation needed — each level self-filters.
   const handleContentKeyDown = useCallback(e => {
-    // In a menu with a header or footer, Tab leaves the whole flyout stack:
-    // every open level closes as the key bubbles past it — this one's own
-    // rows or a deeper level's — and the root menu moves focus to a region.
-    if (e.key === 'Tab' && rootHasRegions) {
-      close({
-        focusTrigger: false
-      });
-      return;
+    if (e.key === 'Tab') {
+      // With its own header or footer this level is a dialog: Tab walks
+      // its regions and its rows as one stop, and wraps. A deeper level
+      // has closed itself as the key bubbled up, and the walk continues
+      // from this level's rows.
+      if (hasRegions) {
+        moveRegionsTab(e, menuRef.current, headerRef.current, footerRef.current, !ownsEvent(e));
+        return;
+      }
+      // In a menu with a header or footer above this level, Tab leaves the
+      // flyout stack: every open level closes as the key bubbles past it,
+      // this one's own rows or a deeper level's, and the level with the
+      // regions moves focus on.
+      if (rootHasRegions) {
+        close({
+          focusTrigger: false
+        });
+        return;
+      }
     }
     if (!ownsEvent(e)) {
       return;
@@ -518,7 +705,28 @@ export function DropdownMenuSubMenu(props) {
       return;
     }
     listNavKeyDown(e);
-  }, [ownsEvent, close, listNavKeyDown, typeahead, menuRef, rootHasRegions]);
+  }, [ownsEvent, close, listNavKeyDown, typeahead, menuRef, rootHasRegions, hasRegions]);
+
+  // A region keeps its own keys: arrows move a field's caret and letters type.
+  // Tab moves on through the dialog's stops, and Escape returns to the row as
+  // it does from the rows.
+  const handleRegionKeyDown = useCallback(e => {
+    if (e.key === 'Tab') {
+      moveRegionsTab(e, menuRef.current, headerRef.current, footerRef.current);
+      return;
+    }
+    // An Escape that ends an IME composition belongs to the field, and one a
+    // control in the region already handled (a menu it opened closing, a
+    // field clearing itself) belongs to that control: either closes nothing
+    // here, so one Escape affects one surface.
+    if (e.key === 'Escape' && !e.defaultPrevented && !isImeKeyEvent(e.nativeEvent)) {
+      e.preventDefault();
+      e.stopPropagation();
+      close({
+        focusTrigger: true
+      });
+    }
+  }, [menuRef, close]);
 
   // Re-provide the menu context so nested items behave exactly like top-level
   // ones. Selecting a leaf item must dismiss the WHOLE stack, not just this
@@ -569,29 +777,108 @@ export function DropdownMenuSubMenu(props) {
   });
   const resolvedMenuWidth = menuWidth ? resolveMenuWidth(menuWidth, layerViewportInset.maxInlineSizeFallback) : null;
   const popoverXstyle = resolvedMenuWidth ? resolvedMenuWidth.property === 'inlineSize' ? flyoutStyles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value) : flyoutStyles.popoverCustomWidth(resolvedMenuWidth.value) : flyoutStyles.popover;
-  const nestedRows = /*#__PURE__*/_jsxs(DropdownMenuContext, {
+
+  // The flyout is a layer of its own, where layer-scoped contexts reset:
+  // nested rows get this level's menu context and the root's surface again.
+  const nestedRows = /*#__PURE__*/_jsx(DropdownMenuContext, {
     value: nestedMenuContext,
-    children: [isDrillIn && /*#__PURE__*/_jsx(DropdownMenuItem, {
-      icon: /*#__PURE__*/_jsx(Icon, {
-        icon: "chevronLeft",
-        size: "sm",
-        color: "secondary",
-        xstyle: rtlStyles.mirror
-      }),
-      label: backLabel,
-      hasCloseOnSelect: false,
-      onClick: () => close({
-        focusTrigger: true
-      })
-    }), children]
+    children: /*#__PURE__*/_jsxs(DropdownMenuSurfaceContext, {
+      value: rootSurface,
+      children: [isDrillIn && /*#__PURE__*/_jsx(DropdownMenuItem, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronLeft",
+          size: "sm",
+          color: "secondary",
+          xstyle: rtlStyles.mirror
+        }),
+        label: backLabel,
+        hasCloseOnSelect: false,
+        onClick: () => close({
+          focusTrigger: true
+        })
+      }), children]
+    })
   });
+  // A level with its own header or footer tells the levels below it, so Tab
+  // from a deeper flyout closes that flyout and this level walks on.
+  //
   // Nested rows live in this level's flyout, a layer of their own where the
-  // layer-scoped signal resets; re-provide it so their pending hover intent
-  // dies with the root menu too.
+  // layer-scoped signal resets; re-provide it, as whether every level above
+  // them is open, so their pending hover intent dies with the root menu or
+  // with this level: a hover-open that fired after this level closed would
+  // leave a flyout with a header or footer shown beside the root's menu.
   const nestedContent = /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
-    value: isRootMenuOpen,
-    children: nestedRows
+    value: isRootMenuOpen && isOpen,
+    children: hasRegions ? /*#__PURE__*/_jsx(MenuRegionsContext, {
+      value: true,
+      children: nestedRows
+    }) : nestedRows
+  });
+
+  // The menu of a sub-menu with a header or footer renders beside the root's
+  // menu, outside its DOM: it names the root so the press model counts it as
+  // nested there, as a flyout inside the root's menu is. Only this menu does:
+  // a picker placed in its header or footer stays its own press root.
+  const surfaceOwnerProps = hasRegions && rootSurface != null ? {
+    [MENU_PRESS_SURFACE_ATTR]: rootSurface.ownerId
+  } : undefined;
+
+  // With a header or footer, the dialog that holds them and the sub-menu's
+  // menu. A drilled-in view is named as its list is, by the row's label; the
+  // flyout by the row.
+  const renderRegionsFrame = (menuElement, frameProps, surface) => /*#__PURE__*/_jsxs("div", {
+    ref: frameRef,
+    id: frameId,
+    role: "dialog",
+    "aria-modal": "true"
+    // Read by the root's step-aside rule (a shown view) and by the flyout
+    // that holds this row when it closes (an open flyout).
+    ,
+    "data-astryx-submenu-regions": surface,
+    ...frameProps,
+    ...(surface === 'flyout' ? {
+      onFocus: handleFrameFocus,
+      onBlur: handleFrameBlur,
+      onPointerEnter: handleFramePointerEnter
+    } : undefined),
+    ...(surface === 'flyout' ?
+    // The flyout's frame paints its surface, so the menu target rides
+    // on it; a drilled-in view sits inside the root's surface.
+    mergeProps(themeProps('dropdown-menu'), {
+      className: "x9f619 x78zum5 xdt5ytf x1uh1i8a x1fcsqxe xgory14 x1n97fys xc0b1yq x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92"
+    }) : stylex.props(regionStyles.frame, rootSurface?.menuMaxHeight != null && dynamicRegionStyles.viewMaxHeight(rootSurface.menuMaxHeight), frameProps.hidden === true && regionStyles.hidden)),
+    children: [isRenderable(header) && /*#__PURE__*/_jsx("div", {
+      ref: headerRef,
+      onKeyDown: handleRegionKeyDown,
+      ...{
+        className: "x2lah0s x9epnlk"
+      },
+      children: header
+    }), menuElement, isRenderable(footer) && /*#__PURE__*/_jsx("div", {
+      ref: footerRef,
+      onKeyDown: handleRegionKeyDown,
+      ...{
+        className: "x2lah0s x9epnlk"
+      },
+      children: footer
+    })]
   });
+  // A flyout with a header or footer renders into the root's surface host,
+  // beside the root's menu rather than inside it; any other flyout renders
+  // in place, inside the menu that holds its row.
+  const renderFlyout = flyout => hasRegions && surfaceHost != null ? /*#__PURE__*/createPortal(flyout, surfaceHost) : flyout;
+  // Between a header and a footer the rows are one Tab stop, so keyboard focus
+  // on the menu element shows the ring the base style otherwise removes.
+  const handleMenuFocus = event => {
+    if (hasRegions && event.target === event.currentTarget) {
+      setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
+    }
+  };
+  const handleMenuBlur = event => {
+    if (hasRegions && event.target === event.currentTarget) {
+      setIsMenuKeyboardFocused(false);
+    }
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Item
     // Host attributes and handlers first: the row's role, tab stop, popup
@@ -603,9 +890,9 @@ export function DropdownMenuSubMenu(props) {
       id: triggerId,
       role: "menuitem",
       tabIndex: isDisabled ? undefined : -1,
-      "aria-haspopup": "menu",
+      "aria-haspopup": hasRegions ? 'dialog' : 'menu',
       "aria-expanded": isOpen,
-      "aria-controls": isOpen ? contentId : undefined,
+      "aria-controls": isOpen ? hasRegions ? frameId : contentId : undefined,
       "aria-disabled": isDisabled || undefined,
       "data-testid": testId,
       onMouseEnter: composeEventHandlers(triggerProps.onMouseEnter, onMouseEnter),
@@ -628,7 +915,32 @@ export function DropdownMenuSubMenu(props) {
         className,
         style
       })
-    }), activeDrillIn != null ? isOnStack && activeDrillIn.host != null && /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
+    }), activeDrillIn != null ? isOnStack && activeDrillIn.host != null && (hasRegions ?
+    /*#__PURE__*/
+    // A view with a header or footer renders beside the root's menu,
+    // in its surface host, while the root steps its menu aside.
+    createPortal(renderRegionsFrame(/*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      id: contentId,
+      role: "menu",
+      tabIndex: 0,
+      "aria-label": stringLabel,
+      "aria-labelledby": stringLabel == null ? triggerId : undefined,
+      onKeyDown: handleContentKeyDown,
+      onFocus: handleMenuFocus,
+      onBlur: handleMenuBlur,
+      "data-testid": menuDataTestId,
+      ...menuPress.menuProps,
+      ...surfaceOwnerProps,
+      ...stylex.props(regionStyles.menu, hasOverflow && flyoutStyles.scrollable, hasOverflow ? flyoutStyles.touchPanYPinchZoom : flyoutStyles.touchPinchZoom, isMenuKeyboardFocused && focusOutlineStyles.focusVisible),
+      children: nestedContent
+    }), {
+      'aria-label': stringLabel,
+      'aria-labelledby': stringLabel == null ? triggerId : undefined,
+      // A deeper view shows in its place; this one waits, hidden.
+      hidden: !isTopView,
+      inert: !isTopView
+    }, 'view'), surfaceHost ?? activeDrillIn.host) : /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
       ref: menuRef,
       id: contentId,
       role: "menu",
@@ -653,7 +965,28 @@ export function DropdownMenuSubMenu(props) {
         }
       }[!!!isTopView << 0],
       children: nestedContent
-    }), activeDrillIn.host) : layer.render(/*#__PURE__*/_jsx("div", {
+    }), activeDrillIn.host)) : renderFlyout(layer.render(hasRegions ? renderRegionsFrame(/*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      id: contentId,
+      role: "menu"
+      // One Tab stop between the regions.
+      ,
+      tabIndex: 0,
+      "aria-labelledby": triggerId,
+      onKeyDown: handleContentKeyDown,
+      onFocus: handleMenuFocus,
+      onBlur: handleMenuBlur,
+      "data-testid": menuDataTestId,
+      ...menuPress.menuProps,
+      ...surfaceOwnerProps,
+      ...stylex.props(regionStyles.menu, hasOverflow ? flyoutStyles.touchPanYPinchZoom : flyoutStyles.touchPinchZoom, hasOverflow && flyoutStyles.scrollable, isMenuKeyboardFocused && focusOutlineStyles.focusVisible),
+      children: nestedContent
+    }), {
+      'aria-labelledby': triggerId,
+      // Hovering the regions is hovering the flyout.
+      onMouseEnter: contentProps.onMouseEnter,
+      onMouseLeave: contentProps.onMouseLeave
+    }, 'flyout') : /*#__PURE__*/_jsx("div", {
       ref: menuRef,
       id: contentId,
       role: "menu"
@@ -688,7 +1021,7 @@ export function DropdownMenuSubMenu(props) {
       alignment: 'start',
       offset: spacingVars['--spacing-1'],
       xstyle: [flyoutStyles.popoverViewport, popoverXstyle, layerAnimations.end]
-    })]
+    }))]
   });
 }
 DropdownMenuSubMenu.displayName = 'DropdownMenuSubMenu';

package/dist/DropdownMenu/menuRegionStops.d.ts

@@ -4,8 +4,8 @@
  * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
  *   of a header or footer region and the walk through a menu with regions,
  *   with a named radio group as one stop
- * @position Internal; DropdownMenu's walk through its header and footer, in a
- *   module of its own so another menu level with regions can share it.
+ * @position Internal; used by DropdownMenu (the root menu's header and footer)
+ *   and DropdownMenuSubMenu (a sub-menu's header and footer).
  *
  * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
  * header's controls, the menu as one stop, then the footer's controls, and

package/dist/DropdownMenu/menuRegionStops.js

@@ -8,8 +8,8 @@
  * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
  *   of a header or footer region and the walk through a menu with regions,
  *   with a named radio group as one stop
- * @position Internal; DropdownMenu's walk through its header and footer, in a
- *   module of its own so another menu level with regions can share it.
+ * @position Internal; used by DropdownMenu (the root menu's header and footer)
+ *   and DropdownMenuSubMenu (a sub-menu's header and footer).
  *
  * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
  * header's controls, the menu as one stop, then the footer's controls, and

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyO9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAochB;yBAnee,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAochB;yBAnee,SAAS"}

package/dist/FileInput/FileInput.js

@@ -124,7 +124,7 @@ const styles = {
   dropzoneDisabled: {
     kkrTdU: "xt0e3qv",
     kSiTet: "xbyyjgo",
-    kVAM5u: "xvy26l8",
+    kVAM5u: "xvy26l8 x6q1khz",
     $$css: true
   },
   compact: {
@@ -153,7 +153,7 @@ const styles = {
   compactDisabled: {
     kkrTdU: "xt0e3qv",
     kSiTet: "xbyyjgo",
-    kVAM5u: "xvy26l8",
+    kVAM5u: "xvy26l8 x6q1khz",
     $$css: true
   }
 };
@@ -526,15 +526,10 @@ export function FileInput({
       children: [/*#__PURE__*/_jsx(VisuallyHidden, {
         children: /*#__PURE__*/_jsx("button", {
           type: "button"
-          // With a disabledMessage the trigger keeps focusability via
-          // aria-disabled so the reason is focus-discoverable; opening the
-          // picker is still blocked by the isDisabled guards in the handlers.
-          // Otherwise the native disabled attribute removes it from the tab
-          // order.
+          // A disabled trigger keeps its Tab stop (spec:AST-085 FR1).
           ,
-          disabled: isDisabled && !showsDisabledMessage,
-          tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
-          "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+          tabIndex: 0,
+          "aria-disabled": isDisabled ? 'true' : undefined,
           onClick: handleClick,
           onKeyDown: handleKeyDown
           // aria-label suppresses child content from the accessible name, so
@@ -556,8 +551,15 @@ export function FileInput({
         id: id,
         type: "file",
         accept: accept,
-        multiple: isMultiple,
-        disabled: isDisabled,
+        multiple: isMultiple
+        // Detached from its form while disabled, so selected files are not
+        // submitted and `required` does not block submission (FR3).
+        ,
+        form: isDisabled ? '' : undefined
+        // A label or description click activates this input directly; cancel
+        // it so a disabled input never opens the picker (FR2).
+        ,
+        onClick: isDisabled ? event => event.preventDefault() : rest.onClick,
         onChange: handleInputChange
         // The visually-hidden native input is never focused (tabIndex={-1});
         // its describedby/required/invalid live on the trigger button.

package/dist/Selector/SelectorOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorOption.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorOption.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AActD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BAoBrB;yBA7Be,cAAc"}
+{"version":3,"file":"SelectorOption.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorOption.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkBtD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BAoBrB;yBA7Be,cAAc"}