@react-aria/textfield 3.3.0 → 3.5.1

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/main.js CHANGED
@@ -1,228 +1,206 @@
1
- var {
2
- useEffect,
3
- useRef
4
- } = require("react");
5
-
6
- var {
7
- useLabel
8
- } = require("@react-aria/label");
9
-
10
- var {
11
- useFocusable
12
- } = require("@react-aria/focus");
13
-
14
- var {
15
- filterDOMProps,
16
- mergeProps
17
- } = require("@react-aria/utils");
18
-
19
- var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
20
-
21
- function $parcel$interopDefault(a) {
22
- return a && a.__esModule ? a.default : a;
23
- }
1
+ var $2OTdP$reactariautils = require("@react-aria/utils");
2
+ var $2OTdP$reactarialabel = require("@react-aria/label");
3
+ var $2OTdP$reactariafocus = require("@react-aria/focus");
4
+ var $2OTdP$react = require("react");
5
+
6
+ function $parcel$exportWildcard(dest, source) {
7
+ Object.keys(source).forEach(function(key) {
8
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
9
+ return;
10
+ }
24
11
 
25
- /**
26
- * Provides the behavior and accessibility implementation for a text field.
27
- * @param props - Props for the text field.
28
- * @param ref - Ref to the HTML input or textarea element.
29
- */
30
- function useTextField(props, ref) {
31
- let {
32
- inputElementType = 'input',
33
- isDisabled = false,
34
- isRequired = false,
35
- isReadOnly = false,
36
- validationState,
37
- type = 'text',
38
- onChange: _onChange = () => {}
39
- } = props;
40
- let {
41
- focusableProps
42
- } = useFocusable(props, ref);
43
- let {
44
- labelProps,
45
- fieldProps
46
- } = useLabel(props);
47
- let domProps = filterDOMProps(props, {
48
- labelable: true
12
+ Object.defineProperty(dest, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return source[key];
16
+ }
17
+ });
49
18
  });
50
- const inputOnlyProps = {
51
- type,
52
- pattern: props.pattern
53
- };
54
- return {
55
- labelProps,
56
- inputProps: mergeProps(domProps, inputElementType === 'input' && inputOnlyProps, _babelRuntimeHelpersExtends({
57
- disabled: isDisabled,
58
- readOnly: isReadOnly,
59
- 'aria-required': isRequired || undefined,
60
- 'aria-invalid': validationState === 'invalid' || undefined,
61
- 'aria-errormessage': props['aria-errormessage'],
62
- 'aria-activedescendant': props['aria-activedescendant'],
63
- 'aria-autocomplete': props['aria-autocomplete'],
64
- 'aria-haspopup': props['aria-haspopup'],
65
- value: props.value,
66
- defaultValue: props.value ? undefined : props.defaultValue,
67
- onChange: e => _onChange(e.target.value),
68
- autoComplete: props.autoComplete,
69
- maxLength: props.maxLength,
70
- minLength: props.minLength,
71
- name: props.name,
72
- placeholder: props.placeholder,
73
- inputMode: props.inputMode,
74
- // Clipboard events
75
- onCopy: props.onCopy,
76
- onCut: props.onCut,
77
- onPaste: props.onPaste,
78
- // Composition events
79
- onCompositionEnd: props.onCompositionEnd,
80
- onCompositionStart: props.onCompositionStart,
81
- onCompositionUpdate: props.onCompositionUpdate,
82
- // Selection events
83
- onSelect: props.onSelect,
84
- // Input events
85
- onBeforeInput: props.onBeforeInput,
86
- onInput: props.onInput
87
- }, focusableProps, fieldProps))
88
- };
89
- }
90
19
 
91
- exports.useTextField = useTextField;
92
-
93
- function $e12a6959a5c62c5783c0140bc17c4eda$var$supportsNativeBeforeInputEvent() {
94
- return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
95
- typeof InputEvent.prototype.getTargetRanges === 'function';
20
+ return dest;
96
21
  }
22
+ function $parcel$export(e, n, v, s) {
23
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
24
+ }
25
+ var $761a185426eebf7a$exports = {};
97
26
 
