@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/dist/DateRangeInput/DateRangeInput.js

@@ -4,7 +4,8 @@
 
 /**
  * @file DateRangeInput.tsx
- * @input Uses React, Field, Calendar (range mode), VisuallyHidden, usePopover
+ * @input Uses React, Field, Calendar (range mode), the resolved calendar,
+ *   VisuallyHidden, usePopover
  * @output Exports DateRangeInput component, DateRangeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateRangeInput.test.tsx
  *
@@ -18,7 +19,9 @@
 import { useId, useCallback, useMemo, useOptimistic, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
-import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateToday, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
+import { calendarMonthOf, calendarYearMonthOf, formatCalendarDate } from "../utils/calendarSystem.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
@@ -90,7 +93,7 @@ const styles = {
   },
   presetButtonActive: {
     kWkggS: "xgcxg3y",
-    kMwMTN: "xqwr325",
+    kMwMTN: "xjse4m1",
     $$css: true
   },
   presetButtonDisabled: {
@@ -117,16 +120,17 @@ const sizeStyles = {
     $$css: true
   }
 };
-function formatRangeDisplay(range, locale) {
+function formatRangeDisplay(range, locale, calendar) {
   if (!range) {
     return '';
   }
   const start = plainDateFromISO(range.start);
   const end = plainDateFromISO(range.end);
-  const currentYear = plainDateToday().year;
-  const sameYear = start.year === end.year && start.year === currentYear;
+  const yearOf = pd => calendarYearMonthOf(calendar, calendarMonthOf(calendar, pd)).year;
+  const currentYear = yearOf(plainDateToday());
+  const sameYear = yearOf(start) === yearOf(end) && yearOf(start) === currentYear;
   const fmt = sameYear ? DATE_FORMAT_SHORT : DATE_FORMAT_SHORT_WITH_YEAR;
-  return `${plainDateFormat(start, fmt, locale)} – ${plainDateFormat(end, fmt, locale)}`;
+  return `${formatCalendarDate(calendar, start, fmt, locale)} – ${formatCalendarDate(calendar, end, fmt, locale)}`;
 }
 function isRangeEqual(a, b) {
   if (a === b) {
@@ -202,6 +206,7 @@ export function DateRangeInput({
   labelTooltip,
   numberOfMonths = 2,
   weekStartsOn,
+  calendar: calendarProp,
   width,
   containerXstyle,
   containerClassName,
@@ -230,6 +235,7 @@ export function DateRangeInput({
   } = rest;
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(calendarProp, 'DateRangeInput');
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -275,7 +281,7 @@ export function DateRangeInput({
   // A button cannot carry aria-required. Mirror the input-family pattern
   // by describing it with localized, visually hidden required text.
   isEffectivelyRequired ? requiredID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, ariaDescribedByProp].filter(Boolean).join(' ') || undefined;
-  const displayValue = useMemo(() => formatRangeDisplay(optimisticValue, locale), [optimisticValue, locale]);
+  const displayValue = useMemo(() => formatRangeDisplay(optimisticValue, locale, calendar), [optimisticValue, locale, calendar]);
   const popover = usePopover({
     dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar')
@@ -473,6 +479,7 @@ export function DateRangeInput({
             }, preset.label);
           })
         }), popover.isOpen && /*#__PURE__*/_jsx(Calendar, {
+          calendar: calendar,
           mode: "range",
           value: optimisticValue,
           onChange: handleRangeSelect,

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -1,5 +1,6 @@
 import { type InputStatus } from '../Field/index.js';
 import { type DayOfWeek, type DayOfWeekName } from '../Calendar/index.js';
+import type { CalendarSystem } from '../utils/calendarSystem.js';
 import { type FieldInputBaseProps } from '../Field/fieldParts.js';
 import type { SizeValue } from '../utils/types.js';
 import { type PickerPresentation } from '../utils/inputPresentation.js';
@@ -150,10 +151,25 @@ export interface DateTimeInputProps extends Omit<FieldInputBaseProps<HTMLInputEl
      */
     hasClear?: boolean;
     /**
-     * Placeholder text shown in the date portion when no date is selected.
+     * Placeholder text shown in the date portion when no date is selected. A
+     * caller placeholder replaces the calendar format hint.
      * @default "Select a date"
      */
     placeholder?: string;
+    /**
+     * The calendar the date field reads and writes typed dates in, such as
+     * `'persian'`, `'hebrew'`, or `'buddhist'`. `value`, `onChange`, `min`, and
+     * `max` stay Gregorian ISO datetimes in every calendar. People type a date
+     * the way the locale writes it in this calendar, and the committed date
+     * text uses it. Years are years of this calendar, so set `min` and `max` to
+     * catch a year typed in the wrong calendar. Calendars other than `gregory`,
+     * `iso8601`, `buddhist`, `roc`, and `japanese` need `Temporal`, native or a
+     * polyfill the application loads; without it the field uses the Gregorian
+     * calendar.
+     *
+     * @default the InternationalizationProvider's calendar, else `'gregory'`
+     */
+    calendar?: CalendarSystem;
     /**
      * Placeholder text shown in the time portion when no time is selected.
      * On touch, this appears in the closed time segment before a time is chosen.
@@ -219,6 +235,10 @@ export interface DateTimeInputProps extends Omit<FieldInputBaseProps<HTMLInputEl
      * JavaScript. `hourFormat` formats the closed value; the OS picker follows the
      * user's locale.
      *
+     * In a calendar other than `gregory` or `iso8601`, `'touch'` and `'always'`
+     * use Astryx's popovers on a fine pointer and the bottom sheet on a coarse
+     * pointer.
+     *
      * @default 'touch'
      * @deprecated Use `presentation` (`spec:AST-043` FR3):
      * `'touch'` → `'adaptive-native'`, `'always'` → `'native'`,
@@ -234,13 +254,16 @@ export interface DateTimeInputProps extends Omit<FieldInputBaseProps<HTMLInputEl
      * - `'popover'`: Astryx's typed fields + popovers on every pointer
      * - `'bottom-sheet'`: Astryx's bottom-sheet date/time wheels on every pointer
      * - `'native'`: browser/OS date and time pickers on every pointer, with no
-     *   Astryx fallback (FR2)
+     *   Astryx fallback (FR2), except in a calendar other than `gregory` or
+     *   `iso8601`, where it is `'adaptive-bottom-sheet'` and warns in
+     *   development
      * - `'adaptive-bottom-sheet'`: popovers on a fine pointer, bottom sheet on
      *   a coarse pointer
      * - `'adaptive-native'` (default): popovers on a fine pointer, browser/OS
      *   pickers on a coarse pointer, keeping the released per-segment Astryx
      *   fallbacks (seconds, non-default `timeIncrement`, `timeOptionInterval`)
-     *   where a native control cannot express the value (FR2)
+     *   where a native control cannot express the value (FR2), and the bottom
+     *   sheet in a calendar other than `gregory` or `iso8601`
      *
      * @default 'adaptive-native'
      */

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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"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -31,15 +31,16 @@ import { Spinner } from "../Spinner/index.js";
 import { Calendar } from "../Calendar/index.js";
 import { useCalendarConstraints } from "../Calendar/hooks/index.js";
 import { usePopover } from "../Popover/index.js";
-import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, useOutsidePress } from "../Layer/outsidePress.js";
+import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, noteOutsideDismissal, useOutsidePress } from "../Layer/outsidePress.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
-import { parseDateInput, parseISOTime, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, isFocusDetached } from "../utils/index.js";
+import { parseISOTime, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, isFocusDetached } from "../utils/index.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { joinAriaIDs } from "../utils/inputAria.js";
-import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { useTypedDateField } from "../DateInput/useTypedDate.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
@@ -54,7 +55,8 @@ import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.
 import { NativeDateSegment } from "./NativeDateSegment.js";
 import { NativeTimeSegment } from "./NativeTimeSegment.js";
 import { TouchDateTimeField } from "./TouchDateTimeField.js";
