@proyecto-viviana/solid-stately 0.3.0 → 0.4.1

package/src/calendar/createRangeCalendarState.ts

@@ -21,6 +21,8 @@ import {
   endOfMonth,
   startOfWeek,
   getWeeksInMonth,
+  maxDate,
+  minDate,
   DateFormatter,
   createCalendar as intlCreateCalendar,
   toCalendar as intlToCalendar,
@@ -28,6 +30,7 @@ import {
 } from "@internationalized/date";
 import { access, type MaybeAccessor } from "../utils";
 import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
+import { getFormatOptions } from "./createDateFieldState";
 
 const dayOfWeekNames: CalendarDayOfWeek[] = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
 type RangeCalendarSelectionAlignment = "start" | "center" | "end";
@@ -68,8 +71,12 @@ export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
   locale?: MaybeAccessor<string | undefined>;
   /** Creates a calendar object for a locale calendar identifier. */
   createCalendar?: (identifier: CalendarIdentifier) => InternationalizedCalendar;
-  /** Callback to determine if a date is unavailable. */
-  isDateUnavailable?: (date: DateValue) => boolean;
+  /**
+   * Callback that determines if a date is unavailable. The second argument is the
+   * current selection anchor (the first selected date), so availability can be
+   * derived from it. Mirrors @react-stately/calendar 1.18.
+   */
+  isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;
   /** The number of months to display at once. */
   visibleMonths?: MaybeAccessor<number | undefined>;
   /** Controls how the initial visible months are aligned around the current value. */
@@ -95,6 +102,10 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
   focusedDate: Accessor<CalendarDate>;
   /** Sets the focused date. */
   setFocusedDate: (date: CalendarDate) => void;
+  /** The minimum allowed date that a user may select. */
+  minValue: Accessor<DateValue | null>;
+  /** The maximum allowed date that a user may select. */
+  maxValue: Accessor<DateValue | null>;
   /** The anchor date when selecting a range (first click). */
   anchorDate: Accessor<CalendarDate | null>;
   /** Sets the anchor date. */
@@ -179,6 +190,16 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
   isDragging: Accessor<boolean>;
   /** Sets whether the user is dragging to select. */
   setDragging: (dragging: boolean) => void;
+  /**
+   * Formats the selected range as a `{ start, end }` pair of localized strings,
+   * or `null` when the range is incomplete. Mirrors upstream
+   * `DateRangePickerState.formatValue` — the port collapses that state into the
+   * range calendar state, so the range picker reads its SR description from here.
+   */
+  formatValue: (
+    locale: string,
+    fieldOptions: Intl.DateTimeFormatOptions,
+  ) => { start: string; end: string } | null;
 }
 
 /**
@@ -189,6 +210,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
 ): RangeCalendarState<T> {
   const timeZone = getLocalTimeZone();
   const locale = createMemo(() => access(props.locale) ?? "en-US");
+  const minValueState = createMemo(() => access(props.minValue) ?? null);
+  const maxValueState = createMemo(() => access(props.maxValue) ?? null);
   const resolvedOptions = createMemo(() => new DateFormatter(locale()).resolvedOptions());
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
@@ -200,17 +223,56 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const toDisplayCalendarDate = (date: DateValue): CalendarDate =>
     intlToCalendar(toCalendarDate(date), calendar());
 
+  // The anchor date is the first selected date during a range drag. Declared up
+  // here (ahead of constrainDate) because the available-range derivation below
+  // depends on it, and constrainDate consults that range.
+  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
+
+  // Mirrors @react-stately/calendar useRangeCalendarState getAvailableRange: once
+  // a range selection is anchored and unavailable dates exist, contiguous ranges
+  // are required (unless allowsNonContiguousRanges), so the selectable span is
+  // bounded by the nearest unavailable date on each side of the anchor.
+  const getAvailableRange = (
+    anchor: CalendarDate | null,
+  ): { start?: CalendarDate; end?: CalendarDate } | null => {
+    if (anchor && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+      const predicate = (date: CalendarDate): boolean => props.isDateUnavailable!(date, anchor);
+      return {
+        start: nextUnavailableDate(anchor, predicate, visibleMonths, -1),
+        end: nextUnavailableDate(anchor, predicate, visibleMonths, 1),
+      };
+    }
+    return null;
+  };
+
+  const availableRange = createMemo(() => getAvailableRange(anchorDate()));
+
+  // minValue/maxValue narrowed by the available range, in display-calendar space
+  // (what every cell/navigation bound below compares against). Mirrors upstream's
+  // maxDate(minValue, availableRange?.start) / minDate(maxValue, availableRange?.end);
+  // maxDate/minDate ignore undefined operands, so an absent bound passes through.
+  const effectiveMinValue = createMemo<CalendarDate | null>(() => {
+    const min = access(props.minValue);
+    const minCal = min != null ? toDisplayCalendarDate(min) : undefined;
+    return maxDate(minCal, availableRange()?.start) ?? null;
+  });
+  const effectiveMaxValue = createMemo<CalendarDate | null>(() => {
+    const max = access(props.maxValue);
+    const maxCal = max != null ? toDisplayCalendarDate(max) : undefined;
+    return minDate(maxCal, availableRange()?.end) ?? null;
+  });
+
   const constrainDate = (date: CalendarDate): CalendarDate => {
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
+    const min = effectiveMinValue();
+    const max = effectiveMaxValue();
 
     let constrained = date;
 
-    if (minValue && constrained.compare(toDisplayCalendarDate(minValue)) < 0) {
-      constrained = toDisplayCalendarDate(minValue);
+    if (min && constrained.compare(min) < 0) {
+      constrained = min;
     }
-    if (maxValue && constrained.compare(toDisplayCalendarDate(maxValue)) > 0) {
-      constrained = toDisplayCalendarDate(maxValue);
+    if (max && constrained.compare(max) > 0) {
+      constrained = max;
     }
 
     return constrained;
@@ -319,7 +381,6 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
-  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
   const [isFocused, setFocused] = createSignal(false);
   const [isDragging, setDragging] = createSignal(false);
 
@@ -344,7 +405,27 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
   const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
   const validationState = createMemo(() => access(props.validationState));
-  const isValueInvalid = createMemo(() => validationState() === "invalid");
+  // A committed range is invalid when (not mid-drag) either endpoint is
+  // unavailable or falls outside [minValue, maxValue]. Mirrors upstream
+  // useRangeCalendarState's isInvalid derivation. Calls props.isDateUnavailable
+  // directly (with a null anchor) rather than the closures defined further down,
+  // since this memo runs eagerly during init.
+  const isInvalidSelection = createMemo(() => {
+    const v = sourceValue();
+    if (!v || anchorDate()) return false;
+    if (props.isDateUnavailable?.(v.start, null) || props.isDateUnavailable?.(v.end, null)) {
+      return true;
+    }
+    const min = access(props.minValue);
+    const max = access(props.maxValue);
+    const minCal = min != null ? toDisplayCalendarDate(min) : null;
+    const maxCal = max != null ? toDisplayCalendarDate(max) : null;
+    return (
+      isDateOutsideRange(toDisplayCalendarDate(v.start), minCal, maxCal) ||
+      isDateOutsideRange(toDisplayCalendarDate(v.end), minCal, maxCal)
+    );
+  });
+  const isValueInvalid = createMemo(() => validationState() === "invalid" || isInvalidSelection());
 
   // Highlighted range during selection
   const highlightedRange = createMemo<RangeValue<CalendarDate> | null>(() => {
@@ -373,6 +454,23 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return { start, end: visibleRangeEndFromStart(start) };
   });
 
+  // Realign the visible range only when the focused date moves outside it,
+  // mirroring @react-stately/calendar useCalendarState (the render-time
+  // `focusedDate.compare(startDate) < 0 → alignEnd` / `compare(endDate) > 0 →
+  // alignStart` branches — focusCell itself never touches the range). Guarding
+  // on out-of-range keeps a same-month focus from re-firing visibleRangeStart
+  // with a fresh equal-valued object, which would otherwise recompute the grid
+  // and recreate every cell on focus.
+  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
+    const range = visibleRange();
+
+    if (nextFocusedDate.compare(range.start) < 0) {
+      setVisibleRangeStart(alignEnd(nextFocusedDate));
+    } else if (nextFocusedDate.compare(range.end) > 0) {
+      setVisibleRangeStart(alignStart(nextFocusedDate));
+    }
+  };
+
   createEffect(() => {
     const controlledFocused = access(props.focusedValue);
     if (!controlledFocused) {
@@ -483,8 +581,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return;
     }
 
+    syncVisibleRangeForFocusedDate(constrained);
     setFocusedDateInternal(constrained);
-    setVisibleRangeStart(alignVisibleRangeStart(constrained));
     props.onFocusChange?.(constrained);
   };
 
@@ -494,7 +592,17 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     if (!range) return false;
 
     const calDate = toDisplayCalendarDate(date);
-    return calDate.compare(range.start) >= 0 && calDate.compare(range.end) <= 0;
+    // Mirror @react-stately/calendar useRangeCalendarState isSelected: a disabled
+    // or unavailable cell is NOT reported selected, so its accessible name drops
+    // the "… selected" suffix + aria-selected (e.g. when the whole calendar is
+    // disabled). The "Selected Range: …" description prefix is separate and still
+    // applies to the range endpoints.
+    return (
+      calDate.compare(range.start) >= 0 &&
+      calDate.compare(range.end) <= 0 &&
+      !isCellDisabled(date) &&
+      !isCellUnavailable(date)
+    );
   };
 
   // Check if a date is the start of the selection
@@ -513,12 +621,18 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
 
   // Check if a date is focused
   const isCellFocused = (date: DateValue): boolean => {
-    return isSameDay(toDisplayCalendarDate(date), focusedDate());
+    // Gate on the calendar-level `isFocused` flag, mirroring @react-stately
+    // useCalendarState (`isFocused && focusedDate && isSameDay`, inherited by
+    // useRangeCalendarState). The roving tabIndex tracks `focusedDate` directly
+    // at the cell layer, so one cell stays tabbable without this being true —
+    // this drives focusSafely + the range-selection prompt, which must NOT fire
+    // until the calendar actually holds focus.
+    return isFocused() && isSameDay(toDisplayCalendarDate(date), focusedDate());
   };
 
   // Check if a date is unavailable
   const isCellUnavailable = (date: DateValue): boolean => {
-    return props.isDateUnavailable?.(date) ?? false;
+    return props.isDateUnavailable?.(date, anchorDate()) ?? false;
   };
 
   // Check if a date is disabled
@@ -526,23 +640,33 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     if (isDisabled()) return true;
     if (props.isDateDisabled?.(date)) return true;
 
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
+    const min = effectiveMinValue();
+    const max = effectiveMaxValue();
     const calDate = toDisplayCalendarDate(date);
 
-    if (minValue && calDate.compare(toDisplayCalendarDate(minValue)) < 0) return true;
-    if (maxValue && calDate.compare(toDisplayCalendarDate(maxValue)) > 0) return true;
+    // Dates outside the visible range are disabled, mirroring @react-stately
+    // useCalendarState isCellDisabled (`date.compare(startDate) < 0 ||
+    // date.compare(endDate) > 0` over the visible range, inherited by
+    // useRangeCalendarState). This marks the leading/trailing padding cells
+    // (days from adjacent months filling the first/last grid weeks) as
+    // aria-disabled.
+    const range = visibleRange();
+    if (calDate.compare(toDisplayCalendarDate(range.start)) < 0) return true;
+    if (calDate.compare(toDisplayCalendarDate(range.end)) > 0) return true;
+
+    if (min && calDate.compare(min) < 0) return true;
+    if (max && calDate.compare(max) > 0) return true;
 
     return false;
   };
 
   const isDateOutsideAllowedRange = (date: DateValue): boolean => {
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
+    const min = effectiveMinValue();
+    const max = effectiveMaxValue();
     const calDate = toDisplayCalendarDate(date);
 
-    if (minValue && calDate.compare(toDisplayCalendarDate(minValue)) < 0) return true;
-    if (maxValue && calDate.compare(toDisplayCalendarDate(maxValue)) > 0) return true;
+    if (min && calDate.compare(min) < 0) return true;
+    if (max && calDate.compare(max) > 0) return true;
 
     return false;
   };
@@ -560,14 +684,26 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   // Navigation methods
+  // Paging realigns the visible range start explicitly, mirroring
+  // @react-stately/calendar focusPreviousPage/focusNextPage (which set both
+  // focusedDate and startDate directly). This must NOT route through
+  // setFocusedDate: that only realigns the range when the focused date leaves
+  // the window, so a single-month page whose focus stays in view would never
+  // advance the grid.
   const focusPreviousPage = () => {
     const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
-    setFocusedDate(focusedDate().subtract({ months: pageMonths }));
+    const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+    setFocusedDateInternal(nextFocusedDate);
+    setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
+    props.onFocusChange?.(nextFocusedDate);
   };
 
   const focusNextPage = () => {
     const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
-    setFocusedDate(focusedDate().add({ months: pageMonths }));
+    const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+    setFocusedDateInternal(nextFocusedDate);
+    setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
+    props.onFocusChange?.(nextFocusedDate);
   };
 
   const focusPreviousSection = () => {
@@ -621,26 +757,51 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   const selectDate = (date: CalendarDate) => {
+    // Mirror @react-stately/calendar useRangeCalendarState.selectDate: NO
+    // isCellDisabled/isCellUnavailable guard here. Upstream gates selection at
+    // the cell layer (createRangeCalendarCell handlePointerDown/handleClick check
+    // isSelectable before calling selectDate); the state method itself constrains
+    // to [minValue, maxValue] (narrowed by the available range) and walks back
+    // over unavailable dates, refusing only when no available date remains — and
+    // when the whole calendar is disabled/readOnly. Double-guarding on
+    // isCellDisabled also broke programmatic selection of dates outside the
+    // current visible range (now that isCellDisabled bounds on the visible range,
+    // like upstream useCalendarState).
     if (isReadOnly() || isDisabled()) return;
-    if (isCellDisabled(date) || isCellUnavailable(date)) return;
+
+    // constrainDate == upstream constrainValue(date, min, max): clamp into the
+    // (available-range-narrowed) [minValue, maxValue] interval.
+    const constrainedDate = constrainDate(date);
+    // Availability is evaluated relative to the current anchor, matching
+    // isCellUnavailable, then previousAvailableDate walks back to the last
+    // available date at/before the constrained date within the visible range.
+    const predicate = props.isDateUnavailable
+      ? (d: CalendarDate) => props.isDateUnavailable!(d, anchorDate())
+      : undefined;
+    const selectableDate = previousAvailableDate(
+      constrainedDate,
+      toDisplayCalendarDate(visibleRange().start),
+      predicate,
+    );
+    if (!selectableDate) return;
 
     const anchor = anchorDate();
 
     if (!anchor) {
       // First click - set anchor
-      setAnchorDate(date);
+      setAnchorDate(selectableDate);
       setDragging(true);
     } else {
       // Second click - complete selection
       let start: CalendarDate;
       let end: CalendarDate;
 
-      if (date.compare(anchor) < 0) {
-        start = date;
+      if (selectableDate.compare(anchor) < 0) {
+        start = selectableDate;
         end = anchor;
       } else {
         start = anchor;
-        end = date;
+        end = selectableDate;
       }
 
       setValue({
@@ -651,7 +812,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       setDragging(false);
     }
 
-    setFocusedDate(date);
+    setFocusedDate(selectableDate);
   };
 
   // Get dates in a specific week
@@ -681,6 +842,89 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return getWeeksInMonth(monthDate, locale(), firstDayOfWeekName());
   };
 
+  // Format the selected range as `{ start, end }` strings. Faithful port of
+  // @react-stately/datepicker `useDateRangePickerState.formatValue`: when both
+  // endpoints share timezone + granularity and are distinct, it uses
+  // `formatRangeToParts` to split at the last shared literal so shared fields
+  // (e.g. the month/year) render once (=> "February 3" / "14, 2025").
+  const formatValue = (
+    locale2: string,
+    fieldOptions: Intl.DateTimeFormatOptions,
+  ): { start: string; end: string } | null => {
+    const v = value();
+    if (!v || !v.start || !v.end) {
+      return null;
+    }
+
+    const start = v.start as unknown as DateValue;
+    const end = v.end as unknown as DateValue;
+    const startTimeZone = "timeZone" in start ? (start as { timeZone: string }).timeZone : undefined;
+    const startGranularity = "minute" in start ? "minute" : "day";
+    const endTimeZone = "timeZone" in end ? (end as { timeZone: string }).timeZone : undefined;
+    const endGranularity = "minute" in end ? "minute" : "day";
+
+    const startOptions = getFormatOptions(fieldOptions, {
+      granularity: startGranularity,
+      timeZone: startTimeZone,
+      showEra:
+        (start.calendar.identifier === "gregory" && (start as { era: string }).era === "BC") ||
+        (end.calendar.identifier === "gregory" && (end as { era: string }).era === "BC"),
+    });
+
+    const startDate = start.toDate(startTimeZone || "UTC");
+    const endDate = end.toDate(endTimeZone || "UTC");
+
+    const startFormatter = new DateFormatter(locale2, startOptions);
+    let endFormatter: DateFormatter;
+    if (
+      startTimeZone === endTimeZone &&
+      startGranularity === endGranularity &&
+      start.compare(end) !== 0
+    ) {
+      // Use formatRange, as it results in shorter output when some of the fields
+      // are shared between the start and end dates (e.g. the same month).
+      try {
+        const parts = startFormatter.formatRangeToParts(startDate, endDate);
+
+        // Find the separator between the start and end date: the last shared
+        // literal before the end range begins.
+        let separatorIndex = -1;
+        for (let i = 0; i < parts.length; i++) {
+          const part = parts[i];
+          if (part.source === "shared" && part.type === "literal") {
+            separatorIndex = i;
+          } else if (part.source === "endRange") {
+            break;
+          }
+        }
+
+        let startStr = "";
+        let endStr = "";
+        for (let i = 0; i < parts.length; i++) {
+          if (i < separatorIndex) startStr += parts[i].value;
+          else if (i > separatorIndex) endStr += parts[i].value;
+        }
+
+        return { start: startStr, end: endStr };
+      } catch {
+        // ignore — fall through to per-endpoint formatting
+      }
+
+      endFormatter = startFormatter;
+    } else {
+      const endOptions = getFormatOptions(fieldOptions, {
+        granularity: endGranularity,
+        timeZone: endTimeZone,
+      });
+      endFormatter = new DateFormatter(locale2, endOptions);
+    }
+
+    return {
+      start: startFormatter.format(startDate),
+      end: endFormatter.format(endDate),
+    };
+  };
+
   return {
     value,
     setValue,
@@ -694,6 +938,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     visibleRange,
     timeZone,
     locale,
+    minValue: minValueState,
+    maxValue: maxValueState,
     firstDayOfWeek: firstDayOfWeekName,
     validationState,
     isValueInvalid,
@@ -728,6 +974,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     visibleMonths,
     isDragging,
     setDragging,
+    formatValue,
   };
 }
 
@@ -747,3 +994,69 @@ function convertValue(newValue: CalendarDate, oldValue?: DateValue | null): Date
 
   return localValue;
 }
+
+/** Whether a date falls outside the closed [minValue, maxValue] interval. */
+function isDateOutsideRange(
+  date: CalendarDate,
+  minValue?: CalendarDate | null,
+  maxValue?: CalendarDate | null,
+): boolean {
+  return (
+    (minValue != null && date.compare(minValue) < 0) ||
+    (maxValue != null && date.compare(maxValue) > 0)
+  );
+}
+
+/**
+ * Walks backward from `date` one day at a time while the date is unavailable and
+ * still at/after `minValue` (the visible-range start), returning the last
+ * available date — or null when the walk falls before `minValue`. With no
+ * `isDateUnavailable` predicate the date is returned unchanged. Mirrors
+ * @react-stately/calendar previousAvailableDate.
+ */
+function previousAvailableDate(
+  date: CalendarDate,
+  minValue: CalendarDate,
+  isDateUnavailable?: (date: CalendarDate) => boolean,
+): CalendarDate | null {
+  if (!isDateUnavailable) {
+    return date;
+  }
+
+  while (date.compare(minValue) >= 0 && isDateUnavailable(date)) {
+    date = date.subtract({ days: 1 });
+  }
+
+  if (date.compare(minValue) >= 0) {
+    return date;
+  }
+  return null;
+}
+
+/**
+ * Walks outward from the anchor one day at a time in `dir` until it reaches an
+ * unavailable date, then returns the last available date before it — or
+ * undefined when no unavailable date is found within `visibleMonths` of the
+ * anchor (no narrowing needed on that side). Mirrors @react-stately/calendar
+ * nextUnavailableDate.
+ */
+function nextUnavailableDate(
+  anchorDate: CalendarDate,
+  isDateUnavailable: (date: CalendarDate) => boolean,
+  visibleMonths: number,
+  dir: number,
+): CalendarDate | undefined {
+  let nextDate = anchorDate.add({ days: dir });
+  const minBound = anchorDate.subtract({ months: visibleMonths });
+  const maxBound = anchorDate.add({ months: visibleMonths });
+  while (
+    (dir < 0 ? nextDate.compare(minBound) >= 0 : nextDate.compare(maxBound) <= 0) &&
+    !isDateUnavailable(nextDate)
+  ) {
+    nextDate = nextDate.add({ days: dir });
+  }
+  if (isDateUnavailable(nextDate)) {
+    return nextDate.add({ days: -dir });
+  }
+  return undefined;
+}