98
- function useFormattedTextField(props, state, inputRef) {
99
- let stateRef = useRef(state);
100
- stateRef.current = state; // All browsers implement the 'beforeinput' event natively except Firefox
101
- // (currently behind a flag as of Firefox 84). React's polyfill does not
102
- // run in all cases that the native event fires, e.g. when deleting text.
103
- // Use the native event if available so that we can prevent invalid deletions.
104
- // We do not attempt to polyfill this in Firefox since it would be very complicated,
105
- // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
106
-
107
- useEffect(() => {
108
- if (!$e12a6959a5c62c5783c0140bc17c4eda$var$supportsNativeBeforeInputEvent()) {
109
- return;
110
- }
111
-
112
- let input = inputRef.current;
113
-
114
- let onBeforeInput = e => {
115
- let state = stateRef.current; // Compute the next value of the input if the event is allowed to proceed.
116
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
27
+ $parcel$export($761a185426eebf7a$exports, "useTextField", () => $761a185426eebf7a$export$712718f7aec83d5);
117
28
 
118
- let nextValue;
119
29
 
120
- switch (e.inputType) {
121
- case 'historyUndo':
122
- case 'historyRedo':
123
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
124
- // because presumably the input would have already been validated previously.
125
- return;
126
30
 
127
- case 'deleteContent':
128
- case 'deleteByCut':
129
- case 'deleteByDrag':
130
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
131
- break;
31
+ function $761a185426eebf7a$export$712718f7aec83d5(props, ref) {
32
+ let { inputElementType: inputElementType = 'input' , isDisabled: isDisabled = false , isRequired: isRequired = false , isReadOnly: isReadOnly = false , validationState: validationState , type: type = 'text' , onChange: onChange = ()=>{
33
+ } } = props;
34
+ let { focusableProps: focusableProps } = $2OTdP$reactariafocus.useFocusable(props, ref);
35
+ let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $2OTdP$reactarialabel.useField(props);
36
+ let domProps = $2OTdP$reactariautils.filterDOMProps(props, {
37
+ labelable: true
38
+ });
39
+ const inputOnlyProps = {
40
+ type: type,
41
+ pattern: props.pattern
42
+ };
43
+ return {
44
+ labelProps: labelProps,
45
+ inputProps: $2OTdP$reactariautils.mergeProps(domProps, inputElementType === 'input' && inputOnlyProps, {
46
+ disabled: isDisabled,
47
+ readOnly: isReadOnly,
48
+ 'aria-required': isRequired || undefined,
49
+ 'aria-invalid': validationState === 'invalid' || undefined,
50
+ 'aria-errormessage': props['aria-errormessage'],
51
+ 'aria-activedescendant': props['aria-activedescendant'],
52
+ 'aria-autocomplete': props['aria-autocomplete'],
53
+ 'aria-haspopup': props['aria-haspopup'],
54
+ value: props.value,
55
+ defaultValue: props.value ? undefined : props.defaultValue,
56
+ onChange: (e)=>onChange(e.target.value)
57
+ ,
58
+ autoComplete: props.autoComplete,
59
+ maxLength: props.maxLength,
60
+ minLength: props.minLength,
61
+ name: props.name,
62
+ placeholder: props.placeholder,
63
+ inputMode: props.inputMode,
64
+ // Clipboard events
65
+ onCopy: props.onCopy,
66
+ onCut: props.onCut,
67
+ onPaste: props.onPaste,
68
+ // Composition events
69
+ onCompositionEnd: props.onCompositionEnd,
70
+ onCompositionStart: props.onCompositionStart,
71
+ onCompositionUpdate: props.onCompositionUpdate,
72
+ // Selection events
73
+ onSelect: props.onSelect,
74
+ // Input events
75
+ onBeforeInput: props.onBeforeInput,
76
+ onInput: props.onInput,
77
+ ...focusableProps,
78
+ ...fieldProps
79
+ }),
80
+ descriptionProps: descriptionProps,
81
+ errorMessageProps: errorMessageProps
82
+ };
83
+ }
132
84
 
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
85
 
141
- case 'deleteContentBackward':
142
- 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);
143
- break;
86
+ var $43712ad07e8cd416$exports = {};
144
87
 
145
- default:
146
- if (e.data != null) {
147
- nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
148
- }
88
+ $parcel$export($43712ad07e8cd416$exports, "useFormattedTextField", () => $43712ad07e8cd416$export$4f384c9210e583c3);
149
89
 
150
- break;
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
90
 
155
91
 
156
- if (nextValue == null || !state.validate(nextValue)) {
157
- e.preventDefault();
158
- }
92
+ function $43712ad07e8cd416$var$supportsNativeBeforeInputEvent() {
93
+ return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
94
+ typeof InputEvent.prototype.getTargetRanges === 'function';
95
+ }
96
+ function $43712ad07e8cd416$export$4f384c9210e583c3(props, state1, inputRef) {
97
+ let stateRef = $2OTdP$react.useRef(state1);
98
+ stateRef.current = state1;
99
+ // All browsers implement the 'beforeinput' event natively except Firefox
100
+ // (currently behind a flag as of Firefox 84). React's polyfill does not
101
+ // run in all cases that the native event fires, e.g. when deleting text.
102
+ // Use the native event if available so that we can prevent invalid deletions.
103
+ // We do not attempt to polyfill this in Firefox since it would be very complicated,
104
+ // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
105
+ $2OTdP$react.useEffect(()=>{
106
+ if (!$43712ad07e8cd416$var$supportsNativeBeforeInputEvent()) return;
107
+ let input = inputRef.current;
108
+ let onBeforeInput = (e)=>{
109
+ let state = stateRef.current;
110
+ // Compute the next value of the input if the event is allowed to proceed.
111
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
112
+ let nextValue;
113
+ switch(e.inputType){
114
+ case 'historyUndo':
115
+ case 'historyRedo':
116
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
117
+ // because presumably the input would have already been validated previously.
118
+ return;
119
+ case 'deleteContent':
120
+ case 'deleteByCut':
121
+ case 'deleteByDrag':
122
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
123
+ break;
124
+ case 'deleteContentForward':
125
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
126
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
127
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
128
+ // If we support additional locales in the future, this may need to change.
129
+ 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);
130
+ break;
131
+ case 'deleteContentBackward':
132
+ 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);
133
+ break;
134
+ case 'deleteSoftLineBackward':
135
+ case 'deleteHardLineBackward':
136
+ nextValue = input.value.slice(input.selectionStart);
137
+ break;
138
+ default:
139
+ if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
140
+ break;
141
+ }
142
+ // If we did not compute a value, or the new value is invalid, prevent the event
143
+ // so that the browser does not update the input text, move the selection, or add to
144
+ // the undo/redo stack.
145
+ if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
146
+ };
147
+ input.addEventListener('beforeinput', onBeforeInput, false);
148
+ return ()=>{
149
+ input.removeEventListener('beforeinput', onBeforeInput, false);
150
+ };
151
+ }, [
152
+ inputRef,
153
+ stateRef
154
+ ]);
155
+ let onBeforeInput1 = !$43712ad07e8cd416$var$supportsNativeBeforeInputEvent() ? (e)=>{
156
+ let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
157
+ if (!state1.validate(nextValue)) e.preventDefault();
158
+ } : null;
159
+ let { labelProps: labelProps , inputProps: textFieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $761a185426eebf7a$export$712718f7aec83d5(props, inputRef);
160
+ let compositionStartState = $2OTdP$react.useRef(null);
161
+ return {
162
+ inputProps: $2OTdP$reactariautils.mergeProps(textFieldProps, {
163
+ onBeforeInput: onBeforeInput1,
164
+ onCompositionStart () {
165
+ // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
166
+ // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
167
+ // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
168
+ // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
169
+ // nor would we want to cancel them because the input from the user is incomplete at that point.
170
+ // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
171
+ // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
172
+ // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
173
+ // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
174
+ // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
175
+ // are implemented, there is no other way to prevent composed input.
176
+ // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
177
+ let { value: value , selectionStart: selectionStart , selectionEnd: selectionEnd } = inputRef.current;
178
+ compositionStartState.current = {
179
+ value: value,
180
+ selectionStart: selectionStart,
181
+ selectionEnd: selectionEnd
182
+ };
183
+ },
184
+ onCompositionEnd () {
185
+ if (!state1.validate(inputRef.current.value)) {
186
+ // Restore the input value in the DOM immediately so we can synchronously update the selection position.
187
+ // But also update the value in React state as well so it is correct for future updates.
188
+ let { value: value , selectionStart: selectionStart , selectionEnd: selectionEnd } = compositionStartState.current;
189
+ inputRef.current.value = value;
190
+ inputRef.current.setSelectionRange(selectionStart, selectionEnd);
191
+ state1.setInputValue(value);
192
+ }
193
+ }
194
+ }),
195
+ labelProps: labelProps,
196
+ descriptionProps: descriptionProps,
197
+ errorMessageProps: errorMessageProps
159
198
  };
199
+ }
160
200
 
161
- input.addEventListener('beforeinput', onBeforeInput, false);
162
- return () => {
163
- input.removeEventListener('beforeinput', onBeforeInput, false);
164
- };
165
- }, [inputRef, stateRef]);
166
- let onBeforeInput = !$e12a6959a5c62c5783c0140bc17c4eda$var$supportsNativeBeforeInputEvent() ? e => {
167
- let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
168
201
 
169
- if (!state.validate(nextValue)) {
170
- e.preventDefault();
171
- }
172
- } : null;
173
- let {
174
- labelProps,
175
- inputProps: textFieldProps
176
- } = useTextField(props, inputRef);
177
- let compositionStartState = useRef(null);
178
- return {
179
- inputProps: mergeProps(textFieldProps, {
180
- onBeforeInput,
181
-
182
- onCompositionStart() {
183
- // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
184
- // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
185
- // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
186
- // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
187
- // nor would we want to cancel them because the input from the user is incomplete at that point.
188
- // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
189
- // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
190
- // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
191
- // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
192
- // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
193
- // are implemented, there is no other way to prevent composed input.
194
- // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
195
- let {
196
- value,
197
- selectionStart,
198
- selectionEnd
199
- } = inputRef.current;
200
- compositionStartState.current = {
201
- value,
202
- selectionStart,
203
- selectionEnd
204
- };
205
- },
206
-
207
- onCompositionEnd() {
208
- if (!state.validate(inputRef.current.value)) {
209
- // Restore the input value in the DOM immediately so we can synchronously update the selection position.
210
- // But also update the value in React state as well so it is correct for future updates.
211
- let {
212
- value,
213
- selectionStart,
214
- selectionEnd
215
- } = compositionStartState.current;
216
- inputRef.current.value = value;
217
- inputRef.current.setSelectionRange(selectionStart, selectionEnd);
218
- state.setInputValue(value);
219
- }
220
- }
202
+ $parcel$exportWildcard(module.exports, $761a185426eebf7a$exports);
203
+ $parcel$exportWildcard(module.exports, $43712ad07e8cd416$exports);
221
204
 
222
- }),
223
- labelProps
224
- };
225
- }
226
205
 
227
- exports.useFormattedTextField = useFormattedTextField;
228
206
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-aria/textfield/src/useTextField.ts","./packages/@react-aria/textfield/src/useFormattedTextField.ts"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\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 {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, TextareaHTMLAttributes} from 'react';\nimport {ElementType} from 'react';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useFocusable} from '@react-aria/focus';\nimport {useLabel} from '@react-aria/label';\n\nexport interface TextFieldAria {\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n /** Props for the text field's visible label element (if any). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>\n}\n\ninterface AriaTextFieldOptions 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?: ElementType\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(\n props: AriaTextFieldOptions,\n ref: RefObject<HTMLInputElement | HTMLTextAreaElement>\n): TextFieldAria {\n let {\n inputElementType = 'input',\n isDisabled = false,\n isRequired = false,\n isReadOnly = false,\n validationState,\n type = 'text',\n onChange = () => {}\n } = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps} = useLabel(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 };\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 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} = 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 };\n}\n"],"names":["$parcel$interopDefault","a","__esModule","default","useTextField","props","ref","inputElementType","isDisabled","isRequired","isReadOnly","validationState","type","onChange","focusableProps","useFocusable","labelProps","fieldProps","useLabel","domProps","filterDOMProps","labelable","inputOnlyProps","pattern","inputProps","mergeProps","disabled","readOnly","undefined","value","defaultValue","e","target","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","supportsNativeBeforeInputEvent","window","InputEvent","prototype","getTargetRanges","useFormattedTextField","state","inputRef","stateRef","useRef","current","useEffect","input","nextValue","inputType","slice","selectionStart","selectionEnd","data","validate","preventDefault","addEventListener","removeEventListener","textFieldProps","compositionStartState","setSelectionRange","setInputValue"],"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 */\n\nexport * from './useTextField';\nexport * from './useFormattedTextField';\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 {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\ninterface 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: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the text field's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n /** Props for the text field's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\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"}
package/dist/module.js CHANGED
@@ -1,206 +1,189 @@
1
- import { useEffect, useRef } from "react";
2
- import { useLabel } from "@react-aria/label";
3
- import { useFocusable } from "@react-aria/focus";
4
- import { filterDOMProps, mergeProps } from "@react-aria/utils";
5
- import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
1
+ import {filterDOMProps as $TCHa7$filterDOMProps, mergeProps as $TCHa7$mergeProps} from "@react-aria/utils";
2
+ import {useField as $TCHa7$useField} from "@react-aria/label";
3
+ import {useFocusable as $TCHa7$useFocusable} from "@react-aria/focus";
4
+ import {useRef as $TCHa7$useRef, useEffect as $TCHa7$useEffect} from "react";
6
5
 
