@rjsf/core 6.0.0-beta.9 → 6.0.0

package/lib/components/Form.js

@@ -1,19 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, createRef } from 'react';
-import { createSchemaUtils, deepEquals, getChangedFields, getTemplate, getUiOptions, isObject, mergeObjects, NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, createErrorHandler, unwrapErrorHandler, } from '@rjsf/utils';
-import _forEach from 'lodash-es/forEach.js';
+import { createSchemaUtils, deepEquals, ErrorSchemaBuilder, getChangedFields, getTemplate, getUiOptions, isObject, mergeObjects, NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, toFieldPathId, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, DEFAULT_ID_SEPARATOR, DEFAULT_ID_PREFIX, ERRORS_KEY, ID_KEY, } from '@rjsf/utils';
+import _cloneDeep from 'lodash-es/cloneDeep.js';
 import _get from 'lodash-es/get.js';
 import _isEmpty from 'lodash-es/isEmpty.js';
-import _isNil from 'lodash-es/isNil.js';
 import _pick from 'lodash-es/pick.js';
+import _set from 'lodash-es/set.js';
 import _toPath from 'lodash-es/toPath.js';
 import getDefaultRegistry from '../getDefaultRegistry.js';
+/** Internal only symbol used by the `reset()` function to indicate that a reset operation is happening */
+const IS_RESET = Symbol('reset');
+/** Converts the full `FormState` into the `IChangeEvent` version by picking out the public values
+ *
+ * @param state - The state of the form
+ * @param status - The status provided by the onSubmit
+ * @returns - The `IChangeEvent` for the state
+ */
+function toIChangeEvent(state, status) {
+    return {
+        ..._pick(state, ['schema', 'uiSchema', 'fieldPathId', 'schemaUtils', 'formData', 'edit', 'errors', 'errorSchema']),
+        ...(status !== undefined && { status }),
+    };
+}
 /** The `Form` component renders the outer form and all the fields defined in the `schema` */
 export default class Form extends Component {
     /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
      * provide any possible type here
      */
     formElement;
+    /** The list of pending changes
+     */
+    pendingChanges = [];
     /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
      * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
      * state construction.
@@ -25,9 +42,11 @@ export default class Form extends Component {
         if (!props.validator) {
             throw new Error('A validator is required for Form functionality to work');
         }
-        this.state = this.getStateFromProps(props, props.formData);
-        if (this.props.onChange && !deepEquals(this.state.formData, this.props.formData)) {
-            this.props.onChange(this.state);
+        const { formData: propsFormData, initialFormData, onChange } = props;
+        const formData = propsFormData ?? initialFormData;
+        this.state = this.getStateFromProps(props, formData, undefined, undefined, undefined, true);
+        if (onChange && !deepEquals(this.state.formData, formData)) {
+            onChange(toIChangeEvent(this.state));
         }
         this.formElement = createRef();
     }
@@ -51,16 +70,23 @@ export default class Form extends Component {
      */
     getSnapshotBeforeUpdate(prevProps, prevState) {
         if (!deepEquals(this.props, prevProps)) {
+            // Compare the previous props formData against the current props formData
             const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
+            // Compare the current props formData against the current state's formData to determine if the new props were the
+            // result of the onChange from the existing state formData
+            const stateDataChangedFields = getChangedFields(this.props.formData, this.state.formData);
             const isSchemaChanged = !deepEquals(prevProps.schema, this.props.schema);
             // When formData is not an object, getChangedFields returns an empty array.
             // In this case, deepEquals is most needed to check again.
             const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals(prevProps.formData, this.props.formData);
+            const isStateDataChanged = stateDataChangedFields.length > 0 || !deepEquals(this.state.formData, this.props.formData);
             const nextState = this.getStateFromProps(this.props, this.props.formData, 
             // If the `schema` has changed, we need to update the retrieved schema.
             // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
             //  match one of the subSchemas, the retrieved schema must be updated.
-            isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema, isSchemaChanged, formDataChangedFields);
+            isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema, isSchemaChanged, formDataChangedFields, 
+            // Skip live validation for this request if no form data has changed from the last state
+            !isStateDataChanged);
             const shouldUpdate = !deepEquals(nextState, prevState);
             return { nextState, shouldUpdate };
         }
@@ -84,7 +110,7 @@ export default class Form extends Component {
             if (!deepEquals(nextState.formData, this.props.formData) &&
                 !deepEquals(nextState.formData, prevState.formData) &&
                 this.props.onChange) {
-                this.props.onChange(nextState);
+                this.props.onChange(toIChangeEvent(nextState));
             }
             this.setState(nextState);
         }
@@ -98,16 +124,18 @@ export default class Form extends Component {
      * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
      * @param isSchemaChanged - A flag indicating whether the schema has changed.
      * @param formDataChangedFields - The changed fields of `formData`
+     * @param skipLiveValidate - Optional flag, if true, means that we are not running live validation
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
+    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = [], skipLiveValidate = false) {
         const state = this.state || {};
         const schema = 'schema' in props ? props.schema : this.props.schema;
+        const validator = 'validator' in props ? props.validator : this.props.validator;
         const uiSchema = ('uiSchema' in props ? props.uiSchema : this.props.uiSchema) || {};
+        const isUncontrolled = props.formData === undefined && this.props.formData === undefined;
         const edit = typeof inputFormData !== 'undefined';
         const liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
         const mustValidate = edit && !props.noValidate && liveValidate;
-        const rootSchema = schema;
         const experimental_defaultFormStateBehavior = 'experimental_defaultFormStateBehavior' in props
             ? props.experimental_defaultFormStateBehavior
             : this.props.experimental_defaultFormStateBehavior;
@@ -116,11 +144,20 @@ export default class Form extends Component {
             : this.props.experimental_customMergeAllOf;
         let schemaUtils = state.schemaUtils;
         if (!schemaUtils ||
-            schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema, experimental_defaultFormStateBehavior, experimental_customMergeAllOf)) {
-            schemaUtils = createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior, experimental_customMergeAllOf);
+            schemaUtils.doesSchemaUtilsDiffer(validator, schema, experimental_defaultFormStateBehavior, experimental_customMergeAllOf)) {
+            schemaUtils = createSchemaUtils(validator, schema, experimental_defaultFormStateBehavior, experimental_customMergeAllOf);
         }
-        const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-        const _retrievedSchema = this.updateRetrievedSchema(retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData));
+        const rootSchema = schemaUtils.getRootSchema();
+        // Compute the formData for getDefaultFormState() function based on the inputFormData, isUncontrolled and state
+        let defaultsFormData = inputFormData;
+        if (inputFormData === IS_RESET) {
+            defaultsFormData = undefined;
+        }
+        else if (inputFormData === undefined && isUncontrolled) {
+            defaultsFormData = state.formData;
+        }
+        const formData = schemaUtils.getDefaultFormState(rootSchema, defaultsFormData, false, state.initialDefaultsGenerated);
+        const _retrievedSchema = this.updateRetrievedSchema(retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData));
         const getCurrentErrors = () => {
             // If the `props.noValidate` option is set or the schema has changed, we reset the error state.
             if (props.noValidate || isSchemaChanged) {
@@ -141,43 +178,45 @@ export default class Form extends Component {
         let errorSchema;
         let schemaValidationErrors = state.schemaValidationErrors;
         let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
-        if (mustValidate) {
-            const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
-            errors = schemaValidation.errors;
+        // If we are skipping live validate, it means that the state has already been updated with live validation errors
+        if (mustValidate && !skipLiveValidate) {
+            const liveValidation = this.liveValidate(rootSchema, schemaUtils, state.errorSchema, formData, undefined, state.customErrors, retrievedSchema, 
             // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
-            // Else in the case where it hasn't changed, we merge 'state.errorSchema' with 'schemaValidation.errorSchema.' This done to display the raised field error.
-            if (retrievedSchema === undefined) {
-                errorSchema = schemaValidation.errorSchema;
-            }
-            else {
-                errorSchema = mergeObjects(this.state?.errorSchema, schemaValidation.errorSchema, 'preventDuplicates');
-            }
-            schemaValidationErrors = errors;
-            schemaValidationErrorSchema = errorSchema;
+            // Else in the case where it hasn't changed,
+            retrievedSchema !== undefined);
+            errors = liveValidation.errors;
+            errorSchema = liveValidation.errorSchema;
+            schemaValidationErrors = liveValidation.schemaValidationErrors;
+            schemaValidationErrorSchema = liveValidation.schemaValidationErrorSchema;
         }
         else {
             const currentErrors = getCurrentErrors();
             errors = currentErrors.errors;
             errorSchema = currentErrors.errorSchema;
-            if (formDataChangedFields.length > 0) {
+            // We only update the error schema for changed fields if mustValidate is false
+            if (formDataChangedFields.length > 0 && !mustValidate) {
                 const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
                     acc[key] = undefined;
                     return acc;
                 }, {});
                 errorSchema = schemaValidationErrorSchema = mergeObjects(currentErrors.errorSchema, newErrorSchema, 'preventDuplicates');
             }
-        }
-        if (props.extraErrors) {
-            const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
-        }
-        const idSchema = schemaUtils.toIdSchema(_retrievedSchema, uiSchema['ui:rootFieldId'], formData, props.idPrefix, props.idSeparator);
+            const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+            errors = mergedErrors.errors;
+            errorSchema = mergedErrors.errorSchema;
+        }
+        // Only store a new registry when the props cause a different one to be created
+        const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
+        const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
+        // Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
+        const fieldPathId = state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
+            ? state.fieldPathId
+            : toFieldPathId('', registry.globalFormOptions);
         const nextState = {
             schemaUtils,
-            schema,
+            schema: rootSchema,
             uiSchema,
-            idSchema,
+            fieldPathId,
             formData,
             edit,
             errors,
@@ -185,6 +224,8 @@ export default class Form extends Component {
             schemaValidationErrors,
             schemaValidationErrorSchema,
             retrievedSchema: _retrievedSchema,
+            initialDefaultsGenerated: true,
+            registry,
         };
         return nextState;
     }
@@ -195,31 +236,18 @@ export default class Form extends Component {
      * @returns - True if the component should be updated, false otherwise
      */
     shouldComponentUpdate(nextProps, nextState) {
-        return shouldRender(this, nextProps, nextState);
-    }
-    /** Gets the previously raised customValidate errors.
-     *
-     * @returns the previous customValidate errors
-     */
-    getPreviousCustomValidateErrors() {
-        const { customValidate, uiSchema } = this.props;
-        const prevFormData = this.state.formData;
-        let customValidateErrors = {};
-        if (typeof customValidate === 'function') {
-            const errorHandler = customValidate(prevFormData, createErrorHandler(prevFormData), uiSchema);
-            const userErrorSchema = unwrapErrorHandler(errorHandler);
-            customValidateErrors = userErrorSchema;
-        }
-        return customValidateErrors;
+        const { experimental_componentUpdateStrategy = 'customDeep' } = this.props;
+        return shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
     }
     /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
      * `schemaUtils` in the state), returning the results.
      *
      * @param formData - The new form data to validate
      * @param schema - The schema used to validate against
-     * @param altSchemaUtils - The alternate schemaUtils to use for validation
+     * @param [altSchemaUtils] - The alternate schemaUtils to use for validation
+     * @param [retrievedSchema] - An optionally retrieved schema for per
      */
-    validate(formData, schema = this.props.schema, altSchemaUtils, retrievedSchema) {
+    validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
         const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
         const { customValidate, transformErrors, uiSchema } = this.props;
         const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
@@ -230,14 +258,63 @@ export default class Form extends Component {
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
     renderErrors(registry) {
         const { errors, errorSchema, schema, uiSchema } = this.state;
-        const { formContext } = this.props;
         const options = getUiOptions(uiSchema);
         const ErrorListTemplate = getTemplate('ErrorListTemplate', registry, options);
         if (errors && errors.length) {
-            return (_jsx(ErrorListTemplate, { errors: errors, errorSchema: errorSchema || {}, schema: schema, uiSchema: uiSchema, formContext: formContext, registry: registry }));
+            return (_jsx(ErrorListTemplate, { errors: errors, errorSchema: errorSchema || {}, schema: schema, uiSchema: uiSchema, registry: registry }));
         }
         return null;
     }
+    /** Merges any `extraErrors` or `customErrors` into the given `schemaValidation` object, returning the result
+     *
+     * @param schemaValidation - The `ValidationData` object into which additional errors are merged
+     * @param [extraErrors] - The extra errors from the props
+     * @param [customErrors] - The customErrors from custom components
+     * @return - The `extraErrors` and `customErrors` merged into the `schemaValidation`
+     * @private
+     */
+    mergeErrors(schemaValidation, extraErrors, customErrors) {
+        let errorSchema = schemaValidation.errorSchema;
+        let errors = schemaValidation.errors;
+        if (extraErrors) {
+            const merged = validationDataMerge(schemaValidation, extraErrors);
+            errorSchema = merged.errorSchema;
+            errors = merged.errors;
+        }
+        if (customErrors) {
+            const merged = validationDataMerge(schemaValidation, customErrors.ErrorSchema, true);
+            errorSchema = merged.errorSchema;
+            errors = merged.errors;
+        }
+        return { errors, errorSchema };
+    }
+    /** Performs live validation and then updates and returns the errors and error schemas by potentially merging in
+     * `extraErrors` and `customErrors`.
+     *
+     * @param rootSchema - The `rootSchema` from the state
+     * @param schemaUtils - The `SchemaUtilsType` from the state
+     * @param originalErrorSchema - The original `ErrorSchema` from the state
+     * @param [formData] - The new form data to validate
+     * @param [extraErrors] - The extra errors from the props
+     * @param [customErrors] - The customErrors from custom components
+     * @param [retrievedSchema] - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`
+     * @param [mergeIntoOriginalErrorSchema=false] - Optional flag indicating whether we merge into original schema
+     * @returns - An object containing `errorSchema`, `errors`, `schemaValidationErrors` and `schemaValidationErrorSchema`
+     * @private
+     */
+    liveValidate(rootSchema, schemaUtils, originalErrorSchema, formData, extraErrors, customErrors, retrievedSchema, mergeIntoOriginalErrorSchema = false) {
+        const schemaValidation = this.validate(formData, rootSchema, schemaUtils, retrievedSchema);
+        const errors = schemaValidation.errors;
+        let errorSchema = schemaValidation.errorSchema;
+        // We merge 'originalErrorSchema' with 'schemaValidation.errorSchema.'; This done to display the raised field error.
+        if (mergeIntoOriginalErrorSchema) {
+            errorSchema = mergeObjects(originalErrorSchema, schemaValidation.errorSchema, 'preventDuplicates');
+        }
+        const schemaValidationErrors = errors;
+        const schemaValidationErrorSchema = errorSchema;
+        const mergedErrors = this.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
+        return { ...mergedErrors, schemaValidationErrors, schemaValidationErrorSchema };
+    }
     /** Returns the `formData` with only the elements specified in the `fields` list
      *
      * @param formData - The data for the `Form`
@@ -261,26 +338,28 @@ export default class Form extends Component {
      * @param [formData] - The form data to use while checking for empty objects/arrays
      */
     getFieldNames = (pathSchema, formData) => {
+        const formValueHasData = (value, isLeaf) => typeof value !== 'object' || _isEmpty(value) || (isLeaf && !_isEmpty(value));
         const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-            Object.keys(_obj).forEach((key) => {
-                if (typeof _obj[key] === 'object') {
+            const objKeys = Object.keys(_obj);
+            objKeys.forEach((key) => {
+                const data = _obj[key];
+                if (typeof data === 'object') {
                     const newPaths = paths.map((path) => [...path, key]);
                     // If an object is marked with additionalProperties, all its keys are valid
-                    if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
-                        acc.push(_obj[key][NAME_KEY]);
+                    if (data[RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[NAME_KEY] !== '') {
+                        acc.push(data[NAME_KEY]);
                     }
                     else {
-                        getAllPaths(_obj[key], acc, newPaths);
+                        getAllPaths(data, acc, newPaths);
                     }
                 }
-                else if (key === NAME_KEY && _obj[key] !== '') {
+                else if (key === NAME_KEY && data !== '') {
                     paths.forEach((path) => {
                         const formValue = _get(formData, path);
-                        // adds path to fieldNames if it points to a value
-                        // or an empty object/array
-                        if (typeof formValue !== 'object' ||
-                            _isEmpty(formValue) ||
-                            (Array.isArray(formValue) && formValue.every((val) => typeof val !== 'object'))) {
+                        const isLeaf = objKeys.length === 1;
+                        // adds path to fieldNames if it points to a value or an empty object/array which is not a leaf
+                        if (formValueHasData(formValue, isLeaf) ||
+                            (Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf)))) {
                             acc.push(path);
                         }
                     });
@@ -300,116 +379,133 @@ export default class Form extends Component {
         const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
         const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
         const fieldNames = this.getFieldNames(pathSchema, formData);
-        const newFormData = this.getUsedFormData(formData, fieldNames);
-        return newFormData;
+        return this.getUsedFormData(formData, fieldNames);
     };
-    // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
-    filterErrorsBasedOnSchema(schemaErrors, resolvedSchema, formData) {
-        const { retrievedSchema, schemaUtils } = this.state;
-        const _retrievedSchema = resolvedSchema ?? retrievedSchema;
-        const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, '', formData);
-        const fieldNames = this.getFieldNames(pathSchema, formData);
-        const filteredErrors = _pick(schemaErrors, fieldNames);
-        // If the root schema is of a primitive type, do not filter out the __errors
-        if (resolvedSchema?.type !== 'object' && resolvedSchema?.type !== 'array') {
-            filteredErrors.__errors = schemaErrors.__errors;
-        }
-        const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
-        // Filtering out the previous raised customValidate errors so that they are cleared when no longer valid.
-        const filterPreviousCustomErrors = (errors = [], prevCustomErrors) => {
-            if (errors.length === 0) {
-                return errors;
-            }
-            return errors.filter((error) => {
-                return !prevCustomErrors.includes(error);
-            });
-        };
-        // Removing undefined, null and empty errors.
-        const filterNilOrEmptyErrors = (errors, previousCustomValidateErrors = {}) => {
-            _forEach(errors, (errorAtKey, errorKey) => {
-                const prevCustomValidateErrorAtKey = previousCustomValidateErrors[errorKey];
-                if (_isNil(errorAtKey) || (Array.isArray(errorAtKey) && errorAtKey.length === 0)) {
-                    delete errors[errorKey];
-                }
-                else if (isObject(errorAtKey) &&
-                    isObject(prevCustomValidateErrorAtKey) &&
-                    Array.isArray(prevCustomValidateErrorAtKey?.__errors)) {
-                    // if previous customValidate error is an object and has __errors array, filter out the errors previous customValidate errors.
-                    errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
-                }
-                else if (typeof errorAtKey === 'object' && !Array.isArray(errorAtKey.__errors)) {
-                    filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
-                }
-            });
-            return errors;
-        };
-        return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
-    }
-    /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-     * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-     * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-     * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-     * callback will be called if specified with the updated state.
+    /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
+     * `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
+     * value in the field.
+     *
+     * @param fieldPath - Either a dotted path to the field or the `FieldPathList` to the field
+     * @param [newValue] - The new value for the field
+     */
+    setFieldValue = (fieldPath, newValue) => {
+        const { registry } = this.state;
+        const path = Array.isArray(fieldPath) ? fieldPath : fieldPath.split('.');
+        const fieldPathId = toFieldPathId('', registry.globalFormOptions, path);
+        this.onChange(newValue, path, undefined, fieldPathId[ID_KEY]);
+    };
+    /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
+     * the array only contains a single pending change.
      *
-     * @param formData - The new form data from a change to a field
-     * @param newErrorSchema - The new `ErrorSchema` based on the field change
-     * @param id - The id of the field that caused the change
+     * @param newValue - The new form data from a change to a field
+     * @param path - The path to the change into which to set the formData
+     * @param [newErrorSchema] - The new `ErrorSchema` based on the field change
+     * @param [id] - The id of the field that caused the change
      */
-    onChange = (formData, newErrorSchema, id) => {
+    onChange = (newValue, path, newErrorSchema, id) => {
+        this.pendingChanges.push({ newValue, path, newErrorSchema, id });
+        if (this.pendingChanges.length === 1) {
+            this.processPendingChange();
+        }
+    };
+    /** Function to handle changes made to a field in the `Form`. This handler gets the first change from the
+     * `pendingChanges` list, containing the `newValue` for the `formData` and the `path` at which the `newValue` is to be
+     * updated, along with a new, optional `ErrorSchema` for that same `path` and potentially the `id` of the field being
+     * changed. It will first update the `formData` with any missing default fields and then, if `omitExtraData` and
+     * `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not in a form field. Then, the
+     * resulting `formData` will be validated if required. The state will be updated with the new updated (potentially
+     * filtered) `formData`, any errors that resulted from validation. Finally the `onChange` callback will be called, if
+     * specified, with the updated state and the `processPendingChange()` function is called again.
+     */
+    processPendingChange() {
+        if (this.pendingChanges.length === 0) {
+            return;
+        }
+        const { newValue, path, id } = this.pendingChanges[0];
+        const { newErrorSchema } = this.pendingChanges[0];
         const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-        const { schemaUtils, schema } = this.state;
+        const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
+        let { customErrors, errorSchema: originalErrorSchema } = this.state;
+        const rootPathId = fieldPathId.path[0] || '';
+        const isRootPath = !path || path.length === 0 || (path.length === 1 && path[0] === rootPathId);
         let retrievedSchema = this.state.retrievedSchema;
+        let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
         if (isObject(formData) || Array.isArray(formData)) {
-            const newState = this.getStateFromProps(this.props, formData);
+            if (!isRootPath) {
+                // If the newValue is not on the root path, then set it into the form data
+                _set(formData, path, newValue);
+            }
+            // Pass true to skip live validation in `getStateFromProps()` since we will do it a bit later
+            const newState = this.getStateFromProps(this.props, formData, undefined, undefined, undefined, true);
             formData = newState.formData;
             retrievedSchema = newState.retrievedSchema;
         }
-        const mustValidate = !noValidate && liveValidate;
+        const mustValidate = !noValidate && (liveValidate === true || liveValidate === 'onChange');
         let state = { formData, schema };
         let newFormData = formData;
-        if (omitExtraData === true && liveOmit === true) {
+        if (omitExtraData === true && (liveOmit === true || liveOmit === 'onChange')) {
             newFormData = this.omitExtraData(formData);
             state = {
                 formData: newFormData,
             };
         }
-        if (mustValidate) {
-            const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-            let errors = schemaValidation.errors;
-            let errorSchema = schemaValidation.errorSchema;
-            const schemaValidationErrors = errors;
-            const schemaValidationErrorSchema = errorSchema;
-            if (extraErrors) {
-                const merged = validationDataMerge(schemaValidation, extraErrors);
-                errorSchema = merged.errorSchema;
-                errors = merged.errors;
+        if (newErrorSchema) {
+            // First check to see if there is an existing validation error on this path...
+            // @ts-expect-error TS2590, because getting from the error schema is confusing TS
+            const oldValidationError = !isRootPath ? _get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
+            // If there is an old validation error for this path, assume we are updating it directly
+            if (!_isEmpty(oldValidationError)) {
+                // Update the originalErrorSchema "in place" or replace it if it is the root
+                if (!isRootPath) {
+                    _set(originalErrorSchema, path, newErrorSchema);
+                }
+                else {
+                    originalErrorSchema = newErrorSchema;
+                }
             }
-            // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
-            if (newErrorSchema) {
-                const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-                errorSchema = mergeObjects(errorSchema, filteredErrors, 'preventDuplicates');
+            else {
+                if (!customErrors) {
+                    customErrors = new ErrorSchemaBuilder();
+                }
+                if (isRootPath) {
+                    const errors = _get(newErrorSchema, ERRORS_KEY);
+                    if (errors) {
+                        // only set errors when there are some
+                        customErrors.setErrors(errors);
+                    }
+                }
+                else {
+                    _set(customErrors.ErrorSchema, path, newErrorSchema);
+                }
             }
-            state = {
-                formData: newFormData,
-                errors,
-                errorSchema,
-                schemaValidationErrors,
-                schemaValidationErrorSchema,
-            };
+        }
+        else if (customErrors && _get(customErrors.ErrorSchema, [...path, ERRORS_KEY])) {
+            // If we have custom errors and the path has an error, then we need to clear it
+            customErrors.clearErrors(path);
+        }
+        // If there are pending changes in the queue, skip live validation since it will happen with the last change
+        if (mustValidate && this.pendingChanges.length === 1) {
+            const liveValidation = this.liveValidate(schema, schemaUtils, originalErrorSchema, newFormData, extraErrors, customErrors, retrievedSchema);
+            state = { formData: newFormData, ...liveValidation, customErrors };
         }
         else if (!noValidate && newErrorSchema) {
-            const errorSchema = extraErrors
-                ? mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates')
-                : newErrorSchema;
+            // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
+            const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
             state = {
                 formData: newFormData,
-                errorSchema: errorSchema,
-                errors: toErrorList(errorSchema),
+                ...mergedErrors,
+                customErrors,
             };
         }
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-    };
+        this.setState(state, () => {
+            if (onChange) {
+                onChange(toIChangeEvent({ ...this.state, ...state }), id);
+            }
+            // Now remove the change we just completed and call this again
+            this.pendingChanges.shift();
+            this.processPendingChange();
+        });
+    }
     /**
      * If the retrievedSchema has changed the new retrievedSchema is returned.
      * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -430,8 +526,9 @@ export default class Form extends Component {
      *
      */
     reset = () => {
-        const { onChange } = this.props;
-        const newState = this.getStateFromProps(this.props, undefined);
+        // Cast the IS_RESET symbol to T to avoid type issues, we use this symbol to detect reset mode
+        const { formData: propsFormData, initialFormData = IS_RESET, onChange } = this.props;
+        const newState = this.getStateFromProps(this.props, propsFormData ?? initialFormData, undefined, undefined, undefined, true);
         const newFormData = newState.formData;
         const state = {
             formData: newFormData,
@@ -439,20 +536,51 @@ export default class Form extends Component {
             errors: [],
             schemaValidationErrors: [],
             schemaValidationErrorSchema: {},
+            initialDefaultsGenerated: false,
+            customErrors: undefined,
         };
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+        this.setState(state, () => onChange && onChange(toIChangeEvent({ ...this.state, ...state })));
     };
     /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-     * was provided.
+     * was provided. Also runs any live validation and/or live omit operations if the flags indicate they should happen
+     * during `onBlur`.
      *
      * @param id - The unique `id` of the field that was blurred
      * @param data - The data associated with the field that was blurred
      */
     onBlur = (id, data) => {
-        const { onBlur } = this.props;
+        const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
         if (onBlur) {
             onBlur(id, data);
         }
+        if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
+            const { onChange, extraErrors } = this.props;
+            const { formData } = this.state;
+            let newFormData = formData;
+            let state = { formData: newFormData };
+            if (omitExtraData === true && liveOmit === 'onBlur') {
+                newFormData = this.omitExtraData(formData);
+                state = { formData: newFormData };
+            }
+            if (liveValidate === 'onBlur') {
+                const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+                const liveValidation = this.liveValidate(schema, schemaUtils, errorSchema, newFormData, extraErrors, customErrors, retrievedSchema);
+                state = { formData: newFormData, ...liveValidation, customErrors };
+            }
+            const hasChanges = Object.keys(state)
+                // Filter out `schemaValidationErrors` and `schemaValidationErrorSchema` since they aren't IChangeEvent props
+                .filter((key) => !key.startsWith('schemaValidation'))
+                .some((key) => {
+                const oldData = _get(this.state, key);
+                const newData = _get(state, key);
+                return !deepEquals(oldData, newData);
+            });
+            this.setState(state, () => {
+                if (onChange && hasChanges) {
+                    onChange(toIChangeEvent({ ...this.state, ...state }), id);
+                }
+            });
+        }
     };
     /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
      * was provided.
@@ -498,32 +626,50 @@ export default class Form extends Component {
                 schemaValidationErrorSchema: {},
             }, () => {
                 if (onSubmit) {
-                    onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
+                    onSubmit(toIChangeEvent({ ...this.state, formData: newFormData }, 'submitted'), event);
                 }
             });
         }
     };
-    /** Returns the registry for the form */
-    getRegistry() {
-        const { translateString: customTranslateString, uiSchema = {} } = this.props;
-        const { schemaUtils } = this.state;
+    /** Extracts the `GlobalFormOptions` from the given Form `props`
+     *
+     * @param props - The form props to extract the global form options from
+     * @returns - The `GlobalFormOptions` from the props
+     * @private
+     */
+    getGlobalFormOptions(props) {
+        const { uiSchema = {}, experimental_componentUpdateStrategy, idSeparator = DEFAULT_ID_SEPARATOR, idPrefix = DEFAULT_ID_PREFIX, nameGenerator, useFallbackUiForUnsupportedType = false, } = props;
+        const rootFieldId = uiSchema['ui:rootFieldId'];
+        // Omit any options that are undefined or null
+        return {
+            idPrefix: rootFieldId || idPrefix,
+            idSeparator,
+            useFallbackUiForUnsupportedType,
+            ...(experimental_componentUpdateStrategy !== undefined && { experimental_componentUpdateStrategy }),
+            ...(nameGenerator !== undefined && { nameGenerator }),
+        };
+    }
+    /** Computed the registry for the form using the given `props`, `schema` and `schemaUtils` */
+    getRegistry(props, schema, schemaUtils) {
+        const { translateString: customTranslateString, uiSchema = {} } = props;
         const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry();
         return {
-            fields: { ...fields, ...this.props.fields },
+            fields: { ...fields, ...props.fields },
             templates: {
                 ...templates,
-                ...this.props.templates,
+                ...props.templates,
                 ButtonTemplates: {
                     ...templates.ButtonTemplates,
-                    ...this.props.templates?.ButtonTemplates,
+                    ...props.templates?.ButtonTemplates,
                 },
             },
-            widgets: { ...widgets, ...this.props.widgets },
-            rootSchema: this.props.schema,
-            formContext: this.props.formContext || formContext,
+            widgets: { ...widgets, ...props.widgets },
+            rootSchema: schema,
+            formContext: props.formContext || formContext,
             schemaUtils,
             translateString: customTranslateString || translateString,
             globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
+            globalFormOptions: this.getGlobalFormOptions(props),
         };
     }
     /** Provides a function that can be used to programmatically submit the `Form` */
@@ -640,9 +786,8 @@ export default class Form extends Component {
      * needed along with the submit button or any children of the form.
      */
     render() {
-        const { children, id, idPrefix, idSeparator, className = '', tagName, name, method, target, action, autoComplete, enctype, acceptCharset, noHtml5Validate = false, disabled, readonly, formContext, showErrorList = 'top', _internalFormWrapper, } = this.props;
-        const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
-        const registry = this.getRegistry();
+        const { children, id, className = '', tagName, name, method, target, action, autoComplete, enctype, acceptCharset, noHtml5Validate = false, disabled, readonly, showErrorList = 'top', _internalFormWrapper, } = this.props;
+        const { schema, uiSchema, formData, errorSchema, fieldPathId, registry } = this.state;
         const { SchemaField: _SchemaField } = registry.fields;
         const { SubmitButton } = registry.templates.ButtonTemplates;
         // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
@@ -655,6 +800,6 @@ export default class Form extends Component {
             submitOptions = { ...submitOptions, props: { ...submitOptions.props, disabled: true } };
         }
         const submitUiSchema = { [UI_OPTIONS_KEY]: { [SUBMIT_BTN_OPTIONS_KEY]: submitOptions } };
-        return (_jsxs(FormTag, { className: className ? className : 'rjsf', id: id, name: name, method: method, target: target, action: action, autoComplete: autoComplete, encType: enctype, acceptCharset: acceptCharset, noValidate: noHtml5Validate, onSubmit: this.onSubmit, as: as, ref: this.formElement, children: [showErrorList === 'top' && this.renderErrors(registry), _jsx(_SchemaField, { name: '', schema: schema, uiSchema: uiSchema, errorSchema: errorSchema, idSchema: idSchema, idPrefix: idPrefix, idSeparator: idSeparator, formContext: formContext, formData: formData, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, registry: registry, disabled: disabled, readonly: readonly }), children ? children : _jsx(SubmitButton, { uiSchema: submitUiSchema, registry: registry }), showErrorList === 'bottom' && this.renderErrors(registry)] }));
+        return (_jsxs(FormTag, { className: className ? className : 'rjsf', id: id, name: name, method: method, target: target, action: action, autoComplete: autoComplete, encType: enctype, acceptCharset: acceptCharset, noValidate: noHtml5Validate, onSubmit: this.onSubmit, as: as, ref: this.formElement, children: [showErrorList === 'top' && this.renderErrors(registry), _jsx(_SchemaField, { name: '', schema: schema, uiSchema: uiSchema, errorSchema: errorSchema, fieldPathId: fieldPathId, formData: formData, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, registry: registry, disabled: disabled, readonly: readonly }), children ? children : _jsx(SubmitButton, { uiSchema: submitUiSchema, registry: registry }), showErrorList === 'bottom' && this.renderErrors(registry)] }));
     }
 }