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

package/src/DateInput/TouchDateField.tsx

@@ -38,6 +38,10 @@
  * 3. The title is the escape hatch. Tap it and the same box becomes a month
  *    wheel and a year wheel — a flick each to reach 2019 instead of forty.
  *
+ * Reset is chrome, so it sits in the header beside the arrows rather than in
+ * the footer: the footer is where the task ends, and an undo of equal weight
+ * beside Save is a mis-tap that throws away the date just chosen.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateInput/DateInput.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
@@ -67,7 +71,7 @@ import {
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
 } from '../Field';
-import {useInputStatusIcon} from '../hooks';
+import {useInputStatusIcon, useMergedRefs} from '../hooks';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
@@ -96,7 +100,6 @@ import {
   getInputARIA,
   isImeKeyEvent,
   mergeProps,
-  mergeRefs,
   rtlStyles,
   themeProps,
   formatSharedDate,
@@ -119,9 +122,8 @@ import {
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 
 /**
- * The comfortable minimum tap target on both iOS and Android. Applied as a
- * FLOOR under the size prop rather than replacing it: `size` still means what
- * it means, it just cannot produce a control a thumb misses.
+ * The comfortable minimum tap target on both iOS and Android, honoured by
+ * every target inside the sheet.
  */
 const TOUCH_TARGET = dateInputTouchSizes.daySize;
 
@@ -148,17 +150,14 @@ const sizeStyles = stylex.create({
   sm: {
     height: sizeVars['--size-element-sm'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
   md: {
     height: sizeVars['--size-element-md'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
   lg: {
     height: sizeVars['--size-element-lg'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
 });
 
@@ -283,7 +282,7 @@ const styles = stylex.create({
   /**
    * `Button`'s own sizes top out at 36px, which is fine for a mouse and short
    * of the 44px every other target in this sheet honours. Floor it on a
-   * coarse pointer, the same way the field and the day cells do.
+   * coarse pointer, the same way the day cells do.
    */
   monthArrow: {
     minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
@@ -298,6 +297,34 @@ const styles = stylex.create({
   monthArrowIcon: {
     display: 'inline-flex',
   },
+  /**
+   * Reset, past the arrows. It fades on their timing for their reason: the
+   * plate starts below the header, so the two of them are what the layer
+   * above cannot cover, and they have to leave together.
+   */
+  headerReset: {
+    display: 'flex',
+    alignItems: 'center',
+    transitionProperty: 'opacity, visibility',
+    transitionDuration: SWAP_DURATION,
+    transitionTimingFunction: 'linear',
+    '@media (prefers-reduced-motion: reduce)': {
+      transitionDuration: '0.01s',
+    },
+  },
+  headerResetHidden: {
+    visibility: 'hidden',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  /**
+   * The same 44px floor the arrows take. `Button`'s `sm` is 32px, which is
+   * fine beside a mouse and short of what every other target in this sheet
+   * honours.
+   */
+  resetButton: {
+    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
+  },
   /**
    * The month and year, and the toggle into the wheels. Leading, so it reads
    * first and sits on the same line as the day grid below it.
@@ -331,9 +358,19 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
     whiteSpace: 'nowrap',
+    // The header now ends with Reset, so the title is the part that gives:
+    // it ellipses rather than pushing the corner off a narrow screen.
+    minInlineSize: 0,
+    overflow: 'hidden',
+  },
+  titleText: {
+    minInlineSize: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   titleChevron: {
     display: 'inline-flex',
+    flexShrink: 0,
     // The one part of the swap that keeps `--ease-standard`, because it is
     // the one part that travels: a rotation has a distance to cover, and
     // fast-out-slow-in is what that curve is for. Same duration as the
@@ -480,16 +517,14 @@ const styles = stylex.create({
   },
   /**
    * One footer action. Both occupy the same cell, and the wheels' one is a
-   * layer over the calendar's pair exactly as the panels above are. The row
+   * layer over the calendar's, exactly as the panels above are. The row
    * never changes height either way.
    */
   footerAction: {
     gridArea: '1 / 1',
-    // Side by side and equal: the calendar's cell holds Reset and Save, the
-    // wheels' holds one button. `1fr` each rather than content width, so
-    // neither label's length decides how the row is divided.
+    // One button per surface, filling the row: Save on the calendar, Done on
+    // the wheels.
     display: 'flex',
-    gap: spacingVars['--spacing-2'],
   },
   sheetBody: {
     // One inset on every edge. The block-start is the exception and has to
@@ -557,6 +592,7 @@ export function TouchDateField({
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedInputRef = useMergedRefs(ref, inputRef);
   const inputGroup = useInputGroup();
 
   const [, startTransition] = useTransition();
@@ -599,6 +635,16 @@ export function TouchDateField({
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isWheelOpen, setIsWheelOpen] = useState(false);
   const scrollerHandleRef = useRef<MonthScrollerHandle | null>(null);
+  // Pending focus handoff from the clear button; see handleClear.
+  const clearFocusTimerRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (clearFocusTimerRef.current != null) {
+        clearTimeout(clearFocusTimerRef.current);
+      }
+    },
+    [],
+  );
 
   const today = useMemo(() => plainDateToday(), []);
   const selectedDate = useMemo(
@@ -708,7 +754,31 @@ export function TouchDateField({
 
   const handleClear = useCallback(() => {
     fireChange(undefined);
-    inputRef.current?.focus();
+    // Focus goes back to the field on the NEXT task, not synchronously.
+    //
+    // Clearing unmounts this button (it only renders while there is a value),
+    // and focusing another element in the same task as that unmount makes iOS
+    // Safari scroll the whole document to the top — the user is thrown from
+    // wherever the field sat to the start of the page. 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 (verified: still 0) — this is not
+    // the browser's ordinary scroll-the-focused-element-into-view step, so the
+    // deferral is the load-bearing half. It is kept because the reveal scroll
+    // is real too, and unwanted for the same reason: the field the user just
+    // tapped is already on screen (+12px on a plain page without it).
+    //
+    // Skipping the focus entirely would also stop the scroll, but then focus
+    // dies with the unmounting button and lands on <body>.
+    const field = inputRef.current;
+    if (field == null) {
+      return;
+    }
+    clearFocusTimerRef.current = window.setTimeout(() => {
+      clearFocusTimerRef.current = null;
+      field.focus({preventScroll: true});
+    }, 0);
   }, [fireChange]);
 
   /**
@@ -885,7 +955,7 @@ export function TouchDateField({
           // withdrawing one is not.
           data-title="month-year"
           {...stylex.props(styles.title, focusOutlineStyles.focusVisible)}>
-          <span>{monthYearLabel}</span>
+          <span {...stylex.props(styles.titleText)}>{monthYearLabel}</span>
           <Icon
             icon="chevronDown"
             size="sm"
@@ -949,6 +1019,27 @@ export function TouchDateField({
             }
           />
         </span>
+        {/* Reset, past the arrows, and gone with them on the wheels: the
+            wheels choose a month, and there is no date there to put back.
+            Hidden rather than unmounted, for the arrows' reason — the corner
+            keeps its size, so the header cannot change height mid-swap. */}
+        <span
+          data-action="reset"
+          inert={isWheelOpen ? true : undefined}
+          {...stylex.props(
+            styles.headerReset,
+            isWheelOpen && styles.headerResetHidden,
+          )}>
+          <Button
+            // ghost: a filled button up here would outrank the Save that
+            // finishes the task.
+            variant="ghost"
+            size="sm"
+            xstyle={styles.resetButton}
+            label={t('@astryx.dateInput.resetPicking')}
+            onClick={handleResetInSheet}
+          />
+        </span>
       </div>
 
       {/* Decorative: each day carries its weekday in its accessible name, so
@@ -1043,13 +1134,6 @@ export function TouchDateField({
             styles.panelBeneath,
             isWheelOpen && styles.panelBeneathHidden,
           )}>
-          <Button
-            variant="secondary"
-            size="md"
-            width="100%"
-            label={t('@astryx.dateInput.resetPicking')}
-            onClick={handleResetInSheet}
-          />
           <Button
             variant="primary"
             // md, not sm: it is the action a thumb reaches for, so it gets
@@ -1135,7 +1219,7 @@ export function TouchDateField({
         />
       </button>
       <input
-        ref={mergeRefs(ref, inputRef)}
+        ref={mergedInputRef}
         id={id}
         type="text"
         role="combobox"

package/src/DateInput/index.ts

@@ -14,6 +14,7 @@ export type {
   DateInputProps,
   DateInputSize,
   DateInputFormat,
+  DateInputNativePicker,
   DateInputStatus,
   DateInputStatusType,
 } from './DateInput';

package/src/DateInput/nativeDateSegments.ts

@@ -0,0 +1,127 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file nativeDateSegments.ts
+ * @input Uses the DOM only
+ * @output Exports hasEditableDateSegments, resetDateSegmentProbe
+ * @position Internal helper for NativeDateField; answers "can the user type
+ *   into this engine's `<input type="date">`?"
+ *
+ * `<input type="date">` is two different controls wearing one tag name: a
+ * single untypable run the OS picker drives (iOS, Android), or a row of
+ * editable `mm`/`dd`/`yyyy` fields (desktop engines). Hiding the first costs
+ * nothing; hiding the second hides what the user is editing.
+ *
+ * Neither obvious test tells them apart. The pointer is wrong on Chrome's
+ * touch simulator, a Windows tablet and a ChromeOS convertible, which report
+ * a coarse pointer while Blink still renders segments. And measured, iOS and
+ * Chromium BOTH accept every `-webkit-datetime-*` selector, so
+ * `CSS.supports('selector(...)')` only proves the parser knows the name. What
+ * separates them is which pseudo is a real box, so this measures that.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/NativeDateField.tsx (the caller)
+ * - /packages/core/src/DateInput/NativeDateField.test.tsx (tests)
+ */
+
+/** Marks the throwaway probe element for the probe stylesheet. */
+const PROBE_ATTR = 'data-astryx-date-probe';
+
+/** How much padding the probe adds, in px. Large enough to beat rounding. */
+const PROBE_PADDING = 100;
+
+type EngineKind = 'segmented' | 'picker-only' | 'unknown';
+
+let cachedEngine: EngineKind | null = null;
+
+/** Whether padding this pseudo-element moves the control's box. */
+function pseudoIsRealBox(
+  input: HTMLInputElement,
+  style: HTMLStyleElement,
+  pseudo: string,
+  baseWidth: number,
+): boolean {
+  style.textContent = `[${PROBE_ATTR}]${pseudo}{padding-inline-start:${PROBE_PADDING}px !important}`;
+  // Reading geometry flushes style and layout, so this already reflects it.
+  return input.getBoundingClientRect().width > baseWidth + PROBE_PADDING / 2;
+}
+
+/**
+ * Classifies the engine's date control. Cached: the answer is a build-time
+ * property of the browser, not of the field or the pointer in use.
+ */
+function probeEngine(): EngineKind {
+  if (cachedEngine !== null) {
+    return cachedEngine;
+  }
+  if (typeof document === 'undefined' || !document.body) {
+    return 'unknown';
+  }
+
+  const input = document.createElement('input');
+  input.setAttribute('type', 'date');
+  input.setAttribute(PROBE_ATTR, '');
+  // Off-screen, and immune to the page's own `input` rules: the probe reads a
+  // width DELTA, so anything pinning the width would swallow the signal.
+  input.style.cssText =
+    'position:fixed;top:-9999px;left:0;width:auto;min-width:0;max-width:none;' +
+    'padding:0;border:0;font-size:16px;box-sizing:content-box;';
+
+  const style = document.createElement('style');
+
+  let kind: EngineKind = 'unknown';
+  try {
+    document.body.appendChild(input);
+    document.head.appendChild(style);
+    const base = input.getBoundingClientRect().width;
+    if (pseudoIsRealBox(input, style, '::-webkit-datetime-edit', base)) {
+      // Chromium's editable field row, and WebKit's on macOS/GTK. Probe the
+      // container: the individual field pseudos overflow it rather than
+      // expand it, so they do not move the box even in Chromium.
+      kind = 'segmented';
+    } else if (
+      pseudoIsRealBox(input, style, '::-webkit-date-and-time-value', base)
+    ) {
+      // The single, untypable run iOS Safari and Chrome on Android paint.
+      kind = 'picker-only';
+    }
+  } catch {
+    // A hostile CSSOM leaves the answer unknown, resolved by the pointer.
+  } finally {
+    input.remove();
+    style.remove();
+  }
+
+  cachedEngine = kind;
+  return kind;
+}
+
+/**
+ * Whether the user can type into this engine's `<input type="date">`.
+ *
+ * Firefox exposes neither pseudo-element, so it — and any future engine —
+ * comes back `'unknown'` and the pointer breaks the tie. That is the right
+ * fallback precisely where the probe is blind: the pointer is wrong for
+ * Chromium because Blink's answer is fixed at build time and contradicts it,
+ * and an engine we cannot see is not in that position. It lands Firefox on
+ * the desktop (segmented) and on Android (picker-only) correctly.
+ *
+ * @param isTouchPointer Whether `(pointer: coarse)` matches.
+ * @internal Exported for tests.
+ */
+export function hasEditableDateSegments(isTouchPointer: boolean): boolean {
+  const engine = probeEngine();
+  return engine === 'unknown' ? !isTouchPointer : engine === 'segmented';
+}
+
+/**
+ * Drops the cached classification.
+ *
+ * @internal Exists for tests, which render against several engines in one
+ *   document.
+ */
+export function resetDateSegmentProbe(): void {
+  cachedEngine = null;
+}

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -108,7 +108,7 @@ export const docs = {
       name: 'minRangeSpan',
       type: 'number',
       description:
-        'Minimum days a selected range must span, counting both endpoints (`2` forbids a single-day range). Once a start is picked, days closer than this are disabled. Defaults to 1 (same-day start and end allowed).',
+        'Minimum days a selected range must span, counting both endpoints (`2` forbids a single-day range). Once a start is picked, days closer than this are disabled. Clicking the start again commits a one-day range when allowed, or cancels the in-progress selection when the minimum is longer. Defaults to 1 (same-day start and end allowed).',
     },
     {
       name: 'presets',
@@ -328,7 +328,7 @@ export const docsDense = {
     maxRangeSpan:
       'max days a range may span, both endpoints counted (7 = a 7-day window); caps the window from the picked start. Selection-only; does not rewrite an over-wide value',
     minRangeSpan:
-      'min days a range must span, both endpoints counted (2 forbids a single-day range); default 1',
+      'min days a range must span, both endpoints counted (2 forbids a single-day range); repeated start click commits one day when allowed, otherwise cancels; default 1',
     presets: 'preset ranges as quick-select options',
     hasClear: 'clear button when range is set (default true)',
     placeholder: 'placeholder when empty',

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -730,6 +730,28 @@ describe('DateRangeInput range-span forwarding', () => {
   const dayButton = (iso: string): HTMLButtonElement | null =>
     document.querySelector<HTMLButtonElement>(`button[data-date="${iso}"]`);
 
+  it('allows selecting a one-day range when minRangeSpan is 1', () => {
+    const handleChange = vi.fn();
+    render(
+      <DateRangeInput
+        label="Reporting period"
+        value={null}
+        onChange={handleChange}
+        minRangeSpan={1}
+        numberOfMonths={1}
+      />,
+    );
+
+    fireEvent.click(getButton('Open calendar'));
+    fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
+    fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
+
+    expect(handleChange).toHaveBeenCalledWith({
+      start: '2026-01-10',
+      end: '2026-01-10',
+    });
+  });
+
   it('forwards maxRangeSpan so the window caps after a start is picked', () => {
     render(
       <DateRangeInput

package/src/DateRangeInput/DateRangeInput.tsx

@@ -374,8 +374,10 @@ export interface DateRangeInputProps extends Omit<
    * Minimum number of days the selected range must span, counting both
    * endpoints — `minRangeSpan={2}` forbids a single-day range. Once a start
    * date is picked, days closer than this to it are disabled — except the
-   * start itself, which stays selectable as the active anchor. Defaults to 1
-   * (a same-day start and end is allowed).
+   * start itself, which stays selectable. Clicking the start again commits a
+   * one-day range when the minimum allows it; otherwise it cancels the
+   * in-progress selection so the start can be moved. Defaults to 1 (a
+   * same-day start and end is allowed).
    */
   minRangeSpan?: number;
 

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -123,6 +123,12 @@ export const docs = {
         'Minutes to add or subtract when using arrow keys in the time input.',
       default: '1',
     },
+    {
+      name: 'timeOptionInterval',
+      type: '5 | 10 | 15 | 30 | 60',
+      description:
+        'Minute cadence for a dropdown of preset times on the time portion. Set it to turn the time field into a combobox listing every valid time at that cadence (60 gives a 12 AM to 11 PM list). Omitted, the time field stays a plain text input and gains no combobox semantics. Typed entry keeps working either way, so a time between two options is still reachable. Independent of timeIncrement, which governs arrow-key stepping.',
+    },
     {
       name: 'hasClear',
       type: 'boolean',
@@ -206,6 +212,8 @@ export const docs = {
       },
       {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
       {className: 'astryx-date-time-input-clock-icon'},
+      {className: 'astryx-date-time-input-time-listbox'},
+      {className: 'astryx-date-time-input-time-option'},
     ],
   },
   usage: {
@@ -283,6 +291,12 @@ export const docs = {
         description:
           'A text input for entering the time, displayed beside the date input.',
       },
+      {
+        name: 'Time options popover',
+        required: false,
+        description:
+          'A list of preset times at the timeOptionInterval cadence, shown when that prop is set and the time input is clicked or opened with Alt+ArrowDown.',
+      },
       {
         name: 'Clear button',
         required: false,
@@ -512,6 +526,8 @@ export const docsZh = {
       },
       {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
       {className: 'astryx-date-time-input-clock-icon'},
+      {className: 'astryx-date-time-input-time-listbox'},
+      {className: 'astryx-date-time-input-time-option'},
     ],
   },
 };
@@ -585,6 +601,8 @@ export const docsDense = {
     hasSeconds: 'include seconds in time portion',
     hourFormat: "display format. '12h' shows AM/PM; '24h' uses 24-hour",
     timeIncrement: 'minutes to add/subtract on arrow keys in time input',
+    timeOptionInterval:
+      'minute cadence for a preset-time dropdown on the time input; omitted = plain text input, no combobox. typed entry still works',
     hasClear: 'Shows clear button when datetime is set',
     placeholder: 'date-portion placeholder when empty',
     timePlaceholder: 'time-portion placeholder when empty',