@react-spectrum/datepicker 3.1.2 → 3.3.0

package/dist/module.js

@@ -10,7 +10,7 @@ import {mergeProps as $aayOp$mergeProps, useLayoutEffect as $aayOp$useLayoutEffe
 import $aayOp$react, {useRef as $aayOp$useRef, useCallback as $aayOp$useCallback, useMemo as $aayOp$useMemo, useState as $aayOp$useState, useImperativeHandle as $aayOp$useImperativeHandle} from "react";
 import {useDatePicker as $aayOp$useDatePicker, useDateField as $aayOp$useDateField, useDateSegment as $aayOp$useDateSegment, useTimeField as $aayOp$useTimeField, useDisplayNames as $aayOp$useDisplayNames, useDateRangePicker as $aayOp$useDateRangePicker} from "@react-aria/datepicker";
 import {useDatePickerState as $aayOp$useDatePickerState, useDateFieldState as $aayOp$useDateFieldState, useTimeFieldState as $aayOp$useTimeFieldState, useDateRangePickerState as $aayOp$useDateRangePickerState} from "@react-stately/datepicker";
-import {useFocusRing as $aayOp$useFocusRing, FocusRing as $aayOp$FocusRing, createFocusManager as $aayOp$createFocusManager} from "@react-aria/focus";
+import {useFocusRing as $aayOp$useFocusRing, createFocusManager as $aayOp$createFocusManager} from "@react-aria/focus";
 import {useHover as $aayOp$useHover} from "@react-aria/interactions";
 import {useLocale as $aayOp$useLocale, useLocalizedStringFormatter as $aayOp$useLocalizedStringFormatter, useDateFormatter as $aayOp$useDateFormatter} from "@react-aria/i18n";
 import {useProviderProps as $aayOp$useProviderProps, useProvider as $aayOp$useProvider} from "@react-spectrum/provider";
@@ -188,11 +188,11 @@ function $d2bb88c82604b25f$export$34dc4cfa15ead1(props) {
 
 
 
-
 var $c14528ddc146317f$exports = {};
 
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-input", () => $c14528ddc146317f$export$1ac009feb2b0bd0c, (v) => $c14528ddc146317f$export$1ac009feb2b0bd0c = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield", () => $c14528ddc146317f$export$2c8a10299d8b3418, (v) => $c14528ddc146317f$export$2c8a10299d8b3418 = v);
+$parcel$export($c14528ddc146317f$exports, "focus-ring", () => $c14528ddc146317f$export$f39a09f249340e2a, (v) => $c14528ddc146317f$export$f39a09f249340e2a = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--quiet", () => $c14528ddc146317f$export$bffd5e3d61a81737, (v) => $c14528ddc146317f$export$bffd5e3d61a81737 = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--multiline", () => $c14528ddc146317f$export$9699f1c538a448a0, (v) => $c14528ddc146317f$export$9699f1c538a448a0 = v);
 $parcel$export($c14528ddc146317f$exports, "is-placeholder", () => $c14528ddc146317f$export$e5b2f5233e4e5194, (v) => $c14528ddc146317f$export$e5b2f5233e4e5194 = v);
@@ -201,15 +201,16 @@ $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--valid", () => $c1
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--invalid", () => $c14528ddc146317f$export$58e50b10d30123df, (v) => $c14528ddc146317f$export$58e50b10d30123df = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--loadable", () => $c14528ddc146317f$export$14fd30fea6f1348c, (v) => $c14528ddc146317f$export$14fd30fea6f1348c = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper", () => $c14528ddc146317f$export$dd1165e0e6012973, (v) => $c14528ddc146317f$export$dd1165e0e6012973 = v);
+$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper--quiet", () => $c14528ddc146317f$export$9fcb3d6af94a9d12, (v) => $c14528ddc146317f$export$9fcb3d6af94a9d12 = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-validationIcon", () => $c14528ddc146317f$export$cf0ead5b44db0da3, (v) => $c14528ddc146317f$export$cf0ead5b44db0da3 = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-icon", () => $c14528ddc146317f$export$222d1ccd1870be1d, (v) => $c14528ddc146317f$export$222d1ccd1870be1d = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-inputIcon", () => $c14528ddc146317f$export$c1cdcaa5fe76a871, (v) => $c14528ddc146317f$export$c1cdcaa5fe76a871 = v);
 $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-circleLoader", () => $c14528ddc146317f$export$82a249fb4d6127, (v) => $c14528ddc146317f$export$82a249fb4d6127 = v);
 $parcel$export($c14528ddc146317f$exports, "is-focused", () => $c14528ddc146317f$export$e7dc768d35940237, (v) => $c14528ddc146317f$export$e7dc768d35940237 = v);
