@react-aria/datepicker 3.10.0 → 3.10.1

package/dist/useDateRangePicker.mjs

@@ -35,39 +35,39 @@ function $parcel$interopDefault(a) {
 
 function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     var _state_value, _state_value1;
-    let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), "@react-aria/datepicker");
+    let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $eIQ1H$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $eIQ1H$useLocale)();
     let range = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = range ? stringFormatter.format("selectedRangeDescription", {
+    let description = range ? stringFormatter.format('selectedRangeDescription', {
         startDate: range.start,
         endDate: range.end
-    }) : "";
+    }) : '';
     let descProps = (0, $eIQ1H$useDescription)(description);
     let startFieldProps = {
-        "aria-label": stringFormatter.format("startDate"),
-        "aria-labelledby": labelledBy
+        'aria-label': stringFormatter.format('startDate'),
+        'aria-labelledby': labelledBy
     };
     let endFieldProps = {
-        "aria-label": stringFormatter.format("endDate"),
-        "aria-labelledby": labelledBy
+        'aria-label': stringFormatter.format('endDate'),
+        'aria-labelledby': labelledBy
     };
     let buttonId = (0, $eIQ1H$useId)();
     let dialogId = (0, $eIQ1H$useId)();
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let focusManager = (0, $eIQ1H$useMemo)(()=>(0, $eIQ1H$createFocusManager)(ref, {
             // Exclude the button from the focus manager.
             accept: (element)=>element.id !== buttonId
@@ -77,8 +77,8 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     ]);
     let commonFieldProps = {
         [(0, $16f0b7bb276bc17e$export$7b3062cd49e80452)]: focusManager,
-        [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
-        "aria-describedby": ariaDescribedBy,
+        [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
+        'aria-describedby': ariaDescribedBy,
         placeholderValue: props.placeholderValue,
         hideTimeZone: props.hideTimeZone,
         hourCycle: props.hourCycle,
@@ -101,9 +101,9 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     let endFieldValidation = (0, $eIQ1H$useRef)((0, $eIQ1H$DEFAULT_VALIDATION_RESULT));
     return {
         groupProps: (0, $eIQ1H$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -122,23 +122,23 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            "aria-haspopup": "dialog",
-            "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${buttonId} ${labelledBy}`,
-            "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen,
+            'aria-haspopup': 'dialog',
+            'aria-label': stringFormatter.format('calendar'),
+            'aria-labelledby': `${buttonId} ${labelledBy}`,
+            'aria-describedby': ariaDescribedBy,
+            'aria-expanded': state.isOpen,
             isDisabled: props.isDisabled || props.isReadOnly,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${buttonId} ${labelledBy}`
+            'aria-labelledby': `${buttonId} ${labelledBy}`
         },
         startFieldProps: {
             ...startFieldProps,
             ...commonFieldProps,
             value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
-            onChange: (start)=>state.setDateTime("start", start),
+            onChange: (start)=>state.setDateTime('start', start),
             autoFocus: props.autoFocus,
             name: props.startName,
             [(0, $eIQ1H$privateValidationStateProp)]: {
@@ -156,7 +156,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             ...endFieldProps,
             ...commonFieldProps,
             value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
-            onChange: (end)=>state.setDateTime("end", end),
+            onChange: (end)=>state.setDateTime('end', end),
             name: props.endName,
             [(0, $eIQ1H$privateValidationStateProp)]: {
                 realtimeValidation: state.realtimeValidation,
@@ -183,7 +183,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             allowsNonContiguousRanges: props.allowsNonContiguousRanges,
             defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
             isInvalid: state.isInvalid,
-            errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" ")
+            errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
         },
         isInvalid: isInvalid,
         validationErrors: validationErrors,
@@ -193,4 +193,4 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
 
 
 export {$887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker};
-//# sourceMappingURL=useDateRangePicker.mjs.map
+//# sourceMappingURL=useDateRangePicker.module.js.map

package/dist/useDateRangePicker.module.js

@@ -35,39 +35,39 @@ function $parcel$interopDefault(a) {
 
 function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     var _state_value, _state_value1;
-    let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), "@react-aria/datepicker");
+    let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $eIQ1H$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $eIQ1H$useLocale)();
     let range = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = range ? stringFormatter.format("selectedRangeDescription", {
+    let description = range ? stringFormatter.format('selectedRangeDescription', {
         startDate: range.start,
         endDate: range.end
-    }) : "";
+    }) : '';
     let descProps = (0, $eIQ1H$useDescription)(description);
     let startFieldProps = {
-        "aria-label": stringFormatter.format("startDate"),
-        "aria-labelledby": labelledBy
+        'aria-label': stringFormatter.format('startDate'),
+        'aria-labelledby': labelledBy
     };
     let endFieldProps = {
-        "aria-label": stringFormatter.format("endDate"),
-        "aria-labelledby": labelledBy
+        'aria-label': stringFormatter.format('endDate'),
+        'aria-labelledby': labelledBy
     };
     let buttonId = (0, $eIQ1H$useId)();
     let dialogId = (0, $eIQ1H$useId)();
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let focusManager = (0, $eIQ1H$useMemo)(()=>(0, $eIQ1H$createFocusManager)(ref, {
             // Exclude the button from the focus manager.
             accept: (element)=>element.id !== buttonId
@@ -77,8 +77,8 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     ]);
     let commonFieldProps = {
         [(0, $16f0b7bb276bc17e$export$7b3062cd49e80452)]: focusManager,
-        [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
-        "aria-describedby": ariaDescribedBy,
+        [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
+        'aria-describedby': ariaDescribedBy,
         placeholderValue: props.placeholderValue,
         hideTimeZone: props.hideTimeZone,
         hourCycle: props.hourCycle,
@@ -101,9 +101,9 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     let endFieldValidation = (0, $eIQ1H$useRef)((0, $eIQ1H$DEFAULT_VALIDATION_RESULT));
     return {
         groupProps: (0, $eIQ1H$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -122,23 +122,23 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            "aria-haspopup": "dialog",
-            "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${buttonId} ${labelledBy}`,
-            "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen,
+            'aria-haspopup': 'dialog',
+            'aria-label': stringFormatter.format('calendar'),
+            'aria-labelledby': `${buttonId} ${labelledBy}`,
+            'aria-describedby': ariaDescribedBy,
+            'aria-expanded': state.isOpen,
             isDisabled: props.isDisabled || props.isReadOnly,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${buttonId} ${labelledBy}`
+            'aria-labelledby': `${buttonId} ${labelledBy}`
         },
         startFieldProps: {
             ...startFieldProps,
             ...commonFieldProps,
             value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
-            onChange: (start)=>state.setDateTime("start", start),
+            onChange: (start)=>state.setDateTime('start', start),
             autoFocus: props.autoFocus,
             name: props.startName,
             [(0, $eIQ1H$privateValidationStateProp)]: {
@@ -156,7 +156,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             ...endFieldProps,
             ...commonFieldProps,
             value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
-            onChange: (end)=>state.setDateTime("end", end),
+            onChange: (end)=>state.setDateTime('end', end),
             name: props.endName,
             [(0, $eIQ1H$privateValidationStateProp)]: {
                 realtimeValidation: state.realtimeValidation,
@@ -183,7 +183,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             allowsNonContiguousRanges: props.allowsNonContiguousRanges,
             defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
             isInvalid: state.isInvalid,
-            errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" ")
+            errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
         },
         isInvalid: isInvalid,
         validationErrors: validationErrors,

package/dist/useDateSegment.main.js

@@ -36,27 +36,27 @@ $parcel$export(module.exports, "useDateSegment", () => $5c015c6316d1904d$export$
 
 
 function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
-    let enteredKeys = (0, $5Tgzj$react.useRef)("");
+    let enteredKeys = (0, $5Tgzj$react.useRef)('');
     let { locale: locale } = (0, $5Tgzj$reactariai18n.useLocale)();
     let displayNames = (0, $934ac650a0aceb4b$exports.useDisplayNames)();
     let { ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, focusManager: focusManager } = (0, $4acc2f407c169e55$exports.hookData).get(state);
-    let textValue = segment.isPlaceholder ? "" : segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = (0, $5Tgzj$react.useMemo)(()=>state.dateFormatter.resolvedOptions(), [
         state.dateFormatter
     ]);
     let monthDateFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
-        month: "long",
+        month: 'long',
         timeZone: options.timeZone
     });
     let hourDateFormatter = (0, $5Tgzj$reactariai18n.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, $5Tgzj$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.
@@ -69,27 +69,27 @@ function $5c015c6316d1904d$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);
         }
     });
@@ -103,20 +103,20 @@ function $5c015c6316d1904d$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, $5Tgzj$reactariautils.isMac)() ? e.metaKey : e.ctrlKey)) e.preventDefault();
+        if (e.key === 'a' && ((0, $5Tgzj$reactariautils.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();
@@ -126,34 +126,34 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     };
     // Safari dayPeriod option doesn't work...
     let { startsWith: startsWith } = (0, $5Tgzj$reactariai18n.useFilter)({
-        sensitivity: "base"
+        sensitivity: 'base'
     });
     let amPmFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
-        hour: "numeric",
+        hour: 'numeric',
         hour12: true
     });
     let am = (0, $5Tgzj$react.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, $5Tgzj$react.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, $5Tgzj$reactariai18n.useDateFormatter)({
-        year: "numeric",
-        era: "narrow",
-        timeZone: "UTC"
+        year: 'numeric',
+        era: 'narrow',
+        timeZone: 'UTC'
     });
     let eras = (0, $5Tgzj$react.useMemo)(()=>{
-        if (segment.type !== "era") return [];
+        if (segment.type !== 'era') return [];
         let date = (0, $5Tgzj$internationalizeddate.toCalendar)(new (0, $5Tgzj$internationalizeddate.CalendarDate)(1, 1, 1), state.calendar);
         let eras = state.calendar.getEras().map((era)=>{
             let eraDate = date.set({
@@ -161,9 +161,9 @@ function $5c015c6316d1904d$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
@@ -184,38 +184,38 @@ function $5c015c6316d1904d$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;
@@ -225,8 +225,8 @@ function $5c015c6316d1904d$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;
@@ -234,7 +234,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     let onFocus = ()=>{
-        enteredKeys.current = "";
+        enteredKeys.current = '';
         (0, $5Tgzj$reactariautils.scrollIntoViewport)(ref.current, {
             containingElement: (0, $5Tgzj$reactariautils.getScrollParent)(ref.current)
         });
@@ -242,16 +242,16 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         let selection = window.getSelection();
         selection.collapse(ref.current);
     };
-    let compositionRef = (0, $5Tgzj$react.useRef)("");
+    let compositionRef = (0, $5Tgzj$react.useRef)('');
     // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
-    (0, $5Tgzj$reactariautils.useEvent)(ref, "beforeinput", (e)=>{
+    (0, $5Tgzj$reactariautils.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;
@@ -264,10 +264,10 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
                 break;
         }
     });
-    (0, $5Tgzj$reactariautils.useEvent)(ref, "input", (e)=>{
+    (0, $5Tgzj$reactariautils.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.
@@ -290,12 +290,12 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         focusManager
     ]);
     // spinbuttons cannot be focused with VoiceOver on iOS.
-    let touchPropOverrides = (0, $5Tgzj$reactariautils.isIOS)() || segment.type === "timeZoneName" ? {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuetext": null,
-        "aria-valuenow": null
+    let touchPropOverrides = (0, $5Tgzj$reactariautils.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.
@@ -307,39 +307,39 @@ function $5c015c6316d1904d$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, $5Tgzj$reactariautils.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, $5Tgzj$reactariautils.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,
+            autoCapitalize: isEditable ? 'off' : undefined,
+            autoCorrect: isEditable ? 'off' : undefined,
             // Capitalization was changed in React 17...
-            [parseInt((0, ($parcel$interopDefault($5Tgzj$react))).version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: isEditable ? "next" : undefined,
-            inputMode: state.isDisabled || segment.type === "dayPeriod" || segment.type === "era" || !isEditable ? undefined : "numeric",
+            [parseInt((0, ($parcel$interopDefault($5Tgzj$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) {