@react-aria/textfield 3.14.3 → 3.14.4

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.
package/dist/import.mjs CHANGED
@@ -1,10 +1,5 @@
1
- import {useEffect as $kOq5K$useEffect, useRef as $kOq5K$useRef} from "react";
2
- import {filterDOMProps as $kOq5K$filterDOMProps, useFormReset as $kOq5K$useFormReset, getOwnerWindow as $kOq5K$getOwnerWindow, mergeProps as $kOq5K$mergeProps, useEffectEvent as $kOq5K$useEffectEvent} from "@react-aria/utils";
3
- import {useControlledState as $kOq5K$useControlledState} from "@react-stately/utils";
4
- import {useField as $kOq5K$useField} from "@react-aria/label";
5
- import {useFocusable as $kOq5K$useFocusable} from "@react-aria/focus";
6
- import {useFormValidation as $kOq5K$useFormValidation} from "@react-aria/form";
7
- import {useFormValidationState as $kOq5K$useFormValidationState} from "@react-stately/form";
1
+ import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.mjs";
2
+ import {useFormattedTextField as $d841c8010a73d545$export$4f384c9210e583c3} from "./useFormattedTextField.mjs";
8
3
 
9
4
  /*
10
5
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,234 +11,9 @@ import {useFormValidationState as $kOq5K$useFormValidationState} from "@react-st
16
11
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
17
12
  * OF ANY KIND, either express or implied. See the License for the specific language
18
13
  * governing permissions and limitations under the License.
19
- */ /*
20
- * Copyright 2020 Adobe. All rights reserved.
21
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
22
- * you may not use this file except in compliance with the License. You may obtain a copy
23
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
24
- *
25
- * Unless required by applicable law or agreed to in writing, software distributed under
26
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
27
- * OF ANY KIND, either express or implied. See the License for the specific language
28
- * governing permissions and limitations under the License.
29
- */
30
-
31
-
32
-
33
-
34
-
35
-
36
- function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
37
- let { inputElementType: inputElementType = "input", isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = "text", validationBehavior: validationBehavior = "aria" } = props;
38
- let [value, setValue] = (0, $kOq5K$useControlledState)(props.value, props.defaultValue || "", props.onChange);
39
- let { focusableProps: focusableProps } = (0, $kOq5K$useFocusable)(props, ref);
40
- let validationState = (0, $kOq5K$useFormValidationState)({
41
- ...props,
42
- value: value
43
- });
44
- let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
45
- let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $kOq5K$useField)({
46
- ...props,
47
- isInvalid: isInvalid,
48
- errorMessage: props.errorMessage || validationErrors
49
- });
50
- let domProps = (0, $kOq5K$filterDOMProps)(props, {
51
- labelable: true
52
- });
53
- const inputOnlyProps = {
54
- type: type,
55
- pattern: props.pattern
56
- };
57
- (0, $kOq5K$useFormReset)(ref, value, setValue);
58
- (0, $kOq5K$useFormValidation)(props, validationState, ref);
59
- (0, $kOq5K$useEffect)(()=>{
60
- // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
61
- // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
62
- // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
63
- // textareas are always controlled. React is planning on removing this synchronization in a
64
- // future major version.
65
- // https://github.com/facebook/react/issues/19474
66
- // https://github.com/facebook/react/issues/11896
67
- if (ref.current instanceof (0, $kOq5K$getOwnerWindow)(ref.current).HTMLTextAreaElement) {
68
- let input = ref.current;
69
- Object.defineProperty(input, "defaultValue", {
70
- get: ()=>input.value,
71
- set: ()=>{},
72
- configurable: true
73
- });
74
- }
75
- }, [
76
- ref
77
- ]);
78
- return {
79
- labelProps: labelProps,
80
- inputProps: (0, $kOq5K$mergeProps)(domProps, inputElementType === "input" && inputOnlyProps, {
81
- disabled: isDisabled,
82
- readOnly: isReadOnly,
83
- required: isRequired && validationBehavior === "native",
84
- "aria-required": isRequired && validationBehavior === "aria" || undefined,
85
- "aria-invalid": isInvalid || undefined,
86
- "aria-errormessage": props["aria-errormessage"],
87
- "aria-activedescendant": props["aria-activedescendant"],
88
- "aria-autocomplete": props["aria-autocomplete"],
89
- "aria-haspopup": props["aria-haspopup"],
90
- value: value,
91
- onChange: (e)=>setValue(e.target.value),
92
- autoComplete: props.autoComplete,
93
- autoCapitalize: props.autoCapitalize,
94
- maxLength: props.maxLength,
95
- minLength: props.minLength,
96
- name: props.name,
97
- placeholder: props.placeholder,
98
- inputMode: props.inputMode,
99
- // Clipboard events
100
- onCopy: props.onCopy,
101
- onCut: props.onCut,
102
- onPaste: props.onPaste,
103
- // Composition events
104
- onCompositionEnd: props.onCompositionEnd,
105
- onCompositionStart: props.onCompositionStart,
106
- onCompositionUpdate: props.onCompositionUpdate,
107
- // Selection events
108
- onSelect: props.onSelect,
109
- // Input events
110
- onBeforeInput: props.onBeforeInput,
111
- onInput: props.onInput,
112
- ...focusableProps,
113
- ...fieldProps
114
- }),
115
- descriptionProps: descriptionProps,
116
- errorMessageProps: errorMessageProps,
117
- isInvalid: isInvalid,
118
- validationErrors: validationErrors,
119
- validationDetails: validationDetails
120
- };
121
- }
122
-
123
-
124
- /*
125
- * Copyright 2021 Adobe. All rights reserved.
126
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
127
- * you may not use this file except in compliance with the License. You may obtain a copy
128
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
129
- *
130
- * Unless required by applicable law or agreed to in writing, software distributed under
131
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
132
- * OF ANY KIND, either express or implied. See the License for the specific language
133
- * governing permissions and limitations under the License.
134
14
  */
