@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/calendar/createCalendarState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useCalendarState.ts
+
 /**
  * CalendarState for Solid-Stately
  *
@@ -5,7 +19,8 @@
  * Based on @react-stately/calendar useCalendarState
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type Calendar as InternationalizedCalendar,
   type CalendarDate,
@@ -25,8 +40,9 @@ import {
   createCalendar as intlCreateCalendar,
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
+  minDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, propsAccessor, readNow, type MaybeAccessor } from "../utils";
 
 export type ValidationState = "valid" | "invalid";
 export type CalendarPageBehavior = "single" | "visible";
@@ -75,7 +91,7 @@ export interface CalendarStateProps<
   /** Callback that is called for each date in the calendar to determine if it is unavailable. */
   isDateUnavailable?: (date: DateValue) => boolean;
   /** The number of months to display at once. */
-  visibleMonths?: number;
+  visibleMonths?: MaybeAccessor<number | undefined>;
   /** Controls whether paging advances by one month or by the visible month range. */
   pageBehavior?: CalendarPageBehavior;
   /** Determines how the visible months align around the initial focused date. */
@@ -86,6 +102,8 @@ export interface CalendarStateProps<
   isDateDisabled?: (date: DateValue) => boolean;
   /** Validation state. */
   validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Whether the current selection is invalid according to application logic. */
+  isInvalid?: boolean;
   /** Error message. */
   errorMessage?: string;
   /** The first day of the week (0 = Sunday, 1 = Monday, etc.). */
@@ -138,6 +156,10 @@ export interface CalendarState<
   isOutsideVisibleRange: (date: DateValue) => boolean;
   /** Whether a date is invalid. */
   isInvalid: (date: DateValue) => boolean;
+  /** Whether the previous page is entirely outside min/max. */
+  isPreviousVisibleRangeInvalid: () => boolean;
+  /** Whether the next page is entirely outside min/max. */
+  isNextVisibleRangeInvalid: () => boolean;
   /** Moves focus to the previous page (month). */
   focusPreviousPage: () => void;
   /** Moves focus to the next page (month). */
@@ -186,21 +208,28 @@ export interface CalendarState<
 export function createCalendarState<
   T extends DateValue = CalendarDate,
   M extends CalendarSelectionMode = "single",
