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

package/README.md

@@ -0,0 +1,3 @@
+# @react-aria/textfield
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

package/dist/import.mjs

@@ -0,0 +1,19 @@
+import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.mjs";
+import {useFormattedTextField as $d841c8010a73d545$export$4f384c9210e583c3} from "./useFormattedTextField.mjs";
+
+/*
+ * 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 {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField, $d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField};
+//# sourceMappingURL=module.js.map

package/dist/main.js

@@ -0,0 +1,25 @@
+var $9076f978e02df845$exports = require("./useTextField.main.js");
+var $56b68c3dab9bf16c$exports = require("./useFormattedTextField.main.js");
+
+
+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$exports.useTextField);
+$parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$exports.useFormattedTextField);
+/*
+ * 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.
+ */ 
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/textfield/src/index.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 */\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":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,19 @@
+import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.module.js";
+import {useFormattedTextField as $d841c8010a73d545$export$4f384c9210e583c3} from "./useFormattedTextField.module.js";
+
+/*
+ * 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 {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField, $d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/textfield/src/index.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 */\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":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,82 @@
+import { AriaTextFieldProps } from "@react-types/textfield";
+import { HTMLAttributes, JSX, LabelHTMLAttributes, RefObject } from "react";
+import { DOMAttributes, ValidationResult, RefObject as _RefObject1 } from "@react-types/shared";
+/**
+ * A map of HTML element names and their interface types.
+ * For example `'a'` -> `HTMLAnchorElement`.
+ */
+type IntrinsicHTMLElements = {
+    [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never;
+};
+/**
+ * A map of HTML element names and their attribute interface types.
+ * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
+ */
+type IntrinsicHTMLAttributes = JSX.IntrinsicElements;
+type DefaultElementType = 'input';
+/**
+ * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
+ * `textarea`.
+ */
+type TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;
+/**
+ * The HTML element interfaces that `useTextField` supports based on what is
+ * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
+ * `HTMLTextAreaElement`.
+ */
+type TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;
+/**
+ * The HTML attributes interfaces that `useTextField` supports based on what
+ * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
+ * `TextareaHTMLAttributes`.
+ */
+type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;
+/**
+ * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
+ * `TextareaHTMLAttributes`.
+ */
+type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
+export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
+    /**
+     * The HTML element used to render the input, e.g. 'input', or 'textarea'.
+     * It determines whether certain HTML attributes will be included in `inputProps`.
+     * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
+     * @default 'input'
+     */
+    inputElementType?: T;
+    /**
+     * Controls whether inputted text is automatically capitalized and, if so, in what manner.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
+     */
+    autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+}
+/**
+ * The type of `ref` object that can be passed to `useTextField` based on the given
+ * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
+ * `RefObject<HTMLTextAreaElement>`.
+ */
+type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;
+export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {
+    /** Props for the input element. */
+    inputProps: TextFieldInputProps<T>;
+    /** Props for the text field's visible label element, if any. */
+    labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>;
+    /** Props for the text field's description element, if any. */
+    descriptionProps: DOMAttributes;
+    /** Props for the text field's error message element, if any. */
+    errorMessageProps: DOMAttributes;
+}
+/**
+ * Provides the behavior and accessibility implementation for a text field.
+ * @param props - Props for the text field.
+ * @param ref - Ref to the HTML input or textarea element.
+ */
+export function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(props: AriaTextFieldOptions<T>, ref: TextFieldRefObject<T>): TextFieldAria<T>;
+interface FormattedTextFieldState {
+    validate: (val: string) => boolean;
+    setInputValue: (val: string) => void;
+}
+export function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: _RefObject1<HTMLInputElement | null>): TextFieldAria;
+export type { AriaTextFieldProps } from '@react-types/textfield';
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

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

package/dist/useFormattedTextField.main.js

@@ -0,0 +1,136 @@
+var $9076f978e02df845$exports = require("./useTextField.main.js");
+var $6PuoT$reactariautils = require("@react-aria/utils");
+var $6PuoT$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$export$4f384c9210e583c3);
+/*
+ * 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.
+ */ 
+
+
+function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() {
+    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
+    typeof InputEvent.prototype.getTargetRanges === 'function';
+}
+function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
+    // 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 = (0, $6PuoT$reactariautils.useEffectEvent)((e)=>{
+        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;
+        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();
+    });
+    (0, $6PuoT$react.useEffect)(()=>{
+        if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return;
+        let input = inputRef.current;
+        input.addEventListener('beforeinput', onBeforeInputFallback, false);
+        return ()=>{
+            input.removeEventListener('beforeinput', onBeforeInputFallback, false);
+        };
+    }, [
+        inputRef,
+        onBeforeInputFallback
+    ]);
+    let onBeforeInput = !$56b68c3dab9bf16c$var$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: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $9076f978e02df845$exports.useTextField)(props, inputRef);
+    let compositionStartState = (0, $6PuoT$react.useRef)(null);
+    return {
+        inputProps: (0, $6PuoT$reactariautils.mergeProps)(textFieldProps, {
+            onBeforeInput: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current;
+                compositionStartState.current = {
+                    value: value,
+                    selectionStart: selectionStart,
+                    selectionEnd: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;
+                    inputRef.current.value = value;
+                    inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+                    state.setInputValue(value);
+                }
+            }
+        }),
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        ...validation
+    };
+}
+
+
+//# sourceMappingURL=useFormattedTextField.main.js.map

