@astryxdesign/core 0.4.7 → 0.5.0-canary.32a62fd

package/dist/DateInput/NativeDateField.js

@@ -0,0 +1,477 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file NativeDateField.tsx
+ * @input Uses React, Field, Icon, InputClearButton, Spinner, useCalendarConstraints
+ * @output Exports NativeDateField — the OS-picker touch surface
+ * @position One of DateInput's three surfaces. `DateInput` picks the pointer
+ *   field on a mouse and, on touch, either `TouchDateField` (the default) or
+ *   this one when the consumer opts in with `nativePicker`.
+ *
+ * Hands date picking to the platform: a real `<input type="date">`, whose
+ * picker the OS draws — the iOS wheel, the Android calendar dialog. The field
+ * itself still looks like every other Astryx input, and DateInput paints its
+ * text so `format` and `placeholder` keep applying.
+ *
+ * Everything unusual in here was measured on a real iOS device; the comments
+ * say which behaviour forced which decision, because none of them are
+ * reproducible in a desktop browser.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/DateInput.tsx (the `nativePicker` prop)
+ * - /packages/core/src/DateInput/DateInput.doc.mjs (prop table)
+ * - /packages/core/src/DateInput/DateInputNative.test.tsx (tests)
+ */
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useCalendarConstraints } from "../Calendar/index.js";
+import { Field, InputClearButton, inputStatusBorderStyles, inputStatusFocusWithinStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
+import { useInputStatusIcon, useMergedRefs } from "../hooks/index.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
+import { Icon } from "../Icon/index.js";
+import { useLocale, useTranslator } from "../i18n/index.js";
+import { useInputGroup } from "../InputGroup/index.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
+import { stableClassName } from "../naming.js";
+import { useSize } from "../SizeContext/index.js";
+import { Spinner } from "../Spinner/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, radiusVars, sizeVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { focusOutlineStyles, formatSharedDate, getInputARIA, mergeProps, parseDateInput, plainDateFromISO, plainDateToISO, themeProps } from "../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  wrapper: {
+    kOIVth: "x167g77z",
+    $$css: true
+  },
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk x16khyan",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "xt0e3qv",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  }
+};
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * The OS-picker surface. Takes `DateInput`'s props verbatim; see
+ * {@link DateInput} for when it is chosen over the other two.
+ */
+export function NativeDateField({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  disabledMessage,
+  value,
+  onChange,
+  isLoading = false,
+  min,
+  max,
+  dateConstraints,
+  placeholder: placeholderFromProps,
+  size: sizeProp,
+  status,
+  statusVariant = 'attached',
+  labelTooltip,
+  hasClear = false,
+  // The OS draws the picker, so neither reaches it: both describe a calendar
+  // grid it does not have. Accepted (the prop types are shared) and ignored.
+  numberOfMonths: _numberOfMonths,
+  weekStartsOn: _weekStartsOn,
+  format = 'date_long',
+  width,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const locale = useLocale();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
+  const size = useSize(sizeProp, 'md');
+  const id = useId();
+  const inputLabelID = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(ref, inputRef);
+  const inputGroup = useInputGroup();
+  const isEffectivelyDisabled = isDisabled || isLoading;
+
+  // Disabled-reason tooltip, same contract as the other two surfaces: a
+  // disabled control swallows pointer events, so the listeners attach to the
+  // wrapper and the input stays focusable via aria-disabled.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+  const {
+    isDateDisabled
+  } = useCalendarConstraints({
+    min,
+    max,
+    dateConstraints
+  });
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant,
+    isInGroup: !!inputGroup
+  });
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+
+  // A date the picker produced that `dateConstraints` refuses, held so the
+  // refusal can be announced instead of looking like a dead tap.
+  const [rejectedValue, setRejectedValue] = useState(null);
+  // Whether the control has focus — which, on a touch device, means its
+  // picker is open.
+  const [isFocused, setIsFocused] = useState(false);
+  // The raw value the control last reported and we acted on, so the same edit
+  // arriving through both commit paths only fires one change.
+  const lastCommitRef = useRef(null);
+  const prevValueRef = useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    lastCommitRef.current = null;
+    if (rejectedValue !== null) {
+      setRejectedValue(null);
+    }
+  }
+
+  // The control's own value is always ISO — the only form it accepts, and
+  // what the picker reads and writes. `format` rides on the overlay instead.
+  const nativeValue = value && ISO_DATE.test(value) ? value : '';
+  const isInputValid = rejectedValue === null;
+  const formatValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
+
+  // This field paints the closed control's text itself, which is what keeps
+  // `format` and `placeholder` applying: the OS picker has no segments to
+  // edit, so our text holds even while the picker is open, and tracks it live.
+  const overlayText = nativeValue ? formatValue(nativeValue) : placeholder;
+  const showsOverlay = !!overlayText;
+  const commitValue = useCallback(newValue => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    // The same edit can arrive twice — React's synthetic change and the
+    // native listener below both report it — so act on a raw value once.
+    if (lastCommitRef.current === newValue) {
+      return;
+    }
+    lastCommitRef.current = newValue;
+    if (!newValue) {
+      setRejectedValue(null);
+      if (value !== undefined) {
+        onChange?.(undefined);
+      }
+      return;
+    }
+    const parsed = parseDateInput(newValue, locale);
+    if (!parsed) {
+      return;
+    }
+    if (isDateDisabled(parsed)) {
+      // iOS does not enforce min/max in its picker — those attributes are
+      // constraint-validation flags, not clamps, and the sheet lets the
+      // user land on any date. Refuse it here and let the sync effect snap
+      // the control back; the live region below announces the refusal.
+      setRejectedValue(newValue);
+      return;
+    }
+    setRejectedValue(null);
+    const parsedISO = plainDateToISO(parsed);
+    if (parsedISO !== value) {
+      onChange?.(parsedISO);
+    }
+  }, [value, onChange, isDateDisabled, isEffectivelyDisabled, locale]);
+  const handleChange = useCallback(e => {
+    commitValue(e.target.value);
+  }, [commitValue]);
+
+  // React's synthetic change system does not reliably observe the iOS
+  // picker's edits. Measured on an iPhone: picking a date fired a native
+  // `input` event carrying the new date while React's `onChange` never ran —
+  // so React re-rendered and wrote its own stale value straight back over the
+  // picker's, and the user's pick (and their Reset) silently reverted. A
+  // native listener reads what the control actually holds, whatever React's
+  // synthetic layer made of it.
+  const commitRef = useRef(commitValue);
+  useEffect(() => {
+    commitRef.current = commitValue;
+  });
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const handleNative = () => commitRef.current(input.value);
+    input.addEventListener('input', handleNative);
+    input.addEventListener('change', handleNative);
+    return () => {
+      input.removeEventListener('input', handleNative);
+      input.removeEventListener('change', handleNative);
+    };
+  }, []);
+
+  // The value the control mounts with. Deliberately captured once: React
+  // writes to the element whenever a `value` OR `defaultValue` prop changes,
+  // and on iOS ANY write while the picker sheet is open detaches the sheet
+  // from the field — the wheel and Reset keep moving the sheet's own
+  // highlight, but nothing they do reaches the input and no event fires, so
+  // the user's pick appears to do nothing. Holding this constant means React
+  // touches the element exactly once, at mount; the effect below owns every
+  // later update and only writes while the field is unfocused.
+  const initialValueRef = useRef(null);
+  if (initialValueRef.current === null) {
+    initialValueRef.current = nativeValue;
+  }
+
+  // Push an externally-changed value in — but never while the control has
+  // focus, for the reason above. Blur flips `isFocused`, so this doubles as
+  // the reconcile once the picker closes. (Self-heals a stale
+  // `initialValueRef` too, on the commit right after a remount.)
+  useEffect(() => {
+    if (isFocused) {
+      return;
+    }
+    const input = inputRef.current;
+    if (input && input.value !== nativeValue) {
+      input.value = nativeValue;
+    }
+  }, [isFocused, nativeValue]);
+  const handleBlur = useCallback(() => {
+    const domValue = inputRef.current?.value;
+    setIsFocused(false);
+    // A refused date is reverted by the sync effect the moment focus leaves,
+    // so the field is once again showing a date that IS valid. Keeping the
+    // rejection past that point would mark good data invalid, with no way
+    // back except changing the field again. The live region announced the
+    // refusal while it happened; that is the feedback.
+    setRejectedValue(null);
+    if (domValue !== undefined && domValue !== nativeValue) {
+      commitValue(domValue);
+    }
+  }, [commitValue, nativeValue]);
+
+  // Focusing a date control is what raises the OS picker, so the usual
+  // focus-restore after a clear would pop the picker the tap just dismissed —
+  // and on iOS that reads as the clear having done nothing.
+  const handleClear = useCallback(() => {
+    onChange?.(undefined);
+  }, [onChange]);
+  const openPicker = useCallback(() => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    // Focus first: on touch browsers focusing the control is itself what
+    // raises the picker, and iOS implements no `showPicker()` for type=date
+    // (WebKit bug 261703), so focus is the whole mechanism there.
+    input.focus();
+    if (typeof input.showPicker === 'function') {
+      try {
+        input.showPicker();
+      } catch {
+        // showPicker throws without transient user activation and inside a
+        // cross-origin iframe. The focus above is the fallback.
+      }
+    }
+  }, [isEffectivelyDisabled]);
+  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+    ref: el => {
+      disabledMessageTooltip.ref(el);
+    },
+    ...rest,
+    ...mergeProps(themeProps('date-input', {
+      size,
+      status: status?.type ?? null,
+      disabled: isDisabled ? 'disabled' : null
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+    children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: inputLabelID,
+      children: label
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: openPicker,
+      disabled: isEffectivelyDisabled,
+      "aria-label": t('@astryx.dateInput.openCalendar'),
+      tabIndex: -1,
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "calendar",
+        size: "sm",
+        color: "secondary",
+        ...themeProps('date-input-toggle-icon', {
+          state: 'collapsed'
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x1n2onr6 x78zum5 x6s0dn4 x98rzlu xeuugli"
+      },
+      children: [/*#__PURE__*/_jsx("input", {
+        ref: mergedInputRef,
+        id: id,
+        type: "date"
+        // UNCONTROLLED on purpose, with a value React never rewrites after
+        // mount — see `initialValueRef` and the sync effect above.
+        ,
+        defaultValue: initialValueRef.current ?? '',
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: handleBlur,
+        min: min,
+        max: max,
+        disabled: isEffectivelyDisabled && !showsDisabledMessage,
+        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+        readOnly: showsDisabledMessage || undefined,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isEffectivelyRequired ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
+        "aria-busy": isLoading || undefined,
+        ...{
+          0: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3"
+          },
+          4: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 x19co3pv xg7jpbn"
+          },
+          2: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xt0e3qv"
+          },
+          6: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 x19co3pv xg7jpbn xt0e3qv"
+          },
+          1: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xv1l7n4"
+          },
+          5: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xg7jpbn xv1l7n4"
+          },
+          3: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xt0e3qv xv1l7n4"
+          },
+          7: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xg7jpbn xt0e3qv xv1l7n4"
+          }
+        }[!!showsOverlay << 2 | !!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
+      }), showsOverlay && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          0: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          4: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv x1tgivj0"
+          },
+          2: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4 xt0e3qv"
+          },
+          6: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv x1tgivj0 xt0e3qv"
+          },
+          1: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          5: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          3: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xt0e3qv xv1l7n4"
+          },
+          7: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xt0e3qv xv1l7n4"
+          }
+        }[!!nativeValue << 2 | !!isEffectivelyDisabled << 1 | !!(!isInputValid && !!nativeValue) << 0],
+        children: overlayText
+      })]
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      role: "alert",
+      "aria-live": "assertive",
+      children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
+    }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+      label: t('@astryx.dateInput.clear', {
+        label
+      }),
+      onClick: handleClear,
+      iconClassName: stableClassName('date-input-clear-icon')
+    }), isLoading && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), statusIcon, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  });
+  if (inputGroup) {
+    return inputWrapper;
+  }
+  return /*#__PURE__*/_jsx(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: id,
+    descriptionID: description ? descriptionID : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageID : undefined
+    } : undefined,
+    statusVariant: statusVariant,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: inputWrapper
+  });
+}
+NativeDateField.displayName = 'NativeDateField';

package/dist/DateInput/TouchDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAichD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkqBhB;yBAnsBe,cAAc"}
+{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAgchD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqsBhB;yBAtuBe,cAAc"}

package/dist/DateInput/TouchDateField.js

@@ -49,7 +49,7 @@ import { BottomSheet } from "../BottomSheet/index.js";
 import { Button } from "../Button/index.js";
 import { useCalendarConstraints } from "../Calendar/index.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
-import { useInputStatusIcon } from "../hooks/index.js";
+import { useInputStatusIcon, useMergedRefs } from "../hooks/index.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { Icon } from "../Icon/index.js";
 import { IconButton } from "../IconButton/index.js";
@@ -63,7 +63,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVars, typeScaleVars, typographyVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, mergeRefs, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
 import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { MonthScroller } from "./MonthScroller.js";
 import { MonthYearWheels } from "./MonthYearWheels.js";
@@ -235,6 +235,7 @@ export function TouchDateField({
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(ref, inputRef);
   const inputGroup = useInputGroup();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -274,6 +275,13 @@ export function TouchDateField({
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isWheelOpen, setIsWheelOpen] = useState(false);
   const scrollerHandleRef = useRef(null);
+  // Pending focus handoff from the clear button; see handleClear.
+  const clearFocusTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (clearFocusTimerRef.current != null) {
+      clearTimeout(clearFocusTimerRef.current);
+    }
+  }, []);
   const today = useMemo(() => plainDateToday(), []);
   const selectedDate = useMemo(() => optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? plainDateFromISO(optimisticValue) : null, [optimisticValue]);
 
@@ -350,7 +358,33 @@ export function TouchDateField({
   }, [isEffectivelyDisabled]);
   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]);
 
   /**
@@ -725,7 +759,7 @@ export function TouchDateField({
         })
       })
     }), /*#__PURE__*/_jsx("input", {
-      ref: mergeRefs(ref, inputRef),
+      ref: mergedInputRef,
       id: id,
       type: "text",
       role: "combobox",

package/dist/DateInput/index.d.ts

@@ -5,5 +5,5 @@
  * @position Package entry point for DateInput
  */
 export { DateInput } from './DateInput';
-export type { DateInputProps, DateInputSize, DateInputFormat, DateInputStatus, DateInputStatusType, } from './DateInput';
+export type { DateInputProps, DateInputSize, DateInputFormat, DateInputNativePicker, DateInputStatus, DateInputStatusType, } from './DateInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/DateInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -9,6 +9,11 @@ export type DateTimeInputHourFormat = '12h' | '24h';
 export type DateTimeInputSize = 'sm' | 'md' | 'lg';
 /** Supported minute increments for arrow-key stepping of the time field. */
 export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
+/**
+ * Supported minute cadences for the preset-time dropdown. Every value divides
+ * an hour evenly, so each option lands on a round clock time.
+ */
+export type DateTimeInputTimeOptionInterval = 5 | 10 | 15 | 30 | 60;
 export type { InputStatus as DateTimeInputStatus, InputStatusType as DateTimeInputStatusType, } from '../Field';
 export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
     /** Ref forwarded to the date input element */
@@ -112,6 +117,21 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
      * @default 1
      */
     timeIncrement?: DateTimeInputTimeIncrement;
+    /**
+     * Minute cadence for a dropdown of preset times on the time field. Set it to
+     * turn the time field into a combobox listing every valid time at that
+     * cadence (`60` gives the 12 AM - 11 PM list, `15` a quarter-hour list).
+     *
+     * Omitted, the time field stays a plain text input: typed entry and
+     * arrow-key stepping only, with no combobox semantics added to the
+     * accessibility tree. Typed entry keeps working when the dropdown is on —
+     * the list is a shortcut, not a restriction, so a time between two options
+     * can still be typed.
+     *
+     * Independent of `timeIncrement`, which governs arrow-key stepping. Setting
+     * both to the same value is the usual choice for scheduling flows.
+     */
+    timeOptionInterval?: DateTimeInputTimeOptionInterval;
     /**
      * Whether to show a clear button when a value is set.
      * @default false
@@ -179,7 +199,7 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
  * />
  * ```
  */
-export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
+export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, timeOptionInterval, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
 export declare namespace DateTimeInput {
     var displayName: string;
 }

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}