@react-stately/datepicker - npm Package Compare versions

Comparing version 3.0.0-nightly-e60fb427c-240930 to 3.0.0-nightly-e7053dd8f-250108

dist/types.d.ts

 import { DatePickerProps, DateValue, Granularity, TimeValue, DateRange, DateRangePickerProps, TimePickerProps } from "@react-types/datepicker";
-import { CalendarDate, DateFormatter, Calendar, Time } from "@internationalized/date";
+import { DateFormatter, Calendar, Time } from "@internationalized/date";
 import { FormValidationState } from "@react-stately/form";
@@ -32,5 +32,5 @@ import { OverlayTriggerState } from "@react-stately/overlays";
      */
-    dateValue: DateValue;
+    dateValue: DateValue | null;
     /** Sets the date portion of the value. */
-    setDateValue(value: CalendarDate): void;
+    setDateValue(value: DateValue): void;
     /**
@@ -40,3 +40,3 @@ * The time portion of the value. This may be set prior to `value` if the user has
      */
-    timeValue: TimeValue;
+    timeValue: TimeValue | null;
     /** Sets the time portion of the value. */
@@ -56,3 +56,3 @@ setTimeValue(value: TimeValue): void;
      */
-    validationState: ValidationState;
+    validationState: ValidationState | null;
     /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
@@ -91,3 +91,3 @@ isInvalid: boolean;
     /** The current field value. */
-    value: DateValue;
+    value: DateValue | null;
     /** The current value, converted to a native JavaScript `Date` object.  */
@@ -98,3 +98,3 @@ dateValue: Date;
     /** Sets the field's value. */
-    setValue(value: DateValue): void;
+    setValue(value: DateValue | null): void;
     /** A list of segments for the current value. */
@@ -108,3 +108,3 @@ segments: DateSegment[];
      */
-    validationState: ValidationState;
+    validationState: ValidationState | null;
     /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
@@ -182,3 +182,3 @@ isInvalid: boolean;
     /** The currently selected date range. */
-    value: DateRange | null;
+    value: RangeValue<DateValue | null>;
     /** Sets the selected date range. */
@@ -190,3 +190,3 @@ setValue(value: DateRange | null): void;
      */
-    dateRange: DateRange | null;
+    dateRange: RangeValue<DateValue | null> | null;
     /** Sets the date portion of the selected range. */
@@ -198,11 +198,11 @@ setDateRange(value: DateRange): void;
      */
-    timeRange: TimeRange | null;
+    timeRange: RangeValue<TimeValue | null> | null;
     /** Sets the time portion of the selected range. */
     setTimeRange(value: TimeRange): void;
     /** Sets the date portion of either the start or end of the selected range. */
-    setDate(part: 'start' | 'end', value: DateValue): void;
+    setDate(part: 'start' | 'end', value: DateValue | null): void;
     /** Sets the time portion of either the start or end of the selected range. */
-    setTime(part: 'start' | 'end', value: TimeValue): void;
+    setTime(part: 'start' | 'end', value: TimeValue | null): void;
     /** Sets the date and time of either the start or end of the selected range. */
-    setDateTime(part: 'start' | 'end', value: DateValue): void;
+    setDateTime(part: 'start' | 'end', value: DateValue | null): void;
     /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -220,3 +220,3 @@ granularity: Granularity;
      */
-    validationState: ValidationState;
+    validationState: ValidationState | null;
     /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
@@ -228,3 +228,3 @@ isInvalid: boolean;
         end: string;
-    };
+    } | null;
     /** Gets a formatter based on state's props. */
@@ -231,0 +231,0 @@ getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter;

dist/useDateFieldState.main.js

@@ -53,4 +53,4 @@ var $50d5d6a623389320$exports = require("./utils.main.js");
 function $596a1f0f523d6752$export$60e84778edff6d26(props) {
-    let { locale: locale, createCalendar: createCalendar, hideTimeZone: hideTimeZone, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;
-    let v = props.value || props.defaultValue || props.placeholderValue;
+    let { locale: locale, createCalendar: createCalendar, hideTimeZone: hideTimeZone, isDisabled: isDisabled = false, isReadOnly: isReadOnly = false, isRequired: isRequired = false, minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;
+    let v = props.value || props.defaultValue || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $50d5d6a623389320$exports.useDefaultProps)(v, props.granularity);
@@ -67,4 +67,8 @@ let timeZone = defaultTimeZone || 'UTC';
     ]);
-    let [value, setDate] = (0, $iqS8N$reactstatelyutils.useControlledState)(props.value, props.defaultValue, props.onChange);
-    let calendarValue = (0, $iqS8N$react.useMemo)(()=>(0, $50d5d6a623389320$exports.convertValue)(value, calendar), [
+    var _props_defaultValue;
+    let [value, setDate] = (0, $iqS8N$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+    let calendarValue = (0, $iqS8N$react.useMemo)(()=>{
+        var _convertValue;
+        return (_convertValue = (0, $50d5d6a623389320$exports.convertValue)(value, calendar)) !== null && _convertValue !== void 0 ? _convertValue : null;
+    }, [
         value,
@@ -118,3 +122,3 @@ calendar
         } : {});
-    let clearedSegment = (0, $iqS8N$react.useRef)(undefined);
+    let clearedSegment = (0, $iqS8N$react.useRef)(null);
     // Reset placeholder when calendar changes
@@ -412,2 +416,3 @@ let lastCalendarIdentifier = (0, $iqS8N$react.useRef)(calendar.identifier);
     }
+    throw new Error('Unknown segment: ' + part);
 }
@@ -424,3 +429,3 @@ function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) {
     }
