@react-spectrum/textfield 3.13.5 → 3.14.1

package/dist/TextArea.main.js

@@ -72,7 +72,15 @@ const $eec649e464f3832d$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, ($parcel$int
         inputValue,
         inputRef
     ]);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+    let hasWarned = (0, $5VIId$react.useRef)(false);
+    (0, $5VIId$react.useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     let result = (0, $5VIId$reactariatextfield.useTextField)({
         ...props,
         onChange: (0, $5VIId$reactariautils.chain)(onChange, setInputValue),

package/dist/TextArea.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,SAAS,KAA4B,EAAE,GAA2C;IAClI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;QAG8D;IADlE,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,IAAI,KAAO;IACnG,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,wBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAM,AAAD,KAAM,SAAS,OAAO,EAAE;YAClD,IAAI,QAAQ,SAAS,OAAO;YAC5B,IAAI,gBAAgB,MAAM,KAAK,CAAC,SAAS;YACzC,IAAI,eAAe,MAAM,KAAK,CAAC,QAAQ;YACvC,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM,KAAK;YAC9C,IAAI,CAAC,WACH,MAAM,KAAK,CAAC,QAAQ,GAAG;YAEzB,MAAM,KAAK,CAAC,SAAS,GAAG;YACxB,MAAM,KAAK,CAAC,MAAM,GAAG;YACrB,+DAA+D;YAC/D,MAAM,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,YAAY,GAAI,CAAA,MAAM,YAAY,GAAG,MAAM,YAAY,AAAD,EAAG,EAAE,CAAC;YAC1F,MAAM,KAAK,CAAC,QAAQ,GAAG;YACvB,MAAM,KAAK,CAAC,SAAS,GAAG;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM,MAAM;KAAC;IAEpC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAClB;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,IAAI,SAAS,CAAA,GAAA,sCAAW,EAAE;QACxB,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,2BAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB","sources":["packages/@react-spectrum/textfield/src/TextArea.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isDisabled = false,\n    isQuiet = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    ...otherProps\n  } = props;\n\n  // not in stately because this is so we know when to re-measure, which is a spectrum design\n  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n  let inputRef = useRef<HTMLTextAreaElement>(null);\n\n  let onHeightChange = useCallback(() => {\n    // Quiet textareas always grow based on their text content.\n    // Standard textareas also grow by default, unless an explicit height is set.\n    if ((isQuiet || !props.height) && inputRef.current) {\n      let input = inputRef.current;\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  }, [isQuiet, inputRef, props.height]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      onHeightChange();\n    }\n  }, [onHeightChange, inputValue, inputRef]);\n\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n  }\n\n  let result = useTextField({\n    ...props,\n    onChange: chain(onChange, setInputValue),\n    inputElementType: 'textarea'\n  }, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps as SpectrumTextFieldBaseProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      multiLine\n      isDisabled={isDisabled}\n      isQuiet={isQuiet}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired} />\n  );\n});\n"],"names":[],"version":3,"file":"TextArea.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,SAAS,KAA4B,EAAE,GAA2C;IAClI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;QAG8D;IADlE,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,IAAI,KAAO;IACnG,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,wBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAM,AAAD,KAAM,SAAS,OAAO,EAAE;YAClD,IAAI,QAAQ,SAAS,OAAO;YAC5B,IAAI,gBAAgB,MAAM,KAAK,CAAC,SAAS;YACzC,IAAI,eAAe,MAAM,KAAK,CAAC,QAAQ;YACvC,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM,KAAK;YAC9C,IAAI,CAAC,WACH,MAAM,KAAK,CAAC,QAAQ,GAAG;YAEzB,MAAM,KAAK,CAAC,SAAS,GAAG;YACxB,MAAM,KAAK,CAAC,MAAM,GAAG;YACrB,+DAA+D;YAC/D,MAAM,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,YAAY,GAAI,CAAA,MAAM,YAAY,GAAG,MAAM,YAAY,AAAD,EAAG,EAAE,CAAC;YAC1F,MAAM,KAAK,CAAC,QAAQ,GAAG;YACvB,MAAM,KAAK,CAAC,SAAS,GAAG;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM,MAAM;KAAC;IAEpC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAClB;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CAAC;YACb,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,SAAS,CAAA,GAAA,sCAAW,EAAE;QACxB,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,2BAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB","sources":["packages/@react-spectrum/textfield/src/TextArea.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useEffect, useRef} from 'react';\nimport {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isDisabled = false,\n    isQuiet = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    ...otherProps\n  } = props;\n\n  // not in stately because this is so we know when to re-measure, which is a spectrum design\n  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n  let inputRef = useRef<HTMLTextAreaElement>(null);\n\n  let onHeightChange = useCallback(() => {\n    // Quiet textareas always grow based on their text content.\n    // Standard textareas also grow by default, unless an explicit height is set.\n    if ((isQuiet || !props.height) && inputRef.current) {\n      let input = inputRef.current;\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  }, [isQuiet, inputRef, props.height]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      onHeightChange();\n    }\n  }, [onHeightChange, inputValue, inputRef]);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  let result = useTextField({\n    ...props,\n    onChange: chain(onChange, setInputValue),\n    inputElementType: 'textarea'\n  }, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps as SpectrumTextFieldBaseProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      multiLine\n      isDisabled={isDisabled}\n      isQuiet={isQuiet}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired} />\n  );\n});\n"],"names":[],"version":3,"file":"TextArea.main.js.map"}

package/dist/TextArea.mjs

@@ -1,6 +1,6 @@
 import {TextFieldBase as $599adb75312e6492$export$d22444a338b6e3c2} from "./TextFieldBase.mjs";
 import {useLayoutEffect as $hi3T0$useLayoutEffect, chain as $hi3T0$chain} from "@react-aria/utils";
-import $hi3T0$react, {useRef as $hi3T0$useRef, useCallback as $hi3T0$useCallback} from "react";
+import $hi3T0$react, {useRef as $hi3T0$useRef, useCallback as $hi3T0$useCallback, useEffect as $hi3T0$useEffect} from "react";
 import {useControlledState as $hi3T0$useControlledState} from "@react-stately/utils";
 import {useFormProps as $hi3T0$useFormProps} from "@react-spectrum/form";
 import {useProviderProps as $hi3T0$useProviderProps} from "@react-spectrum/provider";
@@ -62,7 +62,15 @@ const $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $hi3T0$react
         inputValue,
         inputRef
     ]);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+    let hasWarned = (0, $hi3T0$useRef)(false);
