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

package/src/DateInput/MonthScroller.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file MonthScroller.tsx
- * @input Month bounds, selected value, constraints, week start
+ * @input A calendar's month model, month bounds, selected value, constraints,
+ *   week start
  * @output Exports MonthScroller and MonthScrollerHandle
  * @position Internal component; consumed by TouchDateField.tsx
  *
@@ -36,12 +37,14 @@ import {
   useImperativeHandle,
   useLayoutEffect,
   useRef,
+  useMemo,
   useState,
 } from 'react';
 import {flushSync} from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
-import {useCalendarDays} from '../Calendar';
-import {useDirection, useLocale} from '../i18n';
+import {useCalendarDays} from '../Calendar/hooks/useCalendarDays';
+import {useDirection} from '../i18n/useDirection';
+import {useLocale} from '../i18n/useLocale';
 import {
   colorVars,
   radiusVars,
@@ -50,33 +53,32 @@ import {
   durationVars,
   borderVars,
 } from '../theme/tokens.stylex';
-import {focusOutlineStyles} from '../utils';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import type {DayOfWeek, ISODateString, PlainDate} from '../utils/dateTypes';
 import {
-  plainDateFormatDayNumber,
-  plainDateFormatStandaloneMonthYear,
-} from '../utils/plainDate';
-import {
-  type DayOfWeek,
-  type ISODateString,
-  type PlainDate,
   plainDateAddDays,
   plainDateDayOfWeek,
-  plainDateFormat,
+  plainDateFormatDayNumber,
   plainDateIsEqual,
   plainDateToISO,
   DATE_FORMAT_WITH_WEEKDAY,
-} from '../utils';
+} from '../utils/plainDate';
 import {
   playReducedMotionDip,
   reducedMotionFade,
   type ReducedMotionDip,
 } from '../motion/reducedMotion';
