@react-stately/datepicker 3.5.0 → 3.7.0

package/dist/import.mjs

@@ -1,4 +1,4 @@
-import {toCalendarDate as $7UzoM$toCalendarDate, toCalendarDateTime as $7UzoM$toCalendarDateTime, DateFormatter as $7UzoM$DateFormatter, Time as $7UzoM$Time, toCalendar as $7UzoM$toCalendar, now as $7UzoM$now, GregorianCalendar as $7UzoM$GregorianCalendar, getMinimumMonthInYear as $7UzoM$getMinimumMonthInYear, getMinimumDayInMonth as $7UzoM$getMinimumDayInMonth, toTime as $7UzoM$toTime, today as $7UzoM$today, getLocalTimeZone as $7UzoM$getLocalTimeZone} from "@internationalized/date";
+import {toCalendarDate as $7UzoM$toCalendarDate, toCalendarDateTime as $7UzoM$toCalendarDateTime, DateFormatter as $7UzoM$DateFormatter, Time as $7UzoM$Time, toCalendar as $7UzoM$toCalendar, now as $7UzoM$now, GregorianCalendar as $7UzoM$GregorianCalendar, getMinimumMonthInYear as $7UzoM$getMinimumMonthInYear, getMinimumDayInMonth as $7UzoM$getMinimumDayInMonth, toZoned as $7UzoM$toZoned, toTime as $7UzoM$toTime, today as $7UzoM$today, getLocalTimeZone as $7UzoM$getLocalTimeZone} from "@internationalized/date";
 import {useOverlayTriggerState as $7UzoM$useOverlayTriggerState} from "@react-stately/overlays";
 import {useControlledState as $7UzoM$useControlledState} from "@react-stately/utils";
 import {useState as $7UzoM$useState, useMemo as $7UzoM$useMemo, useRef as $7UzoM$useRef, useEffect as $7UzoM$useEffect} from "react";
@@ -165,7 +165,8 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
         if (selectedDate && newValue) commitValue(selectedDate, newValue);
         else setSelectedTime(newValue);
     };
-    let validationState = props.validationState || ((0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value, props.minValue, props.maxValue) ? "invalid" : null) || (value && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value)) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || (0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value, props.minValue, props.maxValue) || value && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value));
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     return {
         value: value,
         setValue: setValue,
@@ -184,6 +185,7 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
             overlayState.setOpen(isOpen);
         },
         validationState: validationState,
