@proyecto-viviana/solid-stately 0.4.0 → 0.5.0

package/src/calendar/createRangeCalendarState.ts

@@ -30,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";
@@ -189,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;
 }
 
 /**
@@ -443,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) {
@@ -553,8 +581,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return;
     }
 
+    syncVisibleRangeForFocusedDate(constrained);
     setFocusedDateInternal(constrained);
-    setVisibleRangeStart(alignVisibleRangeStart(constrained));
     props.onFocusChange?.(constrained);
   };
 
@@ -564,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
@@ -583,7 +621,13 @@ 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
@@ -600,6 +644,16 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     const max = effectiveMaxValue();
     const calDate = toDisplayCalendarDate(date);
 
+    // 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;
 
@@ -630,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 = () => {
@@ -691,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({
@@ -721,7 +812,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       setDragging(false);
     }
 
-    setFocusedDate(date);
+    setFocusedDate(selectableDate);
   };
 
   // Get dates in a specific week
@@ -751,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,
@@ -800,6 +974,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     visibleMonths,
     isDragging,
     setDragging,
+    formatValue,
   };
 }
 
@@ -832,6 +1007,32 @@ function isDateOutsideRange(
   );
 }
 
+/**
+ * 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