New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-aria/textfield

Package Overview
Dependencies
Maintainers
2
Versions
881
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/textfield - npm Package Compare versions

Comparing version 3.0.0-nightly.3114 to 3.0.0-nightly-016590a4a-250131

2

dist/types.d.ts

@@ -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'.

10

dist/useFormattedTextField.main.js

@@ -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.

10

dist/useFormattedTextField.module.js

@@ -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.

3

dist/useTextField.main.js

@@ -86,2 +86,3 @@ var $4Z7CR$react = require("react");

'aria-haspopup': props['aria-haspopup'],
'aria-controls': props['aria-controls'],
value: value,

@@ -96,2 +97,4 @@ onChange: (e)=>setValue(e.target.value),

inputMode: props.inputMode,
autoCorrect: props.autoCorrect,
spellCheck: props.spellCheck,
// Clipboard events

@@ -98,0 +101,0 @@ onCopy: props.onCopy,

3

dist/useTextField.module.js

@@ -80,2 +80,3 @@ import {useEffect as $ig234$useEffect} from "react";

'aria-haspopup': props['aria-haspopup'],
'aria-controls': props['aria-controls'],
value: value,

@@ -90,2 +91,4 @@ onChange: (e)=>setValue(e.target.value),

inputMode: props.inputMode,
autoCorrect: props.autoCorrect,
spellCheck: props.spellCheck,
// Clipboard events

@@ -92,0 +95,0 @@ onCopy: props.onCopy,

26

package.json
{
"name": "@react-aria/textfield",
"version": "3.0.0-nightly.3114+68403fe55",
"version": "3.0.0-nightly-016590a4a-250131",
"description": "Spectrum UI components in React",

@@ -25,19 +25,19 @@ "license": "Apache-2.0",

"dependencies": {
"@react-aria/focus": "3.0.0-nightly.3114+68403fe55",
"@react-aria/form": "3.0.9-nightly.5042+68403fe55",
"@react-aria/label": "3.0.0-nightly.3114+68403fe55",
"@react-aria/utils": "3.0.0-nightly.3114+68403fe55",
"@react-stately/form": "3.0.6-nightly.5042+68403fe55",
"@react-stately/utils": "3.0.0-nightly.3114+68403fe55",
"@react-types/shared": "3.0.0-nightly.3114+68403fe55",
"@react-types/textfield": "3.0.0-nightly.3114+68403fe55",
"@react-aria/focus": "3.0.0-nightly-016590a4a-250131",
"@react-aria/form": "3.0.0-nightly-016590a4a-250131",
"@react-aria/label": "3.0.0-nightly-016590a4a-250131",
"@react-aria/utils": "3.0.0-nightly-016590a4a-250131",
"@react-stately/form": "3.0.0-nightly-016590a4a-250131",
"@react-stately/utils": "3.0.0-nightly-016590a4a-250131",
"@react-types/shared": "3.0.0-nightly-016590a4a-250131",
"@react-types/textfield": "3.0.0-nightly-016590a4a-250131",
"@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",
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
"publishConfig": {
"access": "public"
},
"gitHead": "68403fe55489dce3de1b3094c957d598ad719861"
}
}
}

32

src/useFormattedTextField.ts

@@ -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);

9

src/useTextField.ts

@@ -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({

@@ -179,2 +179,3 @@ ...props,

'aria-haspopup': props['aria-haspopup'],
'aria-controls': props['aria-controls'],
value,

@@ -189,2 +190,4 @@ onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),

inputMode: props.inputMode,
autoCorrect: props.autoCorrect,
spellCheck: props.spellCheck,

@@ -191,0 +194,0 @@ // Clipboard events

LICENSE
dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

dist/useFormattedTextField.main.js.map

Sorry, the diff of this file is not supported yet

dist/useFormattedTextField.mjs

Sorry, the diff of this file is not supported yet

dist/useFormattedTextField.module.js.map

Sorry, the diff of this file is not supported yet

dist/useTextField.main.js.map

Sorry, the diff of this file is not supported yet

dist/useTextField.mjs

Sorry, the diff of this file is not supported yet

dist/useTextField.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc