@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f

package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx

@@ -0,0 +1,426 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseEdgeCases.test.tsx
+ * @input Uses vitest, @testing-library/react, MobileNav + AppShell + SideNav
+ * @output Edge-case coverage for the deferred close introduced for #4290
+ * @position Testing; guards the close path of MobileNav.tsx
+ *
+ * #4290 moved the unmount close into its own effect so the deferred slide-out
+ * close is no longer cut off by its own cleanup. That split is the risky part:
+ * the close now depends on a timer surviving to fire, and on the unmount-only
+ * effect catching every teardown the timer misses. These tests cover the paths
+ * where the two could disagree and leave a modal dialog open — which blocks the
+ * whole document, whether or not the drawer is rendered.
+ *
+ * The invariant behind all of them: the drawer must never be left open. Being
+ * slow to close is a glitch; never closing is a wedged page.
+ */
+
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
+import {StrictMode} from 'react';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import {MobileNav} from './MobileNav';
+import {AppShell} from '../AppShell/AppShell';
+import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
+import {stubMatchMedia} from '../__tests__/stubMatchMedia';
+
+// jsdom doesn't implement showModal/close on <dialog>, so we mock them
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal =
+    HTMLDialogElement.prototype.showModal ||
+    function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+    };
+  HTMLDialogElement.prototype.close =
+    HTMLDialogElement.prototype.close ||
+    function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+    };
+});
+
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// `matches` has to depend on the query: a blanket `matches: true` puts AppShell
+// below its breakpoint, which these tests need, but it also matches
+// `prefers-reduced-motion`, which caps the close delay at 0 — every test here
+// would run against an immediate close while appearing to exercise the real
+// delay. See the header of stubMatchMedia.ts.
+
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', MockResizeObserver);
+  stubMatchMedia({reduceMotion: false});
+});
+
+afterEach(() => {
+  document.documentElement.style.overflow = '';
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function Drawer({
+  isOpen,
+  side,
+}: {
+  isOpen: boolean;
+  side?: 'start' | 'end' | 'auto';
+}) {
+  return (
+    <MobileNav
+      isOpen={isOpen}
+      onOpenChange={() => {}}
+      side={side}
+      data-testid="mobile-nav">
+      <span>Nav content</span>
+    </MobileNav>
+  );
+}
+
+function TestShell() {
+  return (
+    <AppShell
+      sideNav={
+        <SideNav>
+          <SideNavSection title="Test" isHeaderHidden>
+            <SideNavItem label="Home" />
+          </SideNavSection>
+        </SideNav>
+      }
+      mobileNav={{breakpoint: 'md'}}>
+      <div>Content</div>
+    </AppShell>
+  );
+}
+
+describe('MobileNav close path edge cases', () => {
+  it('survives StrictMode double-invoked effects', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(
+        <StrictMode>
+          <Drawer isOpen />
+        </StrictMode>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      // StrictMode mounts effects, tears them down, and mounts them again. The
+      // unmount-only effect closes the dialog during that teardown, so the
+      // open/close effect has to re-open it on the second mount.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        rerender(
+          <StrictMode>
+            <Drawer isOpen={false} />
+          </StrictMode>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes the dialog when unmounted while fully open', () => {
+    const {unmount} = render(<Drawer isOpen />);
+    const dialog = screen.getByTestId('mobile-nav');
+    expect(dialog).toHaveAttribute('open');
+
+    unmount();
+
+    // Left open, the next showModal() is skipped and the drawer can never be
+    // re-opened (#3091) — and the document stays blocked meanwhile.
+    expect(dialog).not.toHaveAttribute('open');
+  });
+
+  it('does not restart the pending close when the side prop changes', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen side="start" />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} side="start" />);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // Most of the way through the pending close...
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // ...then change the side. Side resolution lives in its own effect, so
+      // this has to leave the close alone. Were `side` a dep of the open/close
+      // effect, its cleanup would cancel the pending close and re-arm a fresh
+      // full delay — while the CSS hold keeps running from the commit that
+      // started the slide-out. The close would then land after the drawer had
+      // stopped being rendered, which is the #4290 state again.
+      //
+      // The split advance is the whole point: the total must clear one delay
+      // but not two.
+      act(() => {
+        rerender(<Drawer isOpen={false} side="end" />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(100);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('settles closed after a rapid open/close/open/close burst', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen={false} />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('restores documentElement overflow once the drawer has closed', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(document.documentElement.style.overflow).toBe('clip');
+
+      // Two acts on purpose: the close timer is armed by the effect that runs
+      // when the first act flushes, so advancing inside that same act would
+      // advance past nothing and the drawer would never actually close.
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      // Pin the close itself. The effect cleanup resets overflow on every
+      // isOpen flip, so the overflow assertion alone passes even with the whole
+      // close path deleted — the test name would be the only thing left of it.
+      expect(dialog).not.toHaveAttribute('open');
+      // A drawer that closes but leaves the page scroll-locked is its own
+      // flavour of "the page is broken and nothing says why".
+      expect(document.documentElement.style.overflow).toBe('');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('restores documentElement overflow when unmounted while open', () => {
+    const {unmount} = render(<Drawer isOpen />);
+    expect(document.documentElement.style.overflow).toBe('clip');
+
+    unmount();
+
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+
+  it('leaves no pending close timer behind after unmount', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender, unmount} = render(<Drawer isOpen />);
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      unmount();
+
+      // The queued close must be cancelled, not left to fire against a
+      // detached node.
+      expect(vi.getTimerCount()).toBe(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes inside the display hold when a theme shortens it', () => {
+    // The hold is `--duration-medium`, which themes rewrite: the shipped y2k
+    // theme uses 250ms and the documented "Snappy" preset does too. A close
+    // scheduled on the hold's boundary lands on the frame the drawer stops
+    // being rendered — which is exactly the #4290 state. The delay has to be
+    // derived from the hold actually in effect, not assumed.
+    // Full motion (the file default) — under reduced motion the close is
+    // immediate and the boundary is never exercised.
+    vi.useFakeTimers();
+    try {
+      const hold = 250;
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={{transitionDuration: `${hold}ms`}}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(getComputedStyle(dialog).transitionDuration).toBe(`${hold}ms`);
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={{transitionDuration: `${hold}ms`}}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(hold - 1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes on the next macrotask when the hold is zero', () => {
+    // A theme can set --duration-medium to 0 — nothing validates motion values
+    // — and then `display` flips on the next style recalc with no hold at all.
+    // No delay is safe at that point, so the close has to go out immediately
+    // rather than fall back to the cap and land a quarter-second after the
+    // drawer stopped being rendered, which is #4290 restored.
+    vi.useFakeTimers();
+    try {
+      const style = {transitionDuration: '0ms'};
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={style}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={style}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes on the next macrotask under reduced motion', () => {
+    // Reduced motion should make the close *sooner*, not the safety margin
+    // *smaller*. Shortening the hold to match leaves no slack: one slow frame
+    // between the commit and the close macrotask and the drawer has already
+    // stopped being rendered — #4290 again, on the accessibility setting.
+    //
+    // Only the delay is assertable here. That the hold itself stays long is a
+    // CSS fact — styles.dialog carries no reduced-motion override, unlike
+    // styles.drawer and ::backdrop — and jsdom does not evaluate media queries
+    // inside stylesheets, so there is nothing to read back.
+    stubMatchMedia({reduceMotion: true});
+    vi.useFakeTimers();
+    try {
+      const style = {transitionDuration: '410ms'};
+      const {rerender} = render(
+        <MobileNav
+          isOpen
+          onOpenChange={() => {}}
+          style={style}
+          data-testid="mobile-nav">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(
+          <MobileNav
+            isOpen={false}
+            onOpenChange={() => {}}
+            style={style}
+            data-testid="mobile-nav">
+            <span>Nav content</span>
+          </MobileNav>,
+        );
+      });
+      act(() => {
+        vi.advanceTimersByTime(1);
+      });
+
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('closes the AppShell drawer when dismissed with Escape', () => {
+    render(<TestShell />);
+    fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
+    const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
+    expect(dialog).toHaveAttribute('open');
+
+    fireEvent(dialog, new Event('cancel', {cancelable: true, bubbles: false}));
+
+    expect(dialog).not.toHaveAttribute('open');
+  });
+
+  it('closes the AppShell drawer when the backdrop is clicked', () => {
+    render(<TestShell />);
+    fireEvent.click(screen.getByRole('button', {name: /open navigation/i}));
+    const dialog = screen.getAllByRole('dialog', {hidden: true})[0];
+    expect(dialog).toHaveAttribute('open');
+
+    // A click landing on the dialog itself, not the drawer panel, is a
+    // backdrop dismiss.
+    fireEvent.click(dialog);
+
+    expect(dialog).not.toHaveAttribute('open');
+  });
+});

package/src/MobileNav/MobileNavCloseTiming.test.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseTiming.test.ts
+ * @input Uses vitest, parseShortestDurationMs from MobileNav
+ * @output Unit coverage for the close-delay duration parsing (#4290)
+ * @position Testing; guards the timing helper behind MobileNav's deferred close
+ *
+ * Through the component this helper is only ever reachable via jsdom, which
+ * echoes an inline `250ms` back verbatim and never resolves `var()`. Browsers do
+ * neither: they serialise computed `<time>` values in seconds, so `"0.41s"` is
+ * the only shape the helper sees in production and `"250ms"` is a shape it never
+ * sees. Reading it directly is the only way the seconds branch, a list, and a
+ * zero hold get covered at all.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {parseShortestDurationMs} from './MobileNav';
+
+describe('parseShortestDurationMs', () => {
+  it.each([
+    // How browsers actually serialise a computed transition-duration.
+    ['0.41s', 410],
+    ['0.25s', 250],
+    ['1s', 1000],
+    // jsdom's shape: an inline declaration echoed back unchanged.
+    ['250ms', 250],
+    // Lists. The dialog transitions one property today, but a style or xstyle
+    // prop can add more, and only the shortest entry is safe to close inside.
+    ['0.41s, 0.12s', 120],
+    ['120ms, 410ms', 120],
+    // A zero hold is the #4290 state itself. It has to read as 0 — meaning
+    // "close now" — rather than as unreadable, which would fall back to the cap
+    // and schedule the close long after the drawer stopped being rendered.
+    ['0s', 0],
+    ['0ms', 0],
+  ])('reads %j as %ims', (value, expected) => {
+    expect(parseShortestDurationMs(value)).toBeCloseTo(expected, 6);
+  });
+
+  it.each([
+    // An unresolved var() — jsdom, or any style read outside a browser.
+    ['var(--duration-medium)'],
+    // A CSS math function reads as unreadable too, so the caller falls back to
+    // the cap rather than deriving a delay from a number it did not compute.
+    ['max(150ms, var(--duration-medium))'],
+    // A bare number is not a duration.
+    ['250'],
+    [''],
+    ['   '],
+  ])('reports %j as unreadable', value => {
+    expect(parseShortestDurationMs(value)).toBeNull();
+  });
+
+  it('skips unreadable entries rather than discarding the whole list', () => {
+    expect(parseShortestDurationMs('var(--x), 0.3s')).toBeCloseTo(300, 6);
+  });
+});

package/src/MobileNav/MobileNavCloseVisibility.test.tsx

@@ -0,0 +1,172 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseVisibility.test.tsx
+ * @input Uses vitest, @testing-library/react, MobileNav
+ * @output Regression tests keeping the drawer rendered until the dialog closes
+ * @position Testing; guards the close path of MobileNav.tsx
+ *
+ * Repro for #4290 (page unresponsive after closing the drawer in Safari 26.1).
+ *
+ * A `<dialog>` opened with `showModal()` blocks the rest of the document for as
+ * long as it stays in the top layer — whether or not it is rendered. The drawer
+ * hid itself the moment `isOpen` flipped, while the native `close()` only ran
+ * afterwards from an effect, so `close()` was always called on a dialog that was
+ * already `display: none`. A browser that fails to un-block the document when
+ * such a dialog closes leaves the page inert with no JavaScript error.
+ *
+ * The fix keeps `display` in the transition with `allow-discrete`, so the drawer
+ * stays rendered until the slide-out finishes, and moves the unmount close into
+ * its own effect so the deferred close is no longer cut off by its own cleanup.
+ *
+ * Note on scope: jsdom has no top layer and no CSS transitions, so the inertness
+ * itself is not observable here. These tests pin the two mechanisms that prevent
+ * it — the declared transition, and the close actually being deferred.
+ */
+
+import {describe, it, expect, vi, beforeAll} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {MobileNav} from './MobileNav';
+import {stubMatchMedia} from '../__tests__/stubMatchMedia';
+
+// jsdom doesn't implement showModal/close on <dialog>, so we mock them
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal =
+    HTMLDialogElement.prototype.showModal ||
+    function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+    };
+  HTMLDialogElement.prototype.close =
+    HTMLDialogElement.prototype.close ||
+    function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+    };
+});
+
+function Drawer({isOpen}: {isOpen: boolean}) {
+  return (
+    <MobileNav isOpen={isOpen} onOpenChange={() => {}} data-testid="mobile-nav">
+      <span>Nav content</span>
+    </MobileNav>
+  );
+}
+
+describe('MobileNav stays rendered while it closes', () => {
+  it('transitions display with allow-discrete so it hides only once closed', () => {
+    render(<Drawer isOpen />);
+    const style = getComputedStyle(screen.getByTestId('mobile-nav'));
+
+    // Without these two the drawer blanks out the instant `isOpen` flips,
+    // leaving an open modal dialog that nothing renders — and nothing can
+    // click past. See the file header.
+    expect(style.transitionProperty).toContain('display');
+    expect(style.transitionBehavior).toBe('allow-discrete');
+    // A zero hold is the bug wearing the fix's clothes: the drawer stops being
+    // rendered on the next style recalc, before any effect can close it.
+    expect(style.transitionDuration.trim()).not.toBe('');
+    // The hold must stay tied to the motion token rather than a literal: the
+    // close delay is derived by reading this value back, so a hardcoded hold
+    // and a themed slide-out would drift apart again. jsdom leaves var()
+    // unresolved, which is exactly why this reads as a declaration.
+    expect(style.transitionDuration).toContain('var(');
+  });
+
+  it('keeps the native dialog open until the slide-out has run', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+
+      // The drawer is on its way out but the dialog is still open, so it is
+      // still rendered and still the thing holding the top layer.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('still closes the dialog when unmounted mid-slide-out', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender, unmount} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // Teardown before the timer fires — the unmount-only effect has to close
+      // the dialog, or the next showModal() is skipped and the drawer can never
+      // be re-opened (#3091).
+      unmount();
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('still defers the close under prefers-reduced-motion', () => {
+    // Query-aware on purpose. A blanket `matches: true` is the stub shape that
+    // once left 9 of 11 tests in the sibling edge-case file silently running
+    // against a 0ms close delay — see the header of stubMatchMedia.ts. It is
+    // inert for this file today (MobileNav renders standalone here, so
+    // prefers-reduced-motion is the only query in play), but the shape is the
+    // hazard, not the blast radius.
+    stubMatchMedia({reduceMotion: true});
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      // Reduced motion caps the delay at 0 — but 0 is still a macrotask. What
+      // must not happen is the close landing synchronously in the commit, while
+      // the dialog is mid-flip. This pins deferral, not duration.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        vi.advanceTimersByTime(20);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it('re-opening mid-slide-out cancels the pending close', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+
+      // The queued close must not fire after the drawer has been re-opened.
+      expect(dialog).toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});