@astryxdesign/core 0.7.2-canary.fe2c655 → 0.7.2

package/src/DropdownMenu/DropdownMenu.ssr.test.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenu.ssr.test.tsx
+ * @input DropdownMenu server markup and React hydration
+ * @output Proves a bottom-sheet DropdownMenu hydrates without a recoverable
+ *   error while its on-demand sheet has not loaded (spec:AST-013 FR9)
+ * @position SSR acceptance test for DropdownMenu
+ */
+
+import {act} from 'react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {hydrateRoot} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.replaceChildren();
+});
+
+async function serverRenderThenHydrate(): Promise<unknown[]> {
+  // A fresh module graph is a fresh server process: the sheet has not loaded.
+  vi.resetModules();
+  const {DropdownMenu} = await import('./DropdownMenu');
+  const tree = (
+    <DropdownMenu
+      button={{label: 'Actions'}}
+      presentation="bottom-sheet"
+      items={[{label: 'Edit project'}, {label: 'Delete'}]}
+    />
+  );
+  const container = document.createElement('div');
+  container.innerHTML = renderToString(tree);
+  document.body.appendChild(container);
+
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+  const recoverableErrors: unknown[] = [];
+  let root!: ReturnType<typeof hydrateRoot>;
+  await act(async () => {
+    root = hydrateRoot(container, tree, {
+      onRecoverableError: error => recoverableErrors.push(error),
+    });
+  });
+  await act(async () => {
+    root.unmount();
+  });
+  container.remove();
+  return recoverableErrors;
+}
+
+describe('DropdownMenu — SSR', () => {
+  it('hydrates a bottom-sheet menu cleanly on the first renders of a server process', async () => {
+    expect(await serverRenderThenHydrate()).toEqual([]);
+    expect(await serverRenderThenHydrate()).toEqual([]);
+    expect(await serverRenderThenHydrate()).toEqual([]);
+  }, 30000);
+});

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -9,21 +9,31 @@
  * SYNC: When DropdownMenu.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {useState} from 'react';
