@react-aria/textfield
Advanced tools
Comparing version 3.0.0-nightly-0ddbe6f95-241021 to 3.0.0-nightly-10a43de88-241127
@@ -39,3 +39,3 @@ import { AriaTextFieldProps } from "@react-types/textfield"; | ||
type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T]; | ||
export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps { | ||
export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> { | ||
/** | ||
@@ -42,0 +42,0 @@ * The HTML element used to render the input, e.g. 'input', or 'textarea'. |
@@ -25,4 +25,3 @@ var $9076f978e02df845$exports = require("./useTextField.main.js"); | ||
function $56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() { | ||
return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore | ||
typeof InputEvent.prototype.getTargetRanges === 'function'; | ||
return typeof window !== 'undefined' && window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function'; | ||
} | ||
@@ -38,5 +37,6 @@ function $56b68c3dab9bf16c$export$4f384c9210e583c3(props, state, inputRef) { | ||
let input = inputRef.current; | ||
if (!input) return; | ||
// 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; | ||
let nextValue = null; | ||
switch(e.inputType){ | ||
@@ -80,3 +80,3 @@ case 'historyUndo': | ||
(0, $6PuoT$react.useEffect)(()=>{ | ||
if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent()) return; | ||
if (!$56b68c3dab9bf16c$var$supportsNativeBeforeInputEvent() || !inputRef.current) return; | ||
let input = inputRef.current; | ||
@@ -121,3 +121,3 @@ input.addEventListener('beforeinput', onBeforeInputFallback, false); | ||
onCompositionEnd () { | ||
if (!state.validate(inputRef.current.value)) { | ||
if (inputRef.current && !state.validate(inputRef.current.value)) { | ||
// Restore the input value in the DOM immediately so we can synchronously update the selection position. | ||
@@ -124,0 +124,0 @@ // But also update the value in React state as well so it is correct for future updates. |
@@ -19,4 +19,3 @@ import {useTextField as $2d73ec29415bd339$export$712718f7aec83d5} from "./useTextField.module.js"; | ||
function $d841c8010a73d545$var$supportsNativeBeforeInputEvent() { | ||
return typeof window !== 'undefined' && window.InputEvent && // @ts-ignore | ||
typeof InputEvent.prototype.getTargetRanges === 'function'; | ||
return typeof window !== 'undefined' && window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function'; | ||
} | ||
@@ -32,5 +31,6 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) { | ||
let input = inputRef.current; | ||
if (!input) return; | ||
// 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; | ||
let nextValue = null; | ||
switch(e.inputType){ | ||
@@ -74,3 +74,3 @@ case 'historyUndo': | ||
(0, $jyGKS$useEffect)(()=>{ | ||
if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent()) return; | ||
if (!$d841c8010a73d545$var$supportsNativeBeforeInputEvent() || !inputRef.current) return; | ||
let input = inputRef.current; | ||
@@ -115,3 +115,3 @@ input.addEventListener('beforeinput', onBeforeInputFallback, false); | ||
onCompositionEnd () { | ||
if (!state.validate(inputRef.current.value)) { | ||
if (inputRef.current && !state.validate(inputRef.current.value)) { | ||
// Restore the input value in the DOM immediately so we can synchronously update the selection position. | ||
@@ -118,0 +118,0 @@ // But also update the value in React state as well so it is correct for future updates. |
{ | ||
"name": "@react-aria/textfield", | ||
"version": "3.0.0-nightly-0ddbe6f95-241021", | ||
"version": "3.0.0-nightly-10a43de88-241127", | ||
"description": "Spectrum UI components in React", | ||
@@ -25,14 +25,14 @@ "license": "Apache-2.0", | ||
"dependencies": { | ||
"@react-aria/focus": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-aria/form": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-aria/label": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-aria/utils": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-stately/form": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-stately/utils": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-types/shared": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-types/textfield": "^3.0.0-nightly-0ddbe6f95-241021", | ||
"@react-aria/focus": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-aria/form": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-aria/label": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-aria/utils": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-stately/form": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-stately/utils": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-types/shared": "^3.0.0-nightly-10a43de88-241127", | ||
"@react-types/textfield": "^3.0.0-nightly-10a43de88-241127", | ||
"@swc/helpers": "^0.5.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" | ||
}, | ||
@@ -42,3 +42,3 @@ "publishConfig": { | ||
}, | ||
"stableVersion": "3.14.10" | ||
"stableVersion": "3.15.0" | ||
} |
@@ -28,3 +28,2 @@ /* | ||
window.InputEvent && | ||
// @ts-ignore | ||
typeof InputEvent.prototype.getTargetRanges === 'function'; | ||
@@ -42,6 +41,9 @@ } | ||
let input = inputRef.current; | ||
if (!input) { | ||
return; | ||
} | ||
// 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: string; | ||
let nextValue: string | null = null; | ||
switch (e.inputType) { | ||
@@ -59,3 +61,3 @@ case 'historyUndo': | ||
case 'deleteByDrag': | ||
nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd); | ||
nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!); | ||
break; | ||
@@ -68,13 +70,13 @@ case 'deleteContentForward': | ||
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); | ||
? 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); | ||
? 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); | ||
nextValue = input.value.slice(input.selectionStart!); | ||
break; | ||
@@ -84,5 +86,5 @@ default: | ||
nextValue = | ||
input.value.slice(0, input.selectionStart) + | ||
input.value.slice(0, input.selectionStart!) + | ||
e.data + | ||
input.value.slice(input.selectionEnd); | ||
input.value.slice(input.selectionEnd!); | ||
} | ||
@@ -101,3 +103,3 @@ break; | ||
useEffect(() => { | ||
if (!supportsNativeBeforeInputEvent()) { | ||
if (!supportsNativeBeforeInputEvent() || !inputRef.current) { | ||
return; | ||
@@ -128,3 +130,3 @@ } | ||
let compositionStartState = useRef(null); | ||
let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null); | ||
return { | ||
@@ -148,10 +150,10 @@ inputProps: mergeProps( | ||
// See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204 | ||
let {value, selectionStart, selectionEnd} = inputRef.current; | ||
let {value, selectionStart, selectionEnd} = inputRef.current!; | ||
compositionStartState.current = {value, selectionStart, selectionEnd}; | ||
}, | ||
onCompositionEnd() { | ||
if (!state.validate(inputRef.current.value)) { | ||
if (inputRef.current && !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, selectionStart, selectionEnd} = compositionStartState.current; | ||
let {value, selectionStart, selectionEnd} = compositionStartState.current!; | ||
inputRef.current.value = value; | ||
@@ -158,0 +160,0 @@ inputRef.current.setSelectionRange(selectionStart, selectionEnd); |
@@ -72,3 +72,3 @@ /* | ||
export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps { | ||
export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> { | ||
/** | ||
@@ -122,5 +122,5 @@ * The HTML element used to render the input, e.g. 'input', or 'textarea'. | ||
validationBehavior = 'aria' | ||
}: AriaTextFieldOptions<TextFieldIntrinsicElements> = props; | ||
} = props; | ||
let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange); | ||
let {focusableProps} = useFocusable(props, ref); | ||
let {focusableProps} = useFocusable<TextFieldHTMLElementType[T]>(props, ref); | ||
let validationState = useFormValidationState({ | ||
@@ -127,0 +127,0 @@ ...props, |
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
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
114175
1191
+ Addedreact@19.0.0-rc-fb9a90fa48-20240614(transitive)
- Removedjs-tokens@4.0.0(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removedreact@18.3.1(transitive)
Updated@react-types/textfield@^3.0.0-nightly-10a43de88-241127