135
15
 
136
16
 
137
- function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() {
138
- return typeof window !== "undefined" && window.InputEvent && // @ts-ignore
139
- typeof InputEvent.prototype.getTargetRanges === "function";
140
- }
141
- function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
142
- // All browsers implement the 'beforeinput' event natively except Firefox
143
- // (currently behind a flag as of Firefox 84). React's polyfill does not
144
- // run in all cases that the native event fires, e.g. when deleting text.
145
- // Use the native event if available so that we can prevent invalid deletions.
146
- // We do not attempt to polyfill this in Firefox since it would be very complicated,
147
- // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
148
- let onBeforeInputFallback = (0, $kOq5K$useEffectEvent)((e)=>{
149
- let input = inputRef.current;
150
- // Compute the next value of the input if the event is allowed to proceed.
151
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
152
- let nextValue;
153
- switch(e.inputType){
154
- case "historyUndo":
155
- case "historyRedo":
156
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
157
- // because presumably the input would have already been validated previously.
158
- return;
159
- case "deleteContent":
160
- case "deleteByCut":
161
- case "deleteByDrag":
162
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
163
- break;
164
- case "deleteContentForward":
165
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
166
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
167
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
168
- // If we support additional locales in the future, this may need to change.
169
- 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);
170
- break;
171
- case "deleteContentBackward":
172
- 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);
173
- break;
174
- case "deleteSoftLineBackward":
175
- case "deleteHardLineBackward":
176
- nextValue = input.value.slice(input.selectionStart);
177
- break;
178
- default:
179
- if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
180
- break;
181
- }
182
- // If we did not compute a value, or the new value is invalid, prevent the event
183
- // so that the browser does not update the input text, move the selection, or add to
184
- // the undo/redo stack.
185
- if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
186
- });
187
- (0, $kOq5K$useEffect)(()=>{
188
- if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return;
189
- let input = inputRef.current;
190
- input.addEventListener("beforeinput", onBeforeInputFallback, false);
191
- return ()=>{
192
- input.removeEventListener("beforeinput", onBeforeInputFallback, false);
193
- };
194
- }, [
195
- inputRef,
196
- onBeforeInputFallback
197
- ]);
198
- let onBeforeInput = !$d841c8010a73d545$var$supportsNativeBeforeInputEvent() ? (e)=>{
199
- let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
200
- if (!state.validate(nextValue)) e.preventDefault();
201
- } : null;
202
- let { labelProps: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $2d73ec29415bd339$export$712718f7aec83d5)(props, inputRef);
203
- let compositionStartState = (0, $kOq5K$useRef)(null);
204
- return {
205
- inputProps: (0, $kOq5K$mergeProps)(textFieldProps, {
206
- onBeforeInput: onBeforeInput,
207
- onCompositionStart () {
208
- // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
209
- // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
210
- // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
211
- // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
212
- // nor would we want to cancel them because the input from the user is incomplete at that point.
213
- // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
214
- // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
215
- // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
216
- // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
217
- // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
218
- // are implemented, there is no other way to prevent composed input.
219
- // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
220
- let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current;
221
- compositionStartState.current = {
222
- value: value,
223
- selectionStart: selectionStart,
224
- selectionEnd: selectionEnd
225
- };
226
- },
227
- onCompositionEnd () {
228
- if (!state.validate(inputRef.current.value)) {
229
- // Restore the input value in the DOM immediately so we can synchronously update the selection position.
230
- // But also update the value in React state as well so it is correct for future updates.
231
- let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;
232
- inputRef.current.value = value;
233
- inputRef.current.setSelectionRange(selectionStart, selectionEnd);
234
- state.setInputValue(value);
235
- }
236
- }
237
- }),
238
- labelProps: labelProps,
239
- descriptionProps: descriptionProps,
240
- errorMessageProps: errorMessageProps,
241
- ...validation
242
- };
243
- }
244
-
245
-
246
-
247
17
 
