@react-aria/textfield 3.0.0-nightly-641446f65-240905

package/dist/useTextField.main.js

@@ -0,0 +1,120 @@
+var $4Z7CR$react = require("react");
+var $4Z7CR$reactariautils = require("@react-aria/utils");
+var $4Z7CR$reactstatelyutils = require("@react-stately/utils");
+var $4Z7CR$reactarialabel = require("@react-aria/label");
+var $4Z7CR$reactariafocus = require("@react-aria/focus");
+var $4Z7CR$reactariaform = require("@react-aria/form");
+var $4Z7CR$reactstatelyform = require("@react-stately/form");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useTextField", () => $9076f978e02df845$export$712718f7aec83d5);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+function $9076f978e02df845$export$712718f7aec83d5(props, ref) {
+    let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
+    let [value, setValue] = (0, $4Z7CR$reactstatelyutils.useControlledState)(props.value, props.defaultValue || '', props.onChange);
+    let { focusableProps: focusableProps } = (0, $4Z7CR$reactariafocus.useFocusable)(props, ref);
+    let validationState = (0, $4Z7CR$reactstatelyform.useFormValidationState)({
+        ...props,
+        value: value
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4Z7CR$reactarialabel.useField)({
+        ...props,
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let domProps = (0, $4Z7CR$reactariautils.filterDOMProps)(props, {
+        labelable: true
+    });
+    const inputOnlyProps = {
+        type: type,
+        pattern: props.pattern
+    };
+    (0, $4Z7CR$reactariautils.useFormReset)(ref, value, setValue);
+    (0, $4Z7CR$reactariaform.useFormValidation)(props, validationState, ref);
+    (0, $4Z7CR$react.useEffect)(()=>{
+        // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
+        // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
+        // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
+        // textareas are always controlled. React is planning on removing this synchronization in a
+        // future major version.
+        // https://github.com/facebook/react/issues/19474
+        // https://github.com/facebook/react/issues/11896
+        if (ref.current instanceof (0, $4Z7CR$reactariautils.getOwnerWindow)(ref.current).HTMLTextAreaElement) {
+            let input = ref.current;
+            Object.defineProperty(input, 'defaultValue', {
+                get: ()=>input.value,
+                set: ()=>{},
+                configurable: true
+            });
+        }
+    }, [
+        ref
+    ]);
+    return {
+        labelProps: labelProps,
+        inputProps: (0, $4Z7CR$reactariautils.mergeProps)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            required: isRequired && validationBehavior === 'native',
+            'aria-required': isRequired && validationBehavior === 'aria' || undefined,
+            'aria-invalid': isInvalid || undefined,
+            'aria-errormessage': props['aria-errormessage'],
+            'aria-activedescendant': props['aria-activedescendant'],
+            'aria-autocomplete': props['aria-autocomplete'],
+            'aria-haspopup': props['aria-haspopup'],
+            value: value,
+            onChange: (e)=>setValue(e.target.value),
+            autoComplete: props.autoComplete,
+            autoCapitalize: props.autoCapitalize,
+            maxLength: props.maxLength,
+            minLength: props.minLength,
+            name: props.name,
+            placeholder: props.placeholder,
+            inputMode: props.inputMode,
+            // Clipboard events
+            onCopy: props.onCopy,
+            onCut: props.onCut,
+            onPaste: props.onPaste,
+            // Composition events
+            onCompositionEnd: props.onCompositionEnd,
+            onCompositionStart: props.onCompositionStart,
+            onCompositionUpdate: props.onCompositionUpdate,
+            // Selection events
+            onSelect: props.onSelect,
+            // Input events
+            onBeforeInput: props.onBeforeInput,
+            onInput: props.onInput,
+            ...focusableProps,
+            ...fieldProps
+        }),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+//# sourceMappingURL=useTextField.main.js.map

package/dist/useTextField.main.js.map

@@ -0,0 +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"}

package/dist/useTextField.mjs

@@ -0,0 +1,115 @@
+import {useEffect as $ig234$useEffect} from "react";
+import {filterDOMProps as $ig234$filterDOMProps, useFormReset as $ig234$useFormReset, getOwnerWindow as $ig234$getOwnerWindow, mergeProps as $ig234$mergeProps} from "@react-aria/utils";
+import {useControlledState as $ig234$useControlledState} from "@react-stately/utils";
+import {useField as $ig234$useField} from "@react-aria/label";
+import {useFocusable as $ig234$useFocusable} from "@react-aria/focus";
+import {useFormValidation as $ig234$useFormValidation} from "@react-aria/form";
+import {useFormValidationState as $ig234$useFormValidationState} from "@react-stately/form";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
+    let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
+    let [value, setValue] = (0, $ig234$useControlledState)(props.value, props.defaultValue || '', props.onChange);
+    let { focusableProps: focusableProps } = (0, $ig234$useFocusable)(props, ref);
+    let validationState = (0, $ig234$useFormValidationState)({
+        ...props,
+        value: value
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $ig234$useField)({
+        ...props,
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let domProps = (0, $ig234$filterDOMProps)(props, {
+        labelable: true
+    });
+    const inputOnlyProps = {
+        type: type,
+        pattern: props.pattern
+    };
+    (0, $ig234$useFormReset)(ref, value, setValue);
+    (0, $ig234$useFormValidation)(props, validationState, ref);
+    (0, $ig234$useEffect)(()=>{
+        // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
+        // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
+        // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
+        // textareas are always controlled. React is planning on removing this synchronization in a
+        // future major version.
+        // https://github.com/facebook/react/issues/19474
+        // https://github.com/facebook/react/issues/11896
+        if (ref.current instanceof (0, $ig234$getOwnerWindow)(ref.current).HTMLTextAreaElement) {
+            let input = ref.current;
+            Object.defineProperty(input, 'defaultValue', {
+                get: ()=>input.value,
+                set: ()=>{},
+                configurable: true
+            });
+        }
+    }, [
+        ref
+    ]);
+    return {
+        labelProps: labelProps,
+        inputProps: (0, $ig234$mergeProps)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            required: isRequired && validationBehavior === 'native',
+            'aria-required': isRequired && validationBehavior === 'aria' || undefined,
+            'aria-invalid': isInvalid || undefined,
+            'aria-errormessage': props['aria-errormessage'],
+            'aria-activedescendant': props['aria-activedescendant'],
+            'aria-autocomplete': props['aria-autocomplete'],
+            'aria-haspopup': props['aria-haspopup'],
+            value: value,
+            onChange: (e)=>setValue(e.target.value),
+            autoComplete: props.autoComplete,
+            autoCapitalize: props.autoCapitalize,
+            maxLength: props.maxLength,
+            minLength: props.minLength,
+            name: props.name,
+            placeholder: props.placeholder,
+            inputMode: props.inputMode,
+            // Clipboard events
+            onCopy: props.onCopy,
+            onCut: props.onCut,
+            onPaste: props.onPaste,
+            // Composition events
+            onCompositionEnd: props.onCompositionEnd,
+            onCompositionStart: props.onCompositionStart,
+            onCompositionUpdate: props.onCompositionUpdate,
+            // Selection events
+            onSelect: props.onSelect,
+            // Input events
+            onBeforeInput: props.onBeforeInput,
+            onInput: props.onInput,
+            ...focusableProps,
+            ...fieldProps
+        }),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+export {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField};
+//# sourceMappingURL=useTextField.module.js.map

package/dist/useTextField.module.js

@@ -0,0 +1,115 @@
+import {useEffect as $ig234$useEffect} from "react";
+import {filterDOMProps as $ig234$filterDOMProps, useFormReset as $ig234$useFormReset, getOwnerWindow as $ig234$getOwnerWindow, mergeProps as $ig234$mergeProps} from "@react-aria/utils";
+import {useControlledState as $ig234$useControlledState} from "@react-stately/utils";
+import {useField as $ig234$useField} from "@react-aria/label";
+import {useFocusable as $ig234$useFocusable} from "@react-aria/focus";
+import {useFormValidation as $ig234$useFormValidation} from "@react-aria/form";
+import {useFormValidationState as $ig234$useFormValidationState} from "@react-stately/form";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
+    let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
+    let [value, setValue] = (0, $ig234$useControlledState)(props.value, props.defaultValue || '', props.onChange);
+    let { focusableProps: focusableProps } = (0, $ig234$useFocusable)(props, ref);
+    let validationState = (0, $ig234$useFormValidationState)({
+        ...props,
+        value: value
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $ig234$useField)({
+        ...props,
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let domProps = (0, $ig234$filterDOMProps)(props, {
+        labelable: true
+    });
+    const inputOnlyProps = {
+        type: type,
+        pattern: props.pattern
+    };
+    (0, $ig234$useFormReset)(ref, value, setValue);
+    (0, $ig234$useFormValidation)(props, validationState, ref);
+    (0, $ig234$useEffect)(()=>{
+        // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
+        // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
+        // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
+        // textareas are always controlled. React is planning on removing this synchronization in a
+        // future major version.
+        // https://github.com/facebook/react/issues/19474
+        // https://github.com/facebook/react/issues/11896
+        if (ref.current instanceof (0, $ig234$getOwnerWindow)(ref.current).HTMLTextAreaElement) {
+            let input = ref.current;
+            Object.defineProperty(input, 'defaultValue', {
+                get: ()=>input.value,
+                set: ()=>{},
+                configurable: true
+            });
+        }
+    }, [
+        ref
+    ]);
+    return {
+        labelProps: labelProps,
+        inputProps: (0, $ig234$mergeProps)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            required: isRequired && validationBehavior === 'native',
+            'aria-required': isRequired && validationBehavior === 'aria' || undefined,
+            'aria-invalid': isInvalid || undefined,
+            'aria-errormessage': props['aria-errormessage'],
+            'aria-activedescendant': props['aria-activedescendant'],
+            'aria-autocomplete': props['aria-autocomplete'],
+            'aria-haspopup': props['aria-haspopup'],
+            value: value,
+            onChange: (e)=>setValue(e.target.value),
+            autoComplete: props.autoComplete,
+            autoCapitalize: props.autoCapitalize,
+            maxLength: props.maxLength,
+            minLength: props.minLength,
+            name: props.name,
+            placeholder: props.placeholder,
+            inputMode: props.inputMode,
+            // Clipboard events
+            onCopy: props.onCopy,
+            onCut: props.onCut,
+            onPaste: props.onPaste,
+            // Composition events
+            onCompositionEnd: props.onCompositionEnd,
+            onCompositionStart: props.onCompositionStart,
+            onCompositionUpdate: props.onCompositionUpdate,
+            // Selection events
+            onSelect: props.onSelect,
+            // Input events
+            onBeforeInput: props.onBeforeInput,
+            onInput: props.onInput,
+            ...focusableProps,
+            ...fieldProps
+        }),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+export {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField};
+//# sourceMappingURL=useTextField.module.js.map

package/dist/useTextField.module.js.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@react-aria/textfield",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/focus": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/form": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/label": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/form": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/textfield": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.14.8"
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export type {TextFieldAria} from './useTextField';
+export {useTextField} from './useTextField';
+export {useFormattedTextField} from './useFormattedTextField';
+export type {AriaTextFieldOptions} from './useTextField';
+export type {AriaTextFieldProps} from '@react-types/textfield';

package/src/useFormattedTextField.ts

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaTextFieldProps} from '@react-types/textfield';
+import {mergeProps, useEffectEvent} from '@react-aria/utils';
+import {RefObject} from '@react-types/shared';
+import {TextFieldAria, useTextField} from './useTextField';
+import {useEffect, useRef} from 'react';
+
+interface FormattedTextFieldState {
+  validate: (val: string) => boolean,
+  setInputValue: (val: string) => void
+}
+
+
+function supportsNativeBeforeInputEvent() {
+  return typeof window !== 'undefined' &&
+    window.InputEvent &&
+    // @ts-ignore
+    typeof InputEvent.prototype.getTargetRanges === 'function';
+}
+
+export function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {
+  // All browsers implement the 'beforeinput' event natively except Firefox
+  // (currently behind a flag as of Firefox 84). React's polyfill does not
+  // run in all cases that the native event fires, e.g. when deleting text.
+  // Use the native event if available so that we can prevent invalid deletions.
+  // We do not attempt to polyfill this in Firefox since it would be very complicated,
+  // 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;
+
+    // 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;
+    switch (e.inputType) {
+      case 'historyUndo':
+      case 'historyRedo':
+        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
+        // because presumably the input would have already been validated previously.
+        return;
+      case 'insertLineBreak':
+        // Explicitly allow "insertLineBreak" event, to allow onSubmit for "enter" key. e.data is null in this case.
+        return;
+      case 'deleteContent':
+      case 'deleteByCut':
+      case 'deleteByDrag':
+        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
+        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
+        // 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);
+        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);
+        break;
+      case 'deleteSoftLineBackward':
+      case 'deleteHardLineBackward':
+        nextValue = input.value.slice(input.selectionStart);
+        break;
+      default:
+        if (e.data != null) {
+          nextValue =
+            input.value.slice(0, input.selectionStart) +
+            e.data +
+            input.value.slice(input.selectionEnd);
+        }
+        break;
+    }
+
+    // If we did not compute a value, or the new value is invalid, prevent the event
+    // so that the browser does not update the input text, move the selection, or add to
+    // the undo/redo stack.
+    if (nextValue == null || !state.validate(nextValue)) {
+      e.preventDefault();
+    }
+  });
+
+  useEffect(() => {
+    if (!supportsNativeBeforeInputEvent()) {
+      return;
+    }
+
+    let input = inputRef.current;
+    input.addEventListener('beforeinput', onBeforeInputFallback, false);
+    return () => {
+      input.removeEventListener('beforeinput', onBeforeInputFallback, false);
+    };
+  }, [inputRef, onBeforeInputFallback]);
+
+  let onBeforeInput = !supportsNativeBeforeInputEvent()
+    ? e => {
+      let nextValue =
+        e.target.value.slice(0, e.target.selectionStart) +
+        e.data +
+        e.target.value.slice(e.target.selectionEnd);
+
+      if (!state.validate(nextValue)) {
+        e.preventDefault();
+      }
+    }
+    : null;
+
+  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);
+
+  let compositionStartState = useRef(null);
+  return {
+    inputProps: mergeProps(
+      textFieldProps,
+      {
+        onBeforeInput,
+        onCompositionStart() {
+          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
+          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
+          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
+          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
+          // nor would we want to cancel them because the input from the user is incomplete at that point.
+          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
+          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
+          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
+          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
+          // 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;
+          compositionStartState.current = {value, selectionStart, selectionEnd};
+        },
+        onCompositionEnd() {
+          if (!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;
+            inputRef.current.value = value;
+            inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+            state.setInputValue(value);
+          }
+        }
+      }
+    ),
+    labelProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  };
+}