@react-aria/datepicker 3.6.0 → 3.8.0

package/dist/import.mjs

@@ -808,12 +808,13 @@ $dfb4eba373ed9493$exports = {
 
 
 function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavigation) {
-    let { direction: direction  } = (0, $cIPI0$useLocale)();
+    let { direction: direction } = (0, $cIPI0$useLocale)();
     let focusManager = (0, $cIPI0$useMemo)(()=>(0, $cIPI0$createFocusManager)(ref), [
         ref
     ]);
     // 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();
@@ -863,7 +864,7 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
         }
         if (target) target.focus();
     };
-    let { pressProps: pressProps  } = (0, $cIPI0$usePress)({
+    let { pressProps: pressProps } = (0, $cIPI0$usePress)({
         preventFocusOnPress: true,
         allowTextSelectionOnPress: true,
         onPressStart (e) {
@@ -887,11 +888,11 @@ 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)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
     });
-    let { focusWithinProps: focusWithinProps  } = (0, $cIPI0$useFocusWithin)({
+    let { focusWithinProps: focusWithinProps } = (0, $cIPI0$useFocusWithin)({
         ...props,
         onBlurWithin: (e)=>{
             state.confirmPlaceholder();
@@ -994,13 +995,13 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let dialogId = (0, $cIPI0$useId)();
     let fieldId = (0, $cIPI0$useId)();
     let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $cIPI0$useField)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
     });
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
     let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
-    let { locale: locale  } = (0, $cIPI0$useLocale)();
+    let { locale: locale } = (0, $cIPI0$useLocale)();
     let date = state.formatValue(locale, {
         month: "long"
     });
@@ -1016,7 +1017,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let focusManager = (0, $cIPI0$useMemo)(()=>(0, $cIPI0$createFocusManager)(ref), [
         ref
     ]);
-    let { focusWithinProps: focusWithinProps  } = (0, $cIPI0$useFocusWithin)({
+    let { focusWithinProps: focusWithinProps } = (0, $cIPI0$useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
         onBlurWithin: props.onBlur,
@@ -1061,7 +1062,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             autoFocus: props.autoFocus,
             name: props.name
         },
@@ -1074,7 +1075,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             "aria-label": stringFormatter.format("calendar"),
             "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen || undefined,
+            "aria-expanded": state.isOpen,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
@@ -1091,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
         }
     };
@@ -1130,7 +1131,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
 
 
 function $3aeceb3a64eb8358$export$d42c60378c8168f8() {
-    let { locale: locale  } = (0, $cIPI0$useLocale)();
+    let { locale: locale } = (0, $cIPI0$useLocale)();
     return (0, $cIPI0$useMemo)(()=>{
         // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField
         // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2
@@ -1160,9 +1161,9 @@ class $3aeceb3a64eb8358$var$DisplayNamesPolyfill {
 
 function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let enteredKeys = (0, $cIPI0$useRef)("");
-    let { locale: locale  } = (0, $cIPI0$useLocale)();
+    let { locale: locale } = (0, $cIPI0$useLocale)();
     let displayNames = (0, $3aeceb3a64eb8358$export$d42c60378c8168f8)();
-    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = (0, $16f0b7bb276bc17e$export$653eddfc964b0f8a).get(state);
+    let { ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, focusManager: focusManager } = (0, $16f0b7bb276bc17e$export$653eddfc964b0f8a).get(state);
     let textValue = segment.isPlaceholder ? "" : segment.text;
     let options = (0, $cIPI0$useMemo)(()=>state.dateFormatter.resolvedOptions(), [
         state.dateFormatter
@@ -1180,7 +1181,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
     } else if (segment.type === "hour" && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
-    let { spinButtonProps: spinButtonProps  } = (0, $cIPI0$useSpinButton)({
+    let { spinButtonProps: spinButtonProps } = (0, $cIPI0$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.
         // https://github.com/dequelabs/axe-core/issues/3505
@@ -1246,7 +1247,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     // Safari dayPeriod option doesn't work...
-    let { startsWith: startsWith  } = (0, $cIPI0$useFilter)({
+    let { startsWith: startsWith } = (0, $cIPI0$useFilter)({
         sensitivity: "base"
     });
     let amPmFormatter = (0, $cIPI0$useDateFormatter)({
@@ -1386,7 +1387,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         }
     });
     (0, $cIPI0$useEvent)(ref, "input", (e)=>{
-        let { inputType: inputType , data: data  } = e;
+        let { inputType: inputType, data: data } = e;
         switch(inputType){
             case "insertCompositionText":
                 // Reset the DOM to how it was in the beforeinput event.
@@ -1423,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.
@@ -1444,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,
@@ -1507,12 +1508,12 @@ 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($dfb4eba373ed9493$exports))));
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $cIPI0$useField)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
         ...props,
         labelElementType: "span"
     });
     let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
-    let { locale: locale  } = (0, $cIPI0$useLocale)();
+    let { locale: locale } = (0, $cIPI0$useLocale)();
     let range = state.formatValue(locale, {
         month: "long"
     });
@@ -1557,10 +1558,10 @@ 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)({
+    let { focusWithinProps: focusWithinProps } = (0, $cIPI0$useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
         onBlurWithin: props.onBlur,
@@ -1594,7 +1595,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
             "aria-label": stringFormatter.format("calendar"),
             "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen || undefined,
+            "aria-expanded": state.isOpen,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
@@ -1629,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

@@ -818,12 +818,13 @@ $c1905b78f6d2f5bf$exports = {
 
 
 function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavigation) {
-    let { direction: direction  } = (0, $IwcIq$reactariai18n.useLocale)();
+    let { direction: direction } = (0, $IwcIq$reactariai18n.useLocale)();
     let focusManager = (0, $IwcIq$react.useMemo)(()=>(0, $IwcIq$reactariafocus.createFocusManager)(ref), [
         ref
     ]);
     // 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();
@@ -873,7 +874,7 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
         }
         if (target) target.focus();
     };
-    let { pressProps: pressProps  } = (0, $IwcIq$reactariainteractions.usePress)({
+    let { pressProps: pressProps } = (0, $IwcIq$reactariainteractions.usePress)({
         preventFocusOnPress: true,
         allowTextSelectionOnPress: true,
         onPressStart (e) {
@@ -897,11 +898,11 @@ 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)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
     });
-    let { focusWithinProps: focusWithinProps  } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
+    let { focusWithinProps: focusWithinProps } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
         ...props,
         onBlurWithin: (e)=>{
             state.confirmPlaceholder();
@@ -1004,13 +1005,13 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let dialogId = (0, $IwcIq$reactariautils.useId)();
     let fieldId = (0, $IwcIq$reactariautils.useId)();
     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)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
     });
     let groupProps = (0, $715562ad3b4cced4$export$4a931266a3838b86)(state, ref);
     let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
-    let { locale: locale  } = (0, $IwcIq$reactariai18n.useLocale)();
+    let { locale: locale } = (0, $IwcIq$reactariai18n.useLocale)();
     let date = state.formatValue(locale, {
         month: "long"
     });
@@ -1026,7 +1027,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let focusManager = (0, $IwcIq$react.useMemo)(()=>(0, $IwcIq$reactariafocus.createFocusManager)(ref), [
         ref
     ]);
-    let { focusWithinProps: focusWithinProps  } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
+    let { focusWithinProps: focusWithinProps } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
         onBlurWithin: props.onBlur,
@@ -1071,7 +1072,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             isRequired: props.isRequired,
-            validationState: state.validationState,
+            isInvalid: state.isInvalid,
             autoFocus: props.autoFocus,
             name: props.name
         },
@@ -1084,7 +1085,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             "aria-label": stringFormatter.format("calendar"),
             "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen || undefined,
+            "aria-expanded": state.isOpen,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
@@ -1101,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
         }
     };
@@ -1140,7 +1141,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
 
 
 function $934ac650a0aceb4b$export$d42c60378c8168f8() {
-    let { locale: locale  } = (0, $IwcIq$reactariai18n.useLocale)();
+    let { locale: locale } = (0, $IwcIq$reactariai18n.useLocale)();
     return (0, $IwcIq$react.useMemo)(()=>{
         // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField
         // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2
@@ -1170,9 +1171,9 @@ class $934ac650a0aceb4b$var$DisplayNamesPolyfill {
 
 function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let enteredKeys = (0, $IwcIq$react.useRef)("");
-    let { locale: locale  } = (0, $IwcIq$reactariai18n.useLocale)();
+    let { locale: locale } = (0, $IwcIq$reactariai18n.useLocale)();
     let displayNames = (0, $934ac650a0aceb4b$export$d42c60378c8168f8)();
-    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = (0, $4acc2f407c169e55$export$653eddfc964b0f8a).get(state);
+    let { ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, focusManager: focusManager } = (0, $4acc2f407c169e55$export$653eddfc964b0f8a).get(state);
     let textValue = segment.isPlaceholder ? "" : segment.text;
     let options = (0, $IwcIq$react.useMemo)(()=>state.dateFormatter.resolvedOptions(), [
         state.dateFormatter
@@ -1190,7 +1191,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
     } else if (segment.type === "hour" && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
-    let { spinButtonProps: spinButtonProps  } = (0, $IwcIq$reactariaspinbutton.useSpinButton)({
+    let { spinButtonProps: spinButtonProps } = (0, $IwcIq$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.
         // https://github.com/dequelabs/axe-core/issues/3505
@@ -1256,7 +1257,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     // Safari dayPeriod option doesn't work...
-    let { startsWith: startsWith  } = (0, $IwcIq$reactariai18n.useFilter)({
+    let { startsWith: startsWith } = (0, $IwcIq$reactariai18n.useFilter)({
         sensitivity: "base"
     });
     let amPmFormatter = (0, $IwcIq$reactariai18n.useDateFormatter)({
@@ -1396,7 +1397,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         }
     });
     (0, $IwcIq$reactariautils.useEvent)(ref, "input", (e)=>{
-        let { inputType: inputType , data: data  } = e;
+        let { inputType: inputType, data: data } = e;
         switch(inputType){
             case "insertCompositionText":
                 // Reset the DOM to how it was in the beforeinput event.
@@ -1433,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.
@@ -1454,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,
@@ -1517,12 +1518,12 @@ 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($c1905b78f6d2f5bf$exports))));
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $IwcIq$reactarialabel.useField)({
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $IwcIq$reactarialabel.useField)({
         ...props,
         labelElementType: "span"
     });
     let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
-    let { locale: locale  } = (0, $IwcIq$reactariai18n.useLocale)();
+    let { locale: locale } = (0, $IwcIq$reactariai18n.useLocale)();
     let range = state.formatValue(locale, {
         month: "long"
     });
@@ -1567,10 +1568,10 @@ 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)({
+    let { focusWithinProps: focusWithinProps } = (0, $IwcIq$reactariainteractions.useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
         onBlurWithin: props.onBlur,
@@ -1604,7 +1605,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
             "aria-label": stringFormatter.format("calendar"),
             "aria-labelledby": `${buttonId} ${labelledBy}`,
             "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen || undefined,
+            "aria-expanded": state.isOpen,
             onPress: ()=>state.setOpen(true)
         },
         dialogProps: {
@@ -1639,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
         }
     };