@rjsf/core 6.0.0-beta.20 → 6.0.0-beta.21

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset'), require('@rjsf/validator-ajv8')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset', '@rjsf/validator-ajv8'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._cloneDeep, global._forEach, global.get2, global.isEmpty, global._isNil, global._pick, global.set, global._toPath, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.unset, global.validator));
-})(this, (function (exports, react, utils, _cloneDeep, _forEach, get2, isEmpty, _isNil, _pick, set, _toPath, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, unset, validator) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset'), require('@rjsf/validator-ajv8')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset', '@rjsf/validator-ajv8'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global.cloneDeep, global.get2, global.isEmpty, global._pick, global.set, global._toPath, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.unset, global.validator));
+})(this, (function (exports, react, utils, cloneDeep, get2, isEmpty, _pick, set, _toPath, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, unset, validator) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
@@ -29,7 +29,7 @@
      */
     constructor(props) {
       super(props);
-      const { formData = [] } = props;
+      const { formData } = props;
       const keyedFormData = generateKeyedFormData(formData);
       this.state = {
         keyedFormData,
@@ -206,7 +206,7 @@
         }
         const newKeyedFormDataRow = {
           key: generateRowId(),
-          item: _cloneDeep(keyedFormData[index].item)
+          item: cloneDeep(keyedFormData[index].item)
         };
         const newKeyedFormData = [...keyedFormData];
         if (index !== void 0) {
@@ -404,15 +404,21 @@
       } = this.props;
       const { keyedFormData } = this.state;
       const fieldTitle = schema.title || title || name;
-      const { schemaUtils, formContext, globalFormOptions } = registry;
+      const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
+      const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
       const uiOptions = utils.getUiOptions(uiSchema);
       const _schemaItems = isObject(schema.items) ? schema.items : {};
       const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
       const formData = keyedToPlainFormData(this.state.keyedFormData);
-      const canAdd = this.canAddItem(formData);
+      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+      const hasFormData = utils.isFormDataAvailable(this.props.formData);
+      const canAdd = this.canAddItem(formData) && (!renderOptionalField || hasFormData);
+      const actualFormData = hasFormData ? keyedFormData : [];
+      const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props }) : void 0;
       const arrayProps = {
         canAdd,
-        items: keyedFormData.map((keyedItem, index) => {
+        items: actualFormData.map((keyedItem, index) => {
           const { key, item } = keyedItem;
           const itemCast = item;
           const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
@@ -439,7 +445,7 @@
             totalItems: keyedFormData.length
           });
         }),
-        className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
+        className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`,
         disabled,
         fieldPathId,
         uiSchema,
@@ -450,7 +456,8 @@
         title: fieldTitle,
         formData,
         rawErrors,
-        registry
+        registry,
+        optionalDataControl
       };
       const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
       return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
@@ -613,7 +620,7 @@
       const {
         schema,
         uiSchema = {},
-        formData = [],
+        formData,
         errorSchema,
         fieldPathId,
         name,
@@ -627,28 +634,33 @@
         onFocus,
         rawErrors
       } = this.props;
-      const { keyedFormData } = this.state;
       let { formData: items = [] } = this.props;
+      const { keyedFormData } = this.state;
       const fieldTitle = schema.title || title || name;
       const uiOptions = utils.getUiOptions(uiSchema);
-      const { schemaUtils, formContext, globalFormOptions } = registry;
+      const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
+      const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+      const hasFormData = utils.isFormDataAvailable(formData);
       const _schemaItems = isObject(schema.items) ? schema.items : [];
       const itemSchemas = _schemaItems.map(
-        (item, index) => schemaUtils.retrieveSchema(item, formData[index])
+        (item, index) => schemaUtils.retrieveSchema(item, items[index])
       );
       const additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
-      if (!items || items.length < itemSchemas.length) {
-        items = items || [];
+      if (items.length < itemSchemas.length) {
         items = items.concat(new Array(itemSchemas.length - items.length));
       }
-      const canAdd = this.canAddItem(items) && !!additionalSchema;
+      const actualFormData = hasFormData ? keyedFormData : [];
+      const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props }) : void 0;
+      const canAdd = this.canAddItem(items) && !!additionalSchema && (!renderOptionalField || hasFormData);
       const arrayProps = {
         canAdd,
-        className: "rjsf-field rjsf-field-array rjsf-field-array-fixed-items",
+        className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
         disabled,
         fieldPathId,
         formData,
-        items: keyedFormData.map((keyedItem, index) => {
+        items: actualFormData.map((keyedItem, index) => {
           const { key, item } = keyedItem;
           const itemCast = item;
           const additional = index >= itemSchemas.length;
@@ -694,7 +706,8 @@
         uiSchema,
         title: fieldTitle,
         errorSchema,
-        rawErrors
+        rawErrors,
+        optionalDataControl
       };
       const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
       return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
@@ -1177,13 +1190,8 @@
      */
     onFieldChange = (dottedPath) => {
       return (value, path, errSchema, id) => {
-        const { onChange, errorSchema } = this.props;
-        let newErrorSchema = errorSchema;
-        if (errSchema && errorSchema) {
-          newErrorSchema = _cloneDeep(errorSchema);
-          set(newErrorSchema, dottedPath, errSchema);
-        }
-        onChange(value, path, newErrorSchema, id);
+        const { onChange } = this.props;
+        onChange(value, path, errSchema, id);
       };
     };
     /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
@@ -1982,23 +1990,28 @@
         title
       } = this.props;
       const { fields: fields2, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
-      const { SchemaField: SchemaField2 } = fields2;
-      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      const { OptionalDataControlsField: OptionalDataControlsField2, SchemaField: SchemaField2 } = fields2;
+      const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
       const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
       const { properties: schemaProperties = {} } = schema;
       const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
       const description = uiOptions.description ?? schema.description;
-      let orderedProperties;
-      try {
-        const properties = Object.keys(schemaProperties);
-        orderedProperties = utils.orderProperties(properties, uiOptions.order);
-      } catch (err) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
-        ] });
+      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+      const hasFormData = utils.isFormDataAvailable(formData);
+      let orderedProperties = [];
+      if (!renderOptionalField || hasFormData) {
+        try {
+          const properties = Object.keys(schemaProperties);
+          orderedProperties = utils.orderProperties(properties, uiOptions.order);
+        } catch (err) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
+          ] });
+        }
       }
       const Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
+      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props, schema }) : void 0;
       const templateProps = {
         // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
         title: uiOptions.label === false ? "" : templateTitle,
@@ -2049,12 +2062,71 @@
         schema,
         formData,
         formContext,
-        registry
+        registry,
+        optionalDataControl,
+        className: renderOptionalField ? "rjsf-optional-object-field" : void 0
       };
       return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...templateProps, onAddClick: this.handleAddClick });
     }
   };
   var ObjectField_default = ObjectField;
+  function OptionalDataControlsField(props) {
+    const {
+      schema,
+      uiSchema = {},
+      formData,
+      disabled = false,
+      readonly = false,
+      onChange,
+      errorSchema,
+      fieldPathId,
+      registry
+    } = props;
+    const { globalUiOptions = {}, schemaUtils, translateString } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const OptionalDataControlsTemplate2 = utils.getTemplate(
+      "OptionalDataControlsTemplate",
+      registry,
+      uiOptions
+    );
+    const hasFormData = utils.isFormDataAvailable(formData);
+    let id;
+    let label;
+    let onAddClick;
+    let onRemoveClick;
+    if (disabled || readonly) {
+      id = utils.optionalControlsId(fieldPathId, "Msg");
+      label = hasFormData ? void 0 : translateString(utils.TranslatableString.OptionalObjectEmptyMsg);
+    } else {
+      const labelEnum = hasFormData ? utils.TranslatableString.OptionalObjectRemove : utils.TranslatableString.OptionalObjectAdd;
+      label = translateString(labelEnum);
+      if (hasFormData) {
+        id = utils.optionalControlsId(fieldPathId, "Remove");
+        onRemoveClick = () => onChange(void 0, fieldPathId.path, errorSchema);
+      } else {
+        id = utils.optionalControlsId(fieldPathId, "Add");
+        onAddClick = () => {
+          let newFormData = schemaUtils.getDefaultFormState(schema, formData, "excludeObjectChildren");
+          if (newFormData === void 0) {
+            newFormData = utils.getSchemaType(schema) === "array" ? [] : {};
+          }
+          onChange(newFormData, fieldPathId.path, errorSchema);
+        };
+      }
+    }
+    return label && /* @__PURE__ */ jsxRuntime.jsx(
+      OptionalDataControlsTemplate2,
+      {
+        id,
+        registry,
+        schema,
+        uiSchema,
+        label,
+        onAddClick,
+        onRemoveClick
+      }
+    );
+  }
   var COMPONENT_TYPES = {
     array: "ArrayField",
     boolean: "BooleanField",
@@ -2368,12 +2440,12 @@
   }
   var StringField_default = StringField;
   function NullField(props) {
-    const { name, formData, onChange } = props;
+    const { formData, onChange, fieldPathId } = props;
     react.useEffect(() => {
       if (formData === void 0) {
-        onChange(null, [name]);
+        onChange(null, fieldPathId.path);
       }
-    }, [name, formData, onChange]);
+    }, [fieldPathId, formData, onChange]);
     return null;
   }
   var NullField_default = NullField;
@@ -2391,6 +2463,7 @@
       NumberField: NumberField_default,
       ObjectField: ObjectField_default,
       OneOfField: MultiSchemaField_default,
+      OptionalDataControlsField,
       SchemaField: SchemaField_default,
       StringField: StringField_default,
       NullField: NullField_default
@@ -2525,6 +2598,7 @@
       fieldPathId,
       uiSchema,
       items,
+      optionalDataControl,
       onAddClick,
       readonly,
       registry,
@@ -2548,6 +2622,7 @@
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -2560,7 +2635,8 @@
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2573,6 +2649,7 @@
           registry
         }
       ),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
@@ -2588,7 +2665,7 @@
     ] });
   }
   function ArrayFieldTitleTemplate(props) {
-    const { fieldPathId, title, schema, uiSchema, required, registry } = props;
+    const { fieldPathId, title, schema, uiSchema, required, registry, optionalDataControl } = props;
     const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
     const { label: displayLabel = true } = options;
     if (!title || !displayLabel) {
@@ -2607,7 +2684,8 @@
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl
       }
     );
   }
@@ -2723,6 +2801,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
   function AddButton({
+    id,
     className,
     onClick,
     disabled,
@@ -2732,6 +2811,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       IconButton,
       {
+        id,
         iconType: "info",
         icon: "plus",
         className: "btn-add col-xs-12",
@@ -2851,11 +2931,13 @@
   }
   function ObjectFieldTemplate(props) {
     const {
+      className,
       description,
       disabled,
       formData,
       fieldPathId,
       onAddClick,
+      optionalDataControl,
       properties,
       readonly,
       registry,
@@ -2871,10 +2953,11 @@
       registry,
       options
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
-    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: fieldPathId.$id, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, id: fieldPathId.$id, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
@@ -2883,7 +2966,8 @@
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2896,6 +2980,7 @@
           registry
         }
       ),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map((prop) => prop.content),
       utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
@@ -2910,12 +2995,42 @@
       )
     ] });
   }
+  function OptionalDataControlsTemplate(props) {
+    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    if (onAddClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton,
+        {
+          id,
+          registry,
+          icon: "plus",
+          className: "rjsf-add-optional-data btn-sm",
+          onClick: onAddClick,
+          title: label
+        }
+      );
+    } else if (onRemoveClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton,
+        {
+          id,
+          registry,
+          icon: "remove",
+          className: "rjsf-remove-optional-data btn-sm",
+          onClick: onRemoveClick,
+          title: label
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
+  }
   var REQUIRED_FIELD_SYMBOL2 = "*";
   function TitleField(props) {
-    const { id, title, required } = props;
+    const { id, title, required, optionalDataControl } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs("legend", { id, children: [
       title,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 })
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 }),
+      optionalDataControl && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pull-right", style: { marginBottom: "2px" }, children: optionalDataControl })
     ] });
   }
   function UnsupportedField(props) {
@@ -3015,6 +3130,7 @@
       GridTemplate,
       MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       UnsupportedFieldTemplate: UnsupportedField_default,
       WrapIfAdditionalTemplate
@@ -3934,7 +4050,12 @@
         );
       }
       const rootSchema = schemaUtils.getRootSchema();
-      const formData = schemaUtils.getDefaultFormState(rootSchema, inputFormData);
+      const formData = schemaUtils.getDefaultFormState(
+        rootSchema,
+        inputFormData,
+        false,
+        state.initialDefaultsGenerated
+      );
       const _retrievedSchema = this.updateRetrievedSchema(
         retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
       );
@@ -3957,19 +4078,22 @@
       let schemaValidationErrors = state.schemaValidationErrors;
       let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
       if (mustValidate && !skipLiveValidate) {
-        const schemaValidation = this.validate(formData, rootSchema, schemaUtils, _retrievedSchema);
-        errors = schemaValidation.errors;
-        if (retrievedSchema === void 0) {
-          errorSchema = schemaValidation.errorSchema;
-        } else {
-          errorSchema = utils.mergeObjects(
-            this.state?.errorSchema,
-            schemaValidation.errorSchema,
-            "preventDuplicates"
-          );
-        }
-        schemaValidationErrors = errors;
-        schemaValidationErrorSchema = errorSchema;
+        const liveValidation = this.liveValidate(
+          rootSchema,
+          schemaUtils,
+          state.errorSchema,
+          formData,
+          void 0,
+          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,
+          retrievedSchema !== void 0
+        );
+        errors = liveValidation.errors;
+        errorSchema = liveValidation.errorSchema;
+        schemaValidationErrors = liveValidation.schemaValidationErrors;
+        schemaValidationErrorSchema = liveValidation.schemaValidationErrorSchema;
       } else {
         const currentErrors = getCurrentErrors();
         errors = currentErrors.errors;
@@ -3988,11 +4112,9 @@
             "preventDuplicates"
           );
         }
-      }
-      if (props.extraErrors) {
-        const merged = utils.validationDataMerge({ errorSchema, errors }, props.extraErrors);
-        errorSchema = merged.errorSchema;
-        errors = merged.errors;
+        const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+        errors = mergedErrors.errors;
+        errorSchema = mergedErrors.errorSchema;
       }
       const fieldPathId = utils.toFieldPathId("", this.getGlobalFormOptions(this.props));
       const nextState = {
@@ -4006,7 +4128,8 @@
         errorSchema,
         schemaValidationErrors,
         schemaValidationErrorSchema,
-        retrievedSchema: _retrievedSchema
+        retrievedSchema: _retrievedSchema,
+        initialDefaultsGenerated: true
       };
       return nextState;
     }
@@ -4020,20 +4143,6 @@
       const { experimental_componentUpdateStrategy = "customDeep" } = this.props;
       return utils.shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
     }
-    /** 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, utils.createErrorHandler(prevFormData), uiSchema);
-        customValidateErrors = utils.unwrapErrorHandler(errorHandler);
-      }
-      return customValidateErrors;
-    }
     /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
      * `schemaUtils` in the state), returning the results.
      *
@@ -4067,6 +4176,59 @@
       }
       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 = utils.validationDataMerge(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+      if (customErrors) {
+        const merged = utils.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;
+      if (mergeIntoOriginalErrorSchema) {
+        errorSchema = utils.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`
@@ -4126,51 +4288,6 @@
       const fieldNames = this.getFieldNames(pathSchema, formData);
       return this.getUsedFormData(formData, fieldNames);
     };
-    /** Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
-     *
-     * @param schemaErrors - The schema errors to filter
-     * @param [resolvedSchema] - An optionally resolved schema to use for performance reasons
-     * @param [formData] - The formData to help filter errors
-     * @private
-     */
-    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 (resolvedSchema?.type !== "object" && resolvedSchema?.type !== "array") {
-        filteredErrors[utils.ERRORS_KEY] = schemaErrors[utils.ERRORS_KEY];
-      }
-      const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
-      const filterPreviousCustomErrors = (errors = [], prevCustomErrors) => {
-        if (errors.length === 0) {
-          return errors;
-        }
-        return errors.filter((error) => {
-          return !prevCustomErrors.includes(error);
-        });
-      };
-      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 (utils.isObject(errorAtKey) && utils.isObject(prevCustomValidateErrorAtKey) && Array.isArray(prevCustomValidateErrorAtKey?.[utils.ERRORS_KEY])) {
-            errors[errorKey] = {
-              [utils.ERRORS_KEY]: filterPreviousCustomErrors(
-                errorAtKey[utils.ERRORS_KEY],
-                prevCustomValidateErrorAtKey?.[utils.ERRORS_KEY]
-              )
-            };
-          } else if (typeof errorAtKey === "object" && !Array.isArray(errorAtKey[utils.ERRORS_KEY])) {
-            filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
-          }
-        });
-        return errors;
-      };
-      return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
-    }
     /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
      * the array only contains a single pending change.
      *
