@astryxdesign/core 0.1.4-canary.39ffd21 → 0.1.4-canary.3b5f42e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.4-canary.39ffd21",
+  "version": "0.1.4-canary.3b5f42e",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/Calendar/Calendar.test.tsx

@@ -215,6 +215,33 @@ describe('Calendar', () => {
     expect(screen.getByText(/February 2026.*March 2026/)).toBeInTheDocument();
   });
 
+  it('clamps out-of-range numberOfMonths to a single month', () => {
+    // 1000 would otherwise try to render 1000 month grids and lock the page up.
+    render(
+      <Calendar
+        numberOfMonths={1000 as unknown as 1 | 2}
+        focusDate="2026-01-01"
+      />,
+    );
+
+    // Only the focused month renders — no second month, no range separator.
+    expect(screen.getByText('January 2026')).toBeInTheDocument();
+    expect(screen.queryByText(/February 2026/)).not.toBeInTheDocument();
+  });
+
+  it('clamps numberOfMonths={0} to a single month', () => {
+    render(
+      <Calendar
+        numberOfMonths={0 as unknown as 1 | 2}
+        focusDate="2026-01-01"
+      />,
+    );
+
+    // 0 previously rendered no months at all; now falls back to one.
+    expect(screen.getByText('January 2026')).toBeInTheDocument();
+    expect(screen.getAllByRole('gridcell').length).toBeGreaterThan(0);
+  });
+
   // ─── Display Options ─────────────────────────────────────────
 
   it('shows week numbers when hasWeekNumbers is true', () => {

package/src/Calendar/Calendar.tsx

@@ -203,7 +203,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     value,
     defaultValue,
     onChange,
-    numberOfMonths = 1,
+    numberOfMonths: numberOfMonthsProp = 1,
     min,
     max,
     dateConstraints,
@@ -223,6 +223,11 @@ export function Calendar({ref, ...props}: CalendarProps) {
   // DayOfWeek so all downstream date math keeps working with an index.
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
 
+  // `numberOfMonths` is typed `1 | 2`; defensively clamp anything else that
+  // slips through at runtime to 1 so `Array.from({length})` can't render an
+  // absurd number of month grids (e.g. `numberOfMonths={1000}`).
+  const numberOfMonths = numberOfMonthsProp === 2 ? 2 : 1;
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 

package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 <div
   class="astryx-form-layout horizontal FormLayout__styles.base xdt5ytf x18g69wz FormLayout__styles.horizontal xrvj5dj x1mt1orb xu6a5m6"
   data-direction="horizontal"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:45"
   data-testid="layout"
 >
   <input
@@ -20,7 +19,6 @@ exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 <div
   class="astryx-form-layout horizontal-labels FormLayout__styles.base xdt5ytf FormLayout__styles.horizontalLabels xrvj5dj x1pmbctz xlaq8a2 x7a106z xedohl4 x1rpgqan x1a1jff"
   data-direction="horizontal-labels"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:50"
   data-testid="layout"
 >
   <label>
@@ -36,7 +34,6 @@ exports[`FormLayout > matches snapshot for vertical direction 1`] = `
 <div
   class="astryx-form-layout vertical FormLayout__styles.base x78zum5 xdt5ytf x18g69wz"
   data-direction="vertical"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40"
   data-testid="layout"
 >
   <input

package/src/NavMenu/NavMenu.doc.mjs

@@ -17,6 +17,15 @@ 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.'},

package/src/Table/BaseTable.tsx

@@ -284,6 +284,12 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
   const nextItem = nextProps.item;
   const keys = Object.keys(nextItem);
 
+  // A key deleted from nextItem would never be visited by the loop below,
+  // and the row would keep rendering the removed field's stale value.
+  if (Object.keys(prevItem).length !== keys.length) {
+    return false;
+  }
+
   for (const key of keys) {
     if (prevItem[key] !== nextItem[key]) {
       return false;

package/src/Table/Table.test.tsx

@@ -617,6 +617,29 @@ describe('BaseTable', () => {
 // =============================================================================
 
 describe('Table', () => {
+  it('clears a cell when the field is removed from the row object (#3595)', () => {
+    const cols: TableColumn<Record<string, unknown>>[] = [
+      {key: 'name', header: 'Name'},
+      {key: 'status', header: 'Status'},
+    ];
+    const {rerender} = render(
+      <Table
+        data={[{id: '1', name: 'Alice', status: 'active'}]}
+        columns={cols}
+        idKey="id"
+      />,
+    );
+    expect(screen.getByText('active')).toBeInTheDocument();
+
+    // Clearing a field by omitting it (optimistic update / server response)
+    // must re-render the row — the memo previously only compared the keys of
+    // the NEW item, so the deleted field's stale value kept rendering.
+    rerender(
+      <Table data={[{id: '1', name: 'Alice'}]} columns={cols} idKey="id" />,
+    );
+    expect(screen.queryByText('active')).not.toBeInTheDocument();
+  });
+
   it('renders a table with correct structure', () => {
     render(<Table data={users} columns={columns} />);
     expect(screen.getByRole('table')).toBeInTheDocument();

package/src/Typeahead/BaseTypeahead.doc.mjs

@@ -8,6 +8,16 @@ export const docs = {
   displayName: 'Base Typeahead',
   isHiddenFromOverview: true,
   description: 'Unstyled combobox engine providing input, search, keyboard navigation, and dropdown. No wrapper div, no border styling, no token rendering. Used by Typeahead and Tokenizer for custom compositions.',
+  usage: {
+    description: 'Unstyled combobox engine providing input, search, keyboard navigation, and dropdown. No wrapper div, no border styling, no token rendering. Used by Typeahead and Tokenizer for custom compositions.',
+    bestPractices: [
+      { guidance: true, description: 'Use Typeahead or Tokenizer for standard fields — they wrap BaseTypeahead with the wrapper div, border styling, and token rendering it intentionally omits.' },
+      { guidance: true, description: 'Provide your own wrapper div with border and layout when composing directly — BaseTypeahead renders no visual chrome of its own.' },
+      { guidance: true, description: 'Pass anchorRef pointing to your wrapper so the dropdown positions against your custom input chrome, not just the bare input element.' },
+      { guidance: false, description: 'Expect a wrapper div, border, or token rendering — BaseTypeahead is an engine only; all visual chrome is the caller\'s responsibility.' },
+      { guidance: false, description: 'Use BaseTypeahead when Typeahead or Tokenizer would suffice — the extra wrapper and styling work is only justified for truly custom compositions.' },
+    ],
+  },
   props: [
     {
       name: 'searchSource',