7
- /**
8
- * Provides the behavior and accessibility implementation for a text field.
9
- * @param props - Props for the text field.
10
- * @param ref - Ref to the HTML input or textarea element.
11
- */
12
- export function useTextField(props, ref) {
13
- let {
14
- inputElementType = 'input',
15
- isDisabled = false,
16
- isRequired = false,
17
- isReadOnly = false,
18
- validationState,
19
- type = 'text',
20
- onChange: _onChange = () => {}
21
- } = props;
22
- let {
23
- focusableProps
24
- } = useFocusable(props, ref);
25
- let {
26
- labelProps,
27
- fieldProps
28
- } = useLabel(props);
29
- let domProps = filterDOMProps(props, {
30
- labelable: true
31
- });
32
- const inputOnlyProps = {
33
- type,
34
- pattern: props.pattern
35
- };
36
- return {
37
- labelProps,
38
- inputProps: mergeProps(domProps, inputElementType === 'input' && inputOnlyProps, _babelRuntimeHelpersEsmExtends({
39
- disabled: isDisabled,
40
- readOnly: isReadOnly,
41
- 'aria-required': isRequired || undefined,
42
- 'aria-invalid': validationState === 'invalid' || undefined,
43
- 'aria-errormessage': props['aria-errormessage'],
44
- 'aria-activedescendant': props['aria-activedescendant'],
45
- 'aria-autocomplete': props['aria-autocomplete'],
46
- 'aria-haspopup': props['aria-haspopup'],
47
- value: props.value,
48
- defaultValue: props.value ? undefined : props.defaultValue,
49
- onChange: e => _onChange(e.target.value),
50
- autoComplete: props.autoComplete,
51
- maxLength: props.maxLength,
52
- minLength: props.minLength,
53
- name: props.name,
54
- placeholder: props.placeholder,
55
- inputMode: props.inputMode,
56
- // Clipboard events
57
- onCopy: props.onCopy,
58
- onCut: props.onCut,
59
- onPaste: props.onPaste,
60
- // Composition events
61
- onCompositionEnd: props.onCompositionEnd,
62
- onCompositionStart: props.onCompositionStart,
63
- onCompositionUpdate: props.onCompositionUpdate,
64
- // Selection events
65
- onSelect: props.onSelect,
66
- // Input events
67
- onBeforeInput: props.onBeforeInput,
68
- onInput: props.onInput
69
- }, focusableProps, fieldProps))
70
- };
6
+ function $parcel$export(e, n, v, s) {
7
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
71
8
  }
9
+ var $7811e7c771d6e497$exports = {};
72
10
 
73
- function $c7e32867b2abc7e2d776d5c060056cb7$var$supportsNativeBeforeInputEvent() {
74
- return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
75
- typeof InputEvent.prototype.getTargetRanges === 'function';
76
- }
77
-
78
- export function useFormattedTextField(props, state, inputRef) {
79
- let stateRef = useRef(state);
80
- stateRef.current = state; // All browsers implement the 'beforeinput' event natively except Firefox
81
- // (currently behind a flag as of Firefox 84). React's polyfill does not
82
- // run in all cases that the native event fires, e.g. when deleting text.
83
- // Use the native event if available so that we can prevent invalid deletions.
84
- // We do not attempt to polyfill this in Firefox since it would be very complicated,
85
- // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
86
-
87
- useEffect(() => {
88
- if (!$c7e32867b2abc7e2d776d5c060056cb7$var$supportsNativeBeforeInputEvent()) {
89
- return;
90
- }
91
-
92
- let input = inputRef.current;
11
+ $parcel$export($7811e7c771d6e497$exports, "useTextField", () => $7811e7c771d6e497$export$712718f7aec83d5);
93
12
 
94
- let onBeforeInput = e => {
95
- let state = stateRef.current; // Compute the next value of the input if the event is allowed to proceed.
96
- // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
97
13
 
98
- let nextValue;
99
14
 
100
- switch (e.inputType) {
101
- case 'historyUndo':
102
- case 'historyRedo':
103
- // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
104
- // because presumably the input would have already been validated previously.
105
- return;
106
-
107
- case 'deleteContent':
108
- case 'deleteByCut':
109
- case 'deleteByDrag':
110
- nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
111
- break;
112
-
113
- case 'deleteContentForward':
114
- // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
115
- // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
116
- // or code points may be deleted. However, in our currently supported locales, there are no such cases.
117
- // If we support additional locales in the future, this may need to change.
118
- 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);
119
- break;
15
+ function $7811e7c771d6e497$export$712718f7aec83d5(props, ref) {
16
+ let { inputElementType: inputElementType = 'input' , isDisabled: isDisabled = false , isRequired: isRequired = false , isReadOnly: isReadOnly = false , validationState: validationState , type: type = 'text' , onChange: onChange = ()=>{
17
+ } } = props;
18
+ let { focusableProps: focusableProps } = $TCHa7$useFocusable(props, ref);
19
+ let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $TCHa7$useField(props);
20
+ let domProps = $TCHa7$filterDOMProps(props, {
21
+ labelable: true
22
+ });
23
+ const inputOnlyProps = {
24
+ type: type,
25
+ pattern: props.pattern
26
+ };
27
+ return {
28
+ labelProps: labelProps,
29
+ inputProps: $TCHa7$mergeProps(domProps, inputElementType === 'input' && inputOnlyProps, {
30
+ disabled: isDisabled,
31
+ readOnly: isReadOnly,
32
+ 'aria-required': isRequired || undefined,
33
+ 'aria-invalid': validationState === 'invalid' || undefined,
34
+ 'aria-errormessage': props['aria-errormessage'],
35
+ 'aria-activedescendant': props['aria-activedescendant'],
36
+ 'aria-autocomplete': props['aria-autocomplete'],
37
+ 'aria-haspopup': props['aria-haspopup'],
38
+ value: props.value,
39
+ defaultValue: props.value ? undefined : props.defaultValue,
40
+ onChange: (e)=>onChange(e.target.value)
41
+ ,
42
+ autoComplete: props.autoComplete,
43
+ maxLength: props.maxLength,
44
+ minLength: props.minLength,
45
+ name: props.name,
46
+ placeholder: props.placeholder,
47
+ inputMode: props.inputMode,
48
+ // Clipboard events
49
+ onCopy: props.onCopy,
50
+ onCut: props.onCut,
51
+ onPaste: props.onPaste,
52
+ // Composition events
53
+ onCompositionEnd: props.onCompositionEnd,
54
+ onCompositionStart: props.onCompositionStart,
55
+ onCompositionUpdate: props.onCompositionUpdate,
56
+ // Selection events
57
+ onSelect: props.onSelect,
58
+ // Input events
59
+ onBeforeInput: props.onBeforeInput,
60
+ onInput: props.onInput,
61
+ ...focusableProps,
62
+ ...fieldProps
63
+ }),
64
+ descriptionProps: descriptionProps,
65
+ errorMessageProps: errorMessageProps
66
+ };
67
+ }
120
68
 
121
- case 'deleteContentBackward':
122
- 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);
123
- break;
124
69
 
125
- default:
126
- if (e.data != null) {
127
- nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
128
- }
70
+ var $7f9aed3807b71324$exports = {};
129
71
 
130
- break;
131
- } // If we did not compute a value, or the new value is invalid, prevent the event
132
- // so that the browser does not update the input text, move the selection, or add to
133
- // the undo/redo stack.
72
+ $parcel$export($7f9aed3807b71324$exports, "useFormattedTextField", () => $7f9aed3807b71324$export$4f384c9210e583c3);
134
73
 
135
74
 
136
- if (nextValue == null || !state.validate(nextValue)) {
137
- e.preventDefault();
138
- }
139
- };
140
75
 
141
- input.addEventListener('beforeinput', onBeforeInput, false);
142
- return () => {
143
- input.removeEventListener('beforeinput', onBeforeInput, false);
76
+ function $7f9aed3807b71324$var$supportsNativeBeforeInputEvent() {
77
+ return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore
78
+ typeof InputEvent.prototype.getTargetRanges === 'function';
79
+ }
80
+ function $7f9aed3807b71324$export$4f384c9210e583c3(props, state1, inputRef) {
81
+ let stateRef = $TCHa7$useRef(state1);
82
+ stateRef.current = state1;
83
+ // All browsers implement the 'beforeinput' event natively except Firefox
84
+ // (currently behind a flag as of Firefox 84). React's polyfill does not
85
+ // run in all cases that the native event fires, e.g. when deleting text.
86
+ // Use the native event if available so that we can prevent invalid deletions.
87
+ // We do not attempt to polyfill this in Firefox since it would be very complicated,
88
+ // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
89
+ $TCHa7$useEffect(()=>{
90
+ if (!$7f9aed3807b71324$var$supportsNativeBeforeInputEvent()) return;
91
+ let input = inputRef.current;
92
+ let onBeforeInput = (e)=>{
93
+ let state = stateRef.current;
94
+ // Compute the next value of the input if the event is allowed to proceed.
95
+ // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
96
+ let nextValue;
97
+ switch(e.inputType){
98
+ case 'historyUndo':
99
+ case 'historyRedo':
100
+ // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
101
+ // because presumably the input would have already been validated previously.
102
+ return;
103
+ case 'deleteContent':
104
+ case 'deleteByCut':
105
+ case 'deleteByDrag':
106
+ nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
107
+ break;
108
+ case 'deleteContentForward':
109
+ // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
110
+ // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
111
+ // or code points may be deleted. However, in our currently supported locales, there are no such cases.
112
+ // If we support additional locales in the future, this may need to change.
113
+ 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);
114
+ break;
115
+ case 'deleteContentBackward':
116
+ 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);
117
+ break;
118
+ case 'deleteSoftLineBackward':
119
+ case 'deleteHardLineBackward':
120
+ nextValue = input.value.slice(input.selectionStart);
121
+ break;
122
+ default:
123
+ if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
124
+ break;
125
+ }
126
+ // If we did not compute a value, or the new value is invalid, prevent the event
127
+ // so that the browser does not update the input text, move the selection, or add to
128
+ // the undo/redo stack.
129
+ if (nextValue == null || !state.validate(nextValue)) e.preventDefault();
130
+ };
131
+ input.addEventListener('beforeinput', onBeforeInput, false);
132
+ return ()=>{
133
+ input.removeEventListener('beforeinput', onBeforeInput, false);
134
+ };
135
+ }, [
136
+ inputRef,
137
+ stateRef
138
+ ]);
139
+ let onBeforeInput1 = !$7f9aed3807b71324$var$supportsNativeBeforeInputEvent() ? (e)=>{
140
+ let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
141
+ if (!state1.validate(nextValue)) e.preventDefault();
142
+ } : null;
143
+ let { labelProps: labelProps , inputProps: textFieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $7811e7c771d6e497$export$712718f7aec83d5(props, inputRef);
144
+ let compositionStartState = $TCHa7$useRef(null);
145
+ return {
146
+ inputProps: $TCHa7$mergeProps(textFieldProps, {
147
+ onBeforeInput: onBeforeInput1,
148
+ onCompositionStart () {
149
+ // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
150
+ // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
151
+ // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
152
+ // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
153
+ // nor would we want to cancel them because the input from the user is incomplete at that point.
154
+ // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
155
+ // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
156
+ // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
157
+ // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
158
+ // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
159
+ // are implemented, there is no other way to prevent composed input.
160
+ // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
161
+ let { value: value , selectionStart: selectionStart , selectionEnd: selectionEnd } = inputRef.current;
162
+ compositionStartState.current = {
163
+ value: value,
164
+ selectionStart: selectionStart,
165
+ selectionEnd: selectionEnd
166
+ };
167
+ },
168
+ onCompositionEnd () {
169
+ if (!state1.validate(inputRef.current.value)) {
170
+ // Restore the input value in the DOM immediately so we can synchronously update the selection position.
171
+ // But also update the value in React state as well so it is correct for future updates.
172
+ let { value: value , selectionStart: selectionStart , selectionEnd: selectionEnd } = compositionStartState.current;
173
+ inputRef.current.value = value;
174
+ inputRef.current.setSelectionRange(selectionStart, selectionEnd);
175
+ state1.setInputValue(value);
176
+ }
177
+ }
178
+ }),
179
+ labelProps: labelProps,
180
+ descriptionProps: descriptionProps,
181
+ errorMessageProps: errorMessageProps
144
182
  };
145
- }, [inputRef, stateRef]);
146
- let onBeforeInput = !$c7e32867b2abc7e2d776d5c060056cb7$var$supportsNativeBeforeInputEvent() ? e => {
147
- let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
183
+ }
148
184
 
149
- if (!state.validate(nextValue)) {
150
- e.preventDefault();
151
- }
152
- } : null;
153
- let {
154
- labelProps,
155
- inputProps: textFieldProps
156
- } = useTextField(props, inputRef);
157
- let compositionStartState = useRef(null);
158
- return {
159
- inputProps: mergeProps(textFieldProps, {
160
- onBeforeInput,
161
185
 
162
- onCompositionStart() {
163
- // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
164
- // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
165
- // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
166
- // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
167
- // nor would we want to cancel them because the input from the user is incomplete at that point.
168
- // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
169
- // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
170
- // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
171
- // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
172
- // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
173
- // are implemented, there is no other way to prevent composed input.
174
- // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
175
- let {
176
- value,
177
- selectionStart,
178
- selectionEnd
179
- } = inputRef.current;
180
- compositionStartState.current = {
181
- value,
182
- selectionStart,
183
- selectionEnd
184
- };
185
- },
186
186
 
187
- onCompositionEnd() {
188
- if (!state.validate(inputRef.current.value)) {
189
- // Restore the input value in the DOM immediately so we can synchronously update the selection position.
190
- // But also update the value in React state as well so it is correct for future updates.
191
- let {
192
- value,
193
- selectionStart,
194
- selectionEnd
195
- } = compositionStartState.current;
196
- inputRef.current.value = value;
197
- inputRef.current.setSelectionRange(selectionStart, selectionEnd);
198
- state.setInputValue(value);
199
- }
200
- }
201
187
 
202
- }),
203
- labelProps
204
- };
205
- }
188
+ export {$7811e7c771d6e497$export$712718f7aec83d5 as useTextField, $7f9aed3807b71324$export$4f384c9210e583c3 as useFormattedTextField};
206
189
  //# sourceMappingURL=module.js.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./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 */\n\nimport {AriaTextFieldProps} from '@react-types/textfield';\nimport {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, TextareaHTMLAttributes} from 'react';\nimport {ElementType} from 'react';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useFocusable} from '@react-aria/focus';\nimport {useLabel} from '@react-aria/label';\n\nexport interface TextFieldAria {\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n /** Props for the text field's visible label element (if any). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>\n}\n\ninterface AriaTextFieldOptions 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?: ElementType\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(\n props: AriaTextFieldOptions,\n ref: RefObject<HTMLInputElement | HTMLTextAreaElement>\n): TextFieldAria {\n let {\n inputElementType = 'input',\n isDisabled = false,\n isRequired = false,\n isReadOnly = false,\n validationState,\n type = 'text',\n onChange = () => {}\n } = props;\n let {focusableProps} = useFocusable(props, ref);\n let {labelProps, fieldProps} = useLabel(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 };\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 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} = 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 };\n}\n"],"names":["useTextField","props","ref","inputElementType","isDisabled","isRequired","isReadOnly","validationState","type","onChange","focusableProps","useFocusable","labelProps","fieldProps","useLabel","domProps","filterDOMProps","labelable","inputOnlyProps","pattern","inputProps","mergeProps","disabled","readOnly","undefined","value","defaultValue","e","target","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","supportsNativeBeforeInputEvent","window","InputEvent","prototype","getTargetRanges","useFormattedTextField","state","inputRef","stateRef","useRef","current","useEffect","input","nextValue","inputType","slice","selectionStart","selectionEnd","data","validate","preventDefault","addEventListener","removeEventListener","textFieldProps","compositionStartState","setSelectionRange","setInputValue"],"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 */\n\nexport * from './useTextField';\nexport * from './useFormattedTextField';\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 {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\ninterface 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: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the text field's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n /** Props for the text field's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\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"}
