@react-aria/form - npm Package Compare versions

Comparing version 3.0.0-nightly-873f6fe9a-250127 to 3.0.0-nightly-88db698bf-250730

dist/useFormValidation.main.js

@@ -37,4 +37,5 @@ var $j3sn1$reactariainteractions = require("@react-aria/interactions");
     });
+    let isIgnoredReset = (0, $j3sn1$react.useRef)(false);
     let onReset = (0, $j3sn1$reactariautils.useEffectEvent)(()=>{
-        state.resetValidation();
+        if (!isIgnoredReset.current) state.resetValidation();
     });
@@ -65,2 +66,13 @@ let onInvalid = (0, $j3sn1$reactariautils.useEffectEvent)((e)=>{
         let form = input.form;
+        let reset = form === null || form === void 0 ? void 0 : form.reset;
+        if (form) // Try to detect React's automatic form reset behavior so we don't clear
+        // validation errors that are returned by server actions.
+        // To do this, we ignore programmatic form resets that occur outside a user event.
+        // This is best-effort. There may be false positives, e.g. setTimeout.
+        form.reset = ()=>{
+            // React uses MessageChannel for scheduling, so ignore 'message' events.
+            isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
+            reset === null || reset === void 0 ? void 0 : reset.call(form);
+            isIgnoredReset.current = false;
+        };
         input.addEventListener('invalid', onInvalid);
@@ -73,2 +85,4 @@ input.addEventListener('change', onChange);
             form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
+            if (form) // @ts-ignore
+            form.reset = reset;
         };
@@ -75,0 +89,0 @@ }, [

dist/useFormValidation.module.js

 import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
-import {useEffect as $9Gacy$useEffect} from "react";
+import {useRef as $9Gacy$useRef, useEffect as $9Gacy$useEffect} from "react";
 import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
@@ -31,4 +31,5 @@
     });
+    let isIgnoredReset = (0, $9Gacy$useRef)(false);
     let onReset = (0, $9Gacy$useEffectEvent)(()=>{
-        state.resetValidation();
+        if (!isIgnoredReset.current) state.resetValidation();
     });
@@ -59,2 +60,13 @@ let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
         let form = input.form;
+        let reset = form === null || form === void 0 ? void 0 : form.reset;
+        if (form) // Try to detect React's automatic form reset behavior so we don't clear
+        // validation errors that are returned by server actions.
+        // To do this, we ignore programmatic form resets that occur outside a user event.
+        // This is best-effort. There may be false positives, e.g. setTimeout.
+        form.reset = ()=>{
+            // React uses MessageChannel for scheduling, so ignore 'message' events.
+            isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
+            reset === null || reset === void 0 ? void 0 : reset.call(form);
+            isIgnoredReset.current = false;
+        };
         input.addEventListener('invalid', onInvalid);
@@ -67,2 +79,4 @@ input.addEventListener('change', onChange);
             form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
+            if (form) // @ts-ignore
+            form.reset = reset;
         };
@@ -69,0 +83,0 @@ }, [

package.json

 {
   "name": "@react-aria/form",
-  "version": "3.0.0-nightly-873f6fe9a-250127",
+  "version": "3.0.0-nightly-88db698bf-250730",
   "description": "Spectrum UI components in React",
@@ -10,3 +10,7 @@ "license": "Apache-2.0",
   "exports": {
-    "types": "./dist/types.d.ts",
+    "source": "./src/index.ts",
+    "types": [
+      "./dist/types.d.ts",
+      "./src/index.ts"
+    ],
     "import": "./dist/import.mjs",
@@ -26,6 +30,6 @@ "require": "./dist/main.js"
   "dependencies": {
-    "@react-aria/interactions": "3.0.0-nightly-873f6fe9a-250127",
-    "@react-aria/utils": "3.0.0-nightly-873f6fe9a-250127",
-    "@react-stately/form": "3.0.0-nightly-873f6fe9a-250127",
-    "@react-types/shared": "3.0.0-nightly-873f6fe9a-250127",
+    "@react-aria/interactions": "3.0.0-nightly-88db698bf-250730",
+    "@react-aria/utils": "3.0.0-nightly-88db698bf-250730",
+    "@react-stately/form": "3.0.0-nightly-88db698bf-250730",
+    "@react-types/shared": "3.0.0-nightly-88db698bf-250730",
     "@swc/helpers": "^0.5.0"
@@ -32,0 +36,0 @@ },

src/useFormValidation.ts

@@ -16,3 +16,3 @@ /*
 import {setInteractionModality} from '@react-aria/interactions';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
@@ -26,3 +26,3 @@
 
-export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined) {
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined): void {
   let {validationBehavior, focus} = props;
@@ -48,4 +48,7 @@
 
+  let isIgnoredReset = useRef(false);
   let onReset = useEffectEvent(() => {
-    state.resetValidation();
+    if (!isIgnoredReset.current) {
+      state.resetValidation();
+    }
   });
@@ -88,2 +91,17 @@
     let form = input.form;
+
+    let reset = form?.reset;
+    if (form) {
+      // Try to detect React's automatic form reset behavior so we don't clear
+      // validation errors that are returned by server actions.
+      // To do this, we ignore programmatic form resets that occur outside a user event.
+      // This is best-effort. There may be false positives, e.g. setTimeout.
+      form.reset = () => {
+        // React uses MessageChannel for scheduling, so ignore 'message' events.
+        isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);
+        reset?.call(form);
+        isIgnoredReset.current = false;
+      };
+    }
+
     input.addEventListener('invalid', onInvalid);
@@ -96,2 +114,6 @@ input.addEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);
+      if (form) {
+        // @ts-ignore
+        form.reset = reset;
+      }
     };
@@ -98,0 +120,0 @@ }, [ref, onInvalid, onChange, onReset, validationBehavior]);

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49719

14.49%

Lines of code

561

12.42%

Worsened metrics

Number of low license alerts

1

Infinity%

License quality

80

-20%

Dependency changes

• + Added

  @react-aria/interactions@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-aria/ssr@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-aria/utils@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-stately/flags@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-stately/form@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-88db698bf-250730
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-88db698bf-250730
  (transitive)

• - Removed

  @react-aria/interactions@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• - Removed

  @react-aria/ssr@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• - Removed

  @react-aria/utils@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• - Removed

  @react-stately/form@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• - Removed

  @react-stately/utils@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• - Removed

  @react-types/shared@3.0.0-nightly-873f6fe9a-250127
  (transitive)

• Updated

  @react-aria/interactions@3.0.0-nightly-88db698bf-250730

• Updated

  @react-aria/utils@3.0.0-nightly-88db698bf-250730

• Updated

  @react-stately/form@3.0.0-nightly-88db698bf-250730

• Updated

  @react-types/shared@3.0.0-nightly-88db698bf-250730