@react-stately/datepicker 3.15.2 → 3.16.0

package/dist/useDateFieldState.main.js

@@ -1,7 +1,9 @@
 var $50d5d6a623389320$exports = require("./utils.main.js");
 var $e1e8ada727fae1a1$exports = require("./placeholders.main.js");
+var $fd62790d5a95383f$exports = require("./IncompleteDate.main.js");
 var $iqS8N$internationalizeddate = require("@internationalized/date");
 var $iqS8N$reactstatelyform = require("@react-stately/form");
+var $iqS8N$internationalizednumber = require("@internationalized/number");
 var $iqS8N$reactstatelyutils = require("@react-stately/utils");
 var $iqS8N$react = require("react");
 
@@ -27,6 +29,8 @@ $parcel$export(module.exports, "useDateFieldState", () => $596a1f0f523d6752$expo
 
 
 
+
+
 const $596a1f0f523d6752$var$EDITABLE_SEGMENTS = {
     year: true,
     month: true,
@@ -60,12 +64,23 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
     let timeZone = defaultTimeZone || 'UTC';
     // 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 defaultFormatter = (0, $iqS8N$react.useMemo)(()=>new (0, $iqS8N$internationalizeddate.DateFormatter)(locale), [
-        locale
-    ]);
-    let calendar = (0, $iqS8N$react.useMemo)(()=>createCalendar(defaultFormatter.resolvedOptions().calendar), [
-        createCalendar,
-        defaultFormatter
+    // Resolve default hour cycle and calendar system.
+    let [calendar, hourCycle] = (0, $iqS8N$react.useMemo)(()=>{
+        let formatter = new (0, $iqS8N$internationalizeddate.DateFormatter)(locale, {
+            dateStyle: 'short',
+            timeStyle: 'short',
+            hour12: props.hourCycle != null ? props.hourCycle === 12 : undefined
+        });
+        let opts = formatter.resolvedOptions();
+        let calendar = createCalendar(opts.calendar);
+        return [
+            calendar,
+            opts.hourCycle
+        ];
+    }, [
+        locale,
+        props.hourCycle,
+        createCalendar
     ]);
     var _props_defaultValue;
     let [value, setDate] = (0, $iqS8N$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
@@ -77,13 +92,8 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         value,
         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] = (0, $iqS8N$react.useState)(()=>(0, $50d5d6a623389320$exports.createPlaceholderDate)(props.placeholderValue, granularity, calendar, defaultTimeZone));
-    let val = calendarValue || placeholderDate;
-    let showEra = calendar.identifier === 'gregory' && val.era === 'BC';
+    let [displayValue, setDisplayValue] = (0, $iqS8N$react.useState)(()=>new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue));
+    let showEra = calendar.identifier === 'gregory' && displayValue.era === 'BC';
     let formatOpts = (0, $iqS8N$react.useMemo)(()=>{
         var _props_maxGranularity;
         return {
@@ -114,76 +124,85 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
     let resolvedOptions = (0, $iqS8N$react.useMemo)(()=>dateFormatter.resolvedOptions(), [
         dateFormatter
     ]);
-    // Determine how many editable segments there are for validation purposes.
-    // The result is cached for performance.
-    let allSegments = (0, $iqS8N$react.useMemo)(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$596a1f0f523d6752$var$EDITABLE_SEGMENTS[seg.type]).reduce((p, seg)=>(p[$596a1f0f523d6752$var$TYPE_MAPPING[seg.type] || seg.type] = true, p), {}), [
-        dateFormatter
+    let placeholder = (0, $iqS8N$react.useMemo)(()=>(0, $50d5d6a623389320$exports.createPlaceholderDate)(props.placeholderValue, granularity, calendar, defaultTimeZone), [
+        props.placeholderValue,
+        granularity,
+        calendar,
+        defaultTimeZone
     ]);
-    let [validSegments, setValidSegments] = (0, $iqS8N$react.useState)(()=>props.value || props.defaultValue ? {
-            ...allSegments
-        } : {});
-    let clearedSegment = (0, $iqS8N$react.useRef)(null);
-    // Reset placeholder when calendar changes
-    let lastCalendar = (0, $iqS8N$react.useRef)(calendar);
-    (0, $iqS8N$react.useEffect)(()=>{
-        if (!(0, $iqS8N$internationalizeddate.isEqualCalendar)(calendar, lastCalendar.current)) {
-            lastCalendar.current = calendar;
-            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? (0, $iqS8N$internationalizeddate.toCalendar)(placeholder, calendar) : (0, $50d5d6a623389320$exports.createPlaceholderDate)(props.placeholderValue, granularity, calendar, defaultTimeZone));
-        }
+    let displaySegments = (0, $iqS8N$react.useMemo)(()=>{
+        let is12HourClock = hourCycle === 'h11' || hourCycle === 'h12';
+        let segments = [
+            'era',
+            'year',
+            'month',
+            'day',
+            'hour',
+            ...is12HourClock ? [
+                'dayPeriod'
+            ] : [],
+            'minute',
+            'second'
+        ];
+        let minIndex = segments.indexOf(props.maxGranularity || 'era');
+        let maxIndex = segments.indexOf(granularity === 'hour' && is12HourClock ? 'dayPeriod' : granularity);
+        return segments.slice(minIndex, maxIndex + 1);
     }, [
-        calendar,
+        props.maxGranularity,
         granularity,
-        validSegments,
-        defaultTimeZone,
-        props.placeholderValue
+        hourCycle
     ]);
-    // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
-    if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
-        validSegments = {
-            ...allSegments
-        };
-        setValidSegments(validSegments);
+    let [lastValue, setLastValue] = (0, $iqS8N$react.useState)(calendarValue);
+    let [lastCalendar, setLastCalendar] = (0, $iqS8N$react.useState)(calendar);
+    let [lastHourCycle, setLastHourCycle] = (0, $iqS8N$react.useState)(hourCycle);
+    if (calendarValue !== lastValue || hourCycle !== lastHourCycle || !(0, $iqS8N$internationalizeddate.isEqualCalendar)(calendar, lastCalendar)) {
+        displayValue = new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue);
+        setLastValue(calendarValue);
+        setLastCalendar(calendar);
+        setLastHourCycle(hourCycle);
+        setDisplayValue(displayValue);
     }
-    // If the value is set to null and all segments are valid, reset the placeholder.
-    if (value == null && Object.keys(validSegments).length === Object.keys(allSegments).length) {
-        validSegments = {};
-        setValidSegments(validSegments);
-        setPlaceholderDate((0, $50d5d6a623389320$exports.createPlaceholderDate)(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;
     let setValue = (newValue)=>{
         if (props.isDisabled || props.isReadOnly) return;
-        let validKeys = Object.keys(validSegments);
-        let allKeys = Object.keys(allSegments);
-        // if all the segments are completed or a timefield with everything but am/pm set the time, also ignore when am/pm cleared
-        if (newValue == null) {
+        if (newValue == null || newValue instanceof (0, $fd62790d5a95383f$exports.IncompleteDate) && newValue.isCleared(displaySegments)) {
+            setDisplayValue(new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue));
             setDate(null);
-            setPlaceholderDate((0, $50d5d6a623389320$exports.createPlaceholderDate)(props.placeholderValue, granularity, calendar, defaultTimeZone));
-            setValidSegments({});
-        } else if (validKeys.length === 0 && clearedSegment.current == null || validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod') {
-            // If the field was empty (no valid segments) or all segments are completed, commit the new value.
-            // When committing from an empty state, mark every segment as valid so value is committed.
-            if (validKeys.length === 0) {
-                validSegments = {
-                    ...allSegments
-                };
-                setValidSegments(validSegments);
-            }
+        } else if (!(newValue instanceof (0, $fd62790d5a95383f$exports.IncompleteDate))) {
             // 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 = (0, $iqS8N$internationalizeddate.toCalendar)(newValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (0, $iqS8N$internationalizeddate.GregorianCalendar)());
+            setDisplayValue(new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue));
             setDate(newValue);
-        } else setPlaceholderDate(newValue);
-        clearedSegment.current = null;
+        } else {
+            // If the new value is complete and valid, trigger onChange eagerly.
+            // If it represents an incomplete or invalid value (e.g. February 30th),
+            // wait until the field is blurred to trigger onChange.
+            if (newValue.isComplete(displaySegments)) {
+                let dateValue = newValue.toValue(calendarValue !== null && calendarValue !== void 0 ? calendarValue : placeholder);
+                if (newValue.validate(dateValue, displaySegments)) {
+                    let newDateValue = (0, $iqS8N$internationalizeddate.toCalendar)(dateValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (0, $iqS8N$internationalizeddate.GregorianCalendar)());
+                    if (!value || newDateValue.compare(value) !== 0) {
+                        setDisplayValue(new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue)); // reset in case prop isn't updated
+                        setDate(newDateValue);
+                        return;
+                    }
+                }
+            }
+            // Incomplete/invalid value. Set temporary display override.
+            setDisplayValue(newValue);
+        }
     };
-    let dateValue = (0, $iqS8N$react.useMemo)(()=>displayValue.toDate(timeZone), [
+    let dateValue = (0, $iqS8N$react.useMemo)(()=>{
+        let v = displayValue.toValue(calendarValue !== null && calendarValue !== void 0 ? calendarValue : placeholder);
+        return v.toDate(timeZone);
+    }, [
         displayValue,
-        timeZone
+        timeZone,
+        calendarValue,
+        placeholder
     ]);
-    let segments = (0, $iqS8N$react.useMemo)(()=>$596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), [
+    let segments = (0, $iqS8N$react.useMemo)(()=>$596a1f0f523d6752$var$processSegments(dateValue, displayValue, dateFormatter, resolvedOptions, calendar, locale, granularity), [
         dateValue,
-        validSegments,
         dateFormatter,
         resolvedOptions,
         displayValue,
@@ -191,33 +210,8 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         locale,
         granularity
     ]);
-    // 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' && allSegments.era) validSegments.era = true;
-        setValidSegments({
-            ...validSegments
-        });
-    };
     let adjustSegment = (type, amount)=>{
-        if (!validSegments[type]) {
-            markValid(type);
-            let validKeys = Object.keys(validSegments);
-            let allKeys = Object.keys(allSegments);
-            if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) setValue(displayValue);
-        } else setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions));
+        setValue(displayValue.cycle(type, amount, placeholder, displaySegments));
     };
     let builtinValidation = (0, $iqS8N$react.useMemo)(()=>(0, $50d5d6a623389320$exports.getValidationResult)(value, minValue, maxValue, isDateUnavailable, formatOpts), [
         value,
@@ -262,48 +256,30 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         decrementPage (part) {
             adjustSegment(part, -($596a1f0f523d6752$var$PAGE_STEP[part] || 1));
         },
+        incrementToMax (part) {
+            let maxValue = part === 'hour' && hourCycle === 'h12' ? 11 : displayValue.getSegmentLimits(part).maxValue;
+            setValue(displayValue.set(part, maxValue, placeholder));
+        },
+        decrementToMin (part) {
+            let minValue = part === 'hour' && hourCycle === 'h12' ? 12 : displayValue.getSegmentLimits(part).minValue;
+            setValue(displayValue.set(part, minValue, placeholder));
+        },
         setSegment (part, v) {
-            markValid(part);
-            setValue($596a1f0f523d6752$var$setSegment(displayValue, part, v, resolvedOptions));
+            setValue(displayValue.set(part, v, placeholder));
         },
         confirmPlaceholder () {
             if (props.isDisabled || props.isReadOnly) return;
-            // 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());
+            // If the display value is complete but invalid, we need to constrain it and emit onChange on blur.
+            if (displayValue.isComplete(displaySegments)) {
+                let dateValue = displayValue.toValue(calendarValue !== null && calendarValue !== void 0 ? calendarValue : placeholder);
+                let newDateValue = (0, $iqS8N$internationalizeddate.toCalendar)(dateValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (0, $iqS8N$internationalizeddate.GregorianCalendar)());
+                if (!value || newDateValue.compare(value) !== 0) setDate(newDateValue);
+                setDisplayValue(new (0, $fd62790d5a95383f$exports.IncompleteDate)(calendar, hourCycle, calendarValue));
             }
         },
         clearSegment (part) {
-            delete validSegments[part];
-            clearedSegment.current = part;
-            setValidSegments({
-                ...validSegments
-            });
-            let placeholder = (0, $50d5d6a623389320$exports.createPlaceholderDate)(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) {
-                let isPM = displayValue.hour >= 12;
-                let shouldBePM = placeholder.hour >= 12;
-                if (isPM && !shouldBePM) value = displayValue.set({
-                    hour: displayValue.hour - 12
-                });
-                else if (!isPM && shouldBePM) value = displayValue.set({
-                    hour: displayValue.hour + 12
-                });
-            } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) value = displayValue.set({
-                hour: placeholder['hour'] + 12
-            });
-            else if (part in displayValue) value = displayValue.set({
-                [part]: placeholder[part]
-            });
-            setDate(null);
+            if (part !== 'timeZoneName' && part !== 'literal') value = displayValue.clear(part);
             setValue(value);
         },
         formatValue (fieldOptions) {
@@ -322,24 +298,40 @@ function $596a1f0f523d6752$export$60e84778edff6d26(props) {
         }
     };
 }
-function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity) {
+function $596a1f0f523d6752$var$processSegments(dateValue, displayValue, dateFormatter, resolvedOptions, calendar, locale, granularity) {
     let timeValue = [
         'hour',
         'minute',
         'second'
     ];
     let segments = dateFormatter.formatToParts(dateValue);
+    // In order to allow formatting temporarily invalid dates during editing (e.g. February 30th),
+    // use a NumberFormatter to manually format segments directly from raw numbers.
+    // When the user blurs the date field, the invalid segments will be constrained.
+    let numberFormatter = new (0, $iqS8N$internationalizednumber.NumberFormatter)(locale, {
+        useGrouping: false
+    });
+    let twoDigitFormatter = new (0, $iqS8N$internationalizednumber.NumberFormatter)(locale, {
+        useGrouping: false,
+        minimumIntegerDigits: 2
+    });
+    for (let segment of segments)if (segment.type === 'year' || segment.type === 'month' || segment.type === 'day' || segment.type === 'hour') {
+        var _displayValue_segment_type;
+        let value = (_displayValue_segment_type = displayValue[segment.type]) !== null && _displayValue_segment_type !== void 0 ? _displayValue_segment_type : 0;
+        if (resolvedOptions[segment.type] === '2-digit') segment.value = twoDigitFormatter.format(value);
+        else segment.value = numberFormatter.format(value);
+    }
     let processedSegments = [];
     for (let segment of segments){
         let type = $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type;
         let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[type];
         if (type === 'era' && calendar.getEras().length === 1) isEditable = false;
-        let isPlaceholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[type] && !validSegments[type];
+        let isPlaceholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[type] && displayValue[segment.type] == null;
         let placeholder = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[type] ? (0, $e1e8ada727fae1a1$exports.getPlaceholder)(type, segment.value, locale) : null;
         let dateSegment = {
             type: type,
             text: isPlaceholder ? placeholder : segment.value,
-            ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, type, resolvedOptions),
+            ...displayValue.getSegmentLimits(type),
             isPlaceholder: isPlaceholder,
             placeholder: placeholder,
             isEditable: isEditable
@@ -352,7 +344,6 @@ function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFor
             processedSegments.push({
                 type: 'literal',
                 text: '\u2066',
-                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
                 isPlaceholder: false,
                 placeholder: '',
                 isEditable: false
@@ -362,7 +353,6 @@ function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFor
             if (type === granularity) processedSegments.push({
                 type: 'literal',
                 text: '\u2069',
-                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
                 isPlaceholder: false,
                 placeholder: '',
                 isEditable: false
@@ -373,7 +363,6 @@ function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFor
             processedSegments.push({
                 type: 'literal',
                 text: '\u2069',
-                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, 'literal', resolvedOptions),
                 isPlaceholder: false,
                 placeholder: '',
                 isEditable: false
@@ -383,139 +372,6 @@ function $596a1f0f523d6752$var$processSegments(dateValue, validSegments, dateFor
     }
     return processedSegments;
 }
-function $596a1f0f523d6752$var$getSegmentLimits(date, type, options) {
-    switch(type){
-        case 'era':
-            {
-                let eras = date.calendar.getEras();
-                return {
-                    value: eras.indexOf(date.era),
-                    minValue: 0,
-                    maxValue: eras.length - 1
-                };
-            }
-        case 'year':
-            return {
-                value: date.year,
-                minValue: 1,
-                maxValue: date.calendar.getYearsInEra(date)
-            };
-        case 'month':
-            return {
-                value: date.month,
-                minValue: (0, $iqS8N$internationalizeddate.getMinimumMonthInYear)(date),
-                maxValue: date.calendar.getMonthsInYear(date)
-            };
-        case 'day':
-            return {
-                value: date.day,
-                minValue: (0, $iqS8N$internationalizeddate.getMinimumDayInMonth)(date),
-                maxValue: date.calendar.getDaysInMonth(date)
-            };
-    }
-    if ('hour' in date) switch(type){
-        case 'dayPeriod':
-            return {
-                value: date.hour >= 12 ? 12 : 0,
-                minValue: 0,
-                maxValue: 12
-            };
-        case 'hour':
-            if (options.hour12) {
-                let isPM = date.hour >= 12;
-                return {
-                    value: date.hour,
-                    minValue: isPM ? 12 : 0,
-                    maxValue: isPM ? 23 : 11
-                };
-            }
-            return {
-                value: date.hour,
-                minValue: 0,
-                maxValue: 23
-            };
-        case 'minute':
-            return {
-                value: date.minute,
-                minValue: 0,
-                maxValue: 59
-            };
-        case 'second':
-            return {
-                value: date.second,
-                minValue: 0,
-                maxValue: 59
-            };
-    }
-    return {};
-}
-function $596a1f0f523d6752$var$addSegment(value, part, amount, options) {
-    switch(part){
-        case 'era':
-        case 'year':
-        case 'month':
-        case 'day':
-            return value.cycle(part, amount, {
-                round: part === 'year'
-            });
-    }
-    if ('hour' in value) switch(part){
-        case 'dayPeriod':
-            {
-                let hours = value.hour;
-                let isPM = hours >= 12;
-                return value.set({
-                    hour: isPM ? hours - 12 : hours + 12
-                });
-            }
-        case 'hour':
-        case 'minute':
-        case 'second':
-            return value.cycle(part, amount, {
-                round: part !== 'hour',
-                hourCycle: options.hour12 ? 12 : 24
-            });
-    }
-    throw new Error('Unknown segment: ' + part);
-}
-function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) {
-    switch(part){
-        case 'day':
-        case 'month':
-        case 'year':
-        case 'era':
-            return value.set({
-                [part]: segmentValue
-            });
-    }
-    if ('hour' in value && typeof segmentValue === 'number') switch(part){
-        case 'dayPeriod':
-            {
-                let hours = value.hour;
-                let wasPM = hours >= 12;
-                let isPM = segmentValue >= 12;
-                if (isPM === wasPM) return value;
-                return value.set({
-                    hour: wasPM ? hours - 12 : hours + 12
-                });
-            }
-        case 'hour':
-            // In 12 hour time, ensure that AM/PM does not change
-            if (options.hour12) {
-                let hours = value.hour;
-                let wasPM = hours >= 12;
-                if (!wasPM && segmentValue === 12) segmentValue = 0;
-                if (wasPM && segmentValue < 12) segmentValue += 12;
-            }
-        // fallthrough
-        case 'minute':
-        case 'second':
-            return value.set({
-                [part]: segmentValue
-            });
-    }
-    throw new Error('Unknown segment: ' + part);
-}
 
 
 //# sourceMappingURL=useDateFieldState.main.js.map