@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/src/Link/Link.tsx

@@ -274,8 +274,6 @@ export interface LinkProps extends BaseProps<
  * <Link href="/settings" color="secondary">Settings</Link>
  * <Link href="/privacy" hasUnderline>Privacy Policy</Link>
  * <Link label="Close dialog" href="/home"><Icon icon="x" /></Link>
- *
- * // Inline link inside text — inherits the surrounding type/size:
  * <Text type="large">
  *   Read our <Link href="/terms" type="inherit">terms</Link> first.
  * </Text>

package/src/Markdown/Markdown.tsx

@@ -425,7 +425,14 @@ const streamingStyles = stylex.create({
   fadeIn: {
     opacity: 1,
     transitionProperty: 'opacity',
-    transitionDuration: durationVars['--duration-medium'],
+    // 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',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
     '@starting-style': {
       opacity: 0,
@@ -1049,12 +1056,7 @@ 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,6 +69,31 @@ 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},
@@ -93,9 +118,7 @@ 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 start = performance.now();
-      const result = parseMarkdown(text);
-      const elapsed = performance.now() - start;
+      const {elapsed, result} = measureBest(3, () => parseMarkdown(text));
       console.log(
         `  ${size.name} full parse: ${elapsed.toFixed(2)}ms → ${result.length} blocks`,
       );
@@ -149,15 +172,14 @@ describe('parseMarkdown performance', () => {
     const text = generateAIResponse(200);
     const chunkSize = 50;
 
-    // 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;
+    // 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),
+    );
 
     const speedup = fullElapsed / incrElapsed;
     console.log(`\n  === Incremental vs Full Re-parse Speedup ===`);

package/src/MobileNav/MobileNav.test.tsx

@@ -144,6 +144,62 @@ describe('MobileNav', () => {
     expect(screen.getByTestId('custom-nav')).toBeInTheDocument();
   });
 
+  it('forwards arbitrary pass-through attributes to the dialog', () => {
+    render(
+      <MobileNav
+        isOpen={true}
+        onOpenChange={() => {}}
+        data-testid="nav"
+        id="main-nav"
+        data-custom="x"
+        aria-describedby="nav-desc">
+        <span>Content</span>
+      </MobileNav>,
+    );
+
+    const dialog = screen.getByTestId('nav');
+    expect(dialog).toHaveAttribute('id', 'main-nav');
+    expect(dialog).toHaveAttribute('data-custom', 'x');
+    expect(dialog).toHaveAttribute('aria-describedby', 'nav-desc');
+  });
+
+  it('applies a consumer className and style to the dialog', () => {
+    render(
+      <MobileNav
+        isOpen={true}
+        onOpenChange={() => {}}
+        data-testid="nav"
+        className="consumer-class"
+        style={{zIndex: 42}}>
+        <span>Content</span>
+      </MobileNav>,
+    );
+
+    const dialog = screen.getByTestId('nav');
+    expect(dialog.className).toContain('consumer-class');
+    expect(dialog.style.zIndex).toBe('42');
+  });
+
+  it('composes a consumer onClick with the backdrop-dismiss handler', () => {
+    const onClick = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <MobileNav
+        isOpen={true}
+        onOpenChange={onOpenChange}
+        data-testid="nav"
+        onClick={onClick}>
+        <span>Content</span>
+      </MobileNav>,
+    );
+
+    // Clicking the dialog element itself (the backdrop) dismisses AND calls the
+    // consumer handler.
+    fireEvent.click(screen.getByTestId('nav'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
   it('uses native dialog element', () => {
     render(
       <MobileNav

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} from '../utils';
+import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
@@ -284,9 +284,11 @@ export function MobileNav({
   label,
   'data-testid': testId,
   xstyle,
-  className: _className,
-  style: _style,
+  className,
+  style,
+  onClick: onClickProp,
   ref,
+  ...rest
 }: MobileNavProps) {
   // Read from AppShell context as fallback
   const appShellMobile = useAppShellMobile();
@@ -407,10 +409,6 @@ 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(
@@ -420,7 +418,14 @@ 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,12 +17,27 @@ 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 {HashtagIcon} from '@heroicons/react/24/outline';
+import {TestIcon} from '../__tests__/TestIcon';
 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={HashtagIcon}
+        startIcon={TestIcon}
       />,
     );
     expect(screen.getByRole('spinbutton')).toBeInTheDocument();
@@ -707,7 +707,7 @@ describe('NumberInput', () => {
           label="Qty"
           value={0}
           onChange={() => {}}
-          startIcon={<HashtagIcon />}
+          startIcon={<TestIcon />}
         />,
       );
 
@@ -867,3 +867,48 @@ 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,13 +503,21 @@ export function NumberInput({
   const handleBlur = useCallback(
     (e: FocusEvent<HTMLInputElement>) => {
       if (pendingInput !== null) {
-        const parsed = parseNumberInput(pendingInput, {
-          min,
-          max,
-          isIntegerOnly,
-        });
-        if (parsed !== null && parsed !== value) {
-          onChange(parsed);
+        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);
+          }
         }
       }
 
@@ -517,7 +525,7 @@ export function NumberInput({
       setPendingInput(null);
       onBlur?.(e);
     },
-    [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur],
+    [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur, hasClear],
   );
 
   // Handle keyboard events
@@ -526,13 +534,21 @@ export function NumberInput({
       if (e.key === 'Enter') {
         // Validate and commit on Enter
         if (pendingInput !== null) {
-          const parsed = parseNumberInput(pendingInput, {
-            min,
-            max,
-            isIntegerOnly,
-          });
-          if (parsed !== null && parsed !== value) {
-            onChange(parsed);
+          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);
+            }
           }
         }
         onEnter?.();
@@ -548,6 +564,7 @@ export function NumberInput({
       isIntegerOnly,
       onEnter,
       onKeyDown,
+      hasClear,
     ],
   );
 

package/src/Outline/Outline.doc.mjs

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

package/src/Outline/parseOutlineFromMarkdown.test.ts

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {parseOutlineFromMarkdown} from './parseOutlineFromMarkdown';
+
+describe('parseOutlineFromMarkdown', () => {
+  it('returns an empty outline for content with no headings', () => {
+    expect(parseOutlineFromMarkdown('just a paragraph of text')).toEqual([]);
+    expect(parseOutlineFromMarkdown('')).toEqual([]);
+  });
+
+  it('extracts headings with their level and slugified id', () => {
+    const outline = parseOutlineFromMarkdown('# Getting Started');
+    expect(outline).toEqual([
+      {id: 'getting-started', label: 'Getting Started', level: 1},
+    ]);
+  });
+
+  it('captures heading levels distinctly', () => {
+    const outline = parseOutlineFromMarkdown(
+      ['# One', '## Two', '### Three'].join('\n\n'),
+    );
+    expect(outline.map(i => i.level)).toEqual([1, 2, 3]);
+    expect(outline.map(i => i.label)).toEqual(['One', 'Two', 'Three']);
+  });
+
+  it('slugifies punctuation and spaces into single hyphens', () => {
+    const outline = parseOutlineFromMarkdown('# Hello, World!  Again');
+    expect(outline[0].id).toBe('hello-world-again');
+  });
+
+  it('strips quotes rather than converting them to hyphens', () => {
+    const outline = parseOutlineFromMarkdown(`# The "Best" Way`);
+    expect(outline[0].id).toBe('the-best-way');
+  });
+
+  it('trims leading and trailing hyphens from the slug', () => {
+    const outline = parseOutlineFromMarkdown('# ...leading and trailing...');
+    expect(outline[0].id).not.toMatch(/^-/);
+    expect(outline[0].id).not.toMatch(/-$/);
+  });
+
+  it('deduplicates repeated slugs with a numeric suffix', () => {
+    const outline = parseOutlineFromMarkdown(
+      ['# Setup', '# Setup', '# Setup'].join('\n\n'),
+    );
+    expect(outline.map(i => i.id)).toEqual(['setup', 'setup-1', 'setup-2']);
+    // labels stay unchanged even as ids are disambiguated
+    expect(outline.every(i => i.label === 'Setup')).toBe(true);
+  });
+
+  it('falls back to "section" when a heading slugifies to empty', () => {
+    const outline = parseOutlineFromMarkdown(['# !!!', '# @@@'].join('\n\n'));
+    expect(outline.map(i => i.id)).toEqual(['section', 'section-1']);
+  });
+
+  it('flattens inline formatting into the label text', () => {
+    const outline = parseOutlineFromMarkdown('# **Bold** and _italic_ text');
+    expect(outline[0].label).toBe('Bold and italic text');
+    expect(outline[0].id).toBe('bold-and-italic-text');
+  });
+
+  it('includes inline code content in the label', () => {
+    const outline = parseOutlineFromMarkdown('# The `useState` hook');
+    expect(outline[0].label).toBe('The useState hook');
+  });
+
+  it('does not treat fenced code block content as headings', () => {
+    const md = ['# Real Heading', '', '```', '# not a heading', '```'].join(
+      '\n',
+    );
+    const outline = parseOutlineFromMarkdown(md);
+    expect(outline.map(i => i.label)).toEqual(['Real Heading']);
+  });
+
+  it('trims surrounding whitespace from labels', () => {
+    const outline = parseOutlineFromMarkdown('#    Spaced Out   ');
+    expect(outline[0].label).toBe('Spaced Out');
+  });
+});