package/dist/types.d.ts CHANGED
@@ -1,26 +1,73 @@
1
1
  import { AriaTextFieldProps } from "@react-types/textfield";
2
- import { InputHTMLAttributes, LabelHTMLAttributes, RefObject, TextareaHTMLAttributes, ElementType } from "react";
3
- export interface TextFieldAria {
4
- /** Props for the input element. */
5
- inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
6
- /** Props for the text field's visible label element (if any). */
7
- labelProps: LabelHTMLAttributes<HTMLLabelElement>;
8
- }
9
- interface AriaTextFieldOptions extends AriaTextFieldProps {
2
+ import { DOMFactory, HTMLAttributes, LabelHTMLAttributes, ReactDOM, RefObject } from "react";
3
+ /**
4
+ * A map of HTML element names and their interface types.
5
+ * For example `'a'` -> `HTMLAnchorElement`.
6
+ */
7
+ type IntrinsicHTMLElements = {
8
+ [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never;
9
+ };
10
+ /**
11
+ * A map of HTML element names and their attribute interface types.
12
+ * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
13
+ */
14
+ type IntrinsicHTMLAttributes = {
15
+ [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never;
16
+ };
17
+ type DefaultElementType = 'input';
18
+ /**
19
+ * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
20
+ * `textarea`.
21
+ */
22
+ type TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;
23
+ /**
24
+ * The HTML element interfaces that `useTextField` supports based on what is
25
+ * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
26
+ * `HTMLTextAreaElement`.
27
+ */
28
+ type TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;
29
+ /**
30
+ * The HTML attributes interfaces that `useTextField` supports based on what
31
+ * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
32
+ * `TextareaHTMLAttributes`.
33
+ */
34
+ type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;
35
+ /**
36
+ * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
37
+ * `TextareaHTMLAttributes`.
38
+ */
39
+ type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
40
+ interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
10
41
  /**
11
42
  * The HTML element used to render the input, e.g. 'input', or 'textarea'.
12
43
  * It determines whether certain HTML attributes will be included in `inputProps`.
13
44
  * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
14
45
  * @default 'input'
15
46
  */
16
- inputElementType?: ElementType;
47
+ inputElementType?: T;
48
+ }
49
+ /**
50
+ * The type of `ref` object that can be passed to `useTextField` based on the given
51
+ * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
52
+ * `RefObject<HTMLTextAreaElement>`.
53
+ */
54
+ type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T]>;
55
+ export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {
56
+ /** Props for the input element. */
57
+ inputProps: TextFieldInputProps<T>;
58
+ /** Props for the text field's visible label element, if any. */
59
+ labelProps: LabelHTMLAttributes<HTMLLabelElement>;
60
+ /** Props for the text field's description element, if any. */
61
+ descriptionProps: HTMLAttributes<HTMLElement>;
62
+ /** Props for the text field's error message element, if any. */
63
+ errorMessageProps: HTMLAttributes<HTMLElement>;
17
64
  }
18
65
  /**
19
66
  * Provides the behavior and accessibility implementation for a text field.
20
67
  * @param props - Props for the text field.
21
68
  * @param ref - Ref to the HTML input or textarea element.
22
69
  */
23
- export function useTextField(props: AriaTextFieldOptions, ref: RefObject<HTMLInputElement | HTMLTextAreaElement>): TextFieldAria;
70
+ export function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(props: AriaTextFieldOptions<T>, ref: TextFieldRefObject<T>): TextFieldAria<T>;
24
71
  interface FormattedTextFieldState {
25
72
  validate: (val: string) => boolean;
26
73
  setInputValue: (val: string) => void;
@@ -1 +1 @@
1
- {"mappings":"A;A;AAmBA;IACE,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,GAAG,uBAAuB,mBAAmB,CAAC,CAAC;IAChG,iEAAiE;IACjE,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CAClD;AAED,8BAA+B,SAAQ,kBAAkB;IACvD;A;A;A;A;OAKG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAA;CAC/B;AAED;A;A;A;GAIG;AACH,6BACE,KAAK,EAAE,oBAAoB,EAC3B,GAAG,EAAE,UAAU,gBAAgB,GAAG,mBAAmB,CAAC,GACrD,aAAa,CAgEf;AC3FD;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,CA4HrJ","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"],"sourcesContent":[null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;AAyBA;;;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;AAEzF;;;;GAIG;AACJ,gCAAgC,IAAI,CAAC,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;AAEvF;;;;GAIG;AACJ,mCAAmC,IAAI,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,CAAC;AAE7F;;;GAGG;AACH,yBAAyB,CAAC,SAAS,0BAA0B,IAAI,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAEhG,+BAA+B,CAAC,SAAS,0BAA0B,CAAE,SAAQ,kBAAkB;IAC7F;;;;;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,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,8DAA8D;IAC9D,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAC;IAC9C,gEAAgE;IAChE,iBAAiB,EAAE,eAAe,WAAW,CAAC,CAAA;CAC/C;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;AC1JD;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","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 */\n\nexport * from './useTextField';\nexport * from './useFormattedTextField';\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.3.0",
3
+ "version": "3.5.1",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -18,11 +18,11 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@babel/runtime": "^7.6.2",
21
- "@react-aria/focus": "^3.3.0",
22
- "@react-aria/label": "^3.1.2",
23
- "@react-aria/utils": "^3.8.0",
24
- "@react-types/shared": "^3.6.0",
25
- "@react-types/textfield": "^3.2.2"
21
+ "@react-aria/focus": "^3.5.1",
22
+ "@react-aria/label": "^3.2.2",
23
+ "@react-aria/utils": "^3.11.1",
24
+ "@react-types/shared": "^3.11.0",
25
+ "@react-types/textfield": "^3.3.1"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": "^16.8.0 || ^17.0.0-rc.1"
@@ -30,5 +30,5 @@
30
30
  "publishConfig": {
31
31
  "access": "public"
32
32
  },
33
- "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
33
+ "gitHead": "54c2366c4f31bd4bf619126131cd583c12972acc"
34
34
  }
@@ -77,6 +77,10 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
77
77
  ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
78
78
  : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
79
79
  break;
80
+ case 'deleteSoftLineBackward':
81
+ case 'deleteHardLineBackward':
82
+ nextValue = input.value.slice(input.selectionStart);
83
+ break;
80
84
  default:
81
85
  if (e.data != null) {
82
86
  nextValue =
@@ -114,7 +118,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
114
118
  }
115
119
  : null;
116
120
 
117
- let {labelProps, inputProps: textFieldProps} = useTextField(props, inputRef);
121
+ let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
118
122
 
119
123
  let compositionStartState = useRef(null);
120
124
  return {
@@ -150,6 +154,8 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
150
154
  }
151
155
  }
152
156
  ),
