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

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 {MessageDictionary as $7UzoM$MessageDictionary} from "@internationalized/message";
 
 
 
@@ -155,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$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 '––';
+}
+
+
+
 
 const $3c0fc76039f1c516$var$EDITABLE_SEGMENTS = {
     year: true,
@@ -301,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
             };
         })
@@ -315,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,
@@ -363,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());
             }
         },
@@ -511,6 +913,7 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
         case 'day':
         case 'month':
         case 'year':
+        case 'era':
             return value.set({
                 [part]: segmentValue
             });
@@ -567,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;
@@ -708,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
-                });
-            }
         }
     };
 }