@react-aria/form - npm Package Compare versions

Comparing version 3.0.0-nightly.4276 to 3.0.0-nightly-4980928d3-240906

dist/main.js

@@ -1,4 +0,2 @@
-var $4IpGD$react = require("react");
-var $4IpGD$reactariainteractions = require("@react-aria/interactions");
-var $4IpGD$reactariautils = require("@react-aria/utils");
+var $9da8e3f192aba981$exports = require("./useFormValidation.main.js");
 
@@ -10,3 +8,3 @@
 
-$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$export$b8473d3665f3a75a);
+$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$exports.useFormValidation);
 /*
@@ -22,109 +20,5 @@ * Copyright 2023 Adobe. All rights reserved.
  * governing permissions and limitations under the License.
- */ /*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
  */ 
 
 
-function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
-    let { validationBehavior: validationBehavior, focus: focus } = props;
-    // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
-    (0, $4IpGD$reactariautils.useLayoutEffect)(()=>{
-        if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
-            ref.current.setCustomValidity(errorMessage);
-            // Prevent default tooltip for validation message.
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
-            if (!ref.current.hasAttribute("title")) ref.current.title = "";
-            if (!state.realtimeValidation.isInvalid) state.updateValidation($9da8e3f192aba981$var$getNativeValidity(ref.current));
-        }
-    });
-    let onReset = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
-        state.resetValidation();
-    });
-    let onInvalid = (0, $4IpGD$reactariautils.useEffectEvent)((e)=>{
-        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 === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
-        if (!e.defaultPrevented && ref && 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();
-    });
-    let onChange = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
-        state.commitValidation();
-    });
-    (0, $4IpGD$react.useEffect)(()=>{
-        let input = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (!input) return;
-        let form = input.form;
-        input.addEventListener("invalid", onInvalid);
-        input.addEventListener("change", onChange);
-        form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
-        return ()=>{
-            input.removeEventListener("invalid", onInvalid);
-            input.removeEventListener("change", onChange);
-            form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
-        };
-    }, [
-        ref,
-        onInvalid,
-        onChange,
-        onReset,
-        validationBehavior
-    ]);
-}
-function $9da8e3f192aba981$var$getValidity(input) {
-    // The native ValidityState object is live, meaning each property is a getter that returns the current state.
-    // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
-    let validity = input.validity;
-    return {
-        badInput: validity.badInput,
-        customError: validity.customError,
-        patternMismatch: validity.patternMismatch,
-        rangeOverflow: validity.rangeOverflow,
-        rangeUnderflow: validity.rangeUnderflow,
-        stepMismatch: validity.stepMismatch,
-        tooLong: validity.tooLong,
-        tooShort: validity.tooShort,
-        typeMismatch: validity.typeMismatch,
-        valueMissing: validity.valueMissing,
-        valid: validity.valid
-    };
-}
-function $9da8e3f192aba981$var$getNativeValidity(input) {
-    return {
-        isInvalid: !input.validity.valid,
-        validationDetails: $9da8e3f192aba981$var$getValidity(input),
-        validationErrors: input.validationMessage ? [
-            input.validationMessage
-        ] : []
-    };
-}
-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;
-}
-
-
-
-
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,4 +0,2 @@
-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";
+import {useFormValidation as $e93e671b31057976$export$b8473d3665f3a75a} from "./useFormValidation.module.js";
 
@@ -15,110 +13,6 @@ /*
  * governing permissions and limitations under the License.
- */ /*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
  */ 
 
 