-import { effectivePickerPresentation, resolvePickerPresentation } from "../utils/inputPresentation.js";
+import { resolvePickerPresentation } from "../utils/inputPresentation.js";
+import { useCalendarPresentation } from "../DateInput/useCalendarPresentation.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/DateTimeInput/DateTimeInput.generated.js";
@@ -246,6 +248,7 @@ function PointerDateTimeField({
   timeOptionInterval,
   hasClear = false,
   placeholder: placeholderFromProps,
+  calendar,
   timePlaceholder: timePlaceholderFromProps,
   timeLabel,
   size: sizeProp,
@@ -278,6 +281,7 @@ function PointerDateTimeField({
     'aria-labelledby': ariaLabelledByProp,
     onBlur: onBlurProp,
     onClick: onClickProp,
+    onFocus: onFocusProp,
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
@@ -310,12 +314,12 @@ function PointerDateTimeField({
   const timeInputId = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
+  const calendarDescriptionID = useId();
   const dateInputRef = useRef(null);
   const mergedDateInputRef = useMergedRefs(ref, dateInputRef);
   const timeInputRef = useRef(null);
   const timeContainerRef = useRef(null);
   const calendarRef = useRef(null);
-  const lastFiredDateRef = useRef(undefined);
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isPendingChange = optimisticValue !== value;
@@ -345,19 +349,6 @@ function PointerDateTimeField({
     isEnabled: showsDisabledMessage
   });
 
-  // DateTimeInput fixes its status presentation to the detached message box,
-  // so the shared helper suppresses the on-field icon (the message box carries
-  // its own leading glyph). Routed through the helper for consistency with the
-  // rest of the bordered input family.
-  const {
-    statusIcon,
-    describedBy: statusTooltipDescribedBy
-  } = useInputStatusIcon({
-    status,
-    statusVariant: 'detached'
-  });
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, ariaDescribedByProp].filter(Boolean).join(' ') || undefined;
-
   // Split min/max and current value
   const minParts = useMemo(() => splitDateTime(min), [min]);
   const maxParts = useMemo(() => splitDateTime(max), [max]);
@@ -388,21 +379,6 @@ function PointerDateTimeField({
     return valueParts.date === maxParts.date ? maxParts.time : undefined;
   }, [maxParts.date, maxParts.time, valueParts.date]);
 
-  // --- Date input state ---
-  const [datePendingInput, setDatePendingInput] = useState(null);
-  const prevDateRef = useRef(valueParts.date);
-  if (valueParts.date !== prevDateRef.current) {
-    prevDateRef.current = valueParts.date;
-    if (valueParts.date !== lastFiredDateRef.current) {
-      lastFiredDateRef.current = undefined;
-      if (datePendingInput !== null) {
-        setDatePendingInput(null);
-      }
-    }
-  }
-  const dateDisplayValue = datePendingInput !== null ? datePendingInput : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date) ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG, locale) : '';
-  const isDateInputValid = datePendingInput === null || !datePendingInput.trim() ? true : parseDateInput(datePendingInput, locale) !== null;
-
   // --- Time input state ---
   const [timePendingInput, setTimePendingInput] = useState(null);
   const [isTimeFocused, setIsTimeFocused] = useState(false);
@@ -544,10 +520,59 @@ function PointerDateTimeField({
       fireChange(combined);
     }
     if (source === 'calendar') {
-      setDatePendingInput(null);
       popover.hide();
     }
   }, [valueParts.time, nativeTimeDraft, hasSeconds, minParts, maxParts, fireChange, popover]);
+  const handleTypedDateChange = useCallback(date => handleDateChange(date, 'input'), [handleDateChange]);
+  const clearTypedDate = useCallback(() => {
+    if (value !== undefined) {
+      fireChange(undefined);
+    }
+  }, [value, fireChange]);
+  const navigateToTypedDate = useCallback(date => {
+    calendarRef.current?.navigateTo(date);
+  }, []);
+  const {
+    typedDate,
+    displayValue: dateDisplayValue,
+    formatHint: dateFormatHint,
+    isPending: isDatePending,
+    isInvalid: isDateInvalid,
+    fieldStatus,
+    alertMessage: dateAlertMessage,
+    handleChange: handleTypedDateInput,
+    commit: commitDatePendingInput,
+    handleFocus: handleDateFocus,
+    handleBlur: handleDateBlur,
+    reset: resetTypedDate
+  } = useTypedDateField({
+    source: 'DateTimeInput',
+    calendar,
+    format: 'date_long',
+    min: calendarMin,
+    max: calendarMax,
+    isDateDisabled,
+    value: splitDateTime(value).date,
+    shownValue: valueParts.date,
+    onChange: handleTypedDateChange,
+    onClear: clearTypedDate,
+    onTypedDate: navigateToTypedDate,
+    isDisabled: isEffectivelyDisabled,
+    status,
+    isStatusAnnounced: true,
+    hasPlaceholder: placeholderFromProps != null
+  });
+
+  // The detached message box carries its own glyph, so the helper shows no
+  // on-field icon.
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status: fieldStatus,
+    statusVariant: 'detached'
+  });
+  const ariaDescribedBy = [description ? descriptionID : null, !usesNativePicker && typedDate.calendarDescription != null ? calendarDescriptionID : null, fieldStatus?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, ariaDescribedByProp].filter(Boolean).join(' ') || undefined;
   const handleNativeDateChange = useCallback(newDate => {
     if (newDate === undefined) {
       fireChange(undefined);
@@ -576,44 +601,8 @@ function PointerDateTimeField({
     setNativeTimeDraft(newTime);
   }, [fireChange, optimisticValue, valueParts.date]);
   const handleDateInputChange = useCallback(e => {
-    // The input is never natively disabled (AST-085 FR1), so
-    // guard value mutation explicitly (readOnly also blocks typing).
-    if (isEffectivelyDisabled) {
-      return;
-    }
-    const text = e.target.value;
-    setDatePendingInput(text);
-    const parsed = parseDateInput(text, locale);
-    if (parsed && plainDateToISO(parsed) !== valueParts.date && !isDateDisabled(parsed)) {
-      const parsedISO = plainDateToISO(parsed);
-      lastFiredDateRef.current = parsedISO;
-      handleDateChange(parsedISO, 'input');
-      calendarRef.current?.navigateTo(parsedISO);
-    }
-  }, [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled, locale]);
-  const commitDatePendingInput = useCallback(() => {
-    if (datePendingInput === null) {
-      return;
-    }
-    if (!datePendingInput.trim()) {
-      if (value !== undefined) {
-        fireChange(undefined);
-      }
-      setDatePendingInput(null);
-      return;
-    }
-    const parsed = parseDateInput(datePendingInput, locale);
-    if (parsed && !isDateDisabled(parsed)) {
-      const parsedISO = plainDateToISO(parsed);
-      if (parsedISO !== valueParts.date) {
-        handleDateChange(parsedISO, 'input');
-      }
-    }
-    setDatePendingInput(null);
-  }, [datePendingInput, value, valueParts.date, fireChange, isDateDisabled, handleDateChange, locale]);
-  const handleDateBlur = useCallback(() => {
-    commitDatePendingInput();
-  }, [commitDatePendingInput]);
+    handleTypedDateInput(e.target.value);
+  }, [handleTypedDateInput]);
   const handleDateKeyDown = useCallback(e => {
     // Guard the composing keydown (fires before compositionend): an IME uses
     // Enter to commit the candidate and Escape to cancel it, so without this
@@ -634,14 +623,14 @@ function PointerDateTimeField({
           skipAutoFocus: true
         });
       }
-    } else if (e.key === 'Enter' && (datePendingInput !== null || isEffectivelyDisabled)) {
+    } else if (e.key === 'Enter' && (isDatePending || isEffectivelyDisabled)) {
       // Typed text holds Enter back, or a form would submit the value from
       // before the commit. A disabled or busy field must not submit its
       // form either. Otherwise Enter keeps its default, as in any text field.
       e.preventDefault();
       commitDatePendingInput();
     }
-  }, [popover, commitDatePendingInput, isEffectivelyDisabled, datePendingInput]);
+  }, [popover, commitDatePendingInput, isEffectivelyDisabled, isDatePending]);
 
   // --- Time-option popover (#2727) ---
   const timeListboxId = useId();
