@payloadcms/ui 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/forms/Form/index.js

@@ -1,519 +1,578 @@
 'use client';
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ import isDeepEqual from 'deep-equal';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { dequal } from 'dequal/lite'; // lite: no need for Map and Set support
 import { useRouter } from 'next/navigation.js';
 import { serialize } from 'object-to-formdata';
-import { wait } from 'payload/utilities';
-import QueryString from 'qs';
+import { deepCopyObjectSimpleWithoutReactComponents, getDataByPath as getDataByPathFunc, getSiblingData as getSiblingDataFunc, reduceFieldsToValues, wait } from 'payload/shared';
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useDebouncedEffect } from '../../hooks/useDebouncedEffect.js';
-import useThrottledEffect from '../../hooks/useThrottledEffect.js';
+import { toast } from 'sonner';
+import { useIgnoredEffectDebounced } from '../../hooks/useIgnoredEffect.js';
+import { useThrottledEffect } from '../../hooks/useThrottledEffect.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useOperation } from '../../providers/Operation/index.js';
+import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { abortAndIgnore } from '../../utilities/abortAndIgnore.js';
 import { requests } from '../../utilities/api.js';
-import { getFormState } from '../../utilities/getFormState.js';
-import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js';
-import { FormContext, FormFieldsContext, FormWatchContext, ModifiedContext, ProcessingContext, SubmittedContext } from './context.js';
+import { FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext } from './context.js';
 import { errorMessages } from './errorMessages.js';
 import { fieldReducer } from './fieldReducer.js';
-import { getDataByPath as getDataByPathFunc } from './getDataByPath.js';
-import { getSiblingData as getSiblingDataFunc } from './getSiblingData.js';
 import { initContextState } from './initContextState.js';
 import { mergeServerFormState } from './mergeServerFormState.js';
 const baseClass = 'form';