-$parcel$export($c14528ddc146317f$exports, "focus-ring", () => $c14528ddc146317f$export$f39a09f249340e2a, (v) => $c14528ddc146317f$export$f39a09f249340e2a = v);
 $parcel$export($c14528ddc146317f$exports, "is-disabled", () => $c14528ddc146317f$export$d35bc1e505d1ebbf, (v) => $c14528ddc146317f$export$d35bc1e505d1ebbf = v);
 var $c14528ddc146317f$export$1ac009feb2b0bd0c;
 var $c14528ddc146317f$export$2c8a10299d8b3418;
+var $c14528ddc146317f$export$f39a09f249340e2a;
 var $c14528ddc146317f$export$bffd5e3d61a81737;
 var $c14528ddc146317f$export$9699f1c538a448a0;
 var $c14528ddc146317f$export$e5b2f5233e4e5194;
@@ -218,15 +219,16 @@ var $c14528ddc146317f$export$c2abbc3f970170b7;
 var $c14528ddc146317f$export$58e50b10d30123df;
 var $c14528ddc146317f$export$14fd30fea6f1348c;
 var $c14528ddc146317f$export$dd1165e0e6012973;
+var $c14528ddc146317f$export$9fcb3d6af94a9d12;
 var $c14528ddc146317f$export$cf0ead5b44db0da3;
 var $c14528ddc146317f$export$222d1ccd1870be1d;
 var $c14528ddc146317f$export$c1cdcaa5fe76a871;
 var $c14528ddc146317f$export$82a249fb4d6127;
 var $c14528ddc146317f$export$e7dc768d35940237;
-var $c14528ddc146317f$export$f39a09f249340e2a;
 var $c14528ddc146317f$export$d35bc1e505d1ebbf;
 $c14528ddc146317f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
 $c14528ddc146317f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
+$c14528ddc146317f$export$f39a09f249340e2a = "focus-ring_73bc77";
 $c14528ddc146317f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
 $c14528ddc146317f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
 $c14528ddc146317f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
@@ -235,18 +237,19 @@ $c14528ddc146317f$export$c2abbc3f970170b7 = "spectrum-Textfield--valid_73bc77";
 $c14528ddc146317f$export$58e50b10d30123df = "spectrum-Textfield--invalid_73bc77";
 $c14528ddc146317f$export$14fd30fea6f1348c = "spectrum-Textfield--loadable_73bc77";
 $c14528ddc146317f$export$dd1165e0e6012973 = "spectrum-Textfield-wrapper_73bc77";
+$c14528ddc146317f$export$9fcb3d6af94a9d12 = "spectrum-Textfield-wrapper--quiet_73bc77";
 $c14528ddc146317f$export$cf0ead5b44db0da3 = "spectrum-Textfield-validationIcon_73bc77";
 $c14528ddc146317f$export$222d1ccd1870be1d = "spectrum-Textfield-icon_73bc77";
 $c14528ddc146317f$export$c1cdcaa5fe76a871 = "spectrum-Textfield-inputIcon_73bc77";
 $c14528ddc146317f$export$82a249fb4d6127 = "spectrum-Textfield-circleLoader_73bc77";
 $c14528ddc146317f$export$e7dc768d35940237 = "is-focused_73bc77";
