@react-stately/datepicker 3.0.0-nightly.3175 → 3.0.0-rc.1

package/dist/main.js

@@ -1,29 +1,16 @@
 var $h2qOe$internationalizeddate = require("@internationalized/date");
 var $h2qOe$reactstatelyutils = require("@react-stately/utils");
+var $h2qOe$reactstatelyoverlays = require("@react-stately/overlays");
 var $h2qOe$react = require("react");
 
-function $parcel$exportWildcard(dest, source) {
-  Object.keys(source).forEach(function(key) {
-    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
-      return;
-    }
-
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function get() {
-        return source[key];
-      }
-    });
-  });
-
-  return dest;
-}
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $aaab7a647e17e1fd$exports = {};
 
-$parcel$export($aaab7a647e17e1fd$exports, "useDatePickerState", () => $aaab7a647e17e1fd$export$87194bb378cc3ac2);
+$parcel$export(module.exports, "useDatePickerState", () => $aaab7a647e17e1fd$export$87194bb378cc3ac2);
+$parcel$export(module.exports, "useDateFieldState", () => $596a1f0f523d6752$export$60e84778edff6d26);
+$parcel$export(module.exports, "useDateRangePickerState", () => $7072d26f58deb33b$export$e50a61c1de9f574);
+$parcel$export(module.exports, "useTimeFieldState", () => $2654e87be0231a69$export$fd53cef0cc796101);
 
 
 
@@ -60,6 +47,7 @@ function $50d5d6a623389320$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 $50d5d6a623389320$export$c5221a78ef73c5e9(placeholderValue) {
@@ -102,9 +90,10 @@ function $50d5d6a623389320$export$2440da353cedad43(v, granularity) {
 
 
 
+
 function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
     var ref;
-    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let overlayState = $h2qOe$reactstatelyoverlays.useOverlayTriggerState(props);
     let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
     let v = value || props.placeholderValue;
     let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity);
@@ -130,7 +119,7 @@ function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
             if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $50d5d6a623389320$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);
@@ -146,13 +135,13 @@ function $aaab7a647e17e1fd$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 || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
-            setOpen(isOpen);
+            overlayState.setOpen(isOpen);
         },
         validationState: validationState,
         formatValue (locale, fieldOptions) {
@@ -161,7 +150,8 @@ function $aaab7a647e17e1fd$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 $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions);
             return formatter.format(dateValue);
@@ -170,14 +160,11 @@ function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
 }
 
 
-var $6d4e641deb83cb9e$exports = {};
 
-$parcel$export($6d4e641deb83cb9e$exports, "useDatePickerFieldState", () => $6d4e641deb83cb9e$export$714a241b39a650d6);
 
 
 
-
-const $6d4e641deb83cb9e$var$EDITABLE_SEGMENTS = {
+const $596a1f0f523d6752$var$EDITABLE_SEGMENTS = {
     year: true,
     month: true,
     day: true,
@@ -187,7 +174,7 @@ const $6d4e641deb83cb9e$var$EDITABLE_SEGMENTS = {
     dayPeriod: true,
     era: true
 };
-const $6d4e641deb83cb9e$var$PAGE_STEP = {
+const $596a1f0f523d6752$var$PAGE_STEP = {
     year: 5,
     month: 2,
     day: 7,
@@ -196,30 +183,55 @@ const $6d4e641deb83cb9e$var$PAGE_STEP = {
     second: 15
 };
 // Node seems to convert everything to lowercase...
-const $6d4e641deb83cb9e$var$TYPE_MAPPING = {
+const $596a1f0f523d6752$var$TYPE_MAPPING = {
     dayperiod: 'dayPeriod'
 };
-function $6d4e641deb83cb9e$export$714a241b39a650d6(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] = $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 defaultFormatter = $h2qOe$react.useMemo(()=>new $h2qOe$internationalizeddate.DateFormatter(locale)
+    , [
+        locale
+    ]);
+    let calendar = $h2qOe$react.useMemo(()=>createCalendar(defaultFormatter.resolvedOptions().calendar)
+    , [
+        createCalendar,
+        defaultFormatter
+    ]);
+    let [value1, setDate] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarValue = $h2qOe$react.useMemo(()=>$50d5d6a623389320$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] = $h2qOe$react.useState(()=>$50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+    );
+    let val = calendarValue || placeholderDate;
+    let showEra = calendar.identifier === 'gregory' && val.era === 'BC';
     var _maxGranularity;
     let formatOpts = $h2qOe$react.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 = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$7e319ea407e63bc0({
         }, formatOpts)
@@ -235,14 +247,9 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
     , [
         dateFormatter
     ]);
-    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 = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$6d4e641deb83cb9e$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)
         , {
         })
@@ -254,12 +261,6 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(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] = $h2qOe$react.useState(()=>$50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
-    );
     // Reset placeholder when calendar changes
     let lastCalendarIdentifier = $h2qOe$react.useRef(calendar.identifier);
     $h2qOe$react.useEffect(()=>{
@@ -275,12 +276,6 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
         defaultTimeZone,
         props.placeholderValue
     ]);
-    let [value1, setDate] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
-    let calendarValue = $h2qOe$react.useMemo(()=>$50d5d6a623389320$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 = {
@@ -312,13 +307,13 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
         timeZone
     ]);
     let segments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $6d4e641deb83cb9e$var$EDITABLE_SEGMENTS[segment.type];
+            let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type];
             if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
             return {
-                type: $6d4e641deb83cb9e$var$TYPE_MAPPING[segment.type] || segment.type,
+                type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type,
                 text: segment.value,
-                ...$6d4e641deb83cb9e$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: $6d4e641deb83cb9e$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
             };
         })