248
18
  export {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField, $d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField};
249
19
  //# sourceMappingURL=module.js.map
package/dist/main.js CHANGED
@@ -1,29 +1,14 @@
1
- var $iITAC$react = require("react");
2
- var $iITAC$reactariautils = require("@react-aria/utils");
3
- var $iITAC$reactstatelyutils = require("@react-stately/utils");
4
- var $iITAC$reactarialabel = require("@react-aria/label");
5
- var $iITAC$reactariafocus = require("@react-aria/focus");
6
- var $iITAC$reactariaform = require("@react-aria/form");
7
- var $iITAC$reactstatelyform = require("@react-stately/form");
1
+ var $9076f978e02df845$exports = require("./useTextField.main.js");
2
+ var $56b68c3dab9bf16c$exports = require("./useFormattedTextField.main.js");
8
3
 
9
4
 
10
5
  function $parcel$export(e, n, v, s) {
11
6
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
12
7
  }
13
8
 
14
- $parcel$export(module.exports, "useTextField", () => $9076f978e02df845$export$712718f7aec83d5);
15
- $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$export$4f384c9210e583c3);
9
+ $parcel$export(module.exports, "useTextField", () => $9076f978e02df845$exports.useTextField);
10
+ $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$exports.useFormattedTextField);
16
11
  /*
17
- * Copyright 2020 Adobe. All rights reserved.
18
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
19
- * you may not use this file except in compliance with the License. You may obtain a copy
20
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
21
- *
22
- * Unless required by applicable law or agreed to in writing, software distributed under
23
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
24
- * OF ANY KIND, either express or implied. See the License for the specific language
25
- * governing permissions and limitations under the License.
26
- */ /*
27
12
  * Copyright 2020 Adobe. All rights reserved.
28
13
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
29
14
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -37,219 +22,4 @@ $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$
37
22
 
38
23
 
39
24
 
40
-
41
-
42
-
43
- function $9076f978e02df845$export$712718f7aec83d5(props, ref) {
44
- let { inputElementType: inputElementType = "input", isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = "text", validationBehavior: validationBehavior = "aria" } = props;
45
- let [value, setValue] = (0, $iITAC$reactstatelyutils.useControlledState)(props.value, props.defaultValue || "", props.onChange);
46
- let { focusableProps: focusableProps } = (0, $iITAC$reactariafocus.useFocusable)(props, ref);
47
- let validationState = (0, $iITAC$reactstatelyform.useFormValidationState)({
48
- ...props,
49
- value: value
50
- });
51
- let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
52
- let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $iITAC$reactarialabel.useField)({
53
- ...props,
54
- isInvalid: isInvalid,
55
- errorMessage: props.errorMessage || validationErrors
56
- });
57
- let domProps = (0, $iITAC$reactariautils.filterDOMProps)(props, {
58
- labelable: true
59
- });
60
- const inputOnlyProps = {
61
- type: type,
62
- pattern: props.pattern
63
- };
64
- (0, $iITAC$reactariautils.useFormReset)(ref, value, setValue);
65
- (0, $iITAC$reactariaform.useFormValidation)(props, validationState, ref);
66
- (0, $iITAC$react.useEffect)(()=>{
67
- // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
68
- // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
69
- // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
70
- // textareas are always controlled. React is planning on removing this synchronization in a
71
- // future major version.
72
- // https://github.com/facebook/react/issues/19474
73
- // https://github.com/facebook/react/issues/11896
74
- if (ref.current instanceof (0, $iITAC$reactariautils.getOwnerWindow)(ref.current).HTMLTextAreaElement) {
75
- let input = ref.current;
76
- Object.defineProperty(input, "defaultValue", {
77
- get: ()=>input.value,
78
- set: ()=>{},
79
- configurable: true
80
- });
81
- }
82
- }, [
83
- ref
84
- ]);
85
- return {
86
- labelProps: labelProps,
87
- inputProps: (0, $iITAC$reactariautils.mergeProps)(domProps, inputElementType === "input" && inputOnlyProps, {
88
- disabled: isDisabled,
89
- readOnly: isReadOnly,
90
- required: isRequired && validationBehavior === "native",
91
- "aria-required": isRequired && validationBehavior === "aria" || undefined,
92
- "aria-invalid": isInvalid || undefined,
93
- "aria-errormessage": props["aria-errormessage"],
94
- "aria-activedescendant": props["aria-activedescendant"],
95
- "aria-autocomplete": props["aria-autocomplete"],
96
- "aria-haspopup": props["aria-haspopup"],
97
- value: value,
98
- onChange: (e)=>setValue(e.target.value),
99
- autoComplete: props.autoComplete,
100
- autoCapitalize: props.autoCapitalize,
101
- maxLength: props.maxLength,
102
- minLength: props.minLength,
103
- name: props.name,
104
- placeholder: props.placeholder,
105
- inputMode: props.inputMode,
106
- // Clipboard events
107
- onCopy: props.onCopy,
108
- onCut: props.onCut,
109
- onPaste: props.onPaste,
110
- // Composition events
111
- onCompositionEnd: props.onCompositionEnd,
112
- onCompositionStart: props.onCompositionStart,
113
- onCompositionUpdate: props.onCompositionUpdate,
114
- // Selection events
115
- onSelect: props.onSelect,
116
- // Input events
117
- onBeforeInput: props.onBeforeInput,
118
- onInput: props.onInput,
119
- ...focusableProps,
120
- ...fieldProps
121
- }),
122
- descriptionProps: descriptionProps,
123
- errorMessageProps: errorMessageProps,
124
- isInvalid: isInvalid,
125
- validationErrors: validationErrors,
126
- validationDetails: validationDetails
127
- };
128
- }
129
-
130
-
131
- /*
132
- * Copyright 2021 Adobe. All rights reserved.
133
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
134
- * you may not use this file except in compliance with the License. You may obtain a copy
135
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
136
- *
137
- * Unless required by applicable law or agreed to in writing, software distributed under
138
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
139
- * OF ANY KIND, either express or implied. See the License for the specific language
140
- * governing permissions and limitations under the License.
141
- */
142
-
143
-
144
- function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() {
145
- return typeof window !== "undefined" && window.InputEvent && // @ts-ignore
146
- typeof InputEvent.prototype.getTargetRanges === "function";
147
- }
148
- function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) {
149
- // All browsers implement the 'beforeinput' event natively except Firefox
150
- // (currently behind a flag as of Firefox 84). React's polyfill does not
151
- // run in all cases that the native event fires, e.g. when deleting text.
152
- // Use the native event if available so that we can prevent invalid deletions.
153
- // We do not attempt to polyfill this in Firefox since it would be very complicated,
154
- // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
155
- let onBeforeInputFallback = (0, $iITAC$reactariautils.useEffectEvent)((e)=>{
156
- let input = inputRef.current;
157
- // Compute the next value of the input if the event is allowed to proceed.
158
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
159
- let nextValue;
160
- switch(e.inputType){
161
- case "historyUndo":
162
- case "historyRedo":
163
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
164
- // because presumably the input would have already been validated previously.
165
- return;
166
- case "deleteContent":
167
- case "deleteByCut":
168
- case "deleteByDrag":
169
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
170
- break;
171
- case "deleteContentForward":
172
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
173
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
174
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
175
- // If we support additional locales in the future, this may need to change.
176
- 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);
177
- break;
178
- case "deleteContentBackward":
179
- 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);
180
- break;
181
- case "deleteSoftLineBackward":
182
- case "deleteHardLineBackward":
183
- nextValue = input.value.slice(input.selectionStart);
184
- break;
185
- default:
186
- if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
187
- break;
188
- }
189
- // If we did not compute a value, or the new value is invalid, prevent the event
190
- // so that the browser does not update the input text, move the selection, or add to
191
- // the undo/redo stack.
192
- if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
193
- });
194
- (0, $iITAC$react.useEffect)(()=>{
195
- if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return;
196
- let input = inputRef.current;
197
- input.addEventListener("beforeinput", onBeforeInputFallback, false);
198
- return ()=>{
199
- input.removeEventListener("beforeinput", onBeforeInputFallback, false);
200
- };
201
- }, [
202
- inputRef,
203
- onBeforeInputFallback
204
- ]);
205
- let onBeforeInput = !$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() ? (e)=>{
206
- let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
207
- if (!state.validate(nextValue)) e.preventDefault();
208
- } : null;
209
- let { labelProps: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $9076f978e02df845$export$712718f7aec83d5)(props, inputRef);
210
- let compositionStartState = (0, $iITAC$react.useRef)(null);
211
- return {
212
- inputProps: (0, $iITAC$reactariautils.mergeProps)(textFieldProps, {
213
- onBeforeInput: onBeforeInput,
214
- onCompositionStart () {
215
- // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
216
- // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
217
- // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
218
- // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
219
- // nor would we want to cancel them because the input from the user is incomplete at that point.
220
- // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
221
- // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
222
- // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
223
- // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
224
- // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
225
- // are implemented, there is no other way to prevent composed input.
226
- // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
227
- let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current;
228
- compositionStartState.current = {
229
- value: value,
230
- selectionStart: selectionStart,
231
- selectionEnd: selectionEnd
232
- };
233
- },
234
- onCompositionEnd () {
235
- if (!state.validate(inputRef.current.value)) {
236
- // Restore the input value in the DOM immediately so we can synchronously update the selection position.
237
- // But also update the value in React state as well so it is correct for future updates.
238
- let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current;
239
- inputRef.current.value = value;
240
- inputRef.current.setSelectionRange(selectionStart, selectionEnd);
241
- state.setInputValue(value);
242
- }
243
- }
244
- }),
245
- labelProps: labelProps,
246
- descriptionProps: descriptionProps,
247
- errorMessageProps: errorMessageProps,
248
- ...validation
249
- };
250
- }
251
-
252
-
253
-
254
-
255
25
  //# sourceMappingURL=main.js.map
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 useEffect\n} from 'react';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';\nimport {useControlledState} from '@react-stately/utils';\nimport {useField} from '@react-aria/label';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\n\n/**\n * A map of HTML element names and their interface types.\n * For example `'a'` -> `HTMLAnchorElement`.\n */\ntype IntrinsicHTMLElements = {\n [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never\n};\n\n/**\n * A map of HTML element names and their attribute interface types.\n * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.\n */\ntype IntrinsicHTMLAttributes = {\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 * Controls whether inputted text is automatically capitalized and, if so, in what manner. \n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).\n */\n autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\n}\n\n/**\n * The type of `ref` object that can be passed to `useTextField` based on the given\n * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,\n * `RefObject<HTMLTextAreaElement>`.\n */\ntype TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T]>;\n\nexport interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {\n /** Props for the input element. */\n inputProps: TextFieldInputProps<T>,\n /** Props for the text field's visible label element, if any. */\n labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the text field's description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the text field's error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * @param props - Props for the text field.\n * @param ref - Ref to the HTML input or textarea element.\n */\nexport function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(\n props: AriaTextFieldOptions<T>,\n ref: TextFieldRefObject<T>\n): TextFieldAria<T> {\n let {\n inputElementType = 'input',\n isDisabled = false,\n isRequired = false,\n isReadOnly = false,\n type = 'text',\n validationBehavior = 'aria'\n }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;\n let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);\n let {focusableProps} = useFocusable(props, ref);\n let validationState = useFormValidationState({\n ...props,\n value\n });\n let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n isInvalid,\n errorMessage: props.errorMessage || validationErrors\n });\n let domProps = filterDOMProps(props, {labelable: true});\n\n const inputOnlyProps = {\n type,\n pattern: props.pattern\n };\n\n useFormReset(ref, value, setValue);\n useFormValidation(props, validationState, ref);\n\n useEffect(() => {\n // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.\n // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,\n // which causes Chrome to skip validation. Only updating `value` is ok in our case since our\n // textareas are always controlled. React is planning on removing this synchronization in a\n // future major version.\n // https://github.com/facebook/react/issues/19474\n // https://github.com/facebook/react/issues/11896\n if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {\n let input = ref.current;\n Object.defineProperty(input, 'defaultValue', {\n get: () => input.value,\n set: () => {},\n configurable: true\n });\n }\n }, [ref]);\n\n return {\n labelProps,\n inputProps: mergeProps(\n domProps,\n inputElementType === 'input' && inputOnlyProps,\n {\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired && validationBehavior === 'native',\n 'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n 'aria-invalid': isInvalid || undefined,\n 'aria-errormessage': props['aria-errormessage'],\n 'aria-activedescendant': props['aria-activedescendant'],\n 'aria-autocomplete': props['aria-autocomplete'],\n 'aria-haspopup': props['aria-haspopup'],\n value,\n onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),\n autoComplete: props.autoComplete,\n autoCapitalize: props.autoCapitalize,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n ...focusableProps,\n ...fieldProps\n }\n ),\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n","/*\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, ...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":"main.js.map"}
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"}