@react-stately/datepicker 3.0.0-nightly.3180 → 3.0.0

package/dist/module.js

@@ -1,13 +1,9 @@
 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 {useOverlayTriggerState as $7UzoM$useOverlayTriggerState} from "@react-stately/overlays";
 import {useState as $7UzoM$useState, useRef as $7UzoM$useRef, useMemo as $7UzoM$useMemo, useEffect as $7UzoM$useEffect} from "react";
+import {MessageDictionary as $7UzoM$MessageDictionary} from "@internationalized/message";
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $ab5bf3f618090389$exports = {};
-
-$parcel$export($ab5bf3f618090389$exports, "useDatePickerState", () => $ab5bf3f618090389$export$87194bb378cc3ac2);
 
 
 
@@ -44,6 +40,7 @@ function $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, options) {
     opts1.timeZone = options.timeZone || 'UTC';
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
     if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short';
+    if (options.showEra && startIdx === 0) opts1.era = 'short';
     return opts1;
 }
 function $35a22f14a1f04b11$export$c5221a78ef73c5e9(placeholderValue) {
@@ -86,9 +83,10 @@ function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) {
 
 
 
+
 function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
     var ref;
-    let [isOpen1, setOpen] = $7UzoM$useState(false);
+    let overlayState = $7UzoM$useOverlayTriggerState(props);
     let [value, setValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange);
     let v = value || props.placeholderValue;
     let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity);
@@ -114,7 +112,7 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
             if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue));
             else setSelectedDate(newValue);
         } else setValue(newValue);
-        if (shouldClose) setOpen(false);
+        if (shouldClose) overlayState.setOpen(false);
     };
     let selectTime = (newValue)=>{
         if (selectedDate) commitValue(selectedDate, newValue);
@@ -130,13 +128,13 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
         setTimeValue: selectTime,
         granularity: granularity,
         hasTime: hasTime,
-        isOpen: isOpen1,
+        isOpen: overlayState.isOpen,
         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 || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue));
-            setOpen(isOpen);
+            overlayState.setOpen(isOpen);
         },
         validationState: validationState,
         formatValue (locale, fieldOptions) {
@@ -145,7 +143,8 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
                 granularity: granularity,
                 timeZone: defaultTimeZone,
                 hideTimeZone: props.hideTimeZone,
-                hourCycle: props.hourCycle
+                hourCycle: props.hourCycle,
+                showEra: value.calendar.identifier === 'gregory' && value.era === 'BC'
             });
             let formatter = new $7UzoM$DateFormatter(locale, formatOptions);
             return formatter.format(dateValue);
@@ -154,9 +153,396 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
 }
 
 
-var $3c0fc76039f1c516$exports = {};
 