+        isInvalid: isValueInvalid,
         formatValue (locale, fieldOptions) {
             if (!dateValue) return "";
             let formatOptions = (0, $35a22f14a1f04b11$export$7e319ea407e63bc0)(fieldOptions, {
@@ -698,6 +700,7 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     let [validSegments, setValidSegments] = (0, $7UzoM$useState)(()=>props.value || props.defaultValue ? {
             ...allSegments
         } : {});
+    let clearedSegment = (0, $7UzoM$useRef)();
     // Reset placeholder when calendar changes
     let lastCalendarIdentifier = (0, $7UzoM$useRef)(calendar.identifier);
     (0, $7UzoM$useEffect)(()=>{
@@ -729,12 +732,20 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate;
     let setValue = (newValue)=>{
         if (props.isDisabled || props.isReadOnly) return;
-        if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        let validKeys = Object.keys(validSegments);
+        let allKeys = Object.keys(allSegments);
+        // if all the segments are completed or a timefield with everything but am/pm set the time, also ignore when am/pm cleared
+        if (newValue == null) {
+            setDate(null);
+            setPlaceholderDate((0, $35a22f14a1f04b11$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
+            setValidSegments({});
+        } else if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== "dayPeriod") {
             // 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, $7UzoM$toCalendar)(newValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (0, $7UzoM$GregorianCalendar)());
             setDate(newValue);
         } else setPlaceholderDate(newValue);
+        clearedSegment.current = null;
     };
     let dateValue = (0, $7UzoM$useMemo)(()=>displayValue.toDate(timeZone), [
         displayValue,
@@ -785,10 +796,13 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     let adjustSegment = (type, amount)=>{
         if (!validSegments[type]) {
             markValid(type);
-            if (Object.keys(validSegments).length >= Object.keys(allSegments).length) setValue(displayValue);
+            let validKeys = Object.keys(validSegments);
+            let allKeys = Object.keys(allSegments);
+            if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) setValue(displayValue);
         } else setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
-    let validationState = props.validationState || ((0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(calendarValue, props.minValue, props.maxValue) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || (0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(calendarValue, props.minValue, props.maxValue);
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     var _props_maxGranularity1;
     return {
         value: calendarValue,
@@ -798,6 +812,7 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
         segments: segments,
         dateFormatter: dateFormatter,
         validationState: validationState,
+        isInvalid: isValueInvalid,
         granularity: granularity,
         maxGranularity: (_props_maxGranularity1 = props.maxGranularity) !== null && _props_maxGranularity1 !== void 0 ? _props_maxGranularity1 : "year",
         isDisabled: isDisabled,
@@ -834,6 +849,7 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
         },
         clearSegment (part) {
             delete validSegments[part];
+            clearedSegment.current = part;
             setValidSegments({
                 ...validSegments
             });
@@ -1069,7 +1085,8 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
         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);
         else setSelectedTimeRange(range);
     };
-    let validationState = props.validationState || (value != null && ((0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value.start, props.minValue, props.maxValue) || (0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value.end, props.minValue, props.maxValue) || value.end != null && value.start != null && value.end.compare(value.start) < 0 || (value === null || value === void 0 ? void 0 : value.start) && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value.start)) || (value === null || value === void 0 ? void 0 : value.end) && ((_props_isDateUnavailable1 = props.isDateUnavailable) === null || _props_isDateUnavailable1 === void 0 ? void 0 : _props_isDateUnavailable1.call(props, value.end))) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || value != null && ((0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value.start, props.minValue, props.maxValue) || (0, $35a22f14a1f04b11$export$eac50920cf2fd59a)(value.end, props.minValue, props.maxValue) || value.end != null && value.start != null && value.end.compare(value.start) < 0 || (value === null || value === void 0 ? void 0 : value.start) && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value.start)) || (value === null || value === void 0 ? void 0 : value.end) && ((_props_isDateUnavailable1 = props.isDateUnavailable) === null || _props_isDateUnavailable1 === void 0 ? void 0 : _props_isDateUnavailable1.call(props, value.end)));
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     return {
         value: value,
         setValue: setValue,
@@ -1109,6 +1126,7 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
             overlayState.setOpen(isOpen);
         },
         validationState: validationState,
+        isInvalid: isValueInvalid,
         formatValue (locale, fieldOptions) {
             if (!value || !value.start || !value.end) return null;
             let startTimeZone = "timeZone" in value.start ? value.start.timeZone : undefined;
@@ -1192,8 +1210,14 @@ function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
     let [value, setValue] = (0, $7UzoM$useControlledState)(props.value, props.defaultValue, props.onChange);
     let v = value || placeholderValue;
     let day = v && "day" in v ? v : undefined;
-    let placeholderDate = (0, $7UzoM$useMemo)(()=>$eff5d8ee529ac4bb$var$convertValue(placeholderValue), [
-        placeholderValue
+    let defaultValueTimeZone = props.defaultValue && "timeZone" in props.defaultValue ? props.defaultValue.timeZone : undefined;
+    let placeholderDate = (0, $7UzoM$useMemo)(()=>{
+        let valueTimeZone = v && "timeZone" in v ? v.timeZone : undefined;
+        return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? (0, $7UzoM$toZoned)($eff5d8ee529ac4bb$var$convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : $eff5d8ee529ac4bb$var$convertValue(placeholderValue);
+    }, [
+        placeholderValue,
+        v,
+        defaultValueTimeZone
     ]);
     let minDate = (0, $7UzoM$useMemo)(()=>$eff5d8ee529ac4bb$var$convertValue(minValue, day), [
         minValue,
@@ -1203,13 +1227,16 @@ function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
         maxValue,
         day
     ]);
+    let timeValue = (0, $7UzoM$useMemo)(()=>value && "day" in value ? (0, $7UzoM$toTime)(value) : value, [
+        value
+    ]);
     let dateTime = (0, $7UzoM$useMemo)(()=>value == null ? null : $eff5d8ee529ac4bb$var$convertValue(value), [
         value
     ]);
     let onChange = (newValue)=>{
-        setValue(v && "day" in v ? newValue : newValue && (0, $7UzoM$toTime)(newValue));
+        setValue(day || defaultValueTimeZone ? newValue : newValue && (0, $7UzoM$toTime)(newValue));
     };
-    return (0, $3c0fc76039f1c516$export$60e84778edff6d26)({
+    let state = (0, $3c0fc76039f1c516$export$60e84778edff6d26)({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -1222,6 +1249,10 @@ function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
         // Calendar should not matter for time fields.
         createCalendar: ()=>new (0, $7UzoM$GregorianCalendar)()
     });
+    return {
+        ...state,
+        timeValue: timeValue
+    };
 }
 function $eff5d8ee529ac4bb$var$convertValue(value, date = (0, $7UzoM$today)((0, $7UzoM$getLocalTimeZone)())) {
     if (!value) return null;

package/dist/main.js

@@ -173,7 +173,8 @@ function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
         if (selectedDate && newValue) commitValue(selectedDate, newValue);
         else setSelectedTime(newValue);
     };
-    let validationState = props.validationState || ((0, $50d5d6a623389320$export$eac50920cf2fd59a)(value, props.minValue, props.maxValue) ? "invalid" : null) || (value && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value)) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || (0, $50d5d6a623389320$export$eac50920cf2fd59a)(value, props.minValue, props.maxValue) || value && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value));
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     return {
         value: value,
         setValue: setValue,
@@ -192,6 +193,7 @@ function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
             overlayState.setOpen(isOpen);
         },
         validationState: validationState,
+        isInvalid: isValueInvalid,
         formatValue (locale, fieldOptions) {
             if (!dateValue) return "";
             let formatOptions = (0, $50d5d6a623389320$export$7e319ea407e63bc0)(fieldOptions, {
@@ -706,6 +708,7 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
     let [validSegments, setValidSegments] = (0, $h2qOe$react.useState)(()=>props.value || props.defaultValue ? {
             ...allSegments
         } : {});
+    let clearedSegment = (0, $h2qOe$react.useRef)();
     // Reset placeholder when calendar changes
     let lastCalendarIdentifier = (0, $h2qOe$react.useRef)(calendar.identifier);
     (0, $h2qOe$react.useEffect)(()=>{
@@ -737,12 +740,20 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
     let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate;
     let setValue = (newValue)=>{
         if (props.isDisabled || props.isReadOnly) return;
-        if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        let validKeys = Object.keys(validSegments);
+        let allKeys = Object.keys(allSegments);
+        // if all the segments are completed or a timefield with everything but am/pm set the time, also ignore when am/pm cleared
+        if (newValue == null) {
+            setDate(null);
+            setPlaceholderDate((0, $50d5d6a623389320$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
+            setValidSegments({});
+        } else if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== "dayPeriod") {
             // 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, $h2qOe$internationalizeddate.toCalendar)(newValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (0, $h2qOe$internationalizeddate.GregorianCalendar)());
             setDate(newValue);
         } else setPlaceholderDate(newValue);
+        clearedSegment.current = null;
     };
     let dateValue = (0, $h2qOe$react.useMemo)(()=>displayValue.toDate(timeZone), [
         displayValue,
@@ -793,10 +804,13 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
     let adjustSegment = (type, amount)=>{
         if (!validSegments[type]) {
             markValid(type);
-            if (Object.keys(validSegments).length >= Object.keys(allSegments).length) setValue(displayValue);
+            let validKeys = Object.keys(validSegments);
+            let allKeys = Object.keys(allSegments);
+            if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) setValue(displayValue);
         } else setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
-    let validationState = props.validationState || ((0, $50d5d6a623389320$export$eac50920cf2fd59a)(calendarValue, props.minValue, props.maxValue) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || (0, $50d5d6a623389320$export$eac50920cf2fd59a)(calendarValue, props.minValue, props.maxValue);
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     var _props_maxGranularity1;
     return {
         value: calendarValue,
@@ -806,6 +820,7 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         segments: segments,
         dateFormatter: dateFormatter,
         validationState: validationState,
+        isInvalid: isValueInvalid,
         granularity: granularity,
         maxGranularity: (_props_maxGranularity1 = props.maxGranularity) !== null && _props_maxGranularity1 !== void 0 ? _props_maxGranularity1 : "year",
         isDisabled: isDisabled,
@@ -842,6 +857,7 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         },
         clearSegment (part) {
             delete validSegments[part];
+            clearedSegment.current = part;
             setValidSegments({
                 ...validSegments
             });
@@ -1077,7 +1093,8 @@ function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
         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);
         else setSelectedTimeRange(range);
     };
-    let validationState = props.validationState || (value != null && ((0, $50d5d6a623389320$export$eac50920cf2fd59a)(value.start, props.minValue, props.maxValue) || (0, $50d5d6a623389320$export$eac50920cf2fd59a)(value.end, props.minValue, props.maxValue) || value.end != null && value.start != null && value.end.compare(value.start) < 0 || (value === null || value === void 0 ? void 0 : value.start) && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value.start)) || (value === null || value === void 0 ? void 0 : value.end) && ((_props_isDateUnavailable1 = props.isDateUnavailable) === null || _props_isDateUnavailable1 === void 0 ? void 0 : _props_isDateUnavailable1.call(props, value.end))) ? "invalid" : null);
+    let isValueInvalid = props.isInvalid || props.validationState === "invalid" || value != null && ((0, $50d5d6a623389320$export$eac50920cf2fd59a)(value.start, props.minValue, props.maxValue) || (0, $50d5d6a623389320$export$eac50920cf2fd59a)(value.end, props.minValue, props.maxValue) || value.end != null && value.start != null && value.end.compare(value.start) < 0 || (value === null || value === void 0 ? void 0 : value.start) && ((_props_isDateUnavailable = props.isDateUnavailable) === null || _props_isDateUnavailable === void 0 ? void 0 : _props_isDateUnavailable.call(props, value.start)) || (value === null || value === void 0 ? void 0 : value.end) && ((_props_isDateUnavailable1 = props.isDateUnavailable) === null || _props_isDateUnavailable1 === void 0 ? void 0 : _props_isDateUnavailable1.call(props, value.end)));
+    let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
     return {
         value: value,
         setValue: setValue,
@@ -1117,6 +1134,7 @@ function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
             overlayState.setOpen(isOpen);
         },
         validationState: validationState,
+        isInvalid: isValueInvalid,
         formatValue (locale, fieldOptions) {
             if (!value || !value.start || !value.end) return null;
             let startTimeZone = "timeZone" in value.start ? value.start.timeZone : undefined;
@@ -1200,8 +1218,14 @@ function $2654e87be0231a69$export$fd53cef0cc796101(props) {
     let [value, setValue] = (0, $h2qOe$reactstatelyutils.useControlledState)(props.value, props.defaultValue, props.onChange);
     let v = value || placeholderValue;
     let day = v && "day" in v ? v : undefined;
-    let placeholderDate = (0, $h2qOe$react.useMemo)(()=>$2654e87be0231a69$var$convertValue(placeholderValue), [
-        placeholderValue
+    let defaultValueTimeZone = props.defaultValue && "timeZone" in props.defaultValue ? props.defaultValue.timeZone : undefined;
+    let placeholderDate = (0, $h2qOe$react.useMemo)(()=>{
+        let valueTimeZone = v && "timeZone" in v ? v.timeZone : undefined;
+        return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? (0, $h2qOe$internationalizeddate.toZoned)($2654e87be0231a69$var$convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : $2654e87be0231a69$var$convertValue(placeholderValue);
+    }, [
+        placeholderValue,
+        v,
+        defaultValueTimeZone
     ]);
     let minDate = (0, $h2qOe$react.useMemo)(()=>$2654e87be0231a69$var$convertValue(minValue, day), [
         minValue,
@@ -1211,13 +1235,16 @@ function $2654e87be0231a69$export$fd53cef0cc796101(props) {
         maxValue,
         day
     ]);
+    let timeValue = (0, $h2qOe$react.useMemo)(()=>value && "day" in value ? (0, $h2qOe$internationalizeddate.toTime)(value) : value, [
+        value
+    ]);
     let dateTime = (0, $h2qOe$react.useMemo)(()=>value == null ? null : $2654e87be0231a69$var$convertValue(value), [
         value
     ]);
     let onChange = (newValue)=>{
-        setValue(v && "day" in v ? newValue : newValue && (0, $h2qOe$internationalizeddate.toTime)(newValue));
+        setValue(day || defaultValueTimeZone ? newValue : newValue && (0, $h2qOe$internationalizeddate.toTime)(newValue));
     };
-    return (0, $596a1f0f523d6752$export$60e84778edff6d26)({
+    let state = (0, $596a1f0f523d6752$export$60e84778edff6d26)({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -1230,6 +1257,10 @@ function $2654e87be0231a69$export$fd53cef0cc796101(props) {
         // Calendar should not matter for time fields.
         createCalendar: ()=>new (0, $h2qOe$internationalizeddate.GregorianCalendar)()
     });
+    return {
+        ...state,
+        timeValue: timeValue
+    };
 }
 function $2654e87be0231a69$var$convertValue(value, date = (0, $h2qOe$internationalizeddate.today)((0, $h2qOe$internationalizeddate.getLocalTimeZone)())) {
     if (!value) return null;