@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/src/DateInput/DateInput.tsx

@@ -62,6 +62,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
+import {NativeDateField} from './NativeDateField';
 import {TouchDateField} from './TouchDateField';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
@@ -150,6 +151,17 @@ export type DateInputSize = keyof typeof sizeStyles;
  * types stay in compile-time lockstep: renaming or removing one of these
  * members from `TimestampFormat` breaks this type at build time.
  */
+/**
+ * When DateInput hands date picking to the browser/OS instead of its own
+ * surfaces.
+ *
+ * - `'touch'`: native on touch devices (coarse pointer), Astryx's calendar
+ *   popover on mouse-driven ones
+ * - `'always'`: native wherever the browser supports `<input type="date">`
+ * - `'never'`: Astryx's own pickers everywhere
+ */
+export type DateInputNativePicker = 'touch' | 'always' | 'never';
+
 export type DateInputFormat = Extract<
   TimestampFormat,
   'date' | 'date_long' | 'date_weekday' | 'system_date'
@@ -161,7 +173,7 @@ export type {
   InputStatus as DateInputStatus,
   InputStatusType as DateInputStatusType,
 } from '../Field';
-import {mergeProps, mergeRefs, isFocusDetached} from '../utils';
+import {mergeProps, isFocusDetached} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -169,6 +181,7 @@ import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator, InternationalizationContext} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface DateInputProps extends Omit<
   BaseProps,
   'onChange' | 'defaultValue'
@@ -360,6 +373,40 @@ export interface DateInputProps extends Omit<
    * ```
    */
   format?: DateInputFormat | ((value: ISODateString) => string);
+
+  /**
+   * When date picking is handed to the browser/OS instead of Astryx's own
+   * surfaces: the field becomes an `<input type="date">` and the platform
+   * draws the picker — the iOS wheel, the Android calendar dialog — with the
+   * OS's own hit areas, momentum scrolling, locale and accessibility
+   * settings.
+   *
+   * - `'touch'` (default): native on touch devices (coarse pointer), the text
+   *   field and calendar popover on mouse-driven ones
+   * - `'always'`: native wherever the browser supports `<input type="date">`
+   * - `'never'`: Astryx's own pickers everywhere — the touch picker on a
+   *   finger, the calendar popover on a mouse
+   *
+   * `format` and `placeholder` still apply in native mode: DateInput paints
+   * the closed field's text itself, over the control. `numberOfMonths` and
+   * `weekStartsOn` do not — they describe a calendar grid the native picker
+   * does not have — so a field that needs either should pass `'never'`.
+   *
+   * `min` and `max` are forwarded, but note that a native picker may not
+   * *show* them: on iOS they are constraint-validation flags rather than
+   * clamps, so an out-of-range date can be selected and is refused on commit
+   * (announced to assistive technology) rather than being greyed out in the
+   * picker. `dateConstraints` is enforced the same way, on commit, and is
+   * reason enough to prefer `'never'` on a field that uses it.
+   *
+   * @default 'touch'
+   * @example
+   * ```
+   * // Astryx's own touch picker instead of the platform's
+   * <DateInput label="Event date" value={date} onChange={setDate} nativePicker="never" />
+   * ```
+   */
+  nativePicker?: DateInputNativePicker;
 }
 
 /**
@@ -739,7 +786,7 @@ function PointerDateField({
         />
       </button>
       <input
-        ref={mergeRefs(ref, inputRef)}
+        ref={useMergedRefs(ref, inputRef)}
         id={id}
         type="text"
         role="combobox"
@@ -886,7 +933,13 @@ PointerDateField.displayName = 'PointerDateField';
  */
 export function DateInput(props: DateInputProps) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  const nativePicker = props.nativePicker ?? 'touch';
 
+  // The platform's picker, where the consumer asked for it — see the
+  // `nativePicker` prop for what that trades away.
+  if (nativePicker === 'always' || (nativePicker === 'touch' && isTouch)) {
+    return <NativeDateField {...props} />;
+  }
   return isTouch ? (
     <TouchDateField {...props} />
   ) : (

package/src/DateInput/DateInputTouch.test.tsx

@@ -219,6 +219,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 +281,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 +335,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');
@@ -360,12 +380,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 +398,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 +411,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 +424,7 @@ describe('DateInput — field parity', () => {
   it('honors a custom placeholder', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         placeholder="Pick a day"
         onChange={() => {}}
@@ -409,6 +437,7 @@ describe('DateInput — field parity', () => {
     const onChange = vi.fn();
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         hasClear
@@ -419,9 +448,52 @@ describe('DateInput — field parity', () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
+  it('returns focus to the field without letting the page scroll', async () => {
+    // Clearing unmounts the clear button, and focusing another element in the
+    // same task as that unmount makes iOS Safari scroll the document to the
+    // top. Measured on the iOS 26 simulator against the live docsite, field at
+    // scrollY 2055: synchronous focus lands at 0, deferred focus stays at
+    // 2055. `preventScroll` alone does not fix it, so both halves are
+    // asserted: the focus is deferred past the unmount, and it is passed
+    // preventScroll. jsdom implements no scrolling, so the guard is asserted
+    // at the call.
+    vi.useFakeTimers();
+    try {
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          value="2026-03-21"
+          hasClear
+          onChange={() => {}}
+        />,
+      );
+      const input = field();
+      const focus = vi.spyOn(input, 'focus');
+
+      fireEvent.click(screen.getByRole('button', {name: /Clear Ship date/}));
+
+      // Not synchronous — that is the whole point.
+      expect(focus).not.toHaveBeenCalled();
+
+      vi.runAllTimers();
+
+      expect(focus).toHaveBeenCalledWith({preventScroll: true});
+      focus.mockRestore();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   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());
@@ -439,7 +511,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();
@@ -448,6 +527,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"
@@ -464,6 +544,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'}}
@@ -480,12 +561,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());
   });
 
@@ -500,6 +590,7 @@ describe('DateInput — field parity', () => {
     withLayout(() => {
       render(
         <DateInput
+          nativePicker="never"
           label="Ship date"
           value="2026-03-10"
           min="2026-03-01"
@@ -522,7 +613,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.
@@ -607,7 +698,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'}));
     });
@@ -1483,12 +1580,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', () => {
@@ -2354,18 +2461,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', () => {
@@ -2487,16 +2603,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);
   });
 
   /**
@@ -2545,7 +2659,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);
   });
 
   /**
@@ -2563,9 +2677,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(