@astryxdesign/core 0.7.6-canary.f52dbbe → 0.7.6-canary.f67d5fa

package/src/hooks/useFocusTrapEscapeShim.test.tsx

@@ -1,166 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useFocusTrapEscapeShim.test.tsx
- * @input Uses vitest, @testing-library/react, useFocusTrap, Dialog, Lightbox,
- *   MobileNav, Tooltip, Popover
- * @output Tests that hasActiveFocusTrapEscape still means what it meant in
- *   0.4.2 — an Escape-dismissible FOCUS TRAP is active, not "a layer is open"
- * @position Testing; guards the deprecated public shim in useFocusTrap.ts
- *
- * The shim is public API. Its answer must not change now that Escape moved to
- * the shared stack: existing consumers still observe whether an
- * Escape-participating focus trap is active. Families that never trapped focus
- * stay out of this count; BottomSheetSwitcher preserves its historical modal
- * signal without registering a second dismissal owner.
- *
- * SYNC: When useFocusTrap.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import {render} from '@testing-library/react';
-
-import {hasActiveFocusTrapEscape, useFocusTrap} from './useFocusTrap';
-import {Dialog} from '../Dialog/Dialog';
-import {Lightbox} from '../Lightbox/Lightbox';
-import {MobileNav} from '../MobileNav/MobileNav';
-import {Popover} from '../Popover/Popover';
-import {Tooltip} from '../Tooltip/Tooltip';
-import {resetLayerStackForTests} from '../Layer/layerStack';
-
-beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-  });
-});
-
-afterEach(() => {
-  resetLayerStackForTests();
-});
-
-function Trap({
-  isActive = true,
-  hasEscape = true,
-  children,
-}: {
-  isActive?: boolean;
-  hasEscape?: boolean;
-  children?: React.ReactNode;
-}) {
-  const {containerRef} = useFocusTrap<HTMLDivElement>({
-    isActive,
-    onEscape: hasEscape ? () => {} : undefined,
-  });
-  return <div ref={containerRef}>{children}</div>;
-}
-
-describe('hasActiveFocusTrapEscape', () => {
-  it('is false with nothing mounted', () => {
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is true for an active trap with an Escape handler', () => {
-    render(<Trap />);
-    expect(hasActiveFocusTrapEscape()).toBe(true);
-  });
-
-  it('is false for a trap with no Escape handler', () => {
-    render(<Trap hasEscape={false} />);
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is false for an inactive trap', () => {
-    render(<Trap isActive={false} />);
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is true for nested traps, and false again once both unmount', () => {
-    const {unmount} = render(
-      <Trap>
-        <Trap />
-      </Trap>,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(true);
-    unmount();
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is true for an open Popover, which traps focus', () => {
-    render(
-      <Popover
-        isOpen={true}
-        onOpenChange={() => {}}
-        content="Popover body"
-        label="Popover">
-        <button type="button">Open</button>
-      </Popover>,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(true);
-  });
-
-  // The families below are all on the shared dismissal stack and none of them
-  // traps focus. Answering `true` for these is what broke the bottom sheet.
-  it('is false for an open Dialog', () => {
-    render(
-      <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Dialog">
-        Body
-      </Dialog>,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is false for an open Lightbox', () => {
-    render(
-      <Lightbox
-        isOpen={true}
-        onOpenChange={() => {}}
-        media={{src: '/photo.jpg', alt: 'A photo'}}
-      />,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is false for an open MobileNav', () => {
-    render(
-      <MobileNav isOpen={true} onOpenChange={() => {}} label="Drawer">
-        <span>Nav</span>
-      </MobileNav>,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is false for a showing Tooltip', () => {
-    render(
-      <Tooltip content="Tip" isDefaultOpen={true}>
-        <button type="button">Trigger</button>
-      </Tooltip>,
-    );
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-
-  it('is true for a Popover inside a Dialog, and false once the Popover closes', () => {
-    function Scene({isPopoverOpen}: {isPopoverOpen: boolean}) {
-      return (
-        <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Dialog">
-          <Popover
-            isOpen={isPopoverOpen}
-            onOpenChange={() => {}}
-            content="Popover body"
-            label="Popover">
-            <button type="button">Open</button>
-          </Popover>
-        </Dialog>
-      );
-    }
-    const {rerender} = render(<Scene isPopoverOpen={true} />);
-    expect(hasActiveFocusTrapEscape()).toBe(true);
-
-    rerender(<Scene isPopoverOpen={false} />);
-    expect(hasActiveFocusTrapEscape()).toBe(false);
-  });
-});

package/src/hooks/useGridFocus.test.tsx

@@ -1,165 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useGridFocus.test.tsx
- * @input Uses vitest, @testing-library/react, useGridFocus hook
- * @output Unit tests for useGridFocus roving tabindex + RTL navigation
- * @position Testing; validates useGridFocus.ts roving-tabindex ownership
- *
- * SYNC: When useGridFocus.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
-import {useGridFocus} from './useGridFocus';
-
-const NO_DISABLED: number[] = [];
-
-/**
- * A 3x3 grid of cells shaped like Calendar: each `role="gridcell"` div wraps a
- * focusable `<button>` (the focus target). `seed` marks which button starts
- * tabbable (mirrors Calendar seeding the selected/today/first-enabled day).
- */
-function Grid({
-  disabled = NO_DISABLED,
-  seed = 0,
-  dir,
-  ...opts
-}: {
-  disabled?: number[];
-  seed?: number;
-  dir?: 'ltr' | 'rtl';
-} & Partial<Parameters<typeof useGridFocus>[0]>) {
-  const {gridRef, handleKeyDown, handleFocus} = useGridFocus<HTMLDivElement>({
-    columns: 3,
-    cellSelector: '[role="gridcell"]',
-    isCellFocusable: cell =>
-      cell.querySelector('button:not([disabled])') !== null,
-    getFocusTarget: cell => cell.querySelector<HTMLElement>('button'),
-    hasRovingTabIndex: true,
-    ...opts,
-  });
-  return (
-    <div
-      ref={gridRef}
-      role="grid"
-      dir={dir}
-      onKeyDown={handleKeyDown}
-      onFocus={handleFocus}>
-      {Array.from({length: 9}, (_, i) => (
-        <div role="gridcell" key={i}>
-          <button
-            type="button"
-            disabled={disabled.includes(i)}
-            tabIndex={i === seed ? 0 : -1}
-            data-testid={`cell-${i}`}>
-            {i}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-describe('useGridFocus roving tabindex (hasRovingTabIndex)', () => {
-  it('honors the seeded tab stop and stamps -1 on the rest', () => {
-    render(<Grid seed={4} />);
-    expect(screen.getByTestId('cell-4')).toHaveAttribute('tabindex', '0');
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '-1');
-    expect(screen.getByTestId('cell-8')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('repairs to the first focusable cell when no cell is seeded', () => {
-    render(<Grid seed={-1} />);
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '0');
-    expect(screen.getByTestId('cell-1')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('promotes the first ENABLED cell when the seed is disabled', () => {
-    render(<Grid seed={-1} disabled={[0, 1]} />);
-    expect(screen.getByTestId('cell-2')).toHaveAttribute('tabindex', '0');
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('ArrowRight moves the tab stop to the next cell', () => {
-    render(<Grid seed={0} />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-0').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowRight'});
-    expect(screen.getByTestId('cell-1')).toHaveFocus();
-    expect(screen.getByTestId('cell-1')).toHaveAttribute('tabindex', '0');
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('ArrowDown moves the tab stop one row down', () => {
-    render(<Grid seed={0} />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-0').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowDown'});
-    expect(screen.getByTestId('cell-3')).toHaveFocus();
-    expect(screen.getByTestId('cell-3')).toHaveAttribute('tabindex', '0');
-  });
-
-  it('handleFocus repairs the stop when the tabbable cell became disabled', () => {
-    // Seed cell 0 as tabbable, then disable it and fire the container onFocus.
-    // syncTabStops should promote the first still-focusable cell (cell 1).
-    const {rerender} = render(<Grid seed={0} />);
-    const grid = screen.getByRole('grid');
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '0');
-    rerender(<Grid seed={-1} disabled={[0]} />);
-    fireEvent.focus(grid);
-    expect(screen.getByTestId('cell-1')).toHaveAttribute('tabindex', '0');
-    expect(screen.getByTestId('cell-0')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('flips ArrowLeft/ArrowRight under RTL', () => {
-    render(<Grid seed={1} dir="rtl" />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-1').focus();
-    // In RTL, ArrowLeft is "forward" (moves to the next cell in DOM order).
-    fireEvent.keyDown(grid, {key: 'ArrowLeft'});
-    expect(screen.getByTestId('cell-2')).toHaveFocus();
-  });
-
-  it('does not manage tabindex when hasRovingTabIndex is off', () => {
-    render(<Grid seed={0} hasRovingTabIndex={false} />);
-    // The seeded -1/0 values are left untouched (caller owns them), and
-    // navigation still works without stamping.
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-0').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowRight'});
-    expect(screen.getByTestId('cell-1')).toHaveFocus();
-    // cell-1 kept its seeded -1; the hook did not promote it.
-    expect(screen.getByTestId('cell-1')).toHaveAttribute('tabindex', '-1');
-  });
-});
-
-describe('useGridFocus RTL auto-detection (WCAG 1.3.2)', () => {
-  // jsdom reflects the `dir` attribute into computed style only on the element
-  // that carries it, so tests set dir="rtl" on the grid container itself — the
-  // element the hook reads via gridRef.
-
-  it('auto-detects dir="rtl": ArrowLeft moves forward (next cell)', () => {
-    render(<Grid seed={1} dir="rtl" />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-1').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowLeft'});
-    expect(screen.getByTestId('cell-2')).toHaveFocus();
-  });
-
-  it('auto-detects dir="rtl": ArrowRight moves backward (previous cell)', () => {
-    render(<Grid seed={1} dir="rtl" />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-1').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowRight'});
-    expect(screen.getByTestId('cell-0')).toHaveFocus();
-  });
-
-  it('leaves vertical navigation unaffected under dir="rtl"', () => {
-    render(<Grid seed={0} dir="rtl" />);
-    const grid = screen.getByRole('grid');
-    screen.getByTestId('cell-0').focus();
-    fireEvent.keyDown(grid, {key: 'ArrowDown'});
-    expect(screen.getByTestId('cell-3')).toHaveFocus();
-  });
-});

package/src/hooks/useHotkeys.test.ts

@@ -1,265 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useHotkeys.test.ts
- * @input Uses vitest, @testing-library/react, useHotkeys hook
- * @output Unit tests for useHotkeys hook
- * @position Testing; validates useHotkeys.ts implementation
- *
- * SYNC: When useHotkeys.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi, afterEach} from 'vitest';
-import {renderHook} from '@testing-library/react';
-import {useHotkeys, type Hotkey} from './useHotkeys';
-
-function stubApplePlatform() {
-  // jsdom's navigator has no userAgentData; platform drives detection.
-  vi.stubGlobal('navigator', {platform: 'MacIntel'});
-}
-
-function stubOtherPlatform() {
-  vi.stubGlobal('navigator', {platform: 'Win32'});
-}
-
-function press(
-  key: string,
-  init: KeyboardEventInit & {target?: HTMLElement} = {},
-): KeyboardEvent {
-  const {target, ...eventInit} = init;
-  const event = new KeyboardEvent('keydown', {
-    key,
-    bubbles: true,
-    cancelable: true,
-    ...eventInit,
-  });
-  (target ?? window).dispatchEvent(event);
-  return event;
-}
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-  vi.restoreAllMocks();
-  document.body.innerHTML = '';
-});
-
-describe('useHotkeys', () => {
-  it('fires on mod+k via metaKey on Apple platforms', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
-
-    const event = press('k', {metaKey: true});
-    expect(onPress).toHaveBeenCalledTimes(1);
-    expect(onPress).toHaveBeenCalledWith(event);
-    expect(event.defaultPrevented).toBe(true);
-  });
-
-  it('maps mod to ctrlKey on non-Apple platforms', () => {
-    stubOtherPlatform();
-    const onPress = vi.fn();
-    renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
-
-    press('k', {metaKey: true});
-    expect(onPress).not.toHaveBeenCalled();
-
-    press('k', {ctrlKey: true});
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not fire a bare key when modifiers are held', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    renderHook(() => useHotkeys([{keys: 'k', onPress}]));
-
-    press('k', {metaKey: true});
-    press('k', {ctrlKey: true});
-    press('k', {altKey: true});
-    expect(onPress).not.toHaveBeenCalled();
-
-    press('k');
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('matches named keys: escape, enter, space, arrows', () => {
-    stubApplePlatform();
-    const onEscape = vi.fn();
-    const onEnter = vi.fn();
-    const onSpace = vi.fn();
-    const onDown = vi.fn();
-    renderHook(() =>
-      useHotkeys([
-        {keys: 'escape', onPress: onEscape},
-        {keys: 'enter', onPress: onEnter},
-        {keys: 'space', onPress: onSpace},
-        {keys: 'down', onPress: onDown},
-      ]),
-    );
-
-    press('Escape');
-    press('Enter');
-    press(' ');
-    press('ArrowDown');
-    expect(onEscape).toHaveBeenCalledTimes(1);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onSpace).toHaveBeenCalledTimes(1);
-    expect(onDown).toHaveBeenCalledTimes(1);
-  });
-
-  it('requires shift when specified and ignores shift otherwise', () => {
-    stubApplePlatform();
-    const onSlash = vi.fn();
-    const onLetter = vi.fn();
-    renderHook(() =>
-      useHotkeys([
-        {keys: 'shift+/', onPress: onSlash},
-        {keys: 'c', onPress: onLetter},
-      ]),
-    );
-
-    press('/');
-    expect(onSlash).not.toHaveBeenCalled();
-    press('/', {shiftKey: true});
-    expect(onSlash).toHaveBeenCalledTimes(1);
-
-    // Shift not specified → matches regardless of shift state.
-    press('C', {shiftKey: true});
-    press('c');
-    expect(onLetter).toHaveBeenCalledTimes(2);
-  });
-
-  it('skips typing targets by default', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
-
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-    press('k', {metaKey: true, target: input});
-    expect(onPress).not.toHaveBeenCalled();
-
-    const textarea = document.createElement('textarea');
-    document.body.appendChild(textarea);
-    press('k', {metaKey: true, target: textarea});
-    expect(onPress).not.toHaveBeenCalled();
-  });
-
-  it('fires in typing targets when allowInInputs is true', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    renderHook(() =>
-      useHotkeys([{keys: 'escape', onPress, allowInInputs: true}]),
-    );
-
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-    press('Escape', {target: input});
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('respects isDisabled', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    const {rerender} = renderHook(
-      ({isDisabled}: {isDisabled: boolean}) =>
-        useHotkeys([{keys: 'mod+k', onPress, isDisabled}]),
-      {initialProps: {isDisabled: true}},
-    );
-
-    press('k', {metaKey: true});
-    expect(onPress).not.toHaveBeenCalled();
-
-    rerender({isDisabled: false});
-    press('k', {metaKey: true});
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('skips events that are already defaultPrevented', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
-
-    const event = new KeyboardEvent('keydown', {
-      key: 'k',
-      metaKey: true,
-      bubbles: true,
-      cancelable: true,
-    });
-    event.preventDefault();
-    window.dispatchEvent(event);
-    expect(onPress).not.toHaveBeenCalled();
-  });
-
-  it('unsubscribes on unmount', () => {
-    stubApplePlatform();
-    const onPress = vi.fn();
-    const removeSpy = vi.spyOn(window, 'removeEventListener');
-    const {unmount} = renderHook(() => useHotkeys([{keys: 'mod+k', onPress}]));
-
-    unmount();
-    expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
-
-    press('k', {metaKey: true});
-    expect(onPress).not.toHaveBeenCalled();
-  });
-
-  it('ignores IME enter keys, but triggers callback on valid enter', () => {
-    const onPress = vi.fn();
-    renderHook(() =>
-      useHotkeys([{keys: 'enter', onPress, allowInInputs: true}]),
-    );
-    const target = document.createElement('textarea');
-    document.body.appendChild(target);
-    const compositionEvent = press('Enter', {target, isComposing: true});
-    expect(onPress).not.toHaveBeenCalled();
-    expect(compositionEvent.defaultPrevented).toBe(false);
-
-    const keyCodeEvent = press('Enter', {target, keyCode: 229});
-    expect(onPress).not.toHaveBeenCalled();
-    expect(keyCodeEvent.defaultPrevented).toBe(false);
-
-    const validEvent = press('Enter', {target});
-    expect(onPress).toHaveBeenCalledExactlyOnceWith(validEvent);
-    expect(validEvent.defaultPrevented).toBe(true);
-  });
-
-  it('does not re-subscribe on re-render, but uses latest handlers', () => {
-    stubApplePlatform();
-    const addSpy = vi.spyOn(window, 'addEventListener');
-    const first = vi.fn();
-    const second = vi.fn();
-
-    const {rerender} = renderHook(
-      ({hotkeys}: {hotkeys: Hotkey[]}) => useHotkeys(hotkeys),
-      {initialProps: {hotkeys: [{keys: 'mod+k', onPress: first}]}},
-    );
-
-    const keydownSubscriptions = () =>
-      addSpy.mock.calls.filter(([type]) => type === 'keydown').length;
-    const initialCount = keydownSubscriptions();
-
-    rerender({hotkeys: [{keys: 'mod+k', onPress: second}]});
-    rerender({hotkeys: [{keys: 'mod+k', onPress: second}]});
-    expect(keydownSubscriptions()).toBe(initialCount);
-
-    press('k', {metaKey: true});
-    expect(first).not.toHaveBeenCalled();
-    expect(second).toHaveBeenCalledTimes(1);
-  });
-
-  it('only fires the first matching hotkey per event', () => {
-    stubApplePlatform();
-    const first = vi.fn();
-    const second = vi.fn();
-    renderHook(() =>
-      useHotkeys([
-        {keys: 'mod+k', onPress: first},
-        {keys: 'mod+k', onPress: second},
-      ]),
-    );
-
-    press('k', {metaKey: true});
-    expect(first).toHaveBeenCalledTimes(1);
-    expect(second).not.toHaveBeenCalled();
-  });
-});