@react-stately/calendar - npm Package Compare versions

Comparing version 3.5.1 to 3.5.2

dist/types.d.ts

@@ -12,5 +12,5 @@ import { CalendarDate, Calendar, DateDuration } from "@internationalized/date";
     /** The minimum allowed date that a user may select. */
-    readonly minValue?: DateValue;
+    readonly minValue?: DateValue | null;
     /** The maximum allowed date that a user may select. */
-    readonly maxValue?: DateValue;
+    readonly maxValue?: DateValue | null;
     /** The time zone of the dates currently being displayed. */
@@ -22,3 +22,3 @@ readonly timeZone: string;
      */
-    readonly validationState: ValidationState;
+    readonly validationState: ValidationState | null;
     /** Whether the calendar is invalid. */
@@ -98,5 +98,5 @@ readonly isValueInvalid: boolean;
     /** The currently selected date range. */
-    readonly value: RangeValue<DateValue>;
+    readonly value: RangeValue<DateValue> | null;
     /** Sets the currently selected date range. */
-    setValue(value: RangeValue<DateValue>): void;
+    setValue(value: RangeValue<DateValue> | null): void;
     /** Highlights the given date during selection, e.g. by hovering or dragging. */
@@ -109,3 +109,3 @@ highlightDate(date: CalendarDate): void;
     /** The currently highlighted date range. */
-    readonly highlightedRange: RangeValue<CalendarDate>;
+    readonly highlightedRange: RangeValue<CalendarDate> | null;
     /** Whether the user is currently dragging over the calendar. */
@@ -112,0 +112,0 @@ readonly isDragging: boolean;

dist/useCalendarState.main.js

@@ -40,3 +40,4 @@ var $4301262d71f567b9$exports = require("./utils.main.js");
     ]);
-    let [value, setControlledValue] = (0, $cpRwL$reactstatelyutils.useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [value, setControlledValue] = (0, $cpRwL$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let calendarDateValue = (0, $cpRwL$react.useMemo)(()=>value ? (0, $cpRwL$internationalizeddate.toCalendar)((0, $cpRwL$internationalizeddate.toCalendarDate)(value), calendar) : null, [
@@ -107,15 +108,16 @@ value,
         if (!props.isDisabled && !props.isReadOnly) {
-            if (newValue === null) {
+            let localValue = newValue;
+            if (localValue === null) {
                 setControlledValue(null);
                 return;
             }
-            newValue = (0, $4301262d71f567b9$exports.constrainValue)(newValue, minValue, maxValue);
-            newValue = (0, $4301262d71f567b9$exports.previousAvailableDate)(newValue, startDate, isDateUnavailable);
-            if (!newValue) return;
+            localValue = (0, $4301262d71f567b9$exports.constrainValue)(localValue, minValue, maxValue);
+            localValue = (0, $4301262d71f567b9$exports.previousAvailableDate)(localValue, startDate, isDateUnavailable);
+            if (!localValue) return;
             // The display calendar should not have any effect on the emitted value.
             // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-            newValue = (0, $cpRwL$internationalizeddate.toCalendar)(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new (0, $cpRwL$internationalizeddate.GregorianCalendar)());
+            localValue = (0, $cpRwL$internationalizeddate.toCalendar)(localValue, (value === null || value === void 0 ? void 0 : value.calendar) || new (0, $cpRwL$internationalizeddate.GregorianCalendar)());
             // Preserve time if the input value had one.
-            if (value && 'hour' in value) setControlledValue(value.set(newValue));
-            else setControlledValue(newValue);
+            if (value && 'hour' in value) setControlledValue(value.set(localValue));
+            else setControlledValue(localValue);
         }
@@ -142,5 +144,6 @@ }
     ]);
+    var _props_isDisabled, _props_isReadOnly;
     return {
-        isDisabled: props.isDisabled,
-        isReadOnly: props.isReadOnly,
+        isDisabled: (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : false,
+        isReadOnly: (_props_isReadOnly = props.isReadOnly) !== null && _props_isReadOnly !== void 0 ? _props_isReadOnly : false,
         value: calendarDateValue,
@@ -248,6 +251,6 @@ setValue: setValue,
         isCellDisabled (date) {
-            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date);
         },
         isCellUnavailable (date) {
-            return props.isDateUnavailable && props.isDateUnavailable(date);
+            return props.isDateUnavailable ? props.isDateUnavailable(date) : false;
         },
@@ -258,3 +261,3 @@ isPreviousVisibleRangeInvalid () {
             });
-            return (0, $cpRwL$internationalizeddate.isSameDay)(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
+            return (0, $cpRwL$internationalizeddate.isSameDay)(prev, startDate) || this.isInvalid(prev);
         },
@@ -267,3 +270,3 @@ isNextVisibleRangeInvalid () {
             });
-            return (0, $cpRwL$internationalizeddate.isSameDay)(next, endDate) || this.isInvalid(next, minValue, maxValue);
+            return (0, $cpRwL$internationalizeddate.isSameDay)(next, endDate) || this.isInvalid(next);
         },
