@react-aria/textfield 3.14.10 → 3.16.0

package/dist/types.d.ts

@@ -36,7 +36,7 @@ type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrin
  * `TextareaHTMLAttributes`.
  */
 type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
-export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
+export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {
     /**
      * The HTML element used to render the input, e.g. 'input', or 'textarea'.
      * It determines whether certain HTML attributes will be included in `inputProps`.

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AA6BA;;;GAGG;AACH,6BAA6B;KAC1B,CAAC,IAAI,MAAM,uBAAuB,GAAG,uBAAuB,CAAC,CAAC,CAAC,SAAS,eAAe,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;CAC7G,CAAC;AAEF;;;GAGG;AACH,+BAA+B,IAAI,iBAAiB,CAAC;AAErD,0BAA0B,OAAO,CAAC;AAElC;;;GAGG;AACH,kCAAkC,MAAM,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE1F;;;;GAIG;AACH,gCAAgC,IAAI,CAAC,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;AAExF;;;;GAIG;AACH,mCAAmC,IAAI,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,CAAC;AAE7F;;;GAGG;AACH,yBAAyB,CAAC,SAAS,0BAA0B,IAAI,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAEhG,sCAAsC,CAAC,SAAS,0BAA0B,CAAE,SAAQ,kBAAkB;IACpG;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAA;CAC9E;AAED;;;;GAIG;AACH,wBAAwB,CAAC,SAAS,0BAA0B,IAAI,UAAU,wBAAwB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAE9G,+BAA+B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB,CAAE,SAAQ,gBAAgB;IAChH,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACnC,gEAAgE;IAChE,UAAU,EAAE,aAAa,GAAG,oBAAoB,gBAAgB,CAAC,CAAC;IAClE,8DAA8D;IAC9D,gBAAgB,EAAE,aAAa,CAAC;IAChC,gEAAgE;IAChE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB,EACpF,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAC9B,GAAG,EAAE,mBAAmB,CAAC,CAAC,GACzB,cAAc,CAAC,CAAC,CAoGlB;AClMD;IACE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAUD,sCAAsC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,uBAAuB,EAAE,QAAQ,EAAE,YAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,aAAa,CAiI5J;ACjJD,YAAY,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC","sources":["packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/useFormattedTextField.ts","packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/index.ts"],"sourcesContent":[null,null,null,"/*\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 */\nexport type {TextFieldAria} from './useTextField';\nexport {useTextField} from './useTextField';\nexport {useFormattedTextField} from './useFormattedTextField';\nexport type {AriaTextFieldOptions} from './useTextField';\nexport type {AriaTextFieldProps} from '@react-types/textfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AA6BA;;;GAGG;AACH,6BAA6B;KAC1B,CAAC,IAAI,MAAM,uBAAuB,GAAG,uBAAuB,CAAC,CAAC,CAAC,SAAS,eAAe,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;CAC7G,CAAC;AAEF;;;GAGG;AACH,+BAA+B,IAAI,iBAAiB,CAAC;AAErD,0BAA0B,OAAO,CAAC;AAElC;;;GAGG;AACH,kCAAkC,MAAM,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE1F;;;;GAIG;AACH,gCAAgC,IAAI,CAAC,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;AAExF;;;;GAIG;AACH,mCAAmC,IAAI,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,CAAC;AAE7F;;;GAGG;AACH,yBAAyB,CAAC,SAAS,0BAA0B,IAAI,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAEhG,sCAAsC,CAAC,SAAS,0BAA0B,CAAE,SAAQ,mBAAmB,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACjI;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAA;CAC9E;AAED;;;;GAIG;AACH,wBAAwB,CAAC,SAAS,0BAA0B,IAAI,UAAU,wBAAwB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAE9G,+BAA+B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB,CAAE,SAAQ,gBAAgB;IAChH,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACnC,gEAAgE;IAChE,UAAU,EAAE,aAAa,GAAG,oBAAoB,gBAAgB,CAAC,CAAC;IAClE,8DAA8D;IAC9D,gBAAgB,EAAE,aAAa,CAAC;IAChC,gEAAgE;IAChE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB,EACpF,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAC9B,GAAG,EAAE,mBAAmB,CAAC,CAAC,GACzB,cAAc,CAAC,CAAC,CAuGlB;ACrMD;IACE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AASD,sCAAsC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,uBAAuB,EAAE,QAAQ,EAAE,YAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,aAAa,CAoI5J;ACnJD,YAAY,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC","sources":["packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/useFormattedTextField.ts","packages/@react-aria/textfield/src/packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/index.ts"],"sourcesContent":[null,null,null,"/*\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 */\nexport type {TextFieldAria} from './useTextField';\nexport {useTextField} from './useTextField';\nexport {useFormattedTextField} from './useFormattedTextField';\nexport type {AriaTextFieldOptions} from './useTextField';\nexport type {AriaTextFieldProps} from '@react-types/textfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useFormattedTextField.main.js

@@ -22,8 +22,7 @@ $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$
 
 
 function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() {
-    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
-    typeof InputEvent.prototype.getTargetRanges === 'function';
+    return typeof window !== 'undefined' && window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function';
 }
 function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
     // All browsers implement the 'beforeinput' event natively except Firefox
@@ -34,9 +33,10 @@ function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
     // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
     let onBeforeInputFallback = (0, $6PuoT$reactariautils.useEffectEvent)((e)=>{
         let input = inputRef.current;
+        if (!input) return;
         // Compute the next value of the input if the event is allowed to proceed.
         // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-        let nextValue;
+        let nextValue = null;
         switch(e.inputType){
             case 'historyUndo':
             case 'historyRedo':
@@ -75,7 +75,7 @@ function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
         if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
     });
     (0, $6PuoT$react.useEffect)(()=>{
-        if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return;
+        if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() || !inputRef.current) return;
         let input = inputRef.current;
         input.addEventListener('beforeinput', onBeforeInputFallback, false);
         return ()=>{
@@ -115,7 +115,7 @@ function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
                 };
             },
             onCompositionEnd () {
-                if (!state.validate(inputRef.current.value)) {
+                if (inputRef.current && !state.validate(inputRef.current.value)) {
                     // Restore the input value in the DOM immediately so we can synchronously update the selection position.
                     // But also update the value in React state as well so it is correct for future updates.
                     let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;

package/dist/useFormattedTextField.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/textfield/src/useFormattedTextField.ts"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {mergeProps, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {TextFieldAria, useTextField} from './useTextField';\nimport {useEffect, useRef} from 'react';\n\ninterface FormattedTextFieldState {\n  validate: (val: string) => boolean,\n  setInputValue: (val: string) => void\n}\n\n\nfunction supportsNativeBeforeInputEvent() {\n  return typeof window !== 'undefined' &&\n    window.InputEvent &&\n    // @ts-ignore\n    typeof InputEvent.prototype.getTargetRanges === 'function';\n}\n\nexport function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {\n  // All browsers implement the 'beforeinput' event natively except Firefox\n  // (currently behind a flag as of Firefox 84). React's polyfill does not\n  // run in all cases that the native event fires, e.g. when deleting text.\n  // Use the native event if available so that we can prevent invalid deletions.\n  // We do not attempt to polyfill this in Firefox since it would be very complicated,\n  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.\n  let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {\n    let input = inputRef.current;\n\n    // Compute the next value of the input if the event is allowed to proceed.\n    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.\n    let nextValue: string;\n    switch (e.inputType) {\n      case 'historyUndo':\n      case 'historyRedo':\n        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,\n        // because presumably the input would have already been validated previously.\n        return;\n      case 'insertLineBreak':\n        // Explicitly allow \"insertLineBreak\" event, to allow onSubmit for \"enter\" key. e.data is null in this case.\n        return;\n      case 'deleteContent':\n      case 'deleteByCut':\n      case 'deleteByDrag':\n        nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteContentForward':\n        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16\n        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters\n        // or code points may be deleted. However, in our currently supported locales, there are no such cases.\n        // If we support additional locales in the future, this may need to change.\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)\n          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteContentBackward':\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)\n          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteSoftLineBackward':\n      case 'deleteHardLineBackward':\n        nextValue = input.value.slice(input.selectionStart);\n        break;\n      default:\n        if (e.data != null) {\n          nextValue =\n            input.value.slice(0, input.selectionStart) +\n            e.data +\n            input.value.slice(input.selectionEnd);\n        }\n        break;\n    }\n\n    // If we did not compute a value, or the new value is invalid, prevent the event\n    // so that the browser does not update the input text, move the selection, or add to\n    // the undo/redo stack.\n    if (nextValue == null || !state.validate(nextValue)) {\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    if (!supportsNativeBeforeInputEvent()) {\n      return;\n    }\n\n    let input = inputRef.current;\n    input.addEventListener('beforeinput', onBeforeInputFallback, false);\n    return () => {\n      input.removeEventListener('beforeinput', onBeforeInputFallback, false);\n    };\n  }, [inputRef, onBeforeInputFallback]);\n\n  let onBeforeInput = !supportsNativeBeforeInputEvent()\n    ? e => {\n      let nextValue =\n        e.target.value.slice(0, e.target.selectionStart) +\n        e.data +\n        e.target.value.slice(e.target.selectionEnd);\n\n      if (!state.validate(nextValue)) {\n        e.preventDefault();\n      }\n    }\n    : null;\n\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);\n\n  let compositionStartState = useRef(null);\n  return {\n    inputProps: mergeProps(\n      textFieldProps,\n      {\n        onBeforeInput,\n        onCompositionStart() {\n          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition\n          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur\n          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are\n          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,\n          // nor would we want to cancel them because the input from the user is incomplete at that point.\n          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel\n          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either\n          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when\n          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.\n          // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition\n          // are implemented, there is no other way to prevent composed input.\n          // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204\n          let {value, selectionStart, selectionEnd} = inputRef.current;\n          compositionStartState.current = {value, selectionStart, selectionEnd};\n        },\n        onCompositionEnd() {\n          if (!state.validate(inputRef.current.value)) {\n            // Restore the input value in the DOM immediately so we can synchronously update the selection position.\n            // But also update the value in React state as well so it is correct for future updates.\n            let {value, selectionStart, selectionEnd} = compositionStartState.current;\n            inputRef.current.value = value;\n            inputRef.current.setSelectionRange(selectionStart, selectionEnd);\n            state.setInputValue(value);\n          }\n        }\n      }\n    ),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  };\n}\n"],"names":[],"version":3,"file":"useFormattedTextField.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/textfield/src/useFormattedTextField.ts"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {mergeProps, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {TextFieldAria, useTextField} from './useTextField';\nimport {useEffect, useRef} from 'react';\n\ninterface FormattedTextFieldState {\n  validate: (val: string) => boolean,\n  setInputValue: (val: string) => void\n}\n\n\nfunction supportsNativeBeforeInputEvent() {\n  return typeof window !== 'undefined' &&\n    window.InputEvent &&\n    typeof InputEvent.prototype.getTargetRanges === 'function';\n}\n\nexport function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {\n  // All browsers implement the 'beforeinput' event natively except Firefox\n  // (currently behind a flag as of Firefox 84). React's polyfill does not\n  // run in all cases that the native event fires, e.g. when deleting text.\n  // Use the native event if available so that we can prevent invalid deletions.\n  // We do not attempt to polyfill this in Firefox since it would be very complicated,\n  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.\n  let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {\n    let input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    // Compute the next value of the input if the event is allowed to proceed.\n    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.\n    let nextValue: string | null = null;\n    switch (e.inputType) {\n      case 'historyUndo':\n      case 'historyRedo':\n        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,\n        // because presumably the input would have already been validated previously.\n        return;\n      case 'insertLineBreak':\n        // Explicitly allow \"insertLineBreak\" event, to allow onSubmit for \"enter\" key. e.data is null in this case.\n        return;\n      case 'deleteContent':\n      case 'deleteByCut':\n      case 'deleteByDrag':\n        nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteContentForward':\n        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16\n        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters\n        // or code points may be deleted. However, in our currently supported locales, there are no such cases.\n        // If we support additional locales in the future, this may need to change.\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd! + 1)\n          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteContentBackward':\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart! - 1) + input.value.slice(input.selectionStart!)\n          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteSoftLineBackward':\n      case 'deleteHardLineBackward':\n        nextValue = input.value.slice(input.selectionStart!);\n        break;\n      default:\n        if (e.data != null) {\n          nextValue =\n            input.value.slice(0, input.selectionStart!) +\n            e.data +\n            input.value.slice(input.selectionEnd!);\n        }\n        break;\n    }\n\n    // If we did not compute a value, or the new value is invalid, prevent the event\n    // so that the browser does not update the input text, move the selection, or add to\n    // the undo/redo stack.\n    if (nextValue == null || !state.validate(nextValue)) {\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    if (!supportsNativeBeforeInputEvent() || !inputRef.current) {\n      return;\n    }\n\n    let input = inputRef.current;\n    input.addEventListener('beforeinput', onBeforeInputFallback, false);\n    return () => {\n      input.removeEventListener('beforeinput', onBeforeInputFallback, false);\n    };\n  }, [inputRef, onBeforeInputFallback]);\n\n  let onBeforeInput = !supportsNativeBeforeInputEvent()\n    ? e => {\n      let nextValue =\n        e.target.value.slice(0, e.target.selectionStart) +\n        e.data +\n        e.target.value.slice(e.target.selectionEnd);\n\n      if (!state.validate(nextValue)) {\n        e.preventDefault();\n      }\n    }\n    : null;\n\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);\n\n  let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null);\n  return {\n    inputProps: mergeProps(\n      textFieldProps,\n      {\n        onBeforeInput,\n        onCompositionStart() {\n          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition\n          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur\n          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are\n          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,\n          // nor would we want to cancel them because the input from the user is incomplete at that point.\n          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel\n          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either\n          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when\n          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.\n          // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition\n          // are implemented, there is no other way to prevent composed input.\n          // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204\n          let {value, selectionStart, selectionEnd} = inputRef.current!;\n          compositionStartState.current = {value, selectionStart, selectionEnd};\n        },\n        onCompositionEnd() {\n          if (inputRef.current && !state.validate(inputRef.current.value)) {\n            // Restore the input value in the DOM immediately so we can synchronously update the selection position.\n            // But also update the value in React state as well so it is correct for future updates.\n            let {value, selectionStart, selectionEnd} = compositionStartState.current!;\n            inputRef.current.value = value;\n            inputRef.current.setSelectionRange(selectionStart, selectionEnd);\n            state.setInputValue(value);\n          }\n        }\n      }\n    ),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  };\n}\n"],"names":[],"version":3,"file":"useFormattedTextField.main.js.map"}

package/dist/useFormattedTextField.mjs

@@ -16,8 +16,7 @@ import {useEffect as $jyGKS$useEffect, useRef as $jyGKS$useRef} from "react";
 
 
 function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
-    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
-    typeof InputEvent.prototype.getTargetRanges === 'function';
+    return typeof window !== 'undefined' && window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function';
 }
 function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
     // All browsers implement the 'beforeinput' event natively except Firefox
@@ -28,9 +27,10 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
     // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
     let onBeforeInputFallback = (0, $jyGKS$useEffectEvent)((e)=>{
         let input = inputRef.current;
+        if (!input) return;
         // Compute the next value of the input if the event is allowed to proceed.
         // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-        let nextValue;
+        let nextValue = null;
         switch(e.inputType){
             case 'historyUndo':
             case 'historyRedo':
@@ -69,7 +69,7 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
         if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
     });
     (0, $jyGKS$useEffect)(()=>{
-        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
+        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent() || !inputRef.current) return;
         let input = inputRef.current;
         input.addEventListener('beforeinput', onBeforeInputFallback, false);
         return ()=>{
@@ -109,7 +109,7 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
                 };
             },
             onCompositionEnd () {
-                if (!state.validate(inputRef.current.value)) {
+                if (inputRef.current && !state.validate(inputRef.current.value)) {
                     // Restore the input value in the DOM immediately so we can synchronously update the selection position.
                     // But also update the value in React state as well so it is correct for future updates.
                     let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;

package/dist/useFormattedTextField.module.js

@@ -16,8 +16,7 @@ import {useEffect as $jyGKS$useEffect, useRef as $jyGKS$useRef} from "react";
 
 
 function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
-    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
-    typeof InputEvent.prototype.getTargetRanges === 'function';
+    return typeof window !== 'undefined' && window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function';
 }
 function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
     // All browsers implement the 'beforeinput' event natively except Firefox
@@ -28,9 +27,10 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
     // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
     let onBeforeInputFallback = (0, $jyGKS$useEffectEvent)((e)=>{
         let input = inputRef.current;
+        if (!input) return;
         // Compute the next value of the input if the event is allowed to proceed.
         // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-        let nextValue;
+        let nextValue = null;
         switch(e.inputType){
             case 'historyUndo':
             case 'historyRedo':
@@ -69,7 +69,7 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
         if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
     });
     (0, $jyGKS$useEffect)(()=>{
-        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
+        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent() || !inputRef.current) return;
         let input = inputRef.current;
         input.addEventListener('beforeinput', onBeforeInputFallback, false);
         return ()=>{
@@ -109,7 +109,7 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
                 };
             },
             onCompositionEnd () {
-                if (!state.validate(inputRef.current.value)) {
+                if (inputRef.current && !state.validate(inputRef.current.value)) {
                     // Restore the input value in the DOM immediately so we can synchronously update the selection position.
                     // But also update the value in React state as well so it is correct for future updates.
                     let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;

package/dist/useFormattedTextField.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/textfield/src/useFormattedTextField.ts"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {mergeProps, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {TextFieldAria, useTextField} from './useTextField';\nimport {useEffect, useRef} from 'react';\n\ninterface FormattedTextFieldState {\n  validate: (val: string) => boolean,\n  setInputValue: (val: string) => void\n}\n\n\nfunction supportsNativeBeforeInputEvent() {\n  return typeof window !== 'undefined' &&\n    window.InputEvent &&\n    // @ts-ignore\n    typeof InputEvent.prototype.getTargetRanges === 'function';\n}\n\nexport function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {\n  // All browsers implement the 'beforeinput' event natively except Firefox\n  // (currently behind a flag as of Firefox 84). React's polyfill does not\n  // run in all cases that the native event fires, e.g. when deleting text.\n  // Use the native event if available so that we can prevent invalid deletions.\n  // We do not attempt to polyfill this in Firefox since it would be very complicated,\n  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.\n  let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {\n    let input = inputRef.current;\n\n    // Compute the next value of the input if the event is allowed to proceed.\n    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.\n    let nextValue: string;\n    switch (e.inputType) {\n      case 'historyUndo':\n      case 'historyRedo':\n        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,\n        // because presumably the input would have already been validated previously.\n        return;\n      case 'insertLineBreak':\n        // Explicitly allow \"insertLineBreak\" event, to allow onSubmit for \"enter\" key. e.data is null in this case.\n        return;\n      case 'deleteContent':\n      case 'deleteByCut':\n      case 'deleteByDrag':\n        nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteContentForward':\n        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16\n        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters\n        // or code points may be deleted. However, in our currently supported locales, there are no such cases.\n        // If we support additional locales in the future, this may need to change.\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)\n          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteContentBackward':\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)\n          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);\n        break;\n      case 'deleteSoftLineBackward':\n      case 'deleteHardLineBackward':\n        nextValue = input.value.slice(input.selectionStart);\n        break;\n      default:\n        if (e.data != null) {\n          nextValue =\n            input.value.slice(0, input.selectionStart) +\n            e.data +\n            input.value.slice(input.selectionEnd);\n        }\n        break;\n    }\n\n    // If we did not compute a value, or the new value is invalid, prevent the event\n    // so that the browser does not update the input text, move the selection, or add to\n    // the undo/redo stack.\n    if (nextValue == null || !state.validate(nextValue)) {\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    if (!supportsNativeBeforeInputEvent()) {\n      return;\n    }\n\n    let input = inputRef.current;\n    input.addEventListener('beforeinput', onBeforeInputFallback, false);\n    return () => {\n      input.removeEventListener('beforeinput', onBeforeInputFallback, false);\n    };\n  }, [inputRef, onBeforeInputFallback]);\n\n  let onBeforeInput = !supportsNativeBeforeInputEvent()\n    ? e => {\n      let nextValue =\n        e.target.value.slice(0, e.target.selectionStart) +\n        e.data +\n        e.target.value.slice(e.target.selectionEnd);\n\n      if (!state.validate(nextValue)) {\n        e.preventDefault();\n      }\n    }\n    : null;\n\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);\n\n  let compositionStartState = useRef(null);\n  return {\n    inputProps: mergeProps(\n      textFieldProps,\n      {\n        onBeforeInput,\n        onCompositionStart() {\n          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition\n          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur\n          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are\n          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,\n          // nor would we want to cancel them because the input from the user is incomplete at that point.\n          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel\n          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either\n          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when\n          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.\n          // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition\n          // are implemented, there is no other way to prevent composed input.\n          // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204\n          let {value, selectionStart, selectionEnd} = inputRef.current;\n          compositionStartState.current = {value, selectionStart, selectionEnd};\n        },\n        onCompositionEnd() {\n          if (!state.validate(inputRef.current.value)) {\n            // Restore the input value in the DOM immediately so we can synchronously update the selection position.\n            // But also update the value in React state as well so it is correct for future updates.\n            let {value, selectionStart, selectionEnd} = compositionStartState.current;\n            inputRef.current.value = value;\n            inputRef.current.setSelectionRange(selectionStart, selectionEnd);\n            state.setInputValue(value);\n          }\n        }\n      }\n    ),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  };\n}\n"],"names":[],"version":3,"file":"useFormattedTextField.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAcD,SAAS;IACP,OAAO,OAAO,WAAW,eACvB,OAAO,UAAU,IACjB,OAAO,WAAW,SAAS,CAAC,eAAe,KAAK;AACpD;AAEO,SAAS,0CAAsB,KAAyB,EAAE,KAA8B,EAAE,QAA4C;IAC3I,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,8EAA8E;IAC9E,oFAAoF;IACpF,yFAAyF;IACzF,IAAI,wBAAwB,CAAA,GAAA,qBAAa,EAAE,CAAC;QAC1C,IAAI,QAAQ,SAAS,OAAO;QAC5B,IAAI,CAAC,OACH;QAGF,0EAA0E;QAC1E,4GAA4G;QAC5G,IAAI,YAA2B;QAC/B,OAAQ,EAAE,SAAS;YACjB,KAAK;YACL,KAAK;gBACH,4FAA4F;gBAC5F,6EAA6E;gBAC7E;YACF,KAAK;gBACH,4GAA4G;gBAC5G;YACF,KAAK;YACL,KAAK;YACL,KAAK;gBACH,YAAY,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBAC9F;YACF,KAAK;gBACH,iGAAiG;gBACjG,kGAAkG;gBAClG,uGAAuG;gBACvG,2EAA2E;gBAC3E,YAAY,MAAM,YAAY,KAAK,MAAM,cAAc,GACnD,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY,GAAI,KACtF,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBACtF;YACF,KAAK;gBACH,YAAY,MAAM,YAAY,KAAK,MAAM,cAAc,GACnD,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,GAAI,KAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,cAAc,IACxF,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBACtF;YACF,KAAK;YACL,KAAK;gBACH,YAAY,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,cAAc;gBAClD;YACF;gBACE,IAAI,EAAE,IAAI,IAAI,MACZ,YACE,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IACzC,EAAE,IAAI,GACN,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBAExC;QACJ;QAEA,gFAAgF;QAChF,oFAAoF;QACpF,uBAAuB;QACvB,IAAI,aAAa,QAAQ,CAAC,MAAM,QAAQ,CAAC,YACvC,EAAE,cAAc;IAEpB;IAEA,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAC,0DAAoC,CAAC,SAAS,OAAO,EACxD;QAGF,IAAI,QAAQ,SAAS,OAAO;QAC5B,MAAM,gBAAgB,CAAC,eAAe,uBAAuB;QAC7D,OAAO;YACL,MAAM,mBAAmB,CAAC,eAAe,uBAAuB;QAClE;IACF,GAAG;QAAC;QAAU;KAAsB;IAEpC,IAAI,gBAAgB,CAAC,yDACjB,CAAA;QACA,IAAI,YACF,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,cAAc,IAC/C,EAAE,IAAI,GACN,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,YAAY;QAE5C,IAAI,CAAC,MAAM,QAAQ,CAAC,YAClB,EAAE,cAAc;IAEpB,IACE;IAEJ,IAAI,cAAC,UAAU,EAAE,YAAY,cAAc,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,wCAAW,EAAE,OAAO;IAEvH,IAAI,wBAAwB,CAAA,GAAA,aAAK,EAAsF;IACvH,OAAO;QACL,YAAY,CAAA,GAAA,iBAAS,EACnB,gBACA;2BACE;YACA;gBACE,4FAA4F;gBAC5F,+FAA+F;gBAC/F,gGAAgG;gBAChG,kGAAkG;gBAClG,gGAAgG;gBAChG,mGAAmG;gBACnG,oGAAoG;gBACpG,kGAAkG;gBAClG,qGAAqG;gBACrG,yGAAyG;gBACzG,oEAAoE;gBACpE,oEAAoE;gBACpE,IAAI,SAAC,KAAK,kBAAE,cAAc,gBAAE,YAAY,EAAC,GAAG,SAAS,OAAO;gBAC5D,sBAAsB,OAAO,GAAG;2BAAC;oCAAO;kCAAgB;gBAAY;YACtE;YACA;gBACE,IAAI,SAAS,OAAO,IAAI,CAAC,MAAM,QAAQ,CAAC,SAAS,OAAO,CAAC,KAAK,GAAG;oBAC/D,wGAAwG;oBACxG,wFAAwF;oBACxF,IAAI,SAAC,KAAK,kBAAE,cAAc,gBAAE,YAAY,EAAC,GAAG,sBAAsB,OAAO;oBACzE,SAAS,OAAO,CAAC,KAAK,GAAG;oBACzB,SAAS,OAAO,CAAC,iBAAiB,CAAC,gBAAgB;oBACnD,MAAM,aAAa,CAAC;gBACtB;YACF;QACF;oBAEF;0BACA;2BACA;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/textfield/src/useFormattedTextField.ts"],"sourcesContent":["/*\n * Copyright 2021 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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {mergeProps, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {TextFieldAria, useTextField} from './useTextField';\nimport {useEffect, useRef} from 'react';\n\ninterface FormattedTextFieldState {\n  validate: (val: string) => boolean,\n  setInputValue: (val: string) => void\n}\n\n\nfunction supportsNativeBeforeInputEvent() {\n  return typeof window !== 'undefined' &&\n    window.InputEvent &&\n    typeof InputEvent.prototype.getTargetRanges === 'function';\n}\n\nexport function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {\n  // All browsers implement the 'beforeinput' event natively except Firefox\n  // (currently behind a flag as of Firefox 84). React's polyfill does not\n  // run in all cases that the native event fires, e.g. when deleting text.\n  // Use the native event if available so that we can prevent invalid deletions.\n  // We do not attempt to polyfill this in Firefox since it would be very complicated,\n  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.\n  let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {\n    let input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    // Compute the next value of the input if the event is allowed to proceed.\n    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.\n    let nextValue: string | null = null;\n    switch (e.inputType) {\n      case 'historyUndo':\n      case 'historyRedo':\n        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,\n        // because presumably the input would have already been validated previously.\n        return;\n      case 'insertLineBreak':\n        // Explicitly allow \"insertLineBreak\" event, to allow onSubmit for \"enter\" key. e.data is null in this case.\n        return;\n      case 'deleteContent':\n      case 'deleteByCut':\n      case 'deleteByDrag':\n        nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteContentForward':\n        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16\n        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters\n        // or code points may be deleted. However, in our currently supported locales, there are no such cases.\n        // If we support additional locales in the future, this may need to change.\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd! + 1)\n          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteContentBackward':\n        nextValue = input.selectionEnd === input.selectionStart\n          ? input.value.slice(0, input.selectionStart! - 1) + input.value.slice(input.selectionStart!)\n          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);\n        break;\n      case 'deleteSoftLineBackward':\n      case 'deleteHardLineBackward':\n        nextValue = input.value.slice(input.selectionStart!);\n        break;\n      default:\n        if (e.data != null) {\n          nextValue =\n            input.value.slice(0, input.selectionStart!) +\n            e.data +\n            input.value.slice(input.selectionEnd!);\n        }\n        break;\n    }\n\n    // If we did not compute a value, or the new value is invalid, prevent the event\n    // so that the browser does not update the input text, move the selection, or add to\n    // the undo/redo stack.\n    if (nextValue == null || !state.validate(nextValue)) {\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    if (!supportsNativeBeforeInputEvent() || !inputRef.current) {\n      return;\n    }\n\n    let input = inputRef.current;\n    input.addEventListener('beforeinput', onBeforeInputFallback, false);\n    return () => {\n      input.removeEventListener('beforeinput', onBeforeInputFallback, false);\n    };\n  }, [inputRef, onBeforeInputFallback]);\n\n  let onBeforeInput = !supportsNativeBeforeInputEvent()\n    ? e => {\n      let nextValue =\n        e.target.value.slice(0, e.target.selectionStart) +\n        e.data +\n        e.target.value.slice(e.target.selectionEnd);\n\n      if (!state.validate(nextValue)) {\n        e.preventDefault();\n      }\n    }\n    : null;\n\n  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);\n\n  let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null);\n  return {\n    inputProps: mergeProps(\n      textFieldProps,\n      {\n        onBeforeInput,\n        onCompositionStart() {\n          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition\n          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur\n          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are\n          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,\n          // nor would we want to cancel them because the input from the user is incomplete at that point.\n          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel\n          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either\n          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when\n          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.\n          // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition\n          // are implemented, there is no other way to prevent composed input.\n          // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204\n          let {value, selectionStart, selectionEnd} = inputRef.current!;\n          compositionStartState.current = {value, selectionStart, selectionEnd};\n        },\n        onCompositionEnd() {\n          if (inputRef.current && !state.validate(inputRef.current.value)) {\n            // Restore the input value in the DOM immediately so we can synchronously update the selection position.\n            // But also update the value in React state as well so it is correct for future updates.\n            let {value, selectionStart, selectionEnd} = compositionStartState.current!;\n            inputRef.current.value = value;\n            inputRef.current.setSelectionRange(selectionStart, selectionEnd);\n            state.setInputValue(value);\n          }\n        }\n      }\n    ),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  };\n}\n"],"names":[],"version":3,"file":"useFormattedTextField.module.js.map"}

package/dist/useTextField.main.js

@@ -83,6 +83,7 @@ function $9076f978e02df845$export$712718f7aec83d5(props, ref) {
             'aria-activedescendant': props['aria-activedescendant'],
             'aria-autocomplete': props['aria-autocomplete'],
             'aria-haspopup': props['aria-haspopup'],
+            'aria-controls': props['aria-controls'],
             value: value,
             onChange: (e)=>setValue(e.target.value),
             autoComplete: props.autoComplete,
@@ -92,6 +93,8 @@ function $9076f978e02df845$export$712718f7aec83d5(props, ref) {
             name: props.name,
             placeholder: props.placeholder,
             inputMode: props.inputMode,
+            autoCorrect: props.autoCorrect,
+            spellCheck: props.spellCheck,
             // Clipboard events
             onCopy: props.onCopy,
             onCut: props.onCut,

package/dist/useTextField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmGM,SAAS,yCACd,KAA8B,EAC9B,GAA0B;IAE1B,IAAI,oBACF,mBAAmB,qBACnB,aAAa,mBACb,aAAa,mBACb,aAAa,aACb,OAAO,4BACP,qBAAqB,QACtB,GAAqD;IACtD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAU,MAAM,KAAK,EAAE,MAAM,YAAY,IAAI,IAAI,MAAM,QAAQ;IACxG,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW,EAAE,OAAO;IAC3C,IAAI,kBAAkB,CAAA,GAAA,8CAAqB,EAAE;QAC3C,GAAG,KAAK;eACR;IACF;IACA,IAAI,aAAC,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,gBAAgB,iBAAiB;IACxF,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,8BAAO,EAAE;QAC3E,GAAG,KAAK;mBACR;QACA,cAAc,MAAM,YAAY,IAAI;IACtC;IACA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,MAAM,iBAAiB;cACrB;QACA,SAAS,MAAM,OAAO;IACxB;IAEA,CAAA,GAAA,kCAAW,EAAE,KAAK,OAAO;IACzB,CAAA,GAAA,sCAAgB,EAAE,OAAO,iBAAiB;IAE1C,CAAA,GAAA,sBAAQ,EAAE;QACR,wGAAwG;QACxG,gGAAgG;QAChG,4FAA4F;QAC5F,2FAA2F;QAC3F,wBAAwB;QACxB,iDAAiD;QACjD,iDAAiD;QACjD,IAAI,IAAI,OAAO,YAAY,CAAA,GAAA,oCAAa,EAAE,IAAI,OAAO,EAAE,mBAAmB,EAAE;YAC1E,IAAI,QAAQ,IAAI,OAAO;YACvB,OAAO,cAAc,CAAC,OAAO,gBAAgB;gBAC3C,KAAK,IAAM,MAAM,KAAK;gBACtB,KAAK,KAAO;gBACZ,cAAc;YAChB;QACF;IACF,GAAG;QAAC;KAAI;IAER,OAAO;oBACL;QACA,YAAY,CAAA,GAAA,gCAAS,EACnB,UACA,qBAAqB,UAAU,iBAAiB,WAChD;YACE,UAAU;YACV,UAAU;YACV,UAAU,cAAc,uBAAuB;YAC/C,iBAAiB,AAAC,cAAc,uBAAuB,UAAW;YAClE,gBAAgB,aAAa;YAC7B,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,yBAAyB,KAAK,CAAC,wBAAwB;YACvD,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,iBAAiB,KAAK,CAAC,gBAAgB;mBACvC;YACA,UAAU,CAAC,IAAqC,SAAS,EAAE,MAAM,CAAC,KAAK;YACvE,cAAc,MAAM,YAAY;YAChC,gBAAgB,MAAM,cAAc;YACpC,WAAW,MAAM,SAAS;YAC1B,WAAW,MAAM,SAAS;YAC1B,MAAM,MAAM,IAAI;YAChB,aAAa,MAAM,WAAW;YAC9B,WAAW,MAAM,SAAS;YAE1B,mBAAmB;YACnB,QAAQ,MAAM,MAAM;YACpB,OAAO,MAAM,KAAK;YAClB,SAAS,MAAM,OAAO;YAEtB,qBAAqB;YACrB,kBAAkB,MAAM,gBAAgB;YACxC,oBAAoB,MAAM,kBAAkB;YAC5C,qBAAqB,MAAM,mBAAmB;YAE9C,mBAAmB;YACnB,UAAU,MAAM,QAAQ;YAExB,eAAe;YACf,eAAe,MAAM,aAAa;YAClC,SAAS,MAAM,OAAO;YACtB,GAAG,cAAc;YACjB,GAAG,UAAU;QACf;0BAEF;2BACA;mBACA;0BACA;2BACA;IACF;AACF","sources":["packages/@react-aria/textfield/src/useTextField.ts"],"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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {\n  ChangeEvent,\n  HTMLAttributes,\n  type JSX,\n  LabelHTMLAttributes,\n  RefObject,\n  useEffect\n} from 'react';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';\nimport {useControlledState} from '@react-stately/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\n\n/**\n * A map of HTML element names and their interface types.\n * For example `'a'` -> `HTMLAnchorElement`.\n */\ntype IntrinsicHTMLElements = {\n  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never\n};\n\n/**\n * A map of HTML element names and their attribute interface types.\n * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.\n */\ntype IntrinsicHTMLAttributes = JSX.IntrinsicElements;\n\ntype DefaultElementType = 'input';\n\n/**\n * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,\n * `textarea`.\n */\ntype TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;\n\n/**\n * The HTML element interfaces that `useTextField` supports based on what is\n * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,\n * `HTMLTextAreaElement`.\n */\ntype TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;\n\n/**\n * The HTML attributes interfaces that `useTextField` supports based on what\n * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;\n\n/**\n * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];\n\nexport interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {\n  /**\n   * The HTML element used to render the input, e.g. 'input', or 'textarea'.\n   * It determines whether certain HTML attributes will be included in `inputProps`.\n   * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).\n   * @default 'input'\n   */\n  inputElementType?: T,\n  /**\n   * Controls whether inputted text is automatically capitalized and, if so, in what manner.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).\n   */\n  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\n}\n\n/**\n * The type of `ref` object that can be passed to `useTextField` based on the given\n * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,\n * `RefObject<HTMLTextAreaElement>`.\n */\ntype TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: TextFieldInputProps<T>,\n  /** Props for the text field's visible label element, if any. */\n  labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * @param props - Props for the text field.\n * @param ref - Ref to the HTML input or textarea element.\n */\nexport function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(\n  props: AriaTextFieldOptions<T>,\n  ref: TextFieldRefObject<T>\n): TextFieldAria<T> {\n  let {\n    inputElementType = 'input',\n    isDisabled = false,\n    isRequired = false,\n    isReadOnly = false,\n    type = 'text',\n    validationBehavior = 'aria'\n  }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);\n  let {focusableProps} = useFocusable(props, ref);\n  let validationState = useFormValidationState({\n    ...props,\n    value\n  });\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  const inputOnlyProps = {\n    type,\n    pattern: props.pattern\n  };\n\n  useFormReset(ref, value, setValue);\n  useFormValidation(props, validationState, ref);\n\n  useEffect(() => {\n    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.\n    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,\n    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our\n    // textareas are always controlled. React is planning on removing this synchronization in a\n    // future major version.\n    // https://github.com/facebook/react/issues/19474\n    // https://github.com/facebook/react/issues/11896\n    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {\n      let input = ref.current;\n      Object.defineProperty(input, 'defaultValue', {\n        get: () => input.value,\n        set: () => {},\n        configurable: true\n      });\n    }\n  }, [ref]);\n\n  return {\n    labelProps,\n    inputProps: mergeProps(\n      domProps,\n      inputElementType === 'input' ? inputOnlyProps : undefined,\n      {\n        disabled: isDisabled,\n        readOnly: isReadOnly,\n        required: isRequired && validationBehavior === 'native',\n        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-activedescendant': props['aria-activedescendant'],\n        'aria-autocomplete': props['aria-autocomplete'],\n        'aria-haspopup': props['aria-haspopup'],\n        value,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),\n        autoComplete: props.autoComplete,\n        autoCapitalize: props.autoCapitalize,\n        maxLength: props.maxLength,\n        minLength: props.minLength,\n        name: props.name,\n        placeholder: props.placeholder,\n        inputMode: props.inputMode,\n\n        // Clipboard events\n        onCopy: props.onCopy,\n        onCut: props.onCut,\n        onPaste: props.onPaste,\n\n        // Composition events\n        onCompositionEnd: props.onCompositionEnd,\n        onCompositionStart: props.onCompositionStart,\n        onCompositionUpdate: props.onCompositionUpdate,\n\n        // Selection events\n        onSelect: props.onSelect,\n\n        // Input events\n        onBeforeInput: props.onBeforeInput,\n        onInput: props.onInput,\n        ...focusableProps,\n        ...fieldProps\n      }\n    ),\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useTextField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmGM,SAAS,yCACd,KAA8B,EAC9B,GAA0B;IAE1B,IAAI,oBACF,mBAAmB,qBACnB,aAAa,mBACb,aAAa,mBACb,aAAa,aACb,OAAO,4BACP,qBAAqB,QACtB,GAAG;IACJ,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAU,MAAM,KAAK,EAAE,MAAM,YAAY,IAAI,IAAI,MAAM,QAAQ;IACxG,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW,EAA+B,OAAO;IACxE,IAAI,kBAAkB,CAAA,GAAA,8CAAqB,EAAE;QAC3C,GAAG,KAAK;eACR;IACF;IACA,IAAI,aAAC,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,gBAAgB,iBAAiB;IACxF,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,8BAAO,EAAE;QAC3E,GAAG,KAAK;mBACR;QACA,cAAc,MAAM,YAAY,IAAI;IACtC;IACA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,MAAM,iBAAiB;cACrB;QACA,SAAS,MAAM,OAAO;IACxB;IAEA,CAAA,GAAA,kCAAW,EAAE,KAAK,OAAO;IACzB,CAAA,GAAA,sCAAgB,EAAE,OAAO,iBAAiB;IAE1C,CAAA,GAAA,sBAAQ,EAAE;QACR,wGAAwG;QACxG,gGAAgG;QAChG,4FAA4F;QAC5F,2FAA2F;QAC3F,wBAAwB;QACxB,iDAAiD;QACjD,iDAAiD;QACjD,IAAI,IAAI,OAAO,YAAY,CAAA,GAAA,oCAAa,EAAE,IAAI,OAAO,EAAE,mBAAmB,EAAE;YAC1E,IAAI,QAAQ,IAAI,OAAO;YACvB,OAAO,cAAc,CAAC,OAAO,gBAAgB;gBAC3C,KAAK,IAAM,MAAM,KAAK;gBACtB,KAAK,KAAO;gBACZ,cAAc;YAChB;QACF;IACF,GAAG;QAAC;KAAI;IAER,OAAO;oBACL;QACA,YAAY,CAAA,GAAA,gCAAS,EACnB,UACA,qBAAqB,UAAU,iBAAiB,WAChD;YACE,UAAU;YACV,UAAU;YACV,UAAU,cAAc,uBAAuB;YAC/C,iBAAiB,AAAC,cAAc,uBAAuB,UAAW;YAClE,gBAAgB,aAAa;YAC7B,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,yBAAyB,KAAK,CAAC,wBAAwB;YACvD,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,iBAAiB,KAAK,CAAC,gBAAgB;YACvC,iBAAiB,KAAK,CAAC,gBAAgB;mBACvC;YACA,UAAU,CAAC,IAAqC,SAAS,EAAE,MAAM,CAAC,KAAK;YACvE,cAAc,MAAM,YAAY;YAChC,gBAAgB,MAAM,cAAc;YACpC,WAAW,MAAM,SAAS;YAC1B,WAAW,MAAM,SAAS;YAC1B,MAAM,MAAM,IAAI;YAChB,aAAa,MAAM,WAAW;YAC9B,WAAW,MAAM,SAAS;YAC1B,aAAa,MAAM,WAAW;YAC9B,YAAY,MAAM,UAAU;YAE5B,mBAAmB;YACnB,QAAQ,MAAM,MAAM;YACpB,OAAO,MAAM,KAAK;YAClB,SAAS,MAAM,OAAO;YAEtB,qBAAqB;YACrB,kBAAkB,MAAM,gBAAgB;YACxC,oBAAoB,MAAM,kBAAkB;YAC5C,qBAAqB,MAAM,mBAAmB;YAE9C,mBAAmB;YACnB,UAAU,MAAM,QAAQ;YAExB,eAAe;YACf,eAAe,MAAM,aAAa;YAClC,SAAS,MAAM,OAAO;YACtB,GAAG,cAAc;YACjB,GAAG,UAAU;QACf;0BAEF;2BACA;mBACA;0BACA;2BACA;IACF;AACF","sources":["packages/@react-aria/textfield/src/useTextField.ts"],"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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {\n  ChangeEvent,\n  HTMLAttributes,\n  type JSX,\n  LabelHTMLAttributes,\n  RefObject,\n  useEffect\n} from 'react';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';\nimport {useControlledState} from '@react-stately/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\n\n/**\n * A map of HTML element names and their interface types.\n * For example `'a'` -> `HTMLAnchorElement`.\n */\ntype IntrinsicHTMLElements = {\n  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never\n};\n\n/**\n * A map of HTML element names and their attribute interface types.\n * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.\n */\ntype IntrinsicHTMLAttributes = JSX.IntrinsicElements;\n\ntype DefaultElementType = 'input';\n\n/**\n * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,\n * `textarea`.\n */\ntype TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;\n\n/**\n * The HTML element interfaces that `useTextField` supports based on what is\n * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,\n * `HTMLTextAreaElement`.\n */\ntype TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;\n\n/**\n * The HTML attributes interfaces that `useTextField` supports based on what\n * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;\n\n/**\n * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];\n\nexport interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {\n  /**\n   * The HTML element used to render the input, e.g. 'input', or 'textarea'.\n   * It determines whether certain HTML attributes will be included in `inputProps`.\n   * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).\n   * @default 'input'\n   */\n  inputElementType?: T,\n  /**\n   * Controls whether inputted text is automatically capitalized and, if so, in what manner.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).\n   */\n  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\n}\n\n/**\n * The type of `ref` object that can be passed to `useTextField` based on the given\n * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,\n * `RefObject<HTMLTextAreaElement>`.\n */\ntype TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: TextFieldInputProps<T>,\n  /** Props for the text field's visible label element, if any. */\n  labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * @param props - Props for the text field.\n * @param ref - Ref to the HTML input or textarea element.\n */\nexport function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(\n  props: AriaTextFieldOptions<T>,\n  ref: TextFieldRefObject<T>\n): TextFieldAria<T> {\n  let {\n    inputElementType = 'input',\n    isDisabled = false,\n    isRequired = false,\n    isReadOnly = false,\n    type = 'text',\n    validationBehavior = 'aria'\n  } = props;\n  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);\n  let {focusableProps} = useFocusable<TextFieldHTMLElementType[T]>(props, ref);\n  let validationState = useFormValidationState({\n    ...props,\n    value\n  });\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  const inputOnlyProps = {\n    type,\n    pattern: props.pattern\n  };\n\n  useFormReset(ref, value, setValue);\n  useFormValidation(props, validationState, ref);\n\n  useEffect(() => {\n    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.\n    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,\n    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our\n    // textareas are always controlled. React is planning on removing this synchronization in a\n    // future major version.\n    // https://github.com/facebook/react/issues/19474\n    // https://github.com/facebook/react/issues/11896\n    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {\n      let input = ref.current;\n      Object.defineProperty(input, 'defaultValue', {\n        get: () => input.value,\n        set: () => {},\n        configurable: true\n      });\n    }\n  }, [ref]);\n\n  return {\n    labelProps,\n    inputProps: mergeProps(\n      domProps,\n      inputElementType === 'input' ? inputOnlyProps : undefined,\n      {\n        disabled: isDisabled,\n        readOnly: isReadOnly,\n        required: isRequired && validationBehavior === 'native',\n        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-activedescendant': props['aria-activedescendant'],\n        'aria-autocomplete': props['aria-autocomplete'],\n        'aria-haspopup': props['aria-haspopup'],\n        'aria-controls': props['aria-controls'],\n        value,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),\n        autoComplete: props.autoComplete,\n        autoCapitalize: props.autoCapitalize,\n        maxLength: props.maxLength,\n        minLength: props.minLength,\n        name: props.name,\n        placeholder: props.placeholder,\n        inputMode: props.inputMode,\n        autoCorrect: props.autoCorrect,\n        spellCheck: props.spellCheck,\n\n        // Clipboard events\n        onCopy: props.onCopy,\n        onCut: props.onCut,\n        onPaste: props.onPaste,\n\n        // Composition events\n        onCompositionEnd: props.onCompositionEnd,\n        onCompositionStart: props.onCompositionStart,\n        onCompositionUpdate: props.onCompositionUpdate,\n\n        // Selection events\n        onSelect: props.onSelect,\n\n        // Input events\n        onBeforeInput: props.onBeforeInput,\n        onInput: props.onInput,\n        ...focusableProps,\n        ...fieldProps\n      }\n    ),\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useTextField.main.js.map"}

package/dist/useTextField.mjs

@@ -77,6 +77,7 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
             'aria-activedescendant': props['aria-activedescendant'],
             'aria-autocomplete': props['aria-autocomplete'],
             'aria-haspopup': props['aria-haspopup'],
+            'aria-controls': props['aria-controls'],
             value: value,
             onChange: (e)=>setValue(e.target.value),
             autoComplete: props.autoComplete,
@@ -86,6 +87,8 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
             name: props.name,
             placeholder: props.placeholder,
             inputMode: props.inputMode,
+            autoCorrect: props.autoCorrect,
+            spellCheck: props.spellCheck,
             // Clipboard events
             onCopy: props.onCopy,
             onCut: props.onCut,

package/dist/useTextField.module.js

@@ -77,6 +77,7 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
             'aria-activedescendant': props['aria-activedescendant'],
             'aria-autocomplete': props['aria-autocomplete'],
             'aria-haspopup': props['aria-haspopup'],
+            'aria-controls': props['aria-controls'],
             value: value,
             onChange: (e)=>setValue(e.target.value),
             autoComplete: props.autoComplete,
@@ -86,6 +87,8 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
             name: props.name,
             placeholder: props.placeholder,
             inputMode: props.inputMode,
+            autoCorrect: props.autoCorrect,
+            spellCheck: props.spellCheck,
             // Clipboard events
             onCopy: props.onCopy,
             onCut: props.onCut,

package/dist/useTextField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmGM,SAAS,yCACd,KAA8B,EAC9B,GAA0B;IAE1B,IAAI,oBACF,mBAAmB,qBACnB,aAAa,mBACb,aAAa,mBACb,aAAa,aACb,OAAO,4BACP,qBAAqB,QACtB,GAAqD;IACtD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAU,MAAM,KAAK,EAAE,MAAM,YAAY,IAAI,IAAI,MAAM,QAAQ;IACxG,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC3C,IAAI,kBAAkB,CAAA,GAAA,6BAAqB,EAAE;QAC3C,GAAG,KAAK;eACR;IACF;IACA,IAAI,aAAC,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,gBAAgB,iBAAiB;IACxF,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC3E,GAAG,KAAK;mBACR;QACA,cAAc,MAAM,YAAY,IAAI;IACtC;IACA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,MAAM,iBAAiB;cACrB;QACA,SAAS,MAAM,OAAO;IACxB;IAEA,CAAA,GAAA,mBAAW,EAAE,KAAK,OAAO;IACzB,CAAA,GAAA,wBAAgB,EAAE,OAAO,iBAAiB;IAE1C,CAAA,GAAA,gBAAQ,EAAE;QACR,wGAAwG;QACxG,gGAAgG;QAChG,4FAA4F;QAC5F,2FAA2F;QAC3F,wBAAwB;QACxB,iDAAiD;QACjD,iDAAiD;QACjD,IAAI,IAAI,OAAO,YAAY,CAAA,GAAA,qBAAa,EAAE,IAAI,OAAO,EAAE,mBAAmB,EAAE;YAC1E,IAAI,QAAQ,IAAI,OAAO;YACvB,OAAO,cAAc,CAAC,OAAO,gBAAgB;gBAC3C,KAAK,IAAM,MAAM,KAAK;gBACtB,KAAK,KAAO;gBACZ,cAAc;YAChB;QACF;IACF,GAAG;QAAC;KAAI;IAER,OAAO;oBACL;QACA,YAAY,CAAA,GAAA,iBAAS,EACnB,UACA,qBAAqB,UAAU,iBAAiB,WAChD;YACE,UAAU;YACV,UAAU;YACV,UAAU,cAAc,uBAAuB;YAC/C,iBAAiB,AAAC,cAAc,uBAAuB,UAAW;YAClE,gBAAgB,aAAa;YAC7B,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,yBAAyB,KAAK,CAAC,wBAAwB;YACvD,qBAAqB,KAAK,CAAC,oBAAoB;YAC/C,iBAAiB,KAAK,CAAC,gBAAgB;mBACvC;YACA,UAAU,CAAC,IAAqC,SAAS,EAAE,MAAM,CAAC,KAAK;YACvE,cAAc,MAAM,YAAY;YAChC,gBAAgB,MAAM,cAAc;YACpC,WAAW,MAAM,SAAS;YAC1B,WAAW,MAAM,SAAS;YAC1B,MAAM,MAAM,IAAI;YAChB,aAAa,MAAM,WAAW;YAC9B,WAAW,MAAM,SAAS;YAE1B,mBAAmB;YACnB,QAAQ,MAAM,MAAM;YACpB,OAAO,MAAM,KAAK;YAClB,SAAS,MAAM,OAAO;YAEtB,qBAAqB;YACrB,kBAAkB,MAAM,gBAAgB;YACxC,oBAAoB,MAAM,kBAAkB;YAC5C,qBAAqB,MAAM,mBAAmB;YAE9C,mBAAmB;YACnB,UAAU,MAAM,QAAQ;YAExB,eAAe;YACf,eAAe,MAAM,aAAa;YAClC,SAAS,MAAM,OAAO;YACtB,GAAG,cAAc;YACjB,GAAG,UAAU;QACf;0BAEF;2BACA;mBACA;0BACA;2BACA;IACF;AACF","sources":["packages/@react-aria/textfield/src/useTextField.ts"],"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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {\n  ChangeEvent,\n  HTMLAttributes,\n  type JSX,\n  LabelHTMLAttributes,\n  RefObject,\n  useEffect\n} from 'react';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';\nimport {useControlledState} from '@react-stately/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\n\n/**\n * A map of HTML element names and their interface types.\n * For example `'a'` -> `HTMLAnchorElement`.\n */\ntype IntrinsicHTMLElements = {\n  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never\n};\n\n/**\n * A map of HTML element names and their attribute interface types.\n * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.\n */\ntype IntrinsicHTMLAttributes = JSX.IntrinsicElements;\n\ntype DefaultElementType = 'input';\n\n/**\n * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,\n * `textarea`.\n */\ntype TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;\n\n/**\n * The HTML element interfaces that `useTextField` supports based on what is\n * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,\n * `HTMLTextAreaElement`.\n */\ntype TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;\n\n/**\n * The HTML attributes interfaces that `useTextField` supports based on what\n * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;\n\n/**\n * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];\n\nexport interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {\n  /**\n   * The HTML element used to render the input, e.g. 'input', or 'textarea'.\n   * It determines whether certain HTML attributes will be included in `inputProps`.\n   * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).\n   * @default 'input'\n   */\n  inputElementType?: T,\n  /**\n   * Controls whether inputted text is automatically capitalized and, if so, in what manner.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).\n   */\n  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\n}\n\n/**\n * The type of `ref` object that can be passed to `useTextField` based on the given\n * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,\n * `RefObject<HTMLTextAreaElement>`.\n */\ntype TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: TextFieldInputProps<T>,\n  /** Props for the text field's visible label element, if any. */\n  labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * @param props - Props for the text field.\n * @param ref - Ref to the HTML input or textarea element.\n */\nexport function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(\n  props: AriaTextFieldOptions<T>,\n  ref: TextFieldRefObject<T>\n): TextFieldAria<T> {\n  let {\n    inputElementType = 'input',\n    isDisabled = false,\n    isRequired = false,\n    isReadOnly = false,\n    type = 'text',\n    validationBehavior = 'aria'\n  }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);\n  let {focusableProps} = useFocusable(props, ref);\n  let validationState = useFormValidationState({\n    ...props,\n    value\n  });\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  const inputOnlyProps = {\n    type,\n    pattern: props.pattern\n  };\n\n  useFormReset(ref, value, setValue);\n  useFormValidation(props, validationState, ref);\n\n  useEffect(() => {\n    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.\n    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,\n    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our\n    // textareas are always controlled. React is planning on removing this synchronization in a\n    // future major version.\n    // https://github.com/facebook/react/issues/19474\n    // https://github.com/facebook/react/issues/11896\n    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {\n      let input = ref.current;\n      Object.defineProperty(input, 'defaultValue', {\n        get: () => input.value,\n        set: () => {},\n        configurable: true\n      });\n    }\n  }, [ref]);\n\n  return {\n    labelProps,\n    inputProps: mergeProps(\n      domProps,\n      inputElementType === 'input' ? inputOnlyProps : undefined,\n      {\n        disabled: isDisabled,\n        readOnly: isReadOnly,\n        required: isRequired && validationBehavior === 'native',\n        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-activedescendant': props['aria-activedescendant'],\n        'aria-autocomplete': props['aria-autocomplete'],\n        'aria-haspopup': props['aria-haspopup'],\n        value,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),\n        autoComplete: props.autoComplete,\n        autoCapitalize: props.autoCapitalize,\n        maxLength: props.maxLength,\n        minLength: props.minLength,\n        name: props.name,\n        placeholder: props.placeholder,\n        inputMode: props.inputMode,\n\n        // Clipboard events\n        onCopy: props.onCopy,\n        onCut: props.onCut,\n        onPaste: props.onPaste,\n\n        // Composition events\n        onCompositionEnd: props.onCompositionEnd,\n        onCompositionStart: props.onCompositionStart,\n        onCompositionUpdate: props.onCompositionUpdate,\n\n        // Selection events\n        onSelect: props.onSelect,\n\n        // Input events\n        onBeforeInput: props.onBeforeInput,\n        onInput: props.onInput,\n        ...focusableProps,\n        ...fieldProps\n      }\n    ),\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useTextField.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/textfield/src/useTextField.ts"],"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 {AriaTextFieldProps} from '@react-types/textfield';\nimport {\n  ChangeEvent,\n  HTMLAttributes,\n  type JSX,\n  LabelHTMLAttributes,\n  RefObject,\n  useEffect\n} from 'react';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';\nimport {useControlledState} from '@react-stately/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\n\n/**\n * A map of HTML element names and their interface types.\n * For example `'a'` -> `HTMLAnchorElement`.\n */\ntype IntrinsicHTMLElements = {\n  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never\n};\n\n/**\n * A map of HTML element names and their attribute interface types.\n * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.\n */\ntype IntrinsicHTMLAttributes = JSX.IntrinsicElements;\n\ntype DefaultElementType = 'input';\n\n/**\n * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,\n * `textarea`.\n */\ntype TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;\n\n/**\n * The HTML element interfaces that `useTextField` supports based on what is\n * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,\n * `HTMLTextAreaElement`.\n */\ntype TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;\n\n/**\n * The HTML attributes interfaces that `useTextField` supports based on what\n * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;\n\n/**\n * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,\n * `TextareaHTMLAttributes`.\n */\ntype TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];\n\nexport interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {\n  /**\n   * The HTML element used to render the input, e.g. 'input', or 'textarea'.\n   * It determines whether certain HTML attributes will be included in `inputProps`.\n   * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).\n   * @default 'input'\n   */\n  inputElementType?: T,\n  /**\n   * Controls whether inputted text is automatically capitalized and, if so, in what manner.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).\n   */\n  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\n}\n\n/**\n * The type of `ref` object that can be passed to `useTextField` based on the given\n * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,\n * `RefObject<HTMLTextAreaElement>`.\n */\ntype TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: TextFieldInputProps<T>,\n  /** Props for the text field's visible label element, if any. */\n  labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * @param props - Props for the text field.\n * @param ref - Ref to the HTML input or textarea element.\n */\nexport function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(\n  props: AriaTextFieldOptions<T>,\n  ref: TextFieldRefObject<T>\n): TextFieldAria<T> {\n  let {\n    inputElementType = 'input',\n    isDisabled = false,\n    isRequired = false,\n    isReadOnly = false,\n    type = 'text',\n    validationBehavior = 'aria'\n  } = props;\n  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);\n  let {focusableProps} = useFocusable<TextFieldHTMLElementType[T]>(props, ref);\n  let validationState = useFormValidationState({\n    ...props,\n    value\n  });\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  const inputOnlyProps = {\n    type,\n    pattern: props.pattern\n  };\n\n  useFormReset(ref, value, setValue);\n  useFormValidation(props, validationState, ref);\n\n  useEffect(() => {\n    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.\n    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,\n    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our\n    // textareas are always controlled. React is planning on removing this synchronization in a\n    // future major version.\n    // https://github.com/facebook/react/issues/19474\n    // https://github.com/facebook/react/issues/11896\n    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {\n      let input = ref.current;\n      Object.defineProperty(input, 'defaultValue', {\n        get: () => input.value,\n        set: () => {},\n        configurable: true\n      });\n    }\n  }, [ref]);\n\n  return {\n    labelProps,\n    inputProps: mergeProps(\n      domProps,\n      inputElementType === 'input' ? inputOnlyProps : undefined,\n      {\n        disabled: isDisabled,\n        readOnly: isReadOnly,\n        required: isRequired && validationBehavior === 'native',\n        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-activedescendant': props['aria-activedescendant'],\n        'aria-autocomplete': props['aria-autocomplete'],\n        'aria-haspopup': props['aria-haspopup'],\n        'aria-controls': props['aria-controls'],\n        value,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),\n        autoComplete: props.autoComplete,\n        autoCapitalize: props.autoCapitalize,\n        maxLength: props.maxLength,\n        minLength: props.minLength,\n        name: props.name,\n        placeholder: props.placeholder,\n        inputMode: props.inputMode,\n        autoCorrect: props.autoCorrect,\n        spellCheck: props.spellCheck,\n\n        // Clipboard events\n        onCopy: props.onCopy,\n        onCut: props.onCut,\n        onPaste: props.onPaste,\n\n        // Composition events\n        onCompositionEnd: props.onCompositionEnd,\n        onCompositionStart: props.onCompositionStart,\n        onCompositionUpdate: props.onCompositionUpdate,\n\n        // Selection events\n        onSelect: props.onSelect,\n\n        // Input events\n        onBeforeInput: props.onBeforeInput,\n        onInput: props.onInput,\n        ...focusableProps,\n        ...fieldProps\n      }\n    ),\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useTextField.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/textfield",
-  "version": "3.14.10",
+  "version": "3.16.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,21 +22,22 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/form": "^3.0.10",
-    "@react-aria/label": "^3.7.12",
-    "@react-aria/utils": "^3.25.3",
-    "@react-stately/form": "^3.0.6",
-    "@react-stately/utils": "^3.10.4",
-    "@react-types/shared": "^3.25.0",
-    "@react-types/textfield": "^3.9.7",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/form": "^3.0.12",
+    "@react-aria/label": "^3.7.14",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/form": "^3.1.1",
+    "@react-stately/utils": "^3.10.5",
+    "@react-types/shared": "^3.27.0",
+    "@react-types/textfield": "^3.11.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/useFormattedTextField.ts

@@ -25,7 +25,6 @@ interface FormattedTextFieldState {
 function supportsNativeBeforeInputEvent() {
   return typeof window !== 'undefined' &&
     window.InputEvent &&
-    // @ts-ignore
     typeof InputEvent.prototype.getTargetRanges === 'function';
 }
 
@@ -38,10 +37,13 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
   // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
   let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {
     let input = inputRef.current;
+    if (!input) {
+      return;
+    }
 
     // Compute the next value of the input if the event is allowed to proceed.
     // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-    let nextValue: string;
+    let nextValue: string | null = null;
     switch (e.inputType) {
       case 'historyUndo':
       case 'historyRedo':
@@ -54,7 +56,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
       case 'deleteContent':
       case 'deleteByCut':
       case 'deleteByDrag':
-        nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+        nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteContentForward':
         // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
@@ -62,24 +64,24 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
         // or code points may be deleted. However, in our currently supported locales, there are no such cases.
         // If we support additional locales in the future, this may need to change.
         nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)
-          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+          ? input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd! + 1)
+          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteContentBackward':
         nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
-          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+          ? input.value.slice(0, input.selectionStart! - 1) + input.value.slice(input.selectionStart!)
+          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteSoftLineBackward':
       case 'deleteHardLineBackward':
-        nextValue = input.value.slice(input.selectionStart);
+        nextValue = input.value.slice(input.selectionStart!);
         break;
       default:
         if (e.data != null) {
           nextValue =
-            input.value.slice(0, input.selectionStart) +
+            input.value.slice(0, input.selectionStart!) +
             e.data +
-            input.value.slice(input.selectionEnd);
+            input.value.slice(input.selectionEnd!);
         }
         break;
     }
@@ -93,7 +95,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
   });
 
   useEffect(() => {
-    if (!supportsNativeBeforeInputEvent()) {
+    if (!supportsNativeBeforeInputEvent() || !inputRef.current) {
       return;
     }
 
@@ -119,7 +121,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
 
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);
 
-  let compositionStartState = useRef(null);
+  let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null);
   return {
     inputProps: mergeProps(
       textFieldProps,
@@ -138,14 +140,14 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
           // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
           // are implemented, there is no other way to prevent composed input.
           // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
-          let {value, selectionStart, selectionEnd} = inputRef.current;
+          let {value, selectionStart, selectionEnd} = inputRef.current!;
           compositionStartState.current = {value, selectionStart, selectionEnd};
         },
         onCompositionEnd() {
-          if (!state.validate(inputRef.current.value)) {
+          if (inputRef.current && !state.validate(inputRef.current.value)) {
             // Restore the input value in the DOM immediately so we can synchronously update the selection position.
             // But also update the value in React state as well so it is correct for future updates.
-            let {value, selectionStart, selectionEnd} = compositionStartState.current;
+            let {value, selectionStart, selectionEnd} = compositionStartState.current!;
             inputRef.current.value = value;
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
             state.setInputValue(value);

package/src/useTextField.ts

@@ -69,7 +69,7 @@ type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrin
  */
 type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
 
-export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
+export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {
   /**
    * The HTML element used to render the input, e.g. 'input', or 'textarea'.
    * It determines whether certain HTML attributes will be included in `inputProps`.
@@ -118,9 +118,9 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     isReadOnly = false,
     type = 'text',
     validationBehavior = 'aria'
-  }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
+  } = props;
   let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);
-  let {focusableProps} = useFocusable(props, ref);
+  let {focusableProps} = useFocusable<TextFieldHTMLElementType[T]>(props, ref);
   let validationState = useFormValidationState({
     ...props,
     value
@@ -174,6 +174,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
         'aria-activedescendant': props['aria-activedescendant'],
         'aria-autocomplete': props['aria-autocomplete'],
         'aria-haspopup': props['aria-haspopup'],
+        'aria-controls': props['aria-controls'],
         value,
         onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
         autoComplete: props.autoComplete,
@@ -183,6 +184,8 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
         name: props.name,
         placeholder: props.placeholder,
         inputMode: props.inputMode,
+        autoCorrect: props.autoCorrect,
+        spellCheck: props.spellCheck,
 
         // Clipboard events
         onCopy: props.onCopy,