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

package/dist/main.js

@@ -4,6 +4,7 @@ var $IwcIq$react = require("react");
 var $IwcIq$reactarialabel = require("@react-aria/label");
 var $IwcIq$reactariai18n = require("@react-aria/i18n");
 var $IwcIq$reactariainteractions = require("@react-aria/interactions");
+var $IwcIq$internationalizeddate = require("@internationalized/date");
 var $IwcIq$internationalizednumber = require("@internationalized/number");
 var $IwcIq$reactariaspinbutton = require("@react-aria/spinbutton");
 var $IwcIq$internationalizedmessage = require("@internationalized/message");
@@ -258,9 +259,9 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1, disableArrowNavi
             }while (last)
         }
         // Now go backwards until we find an element that is not a placeholder.
-        while(target === null || target === void 0 ? void 0 : target.getAttribute('aria-placeholder')){
+        while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
             let prev = walker.previousNode();
-            if (prev && prev.getAttribute('aria-placeholder')) target = prev;
+            if (prev && prev.hasAttribute('data-placeholder')) target = prev;
             else break;
         }
         if (target) target.focus();
@@ -467,6 +468,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
 
 
 
+
 function $934ac650a0aceb4b$export$d42c60378c8168f8() {
     let { locale: locale  } = $IwcIq$reactariai18n.useLocale();
     return $IwcIq$react.useMemo(()=>{
@@ -501,7 +503,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let { locale: locale  } = $IwcIq$reactariai18n.useLocale();
     let displayNames = $934ac650a0aceb4b$export$d42c60378c8168f8();
     let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
-    let textValue = segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = $IwcIq$react.useMemo(()=>state.dateFormatter.resolvedOptions()
     , [
         state.dateFormatter
@@ -515,11 +517,14 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         hour12: options.hour12,
         timeZone: options.timeZone
     });
-    if (segment.type === 'month') {
+    if (segment.type === 'month' && !segment.isPlaceholder) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-    } else if (segment.type === 'hour') textValue = hourDateFormatter.format(state.dateValue);
+    } else if (segment.type === 'hour' && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
     let { spinButtonProps: spinButtonProps  } = $IwcIq$reactariaspinbutton.useSpinButton({
+        // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
+        // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
+        // https://github.com/dequelabs/axe-core/issues/3505
         value: segment.value,
         textValue: textValue,
         minValue: segment.minValue,
@@ -573,14 +578,6 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         if (e.key === 'a' && ($IwcIq$reactariautils.isMac() ? e.metaKey : e.ctrlKey)) e.preventDefault();
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
         switch(e.key){
-            case 'Enter':
-                e.preventDefault();
-                e.stopPropagation();
-                if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
-                focusManager.focusNext();
-                break;
-            case 'Tab':
-                break;
             case 'Backspace':
             case 'Delete':
                 // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
@@ -614,6 +611,42 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     }, [
         amPmFormatter
     ]);
+    // Get a list of formatted era names so users can type the first character to choose one.
+    let eraFormatter = $IwcIq$reactariai18n.useDateFormatter({
+        year: 'numeric',
+        era: 'narrow',
+        timeZone: 'UTC'
+    });
+    let eras1 = $IwcIq$react.useMemo(()=>{
+        if (segment.type !== 'era') return [];
+        let date = $IwcIq$internationalizeddate.toCalendar(new $IwcIq$internationalizeddate.CalendarDate(1, 1, 1), state.calendar);
+        let eras = state.calendar.getEras().map((era)=>{
+            let eraDate = date.set({
+                year: 1,
+                month: 1,
+                day: 1,
+                era: era
+            }).toDate('UTC');
+            let parts = eraFormatter.formatToParts(eraDate);
+            let formatted = parts.find((p)=>p.type === 'era'
+            ).value;
+            return {
+                era: era,
+                formatted: formatted
+            };
+        });
+        // Remove the common prefix from formatted values. This is so that in calendars with eras like
+        // ERA0 and ERA1 (e.g. Ethiopic), users can press "0" and "1" to select an era. In other cases,
+        // the first letter is used.
+        let prefixLength = $5c015c6316d1904d$var$commonPrefixLength(eras.map((era)=>era.formatted
+        ));
+        if (prefixLength) for (let era1 of eras)era1.formatted = era1.formatted.slice(prefixLength);
+        return eras;
+    }, [
+        eraFormatter,
+        state.calendar,
+        segment.type
+    ]);
     let onInput = (key)=>{
         if (state.isDisabled || state.isReadOnly) return;
         let newValue = enteredKeys.current + key;
@@ -624,6 +657,16 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
                 else break;
                 focusManager.focusNext();
                 break;
+            case 'era':
+                {
+                    let matched = eras1.find((e)=>startsWith(e.formatted, key)
+                    );
+                    if (matched) {
+                        state.setSegment('era', matched.era);
+                        focusManager.focusNext();
+                    }
+                    break;
+                }
             case 'day':
             case 'hour':
             case 'minute':
@@ -661,14 +704,9 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let onFocus = ()=>{
         enteredKeys.current = '';
         $IwcIq$reactariautils.scrollIntoView($IwcIq$reactariautils.getScrollParent(ref.current), ref.current);
-        // Safari requires that a selection is set or it won't fire input events.
-        // Since usePress disables text selection, this won't happen by default.
-        ref.current.style.webkitUserSelect = 'text';
-        ref.current.style.userSelect = 'text';
+        // Collapse selection to start or Chrome won't fire input events.
         let selection = window.getSelection();
         selection.collapse(ref.current);
-        ref.current.style.webkitUserSelect = 'none';
-        ref.current.style.userSelect = 'none';
     };
     let compositionRef = $IwcIq$react.useRef('');
     // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
@@ -704,10 +742,19 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
                 break;
         }
     });
-    // For Android: prevent selection on long press.
-    $IwcIq$reactariautils.useEvent(ref, 'selectstart', (e)=>{
-        e.preventDefault();
-    });
+    $IwcIq$reactariautils.useLayoutEffect(()=>{
+        let element = ref.current;
+        return ()=>{
+            // If the focused segment is removed, focus the previous one, or the next one if there was no previous one.
+            if (document.activeElement === element) {
+                let prev = focusManager.focusPrevious();
+                if (!prev) focusManager.focusNext();
+            }
+        };
+    }, [
+        ref,
+        focusManager
+    ]);
     // spinbuttons cannot be focused with VoiceOver on iOS.
     let touchPropOverrides = $IwcIq$reactariautils.isIOS() || segment.type === 'timeZoneName' ? {
         role: 'textbox',
@@ -747,8 +794,8 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
             ...touchPropOverrides,
             'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
             'aria-describedby': ariaDescribedBy,
-            'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
             'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+            'data-placeholder': segment.isPlaceholder || undefined,
             contentEditable: isEditable,
             suppressContentEditableWarning: isEditable,
             spellCheck: isEditable ? 'false' : undefined,
@@ -756,14 +803,12 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
             autoCorrect: isEditable ? 'off' : undefined,
             // Capitalization was changed in React 17...
             [parseInt(($parcel$interopDefault($IwcIq$react)).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
-            inputMode: state.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
+            inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',
             tabIndex: state.isDisabled ? undefined : 0,
             onKeyDown: onKeyDown,
             onFocus: onFocus,
             style: {
-                caretColor: 'transparent',
-                userSelect: 'none',
-                WebkitUserSelect: 'none'
+                caretColor: 'transparent'
             },
             // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
             onPointerDown (e) {
@@ -775,7 +820,16 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         })
     };
 }
-
+function $5c015c6316d1904d$var$commonPrefixLength(strings) {
+    // Sort the strings, and compare the characters in the first and last to find the common prefix.
+    strings.sort();
+    let first = strings[0];
+    let last = strings[strings.length - 1];
+    for(let i = 0; i < first.length; i++){
+        if (first[i] !== last[i]) return i;
+    }
+    return 0;
+}
 
 
 
@@ -815,11 +869,6 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
     let buttonId = $IwcIq$reactariautils.useId();
     let dialogId = $IwcIq$reactariautils.useId();
     let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
     let ariaDescribedBy = [
         descProps['aria-describedby'],
         fieldProps['aria-describedby']
@@ -849,7 +898,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
     };
     let domProps = $IwcIq$reactariautils.filterDOMProps(props);
     return {
-        groupProps: $IwcIq$reactariautils.mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+        groupProps: $IwcIq$reactariautils.mergeProps(domProps, groupProps, fieldProps, descProps, {
             role: 'group',
             'aria-disabled': props.isDisabled || null,
             'aria-describedby': ariaDescribedBy