@@ -875,6 +864,7 @@ function PointerDateTimeField({
     // elsewhere, or a programmatic focus — would strand the listbox open. Focus landing inside the
     // field or the popup itself is not a leave. Mirrors BaseTypeahead.
     if (timePopover.isOpen && !isFocusInsideOwnedLayer(e.relatedTarget, timeContainerRef.current, timePopover.id)) {
+      noteOutsideDismissal(e.currentTarget.ownerDocument);
       timePopover.hide();
     }
     if (timePendingInput === null) {
@@ -1035,10 +1025,10 @@ function PointerDateTimeField({
     isOptional: isOptional,
     isRequired: isRequired,
     isDisabled: isDisabled,
-    status: status ? {
-      type: status.type,
-      message: status.message,
-      messageID: status.message ? statusMessageID : undefined
+    status: fieldStatus ? {
+      type: fieldStatus.type,
+      message: fieldStatus.message,
+      messageID: fieldStatus.message ? statusMessageID : undefined
     } : undefined,
     labelTooltip: labelTooltip,
     statusVariant: "detached",
@@ -1047,15 +1037,15 @@ function PointerDateTimeField({
       ref: disabledMessageTooltip.ref,
       ...mergeProps(themeProps('date-time-input', {
         size,
-        status: status?.type ?? null,
+        status: fieldStatus?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
       }), stylex.props(styles.row, usesNativePicker && styles.nativeRow, controlXstyle), controlClassName, controlStyle),
       children: [/*#__PURE__*/_jsxs("div", {
         ref: usesNativePicker ? undefined : popover.triggerRef,
         ...mergeProps(themeProps('date-time-input-date-segment', {
           size,
-          status: status?.type ?? null
-        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.withinRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
+          status: fieldStatus?.type ?? null
+        }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.withinRing, fieldStatus && inputStatusBorderStyles[fieldStatus.type], fieldStatus && !isEffectivelyDisabled && inputStatusHoverShadowStyles[fieldStatus.type], fieldStatus && inputStatusFocusWithinStyles[fieldStatus.type])),
         children: [usesNativePicker ? /*#__PURE__*/_jsx(NativeDateSegment, {
           id: dateInputId,
           inputRef: mergedDateInputRef,
@@ -1075,6 +1065,7 @@ function PointerDateTimeField({
             ...controlProps,
             'aria-labelledby': controlLabelledBy,
             onBlur: onBlurProp,
+            onFocus: onFocusProp,
             onClick: isEffectivelyDisabled ? undefined : onClickProp,
             onKeyDown: onKeyDownProp
           }
@@ -1112,15 +1103,16 @@ function PointerDateTimeField({
             value: dateDisplayValue,
             onChange: handleDateInputChange,
             onBlur: chainEventHandlers(handleDateBlur, onBlurProp),
+            onFocus: chainEventHandlers(handleDateFocus, onFocusProp),
             onClick: isEffectivelyDisabled ? undefined : chainEventHandlers(handleDateInputClick, onClickProp),
             onKeyDown: chainEventHandlers(handleDateKeyDown, onKeyDownProp),
             "aria-labelledby": controlLabelledBy,
-            placeholder: placeholder,
+            placeholder: dateFormatHint ?? placeholder,
             "aria-disabled": isEffectivelyDisabled ? 'true' : undefined,
             readOnly: isEffectivelyDisabled || undefined,
             "aria-describedby": ariaDescribedBy,
             "aria-required": isEffectivelyRequired ? 'true' : undefined,
-            "aria-invalid": status?.type === 'error' || !isDateInputValid ? 'true' : undefined,
+            "aria-invalid": fieldStatus?.type === 'error' || isDateInvalid ? 'true' : undefined,
             "aria-busy": isBusy || undefined,
             "aria-expanded": popover.isOpen,
             "aria-haspopup": "dialog",
@@ -1140,12 +1132,15 @@ function PointerDateTimeField({
               3: {
                 className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 xf9zqsd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
               }
-            }[!!isEffectivelyDisabled << 1 | !!!isDateInputValid << 0]
+            }[!!isEffectivelyDisabled << 1 | !!isDateInvalid << 0]
           }), /*#__PURE__*/_jsx(VisuallyHidden, {
             as: "div",
             role: "alert",
             "aria-live": "assertive",
-            children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
+            children: dateAlertMessage
+          }), isRenderable(typedDate.calendarDescription) && /*#__PURE__*/_jsx(VisuallyHidden, {
+            id: calendarDescriptionID,
+            children: typedDate.calendarDescription
           })]
         }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
           label: t('@astryx.dateInput.clear', {
@@ -1259,9 +1254,13 @@ function PointerDateTimeField({
     // opens on the current value.
     !popover.isOpen ? null : /*#__PURE__*/_jsx(Calendar, {
       handleRef: calendarRef,
+      calendar: typedDate.calendar,
       mode: "single",
       value: valueParts.date ?? null,
-      onChange: d => handleDateChange(d, 'calendar'),
+      onChange: d => {
+        handleDateChange(d, 'calendar');
+        resetTypedDate();
+      },
       min: calendarMin,
       max: calendarMax,
       dateConstraints: dateConstraints,
@@ -1322,7 +1321,10 @@ PointerDateTimeField.displayName = 'PointerDateTimeField';
 export function DateTimeInput(props) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
   useDevWarning('DateTimeInput', '`nativePicker` is deprecated; use `presentation` instead (`touch` → `adaptive-native`, `always` → `native`, `never` → `adaptive-bottom-sheet`). `presentation` wins when both are set.', props.nativePicker !== undefined);
-  const effective = effectivePickerPresentation(props.presentation, props.nativePicker);
+  const {
+    calendar,
+    presentation: effective
+  } = useCalendarPresentation('DateTimeInput', props.calendar, props.presentation, props.nativePicker);
   const locale = useLocale();
   const {
     presentation: _presentation,
@@ -1333,6 +1335,7 @@ export function DateTimeInput(props) {
   // field's resting text, preset times, and the sheet wheels agree.
   const rest = {
     ...surfaceProps,
+    calendar,
     hourFormat: resolveHourFormat(locale, props.hourFormat)
   };
   if (effective === 'native') {
@@ -1349,9 +1352,10 @@ export function DateTimeInput(props) {
         nativeMode: "adaptive"
       });
     case 'sheet':
+      // Month indexes depend on the calendar. A new calendar remounts the sheet.
       return /*#__PURE__*/_jsx(TouchDateTimeField, {
         ...rest
-      });
+      }, calendar);
     case 'desktop':
       return /*#__PURE__*/_jsx(PointerDateTimeField, {
         ...rest

package/dist/DateTimeInput/TouchDateTimeField.d.ts

@@ -1,5 +1,5 @@
 import type { DateTimeInputProps } from './DateTimeInput.js';
-export declare function TouchDateTimeField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement: _timeIncrement, timeOptionInterval: _timeOptionInterval, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths: _numberOfMonths, weekStartsOn: weekStartsOnProp, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, ...restProps }: DateTimeInputProps): import("react").JSX.Element;
+export declare function TouchDateTimeField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement: _timeIncrement, timeOptionInterval: _timeOptionInterval, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths: _numberOfMonths, weekStartsOn: weekStartsOnProp, calendar: calendarProp, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, ...restProps }: DateTimeInputProps): import("react").JSX.Element;
 export declare namespace TouchDateTimeField {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AA6S3E,wBAAgB,kBAAkB,CAAC,EACjC,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,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAk8BpB;yBAz+Be,kBAAkB"}
+{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AAyHA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AA6S3E,wBAAgB,kBAAkB,CAAC,EACjC,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,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,QAAQ,EAAE,YAAY,EACtB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BA88BpB;yBAt/Be,kBAAkB"}