+    (0, $hi3T0$useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     let result = (0, $hi3T0$useTextField)({
         ...props,
         onChange: (0, $hi3T0$chain)(onChange, setInputValue),

package/dist/TextArea.module.js

@@ -1,6 +1,6 @@
 import {TextFieldBase as $599adb75312e6492$export$d22444a338b6e3c2} from "./TextFieldBase.module.js";
 import {useLayoutEffect as $hi3T0$useLayoutEffect, chain as $hi3T0$chain} from "@react-aria/utils";
-import $hi3T0$react, {useRef as $hi3T0$useRef, useCallback as $hi3T0$useCallback} from "react";
+import $hi3T0$react, {useRef as $hi3T0$useRef, useCallback as $hi3T0$useCallback, useEffect as $hi3T0$useEffect} from "react";
 import {useControlledState as $hi3T0$useControlledState} from "@react-stately/utils";
 import {useFormProps as $hi3T0$useFormProps} from "@react-spectrum/form";
 import {useProviderProps as $hi3T0$useProviderProps} from "@react-spectrum/provider";
@@ -62,7 +62,15 @@ const $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $hi3T0$react
         inputValue,
         inputRef
     ]);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+    let hasWarned = (0, $hi3T0$useRef)(false);
+    (0, $hi3T0$useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     let result = (0, $hi3T0$useTextField)({
         ...props,
         onChange: (0, $hi3T0$chain)(onChange, setInputValue),

package/dist/TextArea.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAW,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,SAAS,KAA4B,EAAE,GAA2C;IAClI,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;QAG8D;IADlE,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,IAAI,KAAO;IACnG,IAAI,WAAW,CAAA,GAAA,aAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,kBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAM,AAAD,KAAM,SAAS,OAAO,EAAE;YAClD,IAAI,QAAQ,SAAS,OAAO;YAC5B,IAAI,gBAAgB,MAAM,KAAK,CAAC,SAAS;YACzC,IAAI,eAAe,MAAM,KAAK,CAAC,QAAQ;YACvC,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM,KAAK;YAC9C,IAAI,CAAC,WACH,MAAM,KAAK,CAAC,QAAQ,GAAG;YAEzB,MAAM,KAAK,CAAC,SAAS,GAAG;YACxB,MAAM,KAAK,CAAC,MAAM,GAAG;YACrB,+DAA+D;YAC/D,MAAM,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,YAAY,GAAI,CAAA,MAAM,YAAY,GAAG,MAAM,YAAY,AAAD,EAAG,EAAE,CAAC;YAC1F,MAAM,KAAK,CAAC,QAAQ,GAAG;YACvB,MAAM,KAAK,CAAC,SAAS,GAAG;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM,MAAM;KAAC;IAEpC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAClB;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;QACxB,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,YAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB","sources":["packages/@react-spectrum/textfield/src/TextArea.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isDisabled = false,\n    isQuiet = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    ...otherProps\n  } = props;\n\n  // not in stately because this is so we know when to re-measure, which is a spectrum design\n  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n  let inputRef = useRef<HTMLTextAreaElement>(null);\n\n  let onHeightChange = useCallback(() => {\n    // Quiet textareas always grow based on their text content.\n    // Standard textareas also grow by default, unless an explicit height is set.\n    if ((isQuiet || !props.height) && inputRef.current) {\n      let input = inputRef.current;\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  }, [isQuiet, inputRef, props.height]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      onHeightChange();\n    }\n  }, [onHeightChange, inputValue, inputRef]);\n\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n  }\n\n  let result = useTextField({\n    ...props,\n    onChange: chain(onChange, setInputValue),\n    inputElementType: 'textarea'\n  }, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps as SpectrumTextFieldBaseProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      multiLine\n      isDisabled={isDisabled}\n      isQuiet={isQuiet}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired} />\n  );\n});\n"],"names":[],"version":3,"file":"TextArea.module.js.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAgBM,MAAM,0DAAW,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,SAAS,KAA4B,EAAE,GAA2C;IAClI,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;QAG8D;IADlE,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,IAAI,KAAO;IACnG,IAAI,WAAW,CAAA,GAAA,aAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,kBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAM,AAAD,KAAM,SAAS,OAAO,EAAE;YAClD,IAAI,QAAQ,SAAS,OAAO;YAC5B,IAAI,gBAAgB,MAAM,KAAK,CAAC,SAAS;YACzC,IAAI,eAAe,MAAM,KAAK,CAAC,QAAQ;YACvC,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM,KAAK;YAC9C,IAAI,CAAC,WACH,MAAM,KAAK,CAAC,QAAQ,GAAG;YAEzB,MAAM,KAAK,CAAC,SAAS,GAAG;YACxB,MAAM,KAAK,CAAC,MAAM,GAAG;YACrB,+DAA+D;YAC/D,MAAM,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,YAAY,GAAI,CAAA,MAAM,YAAY,GAAG,MAAM,YAAY,AAAD,EAAG,EAAE,CAAC;YAC1F,MAAM,KAAK,CAAC,QAAQ,GAAG;YACvB,MAAM,KAAK,CAAC,SAAS,GAAG;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM,MAAM;KAAC;IAEpC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,SAAS,OAAO,EAClB;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CAAC;YACb,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;QACxB,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,YAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB","sources":["packages/@react-spectrum/textfield/src/TextArea.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useEffect, useRef} from 'react';\nimport {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isDisabled = false,\n    isQuiet = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    ...otherProps\n  } = props;\n\n  // not in stately because this is so we know when to re-measure, which is a spectrum design\n  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n  let inputRef = useRef<HTMLTextAreaElement>(null);\n\n  let onHeightChange = useCallback(() => {\n    // Quiet textareas always grow based on their text content.\n    // Standard textareas also grow by default, unless an explicit height is set.\n    if ((isQuiet || !props.height) && inputRef.current) {\n      let input = inputRef.current;\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  }, [isQuiet, inputRef, props.height]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      onHeightChange();\n    }\n  }, [onHeightChange, inputValue, inputRef]);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  let result = useTextField({\n    ...props,\n    onChange: chain(onChange, setInputValue),\n    inputElementType: 'textarea'\n  }, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps as SpectrumTextFieldBaseProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      multiLine\n      isDisabled={isDisabled}\n      isQuiet={isQuiet}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired} />\n  );\n});\n"],"names":[],"version":3,"file":"TextArea.module.js.map"}

package/dist/TextField.main.js

@@ -34,7 +34,15 @@ const $34fd51d50eb4b056$export$2c73285ae9390cec = /*#__PURE__*/ (0, $em8OD$react
     props = (0, $em8OD$reactspectrumform.useFormProps)(props);
     let inputRef = (0, $em8OD$react.useRef)(null);
     let result = (0, $em8OD$reactariatextfield.useTextField)(props, inputRef);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+    let hasWarned = (0, $em8OD$react.useRef)(false);
+    (0, $em8OD$react.useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($em8OD$react))).createElement((0, $86793250183ac29e$exports.TextFieldBase), {
         ...props,
         ...result,

package/dist/TextField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAcM,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAA6B,EAAE,GAAsB;IAC1G,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IAErB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,sCAAW,EAAE,OAAO;IAEjC,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,KAAK;QACR,GAAG,MAAM;QACV,KAAK;QACL,UAAU;;AAEhB","sources":["packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let result = useTextField(props, inputRef);\n\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n  }\n\n  return (\n    <TextFieldBase\n      {...props}\n      {...result}\n      ref={ref}\n      inputRef={inputRef} />\n  );\n});\n"],"names":[],"version":3,"file":"TextField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAcM,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAA6B,EAAE,GAAsB;IAC1G,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IAErB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,sCAAW,EAAE,OAAO;IAEjC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CAAC;YACb,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,KAAK;QACR,GAAG,MAAM;QACV,KAAK;QACL,UAAU;;AAEhB","sources":["packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useEffect, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let result = useTextField(props, inputRef);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  return (\n    <TextFieldBase\n      {...props}\n      {...result}\n      ref={ref}\n      inputRef={inputRef} />\n  );\n});\n"],"names":[],"version":3,"file":"TextField.main.js.map"}

