@react-aria/form 3.0.0-nightly-641446f65-240905

package/README.md

@@ -0,0 +1,3 @@
+# @react-aria/form
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

package/dist/import.mjs

@@ -0,0 +1,17 @@
+import {useFormValidation as $e93e671b31057976$export$b8473d3665f3a75a} from "./useFormValidation.mjs";
+
+/*
+ * 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.
+ */ 
+
+
+export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
+//# sourceMappingURL=module.js.map

package/dist/main.js

@@ -0,0 +1,22 @@
+var $9da8e3f192aba981$exports = require("./useFormValidation.main.js");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$exports.useFormValidation);
+/*
+ * 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.
+ */ 
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/form/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useFormValidation} from './useFormValidation';\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,17 @@
+import {useFormValidation as $e93e671b31057976$export$b8473d3665f3a75a} from "./useFormValidation.module.js";
+
+/*
+ * 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.
+ */ 
+
+
+export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/form/src/index.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useFormValidation} from './useFormValidation';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

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

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAkBA,0BAA0B,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAErF,8BAA8B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,kCAAkC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,UAAU,kBAAkB,GAAG,IAAI,CAAC,GAAG,SAAS,QAqEpJ","sources":["packages/@react-aria/form/src/packages/@react-aria/form/src/useFormValidation.ts","packages/@react-aria/form/src/packages/@react-aria/form/src/index.ts","packages/@react-aria/form/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useFormValidation} from './useFormValidation';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useFormValidation.main.js

