@astryxdesign/core 0.7.4 → 0.7.5-canary.031a639

package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx

@@ -26,6 +26,7 @@ import {warmMenuBottomSheet} from './__tests__/warmMenuBottomSheet';
 import {IconButton} from '../IconButton';
 import {RadioList, RadioListItem} from '../RadioList';
 import {COMPACT_TOUCH_PRESENTATION_QUERY} from '../hooks/useAdaptivePresentation';
+import {Theme, defineTheme} from '../theme';
 import {rtlStyles} from '../utils';
 
 beforeEach(() => {
@@ -450,6 +451,54 @@ describe('DropdownMenuSubMenu host attributes', () => {
     ).toHaveAttribute('aria-labelledby', 'move-row');
   });
 
+  it('reports each flyout open and close to onOpenChange once', async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuSubMenu label="Move to" onOpenChange={onOpenChange}>
+          <DropdownMenuItem label="Folder A" onClick={() => {}} />
+        </DropdownMenuSubMenu>
+      </DropdownMenu>,
+    );
+    const trigger = await openRoot(user);
+    expect(onOpenChange).not.toHaveBeenCalled();
+    trigger.focus();
+    await user.keyboard('{ArrowRight}');
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-expanded', 'true'),
+    );
+    expect(onOpenChange.mock.calls).toEqual([[true]]);
+    await user.keyboard('{Escape}');
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-expanded', 'false'),
+    );
+    expect(onOpenChange.mock.calls).toEqual([[true], [false]]);
+  });
+
+  it('menuDataTestId names the flyout menu, and data-testid the row', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuSubMenu
+          label="Move to"
+          data-testid="move-row"
+          menuDataTestId="move-menu">
+          <DropdownMenuItem label="Folder A" onClick={() => {}} />
+        </DropdownMenuSubMenu>
+      </DropdownMenu>,
+    );
+    const trigger = await openRoot(user);
+    expect(trigger).toHaveAttribute('data-testid', 'move-row');
+    await user.click(trigger);
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-expanded', 'true'),
+    );
+    expect(screen.getByTestId('move-menu')).toBe(
+      screen.getByRole('menu', {name: 'Move to', hidden: true}),
+    );
+  });
+
   it('a ref reaches the trigger row', async () => {
     const user = userEvent.setup();
     const ref = createRef<HTMLElement>();
@@ -1407,6 +1456,62 @@ describe('DropdownMenuSubMenu drill-in on a phone', () => {
     await waitFor(() => shownRow('Back to Actions'));
   });
 
+  it("follows the theme's md point: a 900 px touch screen drills in under md 1000, and keeps the flyout under the default (spec:AST-012 FR9)", async () => {
+    // A query-aware stand-in for a 900 × 1024 coarse-pointer screen: `,` is
+    // or, `and` is and.
+    const screenSize = {width: 900, height: 1024};
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockImplementation((query: string) => ({
+        matches: query.split(', ').some(alternative =>
+          alternative.split(' and ').every(part => {
+            if (part === '(pointer: coarse)') {
+              return true;
+            }
+            const range = /^\((width|height) < (\d+)px\)$/.exec(part);
+            return (
+              range != null &&
+              screenSize[range[1] as 'width' | 'height'] < Number(range[2])
+            );
+          }),
+        ),
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    const wideMd = defineTheme({
+      name: 'wide-md-drill-in',
+      adaptations: {widthBreakpoints: {md: 1000, lg: 1100}},
+    });
+    const user = userEvent.setup();
+    const menu = (
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuSubMenu label="Move to">
+          <DropdownMenuItem label="Folder A" onClick={() => {}} />
+        </DropdownMenuSubMenu>
+      </DropdownMenu>
+    );
+    // The default md point (768): not compact, so the sub-menu flies out.
+    const {unmount} = render(menu);
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    fireEvent.click(await waitFor(() => shownRow('Move to')), {detail: 1});
+    const flyout = await waitFor(() => shownMenu('Move to'));
+    expect(flyout.closest('[popover]')).not.toBe(
+      shownMenu('Actions').closest('[popover]'),
+    );
+    unmount();
+    // A theme whose md is 1000: the same screen is compact, and it drills in.
+    render(<Theme theme={wideMd}>{menu}</Theme>);
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    fireEvent.click(await waitFor(() => shownRow('Move to')), {detail: 1});
+    await waitFor(() => shownRow('Back to Actions'));
+  });
+
   it('closing the menu resets the drilled view', async () => {
     stubCompactTouch(true);
     const user = userEvent.setup();

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -40,9 +40,6 @@
  * the row. The list keeps this level's own roving focus, typeahead and press
  * model, so nothing beside the row needs to know.
  *
- * Prior art: legacy internal XDS `XDSDropdownSubMenuItem` (APG menubar-
- * navigation submenu). This re-expresses the same contract on Astryx primitives.
- *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
@@ -347,7 +344,7 @@ interface DropdownMenuSubMenuBaseProps extends Omit<
   isDisabled?: boolean;
   /**
    * Show a spinner in place of the caret, e.g. while a lazy submenu's children
-   * are loading. Ported from the legacy `hasSpinner` async-submenu affordance.
+   * are loading.
    * @default false
    */
   hasSpinner?: boolean;
@@ -364,7 +361,7 @@ interface DropdownMenuSubMenuBaseProps extends Omit<
    * box; `adaptive` drills in when a finger opened the menu — a
    * `(pointer: coarse)` device, decided when the menu opened — and flies out
    * otherwise. Drill-in needs a `DropdownMenu` or `ContextMenu` root.
-   *  'adaptive'
+   * @default 'adaptive'
    */
   presentation?: DropdownMenuSubMenuPresentation;
   /**
@@ -386,7 +383,10 @@ interface DropdownMenuSubMenuBaseProps extends Omit<
   footer?: ReactNode;
   /** Test id for the trigger row. */
   'data-testid'?: string;
-  /** Test id for the flyout menu. */
+  /**
+   * Test id for the sub-menu's own `role="menu"` element: the flyout, or the
+   * drilled-in list on a phone.
+   */
   menuDataTestId?: string;
   /**
    * Ref forwarded to the trigger row — the element carrying `role="menuitem"`

package/src/DropdownMenu/MenuBottomSheet.tsx

@@ -4,14 +4,19 @@
 
 /**
  * @file MenuBottomSheet.tsx
- * @input Uses BottomSheet and Section
- * @output Internal action-sheet host for menu content
+ * @input Uses BottomSheet
+ * @output Internal action-sheet host for menu content; nothing of the sheet renders while it is closed
  * @position Shared by DropdownMenu and ContextMenu adaptive presentations
  */
 
-import type {ReactNode, RefObject} from 'react';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from 'react';
 import {BottomSheet} from '../BottomSheet/BottomSheet';
-import {Section} from '../Section/Section';
 
 interface MenuBottomSheetProps {
   finalFocusRef?: RefObject<HTMLElement | null>;
@@ -21,6 +26,13 @@ interface MenuBottomSheetProps {
   children: ReactNode;
 }
 
+/**
+ * The sheet renders nothing at rest (architecture:component-style-authoring
+ * INV7): it mounts as it opens, and after it closes it stays only until its
+ * dialog has closed, so the exit plays out and focus returns to the trigger.
+ * The sheet has no content padding: callers inset their content with
+ * menuBottomSheetStyles.content, so no wrapper sits between the sheet and it.
+ */
 export function MenuBottomSheet({
   finalFocusRef,
   isOpen,
@@ -28,17 +40,40 @@ export function MenuBottomSheet({
   label,
   children,
 }: MenuBottomSheetProps) {
+  const [isMounted, setIsMounted] = useState(isOpen);
+  if (isOpen && !isMounted) {
+    setIsMounted(true);
+  }
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (isOpen || !isMounted) {
+      return;
+    }
+    const dialog = panelRef.current?.closest('dialog');
+    if (dialog == null || !dialog.open) {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- the native <dialog> has already closed, so the exit is over: unmount the sheet
+      setIsMounted(false);
+      return;
+    }
+    const handleClose = () => setIsMounted(false);
+    dialog.addEventListener('close', handleClose);
+    return () => dialog.removeEventListener('close', handleClose);
+  }, [isMounted, isOpen]);
+
+  if (!isMounted) {
+    return null;
+  }
   return (
     <BottomSheet
+      ref={panelRef}
       finalFocusRef={finalFocusRef}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       label={label}
       height="hug"
+      padding={0}
       purpose="info">
-      <Section paddingBlockStart={4} paddingBlockEnd={0} paddingInline={1}>
-        {children}
-      </Section>
+      {children}
     </BottomSheet>
   );
 }

package/src/DropdownMenu/MenuBottomSheetActionList.tsx

@@ -33,9 +33,9 @@ const styles = stylex.create({
     userSelect: 'none',
   },
   destructiveAction: {
-    '--_item-label-color': colorVars['--color-error'],
-    '--_item-description-color': colorVars['--color-error'],
-    color: colorVars['--color-error'],
+    '--_item-label-color': colorVars['--color-text-error'],
+    '--_item-description-color': colorVars['--color-text-error'],
+    color: colorVars['--color-text-error'],
   },
   structuralItem: {
     listStyleType: 'none',

package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y audit DropdownMenuDivider
 
 /**
  * @file DropdownMenuDividerAudit.a11y.chromium.spec.ts

package/src/DropdownMenu/__tests__/DropdownMenuDrillIn.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file DropdownMenuDrillIn.a11y.chromium.spec.ts

package/src/DropdownMenu/__tests__/DropdownMenuFocusReturn.a11y.browser.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file DropdownMenuFocusReturn.a11y.browser.spec.ts

package/src/DropdownMenu/__tests__/DropdownMenuGroupAudit.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y audit DropdownMenuGroup
 
 /**
  * @file DropdownMenuGroupAudit.a11y.chromium.spec.ts

package/src/DropdownMenu/__tests__/DropdownMenuItemAudit.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y audit DropdownMenuItem
 
 /**
  * @file DropdownMenuItemAudit.a11y.chromium.spec.ts

package/src/DropdownMenu/__tests__/DropdownMenuRadioGroupAudit.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y audit DropdownMenuRadioGroup
 
 /**
  * @file DropdownMenuRadioGroupAudit.a11y.chromium.spec.ts