-    if ('hour' in value) switch(part){
+    if ('hour' in value && typeof segmentValue === 'number') switch(part){
         case 'dayPeriod':
@@ -451,2 +456,3 @@ {
     }
+    throw new Error('Unknown segment: ' + part);
 }
@@ -453,0 +459,0 @@

dist/useDateFieldState.module.js

@@ -47,4 +47,4 @@ import {convertValue as $35a22f14a1f04b11$export$61a490a80c552550, createPlaceholderDate as $35a22f14a1f04b11$export$66aa2b09de4b1ea5, getFormatOptions as $35a22f14a1f04b11$export$7e319ea407e63bc0, getValidationResult as $35a22f14a1f04b11$export$f18627323ab57ac0, useDefaultProps as $35a22f14a1f04b11$export$2440da353cedad43} from "./utils.module.js";
 function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
-    let { locale: locale, createCalendar: createCalendar, hideTimeZone: hideTimeZone, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;
-    let v = props.value || props.defaultValue || props.placeholderValue;
+    let { locale: locale, createCalendar: createCalendar, hideTimeZone: hideTimeZone, isDisabled: isDisabled = false, isReadOnly: isReadOnly = false, isRequired: isRequired = false, minValue: minValue, maxValue: maxValue, isDateUnavailable: isDateUnavailable } = props;
+    let v = props.value || props.defaultValue || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $35a22f14a1f04b11$export$2440da353cedad43)(v, props.granularity);
@@ -61,4 +61,8 @@ let timeZone = defaultTimeZone || 'UTC';
     ]);
-    let [value, setDate] = (0, $g03ag$useControlledState)(props.value, props.defaultValue, props.onChange);
-    let calendarValue = (0, $g03ag$useMemo)(()=>(0, $35a22f14a1f04b11$export$61a490a80c552550)(value, calendar), [
+    var _props_defaultValue;
+    let [value, setDate] = (0, $g03ag$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+    let calendarValue = (0, $g03ag$useMemo)(()=>{
+        var _convertValue;
+        return (_convertValue = (0, $35a22f14a1f04b11$export$61a490a80c552550)(value, calendar)) !== null && _convertValue !== void 0 ? _convertValue : null;
+    }, [
         value,
@@ -112,3 +116,3 @@ calendar
         } : {});
-    let clearedSegment = (0, $g03ag$useRef)(undefined);
+    let clearedSegment = (0, $g03ag$useRef)(null);
     // Reset placeholder when calendar changes
@@ -406,2 +410,3 @@ let lastCalendarIdentifier = (0, $g03ag$useRef)(calendar.identifier);
     }
+    throw new Error('Unknown segment: ' + part);
 }
@@ -418,3 +423,3 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
     }
-    if ('hour' in value) switch(part){
+    if ('hour' in value && typeof segmentValue === 'number') switch(part){
         case 'dayPeriod':
@@ -445,2 +450,3 @@ {
     }
+    throw new Error('Unknown segment: ' + part);
 }
@@ -447,0 +453,0 @@

dist/useDatePickerState.main.js

@@ -33,3 +33,3 @@ var $50d5d6a623389320$exports = require("./utils.main.js");
     let [value, setValue] = (0, $g6L8e$reactstatelyutils.useControlledState)(props.value, props.defaultValue || null, props.onChange);
-    let v = value || props.placeholderValue;
+    let v = value || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $50d5d6a623389320$exports.useDefaultProps)(v, props.granularity);
@@ -89,3 +89,3 @@ let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null;
         if (hasTime) {
-            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue));
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.defaultValue || props.placeholderValue));
             else setSelectedDate(newValue);
@@ -117,3 +117,3 @@ } else {
             // the user opens the popover again.
-            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue));
+            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.defaultValue || props.placeholderValue));
             overlayState.setOpen(isOpen);
@@ -120,0 +120,0 @@ },

dist/useDatePickerState.module.js

@@ -27,3 +27,3 @@ import {getFormatOptions as $35a22f14a1f04b11$export$7e319ea407e63bc0, getPlaceholderTime as $35a22f14a1f04b11$export$c5221a78ef73c5e9, getValidationResult as $35a22f14a1f04b11$export$f18627323ab57ac0, useDefaultProps as $35a22f14a1f04b11$export$2440da353cedad43} from "./utils.module.js";
     let [value, setValue] = (0, $goopS$useControlledState)(props.value, props.defaultValue || null, props.onChange);
-    let v = value || props.placeholderValue;
+    let v = value || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $35a22f14a1f04b11$export$2440da353cedad43)(v, props.granularity);
@@ -83,3 +83,3 @@ let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null;
         if (hasTime) {
-            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue));
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));
             else setSelectedDate(newValue);
@@ -111,3 +111,3 @@ } else {
             // the user opens the popover again.
-            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue));
+            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.defaultValue || props.placeholderValue));
             overlayState.setOpen(isOpen);
@@ -114,0 +114,0 @@ },

dist/useDateRangePickerState.main.js

@@ -52,6 +52,6 @@ var $50d5d6a623389320$exports = require("./utils.main.js");
         });
-        if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value);
+        if ($7072d26f58deb33b$var$isCompleteRange(value)) setControlledValue(value);
         else setControlledValue(null);
     };
-    let v = (value === null || value === void 0 ? void 0 : value.start) || (value === null || value === void 0 ? void 0 : value.end) || props.placeholderValue;
+    let v = (value === null || value === void 0 ? void 0 : value.start) || (value === null || value === void 0 ? void 0 : value.end) || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $50d5d6a623389320$exports.useDefaultProps)(v, props.granularity);
@@ -63,3 +63,3 @@ let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
     let [timeRange, setSelectedTimeRange] = (0, $9LYIl$react.useState)(null);
