@react-aria/form - npm Package Compare versions

Comparing version 3.0.0-nightly.4256 to 3.0.0-nightly.4266

dist/main.js

 var $4IpGD$react = require("react");
+var $4IpGD$reactariainteractions = require("@react-aria/interactions");
 var $4IpGD$reactariautils = require("@react-aria/utils");
@@ -32,4 +33,5 @@
 
+
 function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
-    let { validationBehavior: validationBehavior } = props;
+    let { validationBehavior: validationBehavior, focus: focus } = props;
     // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
@@ -50,7 +52,17 @@ (0, $4IpGD$reactariautils.useLayoutEffect)(()=>{
     let onInvalid = (0, $4IpGD$reactariautils.useEffectEvent)((e)=>{
-        // Prevent default browser error UI from appearing.
-        e.preventDefault();
+        var _ref_current;
         // Only commit validation if we are not already displaying one.
         // This avoids clearing server errors that the user didn't actually fix.
         if (!state.displayValidation.isInvalid) state.commitValidation();
+        // Auto focus the first invalid input in a form, unless the error already had its default prevented.
+        let form = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
+        if (!e.defaultPrevented && form && $9da8e3f192aba981$var$getFirstInvalidInput(form) === ref.current) {
+            var _ref_current1;
+            if (focus) focus();
+            else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
+            // Always show focus ring.
+            (0, $4IpGD$reactariainteractions.setInteractionModality)("keyboard");
+        }
+        // Prevent default browser error UI from appearing.
+        e.preventDefault();
     });
@@ -107,2 +119,9 @@ let onChange = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
 }
+function $9da8e3f192aba981$var$getFirstInvalidInput(form) {
+    for(let i = 0; i < form.elements.length; i++){
+        let element = form.elements[i];
+        if (!element.validity.valid) return element;
+    }
+    return null;
+}
 
@@ -109,0 +128,0 @@

dist/module.js

 import {useEffect as $2tWuM$useEffect} from "react";
+import {setInteractionModality as $2tWuM$setInteractionModality} from "@react-aria/interactions";
 import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useEffectEvent} from "@react-aria/utils";
@@ -26,4 +27,5 @@
 
+
 function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
-    let { validationBehavior: validationBehavior } = props;
+    let { validationBehavior: validationBehavior, focus: focus } = props;
     // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
@@ -44,7 +46,17 @@ (0, $2tWuM$useLayoutEffect)(()=>{
     let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
-        // Prevent default browser error UI from appearing.
-        e.preventDefault();
+        var _ref_current;
         // Only commit validation if we are not already displaying one.
         // This avoids clearing server errors that the user didn't actually fix.
         if (!state.displayValidation.isInvalid) state.commitValidation();
+        // Auto focus the first invalid input in a form, unless the error already had its default prevented.
+        let form = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
+        if (!e.defaultPrevented && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
+            var _ref_current1;
+            if (focus) focus();
+            else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
+            // Always show focus ring.
+            (0, $2tWuM$setInteractionModality)("keyboard");
+        }
+        // Prevent default browser error UI from appearing.
+        e.preventDefault();
     });
@@ -101,2 +113,9 @@ let onChange = (0, $2tWuM$useEffectEvent)(()=>{
 }
+function $e93e671b31057976$var$getFirstInvalidInput(form) {
+    for(let i = 0; i < form.elements.length; i++){
+        let element = form.elements[i];
+        if (!element.validity.valid) return element;
+    }
+    return null;
+}
 
@@ -103,0 +122,0 @@

dist/types.d.ts

@@ -5,4 +5,7 @@ import { FormValidationState } from "@react-stately/form";
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-export function useFormValidation<T>(props: Validation<T>, state: FormValidationState, ref: RefObject<ValidatableElement>): void;
+interface FormValidationProps<T> extends Validation<T> {
+    focus?: () => void;
+}
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement>): void;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/form",
-  "version": "3.0.0-nightly.4256+4dede01e2",
+  "version": "3.0.0-nightly.4266+0b541f488",
   "description": "Spectrum UI components in React",
@@ -25,5 +25,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/utils": "3.0.0-nightly.2545+4dede01e2",
-    "@react-stately/form": "3.0.0-nightly.4256+4dede01e2",
-    "@react-types/shared": "3.0.0-nightly.2545+4dede01e2",
+    "@react-aria/interactions": "3.0.0-nightly.2555+0b541f488",
+    "@react-aria/utils": "3.0.0-nightly.2555+0b541f488",
+    "@react-stately/form": "3.0.0-nightly.4266+0b541f488",
+    "@react-types/shared": "3.0.0-nightly.2555+0b541f488",
     "@swc/helpers": "^0.5.0"
@@ -37,3 +38,3 @@ },
   },
-  "gitHead": "4dede01e242937311970bd495319a89bb48e33a5"
+  "gitHead": "0b541f48848eb43f74ae57e8b21dc4455d95040b"
 }

src/useFormValidation.ts

@@ -15,2 +15,3 @@ /*
 import {RefObject, useEffect} from 'react';
+import {setInteractionModality} from '@react-aria/interactions';
 import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
@@ -21,5 +22,9 @@ import {Validation, ValidationResult} from '@react-types/shared';
 
-export function useFormValidation<T>(props: Validation<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
-  let {validationBehavior} = props;
+interface FormValidationProps<T> extends Validation<T> {
+  focus?: () => void
+}
 
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
+  let {validationBehavior, focus} = props;
+
   // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
@@ -48,5 +53,2 @@ useLayoutEffect(() => {
   let onInvalid = useEffectEvent((e: Event) => {
-    // Prevent default browser error UI from appearing.
-    e.preventDefault();
-
     // Only commit validation if we are not already displaying one.
@@ -57,2 +59,18 @@ // This avoids clearing server errors that the user didn't actually fix.
     }
+
+    // Auto focus the first invalid input in a form, unless the error already had its default prevented.
+    let form = ref.current?.form;
+    if (!e.defaultPrevented && form && getFirstInvalidInput(form) === ref.current) {
+      if (focus) {
+        focus();
+      } else {
+        ref.current?.focus();
+      }
+
+      // Always show focus ring.
+      setInteractionModality('keyboard');
+    }
+
+    // Prevent default browser error UI from appearing.
+    e.preventDefault();
   });
@@ -108,1 +126,12 @@
 }
+
+function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {
+  for (let i = 0; i < form.elements.length; i++) {
+    let element = form.elements[i] as ValidatableElement;
+    if (!element.validity.valid) {
+      return element;
+    }
+  }
+
+  return null;
+}

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52874

increased by14.43%

Lines of code

485

increased by20.05%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@react-aria/interactions@3.0.0-nightly.2555+0b541f488

• Updated@react-aria/utils@3.0.0-nightly.2555+0b541f488

• Updated@react-stately/form@3.0.0-nightly.4266+0b541f488

• Updated@react-types/shared@3.0.0-nightly.2555+0b541f488