@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Typeahead/BaseTypeahead.emptyState.a11y.chromium.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BaseTypeahead.emptyState.a11y.chromium.spec.d.ts.map

package/dist/Typeahead/BaseTypeahead.emptyState.a11y.chromium.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTypeahead.emptyState.a11y.chromium.spec.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.emptyState.a11y.chromium.spec.ts"],"names":[],"mappings":""}

package/dist/Typeahead/BaseTypeahead.emptyState.a11y.chromium.spec.js

@@ -0,0 +1,118 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope core/Tokenizer ^apps/storybook/stories/BaseTypeahead
+
+/**
+ * @file BaseTypeahead.emptyState.a11y.chromium.spec.ts
+ * @input Checked-in empty-to-pending Storybook fixture and real Chromium
+ * @output Query/debounce/pending/final row, busy, accessibility-tree and selection evidence
+ * @position Browser regression for AST-092 FR5 and AST-056 AR1 (#8903)
+ */
+
+import { expect, test } from '@playwright/test';
+import { serveStorybook, DEFAULT_STORYBOOK_DIR } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => storybook?.close());
+for (const label of ['Bare framework', 'Single framework', 'Framework tokens']) {
+  for (const query of ['react', 'xxx']) {
+    test(`${label}: empty → debounce → pending → ${query === 'react' ? 'results' : 'empty'}`, async ({
+      page
+    }, testInfo) => {
+      await page.goto(`${storybook.origin}/iframe.html?id=core-basetypeahead--empty-then-pending&viewMode=story`);
+      const input = page.getByRole('combobox', {
+        name: label
+      });
+      await input.waitFor();
+      await page.clock.install();
+      await page.clock.pauseAt(new Date());
+      const listbox = page.locator(`[id="${await input.getAttribute('aria-controls')}"]`);
+      await input.fill('zzz');
+      await page.clock.runFor(150);
+      await expect(input).toHaveAttribute('aria-busy', 'true');
+      await expect(input).toHaveAttribute('aria-expanded', 'false');
+      await expect(page.getByRole('img', {
+        name: 'Loading'
+      })).toBeVisible();
+      await expect(listbox).not.toBeVisible();
+      await testInfo.attach('first-pending', {
+        body: await page.screenshot({
+          path: testInfo.outputPath('first-pending.png')
+        }),
+        contentType: 'image/png'
+      });
+      await page.clock.runFor(1000);
+      await expect(listbox).toBeVisible();
+      await expect(listbox.getByRole('option')).toHaveText('No results found');
+      await page.clock.runFor(32);
+      await expect(page.locator('[data-astryx-live-region="polite"]')).toHaveText('No results found');
+      // Clear the settled announcement through its normal lifetime.
+      await page.clock.runFor(2000);
+      await input.fill(query);
+      await page.clock.runFor(149);
+      await testInfo.attach('debounce', {
+        body: await page.screenshot({
+          path: testInfo.outputPath('debounce.png')
+        }),
+        contentType: 'image/png'
+      });
+      await expect(listbox).not.toContainText('No results found');
+      await expect(listbox.getByRole('option')).toHaveCount(0);
+      await expect(input).not.toHaveAttribute('aria-busy');
+      await expect(page.locator('[data-astryx-live-region="polite"]')).toBeEmpty();
+      await page.clock.runFor(1);
+      await expect(input).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox.getByRole('option')).toHaveCount(0);
+      await expect(listbox).toBeEmpty();
+      await expect(page.getByRole('img', {
+        name: 'Loading'
+      })).toBeVisible();
+      await expect(input).not.toHaveAttribute('aria-activedescendant');
+      await expect(listbox).toMatchAriaSnapshot('- listbox "Search results"');
+      await testInfo.attach('pending', {
+        body: await page.screenshot({
+          path: testInfo.outputPath('pending.png')
+        }),
+        contentType: 'image/png'
+      });
+      await page.clock.runFor(999);
+      await expect(listbox).not.toContainText('No results found');
+      await expect(input).toHaveAttribute('aria-busy', 'true');
+      await page.clock.runFor(1);
+      await page.clock.runFor(32);
+      await expect(input).not.toHaveAttribute('aria-busy');
+      await expect(page.getByRole('img', {
+        name: 'Loading'
+      })).toHaveCount(0);
+      if (query === 'react') {
+        await expect(listbox.getByRole('option')).toHaveText('React');
+        await expect(page.locator('[data-astryx-live-region="polite"]')).toHaveText('1 result');
+        await testInfo.attach('settled', {
+          body: await page.screenshot({
+            path: testInfo.outputPath('settled.png')
+          }),
+          contentType: 'image/png'
+        });
+        await input.press('Enter');
+        await expect(input).toHaveValue('');
+        await expect(input).toHaveAttribute('aria-expanded', 'false');
+        if (label === 'Framework tokens') {
+          await expect(page.getByRole('button', {
+            name: 'Remove React'
+          })).toBeVisible();
+        }
+      } else {
+        await expect(listbox.getByRole('option')).toHaveText('No results found');
+        await expect(listbox.getByRole('option')).toHaveAttribute('aria-disabled', 'true');
+        await expect(page.locator('[data-astryx-live-region="polite"]')).toHaveText('No results found');
+        await testInfo.attach('settled', {
+          body: await page.screenshot({
+            path: testInfo.outputPath('settled.png')
+          }),
+          contentType: 'image/png'
+        });
+      }
+    });
+  }
+}

