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

package/src/DateInput/DateInputTouch.test.tsx

@@ -41,6 +41,7 @@ import {fileURLToPath} from 'node:url';
 import {useState} from 'react';
 import type {ISODateString} from '../utils';
 import {InputGroup} from '../InputGroup';
+import {InternationalizationProvider} from '../i18n';
 import {stableClassName} from '../naming';
 import {DateInput} from './DateInput';
 import {
@@ -219,6 +220,11 @@ function Controlled({
   return (
     <DateInput
       label="Event date"
+      // This suite is about Astryx's own touch surface, which is now opt-out:
+      // `nativePicker` defaults to 'touch', so a coarse pointer gets the
+      // platform's picker unless a field says otherwise. Tests that assert on
+      // the surface selection itself pass their own value over this.
+      nativePicker="never"
       {...DEFAULT_RANGE}
       {...props}
       value={value}
@@ -276,6 +282,16 @@ function weekdayRow(): HTMLElement {
 // ---------------------------------------------------------------------------
 
 describe('DateInput — surface selection', () => {
+  it('hands a touch device to the platform picker by default', () => {
+    // `nativePicker` defaults to 'touch': the OS draws the picker unless a
+    // field opts out. Everything else in this file passes 'never', so this is
+    // the one place the default itself is asserted.
+    stubMedia({pointer: 'coarse', width: 393});
+    render(<DateInput label="Event date" onChange={() => {}} />);
+    const input = document.querySelector('input');
+    expect(input).toHaveAttribute('type', 'date');
+  });
+
   it('switches on the pointer alone, so a tablet gets the picker too', () => {
     // `pointer` is the PRIMARY device, which is what makes it the whole test:
     // a touchscreen laptop reports `fine` (its trackpad) and keeps the
@@ -320,7 +336,12 @@ describe('DateInput — surface selection', () => {
     setViewport('desktop');
     const onChange = vi.fn();
     render(
-      <DateInput label="Event date" onChange={onChange} min={undefined} />,
+      <DateInput
+        nativePicker="never"
+        label="Event date"
+        onChange={onChange}
+        min={undefined}
+      />,
     );
     fireEvent.change(field(), {target: {value: '2026-03-25'}});
     expect(onChange).toHaveBeenCalledWith('2026-03-25');
@@ -337,6 +358,41 @@ describe('DateInput — surface selection', () => {
     expect(input).toHaveAttribute('inputmode', 'none');
   });
 
+  it('updates the field and open picker when the provider locale changes', () => {
+    const renderDateInput = (locale: 'en-US' | 'es-ES') => (
+      <InternationalizationProvider locale={locale}>
+        <Controlled initial="2026-03-21" />
+      </InternationalizationProvider>
+    );
+
+    withLayout(() => {
+      const {rerender} = render(renderDateInput('en-US'));
+      expect(field()).toHaveValue('March 21, 2026');
+
+      fireEvent.click(field());
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('March 2026');
+      expect(pane('March 2026')).toBeInTheDocument();
+
+      rerender(renderDateInput('es-ES'));
+      expect(field()).toHaveValue('21 de marzo de 2026');
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('marzo de 2026');
+      expect(pane('marzo de 2026')).toBeInTheDocument();
+
+      const nextButton = document.querySelector<HTMLButtonElement>(
+        '[data-arrows="months"] button:last-child',
+      );
+      expect(nextButton).not.toBeNull();
+      fireEvent.click(nextButton!);
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('abril de 2026');
+    });
+  });
+
   it('forwards ref to the input on both surfaces', () => {
     const desktopRef = {current: null as HTMLInputElement | null};
     setViewport('desktop');
@@ -360,12 +416,17 @@ describe('DateInput — surface selection', () => {
 describe('DateInput — field parity', () => {
   it('shows a placeholder until a date is chosen, then the formatted value', () => {
     const {rerender} = render(
-      <DateInput label="Ship date" onChange={() => {}} />,
+      <DateInput nativePicker="never" label="Ship date" onChange={() => {}} />,
     );
     expect(field()).toHaveValue('');
     expect(field()).toHaveAttribute('placeholder', 'Select a date');
     rerender(
-      <DateInput label="Ship date" value="2026-03-21" onChange={() => {}} />,
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        value="2026-03-21"
+        onChange={() => {}}
+      />,
     );
     expect(field()).toHaveValue('March 21, 2026');
   });
@@ -373,6 +434,7 @@ describe('DateInput — field parity', () => {
   it('honors a named format', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         format="system_date"
@@ -385,6 +447,7 @@ describe('DateInput — field parity', () => {
   it('honors a function format', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         format={iso => `ISO:${iso}`}
@@ -397,6 +460,7 @@ describe('DateInput — field parity', () => {
   it('honors a custom placeholder', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         placeholder="Pick a day"
         onChange={() => {}}
@@ -409,6 +473,7 @@ describe('DateInput — field parity', () => {
     const onChange = vi.fn();
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         hasClear
@@ -432,6 +497,7 @@ describe('DateInput — field parity', () => {
     try {
       render(
         <DateInput
+          nativePicker="never"
           label="Ship date"
           value="2026-03-21"
           hasClear
@@ -457,7 +523,13 @@ describe('DateInput — field parity', () => {
 
   it('does not open the picker until the field is tapped', () => {
     withLayout(() => {
-      render(<DateInput label="Ship date" onChange={() => {}} />);
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          onChange={() => {}}
+        />,
+      );
       expect(field()).toHaveAttribute('aria-expanded', 'false');
       expect(screen.queryByRole('grid')).not.toBeInTheDocument();
       fireEvent.click(field());
@@ -475,7 +547,14 @@ describe('DateInput — field parity', () => {
   });
 
   it('is not openable while disabled', () => {
-    render(<DateInput label="Ship date" isDisabled onChange={() => {}} />);
+    render(
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        isDisabled
+        onChange={() => {}}
+      />,
+    );
     expect(field()).toBeDisabled();
     fireEvent.click(field());
     expect(screen.queryByRole('grid')).not.toBeInTheDocument();
@@ -484,6 +563,7 @@ describe('DateInput — field parity', () => {
   it('stays focusable and explains itself when disabled with a reason', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         isDisabled
         disabledMessage="You need the Editor role"
@@ -500,6 +580,7 @@ describe('DateInput — field parity', () => {
   it('renders label, description and status through Field', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         description="When it leaves the warehouse"
         status={{type: 'error', message: 'Pick a date'}}
@@ -516,12 +597,21 @@ describe('DateInput — field parity', () => {
   });
 
   it('marks required for assistive technology', () => {
-    render(<DateInput label="Ship date" isRequired onChange={() => {}} />);
+    render(
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        isRequired
+        onChange={() => {}}
+      />,
+    );
     expect(field()).toHaveAttribute('aria-required', 'true');
   });
 
   it('associates the label natively, so the field is named without ARIA', () => {
-    render(<DateInput label="Ship date" onChange={() => {}} />);
+    render(
+      <DateInput nativePicker="never" label="Ship date" onChange={() => {}} />,
+    );
     expect(screen.getByLabelText('Ship date')).toBe(field());
   });
 
@@ -536,6 +626,7 @@ describe('DateInput — field parity', () => {
     withLayout(() => {
       render(
         <DateInput
+          nativePicker="never"
           label="Ship date"
           value="2026-03-10"
           min="2026-03-01"
@@ -558,7 +649,7 @@ describe('DateInput — field parity', () => {
   it('drops the Field wrapper inside an InputGroup', () => {
     render(
       <InputGroup label="Range">
-        <DateInput label="Start" onChange={() => {}} />
+        <DateInput nativePicker="never" label="Start" onChange={() => {}} />
       </InputGroup>,
     );
     // Named by the group label plus its own, the way core's inputs are.
@@ -643,7 +734,13 @@ describe('DateInput — calendar surface', () => {
   it('Save closes even with no date chosen, committing nothing', () => {
     const onChange = vi.fn();
     withLayout(() => {
-      render(<DateInput label="Ship date" onChange={onChange} />);
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          onChange={onChange}
+        />,
+      );
       fireEvent.click(field());
       fireEvent.click(screen.getByRole('button', {name: 'Save'}));
     });
@@ -1519,12 +1616,22 @@ describe('DateInput — month/year wheels', () => {
     expect(title()).toHaveTextContent('May 2027');
   });
 
-  it('offers Reset only on the calendar, beside Save', () => {
+  it('offers Reset only on the calendar, in the header corner', () => {
     renderAndOpen();
-    expect(screen.getByRole('button', {name: 'Reset'})).toBeInTheDocument();
+    const reset = screen.getByRole('button', {name: 'Reset'});
+    // The trailing-most thing in the header, past the arrows — not the
+    // footer, which is Save's alone.
+    const header = reset.closest('[data-action="reset"]')!.parentElement!;
+    expect(header.querySelector('[data-title="month-year"]')).not.toBeNull();
+    expect(header.lastElementChild).toHaveAttribute('data-action', 'reset');
+
     openWheels();
     // The wheels choose a month; there is no date there to clear.
     expect(screen.queryByRole('button', {name: 'Reset'})).toBeNull();
+    // Hidden, not unmounted, so the header cannot change height mid-swap.
+    expect(
+      document.querySelector('dialog[open] [data-action="reset"]'),
+    ).toHaveAttribute('inert');
   });
 
   it('Save closes the whole picker; Done only leaves the wheels', () => {
@@ -2390,18 +2497,27 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     expect(footer).not.toContain('paddingInline');
   });
 
-  it('floors the touch target without discarding the size prop', () => {
-    const source = read('TouchDateField.tsx');
-    // Each size keeps its own height AND cannot render below a thumb's reach.
-    const sizeMap = source.slice(
-      source.indexOf('const sizeStyles = stylex.create('),
-      source.indexOf('const styles = stylex.create('),
+  it('sizes the closed field the same on both surfaces', () => {
+    // `DateInput` picks a surface from the pointer and `nativePicker`, so a
+    // field that sizes itself differently on one of them changes height for
+    // a reason the call site never asked about.
+    //
+    // Compared with formatting normalized away: the two files write the same
+    // declarations differently, one entry per line against one per size.
+    const sizeMap = (file: string) => {
+      const source = read(file);
+      const start = source.indexOf('const sizeStyles = stylex.create(');
+      expect(start).toBeGreaterThan(-1);
+      return source
+        .slice(start, source.indexOf('});', start))
+        .replace(/\/\/.*$/gm, '')
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/\s+/g, '')
+        .replace(/,(?=[}\]])/g, '');
+    };
+    expect(sizeMap('TouchDateField.tsx')).toEqual(
+      sizeMap('NativeDateField.tsx'),
     );
-    expect(
-      sizeMap.match(
-        /minBlockSize: \{default: null, '@media \(pointer: coarse\)': TOUCH_TARGET\}/g,
-      ),
-    ).toHaveLength(3);
   });
 
   it('floors the month arrows too — Button tops out at 36px', () => {
@@ -2523,16 +2639,14 @@ describe('DateInput — scroll CSS (definition-level)', () => {
   });
 
   /**
-   * Both footer actions span the sheet. A full-width primary is the shape a
+   * The footer action spans the sheet. A full-width primary is the shape a
    * phone form ends with, and it puts the target under the thumb wherever
    * the hand is.
    */
-  it('spans the footer with its actions', () => {
+  it('spans the footer with its action', () => {
     const source = read('TouchDateField.tsx');
-    // Reset + Save share the calendar's cell; Done is the wheels'. Each
-    // fills the space it is given, so the row divides evenly rather than by
-    // label length.
-    expect(source.match(/width="100%"/g)).toHaveLength(3);
+    // One per surface: Save on the calendar, Done on the wheels.
+    expect(source.match(/width="100%"/g)).toHaveLength(2);
   });
 
   /**
@@ -2581,7 +2695,7 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     expect(
       styles.match(/transitionTimingFunction: easeVars\['--ease-standard'\]/g),
     ).toHaveLength(1);
-    expect(styles.match(/transitionTimingFunction: 'linear'/g)).toHaveLength(3);
+    expect(styles.match(/transitionTimingFunction: 'linear'/g)).toHaveLength(4);
   });
 
   /**
@@ -2599,9 +2713,9 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     const styles = source.slice(
       source.indexOf('const styles = stylex.create('),
     );
-    // The arrows, the weekday row, the layer beneath, the layer above, and
-    // the chevron.
-    expect(styles.match(/transitionDuration: SWAP_DURATION/g)).toHaveLength(5);
+    // The arrows, Reset, the weekday row, the layer beneath, the layer
+    // above, and the chevron.
+    expect(styles.match(/transitionDuration: SWAP_DURATION/g)).toHaveLength(6);
     // And no leftover hand-rolled timing beside them.
     expect(styles).not.toContain('PANEL_FADE_MS');
     expect(source).toContain(

package/src/DateInput/MonthScroller.tsx

@@ -25,6 +25,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
@@ -39,7 +40,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {useCalendarDays} from '../Calendar';
-import {useDirection} from '../i18n';
+import {useDirection, useLocale} from '../i18n';
 import {
   colorVars,
   radiusVars,
@@ -763,6 +764,7 @@ function MonthPane({
   onDayKeyDown,
   onDayFocus,
 }: MonthPaneProps) {
+  const locale = useLocale();
   const {year, month} = fromMonthIndex(monthIndex);
   const {weeks} = useCalendarDays({
     year,
@@ -776,6 +778,7 @@ function MonthPane({
   const monthLabel = plainDateFormat(
     {year, month, day: 1},
     DATE_FORMAT_MONTH_YEAR,
+    locale,
   );
 
   // Exactly one day per pane is tab-reachable, so Tab moves through the
@@ -836,6 +839,7 @@ function MonthPane({
                   aria-label={plainDateFormat(
                     day.date,
                     DATE_FORMAT_WITH_WEEKDAY,
+                    locale,
                   )}
                   aria-disabled={isDisabled || undefined}
                   aria-current={isToday ? 'date' : undefined}

package/src/DateInput/MonthYearWheels.tsx

@@ -17,12 +17,14 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
 
 import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {useLocale} from '../i18n';
 import {DATE_FORMAT_MONTH_ONLY, plainDateFormat} from '../utils';
 import {spacingVars} from '../theme/tokens.stylex';
 import {dateInputTouchGeometry} from './tokens.stylex';
@@ -66,6 +68,7 @@ export function MonthYearWheels({
   yearLabel,
   isActive = true,
 }: MonthYearWheelsProps) {
+  const locale = useLocale();
   const {year, month} = fromMonthIndex(monthIndex);
 
   // Day 15 of a fixed year: no timezone can push it into an adjacent month
@@ -73,18 +76,18 @@ export function MonthYearWheels({
   //
   // `plainDateFormat` rather than a raw `Intl.DateTimeFormat`, which the
   // shared lint rule forbids and which would duplicate the format vocabulary
-  // besides. It resolves the locale itself, so there is nothing here for the
-  // memo to depend on — the same is true of Calendar's own month labels, and
-  // is why this list is constant for the life of the component.
+  // besides. Recompute when the provider locale changes so the wheel labels
+  // stay in sync with the field and calendar.
   const monthNames = useMemo(
     () =>
       Array.from({length: 12}, (_, index) =>
         plainDateFormat(
           {year: 2021, month: index + 1, day: 15},
           DATE_FORMAT_MONTH_ONLY,
+          locale,
         ),
       ),
-    [],
+    [locale],
   );
 
   // Months outside the range stay on the wheel rather than vanishing: a list