@react-aria/datepicker 3.10.0 → 3.11.0

package/dist/useDateSegment.mjs

@@ -26,27 +26,27 @@ import {useSpinButton as $4d1jn$useSpinButton} from "@react-aria/spinbutton";
 
 
 function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
-    let enteredKeys = (0, $4d1jn$useRef)("");
+    let enteredKeys = (0, $4d1jn$useRef)('');
     let { locale: locale } = (0, $4d1jn$useLocale)();
     let displayNames = (0, $3aeceb3a64eb8358$export$d42c60378c8168f8)();
     let { ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, focusManager: focusManager } = (0, $16f0b7bb276bc17e$export$653eddfc964b0f8a).get(state);
-    let textValue = segment.isPlaceholder ? "" : segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = (0, $4d1jn$useMemo)(()=>state.dateFormatter.resolvedOptions(), [
         state.dateFormatter
     ]);
     let monthDateFormatter = (0, $4d1jn$useDateFormatter)({
-        month: "long",
+        month: 'long',
         timeZone: options.timeZone
     });
     let hourDateFormatter = (0, $4d1jn$useDateFormatter)({
-        hour: "numeric",
+        hour: 'numeric',
         hour12: options.hour12,
         timeZone: options.timeZone
     });
-    if (segment.type === "month" && !segment.isPlaceholder) {
+    if (segment.type === 'month' && !segment.isPlaceholder) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} \u{2013} ${monthTextValue}` : monthTextValue;
-    } else if (segment.type === "hour" && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
+    } else if (segment.type === 'hour' && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
     let { spinButtonProps: spinButtonProps } = (0, $4d1jn$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.
@@ -59,27 +59,27 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         isReadOnly: state.isReadOnly || !segment.isEditable,
         isRequired: state.isRequired,
         onIncrement: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.increment(segment.type);
         },
         onDecrement: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.decrement(segment.type);
         },
         onIncrementPage: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.incrementPage(segment.type);
         },
         onDecrementPage: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.decrementPage(segment.type);
         },
         onIncrementToMax: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.setSegment(segment.type, segment.maxValue);
         },
         onDecrementToMin: ()=>{
-            enteredKeys.current = "";
+            enteredKeys.current = '';
             state.setSegment(segment.type, segment.minValue);
         }
     });
@@ -93,20 +93,20 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {
             let newValue = segment.text.slice(0, -1);
             let parsed = parser.parse(newValue);
-            newValue = parsed === 0 ? "" : newValue;
+            newValue = parsed === 0 ? '' : newValue;
             if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type);
             else state.setSegment(segment.type, parsed);
             enteredKeys.current = newValue;
-        } else if (segment.type === "dayPeriod") state.clearSegment(segment.type);
+        } else if (segment.type === 'dayPeriod') state.clearSegment(segment.type);
     };
     let onKeyDown = (e)=>{
         // Firefox does not fire selectstart for Ctrl/Cmd + A
         // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153
-        if (e.key === "a" && ((0, $4d1jn$isMac)() ? e.metaKey : e.ctrlKey)) e.preventDefault();
+        if (e.key === 'a' && ((0, $4d1jn$isMac)() ? e.metaKey : e.ctrlKey)) e.preventDefault();
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
         switch(e.key){
-            case "Backspace":
-            case "Delete":
+            case 'Backspace':
+            case 'Delete':
                 // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
                 e.preventDefault();
                 e.stopPropagation();
@@ -116,34 +116,34 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     };
     // Safari dayPeriod option doesn't work...
     let { startsWith: startsWith } = (0, $4d1jn$useFilter)({
-        sensitivity: "base"
+        sensitivity: 'base'
     });
     let amPmFormatter = (0, $4d1jn$useDateFormatter)({
-        hour: "numeric",
+        hour: 'numeric',
         hour12: true
     });
     let am = (0, $4d1jn$useMemo)(()=>{
         let date = new Date();
         date.setHours(0);
-        return amPmFormatter.formatToParts(date).find((part)=>part.type === "dayPeriod").value;
+        return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod').value;
     }, [
         amPmFormatter
     ]);
     let pm = (0, $4d1jn$useMemo)(()=>{
         let date = new Date();
         date.setHours(12);
-        return amPmFormatter.formatToParts(date).find((part)=>part.type === "dayPeriod").value;
+        return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod').value;
     }, [
         amPmFormatter
     ]);
     // Get a list of formatted era names so users can type the first character to choose one.
     let eraFormatter = (0, $4d1jn$useDateFormatter)({
-        year: "numeric",
-        era: "narrow",
-        timeZone: "UTC"
+        year: 'numeric',
+        era: 'narrow',
+        timeZone: 'UTC'
     });
     let eras = (0, $4d1jn$useMemo)(()=>{
-        if (segment.type !== "era") return [];
+        if (segment.type !== 'era') return [];
         let date = (0, $4d1jn$toCalendar)(new (0, $4d1jn$CalendarDate)(1, 1, 1), state.calendar);
         let eras = state.calendar.getEras().map((era)=>{
             let eraDate = date.set({
@@ -151,9 +151,9 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
                 month: 1,
                 day: 1,
                 era: era
-            }).toDate("UTC");
+            }).toDate('UTC');
             let parts = eraFormatter.formatToParts(eraDate);
-            let formatted = parts.find((p)=>p.type === "era").value;
+            let formatted = parts.find((p)=>p.type === 'era').value;
             return {
                 era: era,
                 formatted: formatted
@@ -174,38 +174,38 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         if (state.isDisabled || state.isReadOnly) return;
         let newValue = enteredKeys.current + key;
         switch(segment.type){
-            case "dayPeriod":
-                if (startsWith(am, key)) state.setSegment("dayPeriod", 0);
-                else if (startsWith(pm, key)) state.setSegment("dayPeriod", 12);
+            case 'dayPeriod':
+                if (startsWith(am, key)) state.setSegment('dayPeriod', 0);
+                else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12);
                 else break;
                 focusManager.focusNext();
                 break;
-            case "era":
+            case 'era':
                 {
                     let matched = eras.find((e)=>startsWith(e.formatted, key));
                     if (matched) {
-                        state.setSegment("era", matched.era);
+                        state.setSegment('era', matched.era);
                         focusManager.focusNext();
                     }
                     break;
                 }
-            case "day":
-            case "hour":
-            case "minute":
-            case "second":
-            case "month":
-            case "year":
+            case 'day':
+            case 'hour':
+            case 'minute':
+            case 'second':
+            case 'month':
+            case 'year':
                 {
                     if (!parser.isValidPartialNumber(newValue)) return;
                     let numberValue = parser.parse(newValue);
                     let segmentValue = numberValue;
                     let allowsZero = segment.minValue === 0;
-                    if (segment.type === "hour" && state.dateFormatter.resolvedOptions().hour12) {
+                    if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {
                         switch(state.dateFormatter.resolvedOptions().hourCycle){
-                            case "h11":
+                            case 'h11':
                                 if (numberValue > 11) segmentValue = parser.parse(key);
                                 break;
-                            case "h12":
+                            case 'h12':
                                 allowsZero = false;
                                 if (numberValue > 12) segmentValue = parser.parse(key);
                                 break;
@@ -215,8 +215,8 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
                     if (isNaN(numberValue)) return;
                     let shouldSetValue = segmentValue !== 0 || allowsZero;
                     if (shouldSetValue) state.setSegment(segment.type, segmentValue);
-                    if (Number(numberValue + "0") > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
-                        enteredKeys.current = "";
+                    if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
+                        enteredKeys.current = '';
                         if (shouldSetValue) focusManager.focusNext();
                     } else enteredKeys.current = newValue;
                     break;
@@ -224,7 +224,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     let onFocus = ()=>{
-        enteredKeys.current = "";
+        enteredKeys.current = '';
         (0, $4d1jn$scrollIntoViewport)(ref.current, {
             containingElement: (0, $4d1jn$getScrollParent)(ref.current)
         });
@@ -232,16 +232,24 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         let selection = window.getSelection();
         selection.collapse(ref.current);
     };
-    let compositionRef = (0, $4d1jn$useRef)("");
+    let documentRef = (0, $4d1jn$useRef)(typeof document !== 'undefined' ? document : null);
+    (0, $4d1jn$useEvent)(documentRef, 'selectionchange', ()=>{
+        // Enforce that the selection is collapsed when inside a date segment.
+        // Otherwise, when tapping on a segment in Android Chrome and then entering text,
+        // composition events will be fired that break the DOM structure and crash the page.
+        let selection = window.getSelection();
+        if (ref.current.contains(selection.anchorNode)) selection.collapse(ref.current);
+    });
+    let compositionRef = (0, $4d1jn$useRef)('');
     // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
-    (0, $4d1jn$useEvent)(ref, "beforeinput", (e)=>{
+    (0, $4d1jn$useEvent)(ref, 'beforeinput', (e)=>{
         e.preventDefault();
         switch(e.inputType){
-            case "deleteContentBackward":
-            case "deleteContentForward":
+            case 'deleteContentBackward':
+            case 'deleteContentForward':
                 if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) backspace();
                 break;
-            case "insertCompositionText":
+            case 'insertCompositionText':
                 // insertCompositionText cannot be canceled.
                 // Record the current state of the element so we can restore it in the `input` event below.
                 compositionRef.current = ref.current.textContent;
@@ -254,10 +262,10 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
                 break;
         }
     });
-    (0, $4d1jn$useEvent)(ref, "input", (e)=>{
+    (0, $4d1jn$useEvent)(ref, 'input', (e)=>{
         let { inputType: inputType, data: data } = e;
         switch(inputType){
-            case "insertCompositionText":
+            case 'insertCompositionText':
                 // Reset the DOM to how it was in the beforeinput event.
                 ref.current.textContent = compositionRef.current;
                 // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
@@ -280,12 +288,12 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         focusManager
     ]);
     // spinbuttons cannot be focused with VoiceOver on iOS.
-    let touchPropOverrides = (0, $4d1jn$isIOS)() || segment.type === "timeZoneName" ? {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuetext": null,
-        "aria-valuenow": null
+    let touchPropOverrides = (0, $4d1jn$isIOS)() || segment.type === 'timeZoneName' ? {
+        role: 'textbox',
+        'aria-valuemax': null,
+        'aria-valuemin': null,
+        'aria-valuetext': null,
+        'aria-valuenow': null
     } : {};
     // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
     // read every time the user navigates to a new segment.
@@ -297,39 +305,38 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
     // Prepend the label passed from the field to each segment name.
     // This is needed because VoiceOver on iOS does not announce groups.
-    let name = segment.type === "literal" ? "" : displayNames.of(segment.type);
+    let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
     let labelProps = (0, $4d1jn$useLabels)({
-        "aria-label": `${name}${ariaLabel ? `, ${ariaLabel}` : ""}${ariaLabelledBy ? ", " : ""}`,
-        "aria-labelledby": ariaLabelledBy
+        'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,
+        'aria-labelledby': ariaLabelledBy
     });
     // Literal segments should not be visible to screen readers. We don't really need any of the above,
     // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
-    if (segment.type === "literal") return {
+    if (segment.type === 'literal') return {
         segmentProps: {
-            "aria-hidden": true
+            'aria-hidden': true
         }
     };
     return {
         segmentProps: (0, $4d1jn$mergeProps)(spinButtonProps, labelProps, {
             id: id,
             ...touchPropOverrides,
-            "aria-invalid": state.isInvalid ? "true" : undefined,
-            "aria-describedby": ariaDescribedBy,
-            "aria-readonly": state.isReadOnly || !segment.isEditable ? "true" : undefined,
-            "data-placeholder": segment.isPlaceholder || undefined,
+            'aria-invalid': state.isInvalid ? 'true' : undefined,
+            'aria-describedby': ariaDescribedBy,
+            'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+            'data-placeholder': segment.isPlaceholder || undefined,
             contentEditable: isEditable,
             suppressContentEditableWarning: isEditable,
-            spellCheck: isEditable ? "false" : undefined,
-            autoCapitalize: isEditable ? "off" : undefined,
-            autoCorrect: isEditable ? "off" : undefined,
+            spellCheck: isEditable ? 'false' : undefined,
+            autoCorrect: isEditable ? 'off' : undefined,
             // Capitalization was changed in React 17...
-            [parseInt((0, $4d1jn$react).version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: isEditable ? "next" : undefined,
-            inputMode: state.isDisabled || segment.type === "dayPeriod" || segment.type === "era" || !isEditable ? undefined : "numeric",
+            [parseInt((0, $4d1jn$react).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
+            inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',
             tabIndex: state.isDisabled ? undefined : 0,
             onKeyDown: onKeyDown,
             onFocus: onFocus,
             style: {
-                caretColor: "transparent"
+                caretColor: 'transparent'
             },
             // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
             onPointerDown (e) {
@@ -354,4 +361,4 @@ function $32489daedd52963e$var$commonPrefixLength(strings) {
 
 
 export {$32489daedd52963e$export$1315d136e6f7581 as useDateSegment};
-//# sourceMappingURL=useDateSegment.mjs.map
+//# sourceMappingURL=useDateSegment.module.js.map