@react-aria/textfield
Advanced tools
@react-aria/textfield - npm Package Compare versions
Comparing version 3.14.3 to 3.14.4
238
dist/main.js
@@ -1,8 +0,3 @@ | ||
| var $iITAC$react = require("react"); | ||
| var $iITAC$reactariautils = require("@react-aria/utils"); | ||
| var $iITAC$reactstatelyutils = require("@react-stately/utils"); | ||
| var $iITAC$reactarialabel = require("@react-aria/label"); | ||
| var $iITAC$reactariafocus = require("@react-aria/focus"); | ||
| var $iITAC$reactariaform = require("@react-aria/form"); | ||
| var $iITAC$reactstatelyform = require("@react-stately/form"); | ||
| var $9076f978e02df845$exports = require("./useTextField.main.js"); | ||
| var $56b68c3dab9bf16c$exports = require("./useFormattedTextField.main.js"); | ||
@@ -14,4 +9,4 @@ | ||
| $parcel$export(module.exports, "useTextField", () => $9076f978e02df845$export$712718f7aec83d5); | ||
| $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$export$4f384c9210e583c3); | ||
| $parcel$export(module.exports, "useTextField", () => $9076f978e02df845$exports.useTextField); | ||
| $parcel$export(module.exports, "useFormattedTextField", () => $56b68c3dab9bf16c$exports.useFormattedTextField); | ||
| /* | ||
@@ -27,12 +22,2 @@ * Copyright 2020 Adobe. All rights reserved. | ||
| * governing permissions and limitations under the License. | ||
| */ /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
@@ -42,217 +27,2 @@ | ||
| function $9076f978e02df845$export$712718f7aec83d5(props, ref) { | ||
| let { inputElementType: inputElementType = "input", isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = "text", validationBehavior: validationBehavior = "aria" } = props; | ||
| let [value, setValue] = (0, $iITAC$reactstatelyutils.useControlledState)(props.value, props.defaultValue || "", props.onChange); | ||
| let { focusableProps: focusableProps } = (0, $iITAC$reactariafocus.useFocusable)(props, ref); | ||
| let validationState = (0, $iITAC$reactstatelyform.useFormValidationState)({ | ||
| ...props, | ||
| value: value | ||
| }); | ||
| let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation; | ||
| let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $iITAC$reactarialabel.useField)({ | ||
| ...props, | ||
| isInvalid: isInvalid, | ||
| errorMessage: props.errorMessage || validationErrors | ||
| }); | ||
| let domProps = (0, $iITAC$reactariautils.filterDOMProps)(props, { | ||
| labelable: true | ||
| }); | ||
| const inputOnlyProps = { | ||
| type: type, | ||
| pattern: props.pattern | ||
| }; | ||
| (0, $iITAC$reactariautils.useFormReset)(ref, value, setValue); | ||
| (0, $iITAC$reactariaform.useFormValidation)(props, validationState, ref); | ||
| (0, $iITAC$react.useEffect)(()=>{ | ||
| // This works around a React/Chrome bug that prevents textarea elements from validating when controlled. | ||
| // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes, | ||
| // which causes Chrome to skip validation. Only updating `value` is ok in our case since our | ||
| // textareas are always controlled. React is planning on removing this synchronization in a | ||
| // future major version. | ||
| // https://github.com/facebook/react/issues/19474 | ||
| // https://github.com/facebook/react/issues/11896 | ||
| if (ref.current instanceof (0, $iITAC$reactariautils.getOwnerWindow)(ref.current).HTMLTextAreaElement) { | ||
| let input = ref.current; | ||
| Object.defineProperty(input, "defaultValue", { | ||
| get: ()=>input.value, | ||
| set: ()=>{}, | ||
| configurable: true | ||
| }); | ||
| } | ||
| }, [ | ||
| ref | ||
| ]); | ||
| return { | ||
| labelProps: labelProps, | ||
| inputProps: (0, $iITAC$reactariautils.mergeProps)(domProps, inputElementType === "input" && inputOnlyProps, { | ||
| disabled: isDisabled, | ||
| readOnly: isReadOnly, | ||
| required: isRequired && validationBehavior === "native", | ||
| "aria-required": isRequired && validationBehavior === "aria" || undefined, | ||
| "aria-invalid": isInvalid || undefined, | ||
| "aria-errormessage": props["aria-errormessage"], | ||
| "aria-activedescendant": props["aria-activedescendant"], | ||
| "aria-autocomplete": props["aria-autocomplete"], | ||
| "aria-haspopup": props["aria-haspopup"], | ||
| value: value, | ||
| onChange: (e)=>setValue(e.target.value), | ||
| autoComplete: props.autoComplete, | ||
| autoCapitalize: props.autoCapitalize, | ||
| maxLength: props.maxLength, | ||
| minLength: props.minLength, | ||
| name: props.name, | ||
| placeholder: props.placeholder, | ||
| inputMode: props.inputMode, | ||
| // Clipboard events | ||
| onCopy: props.onCopy, | ||
| onCut: props.onCut, | ||
| onPaste: props.onPaste, | ||
| // Composition events | ||
| onCompositionEnd: props.onCompositionEnd, | ||
| onCompositionStart: props.onCompositionStart, | ||
| onCompositionUpdate: props.onCompositionUpdate, | ||
| // Selection events | ||
| onSelect: props.onSelect, | ||
| // Input events | ||
| onBeforeInput: props.onBeforeInput, | ||
| onInput: props.onInput, | ||
| ...focusableProps, | ||
| ...fieldProps | ||
| }), | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| isInvalid: isInvalid, | ||
| validationErrors: validationErrors, | ||
| validationDetails: validationDetails | ||
| }; | ||
| } | ||
| /* | ||
| * Copyright 2021 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() { | ||
| return typeof window !== "undefined" && window.InputEvent && // @ts-ignore | ||
| typeof InputEvent.prototype.getTargetRanges === "function"; | ||
| } | ||
| function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) { | ||
| // All browsers implement the 'beforeinput' event natively except Firefox | ||
| // (currently behind a flag as of Firefox 84). React's polyfill does not | ||
| // run in all cases that the native event fires, e.g. when deleting text. | ||
| // Use the native event if available so that we can prevent invalid deletions. | ||
| // We do not attempt to polyfill this in Firefox since it would be very complicated, | ||
| // the benefit of doing so is fairly minor, and it's going to be natively supported soon. | ||
| let onBeforeInputFallback = (0, $iITAC$reactariautils.useEffectEvent)((e)=>{ | ||
| let input = inputRef.current; | ||
| // Compute the next value of the input if the event is allowed to proceed. | ||
| // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types. | ||
| let nextValue; | ||
| switch(e.inputType){ | ||
| case "historyUndo": | ||
| case "historyRedo": | ||
| // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate, | ||
| // because presumably the input would have already been validated previously. | ||
| return; | ||
| case "deleteContent": | ||
| case "deleteByCut": | ||
| case "deleteByDrag": | ||
| nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteContentForward": | ||
| // This is potentially incorrect, since the browser may actually delete more than a single UTF-16 | ||
| // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters | ||
| // or code points may be deleted. However, in our currently supported locales, there are no such cases. | ||
| // If we support additional locales in the future, this may need to change. | ||
| nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteContentBackward": | ||
| nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteSoftLineBackward": | ||
| case "deleteHardLineBackward": | ||
| nextValue = input.value.slice(input.selectionStart); | ||
| break; | ||
| default: | ||
| if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd); | ||
| break; | ||
| } | ||
| // If we did not compute a value, or the new value is invalid, prevent the event | ||
| // so that the browser does not update the input text, move the selection, or add to | ||
| // the undo/redo stack. | ||
| if (nextValue == null || !state.validate(nextValue)) e.preventDefault(); | ||
| }); | ||
| (0, $iITAC$react.useEffect)(()=>{ | ||
| if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return; | ||
| let input = inputRef.current; | ||
| input.addEventListener("beforeinput", onBeforeInputFallback, false); | ||
| return ()=>{ | ||
| input.removeEventListener("beforeinput", onBeforeInputFallback, false); | ||
| }; | ||
| }, [ | ||
| inputRef, | ||
| onBeforeInputFallback | ||
| ]); | ||
| let onBeforeInput = !$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() ? (e)=>{ | ||
| let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd); | ||
| if (!state.validate(nextValue)) e.preventDefault(); | ||
| } : null; | ||
| let { labelProps: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $9076f978e02df845$export$712718f7aec83d5)(props, inputRef); | ||
| let compositionStartState = (0, $iITAC$react.useRef)(null); | ||
| return { | ||
| inputProps: (0, $iITAC$reactariautils.mergeProps)(textFieldProps, { | ||
| onBeforeInput: onBeforeInput, | ||
| onCompositionStart () { | ||
| // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition | ||
| // and deleteByComposition inputType values for the beforeinput event. These are meant to occur | ||
| // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are | ||
| // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable, | ||
| // nor would we want to cancel them because the input from the user is incomplete at that point. | ||
| // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel | ||
| // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either | ||
| // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when | ||
| // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid. | ||
| // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition | ||
| // are implemented, there is no other way to prevent composed input. | ||
| // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204 | ||
| let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current; | ||
| compositionStartState.current = { | ||
| value: value, | ||
| selectionStart: selectionStart, | ||
| selectionEnd: selectionEnd | ||
| }; | ||
| }, | ||
| onCompositionEnd () { | ||
| if (!state.validate(inputRef.current.value)) { | ||
| // Restore the input value in the DOM immediately so we can synchronously update the selection position. | ||
| // But also update the value in React state as well so it is correct for future updates. | ||
| let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current; | ||
| inputRef.current.value = value; | ||
| inputRef.current.setSelectionRange(selectionStart, selectionEnd); | ||
| state.setInputValue(value); | ||
| } | ||
| } | ||
| }), | ||
| labelProps: labelProps, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| ...validation | ||
| }; | ||
| } | ||
| //# sourceMappingURL=main.js.map |
@@ -1,8 +0,3 @@ | ||
| import {useEffect as $kOq5K$useEffect, useRef as $kOq5K$useRef} from "react"; | ||
| import {filterDOMProps as $kOq5K$filterDOMProps, useFormReset as $kOq5K$useFormReset, getOwnerWindow as $kOq5K$getOwnerWindow, mergeProps as $kOq5K$mergeProps, useEffectEvent as $kOq5K$useEffectEvent} from "@react-aria/utils"; | ||
| import {useControlledState as $kOq5K$useControlledState} from "@react-stately/utils"; | ||
| import {useField as $kOq5K$useField} from "@react-aria/label"; | ||
| import {useFocusable as $kOq5K$useFocusable} from "@react-aria/focus"; | ||
| import {useFormValidation as $kOq5K$useFormValidation} from "@react-aria/form"; | ||
| import {useFormValidationState as $kOq5K$useFormValidationState} from "@react-stately/form"; | ||
| import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.module.js"; | ||
| import {useFormattedTextField as $d841c8010a73d545$export$4f384c9210e583c3} from "./useFormattedTextField.module.js"; | ||
@@ -19,12 +14,2 @@ /* | ||
| * governing permissions and limitations under the License. | ||
| */ /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
@@ -34,218 +19,3 @@ | ||
| function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) { | ||
| let { inputElementType: inputElementType = "input", isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = "text", validationBehavior: validationBehavior = "aria" } = props; | ||
| let [value, setValue] = (0, $kOq5K$useControlledState)(props.value, props.defaultValue || "", props.onChange); | ||
| let { focusableProps: focusableProps } = (0, $kOq5K$useFocusable)(props, ref); | ||
| let validationState = (0, $kOq5K$useFormValidationState)({ | ||
| ...props, | ||
| value: value | ||
| }); | ||
| let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation; | ||
| let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $kOq5K$useField)({ | ||
| ...props, | ||
| isInvalid: isInvalid, | ||
| errorMessage: props.errorMessage || validationErrors | ||
| }); | ||
| let domProps = (0, $kOq5K$filterDOMProps)(props, { | ||
| labelable: true | ||
| }); | ||
| const inputOnlyProps = { | ||
| type: type, | ||
| pattern: props.pattern | ||
| }; | ||
| (0, $kOq5K$useFormReset)(ref, value, setValue); | ||
| (0, $kOq5K$useFormValidation)(props, validationState, ref); | ||
| (0, $kOq5K$useEffect)(()=>{ | ||
| // This works around a React/Chrome bug that prevents textarea elements from validating when controlled. | ||
| // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes, | ||
| // which causes Chrome to skip validation. Only updating `value` is ok in our case since our | ||
| // textareas are always controlled. React is planning on removing this synchronization in a | ||
| // future major version. | ||
| // https://github.com/facebook/react/issues/19474 | ||
| // https://github.com/facebook/react/issues/11896 | ||
| if (ref.current instanceof (0, $kOq5K$getOwnerWindow)(ref.current).HTMLTextAreaElement) { | ||
| let input = ref.current; | ||
| Object.defineProperty(input, "defaultValue", { | ||
| get: ()=>input.value, | ||
| set: ()=>{}, | ||
| configurable: true | ||
| }); | ||
| } | ||
| }, [ | ||
| ref | ||
| ]); | ||
| return { | ||
| labelProps: labelProps, | ||
| inputProps: (0, $kOq5K$mergeProps)(domProps, inputElementType === "input" && inputOnlyProps, { | ||
| disabled: isDisabled, | ||
| readOnly: isReadOnly, | ||
| required: isRequired && validationBehavior === "native", | ||
| "aria-required": isRequired && validationBehavior === "aria" || undefined, | ||
| "aria-invalid": isInvalid || undefined, | ||
| "aria-errormessage": props["aria-errormessage"], | ||
| "aria-activedescendant": props["aria-activedescendant"], | ||
| "aria-autocomplete": props["aria-autocomplete"], | ||
| "aria-haspopup": props["aria-haspopup"], | ||
| value: value, | ||
| onChange: (e)=>setValue(e.target.value), | ||
| autoComplete: props.autoComplete, | ||
| autoCapitalize: props.autoCapitalize, | ||
| maxLength: props.maxLength, | ||
| minLength: props.minLength, | ||
| name: props.name, | ||
| placeholder: props.placeholder, | ||
| inputMode: props.inputMode, | ||
| // Clipboard events | ||
| onCopy: props.onCopy, | ||
| onCut: props.onCut, | ||
| onPaste: props.onPaste, | ||
| // Composition events | ||
| onCompositionEnd: props.onCompositionEnd, | ||
| onCompositionStart: props.onCompositionStart, | ||
| onCompositionUpdate: props.onCompositionUpdate, | ||
| // Selection events | ||
| onSelect: props.onSelect, | ||
| // Input events | ||
| onBeforeInput: props.onBeforeInput, | ||
| onInput: props.onInput, | ||
| ...focusableProps, | ||
| ...fieldProps | ||
| }), | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| isInvalid: isInvalid, | ||
| validationErrors: validationErrors, | ||
| validationDetails: validationDetails | ||
| }; | ||
| } | ||
| /* | ||
| * Copyright 2021 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() { | ||
| return typeof window !== "undefined" && window.InputEvent && // @ts-ignore | ||
| typeof InputEvent.prototype.getTargetRanges === "function"; | ||
| } | ||
| function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) { | ||
| // All browsers implement the 'beforeinput' event natively except Firefox | ||
| // (currently behind a flag as of Firefox 84). React's polyfill does not | ||
| // run in all cases that the native event fires, e.g. when deleting text. | ||
| // Use the native event if available so that we can prevent invalid deletions. | ||
| // We do not attempt to polyfill this in Firefox since it would be very complicated, | ||
| // the benefit of doing so is fairly minor, and it's going to be natively supported soon. | ||
| let onBeforeInputFallback = (0, $kOq5K$useEffectEvent)((e)=>{ | ||
| let input = inputRef.current; | ||
| // Compute the next value of the input if the event is allowed to proceed. | ||
| // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types. | ||
| let nextValue; | ||
| switch(e.inputType){ | ||
| case "historyUndo": | ||
| case "historyRedo": | ||
| // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate, | ||
| // because presumably the input would have already been validated previously. | ||
| return; | ||
| case "deleteContent": | ||
| case "deleteByCut": | ||
| case "deleteByDrag": | ||
| nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteContentForward": | ||
| // This is potentially incorrect, since the browser may actually delete more than a single UTF-16 | ||
| // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters | ||
| // or code points may be deleted. However, in our currently supported locales, there are no such cases. | ||
| // If we support additional locales in the future, this may need to change. | ||
| nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteContentBackward": | ||
| nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
| break; | ||
| case "deleteSoftLineBackward": | ||
| case "deleteHardLineBackward": | ||
| nextValue = input.value.slice(input.selectionStart); | ||
| break; | ||
| default: | ||
| if (e.data != null) nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd); | ||
| break; | ||
| } | ||
| // If we did not compute a value, or the new value is invalid, prevent the event | ||
| // so that the browser does not update the input text, move the selection, or add to | ||
| // the undo/redo stack. | ||
| if (nextValue == null || !state.validate(nextValue)) e.preventDefault(); | ||
| }); | ||
| (0, $kOq5K$useEffect)(()=>{ | ||
| if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return; | ||
| let input = inputRef.current; | ||
| input.addEventListener("beforeinput", onBeforeInputFallback, false); | ||
| return ()=>{ | ||
| input.removeEventListener("beforeinput", onBeforeInputFallback, false); | ||
| }; | ||
| }, [ | ||
| inputRef, | ||
| onBeforeInputFallback | ||
| ]); | ||
| let onBeforeInput = !$d841c8010a73d545$var$supportsNativeBeforeInputEvent() ? (e)=>{ | ||
| let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd); | ||
| if (!state.validate(nextValue)) e.preventDefault(); | ||
| } : null; | ||
| let { labelProps: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = (0, $2d73ec29415bd339$export$712718f7aec83d5)(props, inputRef); | ||
| let compositionStartState = (0, $kOq5K$useRef)(null); | ||
| return { | ||
| inputProps: (0, $kOq5K$mergeProps)(textFieldProps, { | ||
| onBeforeInput: onBeforeInput, | ||
| onCompositionStart () { | ||
| // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition | ||
| // and deleteByComposition inputType values for the beforeinput event. These are meant to occur | ||
| // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are | ||
| // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable, | ||
| // nor would we want to cancel them because the input from the user is incomplete at that point. | ||
| // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel | ||
| // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either | ||
| // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when | ||
| // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid. | ||
| // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition | ||
| // are implemented, there is no other way to prevent composed input. | ||
| // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204 | ||
| let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = inputRef.current; | ||
| compositionStartState.current = { | ||
| value: value, | ||
| selectionStart: selectionStart, | ||
| selectionEnd: selectionEnd | ||
| }; | ||
| }, | ||
| onCompositionEnd () { | ||
| if (!state.validate(inputRef.current.value)) { | ||
| // Restore the input value in the DOM immediately so we can synchronously update the selection position. | ||
| // But also update the value in React state as well so it is correct for future updates. | ||
| let { value: value, selectionStart: selectionStart, selectionEnd: selectionEnd } = compositionStartState.current; | ||
| inputRef.current.value = value; | ||
| inputRef.current.setSelectionRange(selectionStart, selectionEnd); | ||
| state.setInputValue(value); | ||
| } | ||
| } | ||
| }), | ||
| labelProps: labelProps, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| ...validation | ||
| }; | ||
| } | ||
| export {$2d73ec29415bd339$export$712718f7aec83d5 as useTextField, $d841c8010a73d545$export$4f384c9210e583c3 as useFormattedTextField}; | ||
| //# sourceMappingURL=module.js.map |
| { | ||
| "name": "@react-aria/textfield", | ||
| "version": "3.14.3", | ||
| "version": "3.14.4", | ||
| "description": "Spectrum UI components in React", | ||
@@ -25,10 +25,10 @@ "license": "Apache-2.0", | ||
| "dependencies": { | ||
| "@react-aria/focus": "^3.16.2", | ||
| "@react-aria/form": "^3.0.3", | ||
| "@react-aria/label": "^3.7.6", | ||
| "@react-aria/utils": "^3.23.2", | ||
| "@react-stately/form": "^3.0.1", | ||
| "@react-stately/utils": "^3.9.1", | ||
| "@react-types/shared": "^3.22.1", | ||
| "@react-types/textfield": "^3.9.1", | ||
| "@react-aria/focus": "^3.17.0", | ||
| "@react-aria/form": "^3.0.4", | ||
| "@react-aria/label": "^3.7.7", | ||
| "@react-aria/utils": "^3.24.0", | ||
| "@react-stately/form": "^3.0.2", | ||
| "@react-stately/utils": "^3.10.0", | ||
| "@react-types/shared": "^3.23.0", | ||
| "@react-types/textfield": "^3.9.2", | ||
| "@swc/helpers": "^0.5.0" | ||
@@ -42,3 +42,3 @@ }, | ||
| }, | ||
| "gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161" | ||
| "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd" | ||
| } |
@@ -50,2 +50,5 @@ /* | ||
| return; | ||
| case 'insertLineBreak': | ||
| // Explicitly allow "insertLineBreak" event, to allow onSubmit for "enter" key. e.data is null in this case. | ||
| return; | ||
| case 'deleteContent': | ||
@@ -52,0 +55,0 @@ case 'deleteByCut': |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.14%
124537
- Number of package files
- increased by76.92%
23
- Lines of code
- increased by4.19%
1193
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
- Published versions last two months
- decreased by-2.56%
38
Dependency changes
Updated@react-aria/focus@^3.17.0
Updated@react-aria/form@^3.0.4
Updated@react-aria/label@^3.7.7
Updated@react-aria/utils@^3.24.0
Updated@react-stately/form@^3.0.2
Updated@react-stately/utils@^3.10.0
Updated@react-types/shared@^3.23.0