@react-aria/datepicker 3.4.1 → 3.6.0

package/dist/import.mjs

@@ -1,5 +1,5 @@
 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, scrollIntoViewport as $cIPI0$scrollIntoViewport, 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 {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, filterDOMProps as $cIPI0$filterDOMProps, mergeProps as $cIPI0$mergeProps, useFormReset as $cIPI0$useFormReset, isMac as $cIPI0$isMac, scrollIntoViewport as $cIPI0$scrollIntoViewport, 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 {useFocusWithin as $cIPI0$useFocusWithin, usePress as $cIPI0$usePress} from "@react-aria/interactions";
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
  * governing permissions and limitations under the License.
  */ 
 
-var $204383cf4f6b0d06$exports = {};
+var $dfb4eba373ed9493$exports = {};
 var $f23889fffbde9058$exports = {};
 $f23889fffbde9058$exports = {
     "calendar": `التقويم`,
@@ -749,7 +749,7 @@ $33fab8219207655a$exports = {
 };
 
 
-$204383cf4f6b0d06$exports = {
+$dfb4eba373ed9493$exports = {
     "ar-AE": $f23889fffbde9058$exports,
     "bg-BG": $09d9badaa8903929$exports,
     "cs-CZ": $151b77e0fd711730$exports,
@@ -886,6 +886,7 @@ const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
 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 { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
@@ -899,7 +900,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         onFocusWithin: props.onFocus,
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports))));
+    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
     let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
     let field = state.maxGranularity === "hour" ? "time" : "date";
     let description = state.value ? stringFormatter.format(message, {
@@ -924,8 +925,8 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
         ariaLabel: props["aria-label"],
         ariaLabelledBy: [
-            props["aria-labelledby"],
-            labelProps.id
+            labelProps.id,
+            props["aria-labelledby"]
         ].filter(Boolean).join(" ") || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
@@ -950,6 +951,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     }, [
         focusManager
     ]);
+    (0, $cIPI0$useFormReset)(props.inputRef, state.value, state.setValue);
     let domProps = (0, $cIPI0$filterDOMProps)(props);
     return {
         labelProps: {
@@ -966,12 +968,20 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
                 if (props.onKeyUp) props.onKeyUp(e);
             }
         }),
+        inputProps: {
+            type: "hidden",
+            name: props.name,
+            value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps
     };
 }
 function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
-    return $16f0b7bb276bc17e$export$5591b0b878c1a989(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()) || "";
+    return res;
 }
 
 
@@ -983,7 +993,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $cIPI0$useId)();
     let dialogId = (0, $cIPI0$useId)();
     let fieldId = (0, $cIPI0$useId)();
-    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports))));
+    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
     let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
@@ -1046,12 +1056,14 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             placeholderValue: props.placeholderValue,
             hideTimeZone: props.hideTimeZone,
             hourCycle: props.hourCycle,
+            shouldForceLeadingZeros: props.shouldForceLeadingZeros,
             granularity: props.granularity,
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
             validationState: state.validationState,
