@react-stately/calendar 3.5.1 → 3.5.3

package/src/useCalendarState.ts

@@ -27,7 +27,7 @@ import {
   toCalendarDate,
   today
 } from '@internationalized/date';
-import {CalendarProps, DateValue} from '@react-types/calendar';
+import {CalendarProps, DateValue, MappedDateValue} from '@react-types/calendar';
 import {CalendarState} from './types';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
@@ -51,7 +51,6 @@ export interface CalendarStateOptions<T extends DateValue = DateValue> extends C
   /** Determines how to align the initial selection relative to the visible date range. */
   selectionAlignment?: 'start' | 'center' | 'end'
 }
-
 /**
  * Provides state management for a calendar component.
  * A calendar displays one or more date grids and allows users to select a single date.
@@ -71,7 +70,7 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
   } = props;
   let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
-  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let [value, setControlledValue] = useControlledState<DateValue | null, MappedDateValue<T>>(props.value!, props.defaultValue ?? null!, props.onChange);
   let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
   let timeZone = useMemo(() => value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone, [value, resolvedOptions.timeZone]);
   let focusedCalendarDate = useMemo(() => (
@@ -138,25 +137,26 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
 
   function setValue(newValue: CalendarDate | null) {
     if (!props.isDisabled && !props.isReadOnly) {
-      if (newValue === null) {
+      let localValue = newValue;
+      if (localValue === null) {
         setControlledValue(null);
         return;
       }
-      newValue = constrainValue(newValue, minValue, maxValue);
-      newValue = previousAvailableDate(newValue, startDate, isDateUnavailable);
-      if (!newValue) {
+      localValue = constrainValue(localValue, minValue, maxValue);
+      localValue = previousAvailableDate(localValue, startDate, isDateUnavailable);
+      if (!localValue) {
         return;
       }
 
       // The display calendar should not have any effect on the emitted value.
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-      newValue = toCalendar(newValue, value?.calendar || new GregorianCalendar());
+      localValue = toCalendar(localValue, value?.calendar || new GregorianCalendar());
 
       // Preserve time if the input value had one.
       if (value && 'hour' in value) {
-        setControlledValue(value.set(newValue));
+        setControlledValue(value.set(localValue));
       } else {
-        setControlledValue(newValue);
+        setControlledValue(localValue);
       }
     }
   }
@@ -173,7 +173,7 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
     return isInvalid(calendarDateValue, minValue, maxValue);
   }, [calendarDateValue, isDateUnavailable, minValue, maxValue]);
   let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || isUnavailable;
-  let validationState: ValidationState = isValueInvalid ? 'invalid' : null;
+  let validationState: ValidationState | null = isValueInvalid ? 'invalid' : null;
 
   let pageDuration = useMemo(() => {
     if (pageBehavior === 'visible') {
@@ -184,8 +184,8 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
   }, [pageBehavior, visibleDuration]);
 
   return {
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
+    isDisabled: props.isDisabled ?? false,
+    isReadOnly: props.isReadOnly ?? false,
     value: calendarDateValue,
     setValue,
     visibleRange: {
@@ -308,25 +308,25 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
       return isFocused && focusedDate && isSameDay(date, focusedDate);
     },
     isCellDisabled(date) {
-      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date);
     },
     isCellUnavailable(date) {
-      return props.isDateUnavailable && props.isDateUnavailable(date);
+      return props.isDateUnavailable ? props.isDateUnavailable(date) : false;
     },
     isPreviousVisibleRangeInvalid() {
       let prev = startDate.subtract({days: 1});
-      return isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
+      return isSameDay(prev, startDate) || this.isInvalid(prev);
     },
     isNextVisibleRangeInvalid() {
       // Adding may return the same date if we reached the end of time
       // according to the calendar system (e.g. 9999-12-31).
       let next = endDate.add({days: 1});
-      return isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+      return isSameDay(next, endDate) || this.isInvalid(next);
     },
     getDatesInWeek(weekIndex, from = startDate) {
       // let date = startOfWeek(from, locale);
       let date = from.add({weeks: weekIndex});
-      let dates = [];
+      let dates: (CalendarDate | null)[] = [];
 
       date = startOfWeek(date, locale);
 

package/src/useRangeCalendarState.ts

@@ -13,7 +13,7 @@
 import {alignCenter, constrainValue, isInvalid, previousAvailableDate} from './utils';
 import {Calendar, CalendarDate, DateDuration, GregorianCalendar, isEqualDay, maxDate, minDate, toCalendar, toCalendarDate} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from './types';
-import {DateRange, DateValue, RangeCalendarProps} from '@react-types/calendar';
+import {DateValue, RangeCalendarProps} from '@react-types/calendar';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useCalendarState} from './useCalendarState';
 import {useControlledState} from '@react-stately/utils';
@@ -42,13 +42,13 @@ export interface RangeCalendarStateOptions<T extends DateValue = DateValue> exte
  */
 export function useRangeCalendarState<T extends DateValue = DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
   let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
