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

package/dist/module.js

@@ -1,13 +1,8 @@
 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";
 
-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 +39,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 +82,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 +111,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 +127,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 +142,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,14 +152,11 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
 }
 
 
-var $09e80d602234613d$exports = {};
 
-$parcel$export($09e80d602234613d$exports, "useDatePickerFieldState", () => $09e80d602234613d$export$714a241b39a650d6);
 
 
 
-
-const $09e80d602234613d$var$EDITABLE_SEGMENTS = {
+const $3c0fc76039f1c516$var$EDITABLE_SEGMENTS = {
     year: true,
     month: true,
     day: true,
@@ -171,7 +166,7 @@ const $09e80d602234613d$var$EDITABLE_SEGMENTS = {
     dayPeriod: true,
     era: true
 };
-const $09e80d602234613d$var$PAGE_STEP = {
+const $3c0fc76039f1c516$var$PAGE_STEP = {
     year: 5,
     month: 2,
     day: 7,
@@ -180,30 +175,55 @@ const $09e80d602234613d$var$PAGE_STEP = {
     second: 15
 };
 // Node seems to convert everything to lowercase...
-const $09e80d602234613d$var$TYPE_MAPPING = {
+const $3c0fc76039f1c516$var$TYPE_MAPPING = {
     dayperiod: 'dayPeriod'
 };
-function $09e80d602234613d$export$714a241b39a650d6(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] = $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());
+    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,14 +239,9 @@ function $09e80d602234613d$export$714a241b39a650d6(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)=>$09e80d602234613d$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)
         , {
         })
@@ -238,12 +253,6 @@ function $09e80d602234613d$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] = $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 +268,6 @@ function $09e80d602234613d$export$714a241b39a650d6(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 = {
@@ -296,13 +299,13 @@ function $09e80d602234613d$export$714a241b39a650d6(props) {
         timeZone
     ]);
     let segments = $7UzoM$useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
-            let isEditable = $09e80d602234613d$var$EDITABLE_SEGMENTS[segment.type];
+            let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type];
             if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
             return {
-                type: $09e80d602234613d$var$TYPE_MAPPING[segment.type] || segment.type,
+                type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type,
                 text: segment.value,
-                ...$09e80d602234613d$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
-                isPlaceholder: $09e80d602234613d$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
             };
         })
@@ -328,9 +331,10 @@ function $09e80d602234613d$export$714a241b39a650d6(props) {
     };
     let adjustSegment = (type, amount)=>{
         markValid(type);
-        setValue($09e80d602234613d$var$addSegment(displayValue, type, amount, resolvedOptions));
+        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,
@@ -339,6 +343,7 @@ function $09e80d602234613d$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,
@@ -349,14 +354,14 @@ function $09e80d602234613d$export$714a241b39a650d6(props) {
             adjustSegment(part, -1);
         },
         incrementPage (part) {
-            adjustSegment(part, $09e80d602234613d$var$PAGE_STEP[part] || 1);
+            adjustSegment(part, $3c0fc76039f1c516$var$PAGE_STEP[part] || 1);
         },
         decrementPage (part) {
-            adjustSegment(part, -($09e80d602234613d$var$PAGE_STEP[part] || 1));
+            adjustSegment(part, -($3c0fc76039f1c516$var$PAGE_STEP[part] || 1));
         },
         setSegment (part, v) {
             markValid(part);
-            setValue($09e80d602234613d$var$setSegment(displayValue, part, v, resolvedOptions));
+            setValue($3c0fc76039f1c516$var$setSegment(displayValue, part, v, resolvedOptions));
         },
         confirmPlaceholder (part) {
             if (props.isDisabled || props.isReadOnly) return;
@@ -398,12 +403,15 @@ function $09e80d602234613d$export$714a241b39a650d6(props) {
             setDate(null);
             setValue(value);
         },
-        getFormatOptions (fieldOptions) {
-            return $35a22f14a1f04b11$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 $09e80d602234613d$var$getSegmentLimits(date, type, options) {
+function $3c0fc76039f1c516$var$getSegmentLimits(date, type, options) {
     switch(type){
         case 'era':
             {
@@ -470,7 +478,7 @@ function $09e80d602234613d$var$getSegmentLimits(date, type, options) {
     return {
     };
 }
-function $09e80d602234613d$var$addSegment(value, part, amount, options) {
+function $3c0fc76039f1c516$var$addSegment(value, part, amount, options) {
     switch(part){
         case 'era':
         case 'year':
@@ -498,7 +506,7 @@ function $09e80d602234613d$var$addSegment(value, part, amount, options) {
             });
     }
 }
-function $09e80d602234613d$var$setSegment(value, part, segmentValue, options) {
+function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
     switch(part){
         case 'day':
         case 'month':
@@ -536,16 +544,14 @@ function $09e80d602234613d$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,
@@ -597,7 +603,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);
@@ -631,7 +637,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
@@ -640,11 +646,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;
@@ -653,16 +659,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
                 }
@@ -676,7 +704,10 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
                 });
                 endFormatter = new $7UzoM$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
@@ -695,9 +726,6 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
 }
 
 
-var $eff5d8ee529ac4bb$exports = {};
-
-$parcel$export($eff5d8ee529ac4bb$exports, "useTimeFieldState", () => $eff5d8ee529ac4bb$export$fd53cef0cc796101);
 
 
 
@@ -728,7 +756,7 @@ function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
     let onChange = (newValue)=>{
         setValue(v && 'day' in v ? newValue : newValue && $7UzoM$toTime(newValue));
     };
-    return $09e80d602234613d$export$714a241b39a650d6({
+    return $3c0fc76039f1c516$export$60e84778edff6d26({
         ...props,
         value: dateTime,
         defaultValue: undefined,
@@ -751,5 +779,5 @@ function $eff5d8ee529ac4bb$var$convertValue(value, date = $7UzoM$today($7UzoM$ge
 
 
 
-export {$ab5bf3f618090389$export$87194bb378cc3ac2 as useDatePickerState, $09e80d602234613d$export$714a241b39a650d6 as useDatePickerFieldState, $93c38a5e28be6249$export$e50a61c1de9f574 as useDateRangePickerState, $eff5d8ee529ac4bb$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