-$parcel$export($3c0fc76039f1c516$exports, "useDateFieldState", () => $3c0fc76039f1c516$export$60e84778edff6d26);
+
+
+// These placeholders are based on the strings used by the <input type="date">
+// implementations in Chrome and Firefox. Additional languages are supported
+// here than React Spectrum's typical translations.
+const $3e3ed55ab2966714$var$placeholders = new $7UzoM$MessageDictionary({
+    ach: {
+        year: 'mwaka',
+        month: 'dwe',
+        day: 'nino'
+    },
+    af: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'dd'
+    },
+    am: {
+        year: 'ዓዓዓዓ',
+        month: 'ሚሜ',
+        day: 'ቀቀ'
+    },
+    an: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    ar: {
+        year: 'سنة',
+        month: 'شهر',
+        day: 'يوم'
+    },
+    ast: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    az: {
+        year: 'iiii',
+        month: 'aa',
+        day: 'gg'
+    },
+    be: {
+        year: 'гггг',
+        month: 'мм',
+        day: 'дд'
+    },
+    bg: {
+        year: 'гггг',
+        month: 'мм',
+        day: 'дд'
+    },
+    bn: {
+        year: 'yyyy',
+        month: 'মিমি',
+        day: 'dd'
+    },
+    br: {
+        year: 'bbbb',
+        month: 'mm',
+        day: 'dd'
+    },
+    bs: {
+        year: 'gggg',
+        month: 'mm',
+        day: 'dd'
+    },
+    ca: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    cak: {
+        year: 'jjjj',
+        month: 'ii',
+        day: "q'q'"
+    },
+    ckb: {
+        year: 'ساڵ',
+        month: 'مانگ',
+        day: 'ڕۆژ'
+    },
+    cs: {
+        year: 'rrrr',
+        month: 'mm',
+        day: 'dd'
+    },
+    cy: {
+        year: 'bbbb',
+        month: 'mm',
+        day: 'dd'
+    },
+    da: {
+        year: 'åååå',
+        month: 'mm',
+        day: 'dd'
+    },
+    de: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'tt'
+    },
+    dsb: {
+        year: 'llll',
+        month: 'mm',
+        day: 'źź'
+    },
+    el: {
+        year: 'εεεε',
+        month: 'μμ',
+        day: 'ηη'
+    },
+    en: {
+        year: 'yyyy',
+        month: 'mm',
+        day: 'dd'
+    },
+    eo: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'tt'
+    },
+    es: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    et: {
+        year: 'aaaa',
+        month: 'kk',
+        day: 'pp'
+    },
+    eu: {
+        year: 'uuuu',
+        month: 'hh',
+        day: 'ee'
+    },
+    fa: {
+        year: 'سال',
+        month: 'ماه',
+        day: 'روز'
+    },
+    ff: {
+        year: 'hhhh',
+        month: 'll',
+        day: 'ññ'
+    },
+    fi: {
+        year: 'vvvv',
+        month: 'kk',
+        day: 'pp'
+    },
+    fr: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'jj'
+    },
+    fy: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'dd'
+    },
+    ga: {
+        year: 'bbbb',
+        month: 'mm',
+        day: 'll'
+    },
+    gd: {
+        year: 'bbbb',
+        month: 'mm',
+        day: 'll'
+    },
+    gl: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    he: {
+        year: 'שנה',
+        month: 'חודש',
+        day: 'יום'
+    },
+    hr: {
+        year: 'gggg',
+        month: 'mm',
+        day: 'dd'
+    },
+    hsb: {
+        year: 'llll',
+        month: 'mm',
+        day: 'dd'
+    },
+    hu: {
+        year: 'éééé',
+        month: 'hh',
+        day: 'nn'
+    },
+    ia: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    id: {
+        year: 'tttt',
+        month: 'bb',
+        day: 'hh'
+    },
+    it: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'gg'
+    },
+    ja: {
+        year: ' 年 ',
+        month: '月',
+        day: '日'
+    },
+    ka: {
+        year: 'წწწწ',
+        month: 'თთ',
+        day: 'რრ'
+    },
+    kk: {
+        year: 'жжжж',
+        month: 'аа',
+        day: 'кк'
+    },
+    kn: {
+        year: 'ವವವವ',
+        month: 'ಮಿಮೀ',
+        day: 'ದಿದಿ'
+    },
+    ko: {
+        year: '연도',
+        month: '월',
+        day: '일'
+    },
+    lb: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'dd'
+    },
+    lo: {
+        year: 'ປປປປ',
+        month: 'ດດ',
+        day: 'ວວ'
+    },
+    lt: {
+        year: 'mmmm',
+        month: 'mm',
+        day: 'dd'
+    },
+    lv: {
+        year: 'gggg',
+        month: 'mm',
+        day: 'dd'
+    },
+    meh: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    ml: {
+        year: 'വർഷം',
+        month: 'മാസം',
+        day: 'തീയതി'
+    },
+    ms: {
+        year: 'tttt',
+        month: 'mm',
+        day: 'hh'
+    },
+    nl: {
+        year: 'jjjj',
+        month: 'mm',
+        day: 'dd'
+    },
+    nn: {
+        year: 'åååå',
+        month: 'mm',
+        day: 'dd'
+    },
+    no: {
+        year: 'åååå',
+        month: 'mm',
+        day: 'dd'
+    },
+    oc: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'jj'
+    },
+    pl: {
+        year: 'rrrr',
+        month: 'mm',
+        day: 'dd'
+    },
+    pt: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    rm: {
+        year: 'oooo',
+        month: 'mm',
+        day: 'dd'
+    },
+    ro: {
+        year: 'aaaa',
+        month: 'll',
+        day: 'zz'
+    },
+    ru: {
+        year: 'гггг',
+        month: 'мм',
+        day: 'дд'
+    },
+    sc: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'dd'
+    },
+    scn: {
+        year: 'aaaa',
+        month: 'mm',
+        day: 'jj'
+    },
+    sk: {
+        year: 'rrrr',
+        month: 'mm',
+        day: 'dd'
+    },
+    sl: {
+        year: 'llll',
+        month: 'mm',
+        day: 'dd'
+    },
+    sr: {
+        year: 'гггг',
+        month: 'мм',
+        day: 'дд'
+    },
+    sv: {
+        year: 'åååå',
+        month: 'mm',
+        day: 'dd'
+    },
+    szl: {
+        year: 'rrrr',
+        month: 'mm',
+        day: 'dd'
+    },
+    tg: {
+        year: 'сссс',
+        month: 'мм',
+        day: 'рр'
+    },
+    th: {
+        year: 'ปปปป',
+        month: 'ดด',
+        day: 'วว'
+    },
+    tr: {
+        year: 'yyyy',
+        month: 'aa',
+        day: 'gg'
+    },
+    uk: {
+        year: 'рррр',
+        month: 'мм',
+        day: 'дд'
+    },
+    'zh-CN': {
+        year: '年',
+        month: '月',
+        day: '日'
+    },
+    'zh-TW': {
+        year: '年',
+        month: '月',
+        day: '日'
+    }
+}, 'en');
+function $3e3ed55ab2966714$export$d3f5c5e0a5023fa0(field, value, locale) {
+    // Use the actual placeholder value for the era and day period fields.
+    if (field === 'era' || field === 'dayPeriod') return value;
+    if (field === 'year' || field === 'month' || field === 'day') return $3e3ed55ab2966714$var$placeholders.getStringForLocale(field, locale);
+    // For time fields (e.g. hour, minute, etc.), use two dashes as the placeholder.
+    return '––';
+}
 
 
 
