@react-stately/datepicker 3.0.0-rc.0 → 3.0.1

package/dist/module.js

@@ -2,6 +2,7 @@ import {toCalendarDate as $7UzoM$toCalendarDate, toCalendarDateTime as $7UzoM$to
 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 {LocalizedStringDictionary as $7UzoM$LocalizedStringDictionary} from "@internationalized/string";
 
 
 
@@ -39,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) {
@@ -141,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);
@@ -153,6 +156,396 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
 
 
 
+// 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$LocalizedStringDictionary({
+    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 '––';
+}
+
+
+
 
 const $3c0fc76039f1c516$var$EDITABLE_SEGMENTS = {
     year: true,
@@ -183,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)
@@ -212,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]
@@ -231,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(()=>{
@@ -252,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 = {
@@ -291,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
             };
         })
@@ -305,29 +709,41 @@ 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,
@@ -353,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());
             }
         },
@@ -501,6 +913,7 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
         case 'day':
         case 'month':
         case 'year':
+        case 'era':
             return value.set({
                 [part]: segmentValue
             });
@@ -557,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;
@@ -649,7 +1059,8 @@ 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');
@@ -697,19 +1108,6 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
                 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
-            // 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
-                });
-            }
         }
     };
 }