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

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,56 @@ 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 () => {
+  },
+  resetFormElement: noOp
+};
+const createFormState = (formId, set2, get2) => ({
   isHydrated: false,
   isSubmitting: false,
   hasBeenSubmitted: false,
@@ -2004,6 +2033,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 +2048,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,9 +2064,9 @@ 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);
+    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);
@@ -2045,14 +2075,28 @@ const formStore = storeFamily((formId) => create$1()(immer((set2, get2, api) =>
     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 +2150,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)
@@ -2170,24 +2214,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 +2240,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 +2479,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 +2642,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 +2656,10 @@ function ValidatedForm(_a) {
       customFocusHandlers().remove(fieldName, handler);
     };
   }, [customFocusHandlers]);
+  useIsomorphicLayoutEffect(() => {
+    registerForm(formId);
+    return () => cleanupForm(formId);
+  }, [cleanupForm, formId, registerForm]);
   useIsomorphicLayoutEffect(() => {
     var _a3;
     syncFormProps({
@@ -2639,6 +2678,9 @@ function ValidatedForm(_a) {
     backendDefaultValues,
     validator
   ]);
+  useIsomorphicLayoutEffect(() => {
+    setFormElementInState(formRef.current);
+  }, [setFormElementInState]);
   useEffect(() => {
     var _a3;
     setFieldErrors((_a3 = backendError == null ? void 0 : backendError.fieldErrors) != null ? _a3 : {});
@@ -2680,18 +2722,16 @@ function ValidatedForm(_a) {
         endSubmit();
         return;
       }
+      const submitter = e2.nativeEvent.submitter;
       if (fetcher)
-        fetcher.submit(clickedButtonRef.current || formRef.current);
+        fetcher.submit(submitter || e2.currentTarget);
       else
-        submit(clickedButtonRef.current || formRef.current, {
-          method,
-          replace
-        });
+        submit(submitter || e2.currentTarget, { method, replace });
       clickedButtonRef.current = null;
     }
   };
   return /* @__PURE__ */ React.createElement(Form$1, __spreadProps(__spreadValues({
-    ref: mergeRefs([formRef, formRefProp, setFormElementInState])
+    ref: mergeRefs([formRef, formRefProp])
   }, rest), {
     id,
     action,
@@ -2706,7 +2746,7 @@ function ValidatedForm(_a) {
       if (event.defaultPrevented)
         return;
       reset();
-      resetControlledFields();
+      resetControlledFields(formId);
     }
   }), /* @__PURE__ */ React.createElement(InternalFormContext.Provider, {
     value: contextValue
@@ -2833,7 +2873,7 @@ const useFormContext = (formId) => {
       internalClearError(name);
     });
   }, [internalClearError]);
-  return __spreadProps(__spreadValues({}, state), {
+  return useMemo(() => __spreadProps(__spreadValues({}, state), {
     setFieldTouched: setTouched,
     validateField,
     clearError,
@@ -2841,6 +2881,16 @@ const useFormContext = (formId) => {
     clearAllErrors,
     validate,
     reset
-  });
+  }), [
+    clearAllErrors,
+    clearError,
+    registerReceiveFocus,
+    reset,
+    setTouched,
+    state,
+    validate,
+    validateField
+  ]);
 };
 export { ValidatedForm, createValidator, setFormDefaults, useControlField, useField, useFormContext, useIsSubmitting, useIsValid, useUpdateControlledField, validationError };
+//# sourceMappingURL=remix-validated-form.es.js.map