->(props: CalendarStateProps<T, M> = {}): CalendarState<T, M> {
+>(props: MaybeAccessor<CalendarStateProps<T, M>> = {}): CalendarState<T, M> {
+  const getProps = propsAccessor(props);
   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 locale = createMemo(() => access(getProps().locale) ?? "en-US");
+  const minValueState = createMemo(() => access(getProps().minValue) ?? null);
+  const maxValueState = createMemo(() => access(getProps().maxValue) ?? null);
   const selectionMode = createMemo<CalendarSelectionMode>(
-    () => access(props.selectionMode) ?? "single",
+    () => access(getProps().selectionMode) ?? "single",
   );
   const resolvedOptions = createMemo(() => new DateFormatter(locale()).resolvedOptions());
   const calendar = createMemo(() =>
-    (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
+    (getProps().createCalendar ?? intlCreateCalendar)(
+      resolvedOptions().calendar as CalendarIdentifier,
+    ),
+  );
+  const visibleMonths = createMemo(() =>
+    Math.max(1, Number(access(getProps().visibleMonths) ?? 1)),
   );
-  const visibleMonths = props.visibleMonths ?? 1;
-  const firstDayOfWeekName = (): CalendarDayOfWeek | undefined =>
-    props.firstDayOfWeek == null ? undefined : dayOfWeekNames[props.firstDayOfWeek];
+  const firstDayOfWeekName = (): CalendarDayOfWeek | undefined => {
+    const firstDayOfWeek = getProps().firstDayOfWeek;
+    return firstDayOfWeek == null ? undefined : dayOfWeekNames[firstDayOfWeek];
+  };
 
   const toDisplayCalendarDate = (date: DateValue): CalendarDate =>
     intlToCalendar(toCalendarDate(date), calendar());
@@ -208,15 +237,15 @@ export function createCalendarState<
   const selectionAlignmentOffset = (): number => {
     // Mirrors @react-stately/calendar useCalendarState, where selectionAlignment
     // defaults to "center" (alignCenter) when not provided.
-    switch (props.selectionAlignment) {
+    switch (getProps().selectionAlignment) {
       case "start":
         return 0;
       case "end":
-        return Math.max(visibleMonths - 1, 0);
+        return Math.max(visibleMonths() - 1, 0);
       case "center":
       default: {
-        let halfDuration = Math.floor(visibleMonths / 2);
-        if (halfDuration > 0 && visibleMonths % 2 === 0) {
+        let halfDuration = Math.floor(visibleMonths() / 2);
+        if (halfDuration > 0 && visibleMonths() % 2 === 0) {
           halfDuration--;
         }
         return halfDuration;
@@ -224,15 +253,50 @@ export function createCalendarState<
     }
   };
 
+  const rawAlignStart = (date: CalendarDate): CalendarDate => startOfMonth(date);
+
+  const rawAlignEnd = (date: CalendarDate, months: number): CalendarDate =>
+    startOfMonth(date).subtract({ months: Math.max(months - 1, 0) });
+
+  // Month-duration constrainStart. The focused date only gates the clamp.
+  // alignStart(min) and alignEnd(max) take no min/max of their own. Compare
+  // instead of maxDate/minDate so a cross-calendar null is not introduced.
+  const constrainVisibleRangeStart = (
+    date: CalendarDate,
+    aligned: CalendarDate,
+    months: number,
+  ): CalendarDate => {
+    const minValue = access(getProps().minValue);
+    const maxValue = access(getProps().maxValue);
+    let constrained = aligned;
+
+    if (minValue && date.compare(toDisplayCalendarDate(minValue)) >= 0) {
+      const minStart = rawAlignStart(toDisplayCalendarDate(minValue));
+      if (minStart.compare(constrained) > 0) {
+        constrained = minStart;
+      }
+    }
+
+    if (maxValue && date.compare(toDisplayCalendarDate(maxValue)) <= 0) {
+      const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue), months);
+      if (maxStart.compare(constrained) < 0) {
+        constrained = maxStart;
+      }
+    }
+
+    return constrained;
+  };
+
   const alignVisibleRangeStart = (date: CalendarDate): CalendarDate => {
     const offset = selectionAlignmentOffset();
-    return startOfMonth(offset > 0 ? date.subtract({ months: offset }) : date);
+    const aligned = rawAlignStart(offset > 0 ? date.subtract({ months: offset }) : date);
+    return constrainVisibleRangeStart(date, aligned, visibleMonths());
   };
 
   const visibleRangeEnd = (start: CalendarDate): CalendarDate => {
     let end = endOfMonth(start);
 
-    for (let i = 1; i < visibleMonths; i++) {
+    for (let i = 1; i < visibleMonths(); i++) {
       end = endOfMonth(end.add({ months: 1 }));
     }
 
@@ -240,8 +304,8 @@ export function createCalendarState<
   };
 
   const constrainDate = (date: CalendarDate): CalendarDate => {
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
+    const minValue = access(getProps().minValue);
+    const maxValue = access(getProps().maxValue);
 
     let constrained = date;
 
@@ -257,45 +321,51 @@ export function createCalendarState<
 
   // Determine the initially focused date
   const getInitialFocusedDate = (): CalendarDate => {
-    const controlledFocused = access(props.focusedValue);
+    const controlledFocused = access(getProps().focusedValue);
     if (controlledFocused) {
       return toDisplayCalendarDate(controlledFocused);
     }
-    if (props.defaultFocusedValue) {
-      return toDisplayCalendarDate(props.defaultFocusedValue);
-    }
-    const controlledValue = access(props.value);
-    const controlledFirst = Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
-    if (controlledFirst) {
-      return toDisplayCalendarDate(controlledFirst);
+    const defaultFocusedValue = getProps().defaultFocusedValue;
+    if (defaultFocusedValue) {
+      return toDisplayCalendarDate(defaultFocusedValue);
     }
-    const defaultFirst = Array.isArray(props.defaultValue)
-      ? props.defaultValue[0]
-      : props.defaultValue;
-    if (defaultFirst) {
-      return toDisplayCalendarDate(defaultFirst);
+    // A controlled null is a cleared selection. Pin useControlledState treats
+    // `value !== undefined` as controlled, so null must not fall through to defaultValue.
+    const controlledValue = access(getProps().value);
+    if (controlledValue !== undefined) {
+      const controlledFirst = Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+      if (controlledFirst) {
+        return toDisplayCalendarDate(controlledFirst);
+      }
+    } else {
+      const defaultValue = getProps().defaultValue;
+      const defaultFirst = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+      if (defaultFirst) {
+        return toDisplayCalendarDate(defaultFirst);
+      }
     }
     return intlToCalendar(today(timeZone), calendar());
   };
 
   // State signals
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [internalValue, setInternalValue] = createSignal<T | T[] | null>(
-    (props.defaultValue as T | T[] | null) ?? null,
+  const [internalValue, setInternalValue] = createInternalSignal<T | T[] | null>(
+    (getProps().defaultValue as T | T[] | null) ?? null,
   );
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
   // Init from autoFocus, mirroring @react-stately useCalendarState
   // (`useState(props.autoFocus || false)`). Without autoFocus the calendar
   // mounts unfocused and never steals DOM focus.
-  const [isFocused, setFocused] = createSignal(props.autoFocus ?? false);
-  const [isPaginating, setIsPaginating] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(getProps().autoFocus ?? false);
+  const [isPaginating, setIsPaginating] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<T | T[] | null>(() => {
-    const controlled = access(props.value);
+    const controlled = access(getProps().value);
     return controlled !== undefined ? (controlled as T | T[] | null) : internalValue();
   });
   const value = createMemo<T | T[] | null>(() => {
@@ -307,80 +377,129 @@ export function createCalendarState<
   });
 
   // Derived states
-  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");
+  const isDisabled = createMemo(() => access(getProps().isDisabled) ?? false);
+  const isReadOnly = createMemo(() => access(getProps().isReadOnly) ?? false);
+  const validationState = createMemo(() => access(getProps().validationState));
+  // A value is invalid when the caller says so, validationState is invalid,
+  // or a selected date is unavailable or outside min/max. Mirrors useCalendarState.
+  const isInvalidSelection = createMemo(() => {
+    const current = value();
+    if (current == null) return false;
+    const dates = Array.isArray(current) ? current : [current];
+    const min = access(getProps().minValue);
+    const max = access(getProps().maxValue);
+    const minCal = min != null ? toDisplayCalendarDate(min) : null;
+    const maxCal = max != null ? toDisplayCalendarDate(max) : null;
+    return dates.some((date) => {
+      const cal = toDisplayCalendarDate(date);
+      return (
+        Boolean(getProps().isDateUnavailable?.(cal)) ||
+        (minCal != null && cal.compare(minCal) < 0) ||
+        (maxCal != null && cal.compare(maxCal) > 0)
+      );
+    });
+  });
+  const isValueInvalid = createMemo(
+    () =>
+      Boolean(access(getProps().isInvalid)) ||
+      validationState() === "invalid" ||
+      isInvalidSelection(),
+  );
 
-  // Visible range based on the paged range start.
-  const visibleRange = createMemo(() => {
+  // Visible range based on the paged range start. Function (not memo) so
+  // onFocusChange snapshots see the live page after a same-turn write.
+  const visibleRange = () => {
     const start = visibleRangeStart();
     const end = visibleRangeEnd(start);
 
     return { start, end };
-  });
-
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
+  };
 
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+    months: number,
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
-      setVisibleRangeStart(startOfMonth(nextFocusedDate.subtract({ months: visibleMonths - 1 })));
+      setVisibleRangeStart(
+        constrainVisibleRangeStart(nextFocusedDate, rawAlignEnd(nextFocusedDate, months), months),
+      );
     } else if (nextFocusedDate.compare(range.end) > 0) {
-      setVisibleRangeStart(startOfMonth(nextFocusedDate));
+      setVisibleRangeStart(
+        constrainVisibleRangeStart(nextFocusedDate, rawAlignStart(nextFocusedDate), months),
+      );
     }
   };
 
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (!controlledFocused) {
-      return;
-    }
-
-    const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
-
-    const currentFocusedDate = focusedDate();
-    if (
-      nextFocusedDate.compare(currentFocusedDate) !== 0 ||
-      !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      setFocusedDateInternal(nextFocusedDate);
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return;
-    }
-
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = constrainDate(currentFocusedDate);
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) === 0 &&
-      isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      return;
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-    setFocusedDateInternal(nextFocusedDate);
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(getProps().focusedValue);
+      if (!controlledFocused) return null;
+      return {
+        nextFocusedDate: constrainDate(toDisplayCalendarDate(controlledFocused)),
+        currentFocusedDate: focusedDate(),
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, range, months } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+      }
+      syncVisibleRangeForFocusedDate(nextFocusedDate, range, months);
+    },
+  );
 
-    if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
-      return;
-    }
+  createEffect(
+    () => {
+      const controlledFocused = access(getProps().focusedValue);
+      if (controlledFocused) return null;
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = constrainDate(currentFocusedDate);
+      if (
+        nextFocusedDate.compare(currentFocusedDate) === 0 &&
+        isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        return null;
+      }
+      return {
+        currentFocusedDate,
+        nextFocusedDate,
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      syncVisibleRangeForFocusedDate(data.nextFocusedDate, data.range, data.months);
+      setFocusedDateInternal(data.nextFocusedDate);
+      getProps().onFocusChange?.(data.nextFocusedDate);
+    },
+  );
 
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-  });
+  createEffect(
+    () => {
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+      if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+    },
+  );
 
   // Format week days for headers
   const weekDays = createMemo(() => {
@@ -408,31 +527,54 @@ export function createCalendarState<
     return formatter.format(formattableMonth.toDate(timeZone));
   });
 
+  // Walks previousAvailableDate from minValue ?? minDate(constrained, startDate)
+  // rather than from startDate alone, so a date before the visible month remains
+  // selectable when isDateUnavailable is set. Mirrors useCalendarState.normalizeValue.
+  const normalizeValue = (newValue: CalendarDate): T | null => {
+    const constrained = constrainDate(newValue);
+    const minBound = access(getProps().minValue);
+    const lowerBound =
+      minBound != null
+        ? toDisplayCalendarDate(minBound)
+        : (minDate(constrained, visibleRange().start) ?? constrained);
+    const prev = previousAvailableDate(constrained, lowerBound, getProps().isDateUnavailable);
+    if (!prev) {
+      return null;
+    }
+
+    const oldValue = sourceValue();
+    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
+    return convertValue(prev, referenceValue) as T;
+  };
+
   // Set value with onChange callback
   const setValue = (newValue: T | T[] | null) => {
     if (isDisabled() || isReadOnly()) return;
 
     const oldValue = sourceValue();
-    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
 
     let nextValue: T | T[] | null;
     if (newValue == null) {
       nextValue = selectionMode() === "multiple" ? ([] as T[]) : null;
     } else if (Array.isArray(newValue)) {
-      nextValue = newValue.map(
-        (v) => convertValue(constrainDate(toDisplayCalendarDate(v)), referenceValue) as T,
-      );
+      nextValue = newValue
+        .map((v) => normalizeValue(toDisplayCalendarDate(v)))
+        .filter((v): v is T => v != null);
     } else {
-      nextValue = convertValue(constrainDate(toDisplayCalendarDate(newValue)), referenceValue) as T;
+      const localValue = normalizeValue(toDisplayCalendarDate(newValue));
+      if (!localValue) {
+        return;
+      }
+      nextValue = localValue;
     }
 
-    const controlled = access(props.value);
+    const controlled = access(getProps().value);
     if (controlled === undefined) {
       setInternalValue(() => nextValue);
     }
 
-    if (!Object.is(oldValue, nextValue) && props.onChange) {
-      props.onChange(nextValue as CalendarValueType<T | null, M>);
+    if (!Object.is(oldValue, nextValue)) {
+      getProps().onChange?.(nextValue as CalendarValueType<T | null, M>);
     }
   };
 
@@ -444,9 +586,9 @@ export function createCalendarState<
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange(), visibleMonths());
     setFocusedDateInternal(constrained);
-    props.onFocusChange?.(constrained);
+    getProps().onFocusChange?.(constrained);
   };
 
   // Check if a date is selected
