@react-stately/datepicker 3.0.0-nightly.1409 → 3.0.0-nightly.1484

package/dist/main.js

@@ -1,6 +1,6 @@
-var $17UYf$internationalizeddate = require("@internationalized/date");
-var $17UYf$reactstatelyutils = require("@react-stately/utils");
-var $17UYf$react = require("react");
+var $h2qOe$internationalizeddate = require("@internationalized/date");
+var $h2qOe$reactstatelyutils = require("@react-stately/utils");
+var $h2qOe$react = require("react");
 
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
@@ -21,16 +21,16 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $0c9ae69d60d14242$exports = {};
+var $aaab7a647e17e1fd$exports = {};
 
-$parcel$export($0c9ae69d60d14242$exports, "useDatePickerState", () => $0c9ae69d60d14242$export$87194bb378cc3ac2);
+$parcel$export($aaab7a647e17e1fd$exports, "useDatePickerState", () => $aaab7a647e17e1fd$export$87194bb378cc3ac2);
 
 
 
-function $a1a093054004b094$export$eac50920cf2fd59a(value, minValue, maxValue) {
+function $50d5d6a623389320$export$eac50920cf2fd59a(value, minValue, maxValue) {
     return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
 }
-const $a1a093054004b094$var$DEFAULT_FIELD_OPTIONS = {
+const $50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS = {
     year: 'numeric',
     month: 'numeric',
     day: 'numeric',
@@ -38,14 +38,15 @@ const $a1a093054004b094$var$DEFAULT_FIELD_OPTIONS = {
     minute: '2-digit',
     second: '2-digit'
 };
-function $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, options) {
+function $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, options) {
     fieldOptions = {
-        ...$a1a093054004b094$var$DEFAULT_FIELD_OPTIONS,
+        ...$50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS,
         ...fieldOptions
     };
     let granularity = options.granularity || 'minute';
     let keys = Object.keys(fieldOptions);
-    let startIdx = keys.indexOf(options.maxGranularity ?? 'year');
+    var _maxGranularity;
+    let startIdx = keys.indexOf((_maxGranularity = options.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year');
     if (startIdx < 0) startIdx = 0;
     let endIdx = keys.indexOf(granularity);
     if (endIdx < 0) endIdx = 2;
@@ -61,30 +62,30 @@ function $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, options) {
     if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short';
     return opts1;
 }
-function $a1a093054004b094$export$c5221a78ef73c5e9(placeholderValue) {
+function $50d5d6a623389320$export$c5221a78ef73c5e9(placeholderValue) {
     if (placeholderValue && 'hour' in placeholderValue) return placeholderValue;
-    return new $17UYf$internationalizeddate.Time();
+    return new $h2qOe$internationalizeddate.Time();
 }
-function $a1a093054004b094$export$61a490a80c552550(value, calendar) {
+function $50d5d6a623389320$export$61a490a80c552550(value, calendar) {
     if (value === null) return null;
     if (!value) return undefined;
-    return $17UYf$internationalizeddate.toCalendar(value, calendar);
+    return $h2qOe$internationalizeddate.toCalendar(value, calendar);
 }
-function $a1a093054004b094$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
-    if (placeholderValue) return $a1a093054004b094$export$61a490a80c552550(placeholderValue, calendar);
-    let date = $17UYf$internationalizeddate.toCalendar($17UYf$internationalizeddate.now(timeZone).set({
+function $50d5d6a623389320$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
+    if (placeholderValue) return $50d5d6a623389320$export$61a490a80c552550(placeholderValue, calendar);
+    let date = $h2qOe$internationalizeddate.toCalendar($h2qOe$internationalizeddate.now(timeZone).set({
         hour: 0,
         minute: 0,
         second: 0,
         millisecond: 0
     }), calendar);
-    if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $17UYf$internationalizeddate.toCalendarDate(date);
-    if (!timeZone) return $17UYf$internationalizeddate.toCalendarDateTime(date);
+    if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $h2qOe$internationalizeddate.toCalendarDate(date);
+    if (!timeZone) return $h2qOe$internationalizeddate.toCalendarDateTime(date);
     return date;
 }
-function $a1a093054004b094$export$2440da353cedad43(v, granularity) {
+function $50d5d6a623389320$export$2440da353cedad43(v, granularity) {
     // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
-    let lastValue = $17UYf$react.useRef(v);
+    let lastValue = $h2qOe$react.useRef(v);
     if (v) lastValue.current = v;
     v = lastValue.current;
     let defaultTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
@@ -101,15 +102,18 @@ function $a1a093054004b094$export$2440da353cedad43(v, granularity) {
 
 
 
-function $0c9ae69d60d14242$export$87194bb378cc3ac2(props) {
-    let [isOpen1, setOpen] = $17UYf$react.useState(false);
-    let [value, setValue] = $17UYf$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
+function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
+    var ref;
+    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
     let v = value || props.placeholderValue;
-    let [granularity, defaultTimeZone] = $a1a093054004b094$export$2440da353cedad43(v, props.granularity);
-    let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity);
+    let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null;
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
-    let [selectedDate, setSelectedDate] = $17UYf$react.useState(null);
-    let [selectedTime, setSelectedTime] = $17UYf$react.useState(null);
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [selectedDate, setSelectedDate] = $h2qOe$react.useState(null);
+    let [selectedTime, setSelectedTime] = $h2qOe$react.useState(null);
     if (value) {
         selectedDate = value;
         if ('hour' in value) selectedTime = value;
@@ -117,21 +121,22 @@ function $0c9ae69d60d14242$export$87194bb378cc3ac2(props) {
     // props.granularity must actually exist in the value if one is provided.
     if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
     let commitValue = (date, time)=>{
-        setValue('timeZone' in time ? time.set($17UYf$internationalizeddate.toDateFields(date)) : $17UYf$internationalizeddate.toCalendarDateTime(date, time));
+        setValue('timeZone' in time ? time.set($h2qOe$internationalizeddate.toCalendarDate(date)) : $h2qOe$internationalizeddate.toCalendarDateTime(date, time));
     };
     // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
     let selectDate = (newValue)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (selectedTime) commitValue(newValue, selectedTime);
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
             else setSelectedDate(newValue);
         } else setValue(newValue);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
     let selectTime = (newValue)=>{
         if (selectedDate) commitValue(selectedDate, newValue);
         else setSelectedTime(newValue);
     };
-    let validationState = props.validationState || ($a1a093054004b094$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null);
+    let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null) || (value && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value)) ? 'invalid' : null);
     return {
         value: value,
         setValue: setValue,
@@ -140,38 +145,39 @@ function $0c9ae69d60d14242$export$87194bb378cc3ac2(props) {
         setDateValue: selectDate,
         setTimeValue: selectTime,
         granularity: granularity,
+        hasTime: hasTime,
         isOpen: isOpen1,
         setOpen (isOpen) {
             // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.
             // If only the time was set and not the date, don't commit. The state will be preserved until
             // the user opens the popover again.
-            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $a1a093054004b094$export$c5221a78ef73c5e9(props.placeholderValue));
+            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
             setOpen(isOpen);
         },
         validationState: validationState,
         formatValue (locale, fieldOptions) {
             if (!dateValue) return '';
-            let formatOptions = $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, {
+            let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
                 granularity: granularity,
                 timeZone: defaultTimeZone,
                 hideTimeZone: props.hideTimeZone,
                 hourCycle: props.hourCycle
             });
-            let formatter = new $17UYf$internationalizeddate.DateFormatter(locale, formatOptions);
+            let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions);
             return formatter.format(dateValue);
         }
     };
 }
 
 
-var $f23cc841f3588f43$exports = {};
+var $596a1f0f523d6752$exports = {};
 
-$parcel$export($f23cc841f3588f43$exports, "useDatePickerFieldState", () => $f23cc841f3588f43$export$714a241b39a650d6);
+$parcel$export($596a1f0f523d6752$exports, "useDateFieldState", () => $596a1f0f523d6752$export$60e84778edff6d26);
 
 
 
 
-const $f23cc841f3588f43$var$EDITABLE_SEGMENTS = {
+const $596a1f0f523d6752$var$EDITABLE_SEGMENTS = {
     year: true,
     month: true,
     day: true,
@@ -181,7 +187,7 @@ const $f23cc841f3588f43$var$EDITABLE_SEGMENTS = {
     dayPeriod: true,
     era: true
 };
-const $f23cc841f3588f43$var$PAGE_STEP = {
+const $596a1f0f523d6752$var$PAGE_STEP = {
     year: 5,
     month: 2,
     day: 7,
@@ -190,19 +196,20 @@ const $f23cc841f3588f43$var$PAGE_STEP = {
     second: 15
 };
 // Node seems to convert everything to lowercase...
-const $f23cc841f3588f43$var$TYPE_MAPPING = {
+const $596a1f0f523d6752$var$TYPE_MAPPING = {
     dayperiod: 'dayPeriod'
 };
-function $f23cc841f3588f43$export$714a241b39a650d6(props) {
-    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone  } = props;
+function $596a1f0f523d6752$export$60e84778edff6d26(props) {
+    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
     let v1 = props.value || props.defaultValue || props.placeholderValue;
-    let [granularity, defaultTimeZone] = $a1a093054004b094$export$2440da353cedad43(v1, props.granularity);
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v1, props.granularity);
     let timeZone = defaultTimeZone || 'UTC';
     // props.granularity must actually exist in the value if one is provided.
     if (v1 && !(granularity in v1)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v1.toString());
-    let formatOpts = $17UYf$react.useMemo(()=>({
+    var _maxGranularity;
+    let formatOpts = $h2qOe$react.useMemo(()=>({
             granularity: granularity,
-            maxGranularity: props.maxGranularity ?? 'year',
+            maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year',
             timeZone: defaultTimeZone,
             hideTimeZone: hideTimeZone,
             hourCycle: props.hourCycle
@@ -214,35 +221,35 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         defaultTimeZone,
         hideTimeZone
     ]);
-    let opts = $17UYf$react.useMemo(()=>$a1a093054004b094$export$7e319ea407e63bc0({
+    let opts = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$7e319ea407e63bc0({
         }, formatOpts)
     , [
         formatOpts
     ]);
-    let dateFormatter = $17UYf$react.useMemo(()=>new $17UYf$internationalizeddate.DateFormatter(locale, opts)
+    let dateFormatter = $h2qOe$react.useMemo(()=>new $h2qOe$internationalizeddate.DateFormatter(locale, opts)
     , [
         locale,
         opts
     ]);
-    let resolvedOptions = $17UYf$react.useMemo(()=>dateFormatter.resolvedOptions()
+    let resolvedOptions = $h2qOe$react.useMemo(()=>dateFormatter.resolvedOptions()
     , [
         dateFormatter
     ]);
-    let calendar = $17UYf$react.useMemo(()=>createCalendar(resolvedOptions.calendar)
+    let calendar = $h2qOe$react.useMemo(()=>createCalendar(resolvedOptions.calendar)
     , [
         createCalendar,
         resolvedOptions.calendar
     ]);
     // Determine how many editable segments there are for validation purposes.
     // The result is cached for performance.
-    let allSegments = $17UYf$react.useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$f23cc841f3588f43$var$EDITABLE_SEGMENTS[seg.type]
+    let allSegments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$596a1f0f523d6752$var$EDITABLE_SEGMENTS[seg.type]
         ).reduce((p, seg)=>(p[seg.type] = true, p)
         , {
         })
     , [
         dateFormatter
     ]);
-    let [validSegments, setValidSegments] = $17UYf$react.useState(()=>props.value || props.defaultValue ? {
+    let [validSegments, setValidSegments] = $h2qOe$react.useState(()=>props.value || props.defaultValue ? {
             ...allSegments
         } : {
         }
@@ -251,14 +258,14 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
     // until all segments are set. If the value === null (not undefined), then assume the component
     // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
     // change from uncontrolled to controlled and emit a warning.
-    let [placeholderDate, setPlaceholderDate] = $17UYf$react.useState(()=>$a1a093054004b094$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+    let [placeholderDate, setPlaceholderDate] = $h2qOe$react.useState(()=>$50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
     );
     // Reset placeholder when calendar changes
-    let lastCalendarIdentifier = $17UYf$react.useRef(calendar.identifier);
-    $17UYf$react.useEffect(()=>{
+    let lastCalendarIdentifier = $h2qOe$react.useRef(calendar.identifier);
+    $h2qOe$react.useEffect(()=>{
         if (calendar.identifier !== lastCalendarIdentifier.current) {
             lastCalendarIdentifier.current = calendar.identifier;
-            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $17UYf$internationalizeddate.toCalendar(placeholder, calendar) : $a1a093054004b094$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $h2qOe$internationalizeddate.toCalendar(placeholder, calendar) : $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
             );
         }
     }, [
@@ -268,8 +275,8 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         defaultTimeZone,
         props.placeholderValue
     ]);
-    let [value1, setDate] = $17UYf$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarValue = $17UYf$react.useMemo(()=>$a1a093054004b094$export$61a490a80c552550(value1, calendar)
+    let [value1, setDate] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarValue = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$61a490a80c552550(value1, calendar)
     , [
         value1,
         calendar
@@ -286,7 +293,7 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         validSegments = {
         };
         setValidSegments(validSegments);
-        setPlaceholderDate($a1a093054004b094$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone));
+        setPlaceholderDate($50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone));
     }
     // If all segments are valid, use the date from state, otherwise use the placeholder date.
     let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate;
@@ -295,23 +302,23 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
             // 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 = $17UYf$internationalizeddate.toCalendar(newValue, v1?.calendar || new $17UYf$internationalizeddate.GregorianCalendar());
+            newValue = $h2qOe$internationalizeddate.toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $h2qOe$internationalizeddate.GregorianCalendar());
             setDate(newValue);
         } else setPlaceholderDate(newValue);
     };
-    let dateValue = $17UYf$react.useMemo(()=>displayValue.toDate(timeZone)
+    let dateValue = $h2qOe$react.useMemo(()=>displayValue.toDate(timeZone)
     , [
         displayValue,
         timeZone
     ]);
-    let segments = $17UYf$react.useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $f23cc841f3588f43$var$EDITABLE_SEGMENTS[segment.type];
+    let segments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
+            let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type];
             if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
             return {
-                type: $f23cc841f3588f43$var$TYPE_MAPPING[segment.type] || segment.type,
+                type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type,
                 text: segment.value,
-                ...$f23cc841f3588f43$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: $f23cc841f3588f43$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
+                isPlaceholder: $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
                 isEditable: isEditable
             };
         })
@@ -323,7 +330,7 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         displayValue,
         calendar
     ]);
-    let hasEra = $17UYf$react.useMemo(()=>segments.some((s)=>s.type === 'era'
+    let hasEra = $h2qOe$react.useMemo(()=>segments.some((s)=>s.type === 'era'
         )
     , [
         segments
@@ -337,9 +344,9 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
     };
     let adjustSegment = (type, amount)=>{
         markValid(type);
-        setValue($f23cc841f3588f43$var$addSegment(displayValue, type, amount, resolvedOptions));
+        setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
-    let validationState = props.validationState || ($a1a093054004b094$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
     return {
         value: calendarValue,
         dateValue: dateValue,
@@ -348,6 +355,9 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
         dateFormatter: dateFormatter,
         validationState: validationState,
         granularity: granularity,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
         increment (part) {
             adjustSegment(part, 1);
         },
@@ -355,14 +365,14 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
             adjustSegment(part, -1);
         },
         incrementPage (part) {
-            adjustSegment(part, $f23cc841f3588f43$var$PAGE_STEP[part] || 1);
+            adjustSegment(part, $596a1f0f523d6752$var$PAGE_STEP[part] || 1);
         },
         decrementPage (part) {
-            adjustSegment(part, -($f23cc841f3588f43$var$PAGE_STEP[part] || 1));
+            adjustSegment(part, -($596a1f0f523d6752$var$PAGE_STEP[part] || 1));
         },
         setSegment (part, v) {
             markValid(part);
-            setValue($f23cc841f3588f43$var$setSegment(displayValue, part, v, resolvedOptions));
+            setValue($596a1f0f523d6752$var$setSegment(displayValue, part, v, resolvedOptions));
         },
         confirmPlaceholder (part) {
             if (props.isDisabled || props.isReadOnly) return;
@@ -386,7 +396,7 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
             setValidSegments({
                 ...validSegments
             });
-            let placeholder = $a1a093054004b094$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
+            let placeholder = $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
             let value = displayValue;
             // Reset day period to default without changing the hour.
             if (part === 'dayPeriod' && 'hour' in displayValue && 'hour' in placeholder) {
@@ -404,12 +414,15 @@ function $f23cc841f3588f43$export$714a241b39a650d6(props) {
             setDate(null);
             setValue(value);
         },
-        getFormatOptions (fieldOptions) {
-            return $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+        formatValue (fieldOptions) {
+            if (!calendarValue) return '';
+            let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+            let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions);
+            return formatter.format(dateValue);
         }
     };
 }
-function $f23cc841f3588f43$var$getSegmentLimits(date, type, options) {
+function $596a1f0f523d6752$var$getSegmentLimits(date, type, options) {
     switch(type){
         case 'era':
             {
@@ -429,13 +442,13 @@ function $f23cc841f3588f43$var$getSegmentLimits(date, type, options) {
         case 'month':
             return {
                 value: date.month,
-                minValue: $17UYf$internationalizeddate.getMinimumMonthInYear(date),
+                minValue: $h2qOe$internationalizeddate.getMinimumMonthInYear(date),
                 maxValue: date.calendar.getMonthsInYear(date)
             };
         case 'day':
             return {
                 value: date.day,
-                minValue: $17UYf$internationalizeddate.getMinimumDayInMonth(date),
+                minValue: $h2qOe$internationalizeddate.getMinimumDayInMonth(date),
                 maxValue: date.calendar.getDaysInMonth(date)
             };
     }
@@ -476,7 +489,7 @@ function $f23cc841f3588f43$var$getSegmentLimits(date, type, options) {
     return {
     };
 }
-function $f23cc841f3588f43$var$addSegment(value, part, amount, options) {
+function $596a1f0f523d6752$var$addSegment(value, part, amount, options) {
     switch(part){
         case 'era':
         case 'year':
@@ -504,7 +517,7 @@ function $f23cc841f3588f43$var$addSegment(value, part, amount, options) {
             });
     }
 }
-function $f23cc841f3588f43$var$setSegment(value, part, segmentValue, options) {
+function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) {
     switch(part){
         case 'day':
         case 'month':
@@ -542,17 +555,18 @@ function $f23cc841f3588f43$var$setSegment(value, part, segmentValue, options) {
 }
 
 
-var $85a6c757c811abb9$exports = {};
+var $7072d26f58deb33b$exports = {};
 
-$parcel$export($85a6c757c811abb9$exports, "useDateRangePickerState", () => $85a6c757c811abb9$export$e50a61c1de9f574);
+$parcel$export($7072d26f58deb33b$exports, "useDateRangePickerState", () => $7072d26f58deb33b$export$e50a61c1de9f574);
 
 
 
 
-function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
-    let [isOpen1, setOpen] = $17UYf$react.useState(false);
-    let [controlledValue, setControlledValue] = $17UYf$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
-    let [placeholderValue, setPlaceholderValue] = $17UYf$react.useState(()=>controlledValue || {
+function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
+    var ref, ref1;
+    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let [controlledValue, setControlledValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
+    let [placeholderValue, setPlaceholderValue] = $h2qOe$react.useState(()=>controlledValue || {
             start: null,
             end: null
         }
@@ -566,49 +580,56 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
         setPlaceholderValue(placeholderValue);
     }
     let value1 = controlledValue || placeholderValue;
-    let valueRef = $17UYf$react.useRef(value1);
+    let valueRef = $h2qOe$react.useRef(value1);
     valueRef.current = value1;
     let setValue = (value)=>{
         valueRef.current = value;
         setPlaceholderValue(value);
-        if (value?.start && value.end) setControlledValue(value);
+        if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value);
         else setControlledValue(null);
     };
-    let v = value1?.start || value1?.end || props.placeholderValue;
-    let [granularity, defaultTimeZone] = $a1a093054004b094$export$2440da353cedad43(v, props.granularity);
+    let v = (value1 === null || value1 === void 0 ? void 0 : value1.start) || (value1 === null || value1 === void 0 ? void 0 : value1.end) || props.placeholderValue;
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity);
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
-    let [dateRange1, setSelectedDateRange] = $17UYf$react.useState(null);
-    let [timeRange1, setSelectedTimeRange] = $17UYf$react.useState(null);
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [dateRange1, setSelectedDateRange] = $h2qOe$react.useState(null);
+    let [timeRange1, setSelectedTimeRange] = $h2qOe$react.useState(null);
     if (value1 && value1.start && value1.end) {
         dateRange1 = value1;
         if ('hour' in value1.start) timeRange1 = value1;
     }
     let commitValue = (dateRange, timeRange)=>{
         setValue({
-            start: 'timeZone' in timeRange.start ? timeRange.start.set($17UYf$internationalizeddate.toDateFields(dateRange.start)) : $17UYf$internationalizeddate.toCalendarDateTime(dateRange.start, timeRange.start),
-            end: 'timeZone' in timeRange.end ? timeRange.end.set($17UYf$internationalizeddate.toDateFields(dateRange.end)) : $17UYf$internationalizeddate.toCalendarDateTime(dateRange.end, timeRange.end)
+            start: 'timeZone' in timeRange.start ? timeRange.start.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.start)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.start, timeRange.start),
+            end: 'timeZone' in timeRange.end ? timeRange.end.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.end)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.end, timeRange.end)
         });
     };
     // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
     let setDateRange = (range)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
         if (hasTime) {
-            if (range.start && range.end && timeRange1?.start && timeRange1?.end) commitValue(range, timeRange1);
+            if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)
+            });
             else setSelectedDateRange(range);
         } else if (range.start && range.end) setValue(range);
         else setSelectedDateRange(range);
-        if (!hasTime) setOpen(false);
+        if (shouldClose) setOpen(false);
     };
     let setTimeRange = (range)=>{
-        if (dateRange1?.start && dateRange1?.end && range.start && range.end) commitValue(dateRange1, range);
+        if ((dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && range.start && range.end) commitValue(dateRange1, range);
         else setSelectedTimeRange(range);
     };
-    let validationState = props.validationState || (value1 != null && ($a1a093054004b094$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $a1a093054004b094$export$eac50920cf2fd59a(value1.end, props.minValue, props.maxValue) || value1.end != null && value1.start != null && value1.end.compare(value1.start) < 0) ? 'invalid' : null);
+    let validationState = props.validationState || (value1 != null && ($50d5d6a623389320$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $50d5d6a623389320$export$eac50920cf2fd59a(value1.end, props.minValue, props.maxValue) || value1.end != null && value1.start != null && value1.end.compare(value1.start) < 0 || (value1 === null || value1 === void 0 ? void 0 : value1.start) && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value1.start)) || (value1 === null || value1 === void 0 ? void 0 : value1.end) && ((ref1 = props.isDateUnavailable) === null || ref1 === void 0 ? void 0 : ref1.call(props, value1.end))) ? 'invalid' : null);
     return {
         value: value1,
         setValue: setValue,
         dateRange: dateRange1,
         timeRange: timeRange1,
         granularity: granularity,
+        hasTime: hasTime,
         setDate (part, date) {
             setDateRange({
                 ...dateRange1,
@@ -634,9 +655,9 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
             // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
             // If only the time range was set and not the date range, don't commit. The state will be preserved until
             // the user opens the popover again.
-            if (!isOpen && !(value1?.start && value1?.end) && dateRange1?.start && dateRange1?.end && hasTime) commitValue(dateRange1, {
-                start: timeRange1?.start || $a1a093054004b094$export$c5221a78ef73c5e9(props.placeholderValue),
-                end: timeRange1?.end || $a1a093054004b094$export$c5221a78ef73c5e9(props.placeholderValue)
+            if (!isOpen && !((value1 === null || value1 === void 0 ? void 0 : value1.start) && (value1 === null || value1 === void 0 ? void 0 : value1.end)) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && hasTime) commitValue(dateRange1, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)
             });
             setOpen(isOpen);
         },
@@ -647,13 +668,13 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
             let startGranularity = props.granularity || (value1.start && 'minute' in value1.start ? 'minute' : 'day');
             let endTimeZone = 'timeZone' in value1.end ? value1.end.timeZone : undefined;
             let endGranularity = props.granularity || (value1.end && 'minute' in value1.end ? 'minute' : 'day');
-            let startOptions = $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, {
+            let startOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
                 granularity: startGranularity,
                 timeZone: startTimeZone,
                 hideTimeZone: props.hideTimeZone,
                 hourCycle: props.hourCycle
             });
-            let startFormatter = new $17UYf$internationalizeddate.DateFormatter(locale, startOptions);
+            let startFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, startOptions);
             let endFormatter;
             if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
                 // Use formatRange, as it results in shorter output when some of the fields
@@ -666,13 +687,13 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
                 }
                 endFormatter = startFormatter;
             } else {
-                let endOptions = $a1a093054004b094$export$7e319ea407e63bc0(fieldOptions, {
+                let endOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
                     granularity: endGranularity,
                     timeZone: endTimeZone,
                     hideTimeZone: props.hideTimeZone,
                     hourCycle: props.hourCycle
                 });
-                endFormatter = new $17UYf$internationalizeddate.DateFormatter(locale, endOptions);
+                endFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, endOptions);
             }
             return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`;
         },
@@ -682,7 +703,7 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
             let value = valueRef.current;
             if (value && Boolean(value.start) !== Boolean(value.end)) {
                 let calendar = (value.start || value.end).calendar;
-                let placeholder = $a1a093054004b094$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
+                let placeholder = $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
                 setValue({
                     start: value.start || placeholder,
                     end: value.end || placeholder
@@ -693,40 +714,40 @@ function $85a6c757c811abb9$export$e50a61c1de9f574(props) {
 }
 
 
-var $ef228128a792346b$exports = {};
+var $2654e87be0231a69$exports = {};
 
-$parcel$export($ef228128a792346b$exports, "useTimeFieldState", () => $ef228128a792346b$export$fd53cef0cc796101);
+$parcel$export($2654e87be0231a69$exports, "useTimeFieldState", () => $2654e87be0231a69$export$fd53cef0cc796101);
 
 
 
 
-function $ef228128a792346b$export$fd53cef0cc796101(props) {
-    let { placeholderValue: placeholderValue = new $17UYf$internationalizeddate.Time() , minValue: minValue , maxValue: maxValue , granularity: granularity  } = props;
-    let [value, setValue] = $17UYf$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+function $2654e87be0231a69$export$fd53cef0cc796101(props) {
+    let { placeholderValue: placeholderValue = new $h2qOe$internationalizeddate.Time() , minValue: minValue , maxValue: maxValue , granularity: granularity  } = props;
+    let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
     let v = value || placeholderValue;
     let day = v && 'day' in v ? v : undefined;
-    let placeholderDate = $17UYf$react.useMemo(()=>$ef228128a792346b$var$convertValue(placeholderValue)
+    let placeholderDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(placeholderValue)
     , [
         placeholderValue
     ]);
-    let minDate = $17UYf$react.useMemo(()=>$ef228128a792346b$var$convertValue(minValue, day)
+    let minDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(minValue, day)
     , [
         minValue,
         day
     ]);
-    let maxDate = $17UYf$react.useMemo(()=>$ef228128a792346b$var$convertValue(maxValue, day)
+    let maxDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(maxValue, day)
     , [
         maxValue,
         day
     ]);
-    let dateTime = $17UYf$react.useMemo(()=>value == null ? null : $ef228128a792346b$var$convertValue(value)
+    let dateTime = $h2qOe$react.useMemo(()=>value == null ? null : $2654e87be0231a69$var$convertValue(value)
     , [
         value
     ]);
     let onChange = (newValue)=>{
-        setValue(v && 'day' in v ? newValue : newValue && $17UYf$internationalizeddate.toTime(newValue));
+        setValue(v && 'day' in v ? newValue : newValue && $h2qOe$internationalizeddate.toTime(newValue));
     };
-    return $f23cc841f3588f43$export$714a241b39a650d6({
+    return $596a1f0f523d6752$export$60e84778edff6d26({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -735,20 +756,22 @@ function $ef228128a792346b$export$fd53cef0cc796101(props) {
         onChange: onChange,
         granularity: granularity || 'minute',
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate
+        placeholderValue: placeholderDate,
+        // Calendar should not matter for time fields.
+        createCalendar: ()=>new $h2qOe$internationalizeddate.GregorianCalendar()
     });
 }
-function $ef228128a792346b$var$convertValue(value, date = $17UYf$internationalizeddate.today($17UYf$internationalizeddate.getLocalTimeZone())) {
+function $2654e87be0231a69$var$convertValue(value, date = $h2qOe$internationalizeddate.today($h2qOe$internationalizeddate.getLocalTimeZone())) {
     if (!value) return null;
     if ('day' in value) return value;
-    return $17UYf$internationalizeddate.toCalendarDateTime(date, value);
+    return $h2qOe$internationalizeddate.toCalendarDateTime(date, value);
 }
 
 
-$parcel$exportWildcard(module.exports, $0c9ae69d60d14242$exports);
-$parcel$exportWildcard(module.exports, $f23cc841f3588f43$exports);
-$parcel$exportWildcard(module.exports, $85a6c757c811abb9$exports);
-$parcel$exportWildcard(module.exports, $ef228128a792346b$exports);
+$parcel$exportWildcard(module.exports, $aaab7a647e17e1fd$exports);
+$parcel$exportWildcard(module.exports, $596a1f0f523d6752$exports);
+$parcel$exportWildcard(module.exports, $7072d26f58deb33b$exports);
+$parcel$exportWildcard(module.exports, $2654e87be0231a69$exports);
 
 
 //# sourceMappingURL=main.js.map