@@ -344,9 +339,10 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
     };
     let adjustSegment = (type, amount)=>{
         markValid(type);
-        setValue($6d4e641deb83cb9e$var$addSegment(displayValue, type, amount, resolvedOptions));
+        setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions));
     };
     let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    var _maxGranularity1;
     return {
         value: calendarValue,
         dateValue: dateValue,
@@ -355,6 +351,7 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
         dateFormatter: dateFormatter,
         validationState: validationState,
         granularity: granularity,
+        maxGranularity: (_maxGranularity1 = props.maxGranularity) !== null && _maxGranularity1 !== void 0 ? _maxGranularity1 : 'year',
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         isRequired: isRequired,
@@ -365,14 +362,14 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
             adjustSegment(part, -1);
         },
         incrementPage (part) {
-            adjustSegment(part, $6d4e641deb83cb9e$var$PAGE_STEP[part] || 1);
+            adjustSegment(part, $596a1f0f523d6752$var$PAGE_STEP[part] || 1);
         },
         decrementPage (part) {
-            adjustSegment(part, -($6d4e641deb83cb9e$var$PAGE_STEP[part] || 1));
+            adjustSegment(part, -($596a1f0f523d6752$var$PAGE_STEP[part] || 1));
         },
         setSegment (part, v) {
             markValid(part);
-            setValue($6d4e641deb83cb9e$var$setSegment(displayValue, part, v, resolvedOptions));
+            setValue($596a1f0f523d6752$var$setSegment(displayValue, part, v, resolvedOptions));
         },
         confirmPlaceholder (part) {
             if (props.isDisabled || props.isReadOnly) return;
@@ -414,12 +411,15 @@ function $6d4e641deb83cb9e$export$714a241b39a650d6(props) {
             setDate(null);
             setValue(value);
         },
-        getFormatOptions (fieldOptions) {
-            return $50d5d6a623389320$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 $6d4e641deb83cb9e$var$getSegmentLimits(date, type, options) {
+function $596a1f0f523d6752$var$getSegmentLimits(date, type, options) {
     switch(type){
         case 'era':
             {
@@ -486,7 +486,7 @@ function $6d4e641deb83cb9e$var$getSegmentLimits(date, type, options) {
     return {
     };
 }
-function $6d4e641deb83cb9e$var$addSegment(value, part, amount, options) {
+function $596a1f0f523d6752$var$addSegment(value, part, amount, options) {
     switch(part){
         case 'era':
         case 'year':
@@ -514,7 +514,7 @@ function $6d4e641deb83cb9e$var$addSegment(value, part, amount, options) {
             });
     }
 }
-function $6d4e641deb83cb9e$var$setSegment(value, part, segmentValue, options) {
+function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) {
     switch(part){
         case 'day':
         case 'month':
@@ -552,16 +552,14 @@ function $6d4e641deb83cb9e$var$setSegment(value, part, segmentValue, options) {
 }
 
 
-var $7072d26f58deb33b$exports = {};
 
-$parcel$export($7072d26f58deb33b$exports, "useDateRangePickerState", () => $7072d26f58deb33b$export$e50a61c1de9f574);
 
 
 
 
 function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
     var ref, ref1;
-    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let overlayState = $h2qOe$reactstatelyoverlays.useOverlayTriggerState(props);
     let [controlledValue, setControlledValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
     let [placeholderValue, setPlaceholderValue] = $h2qOe$react.useState(()=>controlledValue || {
             start: null,
@@ -613,7 +611,7 @@ function $7072d26f58deb33b$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);
@@ -647,7 +645,7 @@ function $7072d26f58deb33b$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
@@ -656,11 +654,11 @@ function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
                 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);
+            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;
@@ -669,16 +667,38 @@ function $7072d26f58deb33b$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 $h2qOe$internationalizeddate.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
                 }
@@ -692,7 +712,10 @@ function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
                 });
                 endFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, endOptions);
             }
-            return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`;
+            return {
+                start: startFormatter.format(startDate),
+                end: endFormatter.format(endDate)
+            };
         },
         confirmPlaceholder () {
             // Need to use ref value here because the value can be set in the same tick as
@@ -711,9 +734,6 @@ function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
 }
 
 
-var $2654e87be0231a69$exports = {};
-
-$parcel$export($2654e87be0231a69$exports, "useTimeFieldState", () => $2654e87be0231a69$export$fd53cef0cc796101);
 
 
 
@@ -744,7 +764,7 @@ function $2654e87be0231a69$export$fd53cef0cc796101(props) {
     let onChange = (newValue)=>{
         setValue(v && 'day' in v ? newValue : newValue && $h2qOe$internationalizeddate.toTime(newValue));
     };
-    return $6d4e641deb83cb9e$export$714a241b39a650d6({
+    return $596a1f0f523d6752$export$60e84778edff6d26({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -765,10 +785,6 @@ function $2654e87be0231a69$var$convertValue(value, date = $h2qOe$internationaliz
 }
 
 
-$parcel$exportWildcard(module.exports, $aaab7a647e17e1fd$exports);
-$parcel$exportWildcard(module.exports, $6d4e641deb83cb9e$exports);
-$parcel$exportWildcard(module.exports, $7072d26f58deb33b$exports);
-$parcel$exportWildcard(module.exports, $2654e87be0231a69$exports);
 
 
 //# sourceMappingURL=main.js.map