@@ -270,0 +273,0 @@ getDatesInWeek (weekIndex, from = startDate) {

dist/useCalendarState.module.js

@@ -34,3 +34,4 @@ import {alignCenter as $f62d864046160412$export$f4a51ff076cc9a09, alignEnd as $f62d864046160412$export$530edbfc915b2b04, alignStart as $f62d864046160412$export$144a00ba6044eb9, constrainStart as $f62d864046160412$export$5bb865b12696a77d, constrainValue as $f62d864046160412$export$4f5203c0d889109e, isInvalid as $f62d864046160412$export$eac50920cf2fd59a, previousAvailableDate as $f62d864046160412$export$a1d3911297b952d7} from "./utils.module.js";
     ]);
-    let [value, setControlledValue] = (0, $7G4ZY$useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [value, setControlledValue] = (0, $7G4ZY$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let calendarDateValue = (0, $7G4ZY$useMemo)(()=>value ? (0, $7G4ZY$toCalendar)((0, $7G4ZY$toCalendarDate)(value), calendar) : null, [
@@ -101,15 +102,16 @@ value,
         if (!props.isDisabled && !props.isReadOnly) {
-            if (newValue === null) {
+            let localValue = newValue;
+            if (localValue === null) {
                 setControlledValue(null);
                 return;
             }
-            newValue = (0, $f62d864046160412$export$4f5203c0d889109e)(newValue, minValue, maxValue);
-            newValue = (0, $f62d864046160412$export$a1d3911297b952d7)(newValue, startDate, isDateUnavailable);
-            if (!newValue) return;
+            localValue = (0, $f62d864046160412$export$4f5203c0d889109e)(localValue, minValue, maxValue);
+            localValue = (0, $f62d864046160412$export$a1d3911297b952d7)(localValue, startDate, isDateUnavailable);
+            if (!localValue) return;
             // The display calendar should not have any effect on the emitted value.
             // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-            newValue = (0, $7G4ZY$toCalendar)(newValue, (value === null || value === void 0 ? void 0 : value.calendar) || new (0, $7G4ZY$GregorianCalendar)());
+            localValue = (0, $7G4ZY$toCalendar)(localValue, (value === null || value === void 0 ? void 0 : value.calendar) || new (0, $7G4ZY$GregorianCalendar)());
             // Preserve time if the input value had one.
-            if (value && 'hour' in value) setControlledValue(value.set(newValue));
-            else setControlledValue(newValue);
+            if (value && 'hour' in value) setControlledValue(value.set(localValue));
+            else setControlledValue(localValue);
         }
@@ -136,5 +138,6 @@ }
     ]);
+    var _props_isDisabled, _props_isReadOnly;
     return {
-        isDisabled: props.isDisabled,
-        isReadOnly: props.isReadOnly,
+        isDisabled: (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : false,
+        isReadOnly: (_props_isReadOnly = props.isReadOnly) !== null && _props_isReadOnly !== void 0 ? _props_isReadOnly : false,
         value: calendarDateValue,
@@ -242,6 +245,6 @@ setValue: setValue,
         isCellDisabled (date) {
-            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+            return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date);
         },
         isCellUnavailable (date) {
-            return props.isDateUnavailable && props.isDateUnavailable(date);
+            return props.isDateUnavailable ? props.isDateUnavailable(date) : false;
         },
@@ -252,3 +255,3 @@ isPreviousVisibleRangeInvalid () {
             });
-            return (0, $7G4ZY$isSameDay)(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
+            return (0, $7G4ZY$isSameDay)(prev, startDate) || this.isInvalid(prev);
         },
@@ -261,3 +264,3 @@ isNextVisibleRangeInvalid () {
             });
-            return (0, $7G4ZY$isSameDay)(next, endDate) || this.isInvalid(next, minValue, maxValue);
+            return (0, $7G4ZY$isSameDay)(next, endDate) || this.isInvalid(next);
         },