@@ -190,20 +576,45 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     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 defaultFormatter = $7UzoM$useMemo(()=>new $7UzoM$DateFormatter(locale)
+    , [
+        locale
+    ]);
+    let calendar = $7UzoM$useMemo(()=>createCalendar(defaultFormatter.resolvedOptions().calendar)
+    , [
+        createCalendar,
+        defaultFormatter
+    ]);
+    let [value1, setDate] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarValue = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$61a490a80c552550(value1, calendar)
+    , [
+        value1,
+        calendar
+    ]);
+    // We keep track of the placeholder date separately in state so that onChange is not called
+    // 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] = $7UzoM$useState(()=>$35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+    );
+    let val = calendarValue || placeholderDate;
+    let showEra = calendar.identifier === 'gregory' && val.era === 'BC';
     var _maxGranularity;
     let formatOpts = $7UzoM$useMemo(()=>({
             granularity: granularity,
             maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year',
             timeZone: defaultTimeZone,
             hideTimeZone: hideTimeZone,
-            hourCycle: props.hourCycle
+            hourCycle: props.hourCycle,
+            showEra: showEra
         })
     , [
         props.maxGranularity,
         granularity,
         props.hourCycle,
         defaultTimeZone,
-        hideTimeZone
+        hideTimeZone,
+        showEra
     ]);
     let opts = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$7e319ea407e63bc0({
         }, formatOpts)
@@ -219,11 +630,6 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     , [
         dateFormatter
     ]);
-    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 = $7UzoM$useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$3c0fc76039f1c516$var$EDITABLE_SEGMENTS[seg.type]
@@ -238,12 +644,6 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
         } : {
         }
     );
-    // We keep track of the placeholder date separately in state so that onChange is not called
-    // 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] = $7UzoM$useState(()=>$35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
-    );
     // Reset placeholder when calendar changes
     let lastCalendarIdentifier = $7UzoM$useRef(calendar.identifier);
     $7UzoM$useEffect(()=>{
@@ -259,12 +659,6 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
         defaultTimeZone,
         props.placeholderValue
     ]);
-    let [value1, setDate] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarValue = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$61a490a80c552550(value1, calendar)
-    , [
-        value1,
-        calendar
-    ]);
     // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
     if (value1 && Object.keys(validSegments).length < Object.keys(allSegments).length) {
         validSegments = {
@@ -298,11 +692,14 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     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;
+            let isPlaceholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+            let placeholder = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] ? $3e3ed55ab2966714$export$d3f5c5e0a5023fa0(segment.type, segment.value, locale) : null;
             return {
                 type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type,
-                text: segment.value,
+                text: isPlaceholder ? placeholder : segment.value,
                 ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+                isPlaceholder: isPlaceholder,
+                placeholder: placeholder,
                 isEditable: isEditable
             };
         })
