@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/NavIcon/NavIcon.doc.mjs

@@ -22,7 +22,10 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-navicon'},
+      {className: 'astryx-nav-icon'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-navicon', deprecatedFor: 'nav-icon'},
     ],
   },
   usage: {
@@ -51,7 +54,10 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-navicon'},
+      {className: 'astryx-nav-icon'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-navicon', deprecatedFor: 'nav-icon'},
     ],
   },
   usage: {

package/src/NavIcon/NavIcon.test.tsx

@@ -30,3 +30,12 @@ describe('NavIcon', () => {
     expect(screen.getByTestId('nav-icon')).toBeInTheDocument();
   });
 });
+
+describe('NavIcon theme target names', () => {
+  it('renders the deprecated class beside the current one', () => {
+    render(<NavIcon icon={<span>Icon</span>} data-testid="nav-icon" />);
+    const root = screen.getByTestId('nav-icon');
+    expect(root).toHaveClass('astryx-nav-icon');
+    expect(root).toHaveClass('astryx-navicon');
+  });
+});

package/src/NavIcon/NavIcon.tsx

@@ -79,7 +79,11 @@ export function NavIcon({
     <span
       ref={ref}
       {...mergeProps(
-        themeProps('navicon'),
+        themeProps('nav-icon', undefined, {
+          // `navicon` ran the compound name together; themes styling it keep
+          // working until the next major.
+          legacyNames: ['navicon'],
+        }),
         stylex.props(styles.base, xstyle),
         className,
         style,

package/src/NavItem/navItemStyles.stylex.ts

@@ -75,14 +75,6 @@ export const navItemStyles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     textAlign: 'start',
     boxSizing: 'border-box',
-    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-      '@media (hover: hover)': {
-        backgroundColor: colorVars['--color-overlay-hover'],
-      },
-    },
-    ':active': {
-      backgroundColor: colorVars['--color-overlay-pressed'],
-    },
   },
 
   /** Selected/active page indicator — deemphasized background, medium weight */

package/src/NavMenu/NavHeadingMenu.test.tsx

@@ -321,3 +321,33 @@ describe('context forwarding', () => {
     expect(closeMenu).toHaveBeenCalledOnce();
   });
 });
+
+describe('NavHeadingMenu pass-through props', () => {
+  it('forwards pass-through props to the menu element', () => {
+    render(
+      <NavHeadingMenu aria-label="Products" id="products" data-source="nav">
+        <NavHeadingMenuItem label="First" />
+      </NavHeadingMenu>,
+    );
+    const menu = screen.getByRole('menu');
+    expect(menu).toHaveAttribute('aria-label', 'Products');
+    expect(menu).toHaveAttribute('id', 'products');
+    expect(menu).toHaveAttribute('data-source', 'nav');
+  });
+
+  it('runs a caller onKeyDown alongside the menu keyboard model', async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn();
+    render(
+      <NavHeadingMenu onKeyDown={onKeyDown}>
+        <NavHeadingMenuItem label="First" />
+        <NavHeadingMenuItem label="Second" />
+      </NavHeadingMenu>,
+    );
+    const items = screen.getAllByRole('menuitem');
+    items[0].focus();
+    await user.keyboard('{ArrowDown}');
+    expect(onKeyDown).toHaveBeenCalled();
+    expect(items[1]).toHaveFocus();
+  });
+});

package/src/NavMenu/NavHeadingMenu.tsx

@@ -15,7 +15,7 @@
 import React, {useCallback, useMemo, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {composeEventHandlers, mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
@@ -96,6 +96,8 @@ export function NavHeadingMenu({
   className,
   style: styleProp,
   'data-testid': testId,
+  onKeyDown: onKeyDownProp,
+  ...rest
 }: NavHeadingMenuProps) {
   const closeCtx = useNavHeadingCloseContext();
   const closeMenu = closeCtx?.closeMenu;
@@ -164,15 +166,16 @@ export function NavHeadingMenu({
     <NavHeadingMenuContext value={ctx}>
       <div
         ref={useMergedRefs(ref, listRef)}
-        role="menu"
-        onKeyDown={listKeyDown}
         data-testid={testId}
         {...mergeProps(
           themeProps('nav-heading-menu', {size}),
           stylex.props(styles.root, sizeStyles[size], xstyle),
           className,
           inlineStyle,
-        )}>
+        )}
+        {...rest}
+        role="menu"
+        onKeyDown={composeEventHandlers(onKeyDownProp, listKeyDown)}>
         {children}
       </div>
     </NavHeadingMenuContext>

package/src/NumberInput/NumberInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'NumberInput',
   displayName: 'Number Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'numberinput',
     'numberfield',
@@ -35,7 +35,7 @@ export const docs = {
       name: 'onChange',
       type: '(value: number) => void',
       description:
-        'Callback fired when input value changes (only on valid input).',
+        'Callback fired when a valid text edit commits on blur or Enter, or when a step or clear control changes the value.',
       required: true,
     },
     {
@@ -128,12 +128,14 @@ export const docs = {
     {
       name: 'min',
       type: 'number | null',
-      description: 'Minimum value allowed.',
+      description:
+        'Minimum value allowed. A smaller entry commits at this value on blur or Enter.',
     },
     {
       name: 'max',
       type: 'number | null',
-      description: 'Maximum value allowed.',
+      description:
+        'Maximum value allowed. A larger entry commits at this value on blur or Enter.',
     },
     {
       name: 'step',
@@ -242,6 +244,11 @@ export const docs = {
     description:
       'A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          "Let people paste formatted numbers: a pasted 1,234,234,234 is read under the field's locale and commits as 1234234234 on blur. Typing is never intercepted.",
+      },
       {
         guidance: true,
         description:
@@ -323,7 +330,8 @@ export const docsZh = {
     {
       name: 'onChange',
       type: '(value: number) => void',
-      description: '输入值变化时触发的回调（仅在输入有效时触发）。',
+      description:
+        '有效文本编辑在失焦或按 Enter 时提交；步进或清除控件更改值时也会触发回调。',
       required: true,
     },
     {
@@ -405,12 +413,12 @@ export const docsZh = {
     {
       name: 'min',
       type: 'number | null',
-      description: '允许的最小值。',
+      description: '允许的最小值。更小的输入会在失焦或按 Enter 时提交为该值。',
     },
     {
       name: 'max',
       type: 'number | null',
-      description: '允许的最大值。',
+      description: '允许的最大值。更大的输入会在失焦或按 Enter 时提交为该值。',
     },
     {
       name: 'step',
@@ -509,6 +517,11 @@ export const docsZh = {
     description:
       'A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          '可以直接粘贴带格式的数字：粘贴 1,234,234,234 会按字段所在区域设置解析，失去焦点时提交为 1234234234。输入过程中不会拦截按键。',
+      },
       {
         guidance: true,
         description:
@@ -578,6 +591,11 @@ export const docsDense = {
     description:
       'A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          "Pasted formatted numbers parse: 1,234,234,234 commits as 1234234234 under the field's locale. Typing is never intercepted.",
+      },
       {
         guidance: true,
         description:
@@ -640,7 +658,8 @@ export const docsDense = {
   propDescriptions: {
     label: 'Label text (always rendered for accessibility).',
     value: 'Current input value.',
-    onChange: 'Callback on valid input change.',
+    onChange:
+      'Callback when a valid text edit commits on blur/Enter, or a step/clear control changes the value.',
     size: 'Size variant.',
     isLabelHidden: 'Visually hide label (still accessible to screen readers).',
     description: 'Text between label + input.',