package/dist/TextField.mjs

@@ -1,5 +1,5 @@
 import {TextFieldBase as $599adb75312e6492$export$d22444a338b6e3c2} from "./TextFieldBase.mjs";
-import $9R76J$react, {forwardRef as $9R76J$forwardRef, useRef as $9R76J$useRef} from "react";
+import $9R76J$react, {forwardRef as $9R76J$forwardRef, useRef as $9R76J$useRef, useEffect as $9R76J$useEffect} from "react";
 import {useFormProps as $9R76J$useFormProps} from "@react-spectrum/form";
 import {useProviderProps as $9R76J$useProviderProps} from "@react-spectrum/provider";
 import {useTextField as $9R76J$useTextField} from "@react-aria/textfield";
@@ -24,7 +24,15 @@ const $265457f9427aa380$export$2c73285ae9390cec = /*#__PURE__*/ (0, $9R76J$forwa
     props = (0, $9R76J$useFormProps)(props);
     let inputRef = (0, $9R76J$useRef)(null);
     let result = (0, $9R76J$useTextField)(props, inputRef);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+    let hasWarned = (0, $9R76J$useRef)(false);
+    (0, $9R76J$useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     return /*#__PURE__*/ (0, $9R76J$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
         ...props,
         ...result,

package/dist/TextField.module.js

@@ -1,5 +1,5 @@
 import {TextFieldBase as $599adb75312e6492$export$d22444a338b6e3c2} from "./TextFieldBase.module.js";
-import $9R76J$react, {forwardRef as $9R76J$forwardRef, useRef as $9R76J$useRef} from "react";
+import $9R76J$react, {forwardRef as $9R76J$forwardRef, useRef as $9R76J$useRef, useEffect as $9R76J$useEffect} from "react";
 import {useFormProps as $9R76J$useFormProps} from "@react-spectrum/form";
 import {useProviderProps as $9R76J$useProviderProps} from "@react-spectrum/provider";
 import {useTextField as $9R76J$useTextField} from "@react-aria/textfield";
@@ -24,7 +24,15 @@ const $265457f9427aa380$export$2c73285ae9390cec = /*#__PURE__*/ (0, $9R76J$forwa
     props = (0, $9R76J$useFormProps)(props);
     let inputRef = (0, $9R76J$useRef)(null);
     let result = (0, $9R76J$useTextField)(props, inputRef);
-    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+    let hasWarned = (0, $9R76J$useRef)(false);
+    (0, $9R76J$useEffect)(()=>{
+        if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+            console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+            hasWarned.current = true;
+        }
+    }, [
+        props.placeholder
+    ]);
     return /*#__PURE__*/ (0, $9R76J$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
         ...props,
         ...result,

package/dist/TextField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAcM,MAAM,0DAAY,CAAA,GAAA,iBAAS,EAAE,SAAS,UAAU,KAA6B,EAAE,GAAsB;IAC1G,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IAErB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE,OAAO;IAEjC,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,KAAK;QACR,GAAG,MAAM;QACV,KAAK;QACL,UAAU;;AAEhB","sources":["packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let result = useTextField(props, inputRef);\n\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n  }\n\n  return (\n    <TextFieldBase\n      {...props}\n      {...result}\n      ref={ref}\n      inputRef={inputRef} />\n  );\n});\n"],"names":[],"version":3,"file":"TextField.module.js.map"}
+{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAcM,MAAM,0DAAY,CAAA,GAAA,iBAAS,EAAE,SAAS,UAAU,KAA6B,EAAE,GAAsB;IAC1G,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IAErB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE,OAAO;IAEjC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CAAC;YACb,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,KAAK;QACR,GAAG,MAAM;QACV,KAAK;QACL,UAAU;;AAEhB","sources":["packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useEffect, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let result = useTextField(props, inputRef);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  return (\n    <TextFieldBase\n      {...props}\n      {...result}\n      ref={ref}\n      inputRef={inputRef} />\n  );\n});\n"],"names":[],"version":3,"file":"TextField.module.js.map"}

package/dist/TextFieldBase.main.js