@@ -312,33 +709,47 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
         dateFormatter,
         resolvedOptions,
         displayValue,
-        calendar
-    ]);
-    let hasEra = $7UzoM$useMemo(()=>segments.some((s)=>s.type === 'era'
-        )
-    , [
-        segments
+        calendar,
+        locale
     ]);
+    // When the era field appears, mark it valid if the year field is already valid.
+    // If the era field disappears, remove it from the valid segments.
+    if (allSegments.era && validSegments.year && !validSegments.era) {
+        validSegments.era = true;
+        setValidSegments({
+            ...validSegments
+        });
+    } else if (!allSegments.era && validSegments.era) {
+        delete validSegments.era;
+        setValidSegments({
+            ...validSegments
+        });
+    }
     let markValid = (part)=>{
         validSegments[part] = true;
-        if (part === 'year' && hasEra) validSegments.era = true;
+        if (part === 'year' && allSegments.era) validSegments.era = true;
         setValidSegments({
             ...validSegments
         });
     };
     let adjustSegment = (type, amount)=>{
-        markValid(type);
-        setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions));
+        if (!validSegments[type]) {
+            markValid(type);
+            if (Object.keys(validSegments).length >= Object.keys(allSegments).length) setValue(displayValue);
+        } else setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
     let validationState = props.validationState || ($35a22f14a1f04b11$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    var _maxGranularity1;
     return {
         value: calendarValue,
         dateValue: dateValue,
+        calendar: calendar,
         setValue: setValue,
         segments: segments,
         dateFormatter: dateFormatter,
         validationState: validationState,
         granularity: granularity,
+        maxGranularity: (_maxGranularity1 = props.maxGranularity) !== null && _maxGranularity1 !== void 0 ? _maxGranularity1 : 'year',
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         isRequired: isRequired,
@@ -358,20 +769,16 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
             markValid(part);
             setValue($3c0fc76039f1c516$var$setSegment(displayValue, part, v, resolvedOptions));
         },
-        confirmPlaceholder (part) {
+        confirmPlaceholder () {
             if (props.isDisabled || props.isReadOnly) return;
-            if (!part) {
-                // Confirm the rest of the placeholder if any of the segments are valid.
-                let numValid = Object.keys(validSegments).length;
-                if (numValid > 0 && numValid < Object.keys(allSegments).length) {
-                    validSegments = {
-                        ...allSegments
-                    };
-                    setValidSegments(validSegments);
-                    setValue(displayValue.copy());
-                }
-            } else if (!validSegments[part]) {
-                markValid(part);
+            // Confirm the placeholder if only the day period is not filled in.
+            let validKeys = Object.keys(validSegments);
+            let allKeys = Object.keys(allSegments);
+            if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) {
+                validSegments = {
+                    ...allSegments
+                };
+                setValidSegments(validSegments);
                 setValue(displayValue.copy());
             }
         },
@@ -506,6 +913,7 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
         case 'day':
         case 'month':
         case 'year':
+        case 'era':
             return value.set({
                 [part]: segmentValue
             });
@@ -539,16 +947,14 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
 }
 
 
-var $93c38a5e28be6249$exports = {};
 
-$parcel$export($93c38a5e28be6249$exports, "useDateRangePickerState", () => $93c38a5e28be6249$export$e50a61c1de9f574);
 
 
 
 
 function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
     var ref, ref1;
-    let [isOpen1, setOpen] = $7UzoM$useState(false);
+    let overlayState = $7UzoM$useOverlayTriggerState(props);
     let [controlledValue, setControlledValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange);
     let [placeholderValue, setPlaceholderValue] = $7UzoM$useState(()=>controlledValue || {
             start: null,
@@ -564,16 +970,13 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
         setPlaceholderValue(placeholderValue);
     }
     let value1 = controlledValue || placeholderValue;
-    let valueRef = $7UzoM$useRef(value1);
-    valueRef.current = value1;
     let setValue = (value)=>{
-        valueRef.current = value;
         setPlaceholderValue(value);
         if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value);
         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] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity);
