@astryxdesign/core 0.7.5-canary.fd0aba8 → 0.7.5

package/src/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@
 /**
  * @file NumberInput.tsx
  * @input Uses React, useId, useState, useMemo, useCallback, Field, Icon, InputGroupContext
- * @output Exports NumberInput component, NumberInputProps; optional steppers are hidden on coarse pointers
+ * @output Exports NumberInput component, NumberInputProps
  * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -100,10 +100,7 @@ const styles = stylex.create({
     paddingInlineEnd: padInlineEnd,
   },
   wrapperWithNumberSteppers: {
-    paddingInlineEnd: {
-      default: 0,
-      '@media (pointer: coarse)': padInlineEnd,
-    },
+    paddingInlineEnd: 0,
   },
   input: {
     display: 'block',
@@ -145,12 +142,7 @@ const styles = stylex.create({
   },
   numberSteppers: {
     alignSelf: 'stretch',
-    // These compact buttons are a fine-pointer affordance. Touch users can
-    // enter a value directly; keyboard stepping remains available.
-    display: {
-      default: 'flex',
-      '@media (pointer: coarse)': 'none',
-    },
+    display: 'flex',
     flexDirection: 'column',
     flexShrink: 0,
     width: spacingVars['--spacing-4'],
@@ -393,8 +385,6 @@ interface NumberInputPropsBase extends Omit<
   isWheelEnabled?: boolean;
   /**
    * Whether to show increment and decrement buttons at the end of the input.
-   * The buttons are hidden on coarse pointers (such as touch screens).
-   * Direct text entry and keyboard stepping remain available.
    * @default false
    */
   hasNumberSteppers?: boolean;

package/src/utils/focusReturn.ts

@@ -12,10 +12,7 @@
  *   overlays (Dialog, DropdownMenu) that move focus programmatically.
  */
 
-import {
-  getInteractionModality,
-  type InteractionModality,
-} from './interactionModality';
+import {getInteractionModality} from './interactionModality';
 
 /**
  * True when focus rests on nothing in particular — no active element, or the
@@ -46,29 +43,21 @@ export function isFocusDetached(doc: Document = document): boolean {
  * autofocus target, the control that opened a Dialog, or a menu trigger the
  * caller renders. Pass `options` (for example `preventScroll`) as to `focus()`.
  *
- * `modality` defaults to the page's last input. A caller moving focus inside a
- * second document (a same-origin iframe, a Document Picture-in-Picture window)
- * passes that document's, which it tracks with `trackInteractionModalityIn`.
- *
  * Make sure modality tracking is active (`useInteractionModalityTracking()`)
  * in the component that calls this.
  */
 export function focusForLastInput(
   element: HTMLElement,
   options?: FocusOptions,
-  modality: InteractionModality = getInteractionModality(),
 ): void {
   // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched. The
-  // field's own window: one in an iframe or a Picture-in-Picture window is
-  // never an instance of the page's constructors.
-  const view = element.ownerDocument.defaultView ?? window;
+  // goes, and an extra blur there can run validation or mark it touched.
   const isTextEntry =
-    element instanceof view.HTMLInputElement ||
-    element instanceof view.HTMLTextAreaElement ||
-    element instanceof view.HTMLSelectElement ||
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement ||
     element.isContentEditable;
-  if (isTextEntry || modality !== 'pointer') {
+  if (isTextEntry || getInteractionModality() !== 'pointer') {
     if (options === undefined) {
       element.focus();
     } else {

package/src/utils/interactionModality.test.ts

@@ -3,8 +3,7 @@
 /**
  * @file interactionModality.test.ts
  * @input The interaction-modality utility loaded more than once
- * @output Verifies document-wide continuity, shared Shift-key modality policy,
- *   and a second document's separate value
+ * @output Verifies document-wide continuity and shared Shift-key modality policy
  * @position Unit coverage for interactionModality.ts
  */
 
@@ -89,49 +88,6 @@ describe('interactionModality', () => {
     ).toHaveLength(1);
   });
 
-  it("keeps a second document's input apart from the page's", async () => {
-    const pageDocument = document.implementation.createHTMLDocument();
-    const secondDocument = document.implementation.createHTMLDocument();
-    vi.stubGlobal('document', pageDocument);
-    const tracker = await loadTracker();
-    tracker.__startInteractionModalityTrackingForTest();
-    tracker.trackInteractionModalityIn(secondDocument);
-
-    pageDocument.dispatchEvent(new Event('pointerdown'));
-    secondDocument.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
-    expect(tracker.getInteractionModality()).toBe('pointer');
-    expect(tracker.getInteractionModality(pageDocument)).toBe('pointer');
-    expect(tracker.getInteractionModality(secondDocument)).toBe('keyboard');
-
-    secondDocument.dispatchEvent(new Event('pointerdown'));
-    pageDocument.dispatchEvent(new KeyboardEvent('keydown', {key: 'Tab'}));
-    expect(tracker.getInteractionModality()).toBe('keyboard');
-    expect(tracker.getInteractionModality(secondDocument)).toBe('pointer');
-  });
-
-  it("releases a second document's listeners with its last consumer", async () => {
-    const secondDocument = document.implementation.createHTMLDocument();
-    const tracker = await loadTracker();
-    const removeEventListener = vi.spyOn(secondDocument, 'removeEventListener');
-    const releaseFirst = tracker.trackInteractionModalityIn(secondDocument);
-    const releaseSecond = tracker.trackInteractionModalityIn(secondDocument);
-    secondDocument.dispatchEvent(new Event('pointerdown'));
-    expect(tracker.getInteractionModality(secondDocument)).toBe('pointer');
-
-    releaseFirst();
-    releaseFirst();
-    secondDocument.dispatchEvent(new KeyboardEvent('keydown', {key: 'Tab'}));
-    expect(tracker.getInteractionModality(secondDocument)).toBe('keyboard');
-    expect(removeEventListener).not.toHaveBeenCalled();
-
-    releaseSecond();
-    expect(removeEventListener.mock.calls.map(([type]) => type).sort()).toEqual(
-      ['keydown', 'pointerdown'],
-    );
-    secondDocument.dispatchEvent(new Event('pointerdown'));
-    expect(tracker.getInteractionModality(secondDocument)).toBe('keyboard');
-  });
-
   it('uses the keyboard-safe default without a document', async () => {
     vi.stubGlobal('document', undefined);
     const serverModule = await loadTracker();

package/src/utils/interactionModality.ts

@@ -6,9 +6,7 @@
  * @file interactionModality.ts
  * @input Global pointerdown/keydown events
  * @output `useInteractionModalityTracking()` activates document-lifetime tracking;
- *   `getInteractionModality()` reads how the user last interacted;
- *   `trackInteractionModalityIn(doc)` and `getInteractionModality(doc)` do the
- *   same for a second document
+ *   `getInteractionModality()` reads how the user last interacted
  * @position Internal document-wide singleton; used where `:focus-visible` alone
  *   is too broad
  *
@@ -28,12 +26,8 @@
  * The store lives on `document`, so duplicate Astryx bundles share one state
  * value and one listener pair. The first mounted consumer activates tracking;
  * the listeners then remain for the document lifetime so input during a gap
- * between consumers is not lost. A second document (a same-origin iframe, a
- * Document Picture-in-Picture window) gets its own store when a component
- * tracks it, since input there never reaches the page's listeners; its
- * listeners stay only while a consumer there is mounted. Importing this module
- * has no DOM side effects, and server rendering keeps the keyboard-safe
- * default.
+ * between consumers is not lost. Importing this module has no DOM side effects,
+ * and server rendering keeps the keyboard-safe default.
  */
 
 import {useEffect} from 'react';
@@ -43,8 +37,6 @@ export type InteractionModality = 'keyboard' | 'pointer';
 type InteractionModalityStore = {
   modality: InteractionModality;
   isListening: boolean;
-  /** Mounted consumers holding a second document's listeners. */
-  consumers?: number;
   onPointerDown: () => void;
   onKeyDown: (event: KeyboardEvent) => void;
 };
@@ -115,59 +107,8 @@ export function useInteractionModalityTracking(): void {
   useEffect(() => trackInteractionModality(), []);
 }
 
-/**
- * Track a second document while a consumer there is mounted: a component an
- * app renders into a same-origin iframe or a Document Picture-in-Picture
- * window gets input there that never reaches the page's listeners. The first
- * consumer installs the document's listener pair and the last one's cleanup
- * removes it. Read the value with `getInteractionModality(doc)`. The page's
- * own document keeps its document-lifetime listeners.
- */
-export function trackInteractionModalityIn(
-  targetDocument: Document,
-): () => void {
-  if (typeof document !== 'undefined' && targetDocument === document) {
-    return trackInteractionModality();
-  }
-  const store = getStore(targetDocument);
-  store.consumers = (store.consumers ?? 0) + 1;
-  if (store.consumers === 1) {
-    store.isListening = true;
-    targetDocument.addEventListener('pointerdown', store.onPointerDown, {
-      capture: true,
-      passive: true,
-    });
-    targetDocument.addEventListener('keydown', store.onKeyDown, {
-      capture: true,
-      passive: true,
-    });
-  }
-  let isReleased = false;
-  return () => {
-    if (isReleased) {
-      return;
-    }
-    isReleased = true;
-    store.consumers = (store.consumers ?? 1) - 1;
-    if (store.consumers === 0) {
-      store.isListening = false;
-      targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
-        capture: true,
-      });
-      targetDocument.removeEventListener('keydown', store.onKeyDown, {
-        capture: true,
-      });
-    }
-  };
-}
-
-/** How the user last interacted with the page, or with `targetDocument`. */
-export function getInteractionModality(
-  targetDocument?: Document,
-): InteractionModality {
-  if (targetDocument != null) {
-    return getStore(targetDocument).modality;
-  }
+/** How the user last interacted with the page. */
+export function getInteractionModality(): InteractionModality {
   return typeof document === 'undefined'
     ? 'keyboard'
     : getStore(document).modality;

package/src/Dialog/__tests__/DialogSecondDocument.a11y.browser.spec.ts

@@ -1,202 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(packages/core/src/Dialog/|packages/core/src/utils/(focusReturn|interactionModality)\.ts|apps/storybook/stories/DialogSecondDocumentA11y)
-
-/**
- * @file DialogSecondDocument.a11y.browser.spec.ts
- * @input Uses @playwright/test, the a11y-spec static Storybook server, and the
- *   checked-in DialogSecondDocumentA11y story
- * @output Real-browser evidence that a Dialog rendered into a second document
- *   (a same-origin iframe, a Document Picture-in-Picture window) returns focus
- *   to the control that opened it when it closes, by Escape or by a control
- *   inside it, exactly as the same Dialog does in the page, with the focus
- *   ring that close's input calls for, a text field that opened it keeping
- *   its ring with no extra blur; and that a Dialog in an iframe opened by a
- *   control in the page returns focus to that control.
- * @position The half of Dialog's focus return jsdom cannot reach: which
- *   document holds focus, and the browser's own focus restore when a modal
- *   dialog closes. The Vitest case in `Dialog/Dialog.test.tsx` models the
- *   same rule with an iframe. Document Picture-in-Picture is Chromium's
- *   alone, so the window's cases skip in other engines; the page and the
- *   iframe run everywhere.
- *
- * SYNC: Fixture lives in
- *   /apps/storybook/stories/DialogSecondDocumentA11y.stories.tsx.
- */
-
-import {
-  expect,
-  test,
-  type Frame,
-  type Keyboard,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-const STORY_ID = 'a11y-dialog-in-a-second-document--second-documents';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-type Where = 'page' | 'iframe' | 'Picture-in-Picture window';
-
-/** One document of the story: where its controls live and where keys go. */
-interface Surface {
-  frame: Frame;
-  keyboard: Keyboard;
-}
-
-/** Load the story and return the document the test drives. */
-async function mountStory(page: Page, where: Where): Promise<Surface> {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=${STORY_ID}&viewMode=story`,
-    {waitUntil: 'load'},
-  );
-  await holdMotionStill(page);
-  const popOut = page.getByRole('button', {name: 'Pop out'});
-  await popOut.waitFor();
-
-  if (where === 'page') {
-    return {frame: page.mainFrame(), keyboard: page.keyboard};
-  }
-  if (where === 'iframe') {
-    const element = await page
-      .locator('iframe[title="Second document"]')
-      .elementHandle();
-    const frame = await element?.contentFrame();
-    if (frame == null) {
-      throw new Error('the story renders no iframe');
-    }
-    await frame
-      .getByRole('button', {name: 'Open dialog', exact: true})
-      .waitFor();
-    // Key presses go to whichever frame holds focus; the clicks below put it
-    // in this one.
-    return {frame, keyboard: page.keyboard};
-  }
-  // Opening the window needs a user gesture; the click is one.
-  const [pictureInPicture] = await Promise.all([
-    page.context().waitForEvent('page'),
-    popOut.click(),
-  ]);
-  await pictureInPicture
-    .getByRole('button', {
-      name: 'Open dialog',
-      exact: true,
-    })
-    .waitFor();
-  return {
-    frame: pictureInPicture.mainFrame(),
-    keyboard: pictureInPicture.keyboard,
-  };
-}
-
-/** Whether the element matches `:focus-visible`, i.e. would show a ring. */
-async function showsRing(element: Locator): Promise<boolean> {
-  return element.evaluate(node => node.matches(':focus-visible'));
-}
-
-/** Open the dialog from its control with the pointer; returns the control. */
-async function open(frame: Frame): Promise<{opener: Locator; dialog: Locator}> {
-  const opener = frame.getByRole('button', {name: 'Open dialog', exact: true});
-  await opener.click();
-  const dialog = frame.getByRole('dialog', {name: 'Review changes'});
-  await expect(dialog).toBeVisible();
-  return {opener, dialog};
-}
-
-for (const where of [
-  'page',
-  'iframe',
-  'Picture-in-Picture window',
-] as const satisfies ReadonlyArray<Where>) {
-  test.describe(`a Dialog in the ${where}`, () => {
-    test.skip(
-      ({browserName}) =>
-        where === 'Picture-in-Picture window' && browserName !== 'chromium',
-      'Document Picture-in-Picture is a Chromium API',
-    );
-
-    test('closing with Escape returns focus to the control that opened it', async ({
-      page,
-    }) => {
-      const {frame, keyboard} = await mountStory(page, where);
-      const {opener, dialog} = await open(frame);
-
-      await keyboard.press('Escape');
-      await expect(dialog).toBeHidden();
-      await expect(opener).toBeFocused();
-      // A key closed it, so the ring shows (`architecture:interaction-modality`
-      // INV1), whatever the page's own last input was (a pointer press on Pop
-      // out, for the Picture-in-Picture window).
-      await expect.poll(async () => showsRing(opener)).toBe(true);
-    });
-
-    test('closing from a control inside returns focus to the control that opened it', async ({
-      page,
-    }) => {
-      const {frame} = await mountStory(page, where);
-      const {opener, dialog} = await open(frame);
-
-      await frame.getByRole('button', {name: 'Close dialog'}).click();
-      await expect(dialog).toBeHidden();
-      await expect(opener).toBeFocused();
-      // A pointer closed it, so no ring.
-      await expect.poll(async () => showsRing(opener)).toBe(false);
-    });
-
-    test('a text field that opened it keeps focus and its ring after a pointer close', async ({
-      page,
-    }) => {
-      const {frame} = await mountStory(page, where);
-      const field = frame.getByRole('textbox', {name: 'Search'});
-      await field.click();
-      await field.press('Enter');
-      const dialog = frame.getByRole('dialog', {name: 'Review changes'});
-      await expect(dialog).toBeVisible();
-      // Count the field's blurs from here on: the open already moved focus
-      // away, so any blur now would be the return's own.
-      await field.evaluate(node => {
-        node.dataset.blurs = '0';
-        node.addEventListener('blur', () => {
-          node.dataset.blurs = String(Number(node.dataset.blurs) + 1);
-        });
-      });
-
-      await frame.getByRole('button', {name: 'Close dialog'}).click();
-      await expect(dialog).toBeHidden();
-      await expect(field).toBeFocused();
-      // A text field shows where typing goes whatever moved focus there.
-      await expect.poll(async () => showsRing(field)).toBe(true);
-      await expect(field).toHaveAttribute('data-blurs', '0');
-    });
-  });
-}
-
-test.describe('a Dialog in the iframe that a control in the page opens', () => {
-  test('closing with Escape returns focus to that control', async ({page}) => {
-    const {frame, keyboard} = await mountStory(page, 'iframe');
-    const opener = page.getByRole('button', {name: 'Open dialog in the frame'});
-    await opener.click();
-    const dialog = frame.getByRole('dialog', {name: 'Opened from the page'});
-    await expect(dialog).toBeVisible();
-
-    await keyboard.press('Escape');
-    await expect(dialog).toBeHidden();
-    await expect(opener).toBeFocused();
-  });
-});

package/src/DropdownMenu/lazyMenuBottomSheet.test.ts

@@ -1,53 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file lazyMenuBottomSheet.test.ts
- * @input lazyMenuBottomSheet's action-list preload, with the list's module
- *   failing to load once
- * @output A failed preload is no unhandled rejection, and is not kept: the
- *   next load asks the module loader again
- * @position Unit test of ./lazyMenuBottomSheet; the hydration case is in
- *   DropdownMenu.ssr.test.tsx
- */
-
-import {afterEach, describe, expect, it, vi} from 'vitest';
-
-afterEach(() => {
-  vi.doUnmock('./MenuBottomSheetActionList');
-  vi.resetModules();
-});
-
-describe('preloadMenuBottomSheetActionList', () => {
-  it('drops a failed preload without an unhandled rejection, and asks the module loader again on the next call', async () => {
-    vi.resetModules();
-    let attempts = 0;
-    vi.doMock('./MenuBottomSheetActionList', () => {
-      attempts += 1;
-      if (attempts === 1) {
-        throw new Error('the connection dropped');
-      }
-      return {MenuBottomSheetActionList: () => null};
-    });
-    const unhandled: unknown[] = [];
-    const onUnhandled = (reason: unknown) => unhandled.push(reason);
-    process.on('unhandledRejection', onUnhandled);
-    try {
-      const {preloadMenuBottomSheetActionList} =
-        await import('./lazyMenuBottomSheet');
-      preloadMenuBottomSheetActionList();
-      await vi.waitFor(() => expect(attempts).toBe(1));
-      // An unhandled rejection is reported after the rejecting task's
-      // microtasks: give it two macrotasks.
-      await new Promise(resolve => setTimeout(resolve, 0));
-      await new Promise(resolve => setTimeout(resolve, 0));
-      expect(unhandled).toEqual([]);
-
-      preloadMenuBottomSheetActionList();
-      await vi.waitFor(() => expect(attempts).toBe(2));
-      const loaded = await import('./MenuBottomSheetActionList');
-      expect(typeof loaded.MenuBottomSheetActionList).toBe('function');
-    } finally {
-      process.off('unhandledRejection', onUnhandled);
-    }
-  });
-});

package/src/NumberInput/__tests__/NumberInput.coarse-pointer.a11y.chromium.spec.ts

@@ -1,102 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** Real-browser proof of NumberInput's coarse-pointer stepper presentation. */
-
-import {expect, test} from '@playwright/test';
-import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => storybook?.close());
-
-for (const width of [390, 1280]) {
-  for (const hasTouch of [false, true]) {
-    test(`${hasTouch ? 'coarse' : 'fine'} pointer at ${width}px preserves entry and the appropriate end padding`, async ({
-      browser,
-    }) => {
-      const context = await browser.newContext({
-        viewport: {width, height: 800},
-        hasTouch,
-      });
-      try {
-        const page = await context.newPage();
-        await page.goto(
-          `${storybook.origin}/iframe.html?id=core-numberinput--with-number-steppers&viewMode=story`,
-        );
-        await holdMotionStill(page);
-        const input = page.getByRole('spinbutton', {name: 'Quantity'});
-        const increment = page.locator(
-          'button[aria-label="Increment Quantity"]',
-        );
-        const decrement = page.locator(
-          'button[aria-label="Decrement Quantity"]',
-        );
-        const control = page.locator('.astryx-number-input');
-        await expect(input).toBeVisible();
-        expect(
-          await page.evaluate(() => matchMedia('(pointer: coarse)').matches),
-        ).toBe(hasTouch);
-
-        // Public padding tokens still apply when the compact stepper lane is
-        // hidden. Use a non-default value to catch a hardcoded restoration.
-        await control.evaluate(element => {
-          element.style.setProperty(
-            '--astryx-number-input-padding-inline-end',
-            '20px',
-          );
-        });
-        for (const direction of ['ltr', 'rtl']) {
-          await control.evaluate((element, dir) => {
-            element.setAttribute('dir', dir);
-          }, direction);
-          await expect(control).toHaveCSS('direction', direction);
-          await expect(control).toHaveCSS(
-            'padding-inline-end',
-            hasTouch ? '20px' : '0px',
-          );
-          if (hasTouch) {
-            await expect(increment).toBeHidden();
-            await expect(decrement).toBeHidden();
-            await expect(
-              page.getByRole('button', {
-                name: /^(Increment|Decrement) Quantity$/,
-              }),
-            ).toHaveCount(0);
-          } else {
-            await expect(increment).toBeVisible();
-            await expect(decrement).toBeVisible();
-          }
-        }
-
-        if (!hasTouch) {
-          await increment.click();
-          await expect(input).toHaveValue('3');
-          await decrement.click();
-          await expect(input).toHaveValue('2');
-        }
-        await input.focus();
-        await input.press('ArrowUp');
-        await expect(input).toHaveValue('3');
-        await input.press('ArrowDown');
-        await expect(input).toHaveValue('2');
-        await input.fill('7');
-        await input.press('Enter');
-        await expect(input).toHaveAttribute('aria-valuenow', '7');
-        await expect(input).toHaveAttribute('inputmode', 'decimal');
-      } finally {
-        await context.close();
-      }
-    });
-  }
-}