@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

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/Markdown/Markdown.tsx

@@ -425,14 +425,7 @@ const streamingStyles = stylex.create({
   fadeIn: {
     opacity: 1,
     transitionProperty: 'opacity',
-    // Collapse the entry fade to an instant swap under reduced motion. The
-    // 0s duration makes the @starting-style opacity jump non-animated (the
-    // media query can't nest inside @starting-style), mirroring the
-    // conditional-duration form in Spinner (Spinner.tsx).
-    transitionDuration: {
-      default: durationVars['--duration-medium'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
+    transitionDuration: durationVars['--duration-medium'],
     transitionTimingFunction: easeVars['--ease-standard'],
     '@starting-style': {
       opacity: 0,
@@ -1056,7 +1049,12 @@ function renderBlock(
   switch (node.type) {
     case 'heading': {
       const level = Math.min(node.level + headingLevelStart - 1, 6) as
-        1 | 2 | 3 | 4 | 5 | 6;
+        | 1
+        | 2
+        | 3
+        | 4
+        | 5
+        | 6;
       const headingChildren = node.children.map((c, i) =>
         renderInline(
           c,

package/src/Markdown/parser.perf.test.ts

@@ -69,31 +69,6 @@ function simulateStreamingIncremental(
   return parseMarkdownIncremental(fullText, state);
 }
 
-// A single wall-clock measurement is flaky when the whole suite runs in
-// parallel forks: scheduler contention can inflate a millisecond-scale
-// sample well past a tight budget (observed 30.9ms against the 20ms Small
-// budget). The fastest of a few runs approximates the un-contended cost —
-// a real regression raises the minimum too — so budgets stay tight without
-// flapping. The streaming budget tests below keep a single run: their
-// budgets carry 10x+ headroom, which contention cannot realistically eat.
-function measureBest<T>(
-  runs: number,
-  fn: () => T,
-): {elapsed: number; result: T} {
-  let elapsed = Infinity;
-  let result!: T;
-  for (let i = 0; i < runs; i++) {
-    const start = performance.now();
-    const r = fn();
-    const t = performance.now() - start;
-    if (t < elapsed) {
-      elapsed = t;
-      result = r;
-    }
-  }
-  return {elapsed, result};
-}
-
 describe('parseMarkdown performance', () => {
   const sizes = [
     {name: 'Small', paragraphs: 10, maxMs: 20},
@@ -118,7 +93,9 @@ describe('parseMarkdown performance', () => {
   for (const size of sizes) {
     it(`full re-parse ${size.name} (${size.paragraphs} paragraphs) under ${size.maxMs}ms`, () => {
       const text = generateAIResponse(size.paragraphs);
-      const {elapsed, result} = measureBest(3, () => parseMarkdown(text));
+      const start = performance.now();
+      const result = parseMarkdown(text);
+      const elapsed = performance.now() - start;
       console.log(
         `  ${size.name} full parse: ${elapsed.toFixed(2)}ms → ${result.length} blocks`,
       );
@@ -172,14 +149,15 @@ describe('parseMarkdown performance', () => {
     const text = generateAIResponse(200);
     const chunkSize = 50;
 
-    // The assertion below compares a ratio of two measurements, so noise on
-    // either side can flip it — measure both as best-of-3.
-    const {elapsed: fullElapsed} = measureBest(3, () =>
-      simulateStreamingFullReparse(text, chunkSize),
-    );
-    const {elapsed: incrElapsed} = measureBest(3, () =>
-      simulateStreamingIncremental(text, chunkSize),
-    );
+    // Full re-parse timing
+    const fullStart = performance.now();
+    simulateStreamingFullReparse(text, chunkSize);
+    const fullElapsed = performance.now() - fullStart;
+
+    // Incremental timing
+    const incrStart = performance.now();
+    simulateStreamingIncremental(text, chunkSize);
+    const incrElapsed = performance.now() - incrStart;
 
     const speedup = fullElapsed / incrElapsed;
     console.log(`\n  === Incremental vs Full Re-parse Speedup ===`);

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();
-    });
   });
 
   // ---------------------------------------------------------------------------
@@ -903,23 +760,4 @@ describe('Pagination', () => {
       ).not.toBeInTheDocument();
     });
   });
-
-  describe('rest forwarding', () => {
-    it('forwards data-testid, id, and aria-* to the root nav', () => {
-      const {container} = render(
-        <Pagination
-          page={1}
-          onChange={() => {}}
-          totalPages={3}
-          data-testid="pager"
-          id="pager-1"
-          aria-describedby="hint"
-        />,
-      );
-      const nav = container.querySelector('nav')!;
-      expect(nav).toHaveAttribute('data-testid', 'pager');
-      expect(nav).toHaveAttribute('id', 'pager-1');
-      expect(nav).toHaveAttribute('aria-describedby', 'hint');
-    });
-  });
 });

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';
@@ -350,7 +349,6 @@ export function Pagination({
   className,
   style,
   ref,
-  ...rest
 }: PaginationProps) {
   const [, startTransition] = useTransition();
 
@@ -372,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 ??
@@ -427,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);
@@ -557,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>
         );
       }
@@ -611,15 +558,14 @@ export function Pagination({
   return (
     <nav
       ref={ref}
+      aria-label={label}
+      data-testid={testId}
       {...mergeProps(
         themeProps('pagination', {variant, size}),
         stylex.props(styles.root, xstyle),
         className,
         style,
-      )}
-      {...rest}
-      aria-label={label}
-      data-testid={testId}>
+      )}>
       {pageSizeOptions != null && pageSizeOptions.length > 0 && (
         <div {...stylex.props(styles.pageSizeSelector)}>
           <div {...stylex.props(styles.pageSizeSelectorControl)}>