@react-stately/calendar 3.0.0-alpha.1 → 3.0.0-alpha.4

package/src/useCalendarState.ts

@@ -14,7 +14,8 @@ import {alignCenter, alignEnd, alignStart, constrainStart, constrainValue, isInv
 import {
   Calendar,
   CalendarDate,
-  Duration,
+  DateDuration,
+  DateFormatter,
   GregorianCalendar,
   isSameDay,
   toCalendar,
@@ -24,23 +25,37 @@ import {
 import {CalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarState} from './types';
 import {useControlledState} from '@react-stately/utils';
-import {useDateFormatter} from '@react-aria/i18n';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
-interface CalendarStateOptions<T extends DateValue> extends CalendarProps<T> {
+interface CalendarStateOptions extends CalendarProps<DateValue> {
+  /** The locale to display and edit the value according to. */
   locale: string,
+  /**
+   * A function that creates a [Calendar](../internationalized/date/Calendar.html)
+   * object for a given calendar identifier. Such a function may be imported from the
+   * `@internationalized/date` package, or manually implemented to include support for
+   * only certain calendars.
+   */
   createCalendar: (name: string) => Calendar,
-  visibleDuration?: Duration,
+  /**
+   * The amount of days that will be displayed at once. This affects how pagination works.
+   * @default {months: 1}
+   */
+  visibleDuration?: DateDuration,
+  /** Determines how to align the initial selection relative to the visible date range. */
   selectionAlignment?: 'start' | 'center' | 'end'
 }
 
-export function useCalendarState<T extends DateValue>(props: CalendarStateOptions<T>): CalendarState {
-  let defaultFormatter = useDateFormatter();
+/**
+ * Provides state management for a calendar component.
+ * A calendar displays one or more date grids and allows users to select a single date.
+ */
+export function useCalendarState(props: CalendarStateOptions): CalendarState {
+  let defaultFormatter = useMemo(() => new DateFormatter(props.locale), [props.locale]);
   let resolvedOptions = useMemo(() => defaultFormatter.resolvedOptions(), [defaultFormatter]);
   let {
     locale,
     createCalendar,
-    timeZone = resolvedOptions.timeZone,
     visibleDuration = {months: 1},
     minValue,
     maxValue,
@@ -51,46 +66,58 @@ export function useCalendarState<T extends DateValue>(props: CalendarStateOption
 
   let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
   let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
-  let defaultDate = useMemo(() => calendarDateValue || constrainValue(toCalendar(today(timeZone), calendar), minValue, maxValue), [calendarDateValue, timeZone, calendar, minValue, maxValue]);
+  let timeZone = useMemo(() => value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone, [value, resolvedOptions.timeZone]);
+  let focusedCalendarDate = useMemo(() => (
+    props.focusedValue
+      ? constrainValue(toCalendar(toCalendarDate(props.focusedValue), calendar), minValue, maxValue)
+      : undefined
+  ), [props.focusedValue, calendar, minValue, maxValue]);
+  let defaultFocusedCalendarDate = useMemo(() => (
+    constrainValue(
+      props.defaultFocusedValue
+        ? toCalendar(toCalendarDate(props.defaultFocusedValue), calendar)
+        : calendarDateValue || toCalendar(today(timeZone), calendar),
+      minValue,
+      maxValue
+    )
+  ), [props.defaultFocusedValue, calendarDateValue, timeZone, calendar, minValue, maxValue]);
+  let [focusedDate, setFocusedDate] = useControlledState(focusedCalendarDate, defaultFocusedCalendarDate, props.onFocusChange);
   let [startDate, setStartDate] = useState(() => {
     switch (selectionAlignment) {
       case 'start':
-        return alignStart(defaultDate, visibleDuration, locale, minValue, maxValue);
+        return alignStart(focusedDate, visibleDuration, locale, minValue, maxValue);
       case 'end':
-        return alignEnd(defaultDate, visibleDuration, locale, minValue, maxValue);
+        return alignEnd(focusedDate, visibleDuration, locale, minValue, maxValue);
       case 'center':
       default:
-        return alignCenter(defaultDate, visibleDuration, locale, minValue, maxValue);
+        return alignCenter(focusedDate, visibleDuration, locale, minValue, maxValue);
     }
   });
-  let [focusedDate, setFocusedDate] = useState(defaultDate);
   let [isFocused, setFocused] = useState(props.autoFocus || false);
 
   let endDate = useMemo(() => startDate.add(visibleDuration).subtract({days: 1}), [startDate, visibleDuration]);
 
   // Reset focused date and visible range when calendar changes.
   let lastCalendarIdentifier = useRef(calendar.identifier);
-  useEffect(() => {
-    if (calendar.identifier !== lastCalendarIdentifier.current) {
-      let newFocusedDate = toCalendar(focusedDate, calendar);
-      setStartDate(alignCenter(newFocusedDate, visibleDuration, locale, minValue, maxValue));
-      setFocusedDate(newFocusedDate);
-      lastCalendarIdentifier.current = calendar.identifier;
-    }
-  }, [calendar, focusedDate, visibleDuration, locale, minValue, maxValue]);
+  if (calendar.identifier !== lastCalendarIdentifier.current) {
+    let newFocusedDate = toCalendar(focusedDate, calendar);
+    setStartDate(alignCenter(newFocusedDate, visibleDuration, locale, minValue, maxValue));
+    setFocusedDate(newFocusedDate);
+    lastCalendarIdentifier.current = calendar.identifier;
+  }
+
+  if (isInvalid(focusedDate, minValue, maxValue)) {
+    // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
+    setFocusedDate(constrainValue(focusedDate, minValue, maxValue));
+  } else if (focusedDate.compare(startDate) < 0) {
+    setStartDate(alignEnd(focusedDate, visibleDuration, locale, minValue, maxValue));
+  } else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) {
+    setStartDate(alignStart(focusedDate, visibleDuration, locale, minValue, maxValue));
+  }
 
   // Sets focus to a specific cell date
   function focusCell(date: CalendarDate) {
-    // date = constrain(focusedDate, date, visibleDuration, locale, minValue, maxValue);
     date = constrainValue(date, minValue, maxValue);
-
-    let next = startDate.add(visibleDuration);
-    if (date.compare(startDate) < 0) {
-      setStartDate(alignEnd(date, visibleDuration, locale, minValue, maxValue));
-    } else if (date.compare(next) >= 0) {
-      setStartDate(alignStart(date, visibleDuration, locale, minValue, maxValue));
-    }
-
     setFocusedDate(date);
   }
 
@@ -121,7 +148,7 @@ export function useCalendarState<T extends DateValue>(props: CalendarStateOption
     focusedDate,
     timeZone,
     setFocusedDate(date) {
-      setFocusedDate(date);
+      focusCell(date);
       setFocused(true);
     },
     focusNextDay() {
@@ -146,13 +173,13 @@ export function useCalendarState<T extends DateValue>(props: CalendarStateOption
     },
     focusNextPage() {
       let start = startDate.add(visibleDuration);
-      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
       setFocusedDate(constrainValue(focusedDate.add(visibleDuration), minValue, maxValue));
+      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
     },
     focusPreviousPage() {
       let start = startDate.subtract(visibleDuration);
-      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
       setFocusedDate(constrainValue(focusedDate.subtract(visibleDuration), minValue, maxValue));
+      setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
     },
     focusPageStart() {
       focusCell(startDate);
@@ -190,19 +217,22 @@ export function useCalendarState<T extends DateValue>(props: CalendarStateOption
       return isInvalid(date, minValue, maxValue);
     },
     isSelected(date) {
-      return calendarDateValue != null && isSameDay(date, calendarDateValue);
+      return calendarDateValue != null && isSameDay(date, calendarDateValue) && !this.isCellDisabled(date) && !this.isCellUnavailable(date);
     },
     isCellFocused(date) {
       return isFocused && focusedDate && isSameDay(date, focusedDate);
     },
     isCellDisabled(date) {
-      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || isInvalid(date, minValue, maxValue);
+      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+    },
+    isCellUnavailable(date) {
+      return props.isDateUnavailable && props.isDateUnavailable(date);
     },
     isPreviousVisibleRangeInvalid() {
-      return isInvalid(startDate.subtract({days: 1}), minValue, maxValue);
+      return this.isInvalid(startDate.subtract({days: 1}), minValue, maxValue);
     },
     isNextVisibleRangeInvalid() {
-      return isInvalid(endDate.add({days: 1}), minValue, maxValue);
+      return this.isInvalid(endDate.add({days: 1}), minValue, maxValue);
     }
   };
 }

package/src/useRangeCalendarState.ts

@@ -10,31 +10,46 @@
  * governing permissions and limitations under the License.
  */
 
-import {alignCenter} from './utils';
-import {Calendar, CalendarDate, Duration, GregorianCalendar, toCalendar, toCalendarDate} from '@internationalized/date';
+import {alignCenter, isInvalid} from './utils';
+import {Calendar, CalendarDate, DateDuration, GregorianCalendar, isEqualDay, maxDate, minDate, toCalendar, toCalendarDate} from '@internationalized/date';
+import {CalendarState, RangeCalendarState} from './types';
 import {DateRange, DateValue} from '@react-types/calendar';
 import {RangeCalendarProps} from '@react-types/calendar';
-import {RangeCalendarState} from './types';
 import {RangeValue} from '@react-types/shared';
 import {useCalendarState} from './useCalendarState';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
-interface RangeCalendarStateOptions<T extends DateValue> extends RangeCalendarProps<T> {
+interface RangeCalendarStateOptions extends RangeCalendarProps<DateValue> {
+  /** The locale to display and edit the value according to. */
   locale: string,
+  /**
+   * A function that creates a [Calendar](../internationalized/date/Calendar.html)
+   * object for a given calendar identifier. Such a function may be imported from the
+   * `@internationalized/date` package, or manually implemented to include support for
+   * only certain calendars.
+   */
   createCalendar: (name: string) => Calendar,
-  visibleDuration?: Duration
+  /**
+   * The amount of days that will be displayed at once. This affects how pagination works.
+   * @default {months: 1}
+   */
+  visibleDuration?: DateDuration
 }
 
-export function useRangeCalendarState<T extends DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
+/**
+ * Provides state management for a range calendar component.
+ * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
+ */
+export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState {
   let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
   let [value, setValue] = useControlledState<DateRange>(
     valueProp,
-    defaultValue,
+    defaultValue || null,
     onChange
   );
 
-  let [anchorDate, setAnchorDate] = useState(null);
+  let [anchorDate, setAnchorDateState] = useState(null);
   let alignment: 'center' | 'start' = 'center';
   if (value && value.start && value.end) {
     let start = alignCenter(toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
@@ -45,17 +60,53 @@ export function useRangeCalendarState<T extends DateValue>(props: RangeCalendarS
     }
   }
 
+  // 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 min = useMemo(() => maxDate(minValue, availableRange?.start), [minValue, availableRange]);
+  let max = useMemo(() => minDate(maxValue, availableRange?.end), [maxValue, availableRange]);
+
   let calendar = useCalendarState({
     ...calendarProps,
     value: value && value.start,
     createCalendar,
     locale,
     visibleDuration,
-    minValue,
-    maxValue,
+    minValue: min,
+    maxValue: max,
     selectionAlignment: alignment
   });
 
+  let updateAvailableRange = (date) => {
+    if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+      availableRangeRef.current = {
+        start: nextUnavailableDate(date, calendar, -1),
+        end: nextUnavailableDate(date, calendar, 1)
+      };
+      setAvailableRange(availableRangeRef.current);
+    } else {
+      availableRangeRef.current = null;
+      setAvailableRange(null);
+    }
+  };
+
+  // If the visible range changes, we need to update the available range.
+  let lastVisibleRange = useRef(calendar.visibleRange);
+  if (!isEqualDay(calendar.visibleRange.start, lastVisibleRange.current.start) || !isEqualDay(calendar.visibleRange.end, lastVisibleRange.current.end)) {
+    updateAvailableRange(anchorDate);
+    lastVisibleRange.current = calendar.visibleRange;
+  }
+
+  let setAnchorDate = (date: CalendarDate) => {
+    if (date) {
+      setAnchorDateState(date);
+      updateAvailableRange(date);
+    } else {
+      setAnchorDateState(null);
+      updateAvailableRange(null);
+    }
+  };
+
   let highlightedRange = anchorDate ? makeRange(anchorDate, calendar.focusedDate) : value && makeRange(value.start, value.end);
   let selectDate = (date: CalendarDate) => {
     if (props.isReadOnly) {
@@ -93,7 +144,10 @@ export function useRangeCalendarState<T extends DateValue>(props: RangeCalendarS
       }
     },
     isSelected(date) {
-      return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0;
+      return 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);
     },
     isDragging,
     setDragging
@@ -124,3 +178,19 @@ function convertValue(newValue: CalendarDate, oldValue: DateValue) {
 
   return newValue;
 }
+
+function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir: number) {
+  let nextDate = anchorDate.add({days: dir});
+  while (
+    (dir < 0 ? nextDate.compare(state.visibleRange.start) >= 0 : nextDate.compare(state.visibleRange.end) <= 0) &&
+    !state.isCellUnavailable(nextDate)
+  ) {
+    nextDate = nextDate.add({days: dir});
+  }
+
+  if (state.isCellUnavailable(nextDate)) {
+    return nextDate.add({days: -dir});
+  }
+
+  return null;
+}

package/src/utils.ts

@@ -11,7 +11,7 @@
  */
 import {
   CalendarDate,
-  Duration,
+  DateDuration,
   maxDate,
   minDate,
   startOfMonth,
@@ -26,8 +26,8 @@ export function isInvalid(date: CalendarDate, minValue: DateValue, maxValue: Dat
     (maxValue != null && date.compare(maxValue) > 0);
 }
 
-export function alignCenter(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
-  let halfDuration: Duration = {};
+export function alignCenter(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+  let halfDuration: DateDuration = {};
   for (let key in duration) {
     halfDuration[key] = Math.floor(duration[key] / 2);
     if (halfDuration[key] > 0 && duration[key] % 2 === 0) {
@@ -39,7 +39,7 @@ export function alignCenter(date: CalendarDate, duration: Duration, locale: stri
   return constrainStart(date, aligned, duration, locale, minValue, maxValue);
 }
 
-export function alignStart(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignStart(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
   // align to the start of the largest unit
   let aligned = date;
   if (duration.years) {
@@ -53,7 +53,7 @@ export function alignStart(date: CalendarDate, duration: Duration, locale: strin
   return constrainStart(date, aligned, duration, locale, minValue, maxValue);
 }
 
-export function alignEnd(date: CalendarDate, duration: Duration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignEnd(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
   let d = {...duration};
   // subtract 1 from the smallest unit
   if (duration.days) {
@@ -73,7 +73,7 @@ export function alignEnd(date: CalendarDate, duration: Duration, locale: string,
 export function constrainStart(
   date: CalendarDate,
   aligned: CalendarDate,
-  duration: Duration,
+  duration: DateDuration,
   locale: string,
   minValue: DateValue,
   maxValue: DateValue) {