@@ -471,16 +613,16 @@ export function createCalendarState<
 
   // Check if a date is unavailable
   const isCellUnavailable = (date: DateValue): boolean => {
-    return props.isDateUnavailable?.(date) ?? false;
+    return getProps().isDateUnavailable?.(date) ?? false;
   };
 
   // Check if a date is disabled
   const isCellDisabled = (date: DateValue): boolean => {
     if (isDisabled()) return true;
-    if (props.isDateDisabled?.(date)) return true;
+    if (getProps().isDateDisabled?.(date)) return true;
 
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
+    const minValue = access(getProps().minValue);
+    const maxValue = access(getProps().maxValue);
     const calDate = toDisplayCalendarDate(date);
 
     // Dates outside the visible range are disabled, mirroring
@@ -510,24 +652,51 @@ export function createCalendarState<
     return isCellDisabled(date) || isCellUnavailable(date);
   };
 
+  // RAC `useCalendarState.ts` `isPreviousVisibleRangeInvalid` /
+  // `isNextVisibleRangeInvalid`: prev = startDate−1 invalid; next = endDate+1.
+  const isDateOutsideAllowedRange = (date: DateValue): boolean => {
+    const min = minValueState();
+    const max = maxValueState();
+    const calDate = toDisplayCalendarDate(date);
+    if (min && calDate.compare(toDisplayCalendarDate(min)) < 0) return true;
+    if (max && calDate.compare(toDisplayCalendarDate(max)) > 0) return true;
+    return false;
+  };
+
+  const isPreviousVisibleRangeInvalid = () => {
+    const start = visibleRange().start;
+    const previous = start.subtract({ days: 1 });
+    return isSameDay(previous, start) || isDateOutsideAllowedRange(previous);
+  };
+
+  const isNextVisibleRangeInvalid = () => {
+    const end = visibleRange().end;
+    const next = end.add({ days: 1 });
+    return isSameDay(next, end) || isDateOutsideAllowedRange(next);
+  };
+
   // Navigation methods
   const focusPreviousPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