-  let [value, setValue] = useControlledState<DateRange>(
-    valueProp,
-    defaultValue || null,
+  let [value, setValue] = useControlledState<RangeValue<T> | null, RangeValue<T>>(
+    valueProp!,
+    defaultValue || null!,
     onChange
   );
 
-  let [anchorDate, setAnchorDateState] = useState(null);
+  let [anchorDate, setAnchorDateState] = useState<CalendarDate | null>(null);
   let alignment: 'center' | 'start' = 'center';
   if (value && value.start && value.end) {
     let start = alignCenter(toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
@@ -60,8 +60,8 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
   }
 
   // Available range must be stored in a ref so we have access to the updated version immediately in `isInvalid`.
-  let availableRangeRef = useRef<RangeValue<DateValue>>(null);
-  let [availableRange, setAvailableRange] = useState<RangeValue<DateValue>>(null);
+  let availableRangeRef = useRef<Partial<RangeValue<DateValue>> | null>(null);
+  let [availableRange, setAvailableRange] = useState<Partial<RangeValue<DateValue>>|null>(null);
   let min = useMemo(() => maxDate(minValue, availableRange?.start), [minValue, availableRange]);
   let max = useMemo(() => minDate(maxValue, availableRange?.end), [maxValue, availableRange]);
 
@@ -78,9 +78,11 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
 
   let updateAvailableRange = (date) => {
     if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+      const nextAvailableStartDate = nextUnavailableDate(date, calendar, -1);
+      const nextAvailableEndDate = nextUnavailableDate(date, calendar, 1);
       availableRangeRef.current = {
-        start: nextUnavailableDate(date, calendar, -1),
-        end: nextUnavailableDate(date, calendar, 1)
+        start: nextAvailableStartDate,
+        end: nextAvailableEndDate
       };
       setAvailableRange(availableRangeRef.current);
     } else {
@@ -96,7 +98,7 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
     setLastVisibleRange(calendar.visibleRange);
   }
 
-  let setAnchorDate = (date: CalendarDate) => {
+  let setAnchorDate = (date: CalendarDate | null) => {
     if (date) {
       setAnchorDateState(date);
       updateAvailableRange(date);
@@ -112,20 +114,22 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
       return;
     }
 
-    date = constrainValue(date, min, max);
-    date = previousAvailableDate(date, calendar.visibleRange.start, props.isDateUnavailable);
-    if (!date) {
+    const constrainedDate = constrainValue(date, min, max);
+    const previousAvailableConstrainedDate = previousAvailableDate(constrainedDate, calendar.visibleRange.start, props.isDateUnavailable);
+    if (!previousAvailableConstrainedDate) {
       return;
     }
 
     if (!anchorDate) {
-      setAnchorDate(date);
+      setAnchorDate(previousAvailableConstrainedDate);
     } else {
-      let range = makeRange(anchorDate, date);
-      setValue({
-        start: convertValue(range.start, value?.start),
-        end: convertValue(range.end, value?.end)
-      });
+      let range = makeRange(anchorDate, previousAvailableConstrainedDate);
+      if (range) {
+        setValue({
+          start: convertValue(range.start, value?.start) as T,
+          end: convertValue(range.end, value?.end) as T
+        });
+      }
       setAnchorDate(null);
     }
   };
@@ -146,7 +150,7 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
   }, [isDateUnavailable, value, anchorDate, minValue, maxValue]);
 
   let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || isInvalidSelection;
-  let validationState: ValidationState = isValueInvalid ? 'invalid' : null;
+  let validationState: ValidationState | null = isValueInvalid ? 'invalid' : null;
 
   return {
     ...calendar,
@@ -167,7 +171,7 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
       }
     },
     isSelected(date) {
-      return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date);
+      return Boolean(highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date));
     },
     isInvalid(date) {
       return calendar.isInvalid(date) || isInvalid(date, availableRangeRef.current?.start, availableRangeRef.current?.end);
@@ -177,7 +181,7 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
   };
 }
 
