remix-validated-form 4.4.2 → 4.5.0-beta.1

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

@@ -1377,14 +1377,18 @@ const createGetInputProps = ({
     return omitBy_1(inputProps, (value) => value === void 0);
   };
 };
+var isProduction = true;
 var prefix = "Invariant failed";
 function invariant(condition, message) {
   if (condition) {
     return;
   }
-  {
+  if (isProduction) {
     throw new Error(prefix);
   }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? prefix + ": " + provided : prefix;
+  throw new Error(value);
 }
 const FORM_ID_FIELD = "__rvfInternalFormId";
 const FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
@@ -1903,27 +1907,16 @@ const immerImpl = (initializer) => (set2, get2, store) => {
   return initializer(store.setState, get2, store);
 };
 const immer = immerImpl;
-const storeFamily = (create2) => {
-  const stores = /* @__PURE__ */ new Map();
-  const family = (formId) => {
-    if (stores.has(formId))
-      return stores.get(formId);
-    const store = create2(formId);
-    stores.set(formId, store);
-    return store;
-  };
-  family.remove = (formId) => {
-    stores.delete(formId);
-  };
-  return family;
-};
-const controlledFieldStore = storeFamily(() => create$1()(immer((set2, get2, api) => ({
-  fields: {},
-  register: (field) => set2((state) => {
-    if (state.fields[field]) {
-      state.fields[field].refCount++;
+const useControlledFieldStore = create$1()(immer((set2, get2) => ({
+  forms: {},
+  register: (formId, field) => set2((state) => {
+    if (!state.forms[formId]) {
+      state.forms[formId] = {};
+    }
+    if (state.forms[formId][field]) {
+      state.forms[formId][field].refCount++;
     } else {
-      state.fields[field] = {
+      state.forms[formId][field] = {
         refCount: 1,
         value: void 0,
         hydrated: false,
@@ -1932,16 +1925,23 @@ const controlledFieldStore = storeFamily(() => create$1()(immer((set2, get2, api
       };
     }
   }),
-  unregister: (field) => set2((state) => {
-    const fieldState = state.fields[field];
+  unregister: (formId, field) => set2((state) => {
+    var _a;
+    const formState = (_a = state.forms) == null ? void 0 : _a[formId];
+    const fieldState = formState == null ? void 0 : formState[field];
     if (!fieldState)
       return;
     fieldState.refCount--;
     if (fieldState.refCount === 0)
-      delete state.fields[field];
+      delete formState[field];
   }),
-  setValue: (field, value) => set2((state) => {
-    const fieldState = state.fields[field];
+  getField: (formId, field) => {
+    var _a, _b;
+    return (_b = (_a = get2().forms) == null ? void 0 : _a[formId]) == null ? void 0 : _b[field];
+  },
+  setValue: (formId, field, value) => set2((state) => {
+    var _a, _b;
+    const fieldState = (_b = (_a = state.forms) == null ? void 0 : _a[formId]) == null ? void 0 : _b[field];
     if (!fieldState)
       return;
     fieldState.value = value;
@@ -1950,27 +1950,60 @@ const controlledFieldStore = storeFamily(() => create$1()(immer((set2, get2, api
     });
     fieldState.valueUpdatePromise = promise;
   }),
-  hydrateWithDefault: (field, defaultValue) => set2((state) => {
-    const fieldState = state.fields[field];
+  hydrateWithDefault: (formId, field, defaultValue) => set2((state) => {
+    var _a;
+    const fieldState = (_a = state.forms[formId]) == null ? void 0 : _a[field];
     if (!fieldState)
       return;
     fieldState.value = defaultValue;
     fieldState.defaultValue = defaultValue;
     fieldState.hydrated = true;
   }),
-  awaitValueUpdate: async (field) => {
+  awaitValueUpdate: async (formId, field) => {
     var _a;
-    await ((_a = get2().fields[field]) == null ? void 0 : _a.valueUpdatePromise);
+    await ((_a = get2().getField(formId, field)) == null ? void 0 : _a.valueUpdatePromise);
   },
-  reset: () => set2((state) => {
-    Object.values(state.fields).forEach((field) => {
+  reset: (formId) => set2((state) => {
+    const formState = state.forms[formId];
+    if (!formState)
+      return;
+    Object.values(formState).forEach((field) => {
       if (!field)
         return;
       field.value = field.defaultValue;
     });
   })
-}))));
-const formStore = storeFamily((formId) => create$1()(immer((set2, get2, api) => ({
+})));
+const noOp = () => {
+};
+const defaultFormState = {
+  isHydrated: false,
+  isSubmitting: false,
+  hasBeenSubmitted: false,
+  touchedFields: {},
+  fieldErrors: {},
+  formElement: null,
+  isValid: () => true,
+  startSubmit: noOp,
+  endSubmit: noOp,
+  setTouched: noOp,
+  setFieldError: noOp,
+  setFieldErrors: noOp,
+  clearFieldError: noOp,
+  reset: () => noOp,
+  syncFormProps: noOp,
+  setHydrated: noOp,
+  setFormElement: noOp,
+  validateField: async () => null,
+  validate: async () => {
+    throw new Error("Validate called before form was initialized.");
+  },
+  submit: async () => {
+    throw new Error("Submit called before form was initialized.");
+  },
+  resetFormElement: noOp
+};
+const createFormState = (formId, set2, get2) => ({
   isHydrated: false,
   isSubmitting: false,
   hasBeenSubmitted: false,
@@ -2004,6 +2037,7 @@ const formStore = storeFamily((formId) => create$1()(immer((set2, get2, api) =>
   }),
   syncFormProps: (props) => set2((state) => {
     state.formProps = props;
+    state.isHydrated = true;
   }),
   setHydrated: () => set2((state) => {
     state.isHydrated = true;
@@ -2018,10 +2052,10 @@ const formStore = storeFamily((formId) => create$1()(immer((set2, get2, api) =>
   validateField: async (field) => {
     var _a, _b, _c;
     const formElement = get2().formElement;
-    invariant(formElement);
+    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);
-    await ((_c = (_b = controlledFieldStore(formId).getState()).awaitValueUpdate) == null ? void 0 : _c.call(_b, field));
+    invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
+    await ((_c = (_b = useControlledFieldStore.getState()).awaitValueUpdate) == null ? void 0 : _c.call(_b, formId, field));
     const { error } = await validator.validateField(new FormData(formElement), field);
     if (error) {
       get2().setFieldError(field, error);
@@ -2034,25 +2068,45 @@ const formStore = storeFamily((formId) => create$1()(immer((set2, get2, api) =>
   validate: async () => {
     var _a;
     const formElement = get2().formElement;
-    invariant(formElement);
+    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);
-    const { error } = await validator.validate(new FormData(formElement));
-    if (error)
-      get2().setFieldErrors(error.fieldErrors);
+    invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
+    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();
   },
   resetFormElement: () => {
     var _a;
     return (_a = get2().formElement) == null ? void 0 : _a.reset();
   }
-}))));
+});
+const useRootFormStore = create$1()(immer((set2, get2) => ({
+  forms: {},
+  form: (formId) => {
+    var _a;
+    return (_a = get2().forms[formId]) != null ? _a : defaultFormState;
+  },
+  cleanupForm: (formId) => {
+    set2((state) => {
+      delete state.forms[formId];
+    });
+  },
+  registerForm: (formId) => {
+    if (get2().forms[formId])
+      return;
+    set2((state) => {
+      state.forms[formId] = createFormState(formId, (setter) => set2((state2) => setter(state2.forms[formId])), () => get2().forms[formId]);
+    });
+  }
+})));
 const useFormStore = (formId, selector) => {
-  const useStore2 = formStore(formId);
-  return useStore2(selector);
-};
-const useControlledFieldStore = (formId, selector) => {
-  const useStore2 = controlledFieldStore(formId);
-  return useStore2(selector);
+  return useRootFormStore((state) => selector(state.form(formId)));
 };
 const useInternalFormContext = (formId, hookName) => {
   const formContext = useContext(InternalFormContext);
@@ -2106,7 +2160,7 @@ const useDefaultValuesForForm = (context) => {
   if (hydrated)
     return hydratable.hydratedData();
   if (errorResponse == null ? void 0 : errorResponse.repopulateFields) {
-    invariant(typeof errorResponse.repopulateFields === "object");
+    invariant(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
     return hydratable.serverData(errorResponse.repopulateFields);
   }
   if (defaultValuesProp)
@@ -2161,6 +2215,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;
@@ -2170,24 +2225,23 @@ const useFormSubactionProp = (formId) => useFormStore(formId, (state) => {
   return (_a = state.formProps) == null ? void 0 : _a.subaction;
 });
 const useControlledFieldValue = (context, field) => {
-  const useValueStore = controlledFieldStore(context.formId);
-  const value = useValueStore((state) => {
+  const value = useControlledFieldStore((state) => {
     var _a;
-    return (_a = state.fields[field]) == null ? void 0 : _a.value;
+    return (_a = state.getField(context.formId, field)) == null ? void 0 : _a.value;
   });
-  const useFormStore2 = formStore(context.formId);
-  const isFormHydrated = useFormStore2((state) => state.isHydrated);
+  const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
   const defaultValue = useFieldDefaultValue(field, context);
-  const isFieldHydrated = useValueStore((state) => {
+  const isFieldHydrated = useControlledFieldStore((state) => {
     var _a, _b;
-    return (_b = (_a = state.fields[field]) == null ? void 0 : _a.hydrated) != null ? _b : false;
+    return (_b = (_a = state.getField(context.formId, field)) == null ? void 0 : _a.hydrated) != null ? _b : false;
   });
-  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
+  const hydrateWithDefault = useControlledFieldStore((state) => state.hydrateWithDefault);
   useEffect(() => {
     if (isFormHydrated && !isFieldHydrated) {
-      hydrateWithDefault(field, defaultValue);
+      hydrateWithDefault(context.formId, field, defaultValue);
     }
   }, [
+    context.formId,
     defaultValue,
     field,
     hydrateWithDefault,
@@ -2197,28 +2251,27 @@ const useControlledFieldValue = (context, field) => {
   return isFieldHydrated ? value : defaultValue;
 };
 const useControllableValue = (context, field) => {
-  const useValueStore = controlledFieldStore(context.formId);
-  const resolveUpdate = useValueStore((state) => {
+  const resolveUpdate = useControlledFieldStore((state) => {
     var _a;
-    return (_a = state.fields[field]) == null ? void 0 : _a.resolveValueUpdate;
+    return (_a = state.getField(context.formId, field)) == null ? void 0 : _a.resolveValueUpdate;
   });
   useEffect(() => {
     resolveUpdate == null ? void 0 : resolveUpdate();
   }, [resolveUpdate]);
-  const register = useValueStore((state) => state.register);
-  const unregister = useValueStore((state) => state.unregister);
+  const register = useControlledFieldStore((state) => state.register);
+  const unregister = useControlledFieldStore((state) => state.unregister);
   useEffect(() => {
-    register(field);
-    return () => unregister(field);
+    register(context.formId, field);
+    return () => unregister(context.formId, field);
   }, [context.formId, field, register, unregister]);
-  const setControlledFieldValue = useValueStore((state) => state.setValue);
-  const setValue = useCallback((value2) => setControlledFieldValue(field, value2), [field, setControlledFieldValue]);
+  const setControlledFieldValue = useControlledFieldStore((state) => state.setValue);
+  const setValue = useCallback((value2) => setControlledFieldValue(context.formId, field, value2), [context.formId, field, setControlledFieldValue]);
   const value = useControlledFieldValue(context, field);
   return [value, setValue];
 };
 const useUpdateControllableValue = (formId) => {
-  const useValueStore = controlledFieldStore(formId);
-  return useValueStore((state) => state.setValue);
+  const setValue = useControlledFieldStore((state) => state.setValue);
+  return useCallback((field, value) => setValue(formId, field, value), [formId, setValue]);
 };
 const useIsSubmitting = (formId) => {
   const formContext = useInternalFormContext(formId, "useIsSubmitting");
@@ -2437,10 +2490,6 @@ const useMultiValueMap = () => {
     return ref.current;
   }, []);
 };
-const cleanupFormState = (formId) => {
-  formStore.remove(formId);
-  controlledFieldStore.remove(formId);
-};
 function useSubmitComplete(isSubmitting, callback) {
   const isPending = useRef(false);
   useEffect(() => {
@@ -2604,16 +2653,13 @@ function ValidatedForm(_a) {
   const setFieldErrors = useSetFieldErrors(formId);
   const setFieldError = useFormStore(formId, (state) => state.setFieldError);
   const reset = useFormStore(formId, (state) => state.reset);
-  const resetControlledFields = useControlledFieldStore(formId, (state) => state.reset);
+  const resetControlledFields = useControlledFieldStore((state) => state.reset);
   const startSubmit = useFormStore(formId, (state) => state.startSubmit);
   const endSubmit = useFormStore(formId, (state) => state.endSubmit);
   const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
-  const setHydrated = useFormStore(formId, (state) => state.setHydrated);
   const setFormElementInState = useFormStore(formId, (state) => state.setFormElement);
-  useEffect(() => {
-    setHydrated();
-    return () => cleanupFormState(formId);
-  }, [formId, setHydrated]);
+  const cleanupForm = useRootFormStore((state) => state.cleanupForm);
+  const registerForm = useRootFormStore((state) => state.registerForm);
   const customFocusHandlers = useMultiValueMap();
   const registerReceiveFocus = useCallback((fieldName, handler) => {
     customFocusHandlers().add(fieldName, handler);
@@ -2621,6 +2667,10 @@ function ValidatedForm(_a) {
       customFocusHandlers().remove(fieldName, handler);
     };
   }, [customFocusHandlers]);
+  useIsomorphicLayoutEffect(() => {
+    registerForm(formId);
+    return () => cleanupForm(formId);
+  }, [cleanupForm, formId, registerForm]);
   useIsomorphicLayoutEffect(() => {
     var _a3;
     syncFormProps({
@@ -2639,6 +2689,9 @@ function ValidatedForm(_a) {
     backendDefaultValues,
     validator
   ]);
+  useIsomorphicLayoutEffect(() => {
+    setFormElementInState(formRef.current);
+  }, [setFormElementInState]);
   useEffect(() => {
     var _a3;
     setFieldErrors((_a3 = backendError == null ? void 0 : backendError.fieldErrors) != null ? _a3 : {});
@@ -2646,25 +2699,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) {
@@ -2680,16 +2715,15 @@ 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, { method, replace });
     }
   };
   return /* @__PURE__ */ React.createElement(Form$1, __spreadProps(__spreadValues({
-    ref: mergeRefs([formRef, formRefProp, setFormElementInState])
+    ref: mergeRefs([formRef, formRefProp])
   }, rest), {
     id,
     action,
@@ -2697,18 +2731,18 @@ function ValidatedForm(_a) {
     replace,
     onSubmit: (e2) => {
       e2.preventDefault();
-      handleSubmit(e2);
+      handleSubmit(e2, e2.currentTarget, e2.nativeEvent);
     },
     onReset: (event) => {
       onReset == null ? void 0 : onReset(event);
       if (event.defaultPrevented)
         return;
       reset();
-      resetControlledFields();
+      resetControlledFields(formId);
     }
   }), /* @__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", {
@@ -2719,7 +2753,7 @@ function ValidatedForm(_a) {
     type: "hidden",
     value: id,
     name: FORM_ID_FIELD
-  }), children));
+  }), children)));
 }
 var baseSet = _baseSet;
 function set(object, path, value) {
@@ -2805,14 +2839,24 @@ const useFormHelpers = (formId) => {
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
   const reset = useResetFormElement(formContext.formId);
+  const submit = useSubmitForm(formContext.formId);
   return useMemo(() => ({
     setTouched,
     validateField,
     clearError,
     validate,
     clearAllErrors: () => setFieldErrors({}),
-    reset
-  }), [clearError, reset, setFieldErrors, setTouched, validate, validateField]);
+    reset,
+    submit
+  }), [
+    clearError,
+    reset,
+    setFieldErrors,
+    setTouched,
+    submit,
+    validate,
+    validateField
+  ]);
 };
 const useFormContext = (formId) => {
   const context = useInternalFormContext(formId, "useFormContext");
@@ -2823,7 +2867,8 @@ const useFormContext = (formId) => {
     validateField,
     clearAllErrors,
     validate,
-    reset
+    reset,
+    submit
   } = useFormHelpers(formId);
   const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
   const clearError = useCallback((...names) => {
@@ -2831,15 +2876,26 @@ const useFormContext = (formId) => {
       internalClearError(name);
     });
   }, [internalClearError]);
-  return __spreadProps(__spreadValues({}, state), {
+  return useMemo(() => __spreadProps(__spreadValues({}, state), {
     setFieldTouched: setTouched,
     validateField,
     clearError,
     registerReceiveFocus,
     clearAllErrors,
     validate,
-    reset
-  });
+    reset,
+    submit
+  }), [
+    clearAllErrors,
+    clearError,
+    registerReceiveFocus,
+    reset,
+    setTouched,
+    state,
+    submit,
+    validate,
+    validateField
+  ]);
 };
 export { ValidatedForm, createValidator, setFormDefaults, useControlField, useField, useFormContext, useIsSubmitting, useIsValid, useUpdateControlledField, validationError };
 //# sourceMappingURL=remix-validated-form.es.js.map