-    const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+    const pageMonths = getProps().pageBehavior === "single" ? 1 : visibleMonths();
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.subtract({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
-    props.onFocusChange?.(nextFocusedDate);
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
+    getProps().onFocusChange?.(nextFocusedDate);
     setIsPaginating(false);
   };
 
   const focusNextPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
-    const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+    const pageMonths = getProps().pageBehavior === "single" ? 1 : visibleMonths();
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.add({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
-    props.onFocusChange?.(nextFocusedDate);
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
+    getProps().onFocusChange?.(nextFocusedDate);
     setIsPaginating(false);
   };
 
@@ -583,7 +752,7 @@ export function createCalendarState<
     if (isReadOnly() || isDisabled()) return;
 
     if (selectionMode() === "multiple") {
-      const current = value();
+      const current = access(getProps().value) !== undefined ? value() : readNow(internalValue);
       const base: CalendarDate[] = Array.isArray(current)
         ? current.map((v) => toDisplayCalendarDate(v))
         : current != null
@@ -655,6 +824,8 @@ export function createCalendarState<
     isCellDisabled,
     isOutsideVisibleRange,
     isInvalid,
+    isPreviousVisibleRangeInvalid,
+    isNextVisibleRangeInvalid,
     focusPreviousPage,
     focusNextPage,
     focusPreviousSection,
@@ -673,7 +844,9 @@ export function createCalendarState<
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isPaginating,
   };
 }
@@ -695,3 +868,26 @@ function convertValue(newValue: CalendarDate, oldValue?: DateValue | null): Date
 
   return localValue;
 }
+
+/**
+ * Walks backward from `date` while it is unavailable and still at/after `minValue`.
+ * Mirrors @react-stately/calendar previousAvailableDate.
+ */
+function previousAvailableDate(
+  date: CalendarDate,
+  minValue: CalendarDate,
+  isDateUnavailable?: (date: DateValue) => 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;
+}