package/dist/Typeahead/BaseTypeahead.js

@@ -5,7 +5,7 @@
 /**
  * @file BaseTypeahead.tsx
  * @input Uses React, StyleX, usePopover, TypeaheadItem
- * @output Exports BaseTypeahead; focus bootstraps a replaced search source
+ * @output Exports BaseTypeahead; empty feedback belongs to the current settled query
  * @position Core implementation; used by Typeahead and Tokenizer
  *
  * Pure combobox engine: input, search, keyboard navigation, dropdown.
@@ -251,12 +251,15 @@ export const BaseTypeahead = function BaseTypeahead({
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(false);
+  // `isLoading` starts with the request, after debouncing. Until then the
+  // cached empty answer belongs to the old query, not the text now typed.
+  const [lastSearchedQuery, setLastSearchedQuery] = useState('');
+  const isSearchPending = isLoading || query !== lastSearchedQuery;
 
-  // Only the WORDS move here, not the timing. An empty query still reports
-  // nothing — a focus-opened menu that bootstrapped to nothing is not a
-  // search that failed — and a search still in flight reports nothing, which
-  // matters because the row is in the DOM before the spinner clears.
-  useAnnounceRenderedText(emptyStateRef, results.length === 0 && hasSearched && query.length > 0 && !isLoading, query);
+  // An empty query reports nothing: an empty focus bootstrap is not a failed
+  // search. A newer query stays silent through debounce and pending work;
+  // only its settled empty row supplies the words to announce.
+  useAnnounceRenderedText(emptyStateRef, results.length === 0 && hasSearched && query.length > 0 && !isSearchPending, query);
 
   // Report the busy state to a wrapper that has taken the indicator over.
   //
@@ -281,7 +284,7 @@ export const BaseTypeahead = function BaseTypeahead({
   // Without a wrapper that took the indicator over, this input announces each
   // search's busy start (spec:AST-086 FR8); its Spinner stays named but is not
   // a live region (family:input-fields FR7).
-  useBusyAnnouncement(isLoading && busyLane == null, t('@astryx.typeahead.loading'), inputRef);
+  const settleBusyAnnouncement = useBusyAnnouncement(isLoading && busyLane == null, t('@astryx.typeahead.loading'), inputRef);
   const onLoadingChangeRef = useRef(busyLane?.onBusyChange);
   useIsomorphicLayoutEffect(() => {
     onLoadingChangeRef.current = busyLane?.onBusyChange;
@@ -422,6 +425,7 @@ export const BaseTypeahead = function BaseTypeahead({
     // in-flight response for an older query fails the gen check below
     // instead of overwriting the newer results.
     const gen = ++searchGenRef.current;
+    setLastSearchedQuery(searchQuery);
     setLoading(true);
     setHasSearched(true);
     try {
@@ -439,6 +443,12 @@ export const BaseTypeahead = function BaseTypeahead({
       }
       // Announce the outcome only for an active query (not the initial
       // focus-open), so screen-reader users hear result counts / no-results.
+      if (searchQuery.length > 0) {
+        // This query's outcome is announced now (a count) or from the
+        // rendered row (an empty result); a busy start not yet announced
+        // would follow it, so it is dropped (spec:AST-086 FR8).
+        settleBusyAnnouncement();
+      }
       if (searchQuery.length > 0 && shown.length > 0) {
         announce(t('@astryx.typeahead.resultCount', {
           count: shown.length
@@ -457,7 +467,7 @@ export const BaseTypeahead = function BaseTypeahead({
         setLoading(false);
       }
     }
-  }, [searchSource, maxMenuItems, showLayer, announce, __queryEntries, setLoading, t]);
+  }, [searchSource, maxMenuItems, showLayer, announce, __queryEntries, setLoading, settleBusyAnnouncement, t]);
   const applyBootstrapResults = useCallback((bootstrapResults, gen) => {
     if (searchGenRef.current !== gen) {
       return;
@@ -820,7 +830,7 @@ export const BaseTypeahead = function BaseTypeahead({
       ...mergeProps(themeProps('typeahead-dropdown'), {
         className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
       }),
-      children: results.length === 0 && hasSearched ? /*#__PURE__*/_jsx("div", {
+      children: results.length === 0 && hasSearched && !isSearchPending ? /*#__PURE__*/_jsx("div", {
         ref: emptyStateRef,
         role: "option",
         "aria-disabled": "true",
@@ -839,8 +849,14 @@ export const BaseTypeahead = function BaseTypeahead({
             role: "option",
             "aria-selected": isSelected,
             tabIndex: -1,
-            onClick: () => handleSelect(item),
-            onMouseEnter: () => highlightOnHover(index),
+            onClick: () => handleSelect(item)
+            // Highlight follows pointer movement, not pointer
+            // presence: a menu that opens or reflows under a resting
+            // pointer keeps its keyboard highlight, so Enter acts on
+            // the option the user was shown, not the one that
+            // happened to appear under the cursor.
+            ,
+            onMouseMove: () => highlightOnHover(index),
             ...stylex.props(styles.item, itemSizeStyles[size], index === highlightedIndex && styles.itemHighlighted, isSelected && styles.itemSelected),
             children: [/*#__PURE__*/_jsx("span", {
               ...{

package/dist/Typeahead/Typeahead.d.ts

@@ -142,7 +142,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<FieldInpu
     /** Callback when dropdown opens/closes. */
     onOpenChange?: (isOpen: boolean) => void;
 }
-export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TypeaheadProps<T>): React.JSX.Element;
+export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchText, isDisabled: isDisabledProp, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TypeaheadProps<T>): React.JSX.Element;
 export declare namespace Typeahead {
     var displayName: string;
 }

package/dist/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}

package/dist/Typeahead/Typeahead.js

@@ -17,7 +17,8 @@
  * - /apps/storybook/stories/Typeahead.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
-import React, { useCallback, useId, useRef, useMemo, useState } from 'react';
+import React, { use, useCallback, useId, useRef, useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import { BusyIndicatorLaneProvider, createBusyIndicatorLane, useIsBusy } from "./busyIndicatorLane.js";
 import { BaseTypeahead } from "./BaseTypeahead.js";
@@ -30,8 +31,9 @@ import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { Spinner } from "../Spinner/index.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, sizeVars } from "../theme/tokens.stylex.js";
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
 import { TrailingKeyDownContext } from "./trailingKeyDown.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
@@ -166,7 +168,7 @@ export function Typeahead({
   maxMenuItems,
   minQueryLength,
   emptySearchText,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   disabledMessage,
   hasClear = true,
   hasAutoFocus,
@@ -202,6 +204,8 @@ export function Typeahead({
   const descriptionId = useId();
   const statusMessageId = useId();
   const inputGroup = useInputGroup();
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || inputGroupState.isDisabled;
   const wrapperRef = useRef(null);
   const inputRef = useRef(null);
   const tokenRef = useRef(null);
@@ -235,7 +239,14 @@ export function Typeahead({
   // Show token when value is selected and not in edit mode
   const showToken = value != null && !isEditing;
 
-  // Enter edit mode: remove token visually, populate input with value label
+  // Enter edit mode: remove token visually, populate input with value label.
+  //
+  // Everything happens inside the tap or click that asked for it, never a
+  // frame later: iOS raises the software keyboard only for a focus made while
+  // the browser is still dispatching the person's own tap (or when the
+  // keyboard is already up). Deferred to an animation frame, the focus landed
+  // with no keyboard, so a tap on the selected value showed a caret and
+  // nothing to type with until a second tap.
   const handleEnterEditMode = useCallback(() => {
     if (isDisabled || !value) {
       return;
@@ -244,20 +255,25 @@ export function Typeahead({
     setIsEditing(true);
     // The base will receive onChangeQuery with the value's label
     onChangeQuery?.(value.label);
-    requestAnimationFrame(() => {
-      const input = inputRef.current;
-      if (input) {
-        // Set the input value directly since the base manages its own query state
-        // We trigger a synthetic change to sync the base's internal state
-        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    const input = inputRef.current;
+    if (input) {
+      // Set the input value directly since the base manages its own query
+      // state, and trigger a synthetic change to sync the base's internal
+      // state. flushSync commits that query before the focus, so the base's
+      // focus handler sees the label rather than an empty query: an empty one
+      // would open the hasEntriesOnFocus bootstrap entries, and Enter would
+      // commit the first of them instead of the edited value.
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+      // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the base must hold the label as its query before the in-tap focus
+      flushSync(() => {
         nativeInputValueSetter?.call(input, value.label);
         input.dispatchEvent(new Event('input', {
           bubbles: true
         }));
-        input.focus();
-        input.setSelectionRange(0, input.value.length);
-      }
-    });
+      });
+      input.focus();
+      input.setSelectionRange(0, input.value.length);
+    }
   }, [isDisabled, value, onChangeQuery]);
 
   // Handle blur: restore token if editing and no selection was made
@@ -361,6 +377,7 @@ export function Typeahead({
           onKeyDown?.(event);
         }
       },
+      ...(inputGroup ? inputGroupItemProps : undefined),
       ...mergeProps(themeProps('typeahead', {
         size,
         status: status?.type