153
- labelProps
157
+ labelProps,
158
+ descriptionProps,
159
+ errorMessageProps
154
160
  };
155
161
  }
@@ -11,27 +11,88 @@
11
11
  */
12
12
 
13
13
  import {AriaTextFieldProps} from '@react-types/textfield';
14
- import {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, TextareaHTMLAttributes} from 'react';
15
- import {ElementType} from 'react';
14
+ import {
15
+ ChangeEvent,
16
+ DOMFactory,
17
+ HTMLAttributes,
18
+ LabelHTMLAttributes,
19
+ ReactDOM,
20
+ RefObject
21
+ } from 'react';
16
22
  import {filterDOMProps, mergeProps} from '@react-aria/utils';
23
+ import {useField} from '@react-aria/label';
17
24
  import {useFocusable} from '@react-aria/focus';
18
- import {useLabel} from '@react-aria/label';
19
25
 
20
- export interface TextFieldAria {
21
- /** Props for the input element. */
22
- inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,
23
- /** Props for the text field's visible label element (if any). */
24
- labelProps: LabelHTMLAttributes<HTMLLabelElement>
25
- }
26
+ /**
27
+ * A map of HTML element names and their interface types.
28
+ * For example `'a'` -> `HTMLAnchorElement`.
29
+ */
30
+ type IntrinsicHTMLElements = {
31
+ [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never
32
+ };
33
+
34
+ /**
35
+ * A map of HTML element names and their attribute interface types.
36
+ * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
37
+ */
38
+ type IntrinsicHTMLAttributes = {
39
+ [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never
40
+ };
41
+
42
+ type DefaultElementType = 'input';
43
+
44
+ /**
45
+ * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
46
+ * `textarea`.
47
+ */
48
+ type TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;
26
49
 
27
- interface AriaTextFieldOptions extends AriaTextFieldProps {
50
+ /**
51
+ * The HTML element interfaces that `useTextField` supports based on what is
52
+ * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
53
+ * `HTMLTextAreaElement`.
54
+ */
55
+ type TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;
56
+
57
+ /**
58
+ * The HTML attributes interfaces that `useTextField` supports based on what
59
+ * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
60
+ * `TextareaHTMLAttributes`.
61
+ */
62
+ type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;
63
+
64
+ /**
65
+ * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
66
+ * `TextareaHTMLAttributes`.
67
+ */
68
+ type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
69
+
70
+ interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
28
71
  /**
29
72
  * The HTML element used to render the input, e.g. 'input', or 'textarea'.
30
73
  * It determines whether certain HTML attributes will be included in `inputProps`.
31
74
  * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
32
75
  * @default 'input'
33
76
  */
34
- inputElementType?: ElementType
77
+ inputElementType?: T
78
+ }
79
+
80
+ /**
81
+ * The type of `ref` object that can be passed to `useTextField` based on the given
82
+ * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
83
+ * `RefObject<HTMLTextAreaElement>`.
84
+ */
85
+ type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T]>;
86
+
87
+ export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {
88
+ /** Props for the input element. */
89
+ inputProps: TextFieldInputProps<T>,
90
+ /** Props for the text field's visible label element, if any. */
91
+ labelProps: LabelHTMLAttributes<HTMLLabelElement>,
92
+ /** Props for the text field's description element, if any. */
93
+ descriptionProps: HTMLAttributes<HTMLElement>,
94
+ /** Props for the text field's error message element, if any. */
95
+ errorMessageProps: HTMLAttributes<HTMLElement>
35
96
  }
36
97
 
37
98
  /**
@@ -39,10 +100,10 @@ interface AriaTextFieldOptions extends AriaTextFieldProps {
39
100
  * @param props - Props for the text field.
40
101
  * @param ref - Ref to the HTML input or textarea element.
41
102
  */
42
- export function useTextField(
43
- props: AriaTextFieldOptions,
44
- ref: RefObject<HTMLInputElement | HTMLTextAreaElement>
45
- ): TextFieldAria {
103
+ export function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(
104
+ props: AriaTextFieldOptions<T>,
105
+ ref: TextFieldRefObject<T>
106
+ ): TextFieldAria<T> {
46
107
  let {
47
108
  inputElementType = 'input',
48
109
  isDisabled = false,
@@ -51,9 +112,9 @@ export function useTextField(
51
112
  validationState,
52
113
  type = 'text',
53
114
  onChange = () => {}
54
- } = props;
115
+ }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
55
116
  let {focusableProps} = useFocusable(props, ref);
56
- let {labelProps, fieldProps} = useLabel(props);
117
+ let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
57
118
  let domProps = filterDOMProps(props, {labelable: true});
58
119
 
59
120
  const inputOnlyProps = {
@@ -104,6 +165,8 @@ export function useTextField(
104
165
  ...focusableProps,
105
166
  ...fieldProps
106
167
  }
107
- )
168
+ ),
169
+ descriptionProps,
170
+ errorMessageProps
108
171
  };
109
172
  }