@react-aria/datepicker 3.0.0-nightly.2912 → 3.0.0-nightly.2925

package/dist/useDateField.main.js

@@ -42,14 +42,14 @@ $parcel$export(module.exports, "useTimeField", () => $4acc2f407c169e55$export$4c
 
 
 const $4acc2f407c169e55$export$653eddfc964b0f8a = new WeakMap();
-const $4acc2f407c169e55$export$300019f83c56d282 = "__role_" + Date.now();
-const $4acc2f407c169e55$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+const $4acc2f407c169e55$export$300019f83c56d282 = '__role_' + Date.now();
+const $4acc2f407c169e55$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
 function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
     var _state_value;
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $lVMtq$reactarialabel.useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
@@ -69,34 +69,34 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
         },
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $lVMtq$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), "@react-aria/datepicker");
-    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
-    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let stringFormatter = (0, $lVMtq$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), '@react-aria/datepicker');
+    let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+    let field = state.maxGranularity === 'hour' ? 'time' : 'date';
     let description = state.value ? stringFormatter.format(message, {
         [field]: state.formatValue({
-            month: "long"
+            month: 'long'
         })
-    }) : "";
+    }) : '';
     let descProps = (0, $lVMtq$reactariautils.useDescription)(description);
     // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
     // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
-    let describedBy = props[$4acc2f407c169e55$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+    let describedBy = props[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let propsFocusManager = props[$4acc2f407c169e55$export$7b3062cd49e80452];
     let focusManager = (0, $lVMtq$react.useMemo)(()=>propsFocusManager || (0, $lVMtq$reactariafocus.createFocusManager)(ref), [
         propsFocusManager,
         ref
     ]);
-    let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref, props[$4acc2f407c169e55$export$300019f83c56d282] === "presentation");
+    let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref, props[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
-        ariaLabel: props["aria-label"],
+        ariaLabel: props['aria-label'],
         ariaLabelledBy: [
             labelProps.id,
-            props["aria-labelledby"]
-        ].filter(Boolean).join(" ") || undefined,
+            props['aria-labelledby']
+        ].filter(Boolean).join(' ') || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
     });
@@ -106,13 +106,13 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
     // with a label and description, and the segments are already labeled by this as well, this
     // avoids very verbose duplicate announcements.
     let fieldDOMProps;
-    if (props[$4acc2f407c169e55$export$300019f83c56d282] === "presentation") fieldDOMProps = {
-        role: "presentation"
+    if (props[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
     };
     else fieldDOMProps = (0, $lVMtq$reactariautils.mergeProps)(fieldProps, {
-        role: "group",
-        "aria-disabled": props.isDisabled || undefined,
-        "aria-describedby": describedBy
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
     });
     (0, $lVMtq$react.useEffect)(()=>{
         if (autoFocusRef.current) focusManager.focusFirst();
@@ -128,14 +128,14 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
         }
     }, state, props.inputRef);
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: props.name,
-        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ''
     };
-    if (props.validationBehavior === "native") {
+    if (props.validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
         // so that an empty value blocks HTML form submission when the field is required.
-        inputProps.type = "text";
+        inputProps.type = 'text';
         inputProps.hidden = true;
         inputProps.required = props.isRequired;
         // Ignore react warning.
@@ -168,7 +168,7 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
 function $4acc2f407c169e55$export$4c842f6a241dc825(props, state, ref) {
     var _state_timeValue;
     let res = $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref);
-    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
     return res;
 }
 

package/dist/useDateField.mjs

@@ -32,14 +32,14 @@ function $parcel$interopDefault(a) {
 
 
 const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
-const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
-const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = '__role_' + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
 function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     var _state_value;
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7Gzdi$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
@@ -59,34 +59,34 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         },
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), "@react-aria/datepicker");
-    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
-    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), '@react-aria/datepicker');
+    let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+    let field = state.maxGranularity === 'hour' ? 'time' : 'date';
     let description = state.value ? stringFormatter.format(message, {
         [field]: state.formatValue({
-            month: "long"
+            month: 'long'
         })
-    }) : "";
+    }) : '';
     let descProps = (0, $7Gzdi$useDescription)(description);
     // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
     // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
-    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
     let focusManager = (0, $7Gzdi$useMemo)(()=>propsFocusManager || (0, $7Gzdi$createFocusManager)(ref), [
         propsFocusManager,
         ref
     ]);
-    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation");
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
-        ariaLabel: props["aria-label"],
+        ariaLabel: props['aria-label'],
         ariaLabelledBy: [
             labelProps.id,
-            props["aria-labelledby"]
-        ].filter(Boolean).join(" ") || undefined,
+            props['aria-labelledby']
+        ].filter(Boolean).join(' ') || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
     });
@@ -96,13 +96,13 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     // with a label and description, and the segments are already labeled by this as well, this
     // avoids very verbose duplicate announcements.
     let fieldDOMProps;
-    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation") fieldDOMProps = {
-        role: "presentation"
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
     };
     else fieldDOMProps = (0, $7Gzdi$mergeProps)(fieldProps, {
-        role: "group",
-        "aria-disabled": props.isDisabled || undefined,
-        "aria-describedby": describedBy
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
     });
     (0, $7Gzdi$useEffect)(()=>{
         if (autoFocusRef.current) focusManager.focusFirst();
@@ -118,14 +118,14 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         }
     }, state, props.inputRef);
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: props.name,
-        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ''
     };
-    if (props.validationBehavior === "native") {
+    if (props.validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
         // so that an empty value blocks HTML form submission when the field is required.
-        inputProps.type = "text";
+        inputProps.type = 'text';
         inputProps.hidden = true;
         inputProps.required = props.isRequired;
         // Ignore react warning.
@@ -158,7 +158,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
 function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
     var _state_timeValue;
     let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
-    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
     return res;
 }
 

package/dist/useDateField.module.js

@@ -32,14 +32,14 @@ function $parcel$interopDefault(a) {
 
 
 const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
-const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
-const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = '__role_' + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
 function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     var _state_value;
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7Gzdi$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
@@ -59,34 +59,34 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         },
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), "@react-aria/datepicker");
-    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
-    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), '@react-aria/datepicker');
+    let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+    let field = state.maxGranularity === 'hour' ? 'time' : 'date';
     let description = state.value ? stringFormatter.format(message, {
         [field]: state.formatValue({
-            month: "long"
+            month: 'long'
         })
-    }) : "";
+    }) : '';
     let descProps = (0, $7Gzdi$useDescription)(description);
     // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
     // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
-    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
     let focusManager = (0, $7Gzdi$useMemo)(()=>propsFocusManager || (0, $7Gzdi$createFocusManager)(ref), [
         propsFocusManager,
         ref
     ]);
-    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation");
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
-        ariaLabel: props["aria-label"],
+        ariaLabel: props['aria-label'],
         ariaLabelledBy: [
             labelProps.id,
-            props["aria-labelledby"]
-        ].filter(Boolean).join(" ") || undefined,
+            props['aria-labelledby']
+        ].filter(Boolean).join(' ') || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
     });
@@ -96,13 +96,13 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     // with a label and description, and the segments are already labeled by this as well, this
     // avoids very verbose duplicate announcements.
     let fieldDOMProps;
-    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation") fieldDOMProps = {
-        role: "presentation"
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
     };
     else fieldDOMProps = (0, $7Gzdi$mergeProps)(fieldProps, {
-        role: "group",
-        "aria-disabled": props.isDisabled || undefined,
-        "aria-describedby": describedBy
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
     });
     (0, $7Gzdi$useEffect)(()=>{
         if (autoFocusRef.current) focusManager.focusFirst();
@@ -118,14 +118,14 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         }
     }, state, props.inputRef);
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: props.name,
-        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ''
     };
-    if (props.validationBehavior === "native") {
+    if (props.validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
         // so that an empty value blocks HTML form submission when the field is required.
-        inputProps.type = "text";
+        inputProps.type = 'text';
         inputProps.hidden = true;
         inputProps.required = props.isRequired;
         // Ignore react warning.
@@ -158,7 +158,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
 function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
     var _state_timeValue;
     let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
-    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
     return res;
 }
 

package/dist/useDatePicker.main.js

@@ -43,28 +43,28 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $bxHoL$reactariautils.useId)();
     let dialogId = (0, $bxHoL$reactariautils.useId)();
     let fieldId = (0, $bxHoL$reactariautils.useId)();
