@react-aria/datepicker 3.5.0 → 3.7.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";
@@ -814,6 +814,7 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
     ]);
     // Open the popover on alt + arrow down
     let onKeyDown = (e)=>{
+        if (!e.currentTarget.contains(e.target)) return;
         if (e.altKey && (e.key === "ArrowDown" || e.key === "ArrowUp") && "setOpen" in state) {
             e.preventDefault();
             e.stopPropagation();
@@ -886,6 +887,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"
@@ -950,6 +952,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 +969,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;
 }
 
 
@@ -1051,8 +1062,9 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
-            validationState: state.validationState,
-            autoFocus: props.autoFocus
+            isInvalid: state.isInvalid,
+            autoFocus: props.autoFocus,
+            name: props.name
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,
@@ -1080,7 +1092,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             isReadOnly: props.isReadOnly,
             isDateUnavailable: props.isDateUnavailable,
             defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             errorMessage: props.errorMessage
         }
     };
@@ -1412,7 +1424,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let firstSegment = (0, $cIPI0$useMemo)(()=>state.segments.find((s)=>s.isEditable), [
         state.segments
     ]);
-    if (segment !== firstSegment && state.validationState !== "invalid") ariaDescribedBy = undefined;
+    if (segment !== firstSegment && !state.isInvalid) ariaDescribedBy = undefined;
     let id = (0, $cIPI0$useId)();
     let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
     // Prepend the label passed from the field to each segment name.
@@ -1433,7 +1445,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         segmentProps: (0, $cIPI0$mergeProps)(spinButtonProps, labelProps, {
             id: id,
             ...touchPropOverrides,
-            "aria-invalid": state.validationState === "invalid" ? "true" : undefined,
+            "aria-invalid": state.isInvalid ? "true" : undefined,
             "aria-describedby": ariaDescribedBy,
             "aria-readonly": state.isReadOnly || !segment.isEditable ? "true" : undefined,
             "data-placeholder": segment.isPlaceholder || undefined,
@@ -1546,7 +1558,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
         isDisabled: props.isDisabled,
         isReadOnly: props.isReadOnly,
         isRequired: props.isRequired,
-        validationState: state.validationState
+        isInvalid: state.isInvalid
     };
     let domProps = (0, $cIPI0$filterDOMProps)(props);
     let { focusWithinProps: focusWithinProps  } = (0, $cIPI0$useFocusWithin)({
@@ -1595,13 +1607,15 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             ...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,
@@ -1616,7 +1630,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             isDateUnavailable: props.isDateUnavailable,
             allowsNonContiguousRanges: props.allowsNonContiguousRanges,
             defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             errorMessage: props.errorMessage
         }
     };

package/dist/main.js

@@ -824,6 +824,7 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
     ]);
     // Open the popover on alt + arrow down
     let onKeyDown = (e)=>{
+        if (!e.currentTarget.contains(e.target)) return;
         if (e.altKey && (e.key === "ArrowDown" || e.key === "ArrowUp") && "setOpen" in state) {
             e.preventDefault();
             e.stopPropagation();
@@ -896,6 +897,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"
@@ -960,6 +962,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 +979,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;
 }
 
 
@@ -1061,8 +1072,9 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
-            validationState: state.validationState,
-            autoFocus: props.autoFocus
+            isInvalid: state.isInvalid,
+            autoFocus: props.autoFocus,
+            name: props.name
         },
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,
@@ -1090,7 +1102,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             isReadOnly: props.isReadOnly,
             isDateUnavailable: props.isDateUnavailable,
             defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             errorMessage: props.errorMessage
         }
     };
@@ -1422,7 +1434,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let firstSegment = (0, $IwcIq$react.useMemo)(()=>state.segments.find((s)=>s.isEditable), [
         state.segments
     ]);
-    if (segment !== firstSegment && state.validationState !== "invalid") ariaDescribedBy = undefined;
+    if (segment !== firstSegment && !state.isInvalid) ariaDescribedBy = undefined;
     let id = (0, $IwcIq$reactariautils.useId)();
     let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
     // Prepend the label passed from the field to each segment name.
@@ -1443,7 +1455,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         segmentProps: (0, $IwcIq$reactariautils.mergeProps)(spinButtonProps, labelProps, {
             id: id,
             ...touchPropOverrides,
-            "aria-invalid": state.validationState === "invalid" ? "true" : undefined,
+            "aria-invalid": state.isInvalid ? "true" : undefined,
             "aria-describedby": ariaDescribedBy,
             "aria-readonly": state.isReadOnly || !segment.isEditable ? "true" : undefined,
             "data-placeholder": segment.isPlaceholder || undefined,
@@ -1556,7 +1568,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
         isDisabled: props.isDisabled,
         isReadOnly: props.isReadOnly,
         isRequired: props.isRequired,
-        validationState: state.validationState
+        isInvalid: state.isInvalid
     };
     let domProps = (0, $IwcIq$reactariautils.filterDOMProps)(props);
     let { focusWithinProps: focusWithinProps  } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
@@ -1605,13 +1617,15 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
             ...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,
@@ -1626,7 +1640,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
             isDateUnavailable: props.isDateUnavailable,
             allowsNonContiguousRanges: props.allowsNonContiguousRanges,
             defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             errorMessage: props.errorMessage
         }
     };