@@ -0,0 +1,116 @@
+var $j3sn1$reactariainteractions = require("@react-aria/interactions");
+var $j3sn1$react = require("react");
+var $j3sn1$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$export$b8473d3665f3a75a);
+/*
+ * 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, $j3sn1$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, $j3sn1$reactariautils.useEffectEvent)(()=>{
+        state.resetValidation();
+    });
+    let onInvalid = (0, $j3sn1$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, $j3sn1$reactariainteractions.setInteractionModality)('keyboard');
+        }
+        // Prevent default browser error UI from appearing.
+        e.preventDefault();
+    });
+    let onChange = (0, $j3sn1$reactariautils.useEffectEvent)(()=>{
+        state.commitValidation();
+    });
+    (0, $j3sn1$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=useFormValidation.main.js.map

package/dist/useFormValidation.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/form/src/useFormValidation.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FormValidationState} from '@react-stately/form';\nimport {RefObject, Validation, ValidationResult} from '@react-types/shared';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffect} from 'react';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\n\ntype ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\ninterface FormValidationProps<T> extends Validation<T> {\n  focus?: () => void\n}\n\nexport function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined) {\n  let {validationBehavior, focus} = props;\n\n  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.\n  useLayoutEffect(() => {\n    if (validationBehavior === 'native' && ref?.current) {\n      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';\n      ref.current.setCustomValidity(errorMessage);\n\n      // Prevent default tooltip for validation message.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277\n      if (!ref.current.hasAttribute('title')) {\n        ref.current.title = '';\n      }\n\n      if (!state.realtimeValidation.isInvalid) {\n        state.updateValidation(getNativeValidity(ref.current));\n      }\n    }\n  });\n\n  let onReset = useEffectEvent(() => {\n    state.resetValidation();\n  });\n\n  let onInvalid = useEffectEvent((e: Event) => {\n    // Only commit validation if we are not already displaying one.\n    // This avoids clearing server errors that the user didn't actually fix.\n    if (!state.displayValidation.isInvalid) {\n      state.commitValidation();\n    }\n\n    // Auto focus the first invalid input in a form, unless the error already had its default prevented.\n    let form = ref?.current?.form;\n    if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {\n      if (focus) {\n        focus();\n      } else {\n        ref.current?.focus();\n      }\n\n      // Always show focus ring.\n      setInteractionModality('keyboard');\n    }\n\n    // Prevent default browser error UI from appearing.\n    e.preventDefault();\n  });\n\n  let onChange = useEffectEvent(() => {\n    state.commitValidation();\n  });\n\n  useEffect(() => {\n    let input = ref?.current;\n    if (!input) {\n      return;\n    }\n\n    let form = input.form;\n    input.addEventListener('invalid', onInvalid);\n    input.addEventListener('change', onChange);\n    form?.addEventListener('reset', onReset);\n    return () => {\n      input!.removeEventListener('invalid', onInvalid);\n      input!.removeEventListener('change', onChange);\n      form?.removeEventListener('reset', onReset);\n    };\n  }, [ref, onInvalid, onChange, onReset, validationBehavior]);\n}\n\nfunction getValidity(input: ValidatableElement) {\n  // The native ValidityState object is live, meaning each property is a getter that returns the current state.\n  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.\n  let validity = input.validity;\n  return {\n    badInput: validity.badInput,\n    customError: validity.customError,\n    patternMismatch: validity.patternMismatch,\n    rangeOverflow: validity.rangeOverflow,\n    rangeUnderflow: validity.rangeUnderflow,\n    stepMismatch: validity.stepMismatch,\n    tooLong: validity.tooLong,\n    tooShort: validity.tooShort,\n    typeMismatch: validity.typeMismatch,\n    valueMissing: validity.valueMissing,\n    valid: validity.valid\n  };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n  return {\n    isInvalid: !input.validity.valid,\n    validationDetails: getValidity(input),\n    validationErrors: input.validationMessage ? [input.validationMessage] : []\n  };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n  for (let i = 0; i < form.elements.length; i++) {\n    let element = form.elements[i] as ValidatableElement;\n    if (!element.validity.valid) {\n      return element;\n    }\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"useFormValidation.main.js.map"}

package/dist/useFormValidation.mjs

@@ -0,0 +1,111 @@
+import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
+import {useEffect as $9Gacy$useEffect} from "react";
+import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
+
+/*
+ * 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, $9Gacy$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, $9Gacy$useEffectEvent)(()=>{
+        state.resetValidation();
+    });
+    let onInvalid = (0, $9Gacy$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, $9Gacy$setInteractionModality)('keyboard');
+        }
+        // Prevent default browser error UI from appearing.
+        e.preventDefault();
+    });
+    let onChange = (0, $9Gacy$useEffectEvent)(()=>{
+        state.commitValidation();
+    });
+    (0, $9Gacy$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=useFormValidation.module.js.map

package/dist/useFormValidation.module.js

@@ -0,0 +1,111 @@
+import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
+import {useEffect as $9Gacy$useEffect} from "react";
+import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
+
+/*
+ * 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, $9Gacy$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, $9Gacy$useEffectEvent)(()=>{
+        state.resetValidation();
+    });
+    let onInvalid = (0, $9Gacy$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, $9Gacy$setInteractionModality)('keyboard');
+        }
+        // Prevent default browser error UI from appearing.
+        e.preventDefault();
+    });
+    let onChange = (0, $9Gacy$useEffectEvent)(()=>{
+        state.commitValidation();
+    });
+    (0, $9Gacy$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=useFormValidation.module.js.map

package/dist/useFormValidation.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/form/src/useFormValidation.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FormValidationState} from '@react-stately/form';\nimport {RefObject, Validation, ValidationResult} from '@react-types/shared';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffect} from 'react';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\n\ntype ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\ninterface FormValidationProps<T> extends Validation<T> {\n  focus?: () => void\n}\n\nexport function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined) {\n  let {validationBehavior, focus} = props;\n\n  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.\n  useLayoutEffect(() => {\n    if (validationBehavior === 'native' && ref?.current) {\n      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';\n      ref.current.setCustomValidity(errorMessage);\n\n      // Prevent default tooltip for validation message.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277\n      if (!ref.current.hasAttribute('title')) {\n        ref.current.title = '';\n      }\n\n      if (!state.realtimeValidation.isInvalid) {\n        state.updateValidation(getNativeValidity(ref.current));\n      }\n    }\n  });\n\n  let onReset = useEffectEvent(() => {\n    state.resetValidation();\n  });\n\n  let onInvalid = useEffectEvent((e: Event) => {\n    // Only commit validation if we are not already displaying one.\n    // This avoids clearing server errors that the user didn't actually fix.\n    if (!state.displayValidation.isInvalid) {\n      state.commitValidation();\n    }\n\n    // Auto focus the first invalid input in a form, unless the error already had its default prevented.\n    let form = ref?.current?.form;\n    if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {\n      if (focus) {\n        focus();\n      } else {\n        ref.current?.focus();\n      }\n\n      // Always show focus ring.\n      setInteractionModality('keyboard');\n    }\n\n    // Prevent default browser error UI from appearing.\n    e.preventDefault();\n  });\n\n  let onChange = useEffectEvent(() => {\n    state.commitValidation();\n  });\n\n  useEffect(() => {\n    let input = ref?.current;\n    if (!input) {\n      return;\n    }\n\n    let form = input.form;\n    input.addEventListener('invalid', onInvalid);\n    input.addEventListener('change', onChange);\n    form?.addEventListener('reset', onReset);\n    return () => {\n      input!.removeEventListener('invalid', onInvalid);\n      input!.removeEventListener('change', onChange);\n      form?.removeEventListener('reset', onReset);\n    };\n  }, [ref, onInvalid, onChange, onReset, validationBehavior]);\n}\n\nfunction getValidity(input: ValidatableElement) {\n  // The native ValidityState object is live, meaning each property is a getter that returns the current state.\n  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.\n  let validity = input.validity;\n  return {\n    badInput: validity.badInput,\n    customError: validity.customError,\n    patternMismatch: validity.patternMismatch,\n    rangeOverflow: validity.rangeOverflow,\n    rangeUnderflow: validity.rangeUnderflow,\n    stepMismatch: validity.stepMismatch,\n    tooLong: validity.tooLong,\n    tooShort: validity.tooShort,\n    typeMismatch: validity.typeMismatch,\n    valueMissing: validity.valueMissing,\n    valid: validity.valid\n  };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n  return {\n    isInvalid: !input.validity.valid,\n    validationDetails: getValidity(input),\n    validationErrors: input.validationMessage ? [input.validationMessage] : []\n  };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n  for (let i = 0; i < form.elements.length; i++) {\n    let element = form.elements[i] as ValidatableElement;\n    if (!element.validity.valid) {\n      return element;\n    }\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"useFormValidation.module.js.map"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@react-aria/form",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/form": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.0.8"
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+export {useFormValidation} from './useFormValidation';

package/src/useFormValidation.ts

@@ -0,0 +1,132 @@
+/*
+ * 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.
+ */
+
+import {FormValidationState} from '@react-stately/form';
+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';
+
+type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+interface FormValidationProps<T> extends Validation<T> {
+  focus?: () => void
+}
+
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined) {
+  let {validationBehavior, focus} = props;
+
+  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
+  useLayoutEffect(() => {
+    if (validationBehavior === 'native' && 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(getNativeValidity(ref.current));
+      }
+    }
+  });
+
+  let onReset = useEffectEvent(() => {
+    state.resetValidation();
+  });
+
+  let onInvalid = useEffectEvent((e: Event) => {
+    // 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?.form;
+    if (!e.defaultPrevented && ref && 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();
+  });
+
+  let onChange = useEffectEvent(() => {
+    state.commitValidation();
+  });
+
+  useEffect(() => {
+    let input = ref?.current;
+    if (!input) {
+      return;
+    }
+
+    let form = input.form;
+    input.addEventListener('invalid', onInvalid);
+    input.addEventListener('change', onChange);
+    form?.addEventListener('reset', onReset);
+    return () => {
+      input!.removeEventListener('invalid', onInvalid);
+      input!.removeEventListener('change', onChange);
+      form?.removeEventListener('reset', onReset);
+    };
+  }, [ref, onInvalid, onChange, onReset, validationBehavior]);
+}
+
+function getValidity(input: ValidatableElement) {
+  // 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 getNativeValidity(input: ValidatableElement): ValidationResult {
+  return {
+    isInvalid: !input.validity.valid,
+    validationDetails: getValidity(input),
+    validationErrors: input.validationMessage ? [input.validationMessage] : []
+  };
+}
+
+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;
+}