-$c14528ddc146317f$export$f39a09f249340e2a = "focus-ring_73bc77";
 $c14528ddc146317f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
 
 
+
 function $79348162c55d687f$var$Input(props, ref) {
     let inputRef = $aayOp$useRef(null);
-    let { isDisabled: isDisabled , isQuiet: isQuiet , inputClassName: inputClassName , validationState: validationState , children: children , fieldProps: fieldProps , className: className , style: style  } = props;
+    let { isDisabled: isDisabled , isQuiet: isQuiet , inputClassName: inputClassName , validationState: validationState , children: children , fieldProps: fieldProps , className: className , style: style , disableFocusRing: disableFocusRing  } = props;
     // Reserve padding for the error icon when the width of the input is unconstrained.
     // When constrained, don't reserve space because adding it only when invalid will
     // not cause a layout shift.
@@ -286,36 +289,37 @@ function $79348162c55d687f$var$Input(props, ref) {
     // use a resize observer on a parent element, but it's hard to know _what_
     // parent element.
     $aayOp$useEvent($aayOp$useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);
-    let isInvalid = validationState === 'invalid';
+    let { focusProps: focusProps , isFocusVisible: isFocusVisible , isFocused: isFocused  } = $aayOp$useFocusRing({
+        isTextInput: true,
+        within: true
+    });
+    let isInvalid = validationState === 'invalid' && !isDisabled;
     let textfieldClass = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'spectrum-Textfield', {
         'spectrum-Textfield--invalid': isInvalid,
-        'spectrum-Textfield--valid': validationState === 'valid',
-        'spectrum-Textfield--quiet': isQuiet
+        'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+        'spectrum-Textfield--quiet': isQuiet,
+        'focus-ring': isFocusVisible && !disableFocusRing
     }, $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($465eb3a688ef3440$exports)), 'react-spectrum-Datepicker-field'), className);
     let inputClass = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'spectrum-Textfield-input', {
         'is-disabled': isDisabled,
-        'is-invalid': isInvalid
+        'is-invalid': isInvalid,
+        'is-focused': isFocused
     }, reservePadding1 && $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($465eb3a688ef3440$exports)), 'react-spectrum-Datepicker-input'), inputClassName);
     let iconClass = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'spectrum-Textfield-validationIcon');
     let validationIcon = null;
-    if (validationState === 'invalid') validationIcon = /*#__PURE__*/ $aayOp$react.createElement($aayOp$spectrumiconsuiAlertMedium, {
+    if (validationState === 'invalid' && !isDisabled) validationIcon = /*#__PURE__*/ $aayOp$react.createElement($aayOp$spectrumiconsuiAlertMedium, {
         "data-testid": "invalid-icon",
         UNSAFE_className: iconClass
     });
-    else if (validationState === 'valid') validationIcon = /*#__PURE__*/ $aayOp$react.createElement($aayOp$spectrumiconsuiCheckmarkMedium, {
+    else if (validationState === 'valid' && !isDisabled) validationIcon = /*#__PURE__*/ $aayOp$react.createElement($aayOp$spectrumiconsuiCheckmarkMedium, {
         "data-testid": "valid-icon",
         UNSAFE_className: iconClass
     });
     return(/*#__PURE__*/ $aayOp$react.createElement("div", {
         role: "presentation",
-        ...fieldProps,
+        ...$aayOp$mergeProps(fieldProps, focusProps),
         className: textfieldClass,
         style: style
-    }, /*#__PURE__*/ $aayOp$react.createElement($aayOp$FocusRing, {
-        focusClass: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'is-focused'),
-        focusRingClass: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'focus-ring'),
-        isTextInput: true,
-        within: true
     }, /*#__PURE__*/ $aayOp$react.createElement("div", {
         role: "presentation",
         className: inputClass
@@ -323,7 +327,7 @@ function $79348162c55d687f$var$Input(props, ref) {
         role: "presentation",
         className: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($465eb3a688ef3440$exports)), 'react-spectrum-Datepicker-inputContents'),
         ref: $aayOp$mergeRefs(ref, inputRef)
-    }, children))), validationIcon));
+    }, children)), validationIcon));
 }
 const $79348162c55d687f$export$f5b8910cec6cf069 = /*#__PURE__*/ $aayOp$react.forwardRef($79348162c55d687f$var$Input);
 