-            autoFocus: props.autoFocus
+            autoFocus: props.autoFocus,
+            name: props.name
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,
@@ -1060,14 +1072,14 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             id: buttonId,
             "aria-haspopup": "dialog",
             "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${labelledBy} ${buttonId}`,
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
             "aria-expanded": state.isOpen || undefined,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${labelledBy} ${buttonId}`
+            "aria-labelledby": `${buttonId} ${labelledBy}`
         },
         calendarProps: {
             autoFocus: true,
@@ -1140,7 +1152,7 @@ class $3aeceb3a64eb8358$var$DisplayNamesPolyfill {
     }
     constructor(locale){
         this.locale = locale;
-        this.dictionary = new (0, $cIPI0$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports))));
+        this.dictionary = new (0, $cIPI0$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
     }
 }
 
@@ -1418,7 +1430,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     // This is needed because VoiceOver on iOS does not announce groups.
     let name = segment.type === "literal" ? "" : displayNames.of(segment.type);
     let labelProps = (0, $cIPI0$useLabels)({
-        "aria-label": (ariaLabel ? ariaLabel + " " : "") + name,
+        "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,
@@ -1494,7 +1506,7 @@ function $32489daedd52963e$var$commonPrefixLength(strings) {
 
 function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
     var _state_value, _state_value1;
-    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports))));
+    let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
     let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
@@ -1541,6 +1553,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
         hideTimeZone: props.hideTimeZone,
         hourCycle: props.hourCycle,
         granularity: props.granularity,
+        shouldForceLeadingZeros: props.shouldForceLeadingZeros,
         isDisabled: props.isDisabled,
         isReadOnly: props.isReadOnly,
         isRequired: props.isRequired,
@@ -1579,27 +1592,29 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             id: buttonId,
             "aria-haspopup": "dialog",
             "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${labelledBy} ${buttonId}`,
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
             "aria-expanded": state.isOpen || undefined,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${labelledBy} ${buttonId}`
+            "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),
-            autoFocus: props.autoFocus
+            autoFocus: props.autoFocus,
+            name: props.startName
         },
         endFieldProps: {
             ...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
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,

package/dist/main.js

@@ -44,7 +44,7 @@ $parcel$export(module.exports, "useDisplayNames", () => $934ac650a0aceb4b$export
  * governing permissions and limitations under the License.
  */ 
 
-var $c7d0e80b992ca68a$exports = {};
+var $c1905b78f6d2f5bf$exports = {};
 var $aa344be62785b256$exports = {};
 $aa344be62785b256$exports = {
     "calendar": `التقويم`,
@@ -759,7 +759,7 @@ $0335c3ddb5f70cbe$exports = {
 };
 
 
-$c7d0e80b992ca68a$exports = {
+$c1905b78f6d2f5bf$exports = {
     "ar-AE": $aa344be62785b256$exports,
     "bg-BG": $615986c3475e7c8c$exports,
     "cs-CZ": $6c6207692f1ab248$exports,
@@ -896,6 +896,7 @@ const $4acc2f407c169e55$export$653eddfc964b0f8a = new WeakMap();
 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 { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
@@ -909,7 +910,7 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
         onFocusWithin: props.onFocus,
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports))));
+    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c1905b78f6d2f5bf$exports))));
     let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
     let field = state.maxGranularity === "hour" ? "time" : "date";
     let description = state.value ? stringFormatter.format(message, {
@@ -934,8 +935,8 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
     $4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
         ariaLabel: props["aria-label"],
         ariaLabelledBy: [
-            props["aria-labelledby"],
-            labelProps.id
+            labelProps.id,
+            props["aria-labelledby"]
         ].filter(Boolean).join(" ") || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
@@ -960,6 +961,7 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
     }, [
         focusManager
     ]);
+    (0, $IwcIq$reactariautils.useFormReset)(props.inputRef, state.value, state.setValue);
     let domProps = (0, $IwcIq$reactariautils.filterDOMProps)(props);
     return {
         labelProps: {
@@ -976,12 +978,20 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
                 if (props.onKeyUp) props.onKeyUp(e);
             }
         }),
+        inputProps: {
+            type: "hidden",
+            name: props.name,
+            value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps
     };
 }
 function $4acc2f407c169e55$export$4c842f6a241dc825(props, state, ref) {
-    return $4acc2f407c169e55$export$5591b0b878c1a989(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()) || "";
+    return res;
 }
 
 
@@ -993,7 +1003,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $IwcIq$reactariautils.useId)();
     let dialogId = (0, $IwcIq$reactariautils.useId)();
     let fieldId = (0, $IwcIq$reactariautils.useId)();
-    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports))));
+    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c1905b78f6d2f5bf$exports))));
     let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
@@ -1056,12 +1066,14 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             placeholderValue: props.placeholderValue,
             hideTimeZone: props.hideTimeZone,
             hourCycle: props.hourCycle,
+            shouldForceLeadingZeros: props.shouldForceLeadingZeros,
             granularity: props.granularity,
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
             validationState: state.validationState,
-            autoFocus: props.autoFocus
+            autoFocus: props.autoFocus,
+            name: props.name
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,
@@ -1070,14 +1082,14 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             id: buttonId,
             "aria-haspopup": "dialog",
             "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${labelledBy} ${buttonId}`,
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
             "aria-expanded": state.isOpen || undefined,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${labelledBy} ${buttonId}`
+            "aria-labelledby": `${buttonId} ${labelledBy}`
         },
         calendarProps: {
             autoFocus: true,
@@ -1150,7 +1162,7 @@ class $934ac650a0aceb4b$var$DisplayNamesPolyfill {
     }
     constructor(locale){
         this.locale = locale;
-        this.dictionary = new (0, $IwcIq$internationalizedstring.LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports))));
+        this.dictionary = new (0, $IwcIq$internationalizedstring.LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($c1905b78f6d2f5bf$exports))));
     }
 }
 
@@ -1428,7 +1440,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     // This is needed because VoiceOver on iOS does not announce groups.
     let name = segment.type === "literal" ? "" : displayNames.of(segment.type);
     let labelProps = (0, $IwcIq$reactariautils.useLabels)({
-        "aria-label": (ariaLabel ? ariaLabel + " " : "") + name,
+        "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,
@@ -1504,7 +1516,7 @@ function $5c015c6316d1904d$var$commonPrefixLength(strings) {
 
 function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
     var _state_value, _state_value1;
-    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports))));
+    let stringFormatter = (0, $IwcIq$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($c1905b78f6d2f5bf$exports))));
     let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
@@ -1551,6 +1563,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
         hideTimeZone: props.hideTimeZone,
         hourCycle: props.hourCycle,
         granularity: props.granularity,
+        shouldForceLeadingZeros: props.shouldForceLeadingZeros,
         isDisabled: props.isDisabled,
         isReadOnly: props.isReadOnly,
         isRequired: props.isRequired,
@@ -1589,27 +1602,29 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
             id: buttonId,
             "aria-haspopup": "dialog",
             "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${labelledBy} ${buttonId}`,
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
             "aria-expanded": state.isOpen || undefined,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
             id: dialogId,
-            "aria-labelledby": `${labelledBy} ${buttonId}`
+            "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),
-            autoFocus: props.autoFocus
+            autoFocus: props.autoFocus,
+            name: props.startName
         },
         endFieldProps: {
             ...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
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,