@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/MobileNav/MobileNav.tsx

@@ -46,7 +46,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {Heading} from '../Heading/Heading';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
-import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
+import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
@@ -284,11 +284,9 @@ export function MobileNav({
   label,
   'data-testid': testId,
   xstyle,
-  className,
-  style,
-  onClick: onClickProp,
+  className: _className,
+  style: _style,
   ref,
-  ...rest
 }: MobileNavProps) {
   // Read from AppShell context as fallback
   const appShellMobile = useAppShellMobile();
@@ -409,6 +407,10 @@ export function MobileNav({
   return (
     <dialog
       ref={mergeRefs(ref, dialogRef)}
+      data-testid={testId}
+      aria-label={label ?? (typeof header === 'string' ? header : 'Navigation')}
+      onClick={handleDialogClick}
+      onCancel={handleCancel}
       {...mergeProps(
         themeProps('mobile-nav', {side: resolvedSide}),
         stylex.props(
@@ -418,14 +420,7 @@ export function MobileNav({
           isOpen && styles.backdropOpen,
           xstyle,
         ),
-        className,
-        style,
-      )}
-      {...rest}
-      data-testid={testId}
-      aria-label={label ?? (typeof header === 'string' ? header : 'Navigation')}
-      onClick={composeEventHandlers(onClickProp, handleDialogClick)}
-      onCancel={handleCancel}>
+      )}>
       {/* Drawer panel — tabIndex so showModal() focuses the drawer, not the close button */}
       <div
         tabIndex={-1}

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/Outline/Outline.doc.mjs

@@ -30,7 +30,6 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-outline', visualProps: ['density']},
-      {className: 'astryx-outline-indicator'},
       {className: 'astryx-outline-item', visualProps: ['level'], states: ['active']},
     ],
   },
@@ -164,7 +163,6 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-outline', visualProps: ['density']},
-      {className: 'astryx-outline-indicator'},
       {className: 'astryx-outline-item', visualProps: ['level'], states: ['active']},
     ],
   },

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)}>

package/src/Popover/Popover.doc.mjs

@@ -36,13 +36,13 @@ export const docs = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: 'Position placement relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction, so RTL contexts mirror automatically in pure CSS.',
+          description: 'Position placement relative to the trigger.',
           default: "'below'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: 'Alignment along the placement axis. Logical: start/end follow the popover\'s own inherited direction (RTL mirrors).',
+          description: 'Alignment along the placement axis.',
           default: "'start'",
         },
         {
@@ -177,13 +177,13 @@ export const docsZh = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: '相对于触发器的位置放置方式。逻辑值：start/end 根据弹出层自身继承的方向解析，RTL 环境通过纯 CSS 自动镜像。',
+          description: '相对于触发器的位置放置方式。',
           default: "'below'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: '沿放置轴的对齐方式。逻辑值：start/end 跟随弹出层自身继承的方向（RTL 镜像）。',
+          description: '沿放置轴的对齐方式。',
           default: "'start'",
         },
         {
@@ -305,8 +305,8 @@ export const docsDense = {
         children: 'Trigger element. Must contain <button> or [role="button"] element.',
         anchorRef: 'External ref for popover anchor in sibling mode.',
         content: 'Content displayed inside popover.',
-        placement: 'Position relative to trigger. Logical: start/end resolve against the popover\'s inherited direction (RTL mirrors).',
-        alignment: 'Alignment along placement axis. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+        placement: 'Position relative to trigger.',
+        alignment: 'Alignment along placement axis.',
         isOpen: 'Whether popover shown in controlled mode.',
         onOpenChange: 'Callback fired when popover visibility changes.',
         isEnabled: 'When false, trigger interactions ignored.',