+    let [granularity] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity);
     let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
     var _shouldCloseOnSelect;
     let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
@@ -600,7 +1003,7 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
             else setSelectedDateRange(range);
         } else if (range.start && range.end) setValue(range);
         else setSelectedDateRange(range);
-        if (shouldClose) setOpen(false);
+        if (shouldClose) overlayState.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);
@@ -634,7 +1037,7 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
         },
         setDateRange: setDateRange,
         setTimeRange: setTimeRange,
-        isOpen: isOpen1,
+        isOpen: overlayState.isOpen,
         setOpen (isOpen) {
             // 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
@@ -643,11 +1046,11 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
                 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);
+            overlayState.setOpen(isOpen);
         },
         validationState: validationState,
         formatValue (locale, fieldOptions) {
-            if (!value1 || !value1.start || !value1.end) return '';
+            if (!value1 || !value1.start || !value1.end) return null;
             let startTimeZone = 'timeZone' in value1.start ? value1.start.timeZone : undefined;
             let startGranularity = props.granularity || (value1.start && 'minute' in value1.start ? 'minute' : 'day');
             let endTimeZone = 'timeZone' in value1.end ? value1.end.timeZone : undefined;
@@ -656,16 +1059,38 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
                 granularity: startGranularity,
                 timeZone: startTimeZone,
                 hideTimeZone: props.hideTimeZone,
-                hourCycle: props.hourCycle
+                hourCycle: props.hourCycle,
+                showEra: value1.start.calendar.identifier === 'gregory' && value1.start.era === 'BC' || value1.end.calendar.identifier === 'gregory' && value1.end.era === 'BC'
             });
+            let startDate = value1.start.toDate(startTimeZone || 'UTC');
+            let endDate = value1.end.toDate(endTimeZone || 'UTC');
             let startFormatter = new $7UzoM$DateFormatter(locale, startOptions);
             let endFormatter;
-            if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
+            if (startTimeZone === endTimeZone && startGranularity === endGranularity && value1.start.compare(value1.end) !== 0) {
                 // Use formatRange, as it results in shorter output when some of the fields
                 // are shared between the start and end dates (e.g. the same month).
                 // Formatting will fail if the end date is before the start date. Fall back below when that happens.
                 try {
-                    return startFormatter.formatRange(value1.start.toDate(startTimeZone), value1.end.toDate(endTimeZone));
+                    let parts = startFormatter.formatRangeToParts(startDate, endDate);
+                    // Find the separator between the start and end date. This is determined
+                    // by finding the last shared literal before the end range.
+                    let separatorIndex = -1;
+                    for(let i = 0; i < parts.length; i++){
+                        let part = parts[i];
+                        if (part.source === 'shared' && part.type === 'literal') separatorIndex = i;
+                        else if (part.source === 'endRange') break;
+                    }
+                    // Now we can combine the parts into start and end strings.
+                    let start = '';
+                    let end = '';
+                    for(let i1 = 0; i1 < parts.length; i1++){
+                        if (i1 < separatorIndex) start += parts[i1].value;
+                        else if (i1 > separatorIndex) end += parts[i1].value;
+                    }
+                    return {
+                        start: start,
+                        end: end
+                    };
                 } catch (e) {
                 // ignore
                 }
@@ -679,28 +1104,15 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
                 });
                 endFormatter = new $7UzoM$DateFormatter(locale, endOptions);
             }
-            return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`;
-        },
-        confirmPlaceholder () {
-            // Need to use ref value here because the value can be set in the same tick as
-            // a blur, which means the component won't have re-rendered yet.
-            let value = valueRef.current;
-            if (value && Boolean(value.start) !== Boolean(value.end)) {
-                let calendar = (value.start || value.end).calendar;
-                let placeholder = $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
-                setValue({
-                    start: value.start || placeholder,
-                    end: value.end || placeholder
-                });
-            }
+            return {
+                start: startFormatter.format(startDate),
+                end: endFormatter.format(endDate)
+            };
         }
     };
 }
 
 
-var $eff5d8ee529ac4bb$exports = {};
-
-$parcel$export($eff5d8ee529ac4bb$exports, "useTimeFieldState", () => $eff5d8ee529ac4bb$export$fd53cef0cc796101);