@astryxdesign/core 0.4.7 → 0.5.0-canary.1f8525f

package/src/DateInput/TouchDateField.tsx

@@ -67,7 +67,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 +96,6 @@ import {
   getInputARIA,
   isImeKeyEvent,
   mergeProps,
-  mergeRefs,
   rtlStyles,
   themeProps,
   formatSharedDate,
@@ -557,6 +556,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 +599,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 +718,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]);
 
   /**
@@ -1135,7 +1169,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/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',