@@ -645,10 +649,11 @@ $71a986712918c3de$exports = {
 var $8fb52a80fe52b1c7$exports = {};
 
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup", () => $8fb52a80fe52b1c7$export$5be359c1227eedcb, (v) => $8fb52a80fe52b1c7$export$5be359c1227eedcb = v);
+$parcel$export($8fb52a80fe52b1c7$exports, "focus-ring", () => $8fb52a80fe52b1c7$export$f39a09f249340e2a, (v) => $8fb52a80fe52b1c7$export$f39a09f249340e2a = v);
+$parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup--quiet", () => $8fb52a80fe52b1c7$export$ebf265ffc062029b, (v) => $8fb52a80fe52b1c7$export$ebf265ffc062029b = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-FieldButton", () => $8fb52a80fe52b1c7$export$a024c99ecf6b5741, (v) => $8fb52a80fe52b1c7$export$a024c99ecf6b5741 = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "is-disabled", () => $8fb52a80fe52b1c7$export$d35bc1e505d1ebbf, (v) => $8fb52a80fe52b1c7$export$d35bc1e505d1ebbf = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup--invalid", () => $8fb52a80fe52b1c7$export$3b48509739a9cda0, (v) => $8fb52a80fe52b1c7$export$3b48509739a9cda0 = v);
-$parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup--quiet", () => $8fb52a80fe52b1c7$export$ebf265ffc062029b, (v) => $8fb52a80fe52b1c7$export$ebf265ffc062029b = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup-field", () => $8fb52a80fe52b1c7$export$ea77459595e26bec, (v) => $8fb52a80fe52b1c7$export$ea77459595e26bec = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup-input-validationIcon", () => $8fb52a80fe52b1c7$export$f7ab13ee113f4884, (v) => $8fb52a80fe52b1c7$export$f7ab13ee113f4884 = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-InputGroup-input-circleLoader", () => $8fb52a80fe52b1c7$export$dcc9e00cdad967fa, (v) => $8fb52a80fe52b1c7$export$dcc9e00cdad967fa = v);
@@ -663,14 +668,14 @@ $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-Datepicker--rangeDash", () =
 $parcel$export($8fb52a80fe52b1c7$exports, "is-focused", () => $8fb52a80fe52b1c7$export$e7dc768d35940237, (v) => $8fb52a80fe52b1c7$export$e7dc768d35940237 = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-Datepicker-focusRing", () => $8fb52a80fe52b1c7$export$eb262b15b9261fde, (v) => $8fb52a80fe52b1c7$export$eb262b15b9261fde = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "is-hovered", () => $8fb52a80fe52b1c7$export$b8813cd5d7824ce7, (v) => $8fb52a80fe52b1c7$export$b8813cd5d7824ce7 = v);
-$parcel$export($8fb52a80fe52b1c7$exports, "focus-ring", () => $8fb52a80fe52b1c7$export$f39a09f249340e2a, (v) => $8fb52a80fe52b1c7$export$f39a09f249340e2a = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "is-selected", () => $8fb52a80fe52b1c7$export$1e0fb04f31d3c22a, (v) => $8fb52a80fe52b1c7$export$1e0fb04f31d3c22a = v);
 $parcel$export($8fb52a80fe52b1c7$exports, "spectrum-FieldButton--invalid", () => $8fb52a80fe52b1c7$export$c9f503f672e8a3c1, (v) => $8fb52a80fe52b1c7$export$c9f503f672e8a3c1 = v);
 var $8fb52a80fe52b1c7$export$5be359c1227eedcb;
+var $8fb52a80fe52b1c7$export$f39a09f249340e2a;
+var $8fb52a80fe52b1c7$export$ebf265ffc062029b;
 var $8fb52a80fe52b1c7$export$a024c99ecf6b5741;
 var $8fb52a80fe52b1c7$export$d35bc1e505d1ebbf;
 var $8fb52a80fe52b1c7$export$3b48509739a9cda0;
-var $8fb52a80fe52b1c7$export$ebf265ffc062029b;
 var $8fb52a80fe52b1c7$export$ea77459595e26bec;
 var $8fb52a80fe52b1c7$export$f7ab13ee113f4884;
 var $8fb52a80fe52b1c7$export$dcc9e00cdad967fa;
@@ -685,14 +690,14 @@ var $8fb52a80fe52b1c7$export$202113e883898dc;
 var $8fb52a80fe52b1c7$export$e7dc768d35940237;
 var $8fb52a80fe52b1c7$export$eb262b15b9261fde;
 var $8fb52a80fe52b1c7$export$b8813cd5d7824ce7;
-var $8fb52a80fe52b1c7$export$f39a09f249340e2a;
 var $8fb52a80fe52b1c7$export$1e0fb04f31d3c22a;
 var $8fb52a80fe52b1c7$export$c9f503f672e8a3c1;
 $8fb52a80fe52b1c7$export$5be359c1227eedcb = "spectrum-InputGroup_a0942f";
+$8fb52a80fe52b1c7$export$f39a09f249340e2a = "focus-ring_a0942f";
+$8fb52a80fe52b1c7$export$ebf265ffc062029b = "spectrum-InputGroup--quiet_a0942f";
 $8fb52a80fe52b1c7$export$a024c99ecf6b5741 = "spectrum-FieldButton_a0942f";
 $8fb52a80fe52b1c7$export$d35bc1e505d1ebbf = "is-disabled_a0942f";
 $8fb52a80fe52b1c7$export$3b48509739a9cda0 = "spectrum-InputGroup--invalid_a0942f";
-$8fb52a80fe52b1c7$export$ebf265ffc062029b = "spectrum-InputGroup--quiet_a0942f";
 $8fb52a80fe52b1c7$export$ea77459595e26bec = "spectrum-InputGroup-field_a0942f";
 $8fb52a80fe52b1c7$export$f7ab13ee113f4884 = "spectrum-InputGroup-input-validationIcon_a0942f";
 $8fb52a80fe52b1c7$export$dcc9e00cdad967fa = "spectrum-InputGroup-input-circleLoader_a0942f";
@@ -707,7 +712,6 @@ $8fb52a80fe52b1c7$export$202113e883898dc = "spectrum-Datepicker--rangeDash_a0942
 $8fb52a80fe52b1c7$export$e7dc768d35940237 = "is-focused_a0942f";
 $8fb52a80fe52b1c7$export$eb262b15b9261fde = "spectrum-Datepicker-focusRing_a0942f";
 $8fb52a80fe52b1c7$export$b8813cd5d7824ce7 = "is-hovered_a0942f";
-$8fb52a80fe52b1c7$export$f39a09f249340e2a = "focus-ring_a0942f";
 $8fb52a80fe52b1c7$export$1e0fb04f31d3c22a = "is-selected_a0942f";
 $8fb52a80fe52b1c7$export$c9f503f672e8a3c1 = "spectrum-FieldButton--invalid_a0942f";
 
@@ -795,7 +799,8 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         ...props,
         locale: locale
     });
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $aayOp$useTimeField(props, state, domRef);
+    let inputRef = $aayOp$useRef(null);
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $aayOp$useTimeField(props, state, inputRef);
     return(/*#__PURE__*/ $aayOp$react.createElement($aayOp$Field, {
         ...props,
         ref: domRef,
@@ -806,6 +811,7 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         validationState: state.validationState,
         UNSAFE_className: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($465eb3a688ef3440$exports)), 'react-spectrum-TimeField-fieldWrapper')
     }, /*#__PURE__*/ $aayOp$react.createElement($79348162c55d687f$export$f5b8910cec6cf069, {
+        ref: inputRef,
         fieldProps: fieldProps,
         isDisabled: isDisabled,
         isQuiet: isQuiet,
@@ -863,7 +869,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
     });
     let className = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup', {
         'spectrum-InputGroup--quiet': isQuiet,
