@react-spectrum/autocomplete 3.0.0-alpha.22 → 3.0.0-alpha.24

package/dist/module.js

@@ -3,16 +3,17 @@ import {Item as $dc667e3abdbeb6b2$re_export$Item, Section as $dc667e3abdbeb6b2$r
 import {useIsMobileDevice as $aQREU$useIsMobileDevice, useUnwrapDOMRef as $aQREU$useUnwrapDOMRef, useFocusableRef as $aQREU$useFocusableRef, useResizeObserver as $aQREU$useResizeObserver, classNames as $aQREU$classNames} from "@react-spectrum/utils";
 import {ClearButton as $aQREU$ClearButton} from "@react-spectrum/button";
 import {Field as $aQREU$Field} from "@react-spectrum/label";
-import {useLayoutEffect as $aQREU$useLayoutEffect, filterDOMProps as $aQREU$filterDOMProps, mergeProps as $aQREU$mergeProps, useId as $aQREU$useId} from "@react-aria/utils";
+import {useLayoutEffect as $aQREU$useLayoutEffect, filterDOMProps as $aQREU$filterDOMProps, useFormReset as $aQREU$useFormReset, mergeProps as $aQREU$mergeProps, useId as $aQREU$useId} from "@react-aria/utils";
 import {FocusRing as $aQREU$FocusRing, useFocusRing as $aQREU$useFocusRing, focusSafely as $aQREU$focusSafely, FocusScope as $aQREU$FocusScope} from "@react-aria/focus";
 import {useListBoxLayout as $aQREU$useListBoxLayout, ListBoxBase as $aQREU$ListBoxBase} from "@react-spectrum/listbox";
 import $aQREU$spectrumiconsuiMagnifier from "@spectrum-icons/ui/Magnifier";
 import {Popover as $aQREU$Popover, Tray as $aQREU$Tray} from "@react-spectrum/overlays";
 import {ProgressCircle as $aQREU$ProgressCircle} from "@react-spectrum/progress";
-import $aQREU$react, {useRef as $aQREU$useRef, useState as $aQREU$useState, useCallback as $aQREU$useCallback, useEffect as $aQREU$useEffect, forwardRef as $aQREU$forwardRef} from "react";
+import $aQREU$react, {useRef as $aQREU$useRef, useCallback as $aQREU$useCallback, useState as $aQREU$useState, useEffect as $aQREU$useEffect, forwardRef as $aQREU$forwardRef} from "react";
 import {TextFieldBase as $aQREU$TextFieldBase} from "@react-spectrum/textfield";
 import {useComboBoxState as $aQREU$useComboBoxState} from "@react-stately/combobox";
 import {useLocalizedStringFormatter as $aQREU$useLocalizedStringFormatter, useFilter as $aQREU$useFilter} from "@react-aria/i18n";
+import {useFormProps as $aQREU$useFormProps} from "@react-spectrum/form";
 import {useHover as $aQREU$useHover, setInteractionModality as $aQREU$setInteractionModality} from "@react-aria/interactions";
 import {useProviderProps as $aQREU$useProviderProps, useProvider as $aQREU$useProvider} from "@react-spectrum/provider";
 import {useSearchAutocomplete as $aQREU$useSearchAutocomplete} from "@react-aria/autocomplete";
@@ -21,11 +22,14 @@ import $aQREU$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkM
 import {useOverlayTrigger as $aQREU$useOverlayTrigger, DismissButton as $aQREU$DismissButton} from "@react-aria/overlays";
 import {useButton as $aQREU$useButton} from "@react-aria/button";
 import {useDialog as $aQREU$useDialog} from "@react-aria/dialog";
-import {useLabel as $aQREU$useLabel} from "@react-aria/label";
+import {useField as $aQREU$useField} from "@react-aria/label";
+import {useFormValidation as $aQREU$useFormValidation} from "@react-aria/form";
+
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -58,28 +62,28 @@ function $parcel$export(e, n, v, s) {
 var $67773d1975e0a845$exports = {};
 var $024cf3aa492e9082$exports = {};
 $024cf3aa492e9082$exports = {
-    "clear": `مسح`,
-    "invalid": `(غير صالح)`,
-    "loading": `جارٍ التحميل...`,
-    "noResults": `لا توجد نتائج`
+    "clear": `\u{645}\u{633}\u{62D}`,
+    "invalid": `(\u{63A}\u{64A}\u{631} \u{635}\u{627}\u{644}\u{62D})`,
+    "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`,
+    "noResults": `\u{644}\u{627} \u{62A}\u{648}\u{62C}\u{62F} \u{646}\u{62A}\u{627}\u{626}\u{62C}`
 };
 
 
 var $b1478ef78bbb453c$exports = {};
 $b1478ef78bbb453c$exports = {
-    "clear": `Изчисти`,
-    "invalid": `(невалиден)`,
-    "loading": `Зареждане...`,
-    "noResults": `Няма резултати`
+    "clear": `\u{418}\u{437}\u{447}\u{438}\u{441}\u{442}\u{438}`,
+    "invalid": `(\u{43D}\u{435}\u{432}\u{430}\u{43B}\u{438}\u{434}\u{435}\u{43D})`,
+    "loading": `\u{417}\u{430}\u{440}\u{435}\u{436}\u{434}\u{430}\u{43D}\u{435}...`,
+    "noResults": `\u{41D}\u{44F}\u{43C}\u{430} \u{440}\u{435}\u{437}\u{443}\u{43B}\u{442}\u{430}\u{442}\u{438}`
 };
 
 
 var $a460b76408fa2c12$exports = {};
 $a460b76408fa2c12$exports = {
     "clear": `Vymazat`,
-    "invalid": `(neplatné)`,
-    "loading": `Načítání...`,
-    "noResults": `Žádné výsledky`
+    "invalid": `(neplatn\xe9)`,
+    "loading": `Na\u{10D}\xedt\xe1n\xed...`,
+    "noResults": `\u{17D}\xe1dn\xe9 v\xfdsledky`
 };
 
 
@@ -87,15 +91,15 @@ var $e9e48f3945b54c4e$exports = {};
 $e9e48f3945b54c4e$exports = {
     "clear": `Ryd`,
     "invalid": `(ugyldig)`,
-    "loading": `Indlæser...`,
+    "loading": `Indl\xe6ser...`,
     "noResults": `Ingen resultater`
 };
 
 
 var $51a37bbbb04b8d4b$exports = {};
 $51a37bbbb04b8d4b$exports = {
-    "clear": `Löschen`,
-    "invalid": `(ungültig)`,
+    "clear": `L\xf6schen`,
+    "invalid": `(ung\xfcltig)`,
     "loading": `Wird geladen...`,
     "noResults": `Keine Ergebnisse`
 };
@@ -103,10 +107,10 @@ $51a37bbbb04b8d4b$exports = {
 
 var $a9652db54e8c657c$exports = {};
 $a9652db54e8c657c$exports = {
-    "clear": `Καθαρισμός`,
-    "invalid": `(δεν ισχύει)`,
-    "loading": `Φόρτωση...`,
-    "noResults": `Χωρίς αποτέλεσμα`
+    "clear": `\u{39A}\u{3B1}\u{3B8}\u{3B1}\u{3C1}\u{3B9}\u{3C3}\u{3BC}\u{3CC}\u{3C2}`,
+    "invalid": `(\u{3B4}\u{3B5}\u{3BD} \u{3B9}\u{3C3}\u{3C7}\u{3CD}\u{3B5}\u{3B9})`,
+    "loading": `\u{3A6}\u{3CC}\u{3C1}\u{3C4}\u{3C9}\u{3C3}\u{3B7}...`,
+    "noResults": `\u{3A7}\u{3C9}\u{3C1}\u{3AF}\u{3C2} \u{3B1}\u{3C0}\u{3BF}\u{3C4}\u{3AD}\u{3BB}\u{3B5}\u{3C3}\u{3BC}\u{3B1}`
 };
 
 
@@ -122,7 +126,7 @@ $9d3fddee794c9b57$exports = {
 var $d19a882e0e4cfd8a$exports = {};
 $d19a882e0e4cfd8a$exports = {
     "clear": `Borrar`,
-    "invalid": `(no válido)`,
+    "invalid": `(no v\xe1lido)`,
     "loading": `Cargando...`,
     "noResults": `Sin resultados`
 };
@@ -140,7 +144,7 @@ $f163759b67478eb6$exports = {
 var $b156937eefa4b1b2$exports = {};
 $b156937eefa4b1b2$exports = {
     "clear": `Kirkas`,
-    "invalid": `(epäkelpo)`,
+    "invalid": `(ep\xe4kelpo)`,
     "loading": `Ladataan...`,
     "noResults": `Ei tuloksia`
 };
@@ -150,35 +154,35 @@ var $21aacec2a5f4c61f$exports = {};
 $21aacec2a5f4c61f$exports = {
     "clear": `Effacer`,
     "invalid": `(non valide)`,
-    "loading": `Chargement en cours…`,
-    "noResults": `Aucun résultat`
+    "loading": `Chargement en cours\u{2026}`,
+    "noResults": `Aucun r\xe9sultat`
 };
 
 
 var $a0cc323ab22de2bd$exports = {};
 $a0cc323ab22de2bd$exports = {
-    "clear": `נקה`,
-    "invalid": `(לא חוקי)`,
-    "loading": `טוען...`,
-    "noResults": `אין תוצאות`
+    "clear": `\u{5E0}\u{5E7}\u{5D4}`,
+    "invalid": `(\u{5DC}\u{5D0} \u{5D7}\u{5D5}\u{5E7}\u{5D9})`,
+    "loading": `\u{5D8}\u{5D5}\u{5E2}\u{5DF}...`,
+    "noResults": `\u{5D0}\u{5D9}\u{5DF} \u{5EA}\u{5D5}\u{5E6}\u{5D0}\u{5D5}\u{5EA}`
 };
 
 
 var $4b1559eab8beeaf7$exports = {};
 $4b1559eab8beeaf7$exports = {
-    "clear": `Izbriši`,
-    "invalid": `(nevažeće)`,
-    "loading": `Učitavam...`,
+    "clear": `Izbri\u{161}i`,
+    "invalid": `(neva\u{17E}e\u{107}e)`,
+    "loading": `U\u{10D}itavam...`,
     "noResults": `Nema rezultata`
 };
 
 
 var $4dab4b9205a1a185$exports = {};
 $4dab4b9205a1a185$exports = {
-    "clear": `Törlés`,
-    "invalid": `(érvénytelen)`,
-    "loading": `Betöltés folyamatban…`,
-    "noResults": `Nincsenek találatok`
+    "clear": `T\xf6rl\xe9s`,
+    "invalid": `(\xe9rv\xe9nytelen)`,
+    "loading": `Bet\xf6lt\xe9s folyamatban\u{2026}`,
+    "noResults": `Nincsenek tal\xe1latok`
 };
 
 
@@ -193,43 +197,43 @@ $e68bbe47073afa8a$exports = {
 
 var $88667c729de33c42$exports = {};
 $88667c729de33c42$exports = {
-    "clear": `クリア`,
-    "invalid": `(無効)`,
-    "loading": `読み込み中...`,
-    "noResults": `結果なし`
+    "clear": `\u{30AF}\u{30EA}\u{30A2}`,
+    "invalid": `(\u{7121}\u{52B9})`,
+    "loading": `\u{8AAD}\u{307F}\u{8FBC}\u{307F}\u{4E2D}...`,
+    "noResults": `\u{7D50}\u{679C}\u{306A}\u{3057}`
 };
 
 
 var $4c3197bb97515799$exports = {};
 $4c3197bb97515799$exports = {
-    "clear": `지우기`,
-    "invalid": `(유효하지 않음)`,
-    "loading": `로드 중...`,
-    "noResults": `결과 없음`
+    "clear": `\u{C9C0}\u{C6B0}\u{AE30}`,
+    "invalid": `(\u{C720}\u{D6A8}\u{D558}\u{C9C0} \u{C54A}\u{C74C})`,
+    "loading": `\u{B85C}\u{B4DC} \u{C911}...`,
+    "noResults": `\u{ACB0}\u{ACFC} \u{C5C6}\u{C74C}`
 };
 
 
 var $cd50f414bffb1f7a$exports = {};
 $cd50f414bffb1f7a$exports = {
-    "clear": `Išvalyti`,
+    "clear": `I\u{161}valyti`,
     "invalid": `(netinkama)`,
-    "loading": `Įkeliama...`,
-    "noResults": `Rezultatų nėra`
+    "loading": `\u{12E}keliama...`,
+    "noResults": `Rezultat\u{173} n\u{117}ra`
 };
 
 
 var $0d7f84ef3916515f$exports = {};
 $0d7f84ef3916515f$exports = {
-    "clear": `Notīrīt`,
-    "invalid": `(nederīgs)`,
-    "loading": `Notiek ielāde...`,
-    "noResults": `Nav rezultātu`
+    "clear": `Not\u{12B}r\u{12B}t`,
+    "invalid": `(neder\u{12B}gs)`,
+    "loading": `Notiek iel\u{101}de...`,
+    "noResults": `Nav rezult\u{101}tu`
 };
 
 
 var $f1a58baeabc47396$exports = {};
 $f1a58baeabc47396$exports = {
-    "clear": `Tøm`,
+    "clear": `T\xf8m`,
     "invalid": `(ugyldig)`,
     "loading": `Laster inn...`,
     "noResults": `Ingen resultater`
@@ -247,17 +251,17 @@ $a3dd9e27853292c1$exports = {
 
 var $6e8413d536bb66ca$exports = {};
 $6e8413d536bb66ca$exports = {
-    "clear": `Wyczyść`,
-    "invalid": `(nieprawidłowy)`,
+    "clear": `Wyczy\u{15B}\u{107}`,
+    "invalid": `(nieprawid\u{142}owy)`,
     "loading": `Wczytywanie...`,
-    "noResults": `Brak wyników`
+    "noResults": `Brak wynik\xf3w`
 };
 
 
 var $bdf278414a496664$exports = {};
 $bdf278414a496664$exports = {
     "clear": `Limpar`,
-    "invalid": `(inválido)`,
+    "invalid": `(inv\xe1lido)`,
     "loading": `Carregando...`,
     "noResults": `Nenhum resultado`
 };
@@ -266,7 +270,7 @@ $bdf278414a496664$exports = {
 var $53a7cad14ed21164$exports = {};
 $53a7cad14ed21164$exports = {
     "clear": `Limpar`,
-    "invalid": `(inválido)`,
+    "invalid": `(inv\xe1lido)`,
     "loading": `A carregar...`,
     "noResults": `Sem resultados`
 };
@@ -276,32 +280,32 @@ var $f503546cf2f6f1ae$exports = {};
 $f503546cf2f6f1ae$exports = {
     "clear": `Golire`,
     "invalid": `(nevalid)`,
-    "loading": `Se încarcă...`,
+    "loading": `Se \xeencarc\u{103}...`,
     "noResults": `Niciun rezultat`
 };
 
 
 var $9c0df9313a851b51$exports = {};
 $9c0df9313a851b51$exports = {
-    "clear": `Очистить`,
-    "invalid": `(недействительно)`,
-    "loading": `Загрузка...`,
-    "noResults": `Результаты отсутствуют`
+    "clear": `\u{41E}\u{447}\u{438}\u{441}\u{442}\u{438}\u{442}\u{44C}`,
+    "invalid": `(\u{43D}\u{435}\u{434}\u{435}\u{439}\u{441}\u{442}\u{432}\u{438}\u{442}\u{435}\u{43B}\u{44C}\u{43D}\u{43E})`,
+    "loading": `\u{417}\u{430}\u{433}\u{440}\u{443}\u{437}\u{43A}\u{430}...`,
+    "noResults": `\u{420}\u{435}\u{437}\u{443}\u{43B}\u{44C}\u{442}\u{430}\u{442}\u{44B} \u{43E}\u{442}\u{441}\u{443}\u{442}\u{441}\u{442}\u{432}\u{443}\u{44E}\u{442}`
 };
 
 
 var $ff7d7295476e23aa$exports = {};
 $ff7d7295476e23aa$exports = {
-    "clear": `Vymazať`,
-    "invalid": `(neplatné)`,
-    "loading": `Načítava sa...`,
-    "noResults": `Žiadne výsledky`
+    "clear": `Vymaza\u{165}`,
+    "invalid": `(neplatn\xe9)`,
+    "loading": `Na\u{10D}\xedtava sa...`,
+    "noResults": `\u{17D}iadne v\xfdsledky`
 };
 
 
 var $9a2e91f09cf7ad62$exports = {};
 $9a2e91f09cf7ad62$exports = {
-    "clear": `Pobrišite`,
+    "clear": `Pobri\u{161}ite`,
     "invalid": `(neveljavno)`,
     "loading": `Nalaganje...`,
     "noResults": `Ni rezultatov`
@@ -310,9 +314,9 @@ $9a2e91f09cf7ad62$exports = {
 
 var $15b314371291c45e$exports = {};
 $15b314371291c45e$exports = {
-    "clear": `Izbriši`,
-    "invalid": `(nevažeće)`,
-    "loading": `Učitavam...`,
+    "clear": `Izbri\u{161}i`,
+    "invalid": `(neva\u{17E}e\u{107}e)`,
+    "loading": `U\u{10D}itavam...`,
     "noResults": `Nema rezultata`
 };
 
@@ -321,7 +325,7 @@ var $1582d77a65bc529b$exports = {};
 $1582d77a65bc529b$exports = {
     "clear": `Rensa`,
     "invalid": `(ogiltigt)`,
-    "loading": `Läser in...`,
+    "loading": `L\xe4ser in...`,
     "noResults": `Inga resultat`
 };
 
@@ -329,36 +333,36 @@ $1582d77a65bc529b$exports = {
 var $c43996bbf6a84066$exports = {};
 $c43996bbf6a84066$exports = {
     "clear": `Temizle`,
-    "invalid": `(geçersiz)`,
-    "loading": `Yükleniyor...`,
-    "noResults": `Sonuç yok`
+    "invalid": `(ge\xe7ersiz)`,
+    "loading": `Y\xfckleniyor...`,
+    "noResults": `Sonu\xe7 yok`
 };
 
 
 var $f0ebecaa2c26d7b6$exports = {};
 $f0ebecaa2c26d7b6$exports = {
-    "clear": `Очистити`,
-    "invalid": `(недійсне)`,
-    "loading": `Завантаження...`,
-    "noResults": `Результатів немає`
+    "clear": `\u{41E}\u{447}\u{438}\u{441}\u{442}\u{438}\u{442}\u{438}`,
+    "invalid": `(\u{43D}\u{435}\u{434}\u{456}\u{439}\u{441}\u{43D}\u{435})`,
+    "loading": `\u{417}\u{430}\u{432}\u{430}\u{43D}\u{442}\u{430}\u{436}\u{435}\u{43D}\u{43D}\u{44F}...`,
+    "noResults": `\u{420}\u{435}\u{437}\u{443}\u{43B}\u{44C}\u{442}\u{430}\u{442}\u{456}\u{432} \u{43D}\u{435}\u{43C}\u{430}\u{454}`
 };
 
 
 var $0d8545e67578a6e4$exports = {};
 $0d8545e67578a6e4$exports = {
-    "clear": `清除`,
-    "invalid": `（无效）`,
-    "loading": `正在加载...`,
-    "noResults": `无结果`
+    "clear": `\u{6E05}\u{9664}`,
+    "invalid": `\u{FF08}\u{65E0}\u{6548}\u{FF09}`,
+    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`,
+    "noResults": `\u{65E0}\u{7ED3}\u{679C}`
 };
 
 
 var $5a75571ed7cb75fa$exports = {};
 $5a75571ed7cb75fa$exports = {
-    "clear": `清除`,
-    "invalid": `(無效)`,
-    "loading": `正在載入...`,
-    "noResults": `無任何結果`
+    "clear": `\u{6E05}\u{9664}`,
+    "invalid": `(\u{7121}\u{6548})`,
+    "loading": `\u{6B63}\u{5728}\u{8F09}\u{5165}...`,
+    "noResults": `\u{7121}\u{4EFB}\u{4F55}\u{7D50}\u{679C}`
 };
 
 
@@ -670,9 +674,10 @@ $c14528ddc146317f$export$9fcb3d6af94a9d12 = `YO3Nla_spectrum-Textfield-wrapper--
 
 
 
+
 function $c940f54e16bafef5$var$_MobileSearchAutocomplete(props, ref) {
     props = (0, $aQREU$useProviderProps)(props);
-    let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, isReadOnly: isReadOnly, onSubmit: onSubmit = ()=>{} } = props;
+    let { isQuiet: isQuiet, isDisabled: isDisabled, isRequired: isRequired, validationBehavior: validationBehavior, validate: validate, name: name, isReadOnly: isReadOnly, onSubmit: onSubmit = ()=>{} } = props;
     let { contains: contains } = (0, $aQREU$useFilter)({
         sensitivity: "base"
     });
@@ -687,16 +692,33 @@ function $c940f54e16bafef5$var$_MobileSearchAutocomplete(props, ref) {
         allowsCustomValue: true,
         onSelectionChange: (key)=>key !== null && onSubmit(null, key),
         selectedKey: undefined,
-        defaultSelectedKey: undefined
+        defaultSelectedKey: undefined,
+        validate: (0, $aQREU$useCallback)((v)=>validate === null || validate === void 0 ? void 0 : validate(v.inputValue), [
+            validate
+        ])
     });
     let buttonRef = (0, $aQREU$useRef)(null);
     let domRef = (0, $aQREU$useFocusableRef)(ref, buttonRef);
     let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $aQREU$useOverlayTrigger)({
         type: "listbox"
     }, state, buttonRef);
-    let { labelProps: labelProps, fieldProps: fieldProps } = (0, $aQREU$useLabel)({
+    let inputRef = (0, $aQREU$useRef)(null);
+    (0, $aQREU$useFormValidation)({
         ...props,
-        labelElementType: "span"
+        focus: ()=>{
+            var _buttonRef_current;
+            return (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+        }
+    }, state, inputRef);
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    var _props_errorMessage;
+    let errorMessage = (_props_errorMessage = props.errorMessage) !== null && _props_errorMessage !== void 0 ? _props_errorMessage : validationErrors.join(" ");
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $aQREU$useField)({
+        ...props,
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: errorMessage
     });
     // Focus the button and show focus ring when clicking on the label
     labelProps.onClick = ()=>{
@@ -705,9 +727,29 @@ function $c940f54e16bafef5$var$_MobileSearchAutocomplete(props, ref) {
             (0, $aQREU$setInteractionModality)("keyboard");
         }
     };
+    let inputProps = {
+        type: "hidden",
+        name: name,
+        value: state.inputValue
+    };
+    if (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.hidden = true;
+        inputProps.required = isRequired;
+        // Ignore react warning.
+        inputProps.onChange = ()=>{};
+    }
+    (0, $aQREU$useFormReset)(inputRef, state.inputValue, state.setInputValue);
     return /*#__PURE__*/ (0, $aQREU$react).createElement((0, $aQREU$react).Fragment, null, /*#__PURE__*/ (0, $aQREU$react).createElement((0, $aQREU$Field), {
         ...props,
         labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
         elementType: "span",
         ref: domRef,
         includeNecessityIndicatorInAccessibilityName: true
@@ -725,7 +767,10 @@ function $c940f54e16bafef5$var$_MobileSearchAutocomplete(props, ref) {
         inputValue: state.inputValue,
         clearInput: ()=>state.setInputValue(""),
         onPress: ()=>!isReadOnly && state.open(null, "manual")
-    }, state.inputValue || props.placeholder || "")), /*#__PURE__*/ (0, $aQREU$react).createElement((0, $aQREU$Tray), {
+    }, state.inputValue || props.placeholder || "")), /*#__PURE__*/ (0, $aQREU$react).createElement("input", {
+        ...inputProps,
+        ref: inputRef
+    }), /*#__PURE__*/ (0, $aQREU$react).createElement((0, $aQREU$Tray), {
         state: state,
         isFixedHeight: true,
         ...overlayProps
@@ -842,19 +887,20 @@ function $c940f54e16bafef5$var$SearchAutocompleteTray(props) {
         keyboardDelegate: layout,
         popoverRef: popoverRef,
         listBoxRef: listBoxRef,
-        inputRef: inputRef
+        inputRef: inputRef,
+        // Handled outside the tray.
+        name: undefined
     }, state);
     (0, $aQREU$react).useEffect(()=>{
         if (inputRef.current) (0, $aQREU$focusSafely)(inputRef.current);
-        // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
+    }, []);
+    (0, $aQREU$react).useEffect(()=>{
+        // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
         // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
         // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
         // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363
-        return ()=>{
-            state.setFocused(false);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        if (!state.isOpen && state.isFocused) state.setFocused(false);
+    });
     let { dialogProps: dialogProps } = (0, $aQREU$useDialog)({
         "aria-labelledby": (0, $aQREU$useId)(labelProps.id)
     }, popoverRef);
@@ -1009,8 +1055,10 @@ function $c940f54e16bafef5$var$SearchAutocompleteTray(props) {
 
 
 
+
 function $f3f3b62273a2d260$var$SearchAutocomplete(props, ref) {
     props = (0, $aQREU$useProviderProps)(props);
+    props = (0, $aQREU$useFormProps)(props);
     if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead.");
     let isMobile = (0, $aQREU$useIsMobileDevice)();
     if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
@@ -1026,7 +1074,7 @@ function $f3f3b62273a2d260$var$SearchAutocomplete(props, ref) {
 }
 function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
     props = (0, $aQREU$useProviderProps)(props);
-    let { menuTrigger: menuTrigger = "input", shouldFlip: shouldFlip = true, direction: direction = "bottom", isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{} } = props;
+    let { menuTrigger: menuTrigger = "input", shouldFlip: shouldFlip = true, direction: direction = "bottom", isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
     let stringFormatter = (0, $aQREU$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($67773d1975e0a845$exports))));
     let isAsync = loadingState != null;
     let popoverRef = (0, $aQREU$useRef)(null);
@@ -1044,10 +1092,13 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
         allowsCustomValue: true,
         onSelectionChange: (key)=>key !== null && onSubmit(null, key),
         selectedKey: undefined,
-        defaultSelectedKey: undefined
+        defaultSelectedKey: undefined,
+        validate: (0, $aQREU$useCallback)((v)=>validate === null || validate === void 0 ? void 0 : validate(v.inputValue), [
+            validate
+        ])
     });
     let layout = (0, $aQREU$useListBoxLayout)(state, loadingState === "loadingMore");
-    let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $aQREU$useSearchAutocomplete)({
+    let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $aQREU$useSearchAutocomplete)({
         ...props,
         keyboardDelegate: layout,
         popoverRef: unwrappedPopoverRef,
@@ -1084,6 +1135,9 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
         descriptionProps: descriptionProps,
         errorMessageProps: errorMessageProps,
         labelProps: labelProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
         ref: domRef
     }, /*#__PURE__*/ (0, $aQREU$react).createElement($f3f3b62273a2d260$var$SearchAutocompleteInput, {
         ...props,
@@ -1091,7 +1145,8 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
         loadingState: loadingState,
         inputProps: inputProps,
         inputRef: inputRef,
-        clearButtonProps: clearButtonProps
+        clearButtonProps: clearButtonProps,
+        validationState: props.validationState || (isInvalid ? "invalid" : undefined)
     })), /*#__PURE__*/ (0, $aQREU$react).createElement((0, $aQREU$Popover), {
         state: state,
         UNSAFE_style: style,