remix-validated-form 4.5.0-beta.0 → 4.5.1

package/dist/remix-validated-form.es.js

@@ -1996,8 +1996,13 @@ const defaultFormState = {
   setFormElement: noOp,
   validateField: async () => null,
   validate: async () => {
+    throw new Error("Validate called before form was initialized.");
   },
-  resetFormElement: noOp
+  submit: async () => {
+    throw new Error("Submit called before form was initialized.");
+  },
+  resetFormElement: noOp,
+  getValues: () => new FormData()
 };
 const createFormState = (formId, set2, get2) => ({
   isHydrated: false,
@@ -2067,9 +2072,20 @@ const createFormState = (formId, set2, get2) => ({
     invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
     const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
     invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
-    const { error } = await validator.validate(new FormData(formElement));
-    if (error)
-      get2().setFieldErrors(error.fieldErrors);
+    const result = await validator.validate(new FormData(formElement));
+    if (result.error)
+      get2().setFieldErrors(result.error.fieldErrors);
+    return result;
+  },
+  submit: () => {
+    const formElement = get2().formElement;
+    invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
+    formElement.submit();
+  },
+  getValues: () => {
+    const formElement = get2().formElement;
+    invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
+    return new FormData(formElement);
   },
   resetFormElement: () => {
     var _a;
@@ -2205,6 +2221,7 @@ const useTouchedFields = (formId) => useFormStore(formId, (state) => state.touch
 const useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
 const useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
 const useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
+const useSubmitForm = (formId) => useFormStore(formId, (state) => state.submit);
 const useFormActionProp = (formId) => useFormStore(formId, (state) => {
   var _a;
   return (_a = state.formProps) == null ? void 0 : _a.action;
@@ -2213,6 +2230,7 @@ const useFormSubactionProp = (formId) => useFormStore(formId, (state) => {
   var _a;
   return (_a = state.formProps) == null ? void 0 : _a.subaction;
 });
+const useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);
 const useControlledFieldValue = (context, field) => {
   const value = useControlledFieldStore((state) => {
     var _a;
@@ -2526,7 +2544,7 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
   var _a;
   const namesInOrder = [...formElement.elements].map((el) => {
     const input = el instanceof RadioNodeList ? el[0] : el;
-    if (input instanceof HTMLInputElement)
+    if (input instanceof HTMLElement && "name" in input)
       return input.name;
     return null;
   }).filter(nonNull).filter((name) => name in fieldErrors);
@@ -2548,8 +2566,8 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
         break;
       }
     }
-    if (elem instanceof HTMLInputElement) {
-      if (elem.type === "hidden") {
+    if (elem instanceof HTMLElement) {
+      if (elem instanceof HTMLInputElement && elem.type === "hidden") {
         continue;
       }
       elem.focus();
@@ -2688,25 +2706,7 @@ function ValidatedForm(_a) {
   useSubmitComplete(hasActiveSubmission, () => {
     endSubmit();
   });
-  let clickedButtonRef = React.useRef();
-  useEffect(() => {
-    let form = formRef.current;
-    if (!form)
-      return;
-    function handleClick(event) {
-      if (!(event.target instanceof HTMLElement))
-        return;
-      let submitButton = event.target.closest("button,input[type=submit]");
-      if (submitButton && submitButton.form === form && submitButton.type === "submit") {
-        clickedButtonRef.current = submitButton;
-      }
-    }
-    window.addEventListener("click", handleClick, { capture: true });
-    return () => {
-      window.removeEventListener("click", handleClick, { capture: true });
-    };
-  }, []);
-  const handleSubmit = async (e2) => {
+  const handleSubmit = async (e2, target, nativeEvent) => {
     startSubmit();
     const result = await validator.validate(getDataFromForm(e2.currentTarget));
     if (result.error) {
@@ -2722,12 +2722,11 @@ function ValidatedForm(_a) {
         endSubmit();
         return;
       }
-      const submitter = e2.nativeEvent.submitter;
+      const submitter = nativeEvent.submitter;
       if (fetcher)
         fetcher.submit(submitter || e2.currentTarget);
       else
-        submit(submitter || e2.currentTarget, { method, replace });
-      clickedButtonRef.current = null;
+        submit(submitter || target, { replace });
     }
   };
   return /* @__PURE__ */ React.createElement(Form$1, __spreadProps(__spreadValues({
@@ -2739,7 +2738,7 @@ function ValidatedForm(_a) {
     replace,
     onSubmit: (e2) => {
       e2.preventDefault();
-      handleSubmit(e2);
+      handleSubmit(e2, e2.currentTarget, e2.nativeEvent);
     },
     onReset: (event) => {
       onReset == null ? void 0 : onReset(event);
@@ -2750,7 +2749,7 @@ function ValidatedForm(_a) {
     }
   }), /* @__PURE__ */ React.createElement(InternalFormContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React.createElement(FormResetter, {
+  }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormResetter, {
     formRef,
     resetAfterSubmit
   }), subaction && /* @__PURE__ */ React.createElement("input", {
@@ -2761,7 +2760,7 @@ function ValidatedForm(_a) {
     type: "hidden",
     value: id,
     name: FORM_ID_FIELD
-  }), children));
+  }), children)));
 }
 var baseSet = _baseSet;
 function set(object, path, value) {
@@ -2847,14 +2846,27 @@ const useFormHelpers = (formId) => {
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
   const reset = useResetFormElement(formContext.formId);
+  const submit = useSubmitForm(formContext.formId);
+  const getValues = useFormValues(formContext.formId);
   return useMemo(() => ({
     setTouched,
     validateField,
     clearError,
     validate,
     clearAllErrors: () => setFieldErrors({}),
-    reset
-  }), [clearError, reset, setFieldErrors, setTouched, validate, validateField]);
+    reset,
+    submit,
+    getValues
+  }), [
+    clearError,
+    reset,
+    setFieldErrors,
+    setTouched,
+    submit,
+    validate,
+    validateField,
+    getValues
+  ]);
 };
 const useFormContext = (formId) => {
   const context = useInternalFormContext(formId, "useFormContext");
@@ -2865,7 +2877,9 @@ const useFormContext = (formId) => {
     validateField,
     clearAllErrors,
     validate,
-    reset
+    reset,
+    submit,
+    getValues
   } = useFormHelpers(formId);
   const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
   const clearError = useCallback((...names) => {
@@ -2880,7 +2894,9 @@ const useFormContext = (formId) => {
     registerReceiveFocus,
     clearAllErrors,
     validate,
-    reset
+    reset,
+    submit,
+    getValues
   }), [
     clearAllErrors,
     clearError,
@@ -2888,8 +2904,10 @@ const useFormContext = (formId) => {
     reset,
     setTouched,
     state,
+    submit,
     validate,
-    validateField
+    validateField,
+    getValues
   ]);
 };
 export { ValidatedForm, createValidator, setFormDefaults, useControlField, useField, useFormContext, useIsSubmitting, useIsValid, useUpdateControlledField, validationError };