@react-aria/textfield 3.9.2 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/import.mjs +44 -46
  2. package/dist/main.js +42 -44
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +44 -46
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +6 -6
  8. package/src/useFormattedTextField.ts +57 -62
package/dist/import.mjs CHANGED
@@ -1,7 +1,7 @@
1
- import {filterDOMProps as $kOq5K$filterDOMProps, mergeProps as $kOq5K$mergeProps} from "@react-aria/utils";
1
+ import {filterDOMProps as $kOq5K$filterDOMProps, mergeProps as $kOq5K$mergeProps, useEffectEvent as $kOq5K$useEffectEvent} from "@react-aria/utils";
2
2
  import {useField as $kOq5K$useField} from "@react-aria/label";
3
3
  import {useFocusable as $kOq5K$useFocusable} from "@react-aria/focus";
4
- import {useRef as $kOq5K$useRef, useEffect as $kOq5K$useEffect} from "react";
4
+ import {useEffect as $kOq5K$useEffect, useRef as $kOq5K$useRef} from "react";
5
5
 
6
6
  /*
7
7
  * Copyright 2020 Adobe. All rights reserved.
@@ -97,63 +97,61 @@ function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
97
97
  typeof InputEvent.prototype.getTargetRanges === "function";
98
98
  }
99
99
  function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
100
- let stateRef = (0, $kOq5K$useRef)(state);
101
- stateRef.current = state;
102
100
  // All browsers implement the 'beforeinput' event natively except Firefox
103
101
  // (currently behind a flag as of Firefox 84). React's polyfill does not
104
102
  // run in all cases that the native event fires, e.g. when deleting text.
105
103
  // Use the native event if available so that we can prevent invalid deletions.
106
104
  // We do not attempt to polyfill this in Firefox since it would be very complicated,
107
105
  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
106
+ let onBeforeInputFallback = (0, $kOq5K$useEffectEvent)((e)=>{
107
+ let input = inputRef.current;
108
+ // Compute the next value of the input if the event is allowed to proceed.
109
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
110
+ let nextValue;
111
+ switch(e.inputType){
112
+ case "historyUndo":
113
+ case "historyRedo":
114
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
115
+ // because presumably the input would have already been validated previously.
116
+ return;
117
+ case "deleteContent":
118
+ case "deleteByCut":
119
+ case "deleteByDrag":
120
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
121
+ break;
122
+ case "deleteContentForward":
123
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
124
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
125
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
126
+ // If we support additional locales in the future, this may need to change.
127
+ 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);
128
+ break;
129
+ case "deleteContentBackward":
130
+ 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);
131
+ break;
132
+ case "deleteSoftLineBackward":
133
+ case "deleteHardLineBackward":
134
+ nextValue = input.value.slice(input.selectionStart);
135
+ break;
136
+ default:
137
+ if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
138
+ break;
139
+ }
140
+ // If we did not compute a value, or the new value is invalid, prevent the event
141
+ // so that the browser does not update the input text, move the selection, or add to
142
+ // the undo/redo stack.
143
+ if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
144
+ });
108
145
  (0, $kOq5K$useEffect)(()=>{
109
146
  if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
110
147
  let input = inputRef.current;
111
- let onBeforeInput = (e)=>{
112
- let state = stateRef.current;
113
- // Compute the next value of the input if the event is allowed to proceed.
114
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
115
- let nextValue;
116
- switch(e.inputType){
117
- case "historyUndo":
118
- case "historyRedo":
119
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
120
- // because presumably the input would have already been validated previously.
121
- return;
122
- case "deleteContent":
123
- case "deleteByCut":
124
- case "deleteByDrag":
125
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
126
- break;
127
- case "deleteContentForward":
128
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
129
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
130
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
131
- // If we support additional locales in the future, this may need to change.
132
- 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);
133
- break;
134
- case "deleteContentBackward":
135
- 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);
136
- break;
137
- case "deleteSoftLineBackward":
138
- case "deleteHardLineBackward":
139
- nextValue = input.value.slice(input.selectionStart);
140
- break;
141
- default:
142
- if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
143
- break;
144
- }
145
- // If we did not compute a value, or the new value is invalid, prevent the event
146
- // so that the browser does not update the input text, move the selection, or add to
147
- // the undo/redo stack.
148
- if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
149
- };
150
- input.addEventListener("beforeinput", onBeforeInput, false);
148
+ input.addEventListener("beforeinput", onBeforeInputFallback, false);
151
149
  return ()=>{
152
- input.removeEventListener("beforeinput", onBeforeInput, false);
150
+ input.removeEventListener("beforeinput", onBeforeInputFallback, false);
153
151
  };
154
152
  }, [
155
153
  inputRef,
156
- stateRef
154
+ onBeforeInputFallback
157
155
  ]);
158
156
  let onBeforeInput = !$d841c8010a73d545$var$supportsNativeBeforeInputEvent() ? (e)=>{
159
157
  let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
package/dist/main.js CHANGED
@@ -103,63 +103,61 @@ function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() {
103
103
  typeof InputEvent.prototype.getTargetRanges === "function";
104
104
  }
105
105
  function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
106
- let stateRef = (0, $iITAC$react.useRef)(state);
107
- stateRef.current = state;
108
106
  // All browsers implement the 'beforeinput' event natively except Firefox
109
107
  // (currently behind a flag as of Firefox 84). React's polyfill does not
110
108
  // run in all cases that the native event fires, e.g. when deleting text.
111
109
  // Use the native event if available so that we can prevent invalid deletions.
112
110
  // We do not attempt to polyfill this in Firefox since it would be very complicated,
113
111
  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
112
+ let onBeforeInputFallback = (0, $iITAC$reactariautils.useEffectEvent)((e)=>{
113
+ let input = inputRef.current;
114
+ // Compute the next value of the input if the event is allowed to proceed.
115
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
116
+ let nextValue;
117
+ switch(e.inputType){
118
+ case "historyUndo":
119
+ case "historyRedo":
120
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
121
+ // because presumably the input would have already been validated previously.
122
+ return;
123
+ case "deleteContent":
124
+ case "deleteByCut":
125
+ case "deleteByDrag":
126
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
127
+ break;
128
+ case "deleteContentForward":
129
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
130
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
131
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
132
+ // If we support additional locales in the future, this may need to change.
133
+ 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);
134
+ break;
135
+ case "deleteContentBackward":
136
+ 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);
137
+ break;
138
+ case "deleteSoftLineBackward":
139
+ case "deleteHardLineBackward":
140
+ nextValue = input.value.slice(input.selectionStart);
141
+ break;
142
+ default:
143
+ if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
144
+ break;
145
+ }
146
+ // If we did not compute a value, or the new value is invalid, prevent the event
147
+ // so that the browser does not update the input text, move the selection, or add to
148
+ // the undo/redo stack.
149
+ if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
150
+ });
114
151
  (0, $iITAC$react.useEffect)(()=>{
115
152
  if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return;
116
153
  let input = inputRef.current;
117
- let onBeforeInput = (e)=>{
118
- let state = stateRef.current;
119
- // Compute the next value of the input if the event is allowed to proceed.
120
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
121
- let nextValue;
122
- switch(e.inputType){
123
- case "historyUndo":
124
- case "historyRedo":
125
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
126
- // because presumably the input would have already been validated previously.
127
- return;
128
- case "deleteContent":
129
- case "deleteByCut":
130
- case "deleteByDrag":
131
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
132
- break;
133
- case "deleteContentForward":
134
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
135
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
136
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
137
- // If we support additional locales in the future, this may need to change.
138
- 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);
139
- break;
140
- case "deleteContentBackward":
141
- 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);
142
- break;
143
- case "deleteSoftLineBackward":
144
- case "deleteHardLineBackward":
145
- nextValue = input.value.slice(input.selectionStart);
146
- break;
147
- default:
148
- if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
149
- break;
150
- }
151
- // If we did not compute a value, or the new value is invalid, prevent the event
152
- // so that the browser does not update the input text, move the selection, or add to
153
- // the undo/redo stack.
154
- if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
155
- };
156
- input.addEventListener("beforeinput", onBeforeInput, false);
154
+ input.addEventListener("beforeinput", onBeforeInputFallback, false);
157
155
  return ()=>{
158
- input.removeEventListener("beforeinput", onBeforeInput, false);
156
+ input.removeEventListener("beforeinput", onBeforeInputFallback, false);
159
157
  };
160
158
  }, [
161
159
  inputRef,
162
- stateRef
160
+ onBeforeInputFallback
163
161
  ]);
164
162
  let onBeforeInput = !$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() ? (e)=>{
165
163
  let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/useFormattedTextField.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","/*\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 DOMFactory,\n HTMLAttributes,\n LabelHTMLAttributes,\n ReactDOM,\n RefObject\n} from 'react';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\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 = {\n [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never\n};\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\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]>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {\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 validationState,\n type = 'text',\n onChange = () => {}\n }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);\n let domProps = filterDOMProps(props, {labelable: true});\n\n const inputOnlyProps = {\n type,\n pattern: props.pattern\n };\n\n return {\n labelProps,\n inputProps: mergeProps(\n domProps,\n inputElementType === 'input' && inputOnlyProps,\n {\n disabled: isDisabled,\n readOnly: isReadOnly,\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || 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: props.value,\n defaultValue: props.value ? undefined : props.defaultValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n autoComplete: props.autoComplete,\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 };\n}\n","/*\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} from '@react-aria/utils';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {TextFieldAria, useTextField} from './useTextField';\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>): TextFieldAria {\n\n let stateRef = useRef(state);\n stateRef.current = state;\n\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 useEffect(() => {\n if (!supportsNativeBeforeInputEvent()) {\n return;\n }\n\n let input = inputRef.current;\n\n let onBeforeInput = (e: InputEvent) => {\n let state = stateRef.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 '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 input.addEventListener('beforeinput', onBeforeInput, false);\n return () => {\n input.removeEventListener('beforeinput', onBeforeInput, false);\n };\n }, [inputRef, stateRef]);\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} = 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 };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/useFormattedTextField.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","/*\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 DOMFactory,\n HTMLAttributes,\n LabelHTMLAttributes,\n ReactDOM,\n RefObject\n} from 'react';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\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 = {\n [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never\n};\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\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]>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {\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 validationState,\n type = 'text',\n onChange = () => {}\n }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);\n let domProps = filterDOMProps(props, {labelable: true});\n\n const inputOnlyProps = {\n type,\n pattern: props.pattern\n };\n\n return {\n labelProps,\n inputProps: mergeProps(\n domProps,\n inputElementType === 'input' && inputOnlyProps,\n {\n disabled: isDisabled,\n readOnly: isReadOnly,\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || 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: props.value,\n defaultValue: props.value ? undefined : props.defaultValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n autoComplete: props.autoComplete,\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 };\n}\n","/*\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, useEffect, useRef} from 'react';\nimport {TextFieldAria, useTextField} from './useTextField';\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>): 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 '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} = 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 };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,7 +1,7 @@
1
- import {filterDOMProps as $kOq5K$filterDOMProps, mergeProps as $kOq5K$mergeProps} from "@react-aria/utils";
1
+ import {filterDOMProps as $kOq5K$filterDOMProps, mergeProps as $kOq5K$mergeProps, useEffectEvent as $kOq5K$useEffectEvent} from "@react-aria/utils";
2
2
  import {useField as $kOq5K$useField} from "@react-aria/label";
3
3
  import {useFocusable as $kOq5K$useFocusable} from "@react-aria/focus";
4
- import {useRef as $kOq5K$useRef, useEffect as $kOq5K$useEffect} from "react";
4
+ import {useEffect as $kOq5K$useEffect, useRef as $kOq5K$useRef} from "react";
5
5
 
6
6
  /*
7
7
  * Copyright 2020 Adobe. All rights reserved.
@@ -97,63 +97,61 @@ function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
97
97
  typeof InputEvent.prototype.getTargetRanges === "function";
98
98
  }
99
99
  function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
100
- let stateRef = (0, $kOq5K$useRef)(state);
101
- stateRef.current = state;
102
100
  // All browsers implement the 'beforeinput' event natively except Firefox
103
101
  // (currently behind a flag as of Firefox 84). React's polyfill does not
104
102
  // run in all cases that the native event fires, e.g. when deleting text.
105
103
  // Use the native event if available so that we can prevent invalid deletions.
106
104
  // We do not attempt to polyfill this in Firefox since it would be very complicated,
107
105
  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
106
+ let onBeforeInputFallback = (0, $kOq5K$useEffectEvent)((e)=>{
107
+ let input = inputRef.current;
108
+ // Compute the next value of the input if the event is allowed to proceed.
109
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
110
+ let nextValue;
111
+ switch(e.inputType){
112
+ case "historyUndo":
113
+ case "historyRedo":
114
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
115
+ // because presumably the input would have already been validated previously.
116
+ return;
117
+ case "deleteContent":
118
+ case "deleteByCut":
119
+ case "deleteByDrag":
120
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
121
+ break;
122
+ case "deleteContentForward":
123
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
124
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
125
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
126
+ // If we support additional locales in the future, this may need to change.
127
+ 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);
128
+ break;
129
+ case "deleteContentBackward":
130
+ 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);
131
+ break;
132
+ case "deleteSoftLineBackward":
133
+ case "deleteHardLineBackward":
134
+ nextValue = input.value.slice(input.selectionStart);
135
+ break;
136
+ default:
137
+ if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
138
+ break;
139
+ }
140
+ // If we did not compute a value, or the new value is invalid, prevent the event
141
+ // so that the browser does not update the input text, move the selection, or add to
142
+ // the undo/redo stack.
143
+ if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
144
+ });
108
145
  (0, $kOq5K$useEffect)(()=>{
109
146
  if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
110
147
  let input = inputRef.current;
111
- let onBeforeInput = (e)=>{
112
- let state = stateRef.current;
113
- // Compute the next value of the input if the event is allowed to proceed.
114
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
115
- let nextValue;
116
- switch(e.inputType){
117
- case "historyUndo":
118
- case "historyRedo":
119
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
120
- // because presumably the input would have already been validated previously.
121
- return;
122
- case "deleteContent":
123
- case "deleteByCut":
124
- case "deleteByDrag":
125
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
126
- break;
127
- case "deleteContentForward":
128
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
129
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
130
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
131
- // If we support additional locales in the future, this may need to change.
132
- 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);
133
- break;
134
- case "deleteContentBackward":
135
- 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);
136
- break;
137
- case "deleteSoftLineBackward":
138
- case "deleteHardLineBackward":
139
- nextValue = input.value.slice(input.selectionStart);
140
- break;
141
- default:
142
- if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
143
- break;
144
- }
145
- // If we did not compute a value, or the new value is invalid, prevent the event
146
- // so that the browser does not update the input text, move the selection, or add to
147
- // the undo/redo stack.
148
- if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
149
- };
150
- input.addEventListener("beforeinput", onBeforeInput, false);
148
+ input.addEventListener("beforeinput", onBeforeInputFallback, false);
151
149
  return ()=>{
152
- input.removeEventListener("beforeinput", onBeforeInput, false);
150
+ input.removeEventListener("beforeinput", onBeforeInputFallback, false);
153
151
  };
154
152
  }, [
155
153
  inputRef,
156
- stateRef
154
+ onBeforeInputFallback
157
155
  ]);
158
156
  let onBeforeInput = !$d841c8010a73d545$var$supportsNativeBeforeInputEvent() ? (e)=>{
159
157
  let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/useFormattedTextField.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","/*\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 DOMFactory,\n HTMLAttributes,\n LabelHTMLAttributes,\n ReactDOM,\n RefObject\n} from 'react';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\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 = {\n [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never\n};\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\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]>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {\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 validationState,\n type = 'text',\n onChange = () => {}\n }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);\n let domProps = filterDOMProps(props, {labelable: true});\n\n const inputOnlyProps = {\n type,\n pattern: props.pattern\n };\n\n return {\n labelProps,\n inputProps: mergeProps(\n domProps,\n inputElementType === 'input' && inputOnlyProps,\n {\n disabled: isDisabled,\n readOnly: isReadOnly,\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || 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: props.value,\n defaultValue: props.value ? undefined : props.defaultValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n autoComplete: props.autoComplete,\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 };\n}\n","/*\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} from '@react-aria/utils';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {TextFieldAria, useTextField} from './useTextField';\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>): TextFieldAria {\n\n let stateRef = useRef(state);\n stateRef.current = state;\n\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 useEffect(() => {\n if (!supportsNativeBeforeInputEvent()) {\n return;\n }\n\n let input = inputRef.current;\n\n let onBeforeInput = (e: InputEvent) => {\n let state = stateRef.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 '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 input.addEventListener('beforeinput', onBeforeInput, false);\n return () => {\n input.removeEventListener('beforeinput', onBeforeInput, false);\n };\n }, [inputRef, stateRef]);\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} = 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 };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-aria/textfield/src/index.ts","packages/@react-aria/textfield/src/useTextField.ts","packages/@react-aria/textfield/src/useFormattedTextField.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","/*\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 DOMFactory,\n HTMLAttributes,\n LabelHTMLAttributes,\n ReactDOM,\n RefObject\n} from 'react';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\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 = {\n [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never\n};\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\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]>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {\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 validationState,\n type = 'text',\n onChange = () => {}\n }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);\n let domProps = filterDOMProps(props, {labelable: true});\n\n const inputOnlyProps = {\n type,\n pattern: props.pattern\n };\n\n return {\n labelProps,\n inputProps: mergeProps(\n domProps,\n inputElementType === 'input' && inputOnlyProps,\n {\n disabled: isDisabled,\n readOnly: isReadOnly,\n 'aria-required': isRequired || undefined,\n 'aria-invalid': validationState === 'invalid' || 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: props.value,\n defaultValue: props.value ? undefined : props.defaultValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n autoComplete: props.autoComplete,\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 };\n}\n","/*\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, useEffect, useRef} from 'react';\nimport {TextFieldAria, useTextField} from './useTextField';\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>): 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 '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} = 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 };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AA0BA;;;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;KAC5B,CAAC,IAAI,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,WAAW,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK;CAChF,CAAC;AAEF,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,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAwB,CAAC,SAAS,0BAA0B,IAAI,UAAU,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvG,+BAA+B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB;IACtF,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,CAkElB;AC3JD;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,UAAU,gBAAgB,CAAC,GAAG,aAAa,CAkIrJ;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"}
1
+ {"mappings":";;;AA0BA;;;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;KAC5B,CAAC,IAAI,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,WAAW,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK;CAChF,CAAC;AAEF,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,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAwB,CAAC,SAAS,0BAA0B,IAAI,UAAU,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvG,+BAA+B,CAAC,SAAS,0BAA0B,GAAG,kBAAkB;IACtF,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,CAkElB;AC3JD;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,UAAU,gBAAgB,CAAC,GAAG,aAAa,CA6HrJ;AC5ID,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-aria/textfield",
3
- "version": "3.9.2",
3
+ "version": "3.10.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -22,12 +22,12 @@
22
22
  "url": "https://github.com/adobe/react-spectrum"
23
23
  },
24
24
  "dependencies": {
25
- "@react-aria/focus": "^3.12.1",
26
- "@react-aria/label": "^3.5.2",
27
- "@react-aria/utils": "^3.17.0",
25
+ "@react-aria/focus": "^3.13.0",
26
+ "@react-aria/label": "^3.6.0",
27
+ "@react-aria/utils": "^3.18.0",
28
28
  "@react-types/shared": "^3.18.1",
29
29
  "@react-types/textfield": "^3.7.2",
30
- "@swc/helpers": "^0.4.14"
30
+ "@swc/helpers": "^0.5.0"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
38
+ "gitHead": "504e40e0a50c1b20ed0fb3ba9561a263b6d5565e"
39
39
  }
package/src/useFormattedTextField.ts CHANGED
@@ -11,7 +11,7 @@
11
11
  */