@@ -1,3 +1,4 @@
+var $286a257fb3d9a493$exports = require("./intlStrings.main.js");
 require("./textfield.54643fd6.css");
 var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
 var $fWjzu$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
@@ -8,6 +9,7 @@ var $fWjzu$reactariautils = require("@react-aria/utils");
 var $fWjzu$react = require("react");
 var $fWjzu$reactariafocus = require("@react-aria/focus");
 var $fWjzu$reactariainteractions = require("@react-aria/interactions");
+var $fWjzu$reactariai18n = require("@react-aria/i18n");
 
 
 function $parcel$interopDefault(a) {
@@ -38,6 +40,8 @@ $parcel$export(module.exports, "TextFieldBase", () => $86793250183ac29e$export$d
 
 
 
+
+
 const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fWjzu$react.forwardRef)(function TextFieldBase(props, ref) {
     let { validationState: validationState = props.isInvalid ? 'invalid' : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fWjzu$reactariainteractions.useHover)({
@@ -65,10 +69,22 @@ const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fWjzu$react
             size: 'S'
         });
     }
-    let validationIcon = isInvalid ? /*#__PURE__*/ (0, ($parcel$interopDefault($fWjzu$react))).createElement((0, ($parcel$interopDefault($fWjzu$spectrumiconsuiAlertMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($fWjzu$react))).createElement((0, ($parcel$interopDefault($fWjzu$spectrumiconsuiCheckmarkMedium))), null);
+    let stringFormatter = (0, $fWjzu$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($286a257fb3d9a493$exports))), '@react-spectrum/textfield');
+    let validId = (0, $fWjzu$reactariautils.useId)();
+    let validationIcon = isInvalid ? /*#__PURE__*/ (0, ($parcel$interopDefault($fWjzu$react))).createElement((0, ($parcel$interopDefault($fWjzu$spectrumiconsuiAlertMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($fWjzu$react))).createElement((0, ($parcel$interopDefault($fWjzu$spectrumiconsuiCheckmarkMedium))), {
+        id: validId,
+        "aria-hidden": true,
+        "aria-label": stringFormatter.format('valid')
+    });
     let validation = /*#__PURE__*/ (0, $fWjzu$react.cloneElement)(validationIcon, {
         UNSAFE_className: (0, $fWjzu$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-validationIcon', validationIconClassName)
     });
+    // Add validation icon IDREF to aria-describedby when validationState is valid
+    let inputPropsAriaDescribedBy = inputProps['aria-describedby'];
+    if (!isInvalid && validationState === 'valid' && !isLoading && !isDisabled && (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))) inputProps['aria-describedby'] = [
+        inputPropsAriaDescribedBy,
+        validId
+    ].join(' ').trim();
     let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $fWjzu$reactariafocus.useFocusRing)({
         isTextInput: true,
         autoFocus: autoFocus

package/dist/TextFieldBase.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA6BM,MAAM,0DAAgB,CAAA,GAAA,uBAAS,EAAE,SAAS,cAAc,KAAyB,EAAE,GAA8D;IACtJ,IAAI,mBACF,kBAAkB,MAAM,SAAS,GAAG,YAAY,YAChD,IAAI,WACJ,UAAU,mBACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,mBACd,eAAe,cACf,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,EACjB,UAAU,YAAY,aACtB,SAAS,oBACT,gBAAgB,2BAChB,uBAAuB,oBACvB,gBAAgB,EACjB,GAAG;IACJ,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,kBAAkB,CAAA,GAAA,mBAAK,EAA0C;IACrE,IAAI,WAAW,gBAAgB;IAE/B,sCAAsC;IACtC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,IAAI,cAAiC,YAAY,aAAa;IAC9D,IAAI,YAAY,oBAAoB,aAAa,CAAC;IAElD,IAAI,MAAM;QACR,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAC9B,CAAA,GAAA,mDAAK,GACL,KAAK,KAAK,IAAI,AAAC,KAAK,KAAK,CAAS,gBAAgB,EAClD;QAGF,qBAAO,CAAA,GAAA,yBAAW,EAAE,MAAM;8BACxB;YACA,MAAM;QACR;IACF;IAEA,IAAI,iBAAiB,0BAAY,0DAAC,CAAA,GAAA,2DAAU,yBAAO,0DAAC,CAAA,GAAA,+DAAc;IAClE,IAAI,2BAAa,CAAA,GAAA,yBAAW,EAAE,gBAAgB;QAC5C,kBAAkB,CAAA,GAAA,oCAAS,EACzB,CAAA,GAAA,mDAAK,GACL,qCACA;IAEJ;IAEA,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW,EAAE;QAC9C,aAAa;mBACb;IACF;IAEA,IAAI,0BACF,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,+BAA+B;YAC/B,6BAA6B,oBAAoB,WAAW,CAAC;YAC7D,gCAAgC;YAChC,6BAA6B;YAC7B,iCAAiC;YACjC,cAAc,CAAC,oBAAoB;QACrC;qBAGJ,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,YAAY,WAAW;QAClD,KAAK;QACL,MAAM,YAAY,IAAI;QACtB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,4BACA;YACE,gCAAgC;YAChC,cAAc;QAChB,GACA;QAGL,MACA,mBAAmB,CAAC,aAAa,CAAC,aAAa,aAAa,MAC5D,aAAa,kBACb;IAIL,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,8BACA;YACE,qCAAqC;QACvC;QAGJ,eAAe;QACf,KAAK;OACJ;AAGP","sources":["packages/@react-spectrum/textfield/src/TextFieldBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents, RefObject, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n  wrapperChildren?: ReactElement | ReactElement[],\n  inputClassName?: string,\n  validationIconClassName?: string,\n  multiLine?: boolean,\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n  loadingIndicator?: ReactElement,\n  isLoading?: boolean,\n  disableFocusRing?: boolean\n}\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let {\n    validationState = props.isInvalid ? 'invalid' : null,\n    icon,\n    isQuiet = false,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputClassName,\n    wrapperChildren,\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    inputRef: userInputRef,\n    isLoading,\n    loadingIndicator,\n    validationIconClassName,\n    disableFocusRing\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let domRef = useRef<HTMLDivElement>(null);\n  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = userInputRef || defaultInputRef;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n\n  if (icon) {\n    let UNSAFE_className = classNames(\n      styles,\n      icon.props && (icon.props as any).UNSAFE_className,\n      'spectrum-Textfield-icon'\n    );\n\n    icon = cloneElement(icon, {\n      UNSAFE_className,\n      size: 'S'\n    } as any);\n  }\n\n  let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n  let validation = cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      styles,\n      'spectrum-Textfield-validationIcon',\n      validationIconClassName\n    )\n  });\n\n  let {focusProps, isFocusVisible} = useFocusRing({\n    isTextInput: true,\n    autoFocus\n  });\n\n  let textField = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Textfield',\n          {\n            'spectrum-Textfield--invalid': isInvalid,\n            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n            'spectrum-Textfield--loadable': loadingIndicator,\n            'spectrum-Textfield--quiet': isQuiet,\n            'spectrum-Textfield--multiline': multiLine,\n            'focus-ring': !disableFocusRing && isFocusVisible\n          }\n        )\n      }>\n      <ElementType\n        {...mergeProps(inputProps, hoverProps, focusProps)}\n        ref={inputRef as any}\n        rows={multiLine ? 1 : undefined}\n        className={\n          classNames(\n            styles,\n            'spectrum-Textfield-input',\n            {\n              'spectrum-Textfield-inputIcon': icon,\n              'is-hovered': isHovered\n            },\n            inputClassName\n          )\n        } />\n      {icon}\n      {validationState && !isLoading && !isDisabled ? validation : null}\n      {isLoading && loadingIndicator}\n      {wrapperChildren}\n    </div>\n  );\n\n  return (\n    <Field\n      {...props}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      wrapperClassName={\n        classNames(\n          styles,\n          'spectrum-Textfield-wrapper',\n          {\n            'spectrum-Textfield-wrapper--quiet': isQuiet\n          }\n        )\n      }\n      showErrorIcon={false}\n      ref={domRef}>\n      {textField}\n    </Field>\n  );\n});\n"],"names":[],"version":3,"file":"TextFieldBase.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/TextFieldBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {PressEvents, RefObject, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n  wrapperChildren?: ReactElement | ReactElement[],\n  inputClassName?: string,\n  validationIconClassName?: string,\n  multiLine?: boolean,\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n  loadingIndicator?: ReactElement,\n  isLoading?: boolean,\n  disableFocusRing?: boolean\n}\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let {\n    validationState = props.isInvalid ? 'invalid' : null,\n    icon,\n    isQuiet = false,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputClassName,\n    wrapperChildren,\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    inputRef: userInputRef,\n    isLoading,\n    loadingIndicator,\n    validationIconClassName,\n    disableFocusRing\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let domRef = useRef<HTMLDivElement>(null);\n  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = userInputRef || defaultInputRef;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n\n  if (icon) {\n    let UNSAFE_className = classNames(\n      styles,\n      icon.props && (icon.props as any).UNSAFE_className,\n      'spectrum-Textfield-icon'\n    );\n\n    icon = cloneElement(icon, {\n      UNSAFE_className,\n      size: 'S'\n    } as any);\n  }\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/textfield');\n  let validId = useId();\n  let validationIcon = isInvalid\n    ? <AlertMedium />\n    : <CheckmarkMedium id={validId} aria-hidden aria-label={stringFormatter.format('valid')} />;\n  let validation = cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      styles,\n      'spectrum-Textfield-validationIcon',\n      validationIconClassName\n    )\n  });\n\n  // Add validation icon IDREF to aria-describedby when validationState is valid\n  let inputPropsAriaDescribedBy = inputProps['aria-describedby'];\n  if (\n    !isInvalid && validationState === 'valid' && !isLoading && !isDisabled &&\n    (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))\n  ) {\n    inputProps['aria-describedby'] = [inputPropsAriaDescribedBy, validId].join(' ').trim();\n  }\n\n  let {focusProps, isFocusVisible} = useFocusRing({\n    isTextInput: true,\n    autoFocus\n  });\n\n  let textField = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Textfield',\n          {\n            'spectrum-Textfield--invalid': isInvalid,\n            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n            'spectrum-Textfield--loadable': loadingIndicator,\n            'spectrum-Textfield--quiet': isQuiet,\n            'spectrum-Textfield--multiline': multiLine,\n            'focus-ring': !disableFocusRing && isFocusVisible\n          }\n        )\n      }>\n      <ElementType\n        {...mergeProps(inputProps, hoverProps, focusProps)}\n        ref={inputRef as any}\n        rows={multiLine ? 1 : undefined}\n        className={\n          classNames(\n            styles,\n            'spectrum-Textfield-input',\n            {\n              'spectrum-Textfield-inputIcon': icon,\n              'is-hovered': isHovered\n            },\n            inputClassName\n          )\n        } />\n      {icon}\n      {validationState && !isLoading && !isDisabled ? validation : null}\n      {isLoading && loadingIndicator}\n      {wrapperChildren}\n    </div>\n  );\n\n  return (\n    <Field\n      {...props}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      wrapperClassName={\n        classNames(\n          styles,\n          'spectrum-Textfield-wrapper',\n          {\n            'spectrum-Textfield-wrapper--quiet': isQuiet\n          }\n        )\n      }\n      showErrorIcon={false}\n      ref={domRef}>\n      {textField}\n    </Field>\n  );\n});\n"],"names":[],"version":3,"file":"TextFieldBase.main.js.map"}