-    let stringFormatter = (0, $bxHoL$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), "@react-aria/datepicker");
+    let stringFormatter = (0, $bxHoL$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $bxHoL$reactarialabel.useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
     let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref);
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $bxHoL$reactariai18n.useLocale)();
     let date = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = date ? stringFormatter.format("selectedDateDescription", {
+    let description = date ? stringFormatter.format('selectedDateDescription', {
         date: date
-    }) : "";
+    }) : '';
     let descProps = (0, $bxHoL$reactariautils.useDescription)(description);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let domProps = (0, $bxHoL$reactariautils.filterDOMProps)(props);
     let focusManager = (0, $bxHoL$react.useMemo)(()=>(0, $bxHoL$reactariafocus.createFocusManager)(ref), [
         ref
@@ -78,10 +78,10 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     });
     return {
         groupProps: (0, $bxHoL$reactariautils.mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-labelledby": labelledBy,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-labelledby': labelledBy,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -100,8 +100,8 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         fieldProps: {
             ...fieldProps,
             id: fieldId,
-            [(0, $4acc2f407c169e55$exports.roleSymbol)]: "presentation",
-            "aria-describedby": ariaDescribedBy,
+            [(0, $4acc2f407c169e55$exports.roleSymbol)]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             placeholderValue: props.placeholderValue,
@@ -123,17 +123,17 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(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}`
         },
         calendarProps: {
             autoFocus: true,
@@ -146,7 +146,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             isDateUnavailable: props.isDateUnavailable,
             defaultFocusedValue: state.dateValue ? 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/useDatePicker.mjs

@@ -37,28 +37,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $4lVjK$useId)();
     let dialogId = (0, $4lVjK$useId)();
     let fieldId = (0, $4lVjK$useId)();
-    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), "@react-aria/datepicker");
+    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4lVjK$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $4lVjK$useLocale)();
     let date = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = date ? stringFormatter.format("selectedDateDescription", {
+    let description = date ? stringFormatter.format('selectedDateDescription', {
         date: date
-    }) : "";
+    }) : '';
     let descProps = (0, $4lVjK$useDescription)(description);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let domProps = (0, $4lVjK$filterDOMProps)(props);
     let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
         ref
@@ -72,10 +72,10 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     });
     return {
         groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-labelledby": labelledBy,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-labelledby': labelledBy,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -94,8 +94,8 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         fieldProps: {
             ...fieldProps,
             id: fieldId,
-            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
-            "aria-describedby": ariaDescribedBy,
+            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             placeholderValue: props.placeholderValue,
@@ -117,17 +117,17 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(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}`
         },
         calendarProps: {
             autoFocus: true,
@@ -140,7 +140,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             isDateUnavailable: props.isDateUnavailable,
             defaultFocusedValue: state.dateValue ? 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/useDatePicker.module.js

@@ -37,28 +37,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $4lVjK$useId)();
     let dialogId = (0, $4lVjK$useId)();
     let fieldId = (0, $4lVjK$useId)();
-    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), "@react-aria/datepicker");
+    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4lVjK$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $4lVjK$useLocale)();
     let date = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = date ? stringFormatter.format("selectedDateDescription", {
+    let description = date ? stringFormatter.format('selectedDateDescription', {
         date: date
-    }) : "";
+    }) : '';
     let descProps = (0, $4lVjK$useDescription)(description);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let domProps = (0, $4lVjK$filterDOMProps)(props);
     let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
         ref
@@ -72,10 +72,10 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     });
     return {
         groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-labelledby": labelledBy,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-labelledby': labelledBy,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -94,8 +94,8 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         fieldProps: {
             ...fieldProps,
             id: fieldId,
-            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
-            "aria-describedby": ariaDescribedBy,
+            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             placeholderValue: props.placeholderValue,
@@ -117,17 +117,17 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(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}`
         },
         calendarProps: {
             autoFocus: true,
@@ -140,7 +140,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             isDateUnavailable: props.isDateUnavailable,
             defaultFocusedValue: state.dateValue ? 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,