-export const Form = (props)=>{
-    const { id, collectionSlug, globalSlug } = useDocumentInfo();
-    const { action, beforeSubmit, children, className, disableSuccessStatus, disableValidationOnSubmit, disabled: disabledFromProps, // fields: fieldsFromProps = collection?.fields || global?.fields,
-    handleResponse, initialState, onChange, onSubmit, onSuccess, redirect, submitted: submittedFromProps, uuid, waitForAutocomplete } = props;
-    const method = 'method' in props ? props?.method : undefined;
-    const router = useRouter();
-    const { code: locale } = useLocale();
-    const { i18n, t } = useTranslation();
-    const { refreshCookie, user } = useAuth();
-    const operation = useOperation();
-    const { formQueryParams } = useFormQueryParams();
-    const config = useConfig();
-    const { routes: { api: apiRoute }, serverURL } = config;
-    const [disabled, setDisabled] = useState(disabledFromProps || false);
-    const [modified, setModified] = useState(false);
-    const [processing, setProcessing] = useState(false);
-    const [submitted, setSubmitted] = useState(false);
-    const formRef = useRef(null);
-    const contextRef = useRef({});
-    const fieldsReducer = useReducer(fieldReducer, {}, ()=>initialState);
-    /**
-   * `fields` is the current, up-to-date state/data of all fields in the form. It can be modified by using dispatchFields,
-   * which calls the fieldReducer, which then updates the state.
-   */ const [fields, dispatchFields] = fieldsReducer;
-    contextRef.current.fields = fields;
-    const validateForm = useCallback(async ()=>{
-        const validatedFieldState = {};
-        let isValid = true;
-        const dataFromContext = contextRef.current.getData();
-        const data = dataFromContext;
-        const validationPromises = Object.entries(contextRef.current.fields).map(async ([path, field])=>{
-            const validatedField = field;
-            if (field.passesCondition !== false) {
-                let validationResult = validatedField.valid;
-                if (typeof field.validate === 'function') {
-                    let valueToValidate = field.value;
-                    if (field?.rows && Array.isArray(field.rows)) {
-                        valueToValidate = contextRef.current.getDataByPath(path);
-                    }
-                    validationResult = await field.validate(valueToValidate, {
-                        id,
-                        config,
-                        data,
-                        operation,
-                        siblingData: contextRef.current.getSiblingData(path),
-                        t,
-                        user
-                    });
-                    if (typeof validationResult === 'string') {
-                        validatedField.errorMessage = validationResult;
-                        validatedField.valid = false;
-                    } else {
-                        validatedField.valid = true;
-                        validatedField.errorMessage = undefined;
-                    }
-                }
-                if (validatedField.valid === false) {
-                    isValid = false;
-                }
-            }
-            validatedFieldState[path] = validatedField;
-        });
-        await Promise.all(validationPromises);
-        if (!isDeepEqual(contextRef.current.fields, validatedFieldState)) {
-            dispatchFields({
-                type: 'REPLACE_STATE',
-                state: validatedFieldState
-            });
+export const Form = props => {
+  const {
+    id,
+    collectionSlug,
+    docPermissions,
+    getDocPreferences,
+    globalSlug
+  } = useDocumentInfo();
+  const {
+    action,
+    beforeSubmit,
+    children,
+    className,
+    disabled: disabledFromProps,
+    disableSuccessStatus,
+    disableValidationOnSubmit,
+    // fields: fieldsFromProps = collection?.fields || global?.fields,
+    handleResponse,
+    initialState,
+    isInitializing: initializingFromProps,
+    onChange,
+    onSubmit,
+    onSuccess,
+    redirect,
+    submitted: submittedFromProps,
+    uuid,
+    waitForAutocomplete
+  } = props;
+  const method = 'method' in props ? props?.method : undefined;
+  const router = useRouter();
+  const {
+    code: locale
+  } = useLocale();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    refreshCookie,
+    user
+  } = useAuth();
+  const operation = useOperation();
+  const {
+    getFormState
+  } = useServerFunctions();
+  const {
+    config
+  } = useConfig();
+  const [disabled, setDisabled] = useState(disabledFromProps || false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [modified, setModified] = useState(false);
+  const [initializing, setInitializing] = useState(initializingFromProps);
+  const [processing, setProcessing] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
+  const contextRef = useRef({});
+  const resetFormStateAbortControllerRef = useRef(null);
+  const fieldsReducer = useReducer(fieldReducer, {}, () => initialState);
+  /**
+  * `fields` is the current, up-to-date state/data of all fields in the form. It can be modified by using dispatchFields,
+  * which calls the fieldReducer, which then updates the state.
+  */
+  const [fields, dispatchFields] = fieldsReducer;
+  contextRef.current.fields = fields;
+  const validateForm = useCallback(async () => {
+    const validatedFieldState = {};
+    let isValid = true;
+    const dataFromContext = contextRef.current.getData();
+    const data = dataFromContext;
+    const validationPromises = Object.entries(contextRef.current.fields).map(async ([path, field]) => {
+      const validatedField = field;
+      if (field.passesCondition !== false) {
+        let validationResult = validatedField.valid;
+        if ('validate' in field && typeof field.validate === 'function') {
+          let valueToValidate = field.value;
+          if (field?.rows && Array.isArray(field.rows)) {
+            valueToValidate = contextRef.current.getDataByPath(path);
+          }
+          validationResult = await field.validate(valueToValidate, {
+            ...field,
+            id,
+            collectionSlug,
+            data,
+            operation,
+            preferences: {},
+            req: {
+              payload: {
+                config
+              },
+              t,
+              user
+            },
+            siblingData: contextRef.current.getSiblingData(path)
+          });
+          if (typeof validationResult === 'string') {
+            validatedField.errorMessage = validationResult;
+            validatedField.valid = false;
+          } else {
+            validatedField.valid = true;
+            validatedField.errorMessage = undefined;
+          }
         }
-        return isValid;
-    }, [
-        id,
-        user,
-        operation,
-        t,
-        dispatchFields,
-        config
-    ]);
-    const submit = useCallback(async (options = {}, e)=>{
-        const { action: actionArg, method: methodToUse = method, overrides = {}, skipValidation } = options;
-        if (disabled) {
-            if (e) {
-                e.preventDefault();
-            }
-            return;
+        if (validatedField.valid === false) {
+          isValid = false;
         }
-        if (e) {
-            e.stopPropagation();
-            e.preventDefault();
+      }
+      validatedFieldState[path] = validatedField;
+    });
+    await Promise.all(validationPromises);
+    if (!dequal(contextRef.current.fields, validatedFieldState)) {
+      dispatchFields({
+        type: 'REPLACE_STATE',
+        state: validatedFieldState
+      });
+    }
+    return isValid;
+  }, [collectionSlug, config, dispatchFields, id, operation, t, user]);
+  const submit = useCallback(async (options = {}, e) => {
+    const {
+      action: actionArg = action,
+      method: methodToUse = method,
+      overrides = {},
+      skipValidation
+    } = options;
+    if (disabled) {
+      if (e) {
+        e.preventDefault();
+      }
+      return;
+    }
+    // create new toast promise which will resolve manually later
+    let errorToast, successToast;
+    const promise = new Promise((resolve, reject) => {
+      successToast = resolve;
+      errorToast = reject;
+    });
+    const hasFormSubmitAction = actionArg || typeof action === 'string' || typeof action === 'function';
+    if (redirect || disableSuccessStatus || !hasFormSubmitAction) {
+      // Do not show submitting toast, as the promise toast may never disappear under these conditions.
+      // Instead, make successToast() or errorToast() throw toast.success / toast.error
+      successToast = data_0 => toast.success(data_0);
+      errorToast = data_1 => toast.error(data_1);
+    } else {
+      toast.promise(promise, {
+        error: data_2 => {
+          return data_2;
+        },
+        loading: t('general:submitting'),
+        success: data_3 => {
+          return data_3;
         }
-        setProcessing(true);
-        setDisabled(true);
-        if (waitForAutocomplete) await wait(100);
-        // Execute server side validations
-        if (Array.isArray(beforeSubmit)) {
-            let revalidatedFormState;
-            await beforeSubmit.reduce(async (priorOnChange, beforeSubmitFn)=>{
-                await priorOnChange;
-                const result = await beforeSubmitFn({
-                    formState: fields
-                });
-                revalidatedFormState = result;
-            }, Promise.resolve());
-            const isValid = Object.entries(revalidatedFormState).every(([, field])=>field.valid);
-            if (!isValid) {
-                setProcessing(false);
-                setSubmitted(true);
-                setDisabled(false);
-                return dispatchFields({
-                    type: 'REPLACE_STATE',
-                    state: revalidatedFormState
-                });
-            }
+      });
+    }
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    setProcessing(true);
+    setDisabled(true);
+    if (waitForAutocomplete) {
+      await wait(100);
+    }
+    // Execute server side validations
+    if (Array.isArray(beforeSubmit)) {
+      let revalidatedFormState;
+      const serializableFields = deepCopyObjectSimpleWithoutReactComponents(fields);
+      await beforeSubmit.reduce(async (priorOnChange, beforeSubmitFn) => {
+        await priorOnChange;
+        const result = await beforeSubmitFn({
+          formState: serializableFields
+        });
+        revalidatedFormState = result;
+      }, Promise.resolve());
+      const isValid_0 = Object.entries(revalidatedFormState).every(([, field_0]) => field_0.valid);
+      if (!isValid_0) {
+        setProcessing(false);
+        setSubmitted(true);
+        setDisabled(false);
+        return dispatchFields({
+          type: 'REPLACE_STATE',
+          state: revalidatedFormState
+        });
+      }
+    }
+    const isValid_1 = skipValidation || disableValidationOnSubmit ? true : await contextRef.current.validateForm();
+    // If not valid, prevent submission
+    if (!isValid_1) {
+      errorToast(t('error:correctInvalidFields'));
+      setProcessing(false);
+      setSubmitted(true);
+      setDisabled(false);
+      return;
+    }
+    // If submit handler comes through via props, run that
+    if (onSubmit) {
+      const serializableFields_0 = deepCopyObjectSimpleWithoutReactComponents(fields);
+      const data_4 = reduceFieldsToValues(serializableFields_0, true);
+      if (overrides) {
+        for (const [key, value] of Object.entries(overrides)) {
+          data_4[key] = value;
         }
-        const isValid = skipValidation || disableValidationOnSubmit ? true : await contextRef.current.validateForm();
-        // If not valid, prevent submission
-        if (!isValid) {
-            toast.error(t('error:correctInvalidFields'));
-            setProcessing(false);
-            setSubmitted(true);
-            setDisabled(false);
-            return;
+      }
+      onSubmit(serializableFields_0, data_4);
+    }
+    if (!hasFormSubmitAction) {
+      // No action provided, so we should return. An example where this happens are lexical link drawers. Upon submitting the drawer, we
+      // want to close it without submitting the form. Stuff like validation would be handled by lexical before this, through beforeSubmit
+      setProcessing(false);
+      setSubmitted(true);
+      setDisabled(false);
+      return;
+    }
+    const formData = contextRef.current.createFormData(overrides);
+    try {
+      let res;
+      if (typeof actionArg === 'string') {
+        res = await requests[methodToUse.toLowerCase()](actionArg, {
+          body: formData,
+          headers: {
+            'Accept-Language': i18n.language
+          }
+        });
+      } else if (typeof action === 'function') {
+        res = await action(formData);
+      }
+      setModified(false);
+      setDisabled(false);
+      if (typeof handleResponse === 'function') {
+        handleResponse(res, successToast, errorToast);
+        return;
+      }
+      const contentType = res.headers.get('content-type');
+      const isJSON = contentType && contentType.indexOf('application/json') !== -1;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let json = {};
+      if (isJSON) {
+        json = await res.json();
+      }
+      if (res.status < 400) {
+        if (typeof onSuccess === 'function') {
+          await onSuccess(json);
         }
-        // If submit handler comes through via props, run that
-        if (onSubmit) {
-            const data = {
-                ...reduceFieldsToValues(fields, true),
-                ...overrides
-            };
-            onSubmit(fields, data);
+        setSubmitted(false);
+        setProcessing(false);
+        if (redirect) {
+          router.push(redirect);
+        } else if (!disableSuccessStatus) {
+          successToast(json.message || t('general:submissionSuccessful'));
         }
-        const formData = contextRef.current.createFormData(overrides);
-        try {
-            let res;
-            const actionEndpoint = actionArg || (typeof action === 'string' ? `${action}${QueryString.stringify(formQueryParams, {
-                addQueryPrefix: true
-            })}` : null);
-            if (actionEndpoint) {
-                res = await requests[methodToUse.toLowerCase()](actionEndpoint, {
-                    body: formData,
-                    headers: {
-                        'Accept-Language': i18n.language
-                    }
-                });
-            } else if (typeof action === 'function') {
-                res = await action(formData);
-            }
-            setModified(false);
-            setDisabled(false);
-            if (typeof handleResponse === 'function') {
-                handleResponse(res);
-                return;
+      } else {
+        setProcessing(false);
+        setSubmitted(true);
+        contextRef.current = {
+          ...contextRef.current
+        } // triggers rerender of all components that subscribe to form
+        ;
+        if (json.message) {
+          errorToast(json.message);
+          return;
+        }
+        if (Array.isArray(json.errors)) {
+          const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err_0) => {
+            const newFieldErrs = [];
+            const newNonFieldErrs = [];
+            if (err_0?.message) {
+              newNonFieldErrs.push(err_0);
             }
-            const contentType = res.headers.get('content-type');
-            const isJSON = contentType && contentType.indexOf('application/json') !== -1;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            let json = {};
-            if (isJSON) json = await res.json();
-            if (res.status < 400) {
-                if (typeof onSuccess === 'function') await onSuccess(json);
-                setSubmitted(false);
-                setProcessing(false);
-                if (redirect) {
-                    router.push(redirect);
-                } else if (!disableSuccessStatus) {
-                    toast.success(json.message || t('general:submissionSuccessful'), {
-                        autoClose: 3000
-                    });
-                }
-            } else {
-                setProcessing(false);
-                setSubmitted(true);
-                contextRef.current = {
-                    ...contextRef.current
-                } // triggers rerender of all components that subscribe to form
-                ;
-                if (json.message) {
-                    toast.error(json.message);
-                    return;
+            if (Array.isArray(err_0?.data?.errors)) {
+              err_0.data?.errors.forEach(dataError => {
+                if (dataError?.path) {
+                  newFieldErrs.push(dataError);
+                } else {
+                  newNonFieldErrs.push(dataError);
                 }
-                if (Array.isArray(json.errors)) {
-                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err)=>{
-                        const newFieldErrs = [];
-                        const newNonFieldErrs = [];
-                        if (err?.message) {
-                            newNonFieldErrs.push(err);
-                        }
-                        if (Array.isArray(err?.data)) {
-                            err.data.forEach((dataError)=>{
-                                if (dataError?.field) {
-                                    newFieldErrs.push(dataError);
-                                } else {
-                                    newNonFieldErrs.push(dataError);
-                                }
-                            });
-                        }
-                        return [
-                            [
-                                ...fieldErrs,
-                                ...newFieldErrs
-                            ],
-                            [
-                                ...nonFieldErrs,
-                                ...newNonFieldErrs
-                            ]
-                        ];
-                    }, [
-                        [],
-                        []
-                    ]);
-                    dispatchFields({
-                        type: 'ADD_SERVER_ERRORS',
-                        errors: fieldErrors
-                    });
-                    nonFieldErrors.forEach((err)=>{
-                        toast.error(err.message || t('error:unknown'));
-                    });
-                    return;
-                }
-                const message = errorMessages?.[res.status] || res?.statusText || t('error:unknown');
-                toast.error(message);
+              });
             }
-        } catch (err) {
-            setProcessing(false);
-            setSubmitted(true);
-            setDisabled(false);
-            toast.error(err);
+            return [[...fieldErrs, ...newFieldErrs], [...nonFieldErrs, ...newNonFieldErrs]];
+          }, [[], []]);
+          dispatchFields({
+            type: 'ADD_SERVER_ERRORS',
+            errors: fieldErrors
+          });
+          nonFieldErrors.forEach(err_1 => {
+            errorToast(err_1.message || t('error:unknown'));
+          });
+          return;
         }
-    }, [
-        beforeSubmit,
-        action,
-        disableSuccessStatus,
-        disableValidationOnSubmit,
-        disabled,
-        dispatchFields,
-        fields,
-        handleResponse,
-        method,
-        onSubmit,
-        onSuccess,
-        redirect,
-        router,
-        t,
-        i18n,
-        waitForAutocomplete,
-        formQueryParams
-    ]);
-    const getFields = useCallback(()=>contextRef.current.fields, []);
-    const getField = useCallback((path)=>contextRef.current.fields[path], []);
-    const getData = useCallback(()=>reduceFieldsToValues(contextRef.current.fields, true), []);
-    const getSiblingData = useCallback((path)=>getSiblingDataFunc(contextRef.current.fields, path), []);
-    const getDataByPath = useCallback((path)=>getDataByPathFunc(contextRef.current.fields, path), []);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const createFormData = useCallback((overrides = {})=>{
-        const data = reduceFieldsToValues(contextRef.current.fields, true);
-        const file = data?.file;
-        if (file) {
-            delete data.file;
+        const message = errorMessages?.[res.status] || res?.statusText || t('error:unknown');
+        errorToast(message);
+      }
+    } catch (err) {
+      console.error('Error submitting form', err) // eslint-disable-line no-console
+      ;
+      setProcessing(false);
+      setSubmitted(true);
+      setDisabled(false);
+      errorToast(err.message);
+    }
+  }, [beforeSubmit, action, disableSuccessStatus, disableValidationOnSubmit, disabled, dispatchFields, fields, handleResponse, method, onSubmit, onSuccess, redirect, router, t, i18n, waitForAutocomplete]);
+  const getFields = useCallback(() => contextRef.current.fields, []);
+  const getField = useCallback(path_0 => contextRef.current.fields[path_0], []);
+  const getData = useCallback(() => reduceFieldsToValues(contextRef.current.fields, true), []);
+  const getSiblingData = useCallback(path_1 => getSiblingDataFunc(contextRef.current.fields, path_1), []);
+  const getDataByPath = useCallback(path_2 => getDataByPathFunc(contextRef.current.fields, path_2), []);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const createFormData = useCallback((overrides_0 = {}) => {
+    const data_5 = reduceFieldsToValues(contextRef.current.fields, true);
+    const file = data_5?.file;
+    if (file) {
+      delete data_5.file;
+    }
+    const dataWithOverrides = {
+      ...data_5,
+      ...overrides_0
+    };
+    const dataToSerialize = {
+      _payload: JSON.stringify(dataWithOverrides),
+      file
+    };
+    // nullAsUndefineds is important to allow uploads and relationship fields to clear themselves
+    const formData_0 = serialize(dataToSerialize, {
+      indices: true,
+      nullsAsUndefineds: false
+    });
+    return formData_0;
+  }, []);
+  const reset = useCallback(async data_6 => {
+    abortAndIgnore(resetFormStateAbortControllerRef.current);
+    const controller = new AbortController();
+    resetFormStateAbortControllerRef.current = controller;
+    const docPreferences = await getDocPreferences();
+    const {
+      state: newState
+    } = await getFormState({
+      id,
+      collectionSlug,
+      data: data_6,
+      docPermissions,
+      docPreferences,
+      globalSlug,
+      operation,
+      renderAllFields: true,
+      schemaPath: collectionSlug ? collectionSlug : globalSlug,
+      signal: controller.signal
+    });
+    contextRef.current = {
+      ...initContextState
+    };
+    setModified(false);
+    dispatchFields({
+      type: 'REPLACE_STATE',
+      state: newState
+    });
+  }, [collectionSlug, dispatchFields, globalSlug, id, operation, getFormState, docPermissions, getDocPreferences]);
+  const replaceState = useCallback(state => {
+    contextRef.current = {
+      ...initContextState
+    };
+    setModified(false);
+    dispatchFields({
+      type: 'REPLACE_STATE',
+      state
+    });
+  }, [dispatchFields]);
+  const addFieldRow = useCallback(({
+    blockType,
+    path: path_3,
+    rowIndex: rowIndexArg,
+    subFieldState
+  }) => {
+    const newRows = getDataByPath(path_3) || [];
+    const rowIndex = rowIndexArg === undefined ? newRows.length : rowIndexArg;
+    // dispatch ADD_ROW that sets requiresRender: true and adds a blank row to local form state.
+    // This performs no form state request, as the debounced onChange effect will do that for us.
+    dispatchFields({
+      type: 'ADD_ROW',
+      blockType,
+      path: path_3,
+      rowIndex,
+      subFieldState
+    });
+  }, [dispatchFields, getDataByPath]);
+  const removeFieldRow = useCallback(({
+    path: path_4,
+    rowIndex: rowIndex_0
+  }) => {
+    dispatchFields({
+      type: 'REMOVE_ROW',
+      path: path_4,
+      rowIndex: rowIndex_0
+    });
+  }, [dispatchFields]);
+  const replaceFieldRow = useCallback(({
+    blockType: blockType_0,
+    path: path_5,
+    rowIndex: rowIndexArg_0,
+    subFieldState: subFieldState_0
+  }) => {
+    const currentRows = getDataByPath(path_5);
+    const rowIndex_1 = rowIndexArg_0 === undefined ? currentRows.length : rowIndexArg_0;
+    dispatchFields({
+      type: 'REPLACE_ROW',
+      blockType: blockType_0,
+      path: path_5,
+      rowIndex: rowIndex_1,
+      subFieldState: subFieldState_0
+    });
+  }, [dispatchFields, getDataByPath]);
+  useEffect(() => {
+    return () => {
+      abortAndIgnore(resetFormStateAbortControllerRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (initializingFromProps !== undefined) {
+      setInitializing(initializingFromProps);
+    }
+  }, [initializingFromProps]);
+  contextRef.current.submit = submit;
+  contextRef.current.getFields = getFields;
+  contextRef.current.getField = getField;
+  contextRef.current.getData = getData;
+  contextRef.current.getSiblingData = getSiblingData;
+  contextRef.current.getDataByPath = getDataByPath;
+  contextRef.current.validateForm = validateForm;
+  contextRef.current.createFormData = createFormData;
+  contextRef.current.setModified = setModified;
+  contextRef.current.setProcessing = setProcessing;
+  contextRef.current.setSubmitted = setSubmitted;
+  contextRef.current.disabled = disabled;
+  contextRef.current.setDisabled = setDisabled;
+  contextRef.current.formRef = formRef;
+  contextRef.current.reset = reset;
+  contextRef.current.replaceState = replaceState;
+  contextRef.current.dispatchFields = dispatchFields;
+  contextRef.current.addFieldRow = addFieldRow;
+  contextRef.current.removeFieldRow = removeFieldRow;
+  contextRef.current.replaceFieldRow = replaceFieldRow;
+  contextRef.current.uuid = uuid;
+  contextRef.current.initializing = initializing;
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    if (typeof disabledFromProps === 'boolean') {
+      setDisabled(disabledFromProps);
+    }
+  }, [disabledFromProps]);
+  useEffect(() => {
+    if (typeof submittedFromProps === 'boolean') {
+      setSubmitted(submittedFromProps);
+    }
+  }, [submittedFromProps]);
+  useEffect(() => {
+    if (initialState) {
+      contextRef.current = {
+        ...initContextState
+      };
+      dispatchFields({
+        type: 'REPLACE_STATE',
+        optimize: false,
+        state: initialState
+      });
+    }
+  }, [initialState, dispatchFields]);
+  useThrottledEffect(() => {
+    refreshCookie();
+  }, 15000, [fields]);
+  useEffect(() => {
+    contextRef.current = {
+      ...contextRef.current
+    } // triggers rerender of all components that subscribe to form
+    ;
+    setModified(false);
+  }, [locale]);
+  const classes = [className, baseClass].filter(Boolean).join(' ');
+  useIgnoredEffectDebounced(() => {
+    const executeOnChange = async () => {
+      if (Array.isArray(onChange)) {
+        let revalidatedFormState_0 = contextRef.current.fields;
+        for (const onChangeFn of onChange) {
+          // Edit view default onChange is in packages/ui/src/views/Edit/index.tsx. This onChange usually sends a form state request
+          revalidatedFormState_0 = await onChangeFn({
+            formState: deepCopyObjectSimpleWithoutReactComponents(contextRef.current.fields)
+          });
         }
-        const dataWithOverrides = {
-            ...data,
-            ...overrides
-        };
-        const dataToSerialize = {
-            _payload: JSON.stringify(dataWithOverrides),
-            file
-        };
-        // nullAsUndefineds is important to allow uploads and relationship fields to clear themselves
-        const formData = serialize(dataToSerialize, {
-            indices: true,
-            nullsAsUndefineds: false
-        });
-        return formData;
-    }, []);
-    const reset = useCallback(async (data)=>{
-        const newState = await getFormState({
-            apiRoute,
-            body: {
-                id,
-                collectionSlug,
-                data,
-                globalSlug,
-                operation,
-                schemaPath: collectionSlug || globalSlug
-            },
-            serverURL
-        });
-        contextRef.current = {
-            ...initContextState
-        };
-        setModified(false);
-        dispatchFields({
-            type: 'REPLACE_STATE',
-            state: newState
-        });
-    }, [
-        apiRoute,
-        collectionSlug,
-        dispatchFields,
-        globalSlug,
-        id,
-        operation,
-        serverURL
-    ]);
-    const replaceState = useCallback((state)=>{
-        contextRef.current = {
-            ...initContextState
-        };
-        setModified(false);
-        dispatchFields({
+        if (!revalidatedFormState_0) {
+          return;
+        }
+        const {
+          changed,
+          newState: newState_0
+        } = mergeServerFormState(contextRef.current.fields || {}, revalidatedFormState_0);
+        if (changed) {
+          dispatchFields({
             type: 'REPLACE_STATE',
-            state
-        });
-    }, [
-        dispatchFields
-    ]);
-    const getFieldStateBySchemaPath = useCallback(async ({ data, schemaPath })=>{
-        const fieldSchema = await getFormState({
-            apiRoute,
-            body: {
-                collectionSlug,
-                data,
-                globalSlug,
-                schemaPath
-            },
-            serverURL
-        });
-        return fieldSchema;
-    }, [
-        apiRoute,
-        collectionSlug,
-        globalSlug,
-        serverURL
-    ]);
-    const addFieldRow = useCallback(async ({ data, path, rowIndex, schemaPath })=>{
-        const subFieldState = await getFieldStateBySchemaPath({
-            data,
-            schemaPath
-        });
-        dispatchFields({
-            type: 'ADD_ROW',
-            blockType: data?.blockType,
-            path,
-            rowIndex,
-            subFieldState
-        });
-    }, [
-        getFieldStateBySchemaPath,
-        dispatchFields
-    ]);
-    const removeFieldRow = useCallback(({ path, rowIndex })=>{
-        dispatchFields({
-            type: 'REMOVE_ROW',
-            path,
-            rowIndex
-        });
-    }, [
-        dispatchFields
-    ]);
-    const replaceFieldRow = useCallback(async ({ data, path, rowIndex, schemaPath })=>{
-        const subFieldState = await getFieldStateBySchemaPath({
-            data,
-            schemaPath
-        });
-        dispatchFields({
-            type: 'REPLACE_ROW',
-            blockType: data?.blockType,
-            path,
-            rowIndex,
-            subFieldState
-        });
-    }, [
-        getFieldStateBySchemaPath,
-        dispatchFields
-    ]);
-    contextRef.current.submit = submit;
-    contextRef.current.getFields = getFields;
-    contextRef.current.getField = getField;
-    contextRef.current.getData = getData;
-    contextRef.current.getSiblingData = getSiblingData;
-    contextRef.current.getDataByPath = getDataByPath;
-    contextRef.current.validateForm = validateForm;
-    contextRef.current.createFormData = createFormData;
-    contextRef.current.setModified = setModified;
-    contextRef.current.setProcessing = setProcessing;
-    contextRef.current.setSubmitted = setSubmitted;
-    contextRef.current.disabled = disabled;
-    contextRef.current.setDisabled = setDisabled;
-    contextRef.current.formRef = formRef;
-    contextRef.current.reset = reset;
-    contextRef.current.replaceState = replaceState;
-    contextRef.current.dispatchFields = dispatchFields;
-    contextRef.current.addFieldRow = addFieldRow;
-    contextRef.current.removeFieldRow = removeFieldRow;
-    contextRef.current.replaceFieldRow = replaceFieldRow;
-    contextRef.current.uuid = uuid;
-    useEffect(()=>{
-        if (typeof submittedFromProps === 'boolean') setSubmitted(submittedFromProps);
-    }, [
-        submittedFromProps
-    ]);
-    useEffect(()=>{
-        if (initialState) {
-            contextRef.current = {
-                ...initContextState
-            };
-            dispatchFields({
-                type: 'REPLACE_STATE',
-                state: initialState
-            });
+            optimize: false,
+            state: newState_0
+          });
         }
-    }, [
-        initialState,
-        dispatchFields
-    ]);
-    useThrottledEffect(()=>{
-        refreshCookie();
-    }, 15000, [
-        fields
-    ]);
-    useEffect(()=>{
-        contextRef.current = {
-            ...contextRef.current
-        } // triggers rerender of all components that subscribe to form
-        ;
-        setModified(false);
-    }, [
-        locale
-    ]);
-    const classes = [
-        className,
-        baseClass
-    ].filter(Boolean).join(' ');
-    useDebouncedEffect(()=>{
-        const executeOnChange = async ()=>{
-            if (Array.isArray(onChange)) {
-                let revalidatedFormState = contextRef.current.fields;
-                for (const onChangeFn of onChange){
-                    revalidatedFormState = await onChangeFn({
-                        formState: revalidatedFormState
-                    });
-                }
-                const { changed, newState } = mergeServerFormState(contextRef.current.fields || {}, revalidatedFormState);
-                if (changed) {
-                    dispatchFields({
-                        type: 'REPLACE_STATE',
-                        optimize: false,
-                        state: newState
-                    });
-                }
-            }
-        };
-        if (modified) void executeOnChange();
-    }, 150, // Make sure we trigger this whenever modified changes (not just when `fields` changes), otherwise we will miss merging server form state for the first form update/onChange. Here's why:
-    // `fields` updates before `modified`, because setModified is in a setTimeout. So on the first change, modified is false, so we don't trigger the effect even though we should.
-    [
-        contextRef.current.fields,
-        dispatchFields,
-        onChange,
-        modified
-    ]);
-    const actionString = typeof action === 'string' ? `${action}${QueryString.stringify(formQueryParams, {
-        addQueryPrefix: true
-    })}` : '';
-    return /*#__PURE__*/ React.createElement("form", {
-        action: method ? actionString : action,
-        className: classes,
-        method: method,
-        noValidate: true,
-        onSubmit: (e)=>contextRef.current.submit({}, e),
-        ref: formRef
-    }, /*#__PURE__*/ React.createElement(FormContext.Provider, {
-        value: contextRef.current
-    }, /*#__PURE__*/ React.createElement(FormWatchContext.Provider, {
+      }
+    };
+    if (modified) {
+      void executeOnChange();
+    }
+  },
+  /*
+  Make sure we trigger this whenever modified changes (not just when `fields` changes),
+  otherwise we will miss merging server form state for the first form update/onChange.
+  Here's why:
+   `fields` updates before `modified`, because setModified is in a setTimeout.
+   So on the first change, modified is false, so we don't trigger the effect even though we should.
+  **/
+  [contextRef.current.fields, modified], [dispatchFields, onChange], {
+    delay: 250
+  });
+  return /*#__PURE__*/_jsx("form", {
+    action: typeof action === 'function' ? void action : action,
+    className: classes,
+    method: method,
+    noValidate: true,
+    onSubmit: e_0 => void contextRef.current.submit({}, e_0),
+    ref: formRef,
+    children: /*#__PURE__*/_jsx(FormContext.Provider, {
+      value: contextRef.current,
+      children: /*#__PURE__*/_jsx(FormWatchContext.Provider, {
         value: {
-            fields,
-            ...contextRef.current
-        }
-    }, /*#__PURE__*/ React.createElement(SubmittedContext.Provider, {
-        value: submitted
-    }, /*#__PURE__*/ React.createElement(ProcessingContext.Provider, {
-        value: processing
-    }, /*#__PURE__*/ React.createElement(ModifiedContext.Provider, {
-        value: modified
-    }, /*#__PURE__*/ React.createElement(FormFieldsContext.Provider, {
-        value: fieldsReducer
-    }, children)))))));
+          fields,
+          ...contextRef.current
+        },
+        children: /*#__PURE__*/_jsx(SubmittedContext.Provider, {
+          value: submitted,
+          children: /*#__PURE__*/_jsx(InitializingContext.Provider, {
+            value: !isMounted || isMounted && initializing,
+            children: /*#__PURE__*/_jsx(ProcessingContext.Provider, {
+              value: processing,
+              children: /*#__PURE__*/_jsx(ModifiedContext.Provider, {
+                value: modified,
+                children: /*#__PURE__*/_jsx(FormFieldsContext.Provider, {
+                  value: fieldsReducer,
+                  children: children
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
 };
 export { FormContext, FormFieldsContext, FormWatchContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useForm, useFormFields, useFormModified, useFormProcessing, useFormSubmitted, useWatchForm } from './context.js';
-
 //# sourceMappingURL=index.js.map