@@ -264,0 +267,0 @@ getDatesInWeek (weekIndex, from = startDate) {

dist/useRangeCalendarState.main.js

@@ -65,5 +65,7 @@ var $4301262d71f567b9$exports = require("./utils.main.js");
         if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+            const nextAvailableStartDate = $e49f7b861e5e8049$var$nextUnavailableDate(date, calendar, -1);
+            const nextAvailableEndDate = $e49f7b861e5e8049$var$nextUnavailableDate(date, calendar, 1);
             availableRangeRef.current = {
-                start: $e49f7b861e5e8049$var$nextUnavailableDate(date, calendar, -1),
-                end: $e49f7b861e5e8049$var$nextUnavailableDate(date, calendar, 1)
+                start: nextAvailableStartDate,
+                end: nextAvailableEndDate
             };
@@ -94,9 +96,9 @@ setAvailableRange(availableRangeRef.current);
         if (props.isReadOnly) return;
-        date = (0, $4301262d71f567b9$exports.constrainValue)(date, min, max);
-        date = (0, $4301262d71f567b9$exports.previousAvailableDate)(date, calendar.visibleRange.start, props.isDateUnavailable);
-        if (!date) return;
-        if (!anchorDate) setAnchorDate(date);
+        const constrainedDate = (0, $4301262d71f567b9$exports.constrainValue)(date, min, max);
+        const previousAvailableConstrainedDate = (0, $4301262d71f567b9$exports.previousAvailableDate)(constrainedDate, calendar.visibleRange.start, props.isDateUnavailable);
+        if (!previousAvailableConstrainedDate) return;
+        if (!anchorDate) setAnchorDate(previousAvailableConstrainedDate);
         else {
-            let range = $e49f7b861e5e8049$var$makeRange(anchorDate, date);
-            setValue({
+            let range = $e49f7b861e5e8049$var$makeRange(anchorDate, previousAvailableConstrainedDate);
+            if (range) setValue({
                 start: $e49f7b861e5e8049$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
@@ -140,3 +142,3 @@ end: $e49f7b861e5e8049$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
         isSelected (date) {
-            return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date);
+            return Boolean(highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date));
         },
@@ -180,3 +182,2 @@ isInvalid (date) {
     });
-    return null;
 }
@@ -183,0 +184,0 @@

dist/useRangeCalendarState.module.js

@@ -59,5 +59,7 @@ import {alignCenter as $f62d864046160412$export$f4a51ff076cc9a09, constrainValue as $f62d864046160412$export$4f5203c0d889109e, isInvalid as $f62d864046160412$export$eac50920cf2fd59a, previousAvailableDate as $f62d864046160412$export$a1d3911297b952d7} from "./utils.module.js";
         if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+            const nextAvailableStartDate = $9a36b6ba2fb1a7c5$var$nextUnavailableDate(date, calendar, -1);
+            const nextAvailableEndDate = $9a36b6ba2fb1a7c5$var$nextUnavailableDate(date, calendar, 1);
             availableRangeRef.current = {
-                start: $9a36b6ba2fb1a7c5$var$nextUnavailableDate(date, calendar, -1),
-                end: $9a36b6ba2fb1a7c5$var$nextUnavailableDate(date, calendar, 1)
+                start: nextAvailableStartDate,
+                end: nextAvailableEndDate
             };
@@ -88,9 +90,9 @@ setAvailableRange(availableRangeRef.current);
         if (props.isReadOnly) return;
-        date = (0, $f62d864046160412$export$4f5203c0d889109e)(date, min, max);
-        date = (0, $f62d864046160412$export$a1d3911297b952d7)(date, calendar.visibleRange.start, props.isDateUnavailable);
-        if (!date) return;
-        if (!anchorDate) setAnchorDate(date);
+        const constrainedDate = (0, $f62d864046160412$export$4f5203c0d889109e)(date, min, max);
+        const previousAvailableConstrainedDate = (0, $f62d864046160412$export$a1d3911297b952d7)(constrainedDate, calendar.visibleRange.start, props.isDateUnavailable);
+        if (!previousAvailableConstrainedDate) return;
+        if (!anchorDate) setAnchorDate(previousAvailableConstrainedDate);
         else {
-            let range = $9a36b6ba2fb1a7c5$var$makeRange(anchorDate, date);
-            setValue({
+            let range = $9a36b6ba2fb1a7c5$var$makeRange(anchorDate, previousAvailableConstrainedDate);
+            if (range) setValue({
                 start: $9a36b6ba2fb1a7c5$var$convertValue(range.start, value === null || value === void 0 ? void 0 : value.start),
@@ -134,3 +136,3 @@ end: $9a36b6ba2fb1a7c5$var$convertValue(range.end, value === null || value === void 0 ? void 0 : value.end)
         isSelected (date) {
-            return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date);
+            return Boolean(highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date));
         },
@@ -174,3 +176,2 @@ isInvalid (date) {
     });
-    return null;
 }
@@ -177,0 +178,0 @@

dist/utils.main.js

@@ -51,6 +51,6 @@ var $i2P57$internationalizeddate = require("@internationalized/date");
     // subtract 1 from the smallest unit
-    if (duration.days) d.days--;
-    else if (duration.weeks) d.weeks--;
-    else if (duration.months) d.months--;
-    else if (duration.years) d.years--;
+    if (d.days) d.days--;
+    else if (d.weeks) d.weeks--;
+    else if (d.months) d.months--;
+    else if (d.years) d.years--;
     let aligned = $4301262d71f567b9$export$144a00ba6044eb9(date, duration, locale).subtract(d);
@@ -60,9 +60,21 @@ return $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 function $4301262d71f567b9$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
-    if (minValue && date.compare(minValue) >= 0) aligned = (0, $i2P57$internationalizeddate.maxDate)(aligned, $4301262d71f567b9$export$144a00ba6044eb9((0, $i2P57$internationalizeddate.toCalendarDate)(minValue), duration, locale));
-    if (maxValue && date.compare(maxValue) <= 0) aligned = (0, $i2P57$internationalizeddate.minDate)(aligned, $4301262d71f567b9$export$530edbfc915b2b04((0, $i2P57$internationalizeddate.toCalendarDate)(maxValue), duration, locale));
+    if (minValue && date.compare(minValue) >= 0) {
+        let newDate = (0, $i2P57$internationalizeddate.maxDate)(aligned, $4301262d71f567b9$export$144a00ba6044eb9((0, $i2P57$internationalizeddate.toCalendarDate)(minValue), duration, locale));
+        if (newDate) aligned = newDate;
+    }
+    if (maxValue && date.compare(maxValue) <= 0) {
+        let newDate = (0, $i2P57$internationalizeddate.minDate)(aligned, $4301262d71f567b9$export$530edbfc915b2b04((0, $i2P57$internationalizeddate.toCalendarDate)(maxValue), duration, locale));
+        if (newDate) aligned = newDate;
+    }
     return aligned;
 }
 function $4301262d71f567b9$export$4f5203c0d889109e(date, minValue, maxValue) {
-    if (minValue) date = (0, $i2P57$internationalizeddate.maxDate)(date, (0, $i2P57$internationalizeddate.toCalendarDate)(minValue));
-    if (maxValue) date = (0, $i2P57$internationalizeddate.minDate)(date, (0, $i2P57$internationalizeddate.toCalendarDate)(maxValue));
+    if (minValue) {
+        let newDate = (0, $i2P57$internationalizeddate.maxDate)(date, (0, $i2P57$internationalizeddate.toCalendarDate)(minValue));
+        if (newDate) date = newDate;
+    }
+    if (maxValue) {
+        let newDate = (0, $i2P57$internationalizeddate.minDate)(date, (0, $i2P57$internationalizeddate.toCalendarDate)(maxValue));
+        if (newDate) date = newDate;
+    }
     return date;
@@ -76,2 +88,3 @@ }
     if (date.compare(minValue) >= 0) return date;
+    return null;
 }
@@ -78,0 +91,0 @@

dist/utils.module.js

@@ -39,6 +39,6 @@ import {startOfYear as $k1D4u$startOfYear, startOfMonth as $k1D4u$startOfMonth, startOfWeek as $k1D4u$startOfWeek, maxDate as $k1D4u$maxDate, toCalendarDate as $k1D4u$toCalendarDate, minDate as $k1D4u$minDate} from "@internationalized/date";
     // subtract 1 from the smallest unit
-    if (duration.days) d.days--;
-    else if (duration.weeks) d.weeks--;
-    else if (duration.months) d.months--;
-    else if (duration.years) d.years--;
+    if (d.days) d.days--;
+    else if (d.weeks) d.weeks--;
+    else if (d.months) d.months--;
+    else if (d.years) d.years--;
     let aligned = $f62d864046160412$export$144a00ba6044eb9(date, duration, locale).subtract(d);
@@ -48,9 +48,21 @@ return $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue);
 function $f62d864046160412$export$5bb865b12696a77d(date, aligned, duration, locale, minValue, maxValue) {
-    if (minValue && date.compare(minValue) >= 0) aligned = (0, $k1D4u$maxDate)(aligned, $f62d864046160412$export$144a00ba6044eb9((0, $k1D4u$toCalendarDate)(minValue), duration, locale));
-    if (maxValue && date.compare(maxValue) <= 0) aligned = (0, $k1D4u$minDate)(aligned, $f62d864046160412$export$530edbfc915b2b04((0, $k1D4u$toCalendarDate)(maxValue), duration, locale));
+    if (minValue && date.compare(minValue) >= 0) {
+        let newDate = (0, $k1D4u$maxDate)(aligned, $f62d864046160412$export$144a00ba6044eb9((0, $k1D4u$toCalendarDate)(minValue), duration, locale));
+        if (newDate) aligned = newDate;
+    }
+    if (maxValue && date.compare(maxValue) <= 0) {
+        let newDate = (0, $k1D4u$minDate)(aligned, $f62d864046160412$export$530edbfc915b2b04((0, $k1D4u$toCalendarDate)(maxValue), duration, locale));
+        if (newDate) aligned = newDate;
+    }
     return aligned;
 }
 function $f62d864046160412$export$4f5203c0d889109e(date, minValue, maxValue) {
-    if (minValue) date = (0, $k1D4u$maxDate)(date, (0, $k1D4u$toCalendarDate)(minValue));
-    if (maxValue) date = (0, $k1D4u$minDate)(date, (0, $k1D4u$toCalendarDate)(maxValue));
+    if (minValue) {
+        let newDate = (0, $k1D4u$maxDate)(date, (0, $k1D4u$toCalendarDate)(minValue));
+        if (newDate) date = newDate;
+    }
+    if (maxValue) {
+        let newDate = (0, $k1D4u$minDate)(date, (0, $k1D4u$toCalendarDate)(maxValue));
+        if (newDate) date = newDate;
+    }
     return date;
@@ -64,2 +76,3 @@ }
     if (date.compare(minValue) >= 0) return date;
