@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/src/Lightbox/Lightbox.tsx

@@ -19,7 +19,6 @@
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type MouseEvent as ReactMouseEvent,
@@ -29,7 +28,6 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
-import {useAnnounce} from '../hooks/useAnnounce';
 import {useScrollLock} from '../hooks/useScrollLock';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {mergeProps, mergeRefs} from '../utils';
@@ -308,10 +306,7 @@ export function Lightbox({
   const dragStartRef = useRef({x: 0, y: 0, panX: 0, panY: 0});
 
   // Resolve current media item
-  const mediaArray = useMemo(
-    () => (Array.isArray(media) ? media : [media]),
-    [media],
-  );
+  const mediaArray = Array.isArray(media) ? media : [media];
   const isGallery = mediaArray.length > 1;
   const currentItem =
     mediaArray.length > 0
@@ -334,29 +329,6 @@ export function Lightbox({
     setPan({x: 0, y: 0});
   }, [index, currentItem?.src]);
 
-  // Announce gallery navigation to screen readers. Moving between images only
-  // updates the visual counter, which is silent to assistive tech, so mirror
-  // each change in a polite live region ("<alt>, 3 of 12", or "Image 3 of 12"
-  // when the image has no alt). Announce only when the image changes during an
-  // already-open session — not on mount, not when opening (even at a new
-  // index, since the dialog's aria-label already names the current image), and
-  // not on close.
-  const announce = useAnnounce();
-  const prevIndexRef = useRef(index);
-  const wasOpenRef = useRef(isOpen);
-  useEffect(() => {
-    const indexChanged = prevIndexRef.current !== index;
-    const wasOpen = wasOpenRef.current;
-    prevIndexRef.current = index;
-    wasOpenRef.current = isOpen;
-    if (!indexChanged || !isOpen || !wasOpen) {
-      return;
-    }
-    const item = mediaArray[Math.min(index, mediaArray.length - 1)];
-    const position = `${index + 1} of ${mediaArray.length}`;
-    announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
-  }, [index, isOpen, announce, mediaArray]);
-
   // Open/close dialog
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;

package/src/NavMenu/NavMenu.doc.mjs

@@ -17,27 +17,12 @@ export const docs = {
       'NavHeadingMenuItem renders individual selectable items. ' +
       'Pass as the menu prop of SideNavHeading or TopNavHeading.',
   },
-  playground: {
-    defaults: {
-      children: [
-        {__element: 'NavHeadingMenuItem', props: {label: 'Dashboard', href: '#'}},
-        {__element: 'NavHeadingMenuItem', props: {label: 'Analytics', href: '#'}},
-        {__element: 'NavHeadingMenuItem', props: {label: 'Settings', href: '#'}},
-      ],
-    },
-  },
   props: [
     {name: 'children', type: 'ReactNode', required: true, description: 'Menu items.'},
     {name: 'size', type: "'sm' | 'md' | 'lg'", default: "'md'", description: 'Controls min-width and item padding.'},
     {name: 'minWidth', type: 'number | string', description: 'Minimum width override.'},
     {name: 'xstyle', type: 'StyleXStyles', description: 'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.'},
   ],
-  theming: {
-    targets: [
-      {className: 'astryx-nav-heading-menu', visualProps: ['size']},
-      {className: 'astryx-nav-heading-menu-item', visualProps: ['size']},
-    ],
-  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/NumberInput/NumberInput.test.tsx

@@ -12,7 +12,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {TestIcon} from '../__tests__/TestIcon';
+import {HashtagIcon} from '@heroicons/react/24/outline';
 import {NumberInput} from './NumberInput';
 
 // Mock showPopover/hidePopover since jsdom does not implement them. Used by the
@@ -174,7 +174,7 @@ describe('NumberInput', () => {
         label="Count"
         value={null}
         onChange={() => {}}
-        startIcon={TestIcon}
+        startIcon={HashtagIcon}
       />,
     );
     expect(screen.getByRole('spinbutton')).toBeInTheDocument();
@@ -707,7 +707,7 @@ describe('NumberInput', () => {
           label="Qty"
           value={0}
           onChange={() => {}}
-          startIcon={<TestIcon />}
+          startIcon={<HashtagIcon />}
         />,
       );
 
@@ -867,48 +867,3 @@ describe('NumberInput', () => {
     });
   });
 });
-
-describe('keyboard clearing with hasClear (#3599)', () => {
-  it('commits null when the input is emptied and blurred', () => {
-    const onChange = vi.fn();
-    render(
-      <NumberInput label="Qty" hasClear value={42} onChange={onChange} />,
-    );
-    const input = screen.getByLabelText('Qty');
-    fireEvent.change(input, {target: {value: ''}});
-    fireEvent.blur(input);
-    expect(onChange).toHaveBeenCalledWith(null);
-  });
-
-  it('commits null when the input is emptied and Enter is pressed', () => {
-    const onChange = vi.fn();
-    render(
-      <NumberInput label="Qty" hasClear value={42} onChange={onChange} />,
-    );
-    const input = screen.getByLabelText('Qty');
-    fireEvent.change(input, {target: {value: ''}});
-    fireEvent.keyDown(input, {key: 'Enter'});
-    expect(onChange).toHaveBeenCalledWith(null);
-  });
-
-  it('does not fire when emptied and blurred with no prior value', () => {
-    const onChange = vi.fn();
-    render(
-      <NumberInput label="Qty" hasClear value={null} onChange={onChange} />,
-    );
-    const input = screen.getByLabelText('Qty');
-    fireEvent.change(input, {target: {value: ''}});
-    fireEvent.blur(input);
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('still reverts on blur when hasClear is not set', () => {
-    const onChange = vi.fn();
-    render(<NumberInput label="Qty" value={42} onChange={onChange} />);
-    const input = screen.getByLabelText('Qty');
-    fireEvent.change(input, {target: {value: ''}});
-    fireEvent.blur(input);
-    expect(onChange).not.toHaveBeenCalled();
-    expect((input as HTMLInputElement).value).toBe('42');
-  });
-});

package/src/NumberInput/NumberInput.tsx

@@ -503,21 +503,13 @@ export function NumberInput({
   const handleBlur = useCallback(
     (e: FocusEvent<HTMLInputElement>) => {
       if (pendingInput !== null) {
-        if (hasClear && pendingInput.trim() === '') {
-          // Keyboard clearing honors the clearable contract: an emptied
-          // input commits null instead of silently reverting on blur.
-          if (value != null) {
-            onChange(null);
-          }
-        } else {
-          const parsed = parseNumberInput(pendingInput, {
-            min,
-            max,
-            isIntegerOnly,
-          });
-          if (parsed !== null && parsed !== value) {
-            onChange(parsed);
-          }
+        const parsed = parseNumberInput(pendingInput, {
+          min,
+          max,
+          isIntegerOnly,
+        });
+        if (parsed !== null && parsed !== value) {
+          onChange(parsed);
         }
       }
 
@@ -525,7 +517,7 @@ export function NumberInput({
       setPendingInput(null);
       onBlur?.(e);
     },
-    [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur, hasClear],
+    [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur],
   );
 
   // Handle keyboard events
@@ -534,21 +526,13 @@ export function NumberInput({
       if (e.key === 'Enter') {
         // Validate and commit on Enter
         if (pendingInput !== null) {
-          if (hasClear && pendingInput.trim() === '') {
-            // Same clearable contract as blur: Enter on an emptied input
-            // commits null instead of reverting.
-            if (value != null) {
-              onChange(null);
-            }
-          } else {
-            const parsed = parseNumberInput(pendingInput, {
-              min,
-              max,
-              isIntegerOnly,
-            });
-            if (parsed !== null && parsed !== value) {
-              onChange(parsed);
-            }
+          const parsed = parseNumberInput(pendingInput, {
+            min,
+            max,
+            isIntegerOnly,
+          });
+          if (parsed !== null && parsed !== value) {
+            onChange(parsed);
           }
         }
         onEnter?.();
@@ -564,7 +548,6 @@ export function NumberInput({
       isIntegerOnly,
       onEnter,
       onKeyDown,
-      hasClear,
     ],
   );
 

package/src/Overlay/Overlay.doc.mjs

@@ -180,12 +180,6 @@ export const docs = {
       description: 'Ref forwarded to the overlay root element.',
     },
   ],
-  theming: {
-    targets: [
-      {className: 'astryx-overlay'},
-      {className: 'astryx-overlay-scrim', visualProps: ['position']},
-    ],
-  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/Pagination/Pagination.test.tsx

@@ -345,149 +345,6 @@ describe('Pagination', () => {
       const activeDot = screen.getByRole('button', {name: 'Go to page 3'});
       expect(activeDot).toHaveAttribute('aria-current', 'page');
     });
-
-    // -------------------------------------------------------------------------
-    // Keyboard navigation (roving tabindex + arrow keys via useListFocus).
-    // Selection follows focus: arrow/Home/End move focus and select that page.
-    // -------------------------------------------------------------------------
-
-    it('uses roving tabindex — active dot has tabIndex 0, others -1', () => {
-      render(
-        <Pagination
-          page={2}
-          onChange={() => {}}
-          totalPages={4}
-          variant="dots"
-        />,
-      );
-      expect(
-        screen.getByRole('button', {name: 'Go to page 2'}),
-      ).toHaveAttribute('tabindex', '0');
-      expect(
-        screen.getByRole('button', {name: 'Go to page 1'}),
-      ).toHaveAttribute('tabindex', '-1');
-      expect(
-        screen.getByRole('button', {name: 'Go to page 3'}),
-      ).toHaveAttribute('tabindex', '-1');
-    });
-
-    it('ArrowRight moves focus to the next dot and selects it', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <Pagination
-          page={2}
-          onChange={onChange}
-          totalPages={4}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 2'}).focus();
-      await user.keyboard('{ArrowRight}');
-      expect(onChange).toHaveBeenCalledWith(3);
-      expect(screen.getByRole('button', {name: 'Go to page 3'})).toHaveFocus();
-    });
-
-    it('ArrowLeft moves focus to the previous dot and selects it', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <Pagination
-          page={3}
-          onChange={onChange}
-          totalPages={4}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 3'}).focus();
-      await user.keyboard('{ArrowLeft}');
-      expect(onChange).toHaveBeenCalledWith(2);
-      expect(screen.getByRole('button', {name: 'Go to page 2'})).toHaveFocus();
-    });
-
-    it('Home selects the first page, End the last', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      const {rerender} = render(
-        <Pagination
-          page={3}
-          onChange={onChange}
-          totalPages={5}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 3'}).focus();
-      await user.keyboard('{Home}');
-      expect(onChange).toHaveBeenCalledWith(1);
-      expect(screen.getByRole('button', {name: 'Go to page 1'})).toHaveFocus();
-
-      onChange.mockClear();
-      rerender(
-        <Pagination
-          page={3}
-          onChange={onChange}
-          totalPages={5}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 3'}).focus();
-      await user.keyboard('{End}');
-      expect(onChange).toHaveBeenCalledWith(5);
-      expect(screen.getByRole('button', {name: 'Go to page 5'})).toHaveFocus();
-    });
-
-    it('wraps from the last dot to the first with ArrowRight', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <Pagination
-          page={4}
-          onChange={onChange}
-          totalPages={4}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 4'}).focus();
-      await user.keyboard('{ArrowRight}');
-      expect(onChange).toHaveBeenCalledWith(1);
-      expect(screen.getByRole('button', {name: 'Go to page 1'})).toHaveFocus();
-    });
-
-    it('wraps from the first dot to the last with ArrowLeft', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <Pagination
-          page={1}
-          onChange={onChange}
-          totalPages={4}
-          variant="dots"
-        />,
-      );
-      screen.getByRole('button', {name: 'Go to page 1'}).focus();
-      await user.keyboard('{ArrowLeft}');
-      expect(onChange).toHaveBeenCalledWith(4);
-      expect(screen.getByRole('button', {name: 'Go to page 4'})).toHaveFocus();
-    });
-
-    it('does not navigate with arrow keys when disabled', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <Pagination
-          page={2}
-          onChange={onChange}
-          totalPages={4}
-          variant="dots"
-          isDisabled
-        />,
-      );
-      const dot = screen.getByRole('button', {name: 'Go to page 2'});
-      expect(dot).toBeDisabled();
-      dot.focus();
-      await user.keyboard('{ArrowRight}');
-      expect(onChange).not.toHaveBeenCalled();
-    });
   });
 
   // ---------------------------------------------------------------------------

package/src/Pagination/Pagination.tsx

@@ -35,7 +35,6 @@ import {Icon} from '../Icon';
 import {Selector} from '../Selector';
 import {Text} from '../Text';
 import {useAnnounce} from '../hooks/useAnnounce';
-import {useListFocus} from '../hooks/useListFocus';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -371,21 +370,6 @@ export function Pagination({
   // in-flight target instead of stalling on the last committed page.
   const [optimisticPage, setOptimisticPage] = useOptimistic(page);
 
-  // Roving-tabindex + arrow/Home/End keyboard nav for the dots variant, owned
-  // by the shared useListFocus primitive (mirrors SegmentedControl). It stamps a
-  // single tab stop across the dots and moves focus horizontally; selection
-  // follows focus via handleDotsFocus so arrow keys move the active page.
-  const {
-    listRef: dotsListRef,
-    handleKeyDown: handleDotsKeyDown,
-    handleFocus: handleDotsRovingFocus,
-  } = useListFocus<HTMLDivElement>({
-    itemSelector: 'button',
-    hasRovingTabIndex: true,
-    wrap: true,
-    orientation: 'horizontal',
-  });
-
   // Compute pagination state
   const computedTotalPages =
     totalPagesProp ??
@@ -426,28 +410,6 @@ export function Pagination({
     });
   };
 
-  // Selection-follows-focus for the dots (APG radiogroup pattern): useListFocus
-  // only *moves* focus, so when focus lands on a dot -- via arrow/Home/End, or a
-  // click that focuses it -- we select that dot's page. handleDotsRovingFocus
-  // keeps the roving tab stop in sync. The current page is skipped so tabbing
-  // into the group is a no-op.
-  const handleDotsFocus = (e: React.FocusEvent) => {
-    handleDotsRovingFocus(e);
-    if (isDisabled) {
-      return;
-    }
-    const focused = (e.target as HTMLElement | null)?.closest<HTMLElement>(
-      'button[data-page]',
-    );
-    if (!focused) {
-      return;
-    }
-    const nextPage = Number(focused.dataset.page);
-    if (Number.isFinite(nextPage) && nextPage !== optimisticPage) {
-      handlePageChange(nextPage);
-    }
-  };
-
   const handlePrevious = () => {
     if (hasPrevious) {
       handlePageChange(optimisticPage - 1);
@@ -556,47 +518,33 @@ export function Pagination({
         if (computedTotalPages == null) {
           return null;
         }
-
         return (
           <div
-            ref={dotsListRef}
             {...stylex.props(styles.dotsContainer)}
             role="group"
-            aria-label="Page indicators"
-            onKeyDown={handleDotsKeyDown}
-            onFocus={handleDotsFocus}>
-            {Array.from({length: computedTotalPages}, (_, i) => {
-              const isActive = i + 1 === optimisticPage;
-              return (
-                <button
-                  key={i + 1}
-                  type="button"
-                  data-page={i + 1}
-                  aria-label={`Go to page ${i + 1}`}
-                  aria-current={isActive ? 'page' : undefined}
-                  // The active dot is the single roving tab stop; useListFocus
-                  // maintains it as focus and the active page move.
-                  tabIndex={isActive ? 0 : -1}
-                  // Selection is driven by focus (handleDotsFocus); clicking only
-                  // needs to focus the dot, which some browsers (Safari) skip for
-                  // buttons, so focus it explicitly.
-                  onClick={e => e.currentTarget.focus()}
-                  disabled={isDisabled}
-                  {...mergeProps(
-                    themeProps('pagination-dot', {
-                      active: isActive ? 'active' : null,
-                      size,
-                    }),
-                    stylex.props(
-                      styles.dot,
-                      isSm && styles.dotSm,
-                      isActive && styles.dotActive,
-                      isDisabled && styles.dotDisabled,
-                    ),
-                  )}
-                />
-              );
-            })}
+            aria-label="Page indicators">
+            {Array.from({length: computedTotalPages}, (_, i) => (
+              <button
+                key={i + 1}
+                type="button"
+                aria-label={`Go to page ${i + 1}`}
+                aria-current={i + 1 === optimisticPage ? 'page' : undefined}
+                onClick={() => handlePageChange(i + 1)}
+                disabled={isDisabled}
+                {...mergeProps(
+                  themeProps('pagination-dot', {
+                    active: i + 1 === optimisticPage ? 'active' : null,
+                    size,
+                  }),
+                  stylex.props(
+                    styles.dot,
+                    isSm && styles.dotSm,
+                    i + 1 === optimisticPage && styles.dotActive,
+                    isDisabled && styles.dotDisabled,
+                  ),
+                )}
+              />
+            ))}
           </div>
         );
       }

package/src/Popover/Popover.test.tsx

@@ -354,69 +354,4 @@ describe('Popover', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
   });
-
-  describe('focus restoration', () => {
-    it('returns focus to the trigger when closed via Escape', () => {
-      render(
-        <Popover
-          content={
-            <button type="button" data-testid="inside-content">
-              Inside
-            </button>
-          }
-          label="Test">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-      const trigger = screen.getByRole('button', {name: 'Open'});
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-
-      fireEvent.click(trigger);
-      expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-      // Move focus into the open popover, as a keyboard user would.
-      const inside = screen.getByTestId('inside-content');
-      inside.focus();
-      expect(inside).toHaveFocus();
-
-      fireEvent.keyDown(document, {key: 'Escape'});
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      expect(trigger).toHaveFocus();
-    });
-
-    it('returns focus to the trigger on light dismiss', () => {
-      render(
-        <Popover
-          content={
-            <button type="button" data-testid="inside-content">
-              Inside
-            </button>
-          }
-          label="Test">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-      const trigger = screen.getByRole('button', {name: 'Open'});
-      trigger.focus();
-
-      fireEvent.click(trigger);
-      expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-      const inside = screen.getByTestId('inside-content');
-      inside.focus();
-      expect(inside).toHaveFocus();
-
-      // Simulate the browser's light dismiss for popover="auto": clicking
-      // outside fires a `toggle` event with newState "closed".
-      const popoverEl = document.querySelector('[popover]');
-      expect(popoverEl).not.toBeNull();
-      const toggleEvent = new Event('toggle');
-      Object.defineProperty(toggleEvent, 'newState', {value: 'closed'});
-      fireEvent(popoverEl as HTMLElement, toggleEvent);
-
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      expect(trigger).toHaveFocus();
-    });
-  });
 });

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -120,7 +120,7 @@ export const docs = {
       name: 'resultCount',
       type: 'number | string',
       description:
-        'Number of results matching the current filters. When a number, formatted as "N results". When a string, displayed as-is. Changes are announced to screen readers via a polite live region.',
+        'Number of results matching the current filters. When a number, formatted as "N results". When a string, displayed as-is.',
     },
     {
       name: 'size',
@@ -261,7 +261,7 @@ export const docsZh = {
       name: 'resultCount',
       type: 'number | string',
       description:
-        '匹配当前过滤器的结果数量。数字类型时格式化为"N results"。字符串类型时按原样显示。数量变化会通过 polite 实时区域向屏幕阅读器播报。',
+        '匹配当前过滤器的结果数量。数字类型时格式化为"N results"。字符串类型时按原样显示。',
     },
     {
       name: 'size',