-function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> {
+function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> | null {
   if (!start || !end) {
     return null;
   }
@@ -189,7 +193,7 @@ function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> {
   return {start: toCalendarDate(start), end: toCalendarDate(end)};
 }
 
-function convertValue(newValue: CalendarDate, oldValue: DateValue) {
+function convertValue(newValue: CalendarDate, oldValue?: DateValue): DateValue {
   // The display calendar should not have any effect on the emitted value.
   // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
   newValue = toCalendar(newValue, oldValue?.calendar || new GregorianCalendar());
@@ -202,7 +206,7 @@ function convertValue(newValue: CalendarDate, oldValue: DateValue) {
   return newValue;
 }
 
-function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir: number) {
+function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir: number): CalendarDate | undefined {
   let nextDate = anchorDate.add({days: dir});
   while (
     (dir < 0 ? nextDate.compare(state.visibleRange.start) >= 0 : nextDate.compare(state.visibleRange.end) <= 0) &&
@@ -215,5 +219,4 @@ function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir
     return nextDate.add({days: -dir});
   }
 
-  return null;
 }

package/src/utils.ts

@@ -21,12 +21,12 @@ import {
 } from '@internationalized/date';
 import {DateValue} from '@react-types/calendar';
 
-export function isInvalid(date: DateValue, minValue: DateValue, maxValue: DateValue) {
+export function isInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) {
   return (minValue != null && date.compare(minValue) < 0) ||
     (maxValue != null && date.compare(maxValue) > 0);
 }
 
-export function alignCenter(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignCenter(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   let halfDuration: DateDuration = {};
   for (let key in duration) {
     halfDuration[key] = Math.floor(duration[key] / 2);
@@ -39,7 +39,7 @@ export function alignCenter(date: CalendarDate, duration: DateDuration, locale:
   return constrainStart(date, aligned, duration, locale, minValue, maxValue);
 }
 
-export function alignStart(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignStart(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   // align to the start of the largest unit
   let aligned = date;
   if (duration.years) {
@@ -53,16 +53,16 @@ export function alignStart(date: CalendarDate, duration: DateDuration, locale: s
   return constrainStart(date, aligned, duration, locale, minValue, maxValue);
 }
 
-export function alignEnd(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignEnd(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   let d = {...duration};
   // subtract 1 from the smallest unit
-  if (duration.days) {
+  if (d.days) {
     d.days--;
-  } else if (duration.weeks) {
+  } else if (d.weeks) {
     d.weeks--;
-  } else if (duration.months) {
+  } else if (d.months) {
     d.months--;
-  } else if (duration.years) {
+  } else if (d.years) {
     d.years--;
   }
 
@@ -75,38 +75,50 @@ export function constrainStart(
   aligned: CalendarDate,
   duration: DateDuration,
   locale: string,
-  minValue: DateValue,
-  maxValue: DateValue) {
+  minValue?: DateValue | null,
+  maxValue?: DateValue | null) {
   if (minValue && date.compare(minValue) >= 0) {
-    aligned = maxDate(
+    let newDate = maxDate(
       aligned,
       alignStart(toCalendarDate(minValue), duration, locale)
     );
+    if (newDate) {
+      aligned = newDate;
+    }
   }
 
   if (maxValue && date.compare(maxValue) <= 0) {
-    aligned = minDate(
+    let newDate = minDate(
       aligned,
       alignEnd(toCalendarDate(maxValue), duration, locale)
     );
+    if (newDate) {
+      aligned = newDate;
+    }
   }
 
   return aligned;
 }
 
-export function constrainValue(date: CalendarDate, minValue: DateValue, maxValue: DateValue) {
+export function constrainValue(date: CalendarDate, minValue?: DateValue | null, maxValue?: DateValue | null) {
   if (minValue) {
-    date = maxDate(date, toCalendarDate(minValue));
+    let newDate = maxDate(date, toCalendarDate(minValue));
+    if (newDate) {
+      date = newDate;
+    }
   }
 
   if (maxValue) {
-    date = minDate(date, toCalendarDate(maxValue));
+    let newDate = minDate(date, toCalendarDate(maxValue));
+    if (newDate) {
+      date = newDate;
+    }
   }
 
   return date;
 }
 
-export function previousAvailableDate(date: CalendarDate, minValue: DateValue, isDateUnavailable: (date: CalendarDate) => boolean) {
+export function previousAvailableDate(date: CalendarDate, minValue: DateValue, isDateUnavailable?: (date: CalendarDate) => boolean): CalendarDate | null {
   if (!isDateUnavailable) {
     return date;
   }
@@ -118,4 +130,5 @@ export function previousAvailableDate(date: CalendarDate, minValue: DateValue, i
   if (date.compare(minValue) >= 0) {
     return date;
   }
+  return null;
 }