@@ -4199,13 +4316,14 @@
         return;
       }
       const { newValue, path, id } = this.pendingChanges[0];
-      let { newErrorSchema } = this.pendingChanges[0];
+      const { newErrorSchema } = this.pendingChanges[0];
       const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-      const { formData: oldFormData, schemaUtils, schema, errorSchema, fieldPathId } = 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);
+      let formData = isRootPath ? newValue : cloneDeep(oldFormData);
       if (utils.isObject(formData) || Array.isArray(formData)) {
         if (!isRootPath) {
           set(formData, path, newValue);
@@ -4223,39 +4341,44 @@
           formData: newFormData
         };
       }
-      if (newErrorSchema && !isRootPath) {
-        const errorSchemaCopy = _cloneDeep(errorSchema);
-        set(errorSchemaCopy, path, newErrorSchema);
-        newErrorSchema = errorSchemaCopy;
+      if (newErrorSchema) {
+        const oldValidationError = !isRootPath ? get2(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
+        if (!isEmpty(oldValidationError)) {
+          if (!isRootPath) {
+            set(originalErrorSchema, path, newErrorSchema);
+          } else {
+            originalErrorSchema = newErrorSchema;
+          }
+        } else {
+          if (!customErrors) {
+            customErrors = new utils.ErrorSchemaBuilder();
+          }
+          if (isRootPath) {
+            customErrors.setErrors(get2(newErrorSchema, utils.ERRORS_KEY, ""));
+          } else {
+            set(customErrors.ErrorSchema, path, newErrorSchema);
+          }
+        }
+      } else if (customErrors && get2(customErrors.ErrorSchema, [...path, utils.ERRORS_KEY])) {
+        customErrors.clearErrors(path);
       }
       if (mustValidate && this.pendingChanges.length === 1) {
-        const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-        let errors = schemaValidation.errors;
-        let errorSchema2 = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema2;
-        if (extraErrors) {
-          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-          errorSchema2 = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (newErrorSchema) {
-          const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-          errorSchema2 = utils.mergeObjects(errorSchema2, filteredErrors, "preventDuplicates");
-        }
-        state = {
-          formData: newFormData,
-          errors,
-          errorSchema: errorSchema2,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        };
+        const liveValidation = this.liveValidate(
+          schema,
+          schemaUtils,
+          originalErrorSchema,
+          newFormData,
+          extraErrors,
+          customErrors,
+          retrievedSchema
+        );
+        state = { formData: newFormData, ...liveValidation, customErrors };
       } else if (!noValidate && newErrorSchema) {
-        const errorSchema2 = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
         state = {
           formData: newFormData,
-          errorSchema: errorSchema2,
-          errors: utils.toErrorList(errorSchema2)
+          ...mergedErrors,
+          customErrors
         };
       }
       this.setState(state, () => {
@@ -4294,7 +4417,9 @@
         errorSchema: {},
         errors: [],
         schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
+        schemaValidationErrorSchema: {},
+        initialDefaultsGenerated: false,
+        customErrors: void 0
       };
       this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
     };