@react-stately/datepicker 3.0.0-alpha.3 → 3.0.0-alpha.4

package/dist/module.js

@@ -1,20 +1,20 @@
-import {toDateFields as $knqEM$toDateFields, toCalendarDateTime as $knqEM$toCalendarDateTime, DateFormatter as $knqEM$DateFormatter, Time as $knqEM$Time, toCalendar as $knqEM$toCalendar, now as $knqEM$now, toCalendarDate as $knqEM$toCalendarDate, GregorianCalendar as $knqEM$GregorianCalendar, getMinimumMonthInYear as $knqEM$getMinimumMonthInYear, getMinimumDayInMonth as $knqEM$getMinimumDayInMonth, toTime as $knqEM$toTime, today as $knqEM$today, getLocalTimeZone as $knqEM$getLocalTimeZone} from "@internationalized/date";
-import {useControlledState as $knqEM$useControlledState} from "@react-stately/utils";
-import {useState as $knqEM$useState, useRef as $knqEM$useRef, useMemo as $knqEM$useMemo, useEffect as $knqEM$useEffect} from "react";
+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 {useControlledState as $7UzoM$useControlledState} from "@react-stately/utils";
+import {useState as $7UzoM$useState, useRef as $7UzoM$useRef, useMemo as $7UzoM$useMemo, useEffect as $7UzoM$useEffect} from "react";
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $1c592026c7d68d73$exports = {};
+var $ab5bf3f618090389$exports = {};
 
-$parcel$export($1c592026c7d68d73$exports, "useDatePickerState", () => $1c592026c7d68d73$export$87194bb378cc3ac2);
+$parcel$export($ab5bf3f618090389$exports, "useDatePickerState", () => $ab5bf3f618090389$export$87194bb378cc3ac2);
 
 
 