package/dist/useFormattedTextField.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAcD,SAAS;IACP,OAAO,OAAO,WAAW,eACvB,OAAO,UAAU,IACjB,aAAa;IACb,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,oCAAa,EAAE,CAAC;QAC1C,IAAI,QAAQ,SAAS,OAAO;QAE5B,0EAA0E;QAC1E,4GAA4G;QAC5G,IAAI;QACJ,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,IAAI,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBAC7F;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,IAAI,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY,GAAG,KACpF,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAI,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBACrF;YACF,KAAK;gBACH,YAAY,MAAM,YAAY,KAAK,MAAM,cAAc,GACnD,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,GAAG,KAAK,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,cAAc,IACvF,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,MAAM,cAAc,IAAI,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY;gBACrF;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,sBAAQ,EAAE;QACR,IAAI,CAAC,wDACH;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,sCAAW,EAAE,OAAO;IAEvH,IAAI,wBAAwB,CAAA,GAAA,mBAAK,EAAE;IACnC,OAAO;QACL,YAAY,CAAA,GAAA,gCAAS,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,CAAC,MAAM,QAAQ,CAAC,SAAS,OAAO,CAAC,KAAK,GAAG;oBAC3C,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    // @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"}

package/dist/useFormattedTextField.mjs

@@ -0,0 +1,131 @@
+import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.mjs";
+import {useEffectEvent as $jyGKS$useEffectEvent, mergeProps as $jyGKS$mergeProps} from "@react-aria/utils";
+import {useEffect as $jyGKS$useEffect, useRef as $jyGKS$useRef} from "react";
+
+/*
+ * 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.
+ */ 
+
+
+function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
+    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
+    typeof InputEvent.prototype.getTargetRanges === 'function';
+}
+function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
+    // 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 = (0, $jyGKS$useEffectEvent)((e)=>{
+        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;
+        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();
+    });
+    (0, $jyGKS$useEffect)(()=>{
+        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
+        let input = inputRef.current;
+        input.addEventListener('beforeinput', onBeforeInputFallback, false);
+        return ()=>{
+            input.removeEventListener('beforeinput', onBeforeInputFallback, false);
+        };
+    }, [
+        inputRef,
+        onBeforeInputFallback
+    ]);
+    let onBeforeInput = !$d841c8010a73d545$var$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: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $2d73ec29415bd339$export$712718f7aec83d5)(props, inputRef);
+    let compositionStartState = (0, $jyGKS$useRef)(null);
+    return {
+        inputProps: (0, $jyGKS$mergeProps)(textFieldProps, {
+            onBeforeInput: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current;
+                compositionStartState.current = {
+                    value: value,
+                    selectionStart: selectionStart,
+                    selectionEnd: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;
+                    inputRef.current.value = value;
+                    inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+                    state.setInputValue(value);
+                }
+            }
+        }),
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        ...validation
+    };
+}
+
+
+export {$d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField};
+//# sourceMappingURL=useFormattedTextField.module.js.map

package/dist/useFormattedTextField.module.js

@@ -0,0 +1,131 @@
+import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.module.js";
+import {useEffectEvent as $jyGKS$useEffectEvent, mergeProps as $jyGKS$mergeProps} from "@react-aria/utils";
+import {useEffect as $jyGKS$useEffect, useRef as $jyGKS$useRef} from "react";
+
+/*
+ * 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.
+ */ 
+
+
+function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
+    return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
+    typeof InputEvent.prototype.getTargetRanges === 'function';
+}
+function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
+    // 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 = (0, $jyGKS$useEffectEvent)((e)=>{
+        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;
+        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();
+    });
+    (0, $jyGKS$useEffect)(()=>{
+        if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
+        let input = inputRef.current;
+        input.addEventListener('beforeinput', onBeforeInputFallback, false);
+        return ()=>{
+            input.removeEventListener('beforeinput', onBeforeInputFallback, false);
+        };
+    }, [
+        inputRef,
+        onBeforeInputFallback
+    ]);
+    let onBeforeInput = !$d841c8010a73d545$var$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: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $2d73ec29415bd339$export$712718f7aec83d5)(props, inputRef);
+    let compositionStartState = (0, $jyGKS$useRef)(null);
+    return {
+        inputProps: (0, $jyGKS$mergeProps)(textFieldProps, {
+            onBeforeInput: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current;
+                compositionStartState.current = {
+                    value: value,
+                    selectionStart: selectionStart,
+                    selectionEnd: 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: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;
+                    inputRef.current.value = value;
+                    inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+                    state.setInputValue(value);
+                }
+            }
+        }),
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        ...validation
+    };
+}
+
+
+export {$d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField};
+//# sourceMappingURL=useFormattedTextField.module.js.map

package/dist/useFormattedTextField.module.js.map

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