-function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
-    let { validationBehavior: validationBehavior, focus: focus } = props;
-    // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
-    (0, $2tWuM$useLayoutEffect)(()=>{
-        if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
-            ref.current.setCustomValidity(errorMessage);
-            // Prevent default tooltip for validation message.
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
-            if (!ref.current.hasAttribute("title")) ref.current.title = "";
-            if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
-        }
-    });
-    let onReset = (0, $2tWuM$useEffectEvent)(()=>{
-        state.resetValidation();
-    });
-    let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
-        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 === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
-        if (!e.defaultPrevented && ref && 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();
-    });
-    let onChange = (0, $2tWuM$useEffectEvent)(()=>{
-        state.commitValidation();
-    });
-    (0, $2tWuM$useEffect)(()=>{
-        let input = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (!input) return;
-        let form = input.form;
-        input.addEventListener("invalid", onInvalid);
-        input.addEventListener("change", onChange);
-        form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
-        return ()=>{
-            input.removeEventListener("invalid", onInvalid);
-            input.removeEventListener("change", onChange);
-            form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
-        };
-    }, [
-        ref,
-        onInvalid,
-        onChange,
-        onReset,
-        validationBehavior
-    ]);
-}
-function $e93e671b31057976$var$getValidity(input) {
-    // The native ValidityState object is live, meaning each property is a getter that returns the current state.
-    // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
-    let validity = input.validity;
-    return {
-        badInput: validity.badInput,
-        customError: validity.customError,
-        patternMismatch: validity.patternMismatch,
-        rangeOverflow: validity.rangeOverflow,
-        rangeUnderflow: validity.rangeUnderflow,
-        stepMismatch: validity.stepMismatch,
-        tooLong: validity.tooLong,
-        tooShort: validity.tooShort,
-        typeMismatch: validity.typeMismatch,
-        valueMissing: validity.valueMissing,
-        valid: validity.valid
-    };
-}
-function $e93e671b31057976$var$getNativeValidity(input) {
-    return {
-        isInvalid: !input.validity.valid,
-        validationDetails: $e93e671b31057976$var$getValidity(input),
-        validationErrors: input.validationMessage ? [
-            input.validationMessage
-        ] : []
-    };
-}
-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;
-}
-
-
-
-
 export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

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

package.json

 {
   "name": "@react-aria/form",
-  "version": "3.0.0-nightly.4276+fa107af51",
+  "version": "3.0.0-nightly-4980928d3-240906",
   "description": "Spectrum UI components in React",
@@ -25,10 +25,10 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/interactions": "3.0.0-nightly.2565+fa107af51",
-    "@react-aria/utils": "3.0.0-nightly.2565+fa107af51",
-    "@react-stately/form": "3.0.0-nightly.4276+fa107af51",
-    "@react-types/shared": "3.0.0-nightly.2565+fa107af51",
+    "@react-aria/interactions": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/form": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
@@ -38,3 +38,3 @@ "publishConfig": {
   },
-  "gitHead": "fa107af514b0c790a9d8b894de9ecbad376ddcfa"
-}
+  "stableVersion": "3.0.8"
+}

src/useFormValidation.ts

@@ -14,6 +14,6 @@ /*
 import {FormValidationState} from '@react-stately/form';
-import {RefObject, useEffect} from 'react';
+import {RefObject, Validation, ValidationResult} from '@react-types/shared';
 import {setInteractionModality} from '@react-aria/interactions';
+import {useEffect} from 'react';
 import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
-import {Validation, ValidationResult} from '@react-types/shared';
 
@@ -26,3 +26,3 @@ type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
-export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement> | undefined) {
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined) {
   let {validationBehavior, focus} = props;
@@ -29,0 +29,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of package files

16

increased by33.33%

Lines of code

499

increased by2.89%

Worsened metrics

Total package byte prevSize

43172

decreased by-19.23%

Dependency changes

• + Added@react-aria/interactions@3.22.2(transitive)

• + Added@react-aria/ssr@3.9.5(transitive)

• + Added@react-aria/utils@3.25.2(transitive)

• + Added@react-stately/form@3.0.5(transitive)

• + Added@react-stately/utils@3.10.3(transitive)

• + Added@react-types/shared@3.24.1(transitive)

• + Addedclsx@2.1.1(transitive)

• Updated@react-aria/interactions@^3.0.0-nightly-4980928d3-240906

• Updated@react-aria/utils@^3.0.0-nightly-4980928d3-240906

• Updated@react-stately/form@^3.0.0-nightly-4980928d3-240906

• Updated@react-types/shared@^3.0.0-nightly-4980928d3-240906