-        'spectrum-InputGroup--invalid': state.validationState === 'invalid',
+        'spectrum-InputGroup--invalid': state.validationState === 'invalid' && !isDisabled,
         'is-disabled': isDisabled,
         'is-hovered': isHovered,
         'is-focused': isFocused,
@@ -871,7 +877,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
     });
     let fieldClassName = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup-input', {
         'is-disabled': isDisabled,
-        'is-invalid': state.validationState === 'invalid'
+        'is-invalid': state.validationState === 'invalid' && !isDisabled
     });
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
@@ -903,7 +909,8 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
         isQuiet: isQuiet,
         validationState: state.validationState,
         className: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup-field'),
-        inputClassName: fieldClassName
+        inputClassName: fieldClassName,
+        disableFocusRing: true
     }, /*#__PURE__*/ $aayOp$react.createElement($d2bb88c82604b25f$export$34dc4cfa15ead1, {
         ...fieldProps,
         "data-testid": "date-field",
@@ -1006,7 +1013,7 @@ function $cb301300011a98f7$var$DateRangePicker(props, ref) {
     });
     let className = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup', {
         'spectrum-InputGroup--quiet': isQuiet,
-        'spectrum-InputGroup--invalid': state.validationState === 'invalid',
+        'spectrum-InputGroup--invalid': state.validationState === 'invalid' && !isDisabled,
         'is-disabled': isDisabled,
         'is-hovered': isHovered,
         'is-focused': isFocused,
@@ -1014,7 +1021,7 @@ function $cb301300011a98f7$var$DateRangePicker(props, ref) {
     });
     let fieldClassName = $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup-input', {
         'is-disabled': isDisabled,
