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

package/dist/module.js

@@ -1,9 +1,10 @@
 import {createFocusManager as $cIPI0$createFocusManager, getFocusableTreeWalker as $cIPI0$getFocusableTreeWalker} from "@react-aria/focus";
-import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, filterDOMProps as $cIPI0$filterDOMProps, mergeProps as $cIPI0$mergeProps, isMac as $cIPI0$isMac, scrollIntoView as $cIPI0$scrollIntoView, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
+import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, filterDOMProps as $cIPI0$filterDOMProps, mergeProps as $cIPI0$mergeProps, isMac as $cIPI0$isMac, scrollIntoView as $cIPI0$scrollIntoView, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, useLayoutEffect as $cIPI0$useLayoutEffect, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
 import $cIPI0$react, {useMemo as $cIPI0$useMemo, useRef as $cIPI0$useRef, useEffect as $cIPI0$useEffect} from "react";
 import {useField as $cIPI0$useField} from "@react-aria/label";
 import {useMessageFormatter as $cIPI0$useMessageFormatter, useLocale as $cIPI0$useLocale, useDateFormatter as $cIPI0$useDateFormatter, useFilter as $cIPI0$useFilter} from "@react-aria/i18n";
 import {useFocusWithin as $cIPI0$useFocusWithin, usePress as $cIPI0$usePress} from "@react-aria/interactions";
+import {toCalendar as $cIPI0$toCalendar, CalendarDate as $cIPI0$CalendarDate} from "@internationalized/date";
 import {NumberParser as $cIPI0$NumberParser} from "@internationalized/number";
 import {useSpinButton as $cIPI0$useSpinButton} from "@react-aria/spinbutton";
 import {MessageDictionary as $cIPI0$MessageDictionary} from "@internationalized/message";
@@ -248,9 +249,9 @@ function $3dfb0f96be0d6a08$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();
@@ -457,6 +458,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
 
 
 
+
 function $3aeceb3a64eb8358$export$d42c60378c8168f8() {
     let { locale: locale  } = $cIPI0$useLocale();
     return $cIPI0$useMemo(()=>{
@@ -491,7 +493,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let { locale: locale  } = $cIPI0$useLocale();
     let displayNames = $3aeceb3a64eb8358$export$d42c60378c8168f8();
     let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $16f0b7bb276bc17e$export$653eddfc964b0f8a.get(state);
-    let textValue = segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = $cIPI0$useMemo(()=>state.dateFormatter.resolvedOptions()
     , [
         state.dateFormatter
@@ -505,11 +507,14 @@ function $32489daedd52963e$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  } = $cIPI0$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,
@@ -563,14 +568,6 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         if (e.key === 'a' && ($cIPI0$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.
@@ -604,6 +601,42 @@ function $32489daedd52963e$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 = $cIPI0$useDateFormatter({
+        year: 'numeric',
+        era: 'narrow',
+        timeZone: 'UTC'
+    });
+    let eras1 = $cIPI0$useMemo(()=>{
+        if (segment.type !== 'era') return [];
+        let date = $cIPI0$toCalendar(new $cIPI0$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 = $32489daedd52963e$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;
@@ -614,6 +647,16 @@ function $32489daedd52963e$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':
@@ -651,14 +694,9 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let onFocus = ()=>{
         enteredKeys.current = '';
         $cIPI0$scrollIntoView($cIPI0$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 = $cIPI0$useRef('');
     // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
@@ -694,10 +732,19 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
                 break;
         }
     });
-    // For Android: prevent selection on long press.
-    $cIPI0$useEvent(ref, 'selectstart', (e)=>{
-        e.preventDefault();
-    });
+    $cIPI0$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 = $cIPI0$isIOS() || segment.type === 'timeZoneName' ? {
         role: 'textbox',
@@ -737,8 +784,8 @@ function $32489daedd52963e$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,
@@ -746,14 +793,12 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
             autoCorrect: isEditable ? 'off' : undefined,
             // Capitalization was changed in React 17...
             [parseInt($cIPI0$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) {
@@ -765,7 +810,16 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         })
     };
 }
-
+function $32489daedd52963e$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;
+}
 
 
 
@@ -805,11 +859,6 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     let buttonId = $cIPI0$useId();
     let dialogId = $cIPI0$useId();
     let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
     let ariaDescribedBy = [
         descProps['aria-describedby'],
         fieldProps['aria-describedby']
@@ -839,7 +888,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     };
     let domProps = $cIPI0$filterDOMProps(props);
     return {
-        groupProps: $cIPI0$mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+        groupProps: $cIPI0$mergeProps(domProps, groupProps, fieldProps, descProps, {
             role: 'group',
             'aria-disabled': props.isDisabled || null,
             'aria-describedby': ariaDescribedBy