-    if (value && value.start && value.end) {
+    if (value && $7072d26f58deb33b$var$isCompleteRange(value)) {
         dateRange = value;
@@ -81,3 +81,3 @@ if ('hour' in value.start) timeRange = value;
         if (hasTime) {
-            if (shouldClose || range.start && range.end && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end)) commitValue(range, {
+            if ($7072d26f58deb33b$var$isCompleteRange(range) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end)) commitValue(range, {
                 start: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue),
@@ -87,3 +87,3 @@ end: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue)
             else setSelectedDateRange(range);
-        } else if (range.start && range.end) {
+        } else if ($7072d26f58deb33b$var$isCompleteRange(range)) {
             setValue(range);
@@ -95,3 +95,3 @@ validation.commitValidation();
     let setTimeRange = (range)=>{
-        if ((dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) && range.start && range.end) commitValue(dateRange, range);
+        if ($7072d26f58deb33b$var$isCompleteRange(dateRange) && $7072d26f58deb33b$var$isCompleteRange(range)) commitValue(dateRange, range);
         else setSelectedTimeRange(range);
@@ -129,3 +129,3 @@ };
                 props.endName
-            ], [
+            ].filter((n)=>n != null), [
             props.startName,
@@ -147,18 +147,33 @@ props.endName
         setDate (part, date) {
-            setDateRange({
-                ...dateRange,
-                [part]: date
+            var _dateRange_end, _dateRange_start;
+            if (part === 'start') setDateRange({
+                start: date,
+                end: (_dateRange_end = dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) !== null && _dateRange_end !== void 0 ? _dateRange_end : null
             });
+            else setDateRange({
+                start: (_dateRange_start = dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) !== null && _dateRange_start !== void 0 ? _dateRange_start : null,
+                end: date
+            });
         },
         setTime (part, time) {
-            setTimeRange({
-                ...timeRange,
-                [part]: time
+            var _timeRange_end, _timeRange_start;
+            if (part === 'start') setTimeRange({
+                start: time,
+                end: (_timeRange_end = timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) !== null && _timeRange_end !== void 0 ? _timeRange_end : null
             });
+            else setTimeRange({
+                start: (_timeRange_start = timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) !== null && _timeRange_start !== void 0 ? _timeRange_start : null,
+                end: time
+            });
         },
         setDateTime (part, dateTime) {
-            setValue({
-                ...value,
-                [part]: dateTime
+            var _value_end, _value_start;
+            if (part === 'start') setValue({
+                start: dateTime,
+                end: (_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null
             });
+            else setValue({
+                start: (_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null,
+                end: dateTime
+            });
         },
@@ -172,3 +187,3 @@ setDateRange: setDateRange,
             // the user opens the popover again.
-            if (!isOpen && !((value === null || value === void 0 ? void 0 : value.start) && (value === null || value === void 0 ? void 0 : value.end)) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) && hasTime) commitValue(dateRange, {
+            if (!isOpen && !((value === null || value === void 0 ? void 0 : value.start) && (value === null || value === void 0 ? void 0 : value.end)) && $7072d26f58deb33b$var$isCompleteRange(dateRange) && hasTime) commitValue(dateRange, {
                 start: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue),
@@ -223,3 +238,3 @@ end: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) || (0, $50d5d6a623389320$exports.getPlaceholderTime)(props.placeholderValue)
                     };
-                } catch (e) {
+                } catch  {
                 // ignore
@@ -252,4 +267,7 @@ }
 }
+function $7072d26f58deb33b$var$isCompleteRange(value) {
+    return (value === null || value === void 0 ? void 0 : value.start) != null && value.end != null;
+}
 
 
 //# sourceMappingURL=useDateRangePickerState.main.js.map

dist/useDateRangePickerState.module.js

@@ -46,6 +46,6 @@ import {getFormatOptions as $35a22f14a1f04b11$export$7e319ea407e63bc0, getPlaceholderTime as $35a22f14a1f04b11$export$c5221a78ef73c5e9, getRangeValidationResult as $35a22f14a1f04b11$export$80ff8fc0ae339c13, useDefaultProps as $35a22f14a1f04b11$export$2440da353cedad43} from "./utils.module.js";
         });
-        if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value);
+        if ($93c38a5e28be6249$var$isCompleteRange(value)) setControlledValue(value);
         else setControlledValue(null);
     };
-    let v = (value === null || value === void 0 ? void 0 : value.start) || (value === null || value === void 0 ? void 0 : value.end) || props.placeholderValue;
+    let v = (value === null || value === void 0 ? void 0 : value.start) || (value === null || value === void 0 ? void 0 : value.end) || props.placeholderValue || null;
     let [granularity, defaultTimeZone] = (0, $35a22f14a1f04b11$export$2440da353cedad43)(v, props.granularity);
@@ -57,3 +57,3 @@ let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
     let [timeRange, setSelectedTimeRange] = (0, $hac8C$useState)(null);
-    if (value && value.start && value.end) {
+    if (value && $93c38a5e28be6249$var$isCompleteRange(value)) {
         dateRange = value;
@@ -75,3 +75,3 @@ if ('hour' in value.start) timeRange = value;
         if (hasTime) {
-            if (shouldClose || range.start && range.end && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end)) commitValue(range, {
+            if ($93c38a5e28be6249$var$isCompleteRange(range) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) && (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end)) commitValue(range, {
                 start: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue),
@@ -81,3 +81,3 @@ end: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue)
             else setSelectedDateRange(range);
-        } else if (range.start && range.end) {
+        } else if ($93c38a5e28be6249$var$isCompleteRange(range)) {
             setValue(range);
@@ -89,3 +89,3 @@ validation.commitValidation();
     let setTimeRange = (range)=>{
-        if ((dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) && range.start && range.end) commitValue(dateRange, range);
+        if ($93c38a5e28be6249$var$isCompleteRange(dateRange) && $93c38a5e28be6249$var$isCompleteRange(range)) commitValue(dateRange, range);
         else setSelectedTimeRange(range);
@@ -123,3 +123,3 @@ };
                 props.endName
-            ], [
+            ].filter((n)=>n != null), [
             props.startName,
@@ -141,18 +141,33 @@ props.endName
         setDate (part, date) {
-            setDateRange({
-                ...dateRange,
-                [part]: date
+            var _dateRange_end, _dateRange_start;
+            if (part === 'start') setDateRange({
+                start: date,
+                end: (_dateRange_end = dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) !== null && _dateRange_end !== void 0 ? _dateRange_end : null
             });
+            else setDateRange({
+                start: (_dateRange_start = dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) !== null && _dateRange_start !== void 0 ? _dateRange_start : null,
+                end: date
+            });
         },
         setTime (part, time) {
-            setTimeRange({
-                ...timeRange,
-                [part]: time
+            var _timeRange_end, _timeRange_start;
+            if (part === 'start') setTimeRange({
+                start: time,
+                end: (_timeRange_end = timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) !== null && _timeRange_end !== void 0 ? _timeRange_end : null
             });
+            else setTimeRange({
+                start: (_timeRange_start = timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) !== null && _timeRange_start !== void 0 ? _timeRange_start : null,
+                end: time
+            });
         },
         setDateTime (part, dateTime) {
-            setValue({
-                ...value,
-                [part]: dateTime
+            var _value_end, _value_start;
+            if (part === 'start') setValue({
+                start: dateTime,
+                end: (_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null
             });
+            else setValue({
+                start: (_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null,
+                end: dateTime
+            });
         },
@@ -166,3 +181,3 @@ setDateRange: setDateRange,
             // the user opens the popover again.
-            if (!isOpen && !((value === null || value === void 0 ? void 0 : value.start) && (value === null || value === void 0 ? void 0 : value.end)) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) && hasTime) commitValue(dateRange, {
+            if (!isOpen && !((value === null || value === void 0 ? void 0 : value.start) && (value === null || value === void 0 ? void 0 : value.end)) && $93c38a5e28be6249$var$isCompleteRange(dateRange) && hasTime) commitValue(dateRange, {
                 start: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.start) || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue),
@@ -217,3 +232,3 @@ end: (timeRange === null || timeRange === void 0 ? void 0 : timeRange.end) || (0, $35a22f14a1f04b11$export$c5221a78ef73c5e9)(props.placeholderValue)
                     };
-                } catch (e) {
+                } catch  {
                 // ignore
@@ -246,2 +261,5 @@ }
 }
+function $93c38a5e28be6249$var$isCompleteRange(value) {
+    return (value === null || value === void 0 ? void 0 : value.start) != null && value.end != null;
+}
 
@@ -248,0 +266,0 @@

dist/useTimeFieldState.main.js

@@ -28,3 +28,4 @@ var $596a1f0f523d6752$exports = require("./useDateFieldState.main.js");
     let { placeholderValue: placeholderValue = new (0, $1Q50t$internationalizeddate.Time)(), minValue: minValue, maxValue: maxValue, granularity: granularity, validate: validate } = props;
-    let [value, setValue] = (0, $1Q50t$reactstatelyutils.useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [value, setValue] = (0, $1Q50t$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let v = value || placeholderValue;
@@ -67,3 +68,3 @@ let day = v && 'day' in v ? v : undefined;
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate,
+        placeholderValue: placeholderDate !== null && placeholderDate !== void 0 ? placeholderDate : undefined,
         // Calendar should not matter for time fields.
@@ -70,0 +71,0 @@ createCalendar: ()=>new (0, $1Q50t$internationalizeddate.GregorianCalendar)(),

dist/useTimeFieldState.module.js

@@ -22,3 +22,4 @@ import {useDateFieldState as $3c0fc76039f1c516$export$60e84778edff6d26} from "./useDateFieldState.module.js";
     let { placeholderValue: placeholderValue = new (0, $2PRh3$Time)(), minValue: minValue, maxValue: maxValue, granularity: granularity, validate: validate } = props;
-    let [value, setValue] = (0, $2PRh3$useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [value, setValue] = (0, $2PRh3$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let v = value || placeholderValue;
@@ -61,3 +62,3 @@ let day = v && 'day' in v ? v : undefined;
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate,
+        placeholderValue: placeholderDate !== null && placeholderDate !== void 0 ? placeholderDate : undefined,
         // Calendar should not matter for time fields.
@@ -64,0 +65,0 @@ createCalendar: ()=>new (0, $2PRh3$GregorianCalendar)(),

dist/utils.main.js

@@ -57,6 +57,6 @@ var $5294278fb5cc815e$exports = require("./intlStrings.main.js");
         let timeZone = dateFormatter.resolvedOptions().timeZone;
-        if (rangeUnderflow) errors.push(formatter.format('rangeUnderflow', {
+        if (rangeUnderflow && minValue != null) errors.push(formatter.format('rangeUnderflow', {
             minValue: dateFormatter.format(minValue.toDate(timeZone))
         }));
-        if (rangeOverflow) errors.push(formatter.format('rangeOverflow', {
+        if (rangeOverflow && maxValue != null) errors.push(formatter.format('rangeOverflow', {
             maxValue: dateFormatter.format(maxValue.toDate(timeZone))
@@ -85,6 +85,8 @@ }));
 function $50d5d6a623389320$export$80ff8fc0ae339c13(value, minValue, maxValue, isDateUnavailable, options) {
-    let startValidation = $50d5d6a623389320$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.start, minValue, maxValue, isDateUnavailable, options);
-    let endValidation = $50d5d6a623389320$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.end, minValue, maxValue, isDateUnavailable, options);
+    var _value_start;
+    let startValidation = $50d5d6a623389320$export$f18627323ab57ac0((_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null, minValue, maxValue, isDateUnavailable, options);
+    var _value_end;
+    let endValidation = $50d5d6a623389320$export$f18627323ab57ac0((_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null, minValue, maxValue, isDateUnavailable, options);
     let result = (0, $68Tdx$reactstatelyform.mergeValidation)(startValidation, endValidation);
-    if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    if ((value === null || value === void 0 ? void 0 : value.end) != null && value.start != null && value.end.compare(value.start) < 0) {
         let strings = (0, $68Tdx$internationalizedstring.LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/datepicker') || $50d5d6a623389320$var$dictionary;
@@ -158,3 +160,3 @@ result = (0, $68Tdx$reactstatelyform.mergeValidation)(result, {
     if (placeholderValue) return $50d5d6a623389320$export$61a490a80c552550(placeholderValue, calendar);
-    let date = (0, $68Tdx$internationalizeddate.toCalendar)((0, $68Tdx$internationalizeddate.now)(timeZone).set({
+    let date = (0, $68Tdx$internationalizeddate.toCalendar)((0, $68Tdx$internationalizeddate.now)(timeZone !== null && timeZone !== void 0 ? timeZone : (0, $68Tdx$internationalizeddate.getLocalTimeZone)()).set({
         hour: 0,
@@ -161,0 +163,0 @@ minute: 0,

dist/utils.module.js

 import $bUJMr$intlStringsmodulejs from "./intlStrings.module.js";
-import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
+import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, getLocalTimeZone as $bUJMr$getLocalTimeZone, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
 import {LocalizedStringDictionary as $bUJMr$LocalizedStringDictionary, LocalizedStringFormatter as $bUJMr$LocalizedStringFormatter} from "@internationalized/string";
@@ -45,6 +45,6 @@ import {mergeValidation as $bUJMr$mergeValidation, VALID_VALIDITY_STATE as $bUJMr$VALID_VALIDITY_STATE} from "@react-stately/form";
         let timeZone = dateFormatter.resolvedOptions().timeZone;
-        if (rangeUnderflow) errors.push(formatter.format('rangeUnderflow', {
+        if (rangeUnderflow && minValue != null) errors.push(formatter.format('rangeUnderflow', {
             minValue: dateFormatter.format(minValue.toDate(timeZone))
         }));
-        if (rangeOverflow) errors.push(formatter.format('rangeOverflow', {
+        if (rangeOverflow && maxValue != null) errors.push(formatter.format('rangeOverflow', {
             maxValue: dateFormatter.format(maxValue.toDate(timeZone))
@@ -73,6 +73,8 @@ }));
 function $35a22f14a1f04b11$export$80ff8fc0ae339c13(value, minValue, maxValue, isDateUnavailable, options) {
-    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.start, minValue, maxValue, isDateUnavailable, options);
-    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.end, minValue, maxValue, isDateUnavailable, options);
+    var _value_start;
+    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null, minValue, maxValue, isDateUnavailable, options);
+    var _value_end;
+    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null, minValue, maxValue, isDateUnavailable, options);
     let result = (0, $bUJMr$mergeValidation)(startValidation, endValidation);
-    if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    if ((value === null || value === void 0 ? void 0 : value.end) != null && value.start != null && value.end.compare(value.start) < 0) {
         let strings = (0, $bUJMr$LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/datepicker') || $35a22f14a1f04b11$var$dictionary;
@@ -146,3 +148,3 @@ result = (0, $bUJMr$mergeValidation)(result, {
     if (placeholderValue) return $35a22f14a1f04b11$export$61a490a80c552550(placeholderValue, calendar);
-    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone).set({
+    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone !== null && timeZone !== void 0 ? timeZone : (0, $bUJMr$getLocalTimeZone)()).set({
         hour: 0,
@@ -149,0 +151,0 @@ minute: 0,

package.json

 {
   "name": "@react-stately/datepicker",
-  "version": "3.0.0-nightly-e60fb427c-240930",
+  "version": "3.0.0-nightly-e7053dd8f-250108",
   "description": "Spectrum UI components in React",
@@ -25,18 +25,17 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@internationalized/date": "^3.0.0-nightly-e60fb427c-240930",
-    "@internationalized/string": "^3.0.0-nightly-e60fb427c-240930",
-    "@react-stately/form": "^3.0.0-nightly-e60fb427c-240930",
-    "@react-stately/overlays": "^3.0.0-nightly-e60fb427c-240930",
-    "@react-stately/utils": "^3.0.0-nightly-e60fb427c-240930",
-    "@react-types/datepicker": "^3.0.0-nightly-e60fb427c-240930",
-    "@react-types/shared": "^3.0.0-nightly-e60fb427c-240930",
+    "@internationalized/date": "3.0.0-nightly-e7053dd8f-250108",
+    "@internationalized/string": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-stately/form": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-stately/overlays": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-stately/utils": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-types/datepicker": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-types/shared": "3.0.0-nightly-e7053dd8f-250108",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.10.2"
+  }
 }

src/useDateFieldState.ts

@@ -15,3 +15,3 @@ /*
 import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
-import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
@@ -45,3 +45,3 @@ import {getPlaceholder} from './placeholders';
   /** The current field value. */
-  value: DateValue,
+  value: DateValue | null,
   /** The current value, converted to a native JavaScript `Date` object.  */
@@ -52,3 +52,3 @@ dateValue: Date,
   /** Sets the field's value. */
-  setValue(value: DateValue): void,
+  setValue(value: DateValue | null): void,
   /** A list of segments for the current value. */
@@ -62,3 +62,3 @@ segments: DateSegment[],
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
@@ -157,5 +157,5 @@ isInvalid: boolean,
     hideTimeZone,
-    isDisabled,
-    isReadOnly,
-    isRequired,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
     minValue,
@@ -166,3 +166,3 @@ maxValue,
 
-  let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
+  let v: DateValue | null = props.value || props.defaultValue || props.placeholderValue || null;
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
@@ -179,9 +179,9 @@ let timeZone = defaultTimeZone || 'UTC';
 
-  let [value, setDate] = useControlledState<DateValue>(
+  let [value, setDate] = useControlledState<DateValue | null, MappedDateValue<T> | null>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     props.onChange
   );
 
-  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+  let calendarValue = useMemo(() => convertValue(value, calendar) ?? null, [value, calendar]);
 
@@ -224,3 +224,3 @@ // We keep track of the placeholder date separately in state so that onChange is not called
 
-  let clearedSegment = useRef<string>(undefined);
+  let clearedSegment = useRef<string | null>(null);
 
@@ -341,3 +341,3 @@ // Reset placeholder when calendar changes
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
@@ -347,3 +347,3 @@ });
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
@@ -377,3 +377,3 @@ return {
     },
-    setSegment(part, v) {
+    setSegment(part, v: string | number) {
       markValid(part);
@@ -533,5 +533,7 @@ setValue(setSegment(displayValue, part, v, resolvedOptions));
   }
+
+  throw new Error('Unknown segment: ' + part);
 }
 
-function setSegment(value: DateValue, part: string, segmentValue: number, options: Intl.ResolvedDateTimeFormatOptions) {
+function setSegment(value: DateValue, part: string, segmentValue: number | string, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (part) {
@@ -545,3 +547,3 @@ case 'day':
 
-  if ('hour' in value) {
+  if ('hour' in value && typeof segmentValue === 'number') {
     switch (part) {
@@ -575,2 +577,4 @@ case 'dayPeriod': {
   }
+
+  throw new Error('Unknown segment: ' + part);
 }

src/useDatePickerState.ts

@@ -14,3 +14,3 @@ /*
 import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
@@ -40,5 +40,5 @@ import {FormValidationState, useFormValidationState} from '@react-stately/form';
    */
-  dateValue: DateValue,
+  dateValue: DateValue | null,
   /** Sets the date portion of the value. */
-  setDateValue(value: CalendarDate): void,
+  setDateValue(value: DateValue): void,
   /**
@@ -48,3 +48,3 @@ * The time portion of the value. This may be set prior to `value` if the user has
    */
-  timeValue: TimeValue,
+  timeValue: TimeValue | null,
   /** Sets the time portion of the value. */
@@ -64,3 +64,3 @@ setTimeValue(value: TimeValue): void,
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
@@ -80,5 +80,5 @@ isInvalid: boolean,
   let overlayState = useOverlayTriggerState(props);
-  let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
+  let [value, setValue] = useControlledState<DateValue | null, MappedDateValue<T> | null>(props.value, props.defaultValue || null, props.onChange);
 
-  let v = (value || props.placeholderValue);
+  let v = (value || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
@@ -89,4 +89,4 @@ let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
 
-  let [selectedDate, setSelectedDate] = useState<DateValue>(null);
-  let [selectedTime, setSelectedTime] = useState<TimeValue>(null);
+  let [selectedDate, setSelectedDate] = useState<DateValue | null>(null);
+  let [selectedTime, setSelectedTime] = useState<TimeValue | null>(null);
 
@@ -126,3 +126,3 @@ if (value) {
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
@@ -132,3 +132,3 @@ });
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
@@ -147,3 +147,3 @@ let commitValue = (date: DateValue, time: TimeValue) => {
       if (selectedTime || shouldClose) {
-        commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue));
+        commitValue(newValue, selectedTime || getPlaceholderTime(props.defaultValue || props.placeholderValue));
       } else {
@@ -186,3 +186,3 @@ setSelectedDate(newValue);
       if (!isOpen && !value && selectedDate && hasTime) {
-        commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue));
+        commitValue(selectedDate, selectedTime || getPlaceholderTime(props.defaultValue || props.placeholderValue));
       }
@@ -189,0 +189,0 @@

src/useDateRangePickerState.ts

@@ -15,3 +15,3 @@ /*
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils';
@@ -35,3 +35,3 @@ import {FormValidationState, useFormValidationState} from '@react-stately/form';
   /** The currently selected date range. */
-  value: DateRange | null,
+  value: RangeValue<DateValue | null>,
   /** Sets the selected date range. */
@@ -43,3 +43,3 @@ setValue(value: DateRange | null): void,
    */
-  dateRange: DateRange | null,
+  dateRange: RangeValue<DateValue | null> | null,
   /** Sets the date portion of the selected range. */
@@ -51,11 +51,11 @@ setDateRange(value: DateRange): void,
    */
-  timeRange: TimeRange | null,
+  timeRange: RangeValue<TimeValue | null> | null,
   /** Sets the time portion of the selected range. */
   setTimeRange(value: TimeRange): void,
   /** Sets the date portion of either the start or end of the selected range. */
-  setDate(part: 'start' | 'end', value: DateValue): void,
+  setDate(part: 'start' | 'end', value: DateValue | null): void,
   /** Sets the time portion of either the start or end of the selected range. */
-  setTime(part: 'start' | 'end', value: TimeValue): void,
+  setTime(part: 'start' | 'end', value: TimeValue | null): void,
   /** Sets the date and time of either the start or end of the selected range. */
-  setDateTime(part: 'start' | 'end', value: DateValue): void,
+  setDateTime(part: 'start' | 'end', value: DateValue | null): void,
   /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -73,7 +73,7 @@ granularity: Granularity,
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** Formats the selected range using the given options. */
-  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string} | null,
   /** Gets a formatter based on state's props. */
@@ -90,4 +90,4 @@ getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
   let overlayState = useOverlayTriggerState(props);
-  let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
-  let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
+  let [controlledValue, setControlledValue] = useControlledState<DateRange | null, RangeValue<MappedDateValue<T>> | null>(props.value, props.defaultValue || null, props.onChange);
+  let [placeholderValue, setPlaceholderValue] = useState<RangeValue<DateValue | null>>(() => controlledValue || {start: null, end: null});
 
@@ -102,5 +102,5 @@ // Reset the placeholder if the value prop is set to null.
 
-  let setValue = (value: DateRange) => {
+  let setValue = (value: RangeValue<DateValue | null> | null) => {
     setPlaceholderValue(value || {start: null, end: null});
-    if (value?.start && value.end) {
+    if (isCompleteRange(value)) {
       setControlledValue(value);
@@ -112,3 +112,3 @@ } else {
 
-  let v = (value?.start || value?.end || props.placeholderValue);
+  let v = (value?.start || value?.end || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
@@ -118,6 +118,6 @@ let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
 
-  let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
-  let [timeRange, setSelectedTimeRange] = useState<TimeRange>(null);
+  let [dateRange, setSelectedDateRange] = useState<RangeValue<DateValue | null> | null>(null);
+  let [timeRange, setSelectedTimeRange] = useState<RangeValue<TimeValue | null> | null>(null);
 
-  if (value && value.start && value.end) {
+  if (value && isCompleteRange(value)) {
     dateRange = value;
@@ -140,6 +140,6 @@ if ('hour' in value.start) {
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-  let setDateRange = (range: DateRange) => {
+  let setDateRange = (range: RangeValue<DateValue | null>) => {
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (shouldClose || (range.start && range.end && timeRange?.start && timeRange?.end)) {
+      if (isCompleteRange(range) && timeRange?.start && timeRange?.end) {
         commitValue(range, {
@@ -152,3 +152,3 @@ start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
       }
-    } else if (range.start && range.end) {
+    } else if (isCompleteRange(range)) {
       setValue(range);
@@ -165,4 +165,4 @@ validation.commitValidation();
 
-  let setTimeRange = (range: TimeRange) => {
-    if (dateRange?.start && dateRange?.end && range.start && range.end) {
+  let setTimeRange = (range: RangeValue<TimeValue | null>) => {
+    if (isCompleteRange(dateRange) && isCompleteRange(range)) {
       commitValue(dateRange, range);
@@ -195,4 +195,4 @@ } else {
     ...props,
-    value: controlledValue,
-    name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]),
+    value: controlledValue as RangeValue<MappedDateValue<T>> | null,
+    name: useMemo(() => [props.startName, props.endName].filter(n => n != null), [props.startName, props.endName]),
     builtinValidation
@@ -202,3 +202,3 @@ });
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
@@ -214,9 +214,21 @@ return {
     setDate(part, date) {
-      setDateRange({...dateRange, [part]: date});
+      if (part === 'start') {
+        setDateRange({start: date, end: dateRange?.end ?? null});
+      } else {
+        setDateRange({start: dateRange?.start ?? null, end: date});
+      }
     },
     setTime(part, time) {
-      setTimeRange({...timeRange, [part]: time});
+      if (part === 'start') {
+        setTimeRange({start: time, end: timeRange?.end ?? null});
+      } else {
+        setTimeRange({start: timeRange?.start ?? null, end: time});
+      }
     },
     setDateTime(part, dateTime) {
-      setValue({...value, [part]: dateTime});
+      if (part === 'start') {
+        setValue({start: dateTime, end: value?.end ?? null});
+      } else {
+        setValue({start: value?.start ?? null, end: dateTime});
+      }
     },
@@ -230,3 +242,3 @@ setDateRange,
       // the user opens the popover again.
-      if (!isOpen && !(value?.start && value?.end) && dateRange?.start && dateRange?.end && hasTime) {
+      if (!isOpen && !(value?.start && value?.end) && isCompleteRange(dateRange) && hasTime) {
         commitValue(dateRange, {
@@ -297,3 +309,3 @@ start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           return {start, end};
-        } catch (e) {
+        } catch {
           // ignore
@@ -326,1 +338,5 @@ }
 }
+
+function isCompleteRange<T>(value: RangeValue<T | null> | null): value is RangeValue<T> {
+  return value?.start != null && value.end != null;
+}

src/useTimeFieldState.ts

@@ -14,3 +14,3 @@ /*
 import {DateFieldState, useDateFieldState} from '.';
-import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
+import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
 import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date';
@@ -44,5 +44,5 @@ import {useCallback, useMemo} from 'react';
 
-  let [value, setValue] = useControlledState<TimeValue>(
+  let [value, setValue] = useControlledState<TimeValue | null, MappedTimeValue<T> | null>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     props.onChange
@@ -57,3 +57,3 @@ );
 
-    return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : convertValue(placeholderValue);
+    return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue)!, valueTimeZone || defaultValueTimeZone!) : convertValue(placeholderValue);
   }, [placeholderValue, v, defaultValueTimeZone]);
@@ -78,3 +78,3 @@ let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
     maxGranularity: 'hour',
-    placeholderValue: placeholderDate,
+    placeholderValue: placeholderDate ?? undefined,
     // Calendar should not matter for time fields.
@@ -91,3 +91,3 @@ createCalendar: () => new GregorianCalendar(),
 
-function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
+function convertValue(value: TimeValue | null | undefined, date: DateValue = today(getLocalTimeZone())) {
   if (!value) {
@@ -94,0 +94,0 @@ return null;

src/utils.ts

@@ -13,3 +13,3 @@ /*
 
-import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
+import {Calendar, DateFormatter, getLocalTimeZone, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
@@ -33,6 +33,6 @@ // @ts-ignore
 export function getValidationResult(
-  value: DateValue,
-  minValue: DateValue,
-  maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean,
+  value: DateValue | null,
+  minValue: DateValue | null | undefined,
+  maxValue: DateValue | null | undefined,
+  isDateUnavailable: ((v: DateValue) => boolean) | undefined,
   options: FormatterOptions
@@ -44,3 +44,3 @@ ): ValidationResult {
   let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
-  let errors = [];
+  let errors: string[] = [];
 
@@ -54,7 +54,7 @@ if (isInvalid) {
 
-    if (rangeUnderflow) {
+    if (rangeUnderflow && minValue != null) {
       errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));
     }
 
-    if (rangeOverflow) {
+    if (rangeOverflow && maxValue != null) {
       errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));
@@ -88,10 +88,10 @@ }
 export function getRangeValidationResult(
-  value: RangeValue<DateValue>,
-  minValue: DateValue,
-  maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean,
+  value: RangeValue<DateValue | null> | null,
+  minValue: DateValue | null | undefined,
+  maxValue: DateValue | null | undefined,
+  isDateUnavailable: ((v: DateValue) => boolean) | undefined,
   options: FormatterOptions
 ) {
   let startValidation = getValidationResult(
-    value?.start,
+    value?.start ?? null,
     minValue,
@@ -104,3 +104,3 @@ maxValue,
   let endValidation = getValidationResult(
-    value?.end,
+    value?.end ?? null,
     minValue,
@@ -113,3 +113,3 @@ maxValue,
   let result = mergeValidation(startValidation, endValidation);
-  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+  if (value?.end != null && value.start != null && value.end.compare(value.start) < 0) {
     let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;
@@ -205,3 +205,3 @@ result = mergeValidation(result, {
 
-export function getPlaceholderTime(placeholderValue: DateValue): TimeValue {
+export function getPlaceholderTime(placeholderValue: DateValue | null | undefined): TimeValue {
   if (placeholderValue && 'hour' in placeholderValue) {
@@ -214,3 +214,3 @@ return placeholderValue;
 
-export function convertValue(value: DateValue, calendar: Calendar): DateValue {
+export function convertValue(value: DateValue | null | undefined, calendar: Calendar): DateValue | null | undefined {
   if (value === null) {
@@ -228,8 +228,8 @@ return null;
 
-export function createPlaceholderDate(placeholderValue: DateValue, granularity: string, calendar: Calendar, timeZone: string) {
+export function createPlaceholderDate(placeholderValue: DateValue | null | undefined, granularity: string, calendar: Calendar, timeZone: string | undefined): DateValue {
   if (placeholderValue) {
-    return convertValue(placeholderValue, calendar);
+    return convertValue(placeholderValue, calendar)!;
   }
 
-  let date = toCalendar(now(timeZone).set({
+  let date = toCalendar(now(timeZone ?? getLocalTimeZone()).set({
     hour: 0,
@@ -252,3 +252,3 @@ minute: 0,
 
-export function useDefaultProps(v: DateValue, granularity: Granularity): [Granularity, string] {
+export function useDefaultProps(v: DateValue | null, granularity: Granularity | undefined): [Granularity, string | undefined] {
   // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
@@ -263,3 +263,3 @@ let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
 
-  let [lastValue, setLastValue] = useState<[Granularity, string]>([defaultGranularity, defaultTimeZone]);
+  let [lastValue, setLastValue] = useState<[Granularity, string | undefined]>([defaultGranularity, defaultTimeZone]);
 
@@ -266,0 +266,0 @@ // If the granularity or time zone changed, update the last value.

No alert changes

Improved metrics

Total package byte prevSize

580732

increased by2.59%

Lines of code

7249

increased by1.36%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@internationalized/string@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-stately/form@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-stately/overlays@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-stately/utils@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-types/calendar@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-types/datepicker@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-types/overlays@3.0.0-nightly-e7053dd8f-250108(transitive)

• + Added@react-types/shared@3.0.0-nightly-e7053dd8f-250108(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-stately/form@3.1.1(transitive)

• - Removed@react-stately/overlays@3.6.13(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/calendar@3.6.0(transitive)

• - Removed@react-types/datepicker@3.10.0(transitive)

• - Removed@react-types/overlays@3.8.12(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@internationalized/date@3.0.0-nightly-e7053dd8f-250108

• Updated@internationalized/string@3.0.0-nightly-e7053dd8f-250108

• Updated@react-stately/form@3.0.0-nightly-e7053dd8f-250108

• Updated@react-stately/overlays@3.0.0-nightly-e7053dd8f-250108

• Updated@react-stately/utils@3.0.0-nightly-e7053dd8f-250108

• Updated@react-types/datepicker@3.0.0-nightly-e7053dd8f-250108

• Updated@react-types/shared@3.0.0-nightly-e7053dd8f-250108