-function $64af0ac69b0f6b87$export$eac50920cf2fd59a(value, minValue, maxValue) {
+function $35a22f14a1f04b11$export$eac50920cf2fd59a(value, minValue, maxValue) {
     return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
 }
-const $64af0ac69b0f6b87$var$DEFAULT_FIELD_OPTIONS = {
+const $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS = {
     year: 'numeric',
     month: 'numeric',
     day: 'numeric',
@@ -22,9 +22,9 @@ const $64af0ac69b0f6b87$var$DEFAULT_FIELD_OPTIONS = {
     minute: '2-digit',
     second: '2-digit'
 };
-function $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, options) {
+function $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, options) {
     fieldOptions = {
-        ...$64af0ac69b0f6b87$var$DEFAULT_FIELD_OPTIONS,
+        ...$35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS,
         ...fieldOptions
     };
     let granularity = options.granularity || 'minute';
@@ -46,30 +46,30 @@ function $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, options) {
     if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short';
     return opts1;
 }
-function $64af0ac69b0f6b87$export$c5221a78ef73c5e9(placeholderValue) {
+function $35a22f14a1f04b11$export$c5221a78ef73c5e9(placeholderValue) {
     if (placeholderValue && 'hour' in placeholderValue) return placeholderValue;
-    return new $knqEM$Time();
+    return new $7UzoM$Time();
 }
-function $64af0ac69b0f6b87$export$61a490a80c552550(value, calendar) {
+function $35a22f14a1f04b11$export$61a490a80c552550(value, calendar) {
     if (value === null) return null;
     if (!value) return undefined;
-    return $knqEM$toCalendar(value, calendar);
+    return $7UzoM$toCalendar(value, calendar);
 }
-function $64af0ac69b0f6b87$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
-    if (placeholderValue) return $64af0ac69b0f6b87$export$61a490a80c552550(placeholderValue, calendar);
-    let date = $knqEM$toCalendar($knqEM$now(timeZone).set({
+function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
+    if (placeholderValue) return $35a22f14a1f04b11$export$61a490a80c552550(placeholderValue, calendar);
+    let date = $7UzoM$toCalendar($7UzoM$now(timeZone).set({
         hour: 0,
         minute: 0,
         second: 0,
         millisecond: 0
     }), calendar);
-    if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $knqEM$toCalendarDate(date);
-    if (!timeZone) return $knqEM$toCalendarDateTime(date);
+    if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $7UzoM$toCalendarDate(date);
+    if (!timeZone) return $7UzoM$toCalendarDateTime(date);
     return date;
 }
-function $64af0ac69b0f6b87$export$2440da353cedad43(v, granularity) {
+function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) {
     // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
-    let lastValue = $knqEM$useRef(v);
+    let lastValue = $7UzoM$useRef(v);
     if (v) lastValue.current = v;
     v = lastValue.current;
     let defaultTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
@@ -86,15 +86,18 @@ function $64af0ac69b0f6b87$export$2440da353cedad43(v, granularity) {
 
 
 
-function $1c592026c7d68d73$export$87194bb378cc3ac2(props) {
-    let [isOpen1, setOpen] = $knqEM$useState(false);
-    let [value, setValue] = $knqEM$useControlledState(props.value, props.defaultValue || null, props.onChange);
+function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
+    var ref;
+    let [isOpen1, setOpen] = $7UzoM$useState(false);
+    let [value, setValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange);
     let v = value || props.placeholderValue;
-    let [granularity, defaultTimeZone] = $64af0ac69b0f6b87$export$2440da353cedad43(v, props.granularity);
+    let [granularity, defaultTimeZone] = $35a22f14a1f04b11$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] = $knqEM$useState(null);
-    let [selectedTime, setSelectedTime] = $knqEM$useState(null);
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [selectedDate, setSelectedDate] = $7UzoM$useState(null);
+    let [selectedTime, setSelectedTime] = $7UzoM$useState(null);
     if (value) {
         selectedDate = value;
         if ('hour' in value) selectedTime = value;
@@ -102,21 +105,22 @@ function $1c592026c7d68d73$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($knqEM$toDateFields(date)) : $knqEM$toCalendarDateTime(date, time));
+        setValue('timeZone' in time ? time.set($7UzoM$toCalendarDate(date)) : $7UzoM$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 || $35a22f14a1f04b11$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 || ($64af0ac69b0f6b87$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null);
+    let validationState = props.validationState || ($35a22f14a1f04b11$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,
@@ -125,38 +129,39 @@ function $1c592026c7d68d73$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 || $64af0ac69b0f6b87$export$c5221a78ef73c5e9(props.placeholderValue));
+            if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue));
             setOpen(isOpen);
         },
         validationState: validationState,
         formatValue (locale, fieldOptions) {
             if (!dateValue) return '';
-            let formatOptions = $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, {
+            let formatOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, {
                 granularity: granularity,
                 timeZone: defaultTimeZone,
                 hideTimeZone: props.hideTimeZone,
                 hourCycle: props.hourCycle
             });
-            let formatter = new $knqEM$DateFormatter(locale, formatOptions);
+            let formatter = new $7UzoM$DateFormatter(locale, formatOptions);
             return formatter.format(dateValue);
         }
     };
 }
 
 
-var $a80b84f02ae54764$exports = {};
+var $3c0fc76039f1c516$exports = {};
 
-$parcel$export($a80b84f02ae54764$exports, "useDatePickerFieldState", () => $a80b84f02ae54764$export$714a241b39a650d6);
+$parcel$export($3c0fc76039f1c516$exports, "useDateFieldState", () => $3c0fc76039f1c516$export$60e84778edff6d26);
 
 
 
 
-const $a80b84f02ae54764$var$EDITABLE_SEGMENTS = {
+const $3c0fc76039f1c516$var$EDITABLE_SEGMENTS = {
     year: true,
     month: true,
     day: true,
@@ -166,7 +171,7 @@ const $a80b84f02ae54764$var$EDITABLE_SEGMENTS = {
     dayPeriod: true,
     era: true
 };
-const $a80b84f02ae54764$var$PAGE_STEP = {
+const $3c0fc76039f1c516$var$PAGE_STEP = {
     year: 5,
     month: 2,
     day: 7,
@@ -175,18 +180,18 @@ const $a80b84f02ae54764$var$PAGE_STEP = {
     second: 15
 };
 // Node seems to convert everything to lowercase...
-const $a80b84f02ae54764$var$TYPE_MAPPING = {
+const $3c0fc76039f1c516$var$TYPE_MAPPING = {
     dayperiod: 'dayPeriod'
 };
-function $a80b84f02ae54764$export$714a241b39a650d6(props) {
-    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone  } = props;
+function $3c0fc76039f1c516$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] = $64af0ac69b0f6b87$export$2440da353cedad43(v1, props.granularity);
+    let [granularity, defaultTimeZone] = $35a22f14a1f04b11$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());
     var _maxGranularity;
-    let formatOpts = $knqEM$useMemo(()=>({
+    let formatOpts = $7UzoM$useMemo(()=>({
             granularity: granularity,
             maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year',
             timeZone: defaultTimeZone,
@@ -200,35 +205,35 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
         defaultTimeZone,
         hideTimeZone
     ]);
-    let opts = $knqEM$useMemo(()=>$64af0ac69b0f6b87$export$7e319ea407e63bc0({
+    let opts = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$7e319ea407e63bc0({
         }, formatOpts)
     , [
         formatOpts
     ]);
-    let dateFormatter = $knqEM$useMemo(()=>new $knqEM$DateFormatter(locale, opts)
+    let dateFormatter = $7UzoM$useMemo(()=>new $7UzoM$DateFormatter(locale, opts)
     , [
         locale,
         opts
     ]);
-    let resolvedOptions = $knqEM$useMemo(()=>dateFormatter.resolvedOptions()
+    let resolvedOptions = $7UzoM$useMemo(()=>dateFormatter.resolvedOptions()
     , [
         dateFormatter
     ]);
-    let calendar = $knqEM$useMemo(()=>createCalendar(resolvedOptions.calendar)
+    let calendar = $7UzoM$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 = $knqEM$useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$a80b84f02ae54764$var$EDITABLE_SEGMENTS[seg.type]
+    let allSegments = $7UzoM$useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$3c0fc76039f1c516$var$EDITABLE_SEGMENTS[seg.type]
         ).reduce((p, seg)=>(p[seg.type] = true, p)
         , {
         })
     , [
         dateFormatter
     ]);
-    let [validSegments, setValidSegments] = $knqEM$useState(()=>props.value || props.defaultValue ? {
+    let [validSegments, setValidSegments] = $7UzoM$useState(()=>props.value || props.defaultValue ? {
             ...allSegments
         } : {
         }
@@ -237,14 +242,14 @@ function $a80b84f02ae54764$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] = $knqEM$useState(()=>$64af0ac69b0f6b87$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+    let [placeholderDate, setPlaceholderDate] = $7UzoM$useState(()=>$35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
     );
     // Reset placeholder when calendar changes
-    let lastCalendarIdentifier = $knqEM$useRef(calendar.identifier);
-    $knqEM$useEffect(()=>{
+    let lastCalendarIdentifier = $7UzoM$useRef(calendar.identifier);
+    $7UzoM$useEffect(()=>{
         if (calendar.identifier !== lastCalendarIdentifier.current) {
             lastCalendarIdentifier.current = calendar.identifier;
-            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $knqEM$toCalendar(placeholder, calendar) : $64af0ac69b0f6b87$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $7UzoM$toCalendar(placeholder, calendar) : $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
             );
         }
     }, [
@@ -254,8 +259,8 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
         defaultTimeZone,
         props.placeholderValue
     ]);
-    let [value1, setDate] = $knqEM$useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarValue = $knqEM$useMemo(()=>$64af0ac69b0f6b87$export$61a490a80c552550(value1, calendar)
+    let [value1, setDate] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarValue = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$61a490a80c552550(value1, calendar)
     , [
         value1,
         calendar
@@ -272,7 +277,7 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
         validSegments = {
         };
         setValidSegments(validSegments);
-        setPlaceholderDate($64af0ac69b0f6b87$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone));
+        setPlaceholderDate($35a22f14a1f04b11$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;
@@ -281,23 +286,23 @@ function $a80b84f02ae54764$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 = $knqEM$toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $knqEM$GregorianCalendar());
+            newValue = $7UzoM$toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $7UzoM$GregorianCalendar());
             setDate(newValue);
         } else setPlaceholderDate(newValue);
     };
-    let dateValue = $knqEM$useMemo(()=>displayValue.toDate(timeZone)
+    let dateValue = $7UzoM$useMemo(()=>displayValue.toDate(timeZone)
     , [
         displayValue,
         timeZone
     ]);
-    let segments = $knqEM$useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $a80b84f02ae54764$var$EDITABLE_SEGMENTS[segment.type];
+    let segments = $7UzoM$useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
+            let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type];
             if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
             return {
-                type: $a80b84f02ae54764$var$TYPE_MAPPING[segment.type] || segment.type,
+                type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type,
                 text: segment.value,
-                ...$a80b84f02ae54764$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: $a80b84f02ae54764$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+                ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
+                isPlaceholder: $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
                 isEditable: isEditable
             };
         })
@@ -309,7 +314,7 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
         displayValue,
         calendar
     ]);
-    let hasEra = $knqEM$useMemo(()=>segments.some((s)=>s.type === 'era'
+    let hasEra = $7UzoM$useMemo(()=>segments.some((s)=>s.type === 'era'
         )
     , [
         segments
@@ -323,9 +328,9 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
     };
     let adjustSegment = (type, amount)=>{
         markValid(type);
-        setValue($a80b84f02ae54764$var$addSegment(displayValue, type, amount, resolvedOptions));
+        setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
-    let validationState = props.validationState || ($64af0ac69b0f6b87$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    let validationState = props.validationState || ($35a22f14a1f04b11$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
     return {
         value: calendarValue,
         dateValue: dateValue,
@@ -334,6 +339,9 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
         dateFormatter: dateFormatter,
         validationState: validationState,
         granularity: granularity,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
         increment (part) {
             adjustSegment(part, 1);
         },
@@ -341,14 +349,14 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
             adjustSegment(part, -1);
         },
         incrementPage (part) {
-            adjustSegment(part, $a80b84f02ae54764$var$PAGE_STEP[part] || 1);
+            adjustSegment(part, $3c0fc76039f1c516$var$PAGE_STEP[part] || 1);
         },
         decrementPage (part) {
-            adjustSegment(part, -($a80b84f02ae54764$var$PAGE_STEP[part] || 1));
+            adjustSegment(part, -($3c0fc76039f1c516$var$PAGE_STEP[part] || 1));
         },
         setSegment (part, v) {
             markValid(part);
-            setValue($a80b84f02ae54764$var$setSegment(displayValue, part, v, resolvedOptions));
+            setValue($3c0fc76039f1c516$var$setSegment(displayValue, part, v, resolvedOptions));
         },
         confirmPlaceholder (part) {
             if (props.isDisabled || props.isReadOnly) return;
@@ -372,7 +380,7 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
             setValidSegments({
                 ...validSegments
             });
-            let placeholder = $64af0ac69b0f6b87$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
+            let placeholder = $35a22f14a1f04b11$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) {
@@ -390,12 +398,15 @@ function $a80b84f02ae54764$export$714a241b39a650d6(props) {
             setDate(null);
             setValue(value);
         },
-        getFormatOptions (fieldOptions) {
-            return $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+        formatValue (fieldOptions) {
+            if (!calendarValue) return '';
+            let formatOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+            let formatter = new $7UzoM$DateFormatter(locale, formatOptions);
+            return formatter.format(dateValue);
         }
     };
 }
-function $a80b84f02ae54764$var$getSegmentLimits(date, type, options) {
+function $3c0fc76039f1c516$var$getSegmentLimits(date, type, options) {
     switch(type){
         case 'era':
             {
@@ -415,13 +426,13 @@ function $a80b84f02ae54764$var$getSegmentLimits(date, type, options) {
         case 'month':
             return {
                 value: date.month,
-                minValue: $knqEM$getMinimumMonthInYear(date),
+                minValue: $7UzoM$getMinimumMonthInYear(date),
                 maxValue: date.calendar.getMonthsInYear(date)
             };
         case 'day':
             return {
                 value: date.day,
-                minValue: $knqEM$getMinimumDayInMonth(date),
+                minValue: $7UzoM$getMinimumDayInMonth(date),
                 maxValue: date.calendar.getDaysInMonth(date)
             };
     }
@@ -462,7 +473,7 @@ function $a80b84f02ae54764$var$getSegmentLimits(date, type, options) {
     return {
     };
 }
-function $a80b84f02ae54764$var$addSegment(value, part, amount, options) {
+function $3c0fc76039f1c516$var$addSegment(value, part, amount, options) {
     switch(part){
         case 'era':
         case 'year':
@@ -490,7 +501,7 @@ function $a80b84f02ae54764$var$addSegment(value, part, amount, options) {
             });
     }
 }
-function $a80b84f02ae54764$var$setSegment(value, part, segmentValue, options) {
+function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
     switch(part){
         case 'day':
         case 'month':
@@ -528,17 +539,18 @@ function $a80b84f02ae54764$var$setSegment(value, part, segmentValue, options) {
 }
 
 
-var $1d5ee7717ccc6781$exports = {};
+var $93c38a5e28be6249$exports = {};
 
-$parcel$export($1d5ee7717ccc6781$exports, "useDateRangePickerState", () => $1d5ee7717ccc6781$export$e50a61c1de9f574);
+$parcel$export($93c38a5e28be6249$exports, "useDateRangePickerState", () => $93c38a5e28be6249$export$e50a61c1de9f574);
 
 
 
 
-function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
-    let [isOpen1, setOpen] = $knqEM$useState(false);
-    let [controlledValue, setControlledValue] = $knqEM$useControlledState(props.value, props.defaultValue || null, props.onChange);
-    let [placeholderValue, setPlaceholderValue] = $knqEM$useState(()=>controlledValue || {
+function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
+    var ref, ref1;
+    let [isOpen1, setOpen] = $7UzoM$useState(false);
+    let [controlledValue, setControlledValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange);
+    let [placeholderValue, setPlaceholderValue] = $7UzoM$useState(()=>controlledValue || {
             start: null,
             end: null
         }
@@ -552,7 +564,7 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
         setPlaceholderValue(placeholderValue);
     }
     let value1 = controlledValue || placeholderValue;
-    let valueRef = $knqEM$useRef(value1);
+    let valueRef = $7UzoM$useRef(value1);
     valueRef.current = value1;
     let setValue = (value)=>{
         valueRef.current = value;
@@ -561,40 +573,47 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
         else setControlledValue(null);
     };
     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] = $64af0ac69b0f6b87$export$2440da353cedad43(v, props.granularity);
+    let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity);
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
-    let [dateRange1, setSelectedDateRange] = $knqEM$useState(null);
-    let [timeRange1, setSelectedTimeRange] = $knqEM$useState(null);
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [dateRange1, setSelectedDateRange] = $7UzoM$useState(null);
+    let [timeRange1, setSelectedTimeRange] = $7UzoM$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($knqEM$toDateFields(dateRange.start)) : $knqEM$toCalendarDateTime(dateRange.start, timeRange.start),
-            end: 'timeZone' in timeRange.end ? timeRange.end.set($knqEM$toDateFields(dateRange.end)) : $knqEM$toCalendarDateTime(dateRange.end, timeRange.end)
+            start: 'timeZone' in timeRange.start ? timeRange.start.set($7UzoM$toCalendarDate(dateRange.start)) : $7UzoM$toCalendarDateTime(dateRange.start, timeRange.start),
+            end: 'timeZone' in timeRange.end ? timeRange.end.set($7UzoM$toCalendarDate(dateRange.end)) : $7UzoM$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 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : 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) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $35a22f14a1f04b11$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 === 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 && ($64af0ac69b0f6b87$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $64af0ac69b0f6b87$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 && ($35a22f14a1f04b11$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $35a22f14a1f04b11$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,
@@ -621,8 +640,8 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
             // 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 === 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) || $64af0ac69b0f6b87$export$c5221a78ef73c5e9(props.placeholderValue),
-                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $64af0ac69b0f6b87$export$c5221a78ef73c5e9(props.placeholderValue)
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue)
             });
             setOpen(isOpen);
         },
@@ -633,13 +652,13 @@ function $1d5ee7717ccc6781$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 = $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, {
+            let startOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, {
                 granularity: startGranularity,
                 timeZone: startTimeZone,
                 hideTimeZone: props.hideTimeZone,
                 hourCycle: props.hourCycle
             });
-            let startFormatter = new $knqEM$DateFormatter(locale, startOptions);
+            let startFormatter = new $7UzoM$DateFormatter(locale, startOptions);
             let endFormatter;
             if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
                 // Use formatRange, as it results in shorter output when some of the fields
@@ -652,13 +671,13 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
                 }
                 endFormatter = startFormatter;
             } else {
-                let endOptions = $64af0ac69b0f6b87$export$7e319ea407e63bc0(fieldOptions, {
+                let endOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, {
                     granularity: endGranularity,
                     timeZone: endTimeZone,
                     hideTimeZone: props.hideTimeZone,
                     hourCycle: props.hourCycle
                 });
-                endFormatter = new $knqEM$DateFormatter(locale, endOptions);
+                endFormatter = new $7UzoM$DateFormatter(locale, endOptions);
             }
             return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`;
         },
@@ -668,7 +687,7 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
             let value = valueRef.current;
             if (value && Boolean(value.start) !== Boolean(value.end)) {
                 let calendar = (value.start || value.end).calendar;
-                let placeholder = $64af0ac69b0f6b87$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
+                let placeholder = $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
                 setValue({
                     start: value.start || placeholder,
                     end: value.end || placeholder
@@ -679,40 +698,40 @@ function $1d5ee7717ccc6781$export$e50a61c1de9f574(props) {
 }
 
 
-var $5f733956a51c019d$exports = {};
+var $eff5d8ee529ac4bb$exports = {};
 
-$parcel$export($5f733956a51c019d$exports, "useTimeFieldState", () => $5f733956a51c019d$export$fd53cef0cc796101);
+$parcel$export($eff5d8ee529ac4bb$exports, "useTimeFieldState", () => $eff5d8ee529ac4bb$export$fd53cef0cc796101);
 
 
 
 
-function $5f733956a51c019d$export$fd53cef0cc796101(props) {
-    let { placeholderValue: placeholderValue = new $knqEM$Time() , minValue: minValue , maxValue: maxValue , granularity: granularity  } = props;
-    let [value, setValue] = $knqEM$useControlledState(props.value, props.defaultValue, props.onChange);
+function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
+    let { placeholderValue: placeholderValue = new $7UzoM$Time() , minValue: minValue , maxValue: maxValue , granularity: granularity  } = props;
+    let [value, setValue] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange);
     let v = value || placeholderValue;
     let day = v && 'day' in v ? v : undefined;
-    let placeholderDate = $knqEM$useMemo(()=>$5f733956a51c019d$var$convertValue(placeholderValue)
+    let placeholderDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(placeholderValue)
     , [
         placeholderValue
     ]);
-    let minDate = $knqEM$useMemo(()=>$5f733956a51c019d$var$convertValue(minValue, day)
+    let minDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(minValue, day)
     , [
         minValue,
         day
     ]);
-    let maxDate = $knqEM$useMemo(()=>$5f733956a51c019d$var$convertValue(maxValue, day)
+    let maxDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(maxValue, day)
     , [
         maxValue,
         day
     ]);
-    let dateTime = $knqEM$useMemo(()=>value == null ? null : $5f733956a51c019d$var$convertValue(value)
+    let dateTime = $7UzoM$useMemo(()=>value == null ? null : $eff5d8ee529ac4bb$var$convertValue(value)
     , [
         value
     ]);
     let onChange = (newValue)=>{
-        setValue(v && 'day' in v ? newValue : newValue && $knqEM$toTime(newValue));
+        setValue(v && 'day' in v ? newValue : newValue && $7UzoM$toTime(newValue));
     };
-    return $a80b84f02ae54764$export$714a241b39a650d6({
+    return $3c0fc76039f1c516$export$60e84778edff6d26({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -721,17 +740,19 @@ function $5f733956a51c019d$export$fd53cef0cc796101(props) {
         onChange: onChange,
         granularity: granularity || 'minute',
         maxGranularity: 'hour',
-        placeholderValue: placeholderDate
+        placeholderValue: placeholderDate,
+        // Calendar should not matter for time fields.
+        createCalendar: ()=>new $7UzoM$GregorianCalendar()
     });
 }
-function $5f733956a51c019d$var$convertValue(value, date = $knqEM$today($knqEM$getLocalTimeZone())) {
+function $eff5d8ee529ac4bb$var$convertValue(value, date = $7UzoM$today($7UzoM$getLocalTimeZone())) {
     if (!value) return null;
     if ('day' in value) return value;
-    return $knqEM$toCalendarDateTime(date, value);
+    return $7UzoM$toCalendarDateTime(date, value);
 }
 
 
 
 
-export {$1c592026c7d68d73$export$87194bb378cc3ac2 as useDatePickerState, $a80b84f02ae54764$export$714a241b39a650d6 as useDatePickerFieldState, $1d5ee7717ccc6781$export$e50a61c1de9f574 as useDateRangePickerState, $5f733956a51c019d$export$fd53cef0cc796101 as useTimeFieldState};
+export {$ab5bf3f618090389$export$87194bb378cc3ac2 as useDatePickerState, $3c0fc76039f1c516$export$60e84778edff6d26 as useDateFieldState, $93c38a5e28be6249$export$e50a61c1de9f574 as useDateRangePickerState, $eff5d8ee529ac4bb$export$fd53cef0cc796101 as useTimeFieldState};
 //# sourceMappingURL=module.js.map