+    return null;
 }
@@ -66,0 +79,0 @@

package.json

 {
   "name": "@react-stately/calendar",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "Spectrum UI components in React",
@@ -25,10 +25,10 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@internationalized/date": "^3.5.4",
-    "@react-stately/utils": "^3.10.1",
-    "@react-types/calendar": "^3.4.6",
-    "@react-types/shared": "^3.23.1",
+    "@internationalized/date": "^3.5.5",
+    "@react-stately/utils": "^3.10.2",
+    "@react-types/calendar": "^3.4.7",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
@@ -38,3 +38,3 @@ "publishConfig": {
   },
-  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

src/types.ts

@@ -25,5 +25,5 @@ /*
   /** The minimum allowed date that a user may select. */
-  readonly minValue?: DateValue,
+  readonly minValue?: DateValue | null,
   /** The maximum allowed date that a user may select. */
-  readonly maxValue?: DateValue,
+  readonly maxValue?: DateValue | null,
   /** The time zone of the dates currently being displayed. */
@@ -35,3 +35,3 @@ readonly timeZone: string,
    */
-  readonly validationState: ValidationState,
+  readonly validationState: ValidationState | null,
   /** Whether the calendar is invalid. */
@@ -113,5 +113,5 @@ readonly isValueInvalid: boolean,
   /** The currently selected date range. */
-  readonly value: RangeValue<DateValue>,
+  readonly value: RangeValue<DateValue> | null,
   /** Sets the currently selected date range. */
-  setValue(value: RangeValue<DateValue>): void,
+  setValue(value: RangeValue<DateValue> | null): void,
   /** Highlights the given date during selection, e.g. by hovering or dragging. */
@@ -124,3 +124,3 @@ highlightDate(date: CalendarDate): void,
   /** The currently highlighted date range. */
-  readonly highlightedRange: RangeValue<CalendarDate>,
+  readonly highlightedRange: RangeValue<CalendarDate> | null,
   /** Whether the user is currently dragging over the calendar. */
@@ -127,0 +127,0 @@ readonly isDragging: boolean,

src/useCalendarState.ts

@@ -30,3 +30,3 @@ /*
 } from '@internationalized/date';
-import {CalendarProps, DateValue} from '@react-types/calendar';
+import {CalendarProps, DateValue, MappedDateValue} from '@react-types/calendar';
 import {CalendarState} from './types';
@@ -55,3 +55,2 @@ import {useControlledState} from '@react-stately/utils';
 }
-
 /**
@@ -76,3 +75,3 @@ * Provides state management for a calendar component.
 
-  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let [value, setControlledValue] = useControlledState<DateValue | null, MappedDateValue<T>>(props.value!, props.defaultValue ?? null!, props.onChange);
   let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
@@ -144,9 +143,10 @@ let timeZone = useMemo(() => value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone, [value, resolvedOptions.timeZone]);
     if (!props.isDisabled && !props.isReadOnly) {
-      if (newValue === null) {
+      let localValue = newValue;
+      if (localValue === null) {
         setControlledValue(null);
         return;
       }
-      newValue = constrainValue(newValue, minValue, maxValue);
-      newValue = previousAvailableDate(newValue, startDate, isDateUnavailable);
-      if (!newValue) {
+      localValue = constrainValue(localValue, minValue, maxValue);
+      localValue = previousAvailableDate(localValue, startDate, isDateUnavailable);
+      if (!localValue) {
         return;
@@ -157,9 +157,9 @@ }
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-      newValue = toCalendar(newValue, value?.calendar || new GregorianCalendar());
+      localValue = toCalendar(localValue, value?.calendar || new GregorianCalendar());
 
       // Preserve time if the input value had one.
       if (value && 'hour' in value) {
-        setControlledValue(value.set(newValue));
+        setControlledValue(value.set(localValue));
       } else {
-        setControlledValue(newValue);
+        setControlledValue(localValue);
       }
@@ -181,3 +181,3 @@ }
   let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || isUnavailable;
-  let validationState: ValidationState = isValueInvalid ? 'invalid' : null;
+  let validationState: ValidationState | null = isValueInvalid ? 'invalid' : null;
 
@@ -193,4 +193,4 @@ let pageDuration = useMemo(() => {
   return {
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
+    isDisabled: props.isDisabled ?? false,
+    isReadOnly: props.isReadOnly ?? false,
     value: calendarDateValue,
@@ -318,10 +318,10 @@ setValue,
     isCellDisabled(date) {
-      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date);
     },
     isCellUnavailable(date) {
-      return props.isDateUnavailable && props.isDateUnavailable(date);
+      return props.isDateUnavailable ? props.isDateUnavailable(date) : false;
     },
     isPreviousVisibleRangeInvalid() {
       let prev = startDate.subtract({days: 1});
-      return isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
+      return isSameDay(prev, startDate) || this.isInvalid(prev);
     },
@@ -332,3 +332,3 @@ isNextVisibleRangeInvalid() {
       let next = endDate.add({days: 1});
-      return isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+      return isSameDay(next, endDate) || this.isInvalid(next);
     },
@@ -338,3 +338,3 @@ getDatesInWeek(weekIndex, from = startDate) {
       let date = from.add({weeks: weekIndex});
-      let dates = [];
+      let dates: (CalendarDate | null)[] = [];
 
@@ -341,0 +341,0 @@ date = startOfWeek(date, locale);

src/useRangeCalendarState.ts

@@ -16,3 +16,3 @@ /*
 import {CalendarState, RangeCalendarState} from './types';
-import {DateRange, DateValue, RangeCalendarProps} from '@react-types/calendar';
+import {DateValue, RangeCalendarProps} from '@react-types/calendar';
 import {RangeValue, ValidationState} from '@react-types/shared';
@@ -46,9 +46,9 @@ import {useCalendarState} from './useCalendarState';
   let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
-  let [value, setValue] = useControlledState<DateRange>(
-    valueProp,
-    defaultValue || null,
+  let [value, setValue] = useControlledState<RangeValue<T> | null, RangeValue<T>>(
+    valueProp!,
+    defaultValue || null!,
     onChange
   );
 
-  let [anchorDate, setAnchorDateState] = useState(null);
+  let [anchorDate, setAnchorDateState] = useState<CalendarDate | null>(null);
   let alignment: 'center' | 'start' = 'center';
@@ -65,4 +65,4 @@ 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 availableRangeRef = useRef<Partial<RangeValue<DateValue>> | null>(null);
+  let [availableRange, setAvailableRange] = useState<Partial<RangeValue<DateValue>>|null>(null);
   let min = useMemo(() => maxDate(minValue, availableRange?.start), [minValue, availableRange]);
@@ -84,5 +84,7 @@ let max = useMemo(() => minDate(maxValue, availableRange?.end), [maxValue, availableRange]);
     if (date && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
+      const nextAvailableStartDate = nextUnavailableDate(date, calendar, -1);
+      const nextAvailableEndDate = nextUnavailableDate(date, calendar, 1);
       availableRangeRef.current = {
-        start: nextUnavailableDate(date, calendar, -1),
-        end: nextUnavailableDate(date, calendar, 1)
+        start: nextAvailableStartDate,
+        end: nextAvailableEndDate
       };
@@ -103,3 +105,3 @@ setAvailableRange(availableRangeRef.current);
 
-  let setAnchorDate = (date: CalendarDate) => {
+  let setAnchorDate = (date: CalendarDate | null) => {
     if (date) {
@@ -120,5 +122,5 @@ setAnchorDateState(date);
 
-    date = constrainValue(date, min, max);
-    date = previousAvailableDate(date, calendar.visibleRange.start, props.isDateUnavailable);
-    if (!date) {
+    const constrainedDate = constrainValue(date, min, max);
+    const previousAvailableConstrainedDate = previousAvailableDate(constrainedDate, calendar.visibleRange.start, props.isDateUnavailable);
+    if (!previousAvailableConstrainedDate) {
       return;
@@ -128,9 +130,11 @@ }
     if (!anchorDate) {
-      setAnchorDate(date);
+      setAnchorDate(previousAvailableConstrainedDate);
     } else {
-      let range = makeRange(anchorDate, date);
-      setValue({
-        start: convertValue(range.start, value?.start),
-        end: convertValue(range.end, value?.end)
-      });
+      let range = makeRange(anchorDate, previousAvailableConstrainedDate);
+      if (range) {
+        setValue({
+          start: convertValue(range.start, value?.start) as T,
+          end: convertValue(range.end, value?.end) as T
+        });
+      }
       setAnchorDate(null);
@@ -156,3 +160,3 @@ }
   let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || isInvalidSelection;
-  let validationState: ValidationState = isValueInvalid ? 'invalid' : null;
+  let validationState: ValidationState | null = isValueInvalid ? 'invalid' : null;
 
@@ -178,3 +182,3 @@ return {
     isSelected(date) {
-      return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date);
+      return Boolean(highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0 && !calendar.isCellDisabled(date) && !calendar.isCellUnavailable(date));
     },
@@ -189,3 +193,3 @@ isInvalid(date) {
 
-function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> {
+function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> | null {
   if (!start || !end) {
@@ -202,3 +206,3 @@ return null;
 
-function convertValue(newValue: CalendarDate, oldValue: DateValue) {
+function convertValue(newValue: CalendarDate, oldValue?: DateValue): DateValue {
   // The display calendar should not have any effect on the emitted value.
@@ -216,3 +220,3 @@ // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
 
-function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir: number) {
+function nextUnavailableDate(anchorDate: CalendarDate, state: CalendarState, dir: number): CalendarDate | undefined {
   let nextDate = anchorDate.add({days: dir});
@@ -230,3 +234,2 @@ while (
 
-  return null;
 }

src/utils.ts

@@ -24,3 +24,3 @@ /*
 
-export function isInvalid(date: DateValue, minValue: DateValue, maxValue: DateValue) {
+export function isInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) {
   return (minValue != null && date.compare(minValue) < 0) ||
@@ -30,3 +30,3 @@ (maxValue != null && date.compare(maxValue) > 0);
 
-export function alignCenter(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignCenter(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   let halfDuration: DateDuration = {};
@@ -44,3 +44,3 @@ for (let key in duration) {
 
-export function alignStart(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignStart(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   // align to the start of the largest unit
@@ -59,12 +59,12 @@ let aligned = date;
 
-export function alignEnd(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue, maxValue?: DateValue) {
+export function alignEnd(date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) {
   let d = {...duration};
   // subtract 1 from the smallest unit
-  if (duration.days) {
+  if (d.days) {
     d.days--;
-  } else if (duration.weeks) {
+  } else if (d.weeks) {
     d.weeks--;
-  } else if (duration.months) {
+  } else if (d.months) {
     d.months--;
-  } else if (duration.years) {
+  } else if (d.years) {
     d.years--;
@@ -82,16 +82,22 @@ }
   locale: string,
-  minValue: DateValue,
-  maxValue: DateValue) {
+  minValue?: DateValue | null,
+  maxValue?: DateValue | null) {
   if (minValue && date.compare(minValue) >= 0) {
-    aligned = maxDate(
+    let newDate = maxDate(
       aligned,
       alignStart(toCalendarDate(minValue), duration, locale)
     );
+    if (newDate) {
+      aligned = newDate;
+    }
   }
 
   if (maxValue && date.compare(maxValue) <= 0) {
-    aligned = minDate(
+    let newDate = minDate(
       aligned,
       alignEnd(toCalendarDate(maxValue), duration, locale)
     );
+    if (newDate) {
+      aligned = newDate;
+    }
   }
@@ -102,9 +108,15 @@
 
-export function constrainValue(date: CalendarDate, minValue: DateValue, maxValue: DateValue) {
+export function constrainValue(date: CalendarDate, minValue?: DateValue | null, maxValue?: DateValue | null) {
   if (minValue) {
-    date = maxDate(date, toCalendarDate(minValue));
+    let newDate = maxDate(date, toCalendarDate(minValue));
+    if (newDate) {
+      date = newDate;
+    }
   }
 
   if (maxValue) {
-    date = minDate(date, toCalendarDate(maxValue));
+    let newDate = minDate(date, toCalendarDate(maxValue));
+    if (newDate) {
+      date = newDate;
+    }
   }
@@ -115,3 +127,3 @@
 
-export function previousAvailableDate(date: CalendarDate, minValue: DateValue, isDateUnavailable: (date: CalendarDate) => boolean) {
+export function previousAvailableDate(date: CalendarDate, minValue: DateValue, isDateUnavailable?: (date: CalendarDate) => boolean): CalendarDate | null {
   if (!isDateUnavailable) {
@@ -128,2 +140,3 @@ return date;
   }
+  return null;
 }

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

229191

increased by2.67%

Lines of code

2634

increased by2.65%

Dependency changes

• Updated@internationalized/date@^3.5.5

• Updated@react-stately/utils@^3.10.2

• Updated@react-types/calendar@^3.4.7

• Updated@react-types/shared@^3.24.0