+import {
+  calendarYearMonthOf,
+  formatCalendarDate,
+  formatCalendarMonthLabel,
+  isInCalendarMonth,
+} from '../utils/calendarSystem';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {useScrollSettle} from './useScrollSettle';
 import {
-  fromMonthIndex,
-  monthIndexOf,
+  type MonthModel,
   paneWindow,
   rowAtScrollOffset,
   rowsIn,
@@ -286,6 +288,8 @@ export interface MonthScrollerHandle {
 export interface MonthScrollerProps {
   /** Imperative handle for programmatic navigation (Today, the wheels). */
   handleRef?: React.RefObject<MonthScrollerHandle | null>;
+  /** The calendar's months, by index. */
+  monthModel: MonthModel;
   /** First reachable month, as a month index. */
   minMonthIndex: number;
   /** Last reachable month, as a month index. */
@@ -311,6 +315,7 @@ export interface MonthScrollerProps {
  */
 export function MonthScroller({
   handleRef,
+  monthModel,
   minMonthIndex,
   maxMonthIndex,
   initialMonthIndex,
@@ -763,17 +768,17 @@ export function MonthScroller({
   const moveFocus = useCallback(
     (from: PlainDate, deltaDays: number) => {
       const next = plainDateAddDays(from, deltaDays);
-      const nextIndex = monthIndexOf(next);
+      const nextIndex = monthModel.indexOf(next);
       if (nextIndex < minMonthIndex || nextIndex > maxMonthIndex) {
         return;
       }
       shouldRestoreFocusRef.current = true;
       setFocusedDate(next);
-      if (nextIndex !== monthIndexOf(from)) {
+      if (nextIndex !== monthModel.indexOf(from)) {
         scrollToMonth(nextIndex, 'smooth');
       }
     },
-    [minMonthIndex, maxMonthIndex, scrollToMonth],
+    [monthModel, minMonthIndex, maxMonthIndex, scrollToMonth],
   );
 
   const handleKeyDown = useCallback(
@@ -861,6 +866,7 @@ export function MonthScroller({
           rowsIn(visibleRows).map(row => (
             <MonthPane
               key={row}
+              monthModel={monthModel}
               monthIndex={minMonthIndex + row}
               insetInlineStart={row * paneSize}
               inlineSize={paneSize}
@@ -882,6 +888,7 @@ export function MonthScroller({
 MonthScroller.displayName = 'MonthScroller';
 
 interface MonthPaneProps {
+  monthModel: MonthModel;
   monthIndex: number;
   insetInlineStart: number;
   inlineSize: number;
@@ -903,6 +910,7 @@ interface MonthPaneProps {
  * so each day instead carries its weekday in its accessible name.
  */
 function MonthPane({
+  monthModel,
   monthIndex,
   insetInlineStart,
   inlineSize,
@@ -916,40 +924,33 @@ function MonthPane({
   onDayFocus,
 }: MonthPaneProps) {
   const locale = useLocale();
-  const {year, month} = fromMonthIndex(monthIndex);
+  const {calendar} = monthModel;
+  const month = useMemo(
+    () => monthModel.monthAt(monthIndex),
+    [monthModel, monthIndex],
+  );
   const {weeks} = useCalendarDays({
-    year,
-    month,
+    ...calendarYearMonthOf(calendar, month),
+    calendar,
     weekStartsOn,
     // Always six rows: a variable grid would make pane heights differ, and
     // with them every snap offset below this month.
     hasVariableRowCount: false,
   });
 
-  const monthLabel = plainDateFormatStandaloneMonthYear(
-    {year, month, day: 1},
-    locale,
-  );
+  const monthLabel = formatCalendarMonthLabel(calendar, month, locale);
 
   // Exactly one day per pane is tab-reachable, so Tab moves through the
   // picker rather than through 42 buttons: the focused day if the keyboard
   // owns one, else the selection, else the first of the month.
   const tabbableISO = (() => {
-    if (
-      focusedDate != null &&
-      focusedDate.year === year &&
-      focusedDate.month === month
-    ) {
+    if (focusedDate != null && isInCalendarMonth(focusedDate, month)) {
       return plainDateToISO(focusedDate);
     }
-    if (
-      selectedDate != null &&
-      selectedDate.year === year &&
-      selectedDate.month === month
-    ) {
+    if (selectedDate != null && isInCalendarMonth(selectedDate, month)) {
       return plainDateToISO(selectedDate);
     }
-    return plainDateToISO({year, month, day: 1});
+    return plainDateToISO(month.start);
   })();
 
   return (
@@ -987,7 +988,8 @@ function MonthPane({
                   data-date={day.iso}
                   data-outside={day.isOutside ? '' : undefined}
                   tabIndex={day.iso === tabbableISO ? 0 : -1}
-                  aria-label={plainDateFormat(
+                  aria-label={formatCalendarDate(
+                    calendar,
                     day.date,
                     DATE_FORMAT_WITH_WEEKDAY,
                     locale,

package/src/DateInput/MonthYearWheels.tsx

@@ -4,8 +4,10 @@
 
 /**
  * @file MonthYearWheels.tsx
- * @input A month index, the reachable month bounds, a change callback
- * @output Exports MonthYearWheels — the month + year wheel pair
+ * @input A calendar's month model, a month index, the reachable month bounds,
+ *   a change callback
+ * @output Exports MonthYearWheels — the month wheel of a calendar year and the
+ *   year wheel with era labels
  * @position Internal component; consumed by TouchDateField.tsx
  *
  * The shortcut out of continuous scrolling. Scrolling is the right gesture for
@@ -24,12 +26,16 @@
 
 import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {useLocale} from '../i18n';
-import {DATE_FORMAT_MONTH_ONLY, plainDateFormat} from '../utils';
+import {useLocale} from '../i18n/useLocale';
+import {
+  calendarYearSpansEras,
+  formatCalendarMonthName,
+  formatCalendarYearLabel,
+} from '../utils/calendarSystem';
 import {spacingVars} from '../theme/tokens.stylex';
 import {dateInputTouchGeometry} from './tokens.stylex';
 import {Wheel, type WheelOption} from './Wheel';
-import {fromMonthIndex, toMonthIndex} from './monthGeometry';
+import {clampIndex, type MonthModel} from './monthGeometry';
 
 const styles = stylex.create({
   wheels: {
@@ -40,6 +46,8 @@ const styles = stylex.create({
 });
 
 export interface MonthYearWheelsProps {
+  /** The calendar's months, by index. */
+  monthModel: MonthModel;
   /** The month the wheels currently show. */
   monthIndex: number;
   /** First reachable month. */
@@ -54,12 +62,19 @@ export interface MonthYearWheelsProps {
   yearLabel: string;
   /** False while the panel is hidden. */
   isActive?: boolean;
+  /**
+   * The day of the month the picker keeps, such as the selected date's. A year
+   * that spans an era change is labeled with the era of this day in the
+   * selected month. The first day of the month applies when it is absent.
+   */
+  keptDay?: number;
 }
 
 /**
  * Month and year wheels, bounded by the same range as the scroller.
  */
 export function MonthYearWheels({
+  monthModel,
   monthIndex,
   minMonthIndex,
   maxMonthIndex,
@@ -67,60 +82,63 @@ export function MonthYearWheels({
   monthLabel,
   yearLabel,
   isActive = true,
+  keptDay = 1,
 }: MonthYearWheelsProps) {
   const locale = useLocale();
-  const {year, month} = fromMonthIndex(monthIndex);
-
-  // Day 15 of a fixed year: no timezone can push it into an adjacent month
-  // the way day 1 or day 31 can.
-  //
-  // `plainDateFormat` rather than a raw `Intl.DateTimeFormat`, which the
-  // shared lint rule forbids and which would duplicate the format vocabulary
-  // besides. Recompute when the provider locale changes so the wheel labels
-  // stay in sync with the field and calendar.
-  const monthNames = useMemo(
-    () =>
-      Array.from({length: 12}, (_, index) =>
-        plainDateFormat(
-          {year: 2021, month: index + 1, day: 15},
-          DATE_FORMAT_MONTH_ONLY,
-          locale,
-        ),
-      ),
-    [locale],
-  );
+  const {calendar} = monthModel;
+  const {year, month} = monthModel.yearMonthAt(monthIndex);
 
   // Months outside the range stay on the wheel rather than vanishing: a list
-  // whose length changes with the year would jump under the finger.
+  // whose length changed with the range would jump under the finger. Only the
+  // calendar changes its length, for a year with a leap month.
   const monthOptions: WheelOption[] = useMemo(
     () =>
-      monthNames.map((name, index) => {
-        const candidate = toMonthIndex(year, index + 1);
+      Array.from({length: monthModel.monthsInYear(year)}, (_, index) => {
+        const candidate = monthModel.indexOfYearMonth(year, index + 1);
         return {
           value: index + 1,
-          label: name,
+          label: formatCalendarMonthName(
+            calendar,
+            monthModel.monthAt(candidate),
+            locale,
+          ),
           isDisabled: candidate < minMonthIndex || candidate > maxMonthIndex,
         };
       }),
-    [monthNames, year, minMonthIndex, maxMonthIndex],
+    [monthModel, calendar, year, locale, minMonthIndex, maxMonthIndex],
   );
 
-  const yearOptions: WheelOption[] = useMemo(() => {
-    const first = fromMonthIndex(minMonthIndex).year;
-    const last = fromMonthIndex(maxMonthIndex).year;
-    const options: WheelOption[] = [];
+  // Every listed year holds a reachable month: the list runs from the year of
+  // the first reachable month to the year of the last.
+  const years = useMemo(() => {
+    const first = monthModel.yearMonthAt(minMonthIndex).year;
+    const last = monthModel.yearMonthAt(maxMonthIndex).year;
+    const result: {value: number; label: string; spansEras: boolean}[] = [];
     for (let candidate = first; candidate <= last; candidate++) {
-      options.push({
+      result.push({
         value: candidate,
-        label: String(candidate),
-        // A year is reachable when any of its months is.
-        isDisabled:
-          toMonthIndex(candidate, 12) < minMonthIndex ||
-          toMonthIndex(candidate, 1) > maxMonthIndex,
+        label: formatCalendarYearLabel(calendar, candidate, locale),
+        spansEras: calendarYearSpansEras(calendar, candidate, locale),
       });
     }
-    return options;
-  }, [minMonthIndex, maxMonthIndex]);
+    return result;
+  }, [monthModel, calendar, locale, minMonthIndex, maxMonthIndex]);
+
+  // A year with an era change takes the era of the shown date, as iOS does.
+  // Its row text changes as the month turns. Each row keeps one fixed size.
+  const yearOptions: WheelOption[] = useMemo(
+    () =>
+      years.map(({value, label, spansEras}) => ({
+        value,
+        label: spansEras
+          ? formatCalendarYearLabel(calendar, value, locale, {
+              month,
+              day: keptDay,
+            })
+          : label,
+      })),
+    [years, calendar, locale, month, keptDay],
+  );
 
   return (
     <div {...stylex.props(styles.wheels)}>
@@ -129,7 +147,9 @@ export function MonthYearWheels({
         options={monthOptions}
         value={month}
         isActive={isActive}
-        onChange={nextMonth => onChange(toMonthIndex(year, nextMonth))}
+        onChange={nextMonth =>
+          onChange(monthModel.indexOfYearMonth(year, nextMonth))
+        }
       />
       <Wheel
         label={yearLabel}
@@ -137,10 +157,11 @@ export function MonthYearWheels({
         value={year}
         isActive={isActive}
         onChange={nextYear => {
-          // Jan 31 -> Feb has no equivalent here (months carry no day), but a
-          // year change can still land outside the range; clamp to it.
-          const candidate = toMonthIndex(nextYear, month);
-          onChange(Math.min(Math.max(candidate, minMonthIndex), maxMonthIndex));
+          // The same month of the new year, or its common counterpart when
+          // the new year lacks a leap month (Adar I becomes Adar). A year
+          // change can still land outside the range; clamp to it.
+          const candidate = monthModel.shiftYears(monthIndex, nextYear - year);
+          onChange(clampIndex(candidate, minMonthIndex, maxMonthIndex));
         }}
       />
     </div>

package/src/DateInput/PickerWheel.tsx

@@ -73,6 +73,12 @@ const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
 /** UIKit's rubber band dimension for the picker's table, at that pitch. */
 const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
 
+/**
+ * The rows' opacity at the column's edges. At 0.7 the row four from the band
+ * keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
+ */
+const FADE_FLOOR = 0.7;
+
 const styles = stylex.create({
   // The scrolling column's box, band and rows (Wheel.tsx), moved by the
   // gesture system and the compositor instead of a native scroller.
@@ -92,8 +98,7 @@ const styles = stylex.create({
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
-    maskImage:
-      'linear-gradient(to bottom, rgb(0 0 0 / 0.3), rgb(0 0 0) 50%, rgb(0 0 0 / 0.3))',
+    maskImage: `linear-gradient(to bottom, rgb(0 0 0 / ${FADE_FLOOR}), rgb(0 0 0) 50%, rgb(0 0 0 / ${FADE_FLOOR}))`,
   },
   /**
    * The selection band: a centred row-height plate behind the rows.

package/src/DateInput/TouchDateField.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file TouchDateField.tsx
- * @input Uses React, Field, BottomSheet, Button, Icon, Calendar hooks, MonthScroller, MonthYearWheels
+ * @input Uses React, Field, BottomSheet, Button, Icon, Calendar hooks, the resolved calendar, MonthScroller, MonthYearWheels
  * @output Exports TouchDateField — the touch surface behind DateInput
  * @position Internal component; consumed by DateInput.tsx
  *
@@ -105,12 +105,16 @@ import {
   mergeProps,
   rtlStyles,
   themeProps,
-  formatSharedDate,
   plainDateFromISO,
   plainDateToday,
   type ISODateString,
 } from '../utils';
-import {plainDateFormatStandaloneMonthYear} from '../utils/plainDate';
+import {useCalendarSystem} from '../i18n/useCalendarSystem';
+import {
+  calendarDayOfMonth,
+  formatCalendarMonthLabel,
+} from '../utils/calendarSystem';
+import {formatCalendarDateText} from '../utils/calendarDateParser';
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
@@ -121,8 +125,7 @@ import {MonthYearWheels} from './MonthYearWheels';
 import {
   DEFAULT_MONTH_REACH,
   clampIndex,
-  fromMonthIndex,
-  monthIndexOf,
+  createMonthModel,
 } from './monthGeometry';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {
@@ -581,6 +584,7 @@ export function TouchDateField({
   numberOfMonths: _numberOfMonths,
   weekStartsOn: weekStartsOnProp = 0,
   format = 'date_long',
+  calendar: calendarProp,
   width,
   containerXstyle,
   containerClassName,
@@ -612,6 +616,8 @@ export function TouchDateField({
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+  const calendar = useCalendarSystem(calendarProp, 'DateInput');
+  const monthModel = useMemo(() => createMonthModel(calendar), [calendar]);
 
   const generatedID = useId();
   const id = idProp ?? generatedID;
@@ -698,8 +704,10 @@ export function TouchDateField({
   // century in each direction from wherever it opened. Anchored once, in a
   // state initializer: recomputing it as the selection moves would shift every
   // pane's scroll offset under the user mid-gesture.
+  // Indexes belong to the calendar, so DateInput remounts this surface when
+  // the calendar changes.
   const [anchorMonthIndex] = useState(() =>
-    monthIndexOf(
+    monthModel.indexOf(
       value != null && /^\d{4}-\d{2}-\d{2}$/.test(value)
         ? plainDateFromISO(value)
         : plainDateToday(),
@@ -707,36 +715,45 @@ export function TouchDateField({
   );
   const minMonthIndex =
     min != null
-      ? monthIndexOf(plainDateFromISO(min))
+      ? monthModel.indexOf(plainDateFromISO(min))
       : anchorMonthIndex - DEFAULT_MONTH_REACH;
   const maxMonthIndex =
     max != null
-      ? monthIndexOf(plainDateFromISO(max))
+      ? monthModel.indexOf(plainDateFromISO(max))
       : anchorMonthIndex + DEFAULT_MONTH_REACH;
 
   const [monthIndex, setMonthIndex] = useState(() =>
     clampIndex(anchorMonthIndex, minMonthIndex, maxMonthIndex),
   );
 
-  const {year, month} = fromMonthIndex(monthIndex);
-
   const weekdayHeaders = useMemo(
     () => getWeekdayHeaders(locale, weekStartsOn),
     [locale, weekStartsOn],
   );
-  const monthYearLabel = plainDateFormatStandaloneMonthYear(
-    {year, month, day: 1},
+  // The day the picker keeps: the selected date's day of its month. A month
+  // with an era change takes its heading era from this day.
+  const keptDay =
+    selectedDate == null ? 1 : calendarDayOfMonth(calendar, selectedDate);
+  const monthYearLabel = formatCalendarMonthLabel(
+    calendar,
+    monthModel.monthAt(monthIndex),
     locale,
+    keptDay,
   );
 
   // Formats the committed value only. A function format is called with the ISO
-  // value; a named one reuses Timestamp's shared date mapping, so the same
-  // literal renders the same shape here and on the desktop control.
+  // value; a named one writes the date in the calendar exactly as the desktop
+  // control commits it.
   const displayValue =
     optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue)
       ? typeof format === 'function'
         ? format(optimisticValue)
-        : formatSharedDate(plainDateFromISO(optimisticValue), format, locale)
+        : formatCalendarDateText(
+            plainDateFromISO(optimisticValue),
+            format,
+            locale,
+            calendar,
+          )
       : '';
 
   const fireChange = useCallback(
@@ -822,7 +839,7 @@ export function TouchDateField({
       return;
     }
     fireChange(undefined);
-    const currentMonth = monthIndexOf(today);
+    const currentMonth = monthModel.indexOf(today);
     if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
       return;
     }
@@ -831,7 +848,15 @@ export function TouchDateField({
     }
     setMonthIndex(currentMonth);
     scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
-  }, [isDisabled, fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+  }, [
+    isDisabled,
+    fireChange,
+    monthModel,
+    today,
+    monthIndex,
+    minMonthIndex,
+    maxMonthIndex,
+  ]);
 
   // Selection commits on the tap and leaves the sheet up, so a mistake can be
   // corrected in place and a nearby date reconsidered without reopening.
@@ -1104,6 +1129,7 @@ export function TouchDateField({
           <MonthScroller
             key={`${minMonthIndex}:${maxMonthIndex}`}
             handleRef={scrollerHandleRef}
+            monthModel={monthModel}
             minMonthIndex={minMonthIndex}
             maxMonthIndex={maxMonthIndex}
             initialMonthIndex={monthIndex}
@@ -1124,7 +1150,9 @@ export function TouchDateField({
             !isWheelOpen && styles.panelOverlayHidden,
           )}>
           <MonthYearWheels
+            monthModel={monthModel}
             monthIndex={monthIndex}
+            keptDay={keptDay}
             minMonthIndex={minMonthIndex}
             maxMonthIndex={maxMonthIndex}
             onChange={handleWheelChange}