-        'is-invalid': state.validationState === 'invalid'
+        'is-invalid': state.validationState === 'invalid' && !isDisabled
     });
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
@@ -1046,7 +1053,8 @@ function $cb301300011a98f7$var$DateRangePicker(props, ref) {
         isQuiet: isQuiet,
         validationState: state.validationState,
         className: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($8fb52a80fe52b1c7$exports)), 'spectrum-InputGroup-field'),
-        inputClassName: fieldClassName
+        inputClassName: fieldClassName,
+        disableFocusRing: true
     }, /*#__PURE__*/ $aayOp$react.createElement($d2bb88c82604b25f$export$34dc4cfa15ead1, {
         ...startFieldProps,
         "data-testid": "start-date",
@@ -1149,7 +1157,8 @@ function $0129798af6791690$var$DateField(props, ref) {
         locale: locale,
         createCalendar: $aayOp$createCalendar
     });
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $aayOp$useDateField(props, state, domRef);
+    let inputRef = $aayOp$useRef(null);
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $aayOp$useDateField(props, state, inputRef);
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = $04e96200274b03de$export$322f4580ccd8dde6(props);
@@ -1165,6 +1174,7 @@ function $0129798af6791690$var$DateField(props, ref) {
         validationState: state.validationState,
         UNSAFE_className: $aayOp$classNames((/*@__PURE__*/$parcel$interopDefault($465eb3a688ef3440$exports)), 'react-spectrum-Datepicker-fieldWrapper')
     }, /*#__PURE__*/ $aayOp$react.createElement($79348162c55d687f$export$f5b8910cec6cf069, {
+        ref: inputRef,
         fieldProps: fieldProps,
         isDisabled: isDisabled,
         isQuiet: isQuiet,