@react-aria/textfield - npm Package Compare versions

Comparing version 3.14.10 to 3.15.0

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

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.

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.

package.json

 {
   "name": "@react-aria/textfield",
-  "version": "3.14.10",
+  "version": "3.15.0",
   "description": "Spectrum UI components in React",
@@ -25,14 +25,14 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/form": "^3.0.10",
-    "@react-aria/label": "^3.7.12",
-    "@react-aria/utils": "^3.25.3",
-    "@react-stately/form": "^3.0.6",
-    "@react-stately/utils": "^3.10.4",
-    "@react-types/shared": "^3.25.0",
-    "@react-types/textfield": "^3.9.7",
+    "@react-aria/focus": "^3.19.0",
+    "@react-aria/form": "^3.0.11",
+    "@react-aria/label": "^3.7.13",
+    "@react-aria/utils": "^3.26.0",
+    "@react-stately/form": "^3.1.0",
+    "@react-stately/utils": "^3.10.5",
+    "@react-types/shared": "^3.26.0",
+    "@react-types/textfield": "^3.10.0",
     "@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": {
   },
-  "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
 }

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

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({
@@ -127,0 +127,0 @@ ...props,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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

125322

increased by0.72%

Lines of code

1191

increased by0.17%

Dependency changes

• + 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-aria/focus@^3.19.0

• Updated@react-aria/form@^3.0.11

• Updated@react-aria/label@^3.7.13

• Updated@react-aria/utils@^3.26.0

• Updated@react-stately/form@^3.1.0

• Updated@react-stately/utils@^3.10.5

• Updated@react-types/shared@^3.26.0

• Updated@react-types/textfield@^3.10.0