package/dist/TextFieldBase.mjs

@@ -1,13 +1,15 @@
+import $264pK$intlStringsmodulejs from "./intlStrings.mjs";
 import "./textfield.54643fd6.css";
 import $264pK$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
 import $264pK$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import $264pK$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
 import {createFocusableRef as $264pK$createFocusableRef, classNames as $264pK$classNames} from "@react-spectrum/utils";
 import {Field as $264pK$Field} from "@react-spectrum/label";
-import {mergeProps as $264pK$mergeProps} from "@react-aria/utils";
+import {useId as $264pK$useId, mergeProps as $264pK$mergeProps} from "@react-aria/utils";
 import $264pK$react, {forwardRef as $264pK$forwardRef, useRef as $264pK$useRef, useImperativeHandle as $264pK$useImperativeHandle, cloneElement as $264pK$cloneElement} from "react";
 import {useFocusRing as $264pK$useFocusRing} from "@react-aria/focus";
 import {useHover as $264pK$useHover} from "@react-aria/interactions";
+import {useLocalizedStringFormatter as $264pK$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
 function $parcel$interopDefault(a) {
@@ -32,6 +34,8 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $264pK$forwardRef)(function TextFieldBase(props, ref) {
     let { validationState: validationState = props.isInvalid ? 'invalid' : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $264pK$useHover)({
@@ -59,10 +63,22 @@ const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $264pK$forwa
             size: 'S'
         });
     }
-    let validationIcon = isInvalid ? /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiCheckmarkMedium), null);
+    let stringFormatter = (0, $264pK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($264pK$intlStringsmodulejs))), '@react-spectrum/textfield');
+    let validId = (0, $264pK$useId)();
+    let validationIcon = isInvalid ? /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiCheckmarkMedium), {
+        id: validId,
+        "aria-hidden": true,
+        "aria-label": stringFormatter.format('valid')
+    });
     let validation = /*#__PURE__*/ (0, $264pK$cloneElement)(validationIcon, {
         UNSAFE_className: (0, $264pK$classNames)((0, ($parcel$interopDefault($264pK$textfield_vars_cssmodulejs))), 'spectrum-Textfield-validationIcon', validationIconClassName)
     });
+    // Add validation icon IDREF to aria-describedby when validationState is valid
+    let inputPropsAriaDescribedBy = inputProps['aria-describedby'];
+    if (!isInvalid && validationState === 'valid' && !isLoading && !isDisabled && (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))) inputProps['aria-describedby'] = [
+        inputPropsAriaDescribedBy,
+        validId
+    ].join(' ').trim();
     let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $264pK$useFocusRing)({
         isTextInput: true,
         autoFocus: autoFocus

package/dist/TextFieldBase.module.js

@@ -1,13 +1,15 @@
+import $264pK$intlStringsmodulejs from "./intlStrings.module.js";
 import "./textfield.54643fd6.css";
 import $264pK$textfield_vars_cssmodulejs from "./textfield_vars_css.module.js";
 import $264pK$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import $264pK$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
 import {createFocusableRef as $264pK$createFocusableRef, classNames as $264pK$classNames} from "@react-spectrum/utils";
 import {Field as $264pK$Field} from "@react-spectrum/label";
-import {mergeProps as $264pK$mergeProps} from "@react-aria/utils";
+import {useId as $264pK$useId, mergeProps as $264pK$mergeProps} from "@react-aria/utils";
 import $264pK$react, {forwardRef as $264pK$forwardRef, useRef as $264pK$useRef, useImperativeHandle as $264pK$useImperativeHandle, cloneElement as $264pK$cloneElement} from "react";
 import {useFocusRing as $264pK$useFocusRing} from "@react-aria/focus";
 import {useHover as $264pK$useHover} from "@react-aria/interactions";
+import {useLocalizedStringFormatter as $264pK$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
 function $parcel$interopDefault(a) {
@@ -32,6 +34,8 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $264pK$forwardRef)(function TextFieldBase(props, ref) {
     let { validationState: validationState = props.isInvalid ? 'invalid' : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $264pK$useHover)({
@@ -59,10 +63,22 @@ const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $264pK$forwa
             size: 'S'
         });
     }
-    let validationIcon = isInvalid ? /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiCheckmarkMedium), null);
+    let stringFormatter = (0, $264pK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($264pK$intlStringsmodulejs))), '@react-spectrum/textfield');
+    let validId = (0, $264pK$useId)();
+    let validationIcon = isInvalid ? /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $264pK$react).createElement((0, $264pK$spectrumiconsuiCheckmarkMedium), {
+        id: validId,
+        "aria-hidden": true,
+        "aria-label": stringFormatter.format('valid')
+    });
     let validation = /*#__PURE__*/ (0, $264pK$cloneElement)(validationIcon, {
         UNSAFE_className: (0, $264pK$classNames)((0, ($parcel$interopDefault($264pK$textfield_vars_cssmodulejs))), 'spectrum-Textfield-validationIcon', validationIconClassName)
     });