12
12
 
13
13
  import {AriaTextFieldProps} from '@react-types/textfield';
14
- import {mergeProps} from '@react-aria/utils';
14
+ import {mergeProps, useEffectEvent} from '@react-aria/utils';
15
15
  import {RefObject, useEffect, useRef} from 'react';
16
16
  import {TextFieldAria, useTextField} from './useTextField';
17
17
 
@@ -29,81 +29,76 @@ function supportsNativeBeforeInputEvent() {
29
29
  }
30
30
 
31
31
  export function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement>): TextFieldAria {
32
-
33
- let stateRef = useRef(state);
34
- stateRef.current = state;
35
-
36
32
  // All browsers implement the 'beforeinput' event natively except Firefox
37
33
  // (currently behind a flag as of Firefox 84). React's polyfill does not
38
34
  // run in all cases that the native event fires, e.g. when deleting text.
39
35
  // Use the native event if available so that we can prevent invalid deletions.
40
36
  // We do not attempt to polyfill this in Firefox since it would be very complicated,
41
37
  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
38
+ let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {
39
+ let input = inputRef.current;
40
+
41
+ // Compute the next value of the input if the event is allowed to proceed.
42
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
43
+ let nextValue: string;
44
+ switch (e.inputType) {
45
+ case 'historyUndo':
46
+ case 'historyRedo':
47
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
48
+ // because presumably the input would have already been validated previously.
49
+ return;
50
+ case 'deleteContent':
51
+ case 'deleteByCut':
52
+ case 'deleteByDrag':
53
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
54
+ break;
55
+ case 'deleteContentForward':
56
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
57
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
58
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
59
+ // If we support additional locales in the future, this may need to change.
60
+ nextValue = input.selectionEnd === input.selectionStart
61
+ ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)
62
+ : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
63
+ break;
64
+ case 'deleteContentBackward':
65
+ nextValue = input.selectionEnd === input.selectionStart
66
+ ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
67
+ : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
68
+ break;
69
+ case 'deleteSoftLineBackward':
70
+ case 'deleteHardLineBackward':
71
+ nextValue = input.value.slice(input.selectionStart);
72
+ break;
73
+ default:
74
+ if (e.data != null) {
75
+ nextValue =
76
+ input.value.slice(0, input.selectionStart) +
77
+ e.data +
78
+ input.value.slice(input.selectionEnd);
79
+ }
80
+ break;
81
+ }
82
+
83
+ // If we did not compute a value, or the new value is invalid, prevent the event
84
+ // so that the browser does not update the input text, move the selection, or add to
85
+ // the undo/redo stack.
86
+ if (nextValue == null || !state.validate(nextValue)) {
87
+ e.preventDefault();
88
+ }
89
+ });
90
+
42
91
  useEffect(() => {
43
92
  if (!supportsNativeBeforeInputEvent()) {
44
93
  return;
45
94
  }
46
95
 
47
96
  let input = inputRef.current;
48
-
49
- let onBeforeInput = (e: InputEvent) => {
50
- let state = stateRef.current;
51
-
52
- // Compute the next value of the input if the event is allowed to proceed.
53
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
54
- let nextValue: string;
55
- switch (e.inputType) {
56
- case 'historyUndo':
57
- case 'historyRedo':
58
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
59
- // because presumably the input would have already been validated previously.
60
- return;
61
- case 'deleteContent':
62
- case 'deleteByCut':
63
- case 'deleteByDrag':
64
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
65
- break;
66
- case 'deleteContentForward':
67
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
68
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
69
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
70
- // If we support additional locales in the future, this may need to change.
71
- nextValue = input.selectionEnd === input.selectionStart
72
- ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)
73
- : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
74
- break;
75
- case 'deleteContentBackward':
76
- nextValue = input.selectionEnd === input.selectionStart
77
- ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
78
- : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
79
- break;
80
- case 'deleteSoftLineBackward':
81
- case 'deleteHardLineBackward':
82
- nextValue = input.value.slice(input.selectionStart);
83
- break;
84
- default:
85
- if (e.data != null) {
86
- nextValue =
87
- input.value.slice(0, input.selectionStart) +
88
- e.data +
89
- input.value.slice(input.selectionEnd);
90
- }
91
- break;
92
- }
93
-
94
- // If we did not compute a value, or the new value is invalid, prevent the event
95
- // so that the browser does not update the input text, move the selection, or add to
96
- // the undo/redo stack.
97
- if (nextValue == null || !state.validate(nextValue)) {
98
- e.preventDefault();
99
- }
100
- };
101
-
102
- input.addEventListener('beforeinput', onBeforeInput, false);
97
+ input.addEventListener('beforeinput', onBeforeInputFallback, false);
103
98
  return () => {
104
- input.removeEventListener('beforeinput', onBeforeInput, false);
99
+ input.removeEventListener('beforeinput', onBeforeInputFallback, false);
105
100
  };
106
- }, [inputRef, stateRef]);
101
+ }, [inputRef, onBeforeInputFallback]);
107
102
 
108
103
  let onBeforeInput = !supportsNativeBeforeInputEvent()
109
104
  ? e => {