@react-stately/calendar - npm Package Compare versions

Comparing version 3.0.0-alpha.3 to 3.0.0-alpha.4

dist/main.js

@@ -1,5 +0,4 @@
-var $9X5tg$internationalizeddate = require("@internationalized/date");
-var $9X5tg$reactstatelyutils = require("@react-stately/utils");
-var $9X5tg$reactariai18n = require("@react-aria/i18n");
-var $9X5tg$react = require("react");
+var $hEzMm$internationalizeddate = require("@internationalized/date");
+var $hEzMm$reactstatelyutils = require("@react-stately/utils");
+var $hEzMm$react = require("react");
 
@@ -25,13 +24,13 @@ function $parcel$exportWildcard(dest, source) {
 }
-var $2685e11fe2f22aa6$exports = {};
+var $7a549489c00e7fe0$exports = {};
 
 
-var $5270e0b8e8740a4c$exports = {};
+var $6adad0c8536fc209$exports = {};
 
-$parcel$export($5270e0b8e8740a4c$exports, "useCalendarState", () => $5270e0b8e8740a4c$export$6d095e787d2b5e1f);
+$parcel$export($6adad0c8536fc209$exports, "useCalendarState", () => $6adad0c8536fc209$export$6d095e787d2b5e1f);
 
-function $be5afcab32b8119f$export$eac50920cf2fd59a(date, minValue, maxValue) {
+function $4301262d71f567b9$export$eac50920cf2fd59a(date, minValue, maxValue) {
     return minValue != null && date.compare(minValue) < 0 || maxValue != null && date.compare(maxValue) > 0;
 }
-function $be5afcab32b8119f$export$f4a51ff076cc9a09(date, duration, locale, minValue, maxValue) {
+function $4301262d71f567b9$export$f4a51ff076cc9a09(date, duration, locale, minValue, maxValue) {
     let halfDuration = {
@@ -43,14 +42,14 @@ };
     }
-    let aligned = $be5afcab32b8119f$export$144a00ba6044eb9(date, duration, locale).subtract(halfDuration);
-    return $be5afcab32b8119f$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    let aligned = $4301262d71f567b9$export$144a00ba6044eb9(date, duration, locale).subtract(halfDuration);
+    return $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $be5afcab32b8119f$export$144a00ba6044eb9(date, duration, locale, minValue, maxValue) {
+function $4301262d71f567b9$export$144a00ba6044eb9(date, duration, locale, minValue, maxValue) {
     // align to the start of the largest unit
     let aligned = date;
-    if (duration.years) aligned = $9X5tg$internationalizeddate.startOfYear(date);
-    else if (duration.months) aligned = $9X5tg$internationalizeddate.startOfMonth(date);
-    else if (duration.weeks) aligned = $9X5tg$internationalizeddate.startOfWeek(date, locale);
-    return $be5afcab32b8119f$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    if (duration.years) aligned = $hEzMm$internationalizeddate.startOfYear(date);
+    else if (duration.months) aligned = $hEzMm$internationalizeddate.startOfMonth(date);
+    else if (duration.weeks) aligned = $hEzMm$internationalizeddate.startOfWeek(date, locale);
+    return $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $be5afcab32b8119f$export$530edbfc915b2b04(date, duration, locale, minValue, maxValue) {
+function $4301262d71f567b9$export$530edbfc915b2b04(date, duration, locale, minValue, maxValue) {
     let d = {
@@ -64,13 +63,13 @@ ...duration
     else if (duration.years) d.years--;
-    let aligned = $be5afcab32b8119f$export$144a00ba6044eb9(date, duration, locale).subtract(d);
-    return $be5afcab32b8119f$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    let aligned = $4301262d71f567b9$export$144a00ba6044eb9(date, duration, locale).subtract(d);
+    return $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $be5afcab32b8119f$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
-    if (minValue && date.compare(minValue) >= 0) aligned = $9X5tg$internationalizeddate.maxDate(aligned, $be5afcab32b8119f$export$144a00ba6044eb9($9X5tg$internationalizeddate.toCalendarDate(minValue), duration, locale));
-    if (maxValue && date.compare(maxValue) <= 0) aligned = $9X5tg$internationalizeddate.minDate(aligned, $be5afcab32b8119f$export$530edbfc915b2b04($9X5tg$internationalizeddate.toCalendarDate(maxValue), duration, locale));
+function $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
+    if (minValue && date.compare(minValue) >= 0) aligned = $hEzMm$internationalizeddate.maxDate(aligned, $4301262d71f567b9$export$144a00ba6044eb9($hEzMm$internationalizeddate.toCalendarDate(minValue), duration, locale));
+    if (maxValue && date.compare(maxValue) <= 0) aligned = $hEzMm$internationalizeddate.minDate(aligned, $4301262d71f567b9$export$530edbfc915b2b04($hEzMm$internationalizeddate.toCalendarDate(maxValue), duration, locale));
     return aligned;
 }
-function $be5afcab32b8119f$export$4f5203c0d889109e(date, minValue, maxValue) {
-    if (minValue) date = $9X5tg$internationalizeddate.maxDate(date, $9X5tg$internationalizeddate.toCalendarDate(minValue));
-    if (maxValue) date = $9X5tg$internationalizeddate.minDate(date, $9X5tg$internationalizeddate.toCalendarDate(maxValue));
+function $4301262d71f567b9$export$4f5203c0d889109e(date, minValue, maxValue) {
+    if (minValue) date = $hEzMm$internationalizeddate.maxDate(date, $hEzMm$internationalizeddate.toCalendarDate(minValue));
+    if (maxValue) date = $hEzMm$internationalizeddate.minDate(date, $hEzMm$internationalizeddate.toCalendarDate(maxValue));
     return date;
@@ -83,7 +82,9 @@ }
 
-
-function $5270e0b8e8740a4c$export$6d095e787d2b5e1f(props) {
-    let defaultFormatter = $9X5tg$reactariai18n.useDateFormatter();
-    let resolvedOptions = $9X5tg$react.useMemo(()=>defaultFormatter.resolvedOptions()
+function $6adad0c8536fc209$export$6d095e787d2b5e1f(props) {
+    let defaultFormatter = $hEzMm$react.useMemo(()=>new $hEzMm$internationalizeddate.DateFormatter(props.locale)
     , [
+        props.locale
+    ]);
+    let resolvedOptions = $hEzMm$react.useMemo(()=>defaultFormatter.resolvedOptions()
+    , [
         defaultFormatter
@@ -94,3 +95,3 @@ ]);
     } , minValue: minValue , maxValue: maxValue , selectionAlignment: selectionAlignment  } = props;
-    let calendar = $9X5tg$react.useMemo(()=>createCalendar(resolvedOptions.calendar)
+    let calendar = $hEzMm$react.useMemo(()=>createCalendar(resolvedOptions.calendar)
     , [
@@ -100,4 +101,4 @@ createCalendar,
     ]);
-    let [value, setControlledValue] = $9X5tg$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarDateValue = $9X5tg$react.useMemo(()=>value ? $9X5tg$internationalizeddate.toCalendar($9X5tg$internationalizeddate.toCalendarDate(value), calendar) : null
+    let [value, setControlledValue] = $hEzMm$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarDateValue = $hEzMm$react.useMemo(()=>value ? $hEzMm$internationalizeddate.toCalendar($hEzMm$internationalizeddate.toCalendarDate(value), calendar) : null
     , [
@@ -107,3 +108,3 @@ value,
     ]);
-    let timeZone = $9X5tg$react.useMemo(()=>value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone
+    let timeZone = $hEzMm$react.useMemo(()=>value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone
     , [
@@ -113,4 +114,12 @@ value,
     ]);
-    let defaultDate = $9X5tg$react.useMemo(()=>calendarDateValue || $be5afcab32b8119f$export$4f5203c0d889109e($9X5tg$internationalizeddate.toCalendar($9X5tg$internationalizeddate.today(timeZone), calendar), minValue, maxValue)
+    let focusedCalendarDate = $hEzMm$react.useMemo(()=>props.focusedValue ? $4301262d71f567b9$export$4f5203c0d889109e($hEzMm$internationalizeddate.toCalendar($hEzMm$internationalizeddate.toCalendarDate(props.focusedValue), calendar), minValue, maxValue) : undefined
     , [
+        props.focusedValue,
+        calendar,
+        minValue,
+        maxValue
+    ]);
+    let defaultFocusedCalendarDate = $hEzMm$react.useMemo(()=>$4301262d71f567b9$export$4f5203c0d889109e(props.defaultFocusedValue ? $hEzMm$internationalizeddate.toCalendar($hEzMm$internationalizeddate.toCalendarDate(props.defaultFocusedValue), calendar) : calendarDateValue || $hEzMm$internationalizeddate.toCalendar($hEzMm$internationalizeddate.today(timeZone), calendar), minValue, maxValue)
+    , [
+        props.defaultFocusedValue,
         calendarDateValue,
@@ -122,16 +131,16 @@ timeZone,
     ]);
-    let [startDate, setStartDate] = $9X5tg$react.useState(()=>{
+    let [focusedDate, setFocusedDate] = $hEzMm$reactstatelyutils.useControlledState(focusedCalendarDate, defaultFocusedCalendarDate, props.onFocusChange);
+    let [startDate, setStartDate] = $hEzMm$react.useState(()=>{
         switch(selectionAlignment){
             case 'start':
-                return $be5afcab32b8119f$export$144a00ba6044eb9(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $4301262d71f567b9$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue);
             case 'end':
-                return $be5afcab32b8119f$export$530edbfc915b2b04(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $4301262d71f567b9$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue);
             case 'center':
             default:
-                return $be5afcab32b8119f$export$f4a51ff076cc9a09(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $4301262d71f567b9$export$f4a51ff076cc9a09(focusedDate, visibleDuration, locale, minValue, maxValue);
         }
     });
-    let [focusedDate, setFocusedDate] = $9X5tg$react.useState(defaultDate);
-    let [isFocused, setFocused] = $9X5tg$react.useState(props.autoFocus || false);
-    let endDate = $9X5tg$react.useMemo(()=>startDate.add(visibleDuration).subtract({
+    let [isFocused, setFocused] = $hEzMm$react.useState(props.autoFocus || false);
+    let endDate = $hEzMm$react.useMemo(()=>startDate.add(visibleDuration).subtract({
             days: 1
@@ -144,25 +153,16 @@ })
     // Reset focused date and visible range when calendar changes.
-    let lastCalendarIdentifier = $9X5tg$react.useRef(calendar.identifier);
-    $9X5tg$react.useEffect(()=>{
-        if (calendar.identifier !== lastCalendarIdentifier.current) {
-            let newFocusedDate = $9X5tg$internationalizeddate.toCalendar(focusedDate, calendar);
-            setStartDate($be5afcab32b8119f$export$f4a51ff076cc9a09(newFocusedDate, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate(newFocusedDate);
-            lastCalendarIdentifier.current = calendar.identifier;
-        }
-    }, [
-        calendar,
-        focusedDate,
-        visibleDuration,
-        locale,
-        minValue,
-        maxValue
-    ]);
+    let lastCalendarIdentifier = $hEzMm$react.useRef(calendar.identifier);
+    if (calendar.identifier !== lastCalendarIdentifier.current) {
+        let newFocusedDate = $hEzMm$internationalizeddate.toCalendar(focusedDate, calendar);
+        setStartDate($4301262d71f567b9$export$f4a51ff076cc9a09(newFocusedDate, visibleDuration, locale, minValue, maxValue));
+        setFocusedDate(newFocusedDate);
+        lastCalendarIdentifier.current = calendar.identifier;
+    }
+    if ($4301262d71f567b9$export$eac50920cf2fd59a(focusedDate, minValue, maxValue)) // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
+    setFocusedDate($4301262d71f567b9$export$4f5203c0d889109e(focusedDate, minValue, maxValue));
+    else if (focusedDate.compare(startDate) < 0) setStartDate($4301262d71f567b9$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue));
+    else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) setStartDate($4301262d71f567b9$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
     // Sets focus to a specific cell date
     function focusCell(date) {
-        // date = constrain(focusedDate, date, visibleDuration, locale, minValue, maxValue);
-        date = $be5afcab32b8119f$export$4f5203c0d889109e(date, minValue, maxValue);
-        let next = startDate.add(visibleDuration);
-        if (date.compare(startDate) < 0) setStartDate($be5afcab32b8119f$export$530edbfc915b2b04(date, visibleDuration, locale, minValue, maxValue));
-        else if (date.compare(next) >= 0) setStartDate($be5afcab32b8119f$export$144a00ba6044eb9(date, visibleDuration, locale, minValue, maxValue));
+        date = $4301262d71f567b9$export$4f5203c0d889109e(date, minValue, maxValue);
         setFocusedDate(date);
@@ -174,3 +174,3 @@ }
             // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-            newValue = $9X5tg$internationalizeddate.toCalendar(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new $9X5tg$internationalizeddate.GregorianCalendar());
+            newValue = $hEzMm$internationalizeddate.toCalendar(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new $hEzMm$internationalizeddate.GregorianCalendar());
             // Preserve time if the input value had one.
@@ -193,3 +193,3 @@ if (value && 'hour' in value) setControlledValue(value.set(newValue));
         setFocusedDate (date) {
-            setFocusedDate(date);
+            focusCell(date);
             setFocused(true);
@@ -221,9 +221,9 @@ },
             let start = startDate.add(visibleDuration);
-            setStartDate($be5afcab32b8119f$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate($be5afcab32b8119f$export$4f5203c0d889109e(focusedDate.add(visibleDuration), minValue, maxValue));
+            setFocusedDate($4301262d71f567b9$export$4f5203c0d889109e(focusedDate.add(visibleDuration), minValue, maxValue));
+            setStartDate($4301262d71f567b9$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
         },
         focusPreviousPage () {
             let start = startDate.subtract(visibleDuration);
-            setStartDate($be5afcab32b8119f$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate($be5afcab32b8119f$export$4f5203c0d889109e(focusedDate.subtract(visibleDuration), minValue, maxValue));
+            setFocusedDate($4301262d71f567b9$export$4f5203c0d889109e(focusedDate.subtract(visibleDuration), minValue, maxValue));
+            setStartDate($4301262d71f567b9$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
         },
@@ -263,15 +263,18 @@ focusPageStart () {
         isInvalid (date) {
-            return $be5afcab32b8119f$export$eac50920cf2fd59a(date, minValue, maxValue);
+            return $4301262d71f567b9$export$eac50920cf2fd59a(date, minValue, maxValue);
         },
         isSelected (date) {
-            return calendarDateValue != null && $9X5tg$internationalizeddate.isSameDay(date, calendarDateValue);
+            return calendarDateValue != null && $hEzMm$internationalizeddate.isSameDay(date, calendarDateValue) && !this.isCellDisabled(date) && !this.isCellUnavailable(date);
         },
         isCellFocused (date) {
-            return isFocused && focusedDate && $9X5tg$internationalizeddate.isSameDay(date, focusedDate);
+            return isFocused && focusedDate && $hEzMm$internationalizeddate.isSameDay(date, focusedDate);
         },
         isCellDisabled (date) {
-            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || $be5afcab32b8119f$export$eac50920cf2fd59a(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 $be5afcab32b8119f$export$eac50920cf2fd59a(startDate.subtract({
+            return this.isInvalid(startDate.subtract({
                 days: 1
@@ -281,3 +284,3 @@ }), minValue, maxValue);
         isNextVisibleRangeInvalid () {
-            return $be5afcab32b8119f$export$eac50920cf2fd59a(endDate.add({
+            return this.isInvalid(endDate.add({
                 days: 1
@@ -290,5 +293,5 @@ }), minValue, maxValue);
 
-var $db599f16579e1659$exports = {};
+var $e49f7b861e5e8049$exports = {};
 
-$parcel$export($db599f16579e1659$exports, "useRangeCalendarState", () => $db599f16579e1659$export$9a987164d97ecc90);
+$parcel$export($e49f7b861e5e8049$exports, "useRangeCalendarState", () => $e49f7b861e5e8049$export$9a987164d97ecc90);
 
@@ -299,11 +302,11 @@
 
-function $db599f16579e1659$export$9a987164d97ecc90(props) {
+function $e49f7b861e5e8049$export$9a987164d97ecc90(props) {
     let { value: valueProp , defaultValue: defaultValue , onChange: onChange , createCalendar: createCalendar , locale: locale , visibleDuration: visibleDuration = {
         months: 1
     } , minValue: minValue , maxValue: maxValue , ...calendarProps } = props;
-    let [value, setValue] = $9X5tg$reactstatelyutils.useControlledState(valueProp, defaultValue, onChange);
-    let [anchorDate, setAnchorDate] = $9X5tg$react.useState(null);
+    let [value, setValue] = $hEzMm$reactstatelyutils.useControlledState(valueProp, defaultValue || null, onChange);
+    let [anchorDate, setAnchorDateState] = $hEzMm$react.useState(null);
     let alignment = 'center';
     if (value && value.start && value.end) {
-        let start = $be5afcab32b8119f$export$f4a51ff076cc9a09($9X5tg$internationalizeddate.toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
+        let start = $4301262d71f567b9$export$f4a51ff076cc9a09($hEzMm$internationalizeddate.toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
         let end = start.add(visibleDuration).subtract({
@@ -314,3 +317,18 @@ days: 1
     }
-    let calendar = $5270e0b8e8740a4c$export$6d095e787d2b5e1f({
+    // Available range must be stored in a ref so we have access to the updated version immediately in `isInvalid`.
+    let availableRangeRef = $hEzMm$react.useRef(null);
+    let [availableRange, setAvailableRange] = $hEzMm$react.useState(null);
+    let min = $hEzMm$react.useMemo(()=>{
+        return $hEzMm$internationalizeddate.maxDate(minValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.start);
+    }, [
+        minValue,
+        availableRange
+    ]);
+    let max = $hEzMm$react.useMemo(()=>{
+        return $hEzMm$internationalizeddate.minDate(maxValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.end);
+    }, [
+        maxValue,
+        availableRange
+    ]);
+    let calendar = $6adad0c8536fc209$export$6d095e787d2b5e1f({
         ...calendarProps,
@@ -321,7 +339,34 @@ value: value && value.start,
         visibleDuration: visibleDuration,
-        minValue: minValue,
-        maxValue: maxValue,
+        minValue: min,
+        maxValue: max,
         selectionAlignment: alignment
     });
-    let highlightedRange = anchorDate ? $db599f16579e1659$var$makeRange(anchorDate, calendar.focusedDate) : value && $db599f16579e1659$var$makeRange(value.start, value.end);
+    let updateAvailableRange = (date)=>{
+        if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+            availableRangeRef.current = {
+                start: $e49f7b861e5e8049$var$nextUnavailableDate(date, calendar, -1),
+                end: $e49f7b861e5e8049$var$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 = $hEzMm$react.useRef(calendar.visibleRange);
+    if (!$hEzMm$internationalizeddate.isEqualDay(calendar.visibleRange.start, lastVisibleRange.current.start) || !$hEzMm$internationalizeddate.isEqualDay(calendar.visibleRange.end, lastVisibleRange.current.end)) {
+        updateAvailableRange(anchorDate);
+        lastVisibleRange.current = calendar.visibleRange;
+    }
+    let setAnchorDate = (date)=>{
+        if (date) {
+            setAnchorDateState(date);
+            updateAvailableRange(date);
+        } else {
+            setAnchorDateState(null);
+            updateAvailableRange(null);
+        }
+    };
+    let highlightedRange = anchorDate ? $e49f7b861e5e8049$var$makeRange(anchorDate, calendar.focusedDate) : value && $e49f7b861e5e8049$var$makeRange(value.start, value.end);
     let selectDate = (date)=>{
@@ -331,6 +376,6 @@ if (props.isReadOnly) return;
         else {
-            let range = $db599f16579e1659$var$makeRange(anchorDate, date);
+            let range = $e49f7b861e5e8049$var$makeRange(anchorDate, date);
             setValue({
-                start: $db599f16579e1659$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
-                end: $db599f16579e1659$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
+                start: $e49f7b861e5e8049$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
+                end: $e49f7b861e5e8049$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
             });
@@ -340,3 +385,3 @@ setAnchorDate(null);
     };
-    let [isDragging, setDragging] = $9X5tg$react.useState(false);
+    let [isDragging, setDragging] = $hEzMm$react.useState(false);
     return {
@@ -357,4 +402,8 @@ ...calendar,
         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) {
+            var ref, ref1;
+            return calendar.isInvalid(date) || $4301262d71f567b9$export$eac50920cf2fd59a(date, (ref = availableRangeRef.current) === null || ref === void 0 ? void 0 : ref.start, (ref1 = availableRangeRef.current) === null || ref1 === void 0 ? void 0 : ref1.end);
+        },
         isDragging: isDragging,
@@ -364,3 +413,3 @@ setDragging: setDragging
 }
-function $db599f16579e1659$var$makeRange(start, end) {
+function $e49f7b861e5e8049$var$makeRange(start, end) {
     if (!start || !end) return null;
@@ -372,10 +421,10 @@ if (end.compare(start) < 0) [start, end] = [
     return {
-        start: $9X5tg$internationalizeddate.toCalendarDate(start),
-        end: $9X5tg$internationalizeddate.toCalendarDate(end)
+        start: $hEzMm$internationalizeddate.toCalendarDate(start),
+        end: $hEzMm$internationalizeddate.toCalendarDate(end)
     };
 }
-function $db599f16579e1659$var$convertValue(newValue, oldValue) {
+function $e49f7b861e5e8049$var$convertValue(newValue, oldValue) {
     // 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 = $9X5tg$internationalizeddate.toCalendar(newValue, (oldValue === null || oldValue === void 0 ? void 0 : oldValue.calendar) || new $9X5tg$internationalizeddate.GregorianCalendar());
+    newValue = $hEzMm$internationalizeddate.toCalendar(newValue, (oldValue === null || oldValue === void 0 ? void 0 : oldValue.calendar) || new $hEzMm$internationalizeddate.GregorianCalendar());
     // Preserve time if the input value had one.
@@ -385,9 +434,21 @@ if (oldValue && 'hour' in oldValue) return oldValue.set(newValue);
 }
+function $e49f7b861e5e8049$var$nextUnavailableDate(anchorDate, state, dir) {
+    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;
+}
 
 
-$parcel$exportWildcard(module.exports, $2685e11fe2f22aa6$exports);
-$parcel$exportWildcard(module.exports, $5270e0b8e8740a4c$exports);
-$parcel$exportWildcard(module.exports, $db599f16579e1659$exports);
+$parcel$exportWildcard(module.exports, $7a549489c00e7fe0$exports);
+$parcel$exportWildcard(module.exports, $6adad0c8536fc209$exports);
+$parcel$exportWildcard(module.exports, $e49f7b861e5e8049$exports);
 
 
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,5 +0,4 @@
-import {toCalendar as $c4QNE$toCalendar, toCalendarDate as $c4QNE$toCalendarDate, today as $c4QNE$today, GregorianCalendar as $c4QNE$GregorianCalendar, isSameDay as $c4QNE$isSameDay, startOfYear as $c4QNE$startOfYear, startOfMonth as $c4QNE$startOfMonth, startOfWeek as $c4QNE$startOfWeek, maxDate as $c4QNE$maxDate, minDate as $c4QNE$minDate} from "@internationalized/date";
-import {useControlledState as $c4QNE$useControlledState} from "@react-stately/utils";
-import {useDateFormatter as $c4QNE$useDateFormatter} from "@react-aria/i18n";
-import {useMemo as $c4QNE$useMemo, useState as $c4QNE$useState, useRef as $c4QNE$useRef, useEffect as $c4QNE$useEffect} from "react";
+import {DateFormatter as $keQhS$DateFormatter, toCalendar as $keQhS$toCalendar, toCalendarDate as $keQhS$toCalendarDate, today as $keQhS$today, GregorianCalendar as $keQhS$GregorianCalendar, isSameDay as $keQhS$isSameDay, startOfYear as $keQhS$startOfYear, startOfMonth as $keQhS$startOfMonth, startOfWeek as $keQhS$startOfWeek, maxDate as $keQhS$maxDate, minDate as $keQhS$minDate, isEqualDay as $keQhS$isEqualDay} from "@internationalized/date";
+import {useControlledState as $keQhS$useControlledState} from "@react-stately/utils";
+import {useMemo as $keQhS$useMemo, useState as $keQhS$useState, useRef as $keQhS$useRef} from "react";
 
@@ -9,13 +8,13 @@ function $parcel$export(e, n, v, s) {
 }
-var $39e15dd59c7693c3$exports = {};
+var $77b8da46fac7b53e$exports = {};
 
 
-var $278d1f147362ecd3$exports = {};
+var $131cf43a05231e1e$exports = {};
 
-$parcel$export($278d1f147362ecd3$exports, "useCalendarState", () => $278d1f147362ecd3$export$6d095e787d2b5e1f);
+$parcel$export($131cf43a05231e1e$exports, "useCalendarState", () => $131cf43a05231e1e$export$6d095e787d2b5e1f);
 
-function $f4621bbd7c5fce3b$export$eac50920cf2fd59a(date, minValue, maxValue) {
+function $f62d864046160412$export$eac50920cf2fd59a(date, minValue, maxValue) {
     return minValue != null && date.compare(minValue) < 0 || maxValue != null && date.compare(maxValue) > 0;
 }
-function $f4621bbd7c5fce3b$export$f4a51ff076cc9a09(date, duration, locale, minValue, maxValue) {
+function $f62d864046160412$export$f4a51ff076cc9a09(date, duration, locale, minValue, maxValue) {
     let halfDuration = {
@@ -27,14 +26,14 @@ };
     }
-    let aligned = $f4621bbd7c5fce3b$export$144a00ba6044eb9(date, duration, locale).subtract(halfDuration);
-    return $f4621bbd7c5fce3b$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    let aligned = $f62d864046160412$export$144a00ba6044eb9(date, duration, locale).subtract(halfDuration);
+    return $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $f4621bbd7c5fce3b$export$144a00ba6044eb9(date, duration, locale, minValue, maxValue) {
+function $f62d864046160412$export$144a00ba6044eb9(date, duration, locale, minValue, maxValue) {
     // align to the start of the largest unit
     let aligned = date;
-    if (duration.years) aligned = $c4QNE$startOfYear(date);
-    else if (duration.months) aligned = $c4QNE$startOfMonth(date);
-    else if (duration.weeks) aligned = $c4QNE$startOfWeek(date, locale);
-    return $f4621bbd7c5fce3b$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    if (duration.years) aligned = $keQhS$startOfYear(date);
+    else if (duration.months) aligned = $keQhS$startOfMonth(date);
+    else if (duration.weeks) aligned = $keQhS$startOfWeek(date, locale);
+    return $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $f4621bbd7c5fce3b$export$530edbfc915b2b04(date, duration, locale, minValue, maxValue) {
+function $f62d864046160412$export$530edbfc915b2b04(date, duration, locale, minValue, maxValue) {
     let d = {
@@ -48,13 +47,13 @@ ...duration
     else if (duration.years) d.years--;
-    let aligned = $f4621bbd7c5fce3b$export$144a00ba6044eb9(date, duration, locale).subtract(d);
-    return $f4621bbd7c5fce3b$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
+    let aligned = $f62d864046160412$export$144a00ba6044eb9(date, duration, locale).subtract(d);
+    return $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 }
-function $f4621bbd7c5fce3b$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
-    if (minValue && date.compare(minValue) >= 0) aligned = $c4QNE$maxDate(aligned, $f4621bbd7c5fce3b$export$144a00ba6044eb9($c4QNE$toCalendarDate(minValue), duration, locale));
-    if (maxValue && date.compare(maxValue) <= 0) aligned = $c4QNE$minDate(aligned, $f4621bbd7c5fce3b$export$530edbfc915b2b04($c4QNE$toCalendarDate(maxValue), duration, locale));
+function $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
+    if (minValue && date.compare(minValue) >= 0) aligned = $keQhS$maxDate(aligned, $f62d864046160412$export$144a00ba6044eb9($keQhS$toCalendarDate(minValue), duration, locale));
+    if (maxValue && date.compare(maxValue) <= 0) aligned = $keQhS$minDate(aligned, $f62d864046160412$export$530edbfc915b2b04($keQhS$toCalendarDate(maxValue), duration, locale));
     return aligned;
 }
-function $f4621bbd7c5fce3b$export$4f5203c0d889109e(date, minValue, maxValue) {
-    if (minValue) date = $c4QNE$maxDate(date, $c4QNE$toCalendarDate(minValue));
-    if (maxValue) date = $c4QNE$minDate(date, $c4QNE$toCalendarDate(maxValue));
+function $f62d864046160412$export$4f5203c0d889109e(date, minValue, maxValue) {
+    if (minValue) date = $keQhS$maxDate(date, $keQhS$toCalendarDate(minValue));
+    if (maxValue) date = $keQhS$minDate(date, $keQhS$toCalendarDate(maxValue));
     return date;
@@ -67,7 +66,9 @@ }
 
-
-function $278d1f147362ecd3$export$6d095e787d2b5e1f(props) {
-    let defaultFormatter = $c4QNE$useDateFormatter();
-    let resolvedOptions = $c4QNE$useMemo(()=>defaultFormatter.resolvedOptions()
+function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
+    let defaultFormatter = $keQhS$useMemo(()=>new $keQhS$DateFormatter(props.locale)
     , [
+        props.locale
+    ]);
+    let resolvedOptions = $keQhS$useMemo(()=>defaultFormatter.resolvedOptions()
+    , [
         defaultFormatter
@@ -78,3 +79,3 @@ ]);
     } , minValue: minValue , maxValue: maxValue , selectionAlignment: selectionAlignment  } = props;
-    let calendar = $c4QNE$useMemo(()=>createCalendar(resolvedOptions.calendar)
+    let calendar = $keQhS$useMemo(()=>createCalendar(resolvedOptions.calendar)
     , [
@@ -84,4 +85,4 @@ createCalendar,
     ]);
-    let [value, setControlledValue] = $c4QNE$useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarDateValue = $c4QNE$useMemo(()=>value ? $c4QNE$toCalendar($c4QNE$toCalendarDate(value), calendar) : null
+    let [value, setControlledValue] = $keQhS$useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarDateValue = $keQhS$useMemo(()=>value ? $keQhS$toCalendar($keQhS$toCalendarDate(value), calendar) : null
     , [
@@ -91,3 +92,3 @@ value,
     ]);
-    let timeZone = $c4QNE$useMemo(()=>value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone
+    let timeZone = $keQhS$useMemo(()=>value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone
     , [
@@ -97,4 +98,12 @@ value,
     ]);
-    let defaultDate = $c4QNE$useMemo(()=>calendarDateValue || $f4621bbd7c5fce3b$export$4f5203c0d889109e($c4QNE$toCalendar($c4QNE$today(timeZone), calendar), minValue, maxValue)
+    let focusedCalendarDate = $keQhS$useMemo(()=>props.focusedValue ? $f62d864046160412$export$4f5203c0d889109e($keQhS$toCalendar($keQhS$toCalendarDate(props.focusedValue), calendar), minValue, maxValue) : undefined
     , [
+        props.focusedValue,
+        calendar,
+        minValue,
+        maxValue
+    ]);
+    let defaultFocusedCalendarDate = $keQhS$useMemo(()=>$f62d864046160412$export$4f5203c0d889109e(props.defaultFocusedValue ? $keQhS$toCalendar($keQhS$toCalendarDate(props.defaultFocusedValue), calendar) : calendarDateValue || $keQhS$toCalendar($keQhS$today(timeZone), calendar), minValue, maxValue)
+    , [
+        props.defaultFocusedValue,
         calendarDateValue,
@@ -106,16 +115,16 @@ timeZone,
     ]);
-    let [startDate, setStartDate] = $c4QNE$useState(()=>{
+    let [focusedDate, setFocusedDate] = $keQhS$useControlledState(focusedCalendarDate, defaultFocusedCalendarDate, props.onFocusChange);
+    let [startDate, setStartDate] = $keQhS$useState(()=>{
         switch(selectionAlignment){
             case 'start':
-                return $f4621bbd7c5fce3b$export$144a00ba6044eb9(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $f62d864046160412$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue);
             case 'end':
-                return $f4621bbd7c5fce3b$export$530edbfc915b2b04(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $f62d864046160412$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue);
             case 'center':
             default:
-                return $f4621bbd7c5fce3b$export$f4a51ff076cc9a09(defaultDate, visibleDuration, locale, minValue, maxValue);
+                return $f62d864046160412$export$f4a51ff076cc9a09(focusedDate, visibleDuration, locale, minValue, maxValue);
         }
     });
-    let [focusedDate, setFocusedDate] = $c4QNE$useState(defaultDate);
-    let [isFocused, setFocused] = $c4QNE$useState(props.autoFocus || false);
-    let endDate = $c4QNE$useMemo(()=>startDate.add(visibleDuration).subtract({
+    let [isFocused, setFocused] = $keQhS$useState(props.autoFocus || false);
+    let endDate = $keQhS$useMemo(()=>startDate.add(visibleDuration).subtract({
             days: 1
@@ -128,25 +137,16 @@ })
     // Reset focused date and visible range when calendar changes.
-    let lastCalendarIdentifier = $c4QNE$useRef(calendar.identifier);
-    $c4QNE$useEffect(()=>{
-        if (calendar.identifier !== lastCalendarIdentifier.current) {
-            let newFocusedDate = $c4QNE$toCalendar(focusedDate, calendar);
-            setStartDate($f4621bbd7c5fce3b$export$f4a51ff076cc9a09(newFocusedDate, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate(newFocusedDate);
-            lastCalendarIdentifier.current = calendar.identifier;
-        }
-    }, [
-        calendar,
-        focusedDate,
-        visibleDuration,
-        locale,
-        minValue,
-        maxValue
-    ]);
+    let lastCalendarIdentifier = $keQhS$useRef(calendar.identifier);
+    if (calendar.identifier !== lastCalendarIdentifier.current) {
+        let newFocusedDate = $keQhS$toCalendar(focusedDate, calendar);
+        setStartDate($f62d864046160412$export$f4a51ff076cc9a09(newFocusedDate, visibleDuration, locale, minValue, maxValue));
+        setFocusedDate(newFocusedDate);
+        lastCalendarIdentifier.current = calendar.identifier;
+    }
+    if ($f62d864046160412$export$eac50920cf2fd59a(focusedDate, minValue, maxValue)) // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
+    setFocusedDate($f62d864046160412$export$4f5203c0d889109e(focusedDate, minValue, maxValue));
+    else if (focusedDate.compare(startDate) < 0) setStartDate($f62d864046160412$export$530edbfc915b2b04(focusedDate, visibleDuration, locale, minValue, maxValue));
+    else if (focusedDate.compare(startDate.add(visibleDuration)) >= 0) setStartDate($f62d864046160412$export$144a00ba6044eb9(focusedDate, visibleDuration, locale, minValue, maxValue));
     // Sets focus to a specific cell date
     function focusCell(date) {
-        // date = constrain(focusedDate, date, visibleDuration, locale, minValue, maxValue);
-        date = $f4621bbd7c5fce3b$export$4f5203c0d889109e(date, minValue, maxValue);
-        let next = startDate.add(visibleDuration);
-        if (date.compare(startDate) < 0) setStartDate($f4621bbd7c5fce3b$export$530edbfc915b2b04(date, visibleDuration, locale, minValue, maxValue));
-        else if (date.compare(next) >= 0) setStartDate($f4621bbd7c5fce3b$export$144a00ba6044eb9(date, visibleDuration, locale, minValue, maxValue));
+        date = $f62d864046160412$export$4f5203c0d889109e(date, minValue, maxValue);
         setFocusedDate(date);
@@ -158,3 +158,3 @@ }
             // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-            newValue = $c4QNE$toCalendar(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new $c4QNE$GregorianCalendar());
+            newValue = $keQhS$toCalendar(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new $keQhS$GregorianCalendar());
             // Preserve time if the input value had one.
@@ -177,3 +177,3 @@ if (value && 'hour' in value) setControlledValue(value.set(newValue));
         setFocusedDate (date) {
-            setFocusedDate(date);
+            focusCell(date);
             setFocused(true);
@@ -205,9 +205,9 @@ },
             let start = startDate.add(visibleDuration);
-            setStartDate($f4621bbd7c5fce3b$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate($f4621bbd7c5fce3b$export$4f5203c0d889109e(focusedDate.add(visibleDuration), minValue, maxValue));
+            setFocusedDate($f62d864046160412$export$4f5203c0d889109e(focusedDate.add(visibleDuration), minValue, maxValue));
+            setStartDate($f62d864046160412$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
         },
         focusPreviousPage () {
             let start = startDate.subtract(visibleDuration);
-            setStartDate($f4621bbd7c5fce3b$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-            setFocusedDate($f4621bbd7c5fce3b$export$4f5203c0d889109e(focusedDate.subtract(visibleDuration), minValue, maxValue));
+            setFocusedDate($f62d864046160412$export$4f5203c0d889109e(focusedDate.subtract(visibleDuration), minValue, maxValue));
+            setStartDate($f62d864046160412$export$5bb865b12696a77d(focusedDate, start, visibleDuration, locale, minValue, maxValue));
         },
@@ -247,15 +247,18 @@ focusPageStart () {
         isInvalid (date) {
-            return $f4621bbd7c5fce3b$export$eac50920cf2fd59a(date, minValue, maxValue);
+            return $f62d864046160412$export$eac50920cf2fd59a(date, minValue, maxValue);
         },
         isSelected (date) {
-            return calendarDateValue != null && $c4QNE$isSameDay(date, calendarDateValue);
+            return calendarDateValue != null && $keQhS$isSameDay(date, calendarDateValue) && !this.isCellDisabled(date) && !this.isCellUnavailable(date);
         },
         isCellFocused (date) {
-            return isFocused && focusedDate && $c4QNE$isSameDay(date, focusedDate);
+            return isFocused && focusedDate && $keQhS$isSameDay(date, focusedDate);
         },
         isCellDisabled (date) {
-            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || $f4621bbd7c5fce3b$export$eac50920cf2fd59a(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 $f4621bbd7c5fce3b$export$eac50920cf2fd59a(startDate.subtract({
+            return this.isInvalid(startDate.subtract({
                 days: 1
@@ -265,3 +268,3 @@ }), minValue, maxValue);
         isNextVisibleRangeInvalid () {
-            return $f4621bbd7c5fce3b$export$eac50920cf2fd59a(endDate.add({
+            return this.isInvalid(endDate.add({
                 days: 1
@@ -274,5 +277,5 @@ }), minValue, maxValue);
 
-var $303e70b3e1864f0a$exports = {};
+var $9a36b6ba2fb1a7c5$exports = {};
 
-$parcel$export($303e70b3e1864f0a$exports, "useRangeCalendarState", () => $303e70b3e1864f0a$export$9a987164d97ecc90);
+$parcel$export($9a36b6ba2fb1a7c5$exports, "useRangeCalendarState", () => $9a36b6ba2fb1a7c5$export$9a987164d97ecc90);
 
@@ -283,11 +286,11 @@
 
-function $303e70b3e1864f0a$export$9a987164d97ecc90(props) {
+function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
     let { value: valueProp , defaultValue: defaultValue , onChange: onChange , createCalendar: createCalendar , locale: locale , visibleDuration: visibleDuration = {
         months: 1
     } , minValue: minValue , maxValue: maxValue , ...calendarProps } = props;
-    let [value, setValue] = $c4QNE$useControlledState(valueProp, defaultValue, onChange);
-    let [anchorDate, setAnchorDate] = $c4QNE$useState(null);
+    let [value, setValue] = $keQhS$useControlledState(valueProp, defaultValue || null, onChange);
+    let [anchorDate, setAnchorDateState] = $keQhS$useState(null);
     let alignment = 'center';
     if (value && value.start && value.end) {
-        let start = $f4621bbd7c5fce3b$export$f4a51ff076cc9a09($c4QNE$toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
+        let start = $f62d864046160412$export$f4a51ff076cc9a09($keQhS$toCalendarDate(value.start), visibleDuration, locale, minValue, maxValue);
         let end = start.add(visibleDuration).subtract({
@@ -298,3 +301,18 @@ days: 1
     }
-    let calendar = $278d1f147362ecd3$export$6d095e787d2b5e1f({
+    // Available range must be stored in a ref so we have access to the updated version immediately in `isInvalid`.
+    let availableRangeRef = $keQhS$useRef(null);
+    let [availableRange, setAvailableRange] = $keQhS$useState(null);
+    let min = $keQhS$useMemo(()=>{
+        return $keQhS$maxDate(minValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.start);
+    }, [
+        minValue,
+        availableRange
+    ]);
+    let max = $keQhS$useMemo(()=>{
+        return $keQhS$minDate(maxValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.end);
+    }, [
+        maxValue,
+        availableRange
+    ]);
+    let calendar = $131cf43a05231e1e$export$6d095e787d2b5e1f({
         ...calendarProps,
@@ -305,7 +323,34 @@ value: value && value.start,
         visibleDuration: visibleDuration,
-        minValue: minValue,
-        maxValue: maxValue,
+        minValue: min,
+        maxValue: max,
         selectionAlignment: alignment
     });
-    let highlightedRange = anchorDate ? $303e70b3e1864f0a$var$makeRange(anchorDate, calendar.focusedDate) : value && $303e70b3e1864f0a$var$makeRange(value.start, value.end);
+    let updateAvailableRange = (date)=>{
+        if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+            availableRangeRef.current = {
+                start: $9a36b6ba2fb1a7c5$var$nextUnavailableDate(date, calendar, -1),
+                end: $9a36b6ba2fb1a7c5$var$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 = $keQhS$useRef(calendar.visibleRange);
+    if (!$keQhS$isEqualDay(calendar.visibleRange.start, lastVisibleRange.current.start) || !$keQhS$isEqualDay(calendar.visibleRange.end, lastVisibleRange.current.end)) {
+        updateAvailableRange(anchorDate);
+        lastVisibleRange.current = calendar.visibleRange;
+    }
+    let setAnchorDate = (date)=>{
+        if (date) {
+            setAnchorDateState(date);
+            updateAvailableRange(date);
+        } else {
+            setAnchorDateState(null);
+            updateAvailableRange(null);
+        }
+    };
+    let highlightedRange = anchorDate ? $9a36b6ba2fb1a7c5$var$makeRange(anchorDate, calendar.focusedDate) : value && $9a36b6ba2fb1a7c5$var$makeRange(value.start, value.end);
     let selectDate = (date)=>{
@@ -315,6 +360,6 @@ if (props.isReadOnly) return;
         else {
-            let range = $303e70b3e1864f0a$var$makeRange(anchorDate, date);
+            let range = $9a36b6ba2fb1a7c5$var$makeRange(anchorDate, date);
             setValue({
-                start: $303e70b3e1864f0a$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
-                end: $303e70b3e1864f0a$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
+                start: $9a36b6ba2fb1a7c5$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
+                end: $9a36b6ba2fb1a7c5$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
             });
@@ -324,3 +369,3 @@ setAnchorDate(null);
     };
-    let [isDragging, setDragging] = $c4QNE$useState(false);
+    let [isDragging, setDragging] = $keQhS$useState(false);
     return {
@@ -341,4 +386,8 @@ ...calendar,
         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) {
+            var ref, ref1;
+            return calendar.isInvalid(date) || $f62d864046160412$export$eac50920cf2fd59a(date, (ref = availableRangeRef.current) === null || ref === void 0 ? void 0 : ref.start, (ref1 = availableRangeRef.current) === null || ref1 === void 0 ? void 0 : ref1.end);
+        },
         isDragging: isDragging,
@@ -348,3 +397,3 @@ setDragging: setDragging
 }
-function $303e70b3e1864f0a$var$makeRange(start, end) {
+function $9a36b6ba2fb1a7c5$var$makeRange(start, end) {
     if (!start || !end) return null;
@@ -356,10 +405,10 @@ if (end.compare(start) < 0) [start, end] = [
     return {
-        start: $c4QNE$toCalendarDate(start),
-        end: $c4QNE$toCalendarDate(end)
+        start: $keQhS$toCalendarDate(start),
+        end: $keQhS$toCalendarDate(end)
     };
 }
-function $303e70b3e1864f0a$var$convertValue(newValue, oldValue) {
+function $9a36b6ba2fb1a7c5$var$convertValue(newValue, oldValue) {
     // 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 = $c4QNE$toCalendar(newValue, (oldValue === null || oldValue === void 0 ? void 0 : oldValue.calendar) || new $c4QNE$GregorianCalendar());
+    newValue = $keQhS$toCalendar(newValue, (oldValue === null || oldValue === void 0 ? void 0 : oldValue.calendar) || new $keQhS$GregorianCalendar());
     // Preserve time if the input value had one.
@@ -369,2 +418,14 @@ if (oldValue && 'hour' in oldValue) return oldValue.set(newValue);
 }
+function $9a36b6ba2fb1a7c5$var$nextUnavailableDate(anchorDate, state, dir) {
+    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;
+}
 
@@ -374,3 +435,3 @@
 
-export {$278d1f147362ecd3$export$6d095e787d2b5e1f as useCalendarState, $303e70b3e1864f0a$export$9a987164d97ecc90 as useRangeCalendarState};
+export {$131cf43a05231e1e$export$6d095e787d2b5e1f as useCalendarState, $9a36b6ba2fb1a7c5$export$9a987164d97ecc90 as useRangeCalendarState};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,62 +0,137 @@
-import { CalendarDate, Calendar, Duration } from "@internationalized/date";
+import { CalendarDate, Calendar, DateDuration } from "@internationalized/date";
 import { DateValue, CalendarProps, RangeCalendarProps } from "@react-types/calendar";
 import { RangeValue } from "@react-types/shared";
 export interface CalendarStateBase {
-    isDisabled: boolean;
-    isReadOnly: boolean;
-    visibleRange: RangeValue<CalendarDate>;
-    timeZone: string;
-    focusedDate: CalendarDate;
+    /** Whether the calendar is disabled. */
+    readonly isDisabled: boolean;
+    /** Whether the calendar is in a read only state. */
+    readonly isReadOnly: boolean;
+    /** The date range that is currently visible in the calendar. */
+    readonly visibleRange: RangeValue<CalendarDate>;
+    /** The time zone of the dates currently being displayed. */
+    readonly timeZone: string;
+    /** The currently focused date. */
+    readonly focusedDate: CalendarDate;
+    /** Sets the focused date. */
     setFocusedDate(value: CalendarDate): void;
+    /** Moves focus to the next calendar date. */
     focusNextDay(): void;
+    /** Moves focus to the previous calendar date. */
     focusPreviousDay(): void;
+    /** Moves focus to the next row of dates, e.g. the next week. */
     focusNextRow(): void;
+    /** Moves focus to the previous row of dates, e.g. the previous work. */
     focusPreviousRow(): void;
+    /** Moves focus to the next page of dates, e.g. the next month if one month is visible. */
     focusNextPage(): void;
+    /** Moves focus to the previous page of dates, e.g. the previous month if one month is visible. */
     focusPreviousPage(): void;
+    /** Moves focus to the start of the current page of dates, e.g. the start of the first visible month. */
     focusPageStart(): void;
+    /** Moves focus to the end of the current page of dates, e.g. the end of the last visible month. */
     focusPageEnd(): void;
+    /**
+     * Moves focus to the next larger section of dates based on what is currently displayed.
+     * If days are displayed, then moves to the next visible range. If weeks are displayed, then
+     * moves to the next month. If months or years are displayed, moves to the next year.
+     */
     focusNextSection(): void;
+    /**
+     * Moves focus to the previous larger section of dates based on what is currently displayed.
+     * If days are displayed, then moves to the previous visible range. If weeks are displayed, then
+     * moves to the previous month. If months or years are displayed, moves to the previous year.
+     */
     focusPreviousSection(): void;
-    focusNextPage(): void;
-    focusPreviousPage(): void;
+    /** Selects the currently focused date. */
     selectFocusedDate(): void;
+    /** Selects the given date. */
     selectDate(date: CalendarDate): void;
-    isFocused: boolean;
+    /** Whether focus is currently within the calendar. */
+    readonly isFocused: boolean;
+    /** Sets whether focus is currently within the calendar. */
     setFocused(value: boolean): void;
+    /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
     isInvalid(date: CalendarDate): boolean;
+    /** Returns whether the given date is currently selected. */
     isSelected(date: CalendarDate): boolean;
+    /** Returns whether the given date is currently focused. */
     isCellFocused(date: CalendarDate): boolean;
+    /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
     isCellDisabled(date: CalendarDate): boolean;
+    /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
+    isCellUnavailable(date: CalendarDate): boolean;
+    /** Returns whether the previous visible date range is allowed to be selected according to the `minValue` prop. */
     isPreviousVisibleRangeInvalid(): boolean;
+    /** Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop. */
     isNextVisibleRangeInvalid(): boolean;
 }
 export interface CalendarState extends CalendarStateBase {
-    value: CalendarDate;
+    /** The currently selected date. */
+    readonly value: CalendarDate;
+    /** Sets the currently selected date. */
     setValue(value: CalendarDate): void;
 }
 export interface RangeCalendarState extends CalendarStateBase {
-    value: RangeValue<DateValue>;
+    /** The currently selected date range. */
+    readonly value: RangeValue<DateValue>;
+    /** Sets the currently selected date range. */
     setValue(value: RangeValue<DateValue>): void;
+    /** Highlights the given date during selection, e.g. by hovering or dragging. */
     highlightDate(date: CalendarDate): void;
-    anchorDate: CalendarDate | null;
+    /** The current anchor date that the user clicked on to begin range selection. */
+    readonly anchorDate: CalendarDate | null;
+    /** Sets the anchor date that the user clicked on to begin range selection. */
     setAnchorDate(date: CalendarDate | null): void;
-    highlightedRange: RangeValue<CalendarDate>;
-    isDragging: boolean;
+    /** The currently highlighted date range. */
+    readonly highlightedRange: RangeValue<CalendarDate>;
+    /** Whether the user is currently dragging over the calendar. */
+    readonly isDragging: boolean;
+    /** Sets whether the user is dragging over the calendar. */
     setDragging(isDragging: boolean): void;
 }
-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;
-interface RangeCalendarStateOptions<T extends DateValue> extends RangeCalendarProps<T> {
+/**
+ * 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;
+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;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-stately/calendar",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "Spectrum UI components in React",
@@ -21,7 +21,7 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-alpha.3",
-    "@react-aria/i18n": "^3.3.6",
+    "@internationalized/date": "3.0.0-alpha.4",
+    "@react-aria/i18n": "^3.3.8",
     "@react-stately/utils": "^3.4.1",
-    "@react-types/calendar": "3.0.0-alpha.3",
-    "@react-types/datepicker": "3.0.0-alpha.3",
+    "@react-types/calendar": "3.0.0-alpha.4",
+    "@react-types/datepicker": "3.0.0-alpha.4",
     "@react-types/shared": "^3.11.1",
@@ -36,3 +36,3 @@ "date-fns": "^1.30.1"
   },
-  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
+  "gitHead": "e7708349a637642a30d33a11ca4a75ad5829eaa3"
 }

src/types.ts

@@ -18,29 +18,63 @@ /*
 export interface CalendarStateBase {
-  isDisabled: boolean,
-  isReadOnly: boolean,
-  visibleRange: RangeValue<CalendarDate>,
-  timeZone: string,
-  focusedDate: CalendarDate,
+  /** Whether the calendar is disabled. */
+  readonly isDisabled: boolean,
+  /** Whether the calendar is in a read only state. */
+  readonly isReadOnly: boolean,
+  /** The date range that is currently visible in the calendar. */
+  readonly visibleRange: RangeValue<CalendarDate>,
+  /** The time zone of the dates currently being displayed. */
+  readonly timeZone: string,
+  /** The currently focused date. */
+  readonly focusedDate: CalendarDate,
+  /** Sets the focused date. */
   setFocusedDate(value: CalendarDate): void,
+  /** Moves focus to the next calendar date. */
   focusNextDay(): void,
+  /** Moves focus to the previous calendar date. */
   focusPreviousDay(): void,
+  /** Moves focus to the next row of dates, e.g. the next week. */
   focusNextRow(): void,
+  /** Moves focus to the previous row of dates, e.g. the previous work. */
   focusPreviousRow(): void,
+  /** Moves focus to the next page of dates, e.g. the next month if one month is visible. */
   focusNextPage(): void,
+  /** Moves focus to the previous page of dates, e.g. the previous month if one month is visible. */
   focusPreviousPage(): void,
+  /** Moves focus to the start of the current page of dates, e.g. the start of the first visible month. */
   focusPageStart(): void,
+  /** Moves focus to the end of the current page of dates, e.g. the end of the last visible month. */
   focusPageEnd(): void,
+  /**
+   * Moves focus to the next larger section of dates based on what is currently displayed.
+   * If days are displayed, then moves to the next visible range. If weeks are displayed, then
+   * moves to the next month. If months or years are displayed, moves to the next year.
+   */
   focusNextSection(): void,
+  /**
+   * Moves focus to the previous larger section of dates based on what is currently displayed.
+   * If days are displayed, then moves to the previous visible range. If weeks are displayed, then
+   * moves to the previous month. If months or years are displayed, moves to the previous year.
+   */
   focusPreviousSection(): void,
-  focusNextPage(): void,
-  focusPreviousPage(): void,
+  /** Selects the currently focused date. */
   selectFocusedDate(): void,
+  /** Selects the given date. */
   selectDate(date: CalendarDate): void,
-  isFocused: boolean,
+  /** Whether focus is currently within the calendar. */
+  readonly isFocused: boolean,
+  /** Sets whether focus is currently within the calendar. */
   setFocused(value: boolean): void,
+  /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
   isInvalid(date: CalendarDate): boolean,
+  /** Returns whether the given date is currently selected. */
   isSelected(date: CalendarDate): boolean,
+  /** Returns whether the given date is currently focused. */
   isCellFocused(date: CalendarDate): boolean,
+  /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
   isCellDisabled(date: CalendarDate): boolean,
+  /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
+  isCellUnavailable(date: CalendarDate): boolean,
+  /** Returns whether the previous visible date range is allowed to be selected according to the `minValue` prop. */
   isPreviousVisibleRangeInvalid(): boolean,
+  /** Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop. */
   isNextVisibleRangeInvalid(): boolean
@@ -50,3 +84,5 @@ }
 export interface CalendarState extends CalendarStateBase {
-  value: CalendarDate,
+  /** The currently selected date. */
+  readonly value: CalendarDate,
+  /** Sets the currently selected date. */
   setValue(value: CalendarDate): void
@@ -56,10 +92,18 @@ }
 export interface RangeCalendarState extends CalendarStateBase {
-  value: RangeValue<DateValue>,
+  /** The currently selected date range. */
+  readonly value: RangeValue<DateValue>,
+  /** Sets the currently selected date range. */
   setValue(value: RangeValue<DateValue>): void,
+  /** Highlights the given date during selection, e.g. by hovering or dragging. */
   highlightDate(date: CalendarDate): void,
-  anchorDate: CalendarDate | null,
+  /** The current anchor date that the user clicked on to begin range selection. */
+  readonly anchorDate: CalendarDate | null,
+  /** Sets the anchor date that the user clicked on to begin range selection. */
   setAnchorDate(date: CalendarDate | null): void,
-  highlightedRange: RangeValue<CalendarDate>,
-  isDragging: boolean,
+  /** The currently highlighted date range. */
+  readonly highlightedRange: RangeValue<CalendarDate>,
+  /** Whether the user is currently dragging over the calendar. */
+  readonly isDragging: boolean,
+  /** Sets whether the user is dragging over the calendar. */
   setDragging(isDragging: boolean): void
 }

src/useCalendarState.ts

@@ -17,3 +17,4 @@ /*
   CalendarDate,
-  Duration,
+  DateDuration,
+  DateFormatter,
   GregorianCalendar,
@@ -28,14 +29,29 @@ isSameDay,
 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]);
@@ -56,15 +72,28 @@ let {
   let timeZone = useMemo(() => value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone, [value, resolvedOptions.timeZone]);
-  let defaultDate = useMemo(() => calendarDateValue || constrainValue(toCalendar(today(timeZone), calendar), minValue, maxValue), [calendarDateValue, timeZone, calendar, minValue, maxValue]);
+  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);
@@ -76,23 +105,21 @@
   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);
@@ -128,3 +155,3 @@ }
     setFocusedDate(date) {
-      setFocusedDate(date);
+      focusCell(date);
       setFocused(true);
@@ -154,9 +181,9 @@ },
       let start = startDate.add(visibleDuration);
+      setFocusedDate(constrainValue(focusedDate.add(visibleDuration), minValue, maxValue));
       setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-      setFocusedDate(constrainValue(focusedDate.add(visibleDuration), minValue, maxValue));
     },
     focusPreviousPage() {
       let start = startDate.subtract(visibleDuration);
+      setFocusedDate(constrainValue(focusedDate.subtract(visibleDuration), minValue, maxValue));
       setStartDate(constrainStart(focusedDate, start, visibleDuration, locale, minValue, maxValue));
-      setFocusedDate(constrainValue(focusedDate.subtract(visibleDuration), minValue, maxValue));
     },
@@ -199,3 +226,3 @@ focusPageStart() {
     isSelected(date) {
-      return calendarDateValue != null && isSameDay(date, calendarDateValue);
+      return calendarDateValue != null && isSameDay(date, calendarDateValue) && !this.isCellDisabled(date) && !this.isCellUnavailable(date);
     },
@@ -206,11 +233,14 @@ isCellFocused(date) {
     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);
     }
   };
 }

src/useRangeCalendarState.ts

@@ -13,27 +13,42 @@ /*
 
-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';
@@ -49,2 +64,8 @@ if (value && value.start && value.end) {
 
+  // 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({
@@ -56,7 +77,37 @@ ...calendarProps,
     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);
@@ -99,4 +150,7 @@ let selectDate = (date: CalendarDate) => {
     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,
@@ -131,1 +185,17 @@ setDragging
 }
+
+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;
+}

src/utils.ts

@@ -14,3 +14,3 @@ /*
   CalendarDate,
-  Duration,
+  DateDuration,
   maxDate,
@@ -30,4 +30,4 @@ minDate,
 
-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) {
@@ -44,3 +44,3 @@ halfDuration[key] = Math.floor(duration[key] / 2);
 
-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
@@ -59,3 +59,3 @@ let aligned = date;
 
-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};
@@ -80,3 +80,3 @@ // subtract 1 from the smallest unit
   aligned: CalendarDate,
-  duration: Duration,
+  duration: DateDuration,
   locale: string,
@@ -83,0 +83,0 @@ minValue: DateValue,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168908

increased by31.62%

Lines of code

1542

increased by28.18%

Dependency changes

• + Added@internationalized/date@3.0.0-alpha.4(transitive)

• + Added@react-types/calendar@3.0.0-alpha.4(transitive)

• + Added@react-types/datepicker@3.0.0-alpha.4(transitive)

• - Removed@internationalized/date@3.0.0-alpha.3(transitive)

• - Removed@react-types/calendar@3.0.0-alpha.3(transitive)

• - Removed@react-types/datepicker@3.0.0-alpha.3(transitive)

• Updated@internationalized/date@3.0.0-alpha.4

• Updated@react-aria/i18n@^3.3.8

• Updated@react-types/calendar@3.0.0-alpha.4

• Updated@react-types/datepicker@3.0.0-alpha.4