+    // Add validation icon IDREF to aria-describedby when validationState is valid
+    let inputPropsAriaDescribedBy = inputProps['aria-describedby'];
+    if (!isInvalid && validationState === 'valid' && !isLoading && !isDisabled && (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))) inputProps['aria-describedby'] = [
+        inputPropsAriaDescribedBy,
+        validId
+    ].join(' ').trim();
     let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $264pK$useFocusRing)({
         isTextInput: true,
         autoFocus: autoFocus

package/dist/TextFieldBase.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA6BM,MAAM,0DAAgB,CAAA,GAAA,iBAAS,EAAE,SAAS,cAAc,KAAyB,EAAE,GAA8D;IACtJ,IAAI,mBACF,kBAAkB,MAAM,SAAS,GAAG,YAAY,YAChD,IAAI,WACJ,UAAU,mBACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,mBACd,eAAe,cACf,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,EACjB,UAAU,YAAY,aACtB,SAAS,oBACT,gBAAgB,2BAChB,uBAAuB,oBACvB,gBAAgB,EACjB,GAAG;IACJ,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAA0C;IACrE,IAAI,WAAW,gBAAgB;IAE/B,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,IAAI,cAAiC,YAAY,aAAa;IAC9D,IAAI,YAAY,oBAAoB,aAAa,CAAC;IAElD,IAAI,MAAM;QACR,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAC9B,CAAA,GAAA,2DAAK,GACL,KAAK,KAAK,IAAI,AAAC,KAAK,KAAK,CAAS,gBAAgB,EAClD;QAGF,qBAAO,CAAA,GAAA,mBAAW,EAAE,MAAM;8BACxB;YACA,MAAM;QACR;IACF;IAEA,IAAI,iBAAiB,0BAAY,gCAAC,CAAA,GAAA,iCAAU,yBAAO,gCAAC,CAAA,GAAA,qCAAc;IAClE,IAAI,2BAAa,CAAA,GAAA,mBAAW,EAAE,gBAAgB;QAC5C,kBAAkB,CAAA,GAAA,iBAAS,EACzB,CAAA,GAAA,2DAAK,GACL,qCACA;IAEJ;IAEA,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC9C,aAAa;mBACb;IACF;IAEA,IAAI,0BACF,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,sBACA;YACE,+BAA+B;YAC/B,6BAA6B,oBAAoB,WAAW,CAAC;YAC7D,gCAAgC;YAChC,6BAA6B;YAC7B,iCAAiC;YACjC,cAAc,CAAC,oBAAoB;QACrC;qBAGJ,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,WAAW;QAClD,KAAK;QACL,MAAM,YAAY,IAAI;QACtB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,4BACA;YACE,gCAAgC;YAChC,cAAc;QAChB,GACA;QAGL,MACA,mBAAmB,CAAC,aAAa,CAAC,aAAa,aAAa,MAC5D,aAAa,kBACb;IAIL,qBACE,gCAAC,CAAA,GAAA,YAAI;QACF,GAAG,KAAK;QACT,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,8BACA;YACE,qCAAqC;QACvC;QAGJ,eAAe;QACf,KAAK;OACJ;AAGP","sources":["packages/@react-spectrum/textfield/src/TextFieldBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents, RefObject, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n  wrapperChildren?: ReactElement | ReactElement[],\n  inputClassName?: string,\n  validationIconClassName?: string,\n  multiLine?: boolean,\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n  loadingIndicator?: ReactElement,\n  isLoading?: boolean,\n  disableFocusRing?: boolean\n}\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let {\n    validationState = props.isInvalid ? 'invalid' : null,\n    icon,\n    isQuiet = false,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputClassName,\n    wrapperChildren,\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    inputRef: userInputRef,\n    isLoading,\n    loadingIndicator,\n    validationIconClassName,\n    disableFocusRing\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let domRef = useRef<HTMLDivElement>(null);\n  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = userInputRef || defaultInputRef;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n\n  if (icon) {\n    let UNSAFE_className = classNames(\n      styles,\n      icon.props && (icon.props as any).UNSAFE_className,\n      'spectrum-Textfield-icon'\n    );\n\n    icon = cloneElement(icon, {\n      UNSAFE_className,\n      size: 'S'\n    } as any);\n  }\n\n  let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n  let validation = cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      styles,\n      'spectrum-Textfield-validationIcon',\n      validationIconClassName\n    )\n  });\n\n  let {focusProps, isFocusVisible} = useFocusRing({\n    isTextInput: true,\n    autoFocus\n  });\n\n  let textField = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Textfield',\n          {\n            'spectrum-Textfield--invalid': isInvalid,\n            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n            'spectrum-Textfield--loadable': loadingIndicator,\n            'spectrum-Textfield--quiet': isQuiet,\n            'spectrum-Textfield--multiline': multiLine,\n            'focus-ring': !disableFocusRing && isFocusVisible\n          }\n        )\n      }>\n      <ElementType\n        {...mergeProps(inputProps, hoverProps, focusProps)}\n        ref={inputRef as any}\n        rows={multiLine ? 1 : undefined}\n        className={\n          classNames(\n            styles,\n            'spectrum-Textfield-input',\n            {\n              'spectrum-Textfield-inputIcon': icon,\n              'is-hovered': isHovered\n            },\n            inputClassName\n          )\n        } />\n      {icon}\n      {validationState && !isLoading && !isDisabled ? validation : null}\n      {isLoading && loadingIndicator}\n      {wrapperChildren}\n    </div>\n  );\n\n  return (\n    <Field\n      {...props}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      wrapperClassName={\n        classNames(\n          styles,\n          'spectrum-Textfield-wrapper',\n          {\n            'spectrum-Textfield-wrapper--quiet': isQuiet\n          }\n        )\n      }\n      showErrorIcon={false}\n      ref={domRef}>\n      {textField}\n    </Field>\n  );\n});\n"],"names":[],"version":3,"file":"TextFieldBase.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/TextFieldBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {PressEvents, RefObject, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n  wrapperChildren?: ReactElement | ReactElement[],\n  inputClassName?: string,\n  validationIconClassName?: string,\n  multiLine?: boolean,\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n  loadingIndicator?: ReactElement,\n  isLoading?: boolean,\n  disableFocusRing?: boolean\n}\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let {\n    validationState = props.isInvalid ? 'invalid' : null,\n    icon,\n    isQuiet = false,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputClassName,\n    wrapperChildren,\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    inputRef: userInputRef,\n    isLoading,\n    loadingIndicator,\n    validationIconClassName,\n    disableFocusRing\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let domRef = useRef<HTMLDivElement>(null);\n  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  let inputRef = userInputRef || defaultInputRef;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n\n  if (icon) {\n    let UNSAFE_className = classNames(\n      styles,\n      icon.props && (icon.props as any).UNSAFE_className,\n      'spectrum-Textfield-icon'\n    );\n\n    icon = cloneElement(icon, {\n      UNSAFE_className,\n      size: 'S'\n    } as any);\n  }\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/textfield');\n  let validId = useId();\n  let validationIcon = isInvalid\n    ? <AlertMedium />\n    : <CheckmarkMedium id={validId} aria-hidden aria-label={stringFormatter.format('valid')} />;\n  let validation = cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      styles,\n      'spectrum-Textfield-validationIcon',\n      validationIconClassName\n    )\n  });\n\n  // Add validation icon IDREF to aria-describedby when validationState is valid\n  let inputPropsAriaDescribedBy = inputProps['aria-describedby'];\n  if (\n    !isInvalid && validationState === 'valid' && !isLoading && !isDisabled &&\n    (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))\n  ) {\n    inputProps['aria-describedby'] = [inputPropsAriaDescribedBy, validId].join(' ').trim();\n  }\n\n  let {focusProps, isFocusVisible} = useFocusRing({\n    isTextInput: true,\n    autoFocus\n  });\n\n  let textField = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Textfield',\n          {\n            'spectrum-Textfield--invalid': isInvalid,\n            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n            'spectrum-Textfield--loadable': loadingIndicator,\n            'spectrum-Textfield--quiet': isQuiet,\n            'spectrum-Textfield--multiline': multiLine,\n            'focus-ring': !disableFocusRing && isFocusVisible\n          }\n        )\n      }>\n      <ElementType\n        {...mergeProps(inputProps, hoverProps, focusProps)}\n        ref={inputRef as any}\n        rows={multiLine ? 1 : undefined}\n        className={\n          classNames(\n            styles,\n            'spectrum-Textfield-input',\n            {\n              'spectrum-Textfield-inputIcon': icon,\n              'is-hovered': isHovered\n            },\n            inputClassName\n          )\n        } />\n      {icon}\n      {validationState && !isLoading && !isDisabled ? validation : null}\n      {isLoading && loadingIndicator}\n      {wrapperChildren}\n    </div>\n  );\n\n  return (\n    <Field\n      {...props}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      wrapperClassName={\n        classNames(\n          styles,\n          'spectrum-Textfield-wrapper',\n          {\n            'spectrum-Textfield-wrapper--quiet': isQuiet\n          }\n        )\n      }\n      showErrorIcon={false}\n      ref={domRef}>\n      {textField}\n    </Field>\n  );\n});\n"],"names":[],"version":3,"file":"TextFieldBase.module.js.map"}