+import {createRef, useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {DropdownMenu, type DropdownMenuTriggerProps} from './DropdownMenu';
 import {DropdownMenuItem} from './DropdownMenuItem';
 import {DropdownMenuDivider} from './DropdownMenuDivider';
 import {DropdownMenuGroup} from './DropdownMenuGroup';
+import {warmMenuBottomSheet} from './__tests__/warmMenuBottomSheet';
 import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
 import {Divider} from '../Divider';
 import {rtlStyles} from '../utils';
 import {__resetInteractionModalityForTest} from '../utils/interactionModality';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {spacingVars} from '../theme/tokens.stylex';
 
 // Mock showPopover and hidePopover methods since they're not implemented in jsdom
 beforeEach(() => {
@@ -73,6 +83,10 @@ beforeEach(() => {
   };
 });
 
+// The touch sheet is loaded lazily; resolve it once so sheets below render
+// synchronously.
+beforeAll(warmMenuBottomSheet, 20000);
+
 describe('DropdownMenu', () => {
   it('renders trigger button with label', () => {
     render(
@@ -1553,10 +1567,9 @@ describe('DropdownMenuItem host attributes', () => {
 
 describe('DropdownMenuGroup (compound mode)', () => {
   it('a focusable node in the heading is not reachable by the arrow keys', async () => {
-    // A heading is not a menu row, so a control inside one lands in the
-    // group but outside the roving focus order. The type does not prevent
-    // this — a rich heading is a legitimate need — so the behavior is
-    // pinned rather than discovered.
+    // The public ReactNode type permits a focusable descendant, but the menu's
+    // roving focus model cannot reach it. Pin that shipped gap while the public
+    // title contract remains unsettled.
     const user = userEvent.setup();
     render(
       <DropdownMenu button={{label: 'Actions'}}>
@@ -2508,6 +2521,66 @@ describe('DropdownMenu data/compound parity', () => {
     expect(fromCompound).toHaveClass('astryx-dropdown-menu-divider');
   });
 
+  it('forwards host attributes to a compound divider while keeping its role', () => {
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuItem label="Edit" />
+        <DropdownMenuDivider
+          id="menu-sep"
+          data-testid="menu-separator"
+          aria-label="Danger zone"
+          // @ts-expect-error role is component-owned
+          role="presentation"
+        />
+        <DropdownMenuItem label="Delete" />
+      </DropdownMenu>,
+    );
+    const separator = screen.getByTestId('menu-separator');
+    expect(separator).toHaveAttribute('id', 'menu-sep');
+    expect(separator).toHaveAttribute('aria-label', 'Danger zone');
+    expect(separator).toHaveAttribute('role', 'separator');
+    expect(separator).toHaveClass('astryx-dropdown-menu-divider');
+  });
+
+  it('composes the complete public root surface on the separator', () => {
+    const ref = createRef<HTMLDivElement>();
+    const onClick = vi.fn();
+    const customStyles = stylex.create({
+      divider: {marginBlock: spacingVars['--spacing-5']},
+    });
+    const customClass = stylex
+      .props(customStyles.divider)
+      .className!.split(' ')
+      .pop()!;
+
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuItem label="Edit" />
+        <DropdownMenuDivider
+          ref={ref}
+          data-testid="menu-separator"
+          className="consumer-divider"
+          style={{backgroundColor: 'rgb(1, 2, 3)'}}
+          xstyle={customStyles.divider}
+          onClick={onClick}
+        />
+        <DropdownMenuItem label="Delete" />
+      </DropdownMenu>,
+    );
+
+    const separator = screen.getByTestId('menu-separator');
+    expect(ref.current).toBe(separator);
+    expect(separator).toHaveClass(
+      'astryx-dropdown-menu-divider',
+      'astryx-divider',
+      'consumer-divider',
+      customClass,
+    );
+    expect(separator).toHaveStyle({backgroundColor: 'rgb(1, 2, 3)'});
+    fireEvent.click(separator);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
   it('skips a compound divider in the arrow-key order', async () => {
     const user = userEvent.setup();
     render(

package/src/DropdownMenu/DropdownMenu.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file DropdownMenu.tsx
- * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
  *   useListFocus, and the shared viewport-safe menu-width resolver
  * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
  *   presentation
@@ -60,6 +60,7 @@ import {
 } from './menuItemRoles';
 import {
   DropdownMenuContext,
+  DropdownMenuRootOpenContext,
   type DropdownMenuContextValue,
 } from './DropdownMenuContext';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
@@ -71,7 +72,7 @@ import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
 import {focusForLastInput} from '../utils/focusReturn';
 import {useMenuOverflow} from './useMenuOverflow';
 import {MenuRegionsContext} from './menuRegionsContext';
-import {getFocusableElements} from '../hooks/useFocusTrap';
+import {moveRegionsTab} from './menuRegionStops';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useMenuDrillIn} from './useMenuDrillIn';
 import {resolveMenuWidth} from './menuWidth';
@@ -80,8 +81,11 @@ import {
   useAdaptivePresentation,
   type AdaptivePresentation,
 } from '../hooks/useAdaptivePresentation';
-import {MenuBottomSheet} from './MenuBottomSheet';
-import {MenuBottomSheetActionList} from './MenuBottomSheetActionList';
+// Loaded on demand: only the bottom-sheet presentation renders the sheet.
+import {
+  MenuBottomSheet,
+  MenuBottomSheetActionList,
+} from './lazyMenuBottomSheet';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {
@@ -108,102 +112,6 @@ const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBloc
 const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
 const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
 
-/**
- * The elements Tab reaches inside a header or footer region, in order. Hidden
- * controls (`hidden`, `display: none`, `visibility: hidden`, inert or
- * aria-hidden subtrees) are not reachable, judged by the popover focus trap's
- * own test so the two never disagree about where Tab can go.
- */
-/**
- * Collapse each named radio group to the one Tab stop a browser gives it: the
- * focused radio, else the checked one, else the first radio moving forward or
- * the last moving backward. The stop takes the group's first position.
- */
-function collapseRadioGroups(
-  elements: HTMLElement[],
-  active: Element | null,
-  isBackward: boolean,
-): HTMLElement[] {
-  const groups = new Map<string, HTMLInputElement[]>();
-  const groupKey = (el: HTMLElement): string | null =>
-    el instanceof HTMLInputElement &&
-    el.getAttribute('type') === 'radio' &&
-    el.name !== ''
-      ? `${el.form?.id ?? ''}\u0000${el.name}`
-      : null;
-  for (const el of elements) {
-    const key = groupKey(el);
-    if (key != null) {
-      const members = groups.get(key) ?? [];
-      members.push(el as HTMLInputElement);
-      groups.set(key, members);
-    }
-  }
-  const placed = new Set<string>();
-  const result: HTMLElement[] = [];
-  for (const el of elements) {
-    const key = groupKey(el);
-    if (key == null) {
-      result.push(el);
-      continue;
-    }
-    if (placed.has(key)) {
-      continue;
-    }
-    placed.add(key);
-    const members = groups.get(key) ?? [];
-    const stop =
-      members.find(radio => radio === active) ??
-      members.find(radio => radio.checked) ??
-      (isBackward ? members[members.length - 1] : members[0]);
-    result.push(stop);
-  }
-  return result;
-}
-
-function tabbablesIn(region: HTMLElement | null): HTMLElement[] {
-  if (region == null) {
-    return [];
-  }
-  return getFocusableElements(region).filter(
-    element => element.tabIndex >= 0 && !isInsideHiddenWrapper(element, region),
-  );
-}
-
-/**
- * Whether a `display: none` ancestor between the element and its region hides
- * it — a control in a wrapper hidden at some widths, say. The trap's test reads
- * only the element's own display.
- */
-function isInsideHiddenWrapper(
-  element: HTMLElement,
-  region: HTMLElement,
-): boolean {
-  if (typeof window === 'undefined' || !window.getComputedStyle) {
-    return false;
-  }
-  for (
-    let node = element.parentElement;
-    node != null && node !== region.parentElement;
-    node = node.parentElement
-  ) {
-    if (window.getComputedStyle(node).display === 'none') {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Move focus to a Tab stop in the dialog. Reports whether focus actually
- * arrived, so a caller can fall back to the menu instead of stranding focus on
- * the page.
- */
-function focusRegionControl(element: HTMLElement): boolean {
-  element.focus();
-  return element.ownerDocument.activeElement === element;
-}
-
 const styles = stylex.create({
   triggerOpen: {
     backgroundImage: MENU_TRIGGER_OPEN_BACKGROUND,
@@ -758,12 +666,37 @@ function DropdownMenuBottomSheet({
     if (!isOpen || openModalityRef.current !== 'keyboard') {
       return;
     }
-    const frame = requestAnimationFrame(() => {
-      actionListRef.current
-        ?.querySelector<HTMLElement>('button:not(:disabled), a[href]')
-        ?.focus({preventScroll: true});
+    const findFirstAction = () =>
+      actionListRef.current?.querySelector<HTMLElement>(
+        'button:not(:disabled), a[href]',
+      ) ?? null;
+    let observer: MutationObserver | null = null;
+    let frame = requestAnimationFrame(() => {
+      const action = findFirstAction();
+      if (action != null) {
+        action.focus({preventScroll: true});
+        return;
+      }
+      // The sheet loads on demand, so a keyboard open can arrive before its
+      // rows exist. Wait for them, then focus a frame later so the sheet's
+      // own open-focus has already run.
+      observer = new MutationObserver(() => {
+        const loaded = findFirstAction();
+        if (loaded == null) {
+          return;
+        }
+        observer?.disconnect();
+        observer = null;
+        frame = requestAnimationFrame(() => {
+          loaded.focus({preventScroll: true});
+        });
+      });
+      observer.observe(document.body, {childList: true, subtree: true});
     });
-    return () => cancelAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+    };
   }, [currentItems, isOpen]);
 
   useEffect(() => {
@@ -987,6 +920,43 @@ function DropdownMenuPopover({
   // above it ends the gesture in flight through this ref.
   const cancelMenuPressRef = useRef<() => void>(() => {});
 
+  // Submenu flyouts are `popover="manual"` elements nested inside the menu's
+  // `popover="auto"` element, so the browser's light dismiss of the menu never
+  // reaches them: without a sweep they keep their open state and their
+  // top-layer entry while the menu is hidden, and re-anchor to the viewport
+  // corner when the menu reopens (#6893). Closing them through the popover
+  // API lets useLayer's toggle handling reset their state. Only flyouts that
+  // are actually open are touched: `:popover-open` ships wherever
+  // `hidePopover` does (they are one API), and the display fallback keeps its
+  // own open signal (`display: block`) so it is guarded the same way.
+  const hideOpenFlyouts = useCallback(() => {
+    const menuPopover = contentRef.current;
+    if (!menuPopover) {
+      return;
+    }
+    // Innermost first: hiding a flyout may unmount the flyouts nested inside
+    // it, and a detached element no longer has the toggle listener that
+    // resets its open state.
+    const flyouts = [
+      ...menuPopover.querySelectorAll<HTMLElement>('[popover]'),
+    ].reverse();
+    for (const flyout of flyouts) {
+      if (typeof flyout.hidePopover === 'function') {
+        if (flyout.matches(':popover-open')) {
+          flyout.hidePopover();
+        }
+      } else if (flyout.style.display === 'block') {
+        flyout.style.display = 'none';
+        const toggle = new Event('toggle', {bubbles: false});
+        Object.defineProperty(toggle, 'newState', {
+          value: 'closed',
+          configurable: true,
+        });
+        flyout.dispatchEvent(toggle);
+      }
+    }
+  }, []);
+
   // Focus lands somewhere stated when the menu closes. A press outside that
   // landed on a focusable control has already moved focus there; leave it.
   // Otherwise — a row acted, Escape, a press on nothing — focus returns to
@@ -994,6 +964,9 @@ function DropdownMenuPopover({
   // keyboard (the modality tracker decides; the suppressed style hides the
   // pointer case, which Safari would otherwise paint after a touch pick).
   const handleLayerHide = useCallback(() => {
+    // Whatever closed the menu — light dismiss, the dismissal stack, Escape
+    // or a controlled close — its flyouts close with it.
+    hideOpenFlyouts();
     if (suppressControlledRollbackHideRef.current) {
       suppressControlledRollbackHideRef.current = false;
       return;
@@ -1024,7 +997,7 @@ function DropdownMenuPopover({
     // also reaches a control the caller renders, which the browser would
     // otherwise ring (Chromium after a mouse pick, WebKit after a touch).
     focusForLastInput(trigger, {preventScroll: true});
-  }, [isControlled, onOpenChange, prepareFocusReturn]);
+  }, [hideOpenFlyouts, isControlled, onOpenChange, prepareFocusReturn]);
 
   // Defer item focus until the layer has committed open, so focus restore
   // captures the trigger instead of the first menu item.
@@ -1202,44 +1175,13 @@ function DropdownMenuPopover({
   // second time.
   const moveDialogTab = useCallback(
     (e: React.KeyboardEvent, isFromFlyout = false) => {
-      const menu = listRef.current;
-      if (menu == null) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      // A named radio group is one stop, as the browser's own Tab order has it.
-      const cycle = collapseRadioGroups(
-        [
-          ...tabbablesIn(headerRef.current),
-          menu,
-          ...tabbablesIn(footerRef.current),
-        ],
-        document.activeElement,
-        e.shiftKey,
+      moveRegionsTab(
+        e,
+        listRef.current,
+        headerRef.current,
+        footerRef.current,
+        isFromFlyout,
       );
-      if (cycle.length === 1) {
-        // Nothing else to reach: focus stays in the menu. From a flyout that
-        // has just closed itself, that is the menu's own stop.
-        if (isFromFlyout) {
-          menu.focus();
-        }
-        return;
-      }
-      const active = document.activeElement;
-      const menuIndex = cycle.indexOf(menu);
-      // A row, or a row of an open flyout, counts as the menu's stop.
-      let index = menu.contains(active)
-        ? menuIndex
-        : cycle.findIndex(el => el === active || el.contains(active));
-      if (index < 0) {
-        index = menuIndex;
-      }
-      const step = e.shiftKey ? -1 : 1;
-      const next = cycle[(index + step + cycle.length) % cycle.length];
-      if (!focusRegionControl(next)) {
-        menu.focus();
-      }
     },
     [listRef],
   );
@@ -1694,7 +1636,9 @@ function DropdownMenuPopover({
             )}>
             <MenuRegionsContext value={hasRegions}>
               <DropdownMenuContext value={contextValue}>
-                {menuContent}
+                <DropdownMenuRootOpenContext value={isOpen}>
+                  {menuContent}
+                </DropdownMenuRootOpenContext>
               </DropdownMenuContext>
             </MenuRegionsContext>
           </div>,

package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs

@@ -51,7 +51,7 @@ export const docs = {
       name: 'icon',
       type: 'IconType',
       description:
-        'Icon to display before the label. See `npx @astryxdesign/cli docs icons` for valid semantic names.',
+        'Icon to display before the label. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'value',

package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -98,7 +98,7 @@ export interface DropdownMenuCheckboxItemProps extends Omit<
   description?: ReactNode;
   /**
    * Icon to display before the label. Accepts a semantic icon name (see
-   * `npx @astryxdesign/cli docs icons`) or a rendered node.
+   * `astryx docs icons`) or a rendered node.
    */
   icon?: ReactNode | IconType;
   /**

package/src/DropdownMenu/DropdownMenuContext.tsx

@@ -65,6 +65,30 @@ export interface DropdownMenuContextValue {
   menuLabel?: string;
 }
 
+/**
+ * Whether the root menu of this layer tree is open; internal companion to
+ * `DropdownMenuContext`, on its own unexported context so the public
+ * `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
+ * intent must die with the menu: a hover-open scheduled on its trigger
+ * before the menu closed from elsewhere would otherwise fire into the
+ * hidden menu and reopen the flyout behind it (#6893). `null` means no
+ * signal, treated as open, matching providers that have no state to give.
+ * @internal
+ */
+export const DropdownMenuRootOpenContext = createLayerScopedContext<
+  boolean | null
+>(null);
+DropdownMenuRootOpenContext.displayName = 'DropdownMenuRootOpenContext';
+
+/**
+ * Whether the root menu backing these compound items is open. True when no
+ * provider gave a signal.
+ * @internal
+ */
+export function useDropdownMenuRootOpen(): boolean {
+  return use(DropdownMenuRootOpenContext) !== false;
+}
+
 export const DropdownMenuContext =
   createLayerScopedContext<DropdownMenuContextValue | null>(null);
 DropdownMenuContext.displayName = 'DropdownMenuContext';

package/src/DropdownMenu/DropdownMenuDivider.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   displayName: 'Dropdown Menu Divider',
   isHiddenFromOverview: true,
   description:
-    'A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven equivalent is the `{type: "divider"}` entry in `items`; both modes render this component, so they look and theme identically.',
+    'A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven equivalent is the `{type: "divider"}` entry in `items`; both modes render this component, so they look and theme identically. Host attributes and DOM handlers (id, data-*, aria-*) reach the separator; its role and orientation stay component-owned.',
   props: [
     {
       name: 'xstyle',
@@ -27,7 +27,7 @@ export const docsDense = {
   isHiddenFromOverview: true,
   displayName: 'Dropdown Menu Divider',
   description:
-    'separator row for compound menus; compound peer of the data API\'s {type: "divider"}',
+    'separator row for compound menus; compound peer of the data API\'s {type: "divider"}; host attributes reach the separator, role/orientation stay owned',
   propDescriptions: {
     xstyle: 'StyleX styles applied after the menu spacing',
   },