package/dist/ar-AE.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "valid": `\u{635}\u{627}\u{644}\u{62D}`
+};
+
+
+//# sourceMappingURL=ar-AE.main.js.map

package/dist/ar-AE.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,4BAAI,CAAC;AACnC","sources":["packages/@react-spectrum/textfield/intl/ar-AE.json"],"sourcesContent":["{\n  \"valid\": \"صالح\"\n}\n"],"names":[],"version":3,"file":"ar-AE.main.js.map"}

package/dist/ar-AE.mjs

@@ -0,0 +1,8 @@
+var $0913a66d7c610208$exports = {};
+$0913a66d7c610208$exports = {
+    "valid": `\u{635}\u{627}\u{644}\u{62D}`
+};
+
+
+export {$0913a66d7c610208$exports as default};
+//# sourceMappingURL=ar-AE.module.js.map

package/dist/ar-AE.module.js

@@ -0,0 +1,8 @@
+var $0913a66d7c610208$exports = {};
+$0913a66d7c610208$exports = {
+    "valid": `\u{635}\u{627}\u{644}\u{62D}`
+};
+
+
+export {$0913a66d7c610208$exports as default};
+//# sourceMappingURL=ar-AE.module.js.map

package/dist/ar-AE.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,4BAAI,CAAC;AACnC","sources":["packages/@react-spectrum/textfield/intl/ar-AE.json"],"sourcesContent":["{\n  \"valid\": \"صالح\"\n}\n"],"names":[],"version":3,"file":"ar-AE.module.js.map"}

package/dist/bg-BG.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "valid": `\u{412}\u{430}\u{43B}\u{438}\u{434}\u{435}\u{43D}`
+};
+
+
+//# sourceMappingURL=bg-BG.main.js.map

package/dist/bg-BG.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,iDAAO,CAAC;AACtC","sources":["packages/@react-spectrum/textfield/intl/bg-BG.json"],"sourcesContent":["{\n  \"valid\": \"Валиден\"\n}\n"],"names":[],"version":3,"file":"bg-BG.main.js.map"}

package/dist/bg-BG.mjs

@@ -0,0 +1,8 @@
+var $068c9f18677c69da$exports = {};
+$068c9f18677c69da$exports = {
+    "valid": `\u{412}\u{430}\u{43B}\u{438}\u{434}\u{435}\u{43D}`
+};
+
+
+export {$068c9f18677c69da$exports as default};
+//# sourceMappingURL=bg-BG.module.js.map

package/dist/bg-BG.module.js

@@ -0,0 +1,8 @@
+var $068c9f18677c69da$exports = {};
+$068c9f18677c69da$exports = {
+    "valid": `\u{412}\u{430}\u{43B}\u{438}\u{434}\u{435}\u{43D}`
+};
+
+
+export {$068c9f18677c69da$exports as default};
+//# sourceMappingURL=bg-BG.module.js.map

package/dist/bg-BG.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,iDAAO,CAAC;AACtC","sources":["packages/@react-spectrum/textfield/intl/bg-BG.json"],"sourcesContent":["{\n  \"valid\": \"Валиден\"\n}\n"],"names":[],"version":3,"file":"bg-BG.module.js.map"}

package/dist/cs-CZ.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "valid": `Platn\xe9`
+};
+
+
+//# sourceMappingURL=cs-CZ.main.js.map

package/dist/cs-CZ.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,SAAM,CAAC;AACrC","sources":["packages/@react-spectrum/textfield/intl/cs-CZ.json"],"sourcesContent":["{\n  \"valid\": \"Platné\"\n}\n"],"names":[],"version":3,"file":"cs-CZ.main.js.map"}

package/dist/cs-CZ.mjs

@@ -0,0 +1,8 @@
+var $e85df324f9ee0179$exports = {};
+$e85df324f9ee0179$exports = {
+    "valid": `Platn\xe9`
+};
+
+
+export {$e85df324f9ee0179$exports as default};
+//# sourceMappingURL=cs-CZ.module.js.map

package/dist/cs-CZ.module.js

@@ -0,0 +1,8 @@
+var $e85df324f9ee0179$exports = {};
+$e85df324f9ee0179$exports = {
+    "valid": `Platn\xe9`
+};
+
+
+export {$e85df324f9ee0179$exports as default};
+//# sourceMappingURL=cs-CZ.module.js.map

package/dist/cs-CZ.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,SAAM,CAAC;AACrC","sources":["packages/@react-spectrum/textfield/intl/cs-CZ.json"],"sourcesContent":["{\n  \"valid\": \"Platné\"\n}\n"],"names":[],"version":3,"file":"cs-CZ.module.js.map"}

package/dist/da-DK.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "valid": `Gyldig`
+};
+
+
+//# sourceMappingURL=da-DK.main.js.map

package/dist/da-DK.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,MAAM,CAAC;AACrC","sources":["packages/@react-spectrum/textfield/intl/da-DK.json"],"sourcesContent":["{\n  \"valid\": \"Gyldig\"\n}\n"],"names":[],"version":3,"file":"da-DK.main.js.map"}

package/dist/da-DK.mjs

@@ -0,0 +1,8 @@
+var $cb6c30150c5ecac2$exports = {};
+$cb6c30150c5ecac2$exports = {
+    "valid": `Gyldig`
+};
+
+
+export {$cb6c30150c5ecac2$exports as default};
+//# sourceMappingURL=da-DK.module.js.map