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

package/dist/core.umd.js

@@ -1,12 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/toPath'), require('lodash/cloneDeep'), require('lodash/isObject'), require('lodash/set'), require('nanoid'), 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/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/toPath', 'lodash/cloneDeep', 'lodash/isObject', 'lodash/set', 'nanoid', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._forEach, global.get2, global.isEmpty, global._isNil, global._pick, global._toPath, global.cloneDeep2, global.isObject, global.set, global.nanoid, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.noop, global.omit3, global.Markdown, global.unset));
-})(this, (function (exports, react, utils, _forEach, get2, isEmpty, _isNil, _pick, _toPath, cloneDeep2, isObject, set, nanoid, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, noop, omit3, Markdown, unset) { '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() {
-    return nanoid.nanoid();
+    return uniqueId("rjsf-array-item-");
   }
   function generateKeyedFormData(formData) {
     return !Array.isArray(formData) ? [] : formData.map((item) => {
@@ -29,7 +29,7 @@
      */
     constructor(props) {
       super(props);
-      const { formData = [] } = props;
+      const { formData } = props;
       const keyedFormData = generateKeyedFormData(formData);
       this.state = {
         keyedFormData,
@@ -126,7 +126,7 @@
       if (event) {
         event.preventDefault();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       const { keyedFormData } = this.state;
       let newErrorSchema;
       if (errorSchema) {
@@ -155,7 +155,8 @@
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        // add click will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
       );
     }
     /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
@@ -189,7 +190,7 @@
         if (event) {
           event.preventDefault();
         }
-        const { onChange, errorSchema } = this.props;
+        const { onChange, errorSchema, fieldPathId } = this.props;
         const { keyedFormData } = this.state;
         let newErrorSchema;
         if (errorSchema) {
@@ -205,7 +206,7 @@
         }
         const newKeyedFormDataRow = {
           key: generateRowId(),
-          item: cloneDeep2(keyedFormData[index].item)
+          item: cloneDeep(keyedFormData[index].item)
         };
         const newKeyedFormData = [...keyedFormData];
         if (index !== void 0) {
@@ -218,7 +219,7 @@
             keyedFormData: newKeyedFormData,
             updatedKeyedFormData: true
           },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+          () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
         );
       };
     };
@@ -233,7 +234,7 @@
         if (event) {
           event.preventDefault();
         }
-        const { onChange, errorSchema } = this.props;
+        const { onChange, errorSchema, fieldPathId } = this.props;
         const { keyedFormData } = this.state;
         let newErrorSchema;
         if (errorSchema) {
@@ -253,7 +254,7 @@
             keyedFormData: newKeyedFormData,
             updatedKeyedFormData: true
           },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+          () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
         );
       };
     };
@@ -270,7 +271,7 @@
           event.preventDefault();
           event.currentTarget.blur();
         }
-        const { onChange, errorSchema } = this.props;
+        const { onChange, errorSchema, fieldPathId } = this.props;
         let newErrorSchema;
         if (errorSchema) {
           newErrorSchema = {};
@@ -297,7 +298,7 @@
           {
             keyedFormData: newKeyedFormData
           },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+          () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
         );
       };
     };
@@ -307,32 +308,49 @@
      * @param index - The index of the item being changed
      */
     onChangeForIndex = (index) => {
-      return (value, newErrorSchema, id) => {
-        const { formData, onChange, errorSchema } = this.props;
-        const arrayData = Array.isArray(formData) ? formData : [];
-        const newFormData = arrayData.map((item, i) => {
-          const jsonValue = typeof value === "undefined" ? null : value;
-          return index === i ? jsonValue : item;
-        });
+      return (value, path, newErrorSchema, id) => {
+        const { onChange } = this.props;
         onChange(
-          newFormData,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [index]: newErrorSchema
-          },
+          // We need to treat undefined items as nulls to have validation.
+          // See https://github.com/tdegrunt/jsonschema/issues/206
+          value === void 0 ? null : value,
+          path,
+          newErrorSchema,
           id
         );
       };
     };
     /** Callback handler used to change the value for a checkbox */
     onSelectChange = (value) => {
-      const { onChange, idSchema } = this.props;
-      onChange(value, void 0, idSchema && idSchema.$id);
+      const { onChange, fieldPathId } = this.props;
+      onChange(value, fieldPathId.path, void 0, fieldPathId && fieldPathId.$id);
     };
+    /** Helper method to compute item UI schema for both normal and fixed arrays
+     * Handles both static object and dynamic function cases
+     *
+     * @param uiSchema - The parent UI schema containing items definition
+     * @param item - The item data
+     * @param index - The index of the item
+     * @param formContext - The form context
+     * @returns The computed UI schema for the item
+     */
+    computeItemUiSchema(uiSchema, item, index, formContext) {
+      if (typeof uiSchema.items === "function") {
+        try {
+          const result = uiSchema.items(item, index, formContext);
+          return result;
+        } catch (e) {
+          console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+          return void 0;
+        }
+      } else {
+        return uiSchema.items;
+      }
+    }
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     render() {
-      const { schema, uiSchema, idSchema, registry } = this.props;
+      const { schema, uiSchema, fieldPathId, registry } = this.props;
       const { schemaUtils, translateString } = registry;
       if (!(utils.ITEMS_KEY in schema)) {
         const uiOptions = utils.getUiOptions(uiSchema);
@@ -345,7 +363,7 @@
           UnsupportedFieldTemplate,
           {
             schema,
-            idSchema,
+            fieldPathId,
             reason: translateString(utils.TranslatableString.MissingItems),
             registry
           }
@@ -372,7 +390,7 @@
         schema,
         uiSchema = {},
         errorSchema,
-        idSchema,
+        fieldPathId,
         name,
         title,
         disabled = false,
@@ -382,27 +400,31 @@
         registry,
         onBlur,
         onFocus,
-        idPrefix,
-        idSeparator = "_",
         rawErrors
       } = this.props;
       const { keyedFormData } = this.state;
       const fieldTitle = schema.title || title || name;
-      const { schemaUtils, formContext } = 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);
           const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
-          const itemIdPrefix = idSchema.$id + idSeparator + index;
-          const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+          const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
+          const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
           return this.renderArrayFieldItem({
             key,
             index,
@@ -412,10 +434,10 @@
             canMoveUp: index > 0,
             canMoveDown: index < formData.length - 1,
             itemSchema,
-            itemIdSchema,
+            itemFieldPathId,
             itemErrorSchema,
             itemData: itemCast,
-            itemUiSchema: uiSchema.items,
+            itemUiSchema,
             autofocus: autofocus && index === 0,
             onBlur,
             onFocus,
@@ -423,19 +445,19 @@
             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,
-        idSchema,
+        fieldPathId,
         uiSchema,
         onAddClick: this.onAddClick,
         readonly,
         required,
         schema,
         title: fieldTitle,
-        formContext,
         formData,
         rawErrors,
-        registry
+        registry,
+        optionalDataControl
       };
       const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
       return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
@@ -445,7 +467,7 @@
     renderCustomWidget() {
       const {
         schema,
-        idSchema,
+        fieldPathId,
         uiSchema,
         disabled = false,
         readonly = false,
@@ -468,7 +490,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         Widget,
         {
-          id: idSchema.$id,
+          id: fieldPathId.$id,
           name,
           multiple: true,
           onChange: this.onSelectChange,
@@ -497,7 +519,7 @@
     renderMultiSelect() {
       const {
         schema,
-        idSchema,
+        fieldPathId,
         uiSchema,
         formData: items = [],
         disabled = false,
@@ -521,7 +543,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         Widget,
         {
-          id: idSchema.$id,
+          id: fieldPathId.$id,
           name,
           multiple: true,
           onChange: this.onSelectChange,
@@ -550,7 +572,7 @@
       const {
         schema,
         uiSchema,
-        idSchema,
+        fieldPathId,
         name,
         disabled = false,
         readonly = false,
@@ -571,7 +593,7 @@
         Widget,
         {
           options,
-          id: idSchema.$id,
+          id: fieldPathId.$id,
           name,
           multiple: true,
           onChange: this.onSelectChange,
@@ -598,11 +620,9 @@
       const {
         schema,
         uiSchema = {},
-        formData = [],
+        formData,
         errorSchema,
-        idPrefix,
-        idSeparator = "_",
-        idSchema,
+        fieldPathId,
         name,
         title,
         disabled = false,
@@ -614,35 +634,48 @@
         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 } = 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,
-        idSchema,
+        fieldPathId,
         formData,
-        items: keyedFormData.map((keyedItem, index) => {
+        items: actualFormData.map((keyedItem, index) => {
           const { key, item } = keyedItem;
           const itemCast = item;
           const additional = index >= itemSchemas.length;
           const itemSchema = (additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
-          const itemIdPrefix = idSchema.$id + idSeparator + index;
-          const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-          const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+          const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
+          let itemUiSchema;
+          if (additional) {
+            itemUiSchema = uiSchema.additionalItems;
+          } else {
+            if (Array.isArray(uiSchema.items)) {
+              itemUiSchema = uiSchema.items[index];
+            } else {
+              itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+            }
+          }
           const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
           return this.renderArrayFieldItem({
             key,
@@ -656,7 +689,7 @@
             itemSchema,
             itemData: itemCast,
             itemUiSchema,
-            itemIdSchema,
+            itemFieldPathId,
             itemErrorSchema,
             autofocus: autofocus && index === 0,
             onBlur,
@@ -672,9 +705,9 @@
         schema,
         uiSchema,
         title: fieldTitle,
-        formContext,
         errorSchema,
-        rawErrors
+        rawErrors,
+        optionalDataControl
       };
       const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
       return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
@@ -696,7 +729,7 @@
         itemSchema,
         itemData,
         itemUiSchema,
-        itemIdSchema,
+        itemFieldPathId,
         itemErrorSchema,
         autofocus,
         onBlur,
@@ -705,7 +738,7 @@
         totalItems,
         title
       } = props;
-      const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
+      const { disabled, hideError, readonly, uiSchema, registry, formContext } = this.props;
       const {
         fields: { ArraySchemaField, SchemaField: SchemaField2 },
         globalUiOptions
@@ -732,9 +765,7 @@
             formData: itemData,
             formContext,
             errorSchema: itemErrorSchema,
-            idPrefix,
-            idSeparator,
-            idSchema: itemIdSchema,
+            fieldPathId: itemFieldPathId,
             required: this.isItemRequired(itemSchema),
             onChange: this.onChangeForIndex(index),
             onBlur,
@@ -748,7 +779,7 @@
           }
         ),
         buttonsProps: {
-          idSchema: itemIdSchema,
+          fieldPathId: itemFieldPathId,
           disabled,
           readonly,
           canAdd,
@@ -785,7 +816,7 @@
       schema,
       name,
       uiSchema,
-      idSchema,
+      fieldPathId,
       formData,
       registry,
       required,
@@ -847,15 +878,21 @@
         enumOptions = utils.optionsList({ enum: enums }, uiSchema);
       }
     }
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => {
+        return onChange(value, fieldPathId.path, errorSchema, id);
+      },
+      [onChange, fieldPathId]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Widget,
       {
         options: { ...options, enumOptions },
         schema,
         uiSchema,
-        id: idSchema.$id,
+        id: fieldPathId.$id,
         name,
-        onChange,
+        onChange: onWidgetChange,
         onFocus,
         onBlur,
         label,
@@ -875,10 +912,12 @@
   var BooleanField_default = BooleanField;
   var LOOKUP_REGEX = /^\$lookup=(.+)/;
   var LAYOUT_GRID_UI_OPTION = "layoutGrid";
-  var UI_GLOBAL_OPTIONS = "ui:global_options";
   function getNonNullishValue(value, fallback) {
     return value ?? fallback;
   }
+  function isNumericIndex(str) {
+    return /^\d+?$/.test(str);
+  }
   var LayoutGridField = class _LayoutGridField extends react.PureComponent {
     static defaultProps = {
       layoutGridSchema: void 0
@@ -898,7 +937,7 @@
      * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
      */
     static computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
-      const globalUiOptions = get2(uiSchema, [UI_GLOBAL_OPTIONS], {});
+      const globalUiOptions = get2(uiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], {});
       const localUiSchema = get2(uiSchema, field);
       const localUiOptions = { ...get2(localUiSchema, [utils.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
       const fieldUiSchema = { ...localUiSchema };
@@ -906,7 +945,7 @@
         set(fieldUiSchema, [utils.UI_OPTIONS_KEY], localUiOptions);
       }
       if (!isEmpty(globalUiOptions)) {
-        set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+        set(fieldUiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
       }
       let { readonly: uiReadonly } = utils.getUiOptions(fieldUiSchema);
       if (forceReadonly === true || isUndefined(uiReadonly) && schemaReadonly === true) {
@@ -978,60 +1017,74 @@
       }
       return { children, gridProps };
     }
-    /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
-     * as the id prefix.
+    /** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
+     * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
+     * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
+     * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
+     * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
+     * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
+     * as is.
      *
-     * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
-     * @param schema - The schema to generate the idSchema for
-     * @param baseIdSchema - The IdSchema for the base
-     * @param formData - The formData to pass the `toIdSchema`
-     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
-     * @returns - The generated `idSchema` for the `schema`
+     * @param schema - The schema to generate the fieldPathId for
+     * @param fieldPathId - The FieldPathId for the schema
+     * @param potentialIndex - A string containing a potential index
+     * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
      */
-    static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
-      const baseId = get2(baseIdSchema, utils.ID_KEY);
-      return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+    static computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
+      let rawSchema;
+      if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && has(schema, utils.ITEMS_KEY)) {
+        const index = Number(potentialIndex);
+        const items = schema[utils.ITEMS_KEY];
+        if (Array.isArray(items)) {
+          if (index > items.length) {
+            rawSchema = last(items);
+          } else {
+            rawSchema = items[index];
+          }
+        } else {
+          rawSchema = items;
+        }
+        fieldPathId = {
+          [utils.ID_KEY]: fieldPathId[utils.ID_KEY],
+          path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index]
+        };
+      }
+      return { rawSchema, fieldPathId };
     }
     /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
      * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
      * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
      * `options`.
      *
-     * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
+     * @param registry - The registry
      * @param dottedPath - The dotted-path to the field for which to get the schema
      * @param initialSchema - The initial schema to start the search from
      * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
-     * @param initialIdSchema - The initial idSchema to start the search from
-     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+     * @param initialFieldIdPath - The initial fieldPathId to start the search from
      * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
      *            info if a oneOf/anyOf
      */
-    static getSchemaDetailsForField(schemaUtils, dottedPath, initialSchema, formData, initialIdSchema, idSeparator) {
+    static getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
+      const { schemaUtils, globalFormOptions } = registry;
       let rawSchema = initialSchema;
-      let idSchema = initialIdSchema;
+      let fieldPathId = initialFieldIdPath;
       const parts = dottedPath.split(".");
       const leafPath = parts.pop();
       let schema = schemaUtils.retrieveSchema(rawSchema, formData);
       let innerData = formData;
       let isReadonly = schema.readOnly;
       parts.forEach((part) => {
+        fieldPathId = utils.toFieldPathId(part, globalFormOptions, fieldPathId);
         if (has(schema, utils.PROPERTIES_KEY)) {
           rawSchema = get2(schema, [utils.PROPERTIES_KEY, part], {});
-          idSchema = get2(idSchema, part, {});
         } else if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
           const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
           const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-          const selectedIdSchema = _LayoutGridField.getIdSchema(
-            schemaUtils,
-            idSchema,
-            formData,
-            selectedSchema,
-            idSeparator
-          );
           rawSchema = get2(selectedSchema, [utils.PROPERTIES_KEY, part], {});
-          idSchema = get2(selectedIdSchema, part, {});
         } else {
-          rawSchema = {};
+          const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, part);
+          rawSchema = result.rawSchema ?? {};
+          fieldPathId = result.fieldPathId;
         }
         innerData = get2(innerData, part, {});
         schema = schemaUtils.retrieveSchema(rawSchema, innerData);
@@ -1046,13 +1099,17 @@
         if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
           const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
           schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
-          const rawIdSchema = _LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, schema, idSeparator);
-          idSchema = utils.mergeObjects(rawIdSchema, idSchema);
         }
+        fieldPathId = utils.toFieldPathId(leafPath, globalFormOptions, fieldPathId);
         isRequired = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
-        schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
-        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-        idSchema = get2(idSchema, leafPath, {});
+        const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
+        if (result.rawSchema) {
+          schema = result.rawSchema;
+          fieldPathId = result.fieldPathId;
+        } else {
+          schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
+          schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+        }
         isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
         if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
           const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
@@ -1060,7 +1117,7 @@
           optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
         }
       }
-      return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+      return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
     }
     /** Gets the custom render component from the `render`, by either determining that it is either already a function or
      * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
@@ -1096,7 +1153,7 @@
       if (isString(gridSchema) || isUndefined(gridSchema)) {
         name = gridSchema ?? "";
       } else {
-        const { name: innerName, render, ...innerProps } = gridSchema;
+        const { name: innerName = "", render, ...innerProps } = gridSchema;
         name = innerName;
         uiProps = innerProps;
         if (!isEmpty(uiProps)) {
@@ -1129,19 +1186,12 @@
      * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
      *
      * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
-     * @returns - The `onChange` handling function for the `dottedPath` field
+     * @returns - The `onChange` handling function for the `dottedPath` field of the `schemaType` type
      */
     onFieldChange = (dottedPath) => {
-      return (value, errSchema, id) => {
-        const { onChange, errorSchema, formData } = this.props;
-        const newFormData = cloneDeep2(formData || {});
-        let newErrorSchema = errorSchema;
-        if (errSchema && errorSchema) {
-          newErrorSchema = cloneDeep2(errorSchema);
-          set(newErrorSchema, dottedPath, errSchema);
-        }
-        set(newFormData, dottedPath, value);
-        onChange(newFormData, newErrorSchema, id);
+      return (value, path, errSchema, id) => {
+        const { onChange } = this.props;
+        onChange(value, path, errSchema, id);
       };
     };
     /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
@@ -1229,20 +1279,20 @@
       const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
       return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { ...gridProps, "data-testid": _LayoutGridField.TEST_IDS.row, children: this.renderChildren(children) });
     }
-    /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
+    /** Iterates through all the `childrenLayoutGrfieldPathId`, rendering a nested `LayoutGridField` for each item in the
      * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
      * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
-     * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
+     * `childrenLayoutGrfieldPathId` is passed as `layoutGridSchema`.
      *
-     * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+     * @param childrenLayoutGrfieldPathId - The list of strings or objects that represents the configurations for the
      *          children fields
      * @returns - The nested `LayoutGridField`s
      */
-    renderChildren(childrenLayoutGridSchema) {
+    renderChildren(childrenLayoutGrfieldPathId) {
       const { registry, schema: rawSchema, formData } = this.props;
       const { schemaUtils } = registry;
       const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-      return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
+      return childrenLayoutGrfieldPathId.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
         _LayoutGridField,
         {
           ...this.props,
@@ -1258,7 +1308,7 @@
      * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
      * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
      * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
-     * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
+     * `uiSchema`, `errorSchema`, `fieldPathId` and `formData` drilled down to the dotted-path field, spreading any other
      * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
      * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
      * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
@@ -1272,18 +1322,17 @@
         schema: initialSchema,
         uiSchema,
         errorSchema,
-        idSchema,
+        fieldPathId,
         onBlur,
         onFocus,
         formData,
         readonly,
         registry,
-        idSeparator,
         layoutGridSchema,
         // Used to pull this out of otherProps since we don't want to pass it through
         ...otherProps
       } = this.props;
-      const { fields: fields2, schemaUtils } = registry;
+      const { fields: fields2 } = registry;
       const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
       const uiComponentProps = _LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
       if (uiComponentProps.rendered) {
@@ -1295,15 +1344,8 @@
         isRequired,
         isReadonly,
         optionsInfo,
-        idSchema: fieldIdSchema
-      } = _LayoutGridField.getSchemaDetailsForField(
-        schemaUtils,
-        name,
-        initialSchema,
-        formData,
-        idSchema,
-        idSeparator
-      );
+        fieldPathId: fieldIdSchema
+      } = _LayoutGridField.getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId);
       if (schema) {
         const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
         const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
@@ -1324,8 +1366,7 @@
             schema,
             uiSchema: fieldUiSchema,
             errorSchema: get2(errorSchema, name),
-            idSchema: fieldIdSchema,
-            idSeparator,
+            fieldPathId: fieldIdSchema,
             formData: get2(formData, name),
             onChange: this.onFieldChange(name),
             onBlur,
@@ -1348,8 +1389,7 @@
             errorSchema,
             uiSchema,
             schema: initialSchema,
-            idSchema,
-            idSeparator,
+            fieldPathId,
             onBlur,
             onFocus,
             registry,
@@ -1391,7 +1431,7 @@
     }
   };
   function LayoutHeaderField(props) {
-    const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+    const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
     const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
     const { title: uiTitle } = options;
     const { title: schemaTitle } = schema;
@@ -1407,7 +1447,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       TitleFieldTemplate,
       {
-        id: utils.titleId(idSchema),
+        id: utils.titleId(fieldPathId),
         title: fieldTitle,
         required,
         schema,
@@ -1445,7 +1485,7 @@
       baseType,
       disabled = false,
       formData,
-      idSchema,
+      fieldPathId,
       onBlur,
       onChange,
       options,
@@ -1462,7 +1502,7 @@
     } = props;
     const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
     const [enumOptions, setEnumOptions] = react.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
-    const id = get2(idSchema, utils.ID_KEY);
+    const id = get2(fieldPathId, utils.ID_KEY);
     const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, options);
     const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, options);
@@ -1503,10 +1543,10 @@
       if (newFormData) {
         set(newFormData, selectorField, opt);
       }
-      onChange(newFormData, void 0, id);
+      onChange(newFormData, fieldPathId.path, void 0, id);
     };
     const widgetOptions = { enumOptions, ...uiOptions };
-    const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
+    const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FieldErrorTemplate2, { fieldPathId, schema, errors: rawErrors, registry }) : void 0;
     const ignored = (value) => noop;
     return /* @__PURE__ */ jsxRuntime.jsx(
       FieldTemplate2,
@@ -1516,7 +1556,6 @@
         label: (title || schema.title) ?? "",
         disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
         uiSchema,
-        formContext,
         required,
         readonly: !!readonly,
         registry,
@@ -1580,7 +1619,7 @@
      * @param prevState - The previous `AnyOfFieldState` for this template
      */
     componentDidUpdate(prevProps, prevState) {
-      const { formData, options, idSchema } = this.props;
+      const { formData, options, fieldPathId } = this.props;
       const { selectedOption } = this.state;
       let newState = this.state;
       if (!utils.deepEquals(prevProps.options, options)) {
@@ -1590,7 +1629,7 @@
         const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
         newState = { selectedOption, retrievedOptions };
       }
-      if (!utils.deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+      if (!utils.deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
         const { retrievedOptions } = newState;
         const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
         if (prevState && matchingOption !== selectedOption) {
@@ -1624,7 +1663,7 @@
      */
     onOptionChange = (option) => {
       const { selectedOption, retrievedOptions } = this.state;
-      const { formData, onChange, registry } = this.props;
+      const { formData, onChange, registry, fieldPathId } = this.props;
       const { schemaUtils } = registry;
       const intOption = option !== void 0 ? parseInt(option, 10) : -1;
       if (intOption === selectedOption) {
@@ -1637,12 +1676,12 @@
         newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
       }
       this.setState({ selectedOption: intOption }, () => {
-        onChange(newFormData, void 0, this.getFieldId());
+        onChange(newFormData, fieldPathId.path, void 0, this.getFieldId());
       });
     };
     getFieldId() {
-      const { idSchema, schema } = this.props;
-      return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+      const { fieldPathId, schema } = this.props;
+      return `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
     }
     /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
      */
@@ -1661,6 +1700,11 @@
       } = this.props;
       const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
       const { SchemaField: _SchemaField } = fields2;
+      const MultiSchemaFieldTemplate2 = utils.getTemplate(
+        "MultiSchemaFieldTemplate",
+        registry,
+        globalUiOptions
+      );
       const { selectedOption, retrievedOptions } = this.state;
       const {
         widget = "select",
@@ -1707,34 +1751,42 @@
           value: index
         };
       });
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel panel-default panel-body", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Widget,
-          {
-            id: this.getFieldId(),
-            name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
-            schema: { type: "number", default: 0 },
-            onChange: this.onOptionChange,
-            onBlur,
-            onFocus,
-            disabled: disabled || isEmpty(enumOptions),
-            multiple: false,
-            rawErrors,
-            errorSchema: fieldErrorSchema,
-            value: selectedOption >= 0 ? selectedOption : void 0,
-            options: { enumOptions, ...uiOptions },
-            registry,
-            formContext,
-            placeholder,
-            autocomplete,
-            autofocus,
-            label: title ?? name,
-            hideLabel: !displayLabel,
-            readonly
-          }
-        ) }),
-        optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
-      ] });
+      const selector = /* @__PURE__ */ jsxRuntime.jsx(
+        Widget,
+        {
+          id: this.getFieldId(),
+          name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
+          schema: { type: "number", default: 0 },
+          onChange: this.onOptionChange,
+          onBlur,
+          onFocus,
+          disabled: disabled || isEmpty(enumOptions),
+          multiple: false,
+          rawErrors,
+          errorSchema: fieldErrorSchema,
+          value: selectedOption >= 0 ? selectedOption : void 0,
+          options: { enumOptions, ...uiOptions },
+          registry,
+          formContext,
+          placeholder,
+          autocomplete,
+          autofocus,
+          label: title ?? name,
+          hideLabel: !displayLabel,
+          readonly
+        }
+      );
+      const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MultiSchemaFieldTemplate2,
+        {
+          schema,
+          registry,
+          uiSchema,
+          selector,
+          optionSchemaField: optionsSchemaField
+        }
+      );
     }
   };
   var MultiSchemaField_default = AnyOfField;
@@ -1746,13 +1798,13 @@
     const { StringField: StringField2 } = registry.fields;
     let value = formData;
     const handleChange = react.useCallback(
-      (value2, errorSchema, id) => {
+      (value2, path, errorSchema, id) => {
         setLastValue(value2);
         if (`${value2}`.charAt(0) === ".") {
           value2 = `0${value2}`;
         }
         const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value2.replace(trailingCharMatcher, "")) : utils.asNumber(value2);
-        onChange(processed, errorSchema, id);
+        onChange(processed, path, errorSchema, id);
       },
       [onChange]
     );
@@ -1789,20 +1841,12 @@
      * @returns - The onPropertyChange callback for the `name` property
      */
     onPropertyChange = (name, addedByAdditionalProperties = false) => {
-      return (value, newErrorSchema, id) => {
-        const { formData, onChange, errorSchema } = this.props;
+      return (value, path, newErrorSchema, id) => {
+        const { onChange } = this.props;
         if (value === void 0 && addedByAdditionalProperties) {
           value = "";
         }
-        const newFormData = { ...formData, [name]: value };
-        onChange(
-          newFormData,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [name]: newErrorSchema
-          },
-          id
-        );
+        onChange(value, path, newErrorSchema, id);
       };
     };
     /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
@@ -1814,10 +1858,10 @@
     onDropPropertyClick = (key) => {
       return (event) => {
         event.preventDefault();
-        const { onChange, formData } = this.props;
+        const { onChange, formData, fieldPathId } = this.props;
         const copiedFormData = { ...formData };
         unset(copiedFormData, key);
-        onChange(copiedFormData);
+        onChange(copiedFormData, fieldPathId.path);
       };
     };
     /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
@@ -1844,11 +1888,11 @@
      * @returns - The key change callback function
      */
     onKeyChange = (oldValue) => {
-      return (value, newErrorSchema) => {
+      return (value) => {
         if (oldValue === value) {
           return;
         }
-        const { formData, onChange, errorSchema } = this.props;
+        const { formData, onChange, fieldPathId } = this.props;
         value = this.getAvailableKey(value, formData);
         const newFormData = {
           ...formData
@@ -1860,13 +1904,7 @@
         });
         const renamedObj = Object.assign({}, ...keyValues);
         this.setState({ wasPropertyKeyModified: true });
-        onChange(
-          renamedObj,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [value]: newErrorSchema
-          }
-        );
+        onChange(renamedObj, fieldPathId.path);
       };
     };
     /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -1902,7 +1940,7 @@
       if (!(schema.additionalProperties || schema.patternProperties)) {
         return;
       }
-      const { formData, onChange, registry } = this.props;
+      const { formData, onChange, registry, fieldPathId } = this.props;
       const newFormData = { ...formData };
       const newKey = this.getAvailableKey("newKey", newFormData);
       if (schema.patternProperties) {
@@ -1930,7 +1968,7 @@
         const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
         set(newFormData, newKey, newValue);
       }
-      onChange(newFormData);
+      onChange(newFormData, fieldPathId.path);
     };
     /** Renders the `ObjectField` from the given props
      */
@@ -1940,37 +1978,40 @@
         uiSchema = {},
         formData,
         errorSchema,
-        idSchema,
+        fieldPathId,
         name,
         required = false,
         disabled,
         readonly,
         hideError,
-        idPrefix,
-        idSeparator,
         onBlur,
         onFocus,
         registry,
         title
       } = this.props;
-      const { fields: fields2, formContext, schemaUtils, translateString, globalUiOptions } = registry;
-      const { SchemaField: SchemaField2 } = fields2;
-      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      const { fields: fields2, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
+      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,
@@ -1979,7 +2020,7 @@
           const addedByAdditionalProperties = has(schema, [utils.PROPERTIES_KEY, name2, utils.ADDITIONAL_PROPERTY_FLAG]);
           const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name2];
           const hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
-          const fieldIdSchema = get2(idSchema, [name2], {});
+          const innerFieldIdPathId = utils.toFieldPathId(name2, globalFormOptions, fieldPathId);
           return {
             content: /* @__PURE__ */ jsxRuntime.jsx(
               SchemaField2,
@@ -1989,9 +2030,7 @@
                 schema: get2(schema, [utils.PROPERTIES_KEY, name2], {}),
                 uiSchema: fieldUiSchema,
                 errorSchema: get2(errorSchema, name2),
-                idSchema: fieldIdSchema,
-                idPrefix,
-                idSeparator,
+                fieldPathId: innerFieldIdPathId,
                 formData: get2(formData, name2),
                 formContext,
                 wasPropertyKeyModified: this.state.wasPropertyKeyModified,
@@ -2017,18 +2056,77 @@
         readonly,
         disabled,
         required,
-        idSchema,
+        fieldPathId,
         uiSchema,
         errorSchema,
         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",
@@ -2038,7 +2136,7 @@
     string: "StringField",
     null: "NullField"
   };
-  function getFieldComponent(schema, uiOptions, idSchema, registry) {
+  function getFieldComponent(schema, uiOptions, fieldPathId, registry) {
     const field = uiOptions.field;
     const { fields: fields2, translateString } = registry;
     if (typeof field === "function") {
@@ -2067,7 +2165,7 @@
         UnsupportedFieldTemplate,
         {
           schema,
-          idSchema,
+          fieldPathId,
           reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
           registry
         }
@@ -2077,12 +2175,10 @@
   function SchemaFieldRender(props) {
     const {
       schema: _schema,
-      idSchema: _idSchema,
+      fieldPathId,
       uiSchema,
       formData,
       errorSchema,
-      idPrefix,
-      idSeparator,
       name,
       onChange,
       onKeyChange,
@@ -2102,19 +2198,15 @@
     const FieldHelpTemplate2 = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
     const schema = schemaUtils.retrieveSchema(_schema, formData);
-    const fieldId = _idSchema[utils.ID_KEY];
-    const idSchema = utils.mergeObjects(
-      schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
-      _idSchema
-    );
+    const fieldId = fieldPathId[utils.ID_KEY];
     const handleFieldComponentChange = react.useCallback(
-      (formData2, newErrorSchema, id2) => {
+      (formData2, path, newErrorSchema, id2) => {
         const theId = id2 || fieldId;
-        return onChange(formData2, newErrorSchema, theId);
+        return onChange(formData2, path, newErrorSchema, theId);
       },
       [fieldId, onChange]
     );
-    const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
+    const FieldComponent = getFieldComponent(schema, uiOptions, fieldPathId, registry);
     const disabled = Boolean(uiOptions.disabled ?? props.disabled);
     const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
@@ -2134,7 +2226,7 @@
       {
         ...props,
         onChange: handleFieldComponentChange,
-        idSchema,
+        fieldPathId,
         schema,
         uiSchema: fieldUiSchema,
         disabled,
@@ -2146,7 +2238,7 @@
         rawErrors: __errors
       }
     );
-    const id = idSchema[utils.ID_KEY];
+    const id = fieldPathId[utils.ID_KEY];
     let label;
     if (wasPropertyKeyModified) {
       label = name;
@@ -2167,7 +2259,7 @@
       FieldHelpTemplate2,
       {
         help,
-        idSchema,
+        fieldPathId,
         schema,
         uiSchema,
         hasErrors: !hideError && __errors && __errors.length > 0,
@@ -2179,7 +2271,7 @@
       {
         errors: __errors,
         errorSchema,
-        idSchema,
+        fieldPathId,
         schema,
         uiSchema,
         registry
@@ -2214,7 +2306,6 @@
       displayLabel,
       classNames: classNames.join(" ").trim(),
       style: uiOptions.style,
-      formContext,
       formData,
       schema,
       uiSchema,
@@ -2235,9 +2326,7 @@
           errorSchema,
           formData,
           formContext,
-          idPrefix,
-          idSchema,
-          idSeparator,
+          fieldPathId,
           onBlur: props.onBlur,
           onChange: props.onChange,
           onFocus: props.onFocus,
@@ -2260,9 +2349,7 @@
           errorSchema,
           formData,
           formContext,
-          idPrefix,
-          idSchema,
-          idSeparator,
+          fieldPathId,
           onBlur: props.onBlur,
           onChange: props.onChange,
           onFocus: props.onFocus,
@@ -2279,7 +2366,11 @@
   }
   var SchemaField = class extends react.Component {
     shouldComponentUpdate(nextProps) {
-      return !utils.deepEquals(this.props, nextProps);
+      const {
+        registry: { globalFormOptions }
+      } = this.props;
+      const { experimental_componentUpdateStrategy = "customDeep" } = globalFormOptions;
+      return utils.shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
     }
     render() {
       return /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldRender, { ...this.props });
@@ -2291,7 +2382,7 @@
       schema,
       name,
       uiSchema,
-      idSchema,
+      fieldPathId,
       formData,
       required,
       disabled = false,
@@ -2315,19 +2406,25 @@
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const label = uiTitle ?? title ?? name;
     const Widget = utils.getWidget(schema, widget, widgets2);
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => {
+        return onChange(value, fieldPathId.path, errorSchema, id);
+      },
+      [onChange, fieldPathId]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Widget,
       {
         options: { ...options, enumOptions },
         schema,
         uiSchema,
-        id: idSchema.$id,
+        id: fieldPathId.$id,
         name,
         label,
         hideLabel: !displayLabel,
         hideError,
         value: formData,
-        onChange,
+        onChange: onWidgetChange,
         onBlur,
         onFocus,
         required,
@@ -2343,12 +2440,12 @@
   }
   var StringField_default = StringField;
   function NullField(props) {
-    const { formData, onChange } = props;
+    const { formData, onChange, fieldPathId } = props;
     react.useEffect(() => {
       if (formData === void 0) {
-        onChange(null);
+        onChange(null, fieldPathId.path);
       }
-    }, [formData, onChange]);
+    }, [fieldPathId, formData, onChange]);
     return null;
   }
   var NullField_default = NullField;
@@ -2366,6 +2463,7 @@
       NumberField: NumberField_default,
       ObjectField: ObjectField_default,
       OneOfField: MultiSchemaField_default,
+      OptionalDataControlsField,
       SchemaField: SchemaField_default,
       StringField: StringField_default,
       NullField: NullField_default
@@ -2373,7 +2471,7 @@
   }
   var fields_default = fields;
   function ArrayFieldDescriptionTemplate(props) {
-    const { idSchema, description, registry, schema, uiSchema } = props;
+    const { fieldPathId, description, registry, schema, uiSchema } = props;
     const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
     const { label: displayLabel = true } = options;
     if (!description || !displayLabel) {
@@ -2387,7 +2485,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       DescriptionFieldTemplate,
       {
-        id: utils.descriptionId(idSchema),
+        id: utils.descriptionId(fieldPathId),
         description,
         schema,
         uiSchema,
@@ -2431,7 +2529,7 @@
       hasMoveDown,
       hasMoveUp,
       hasRemove,
-      idSchema,
+      fieldPathId,
       index,
       onCopyIndexClick,
       onDropIndexClick,
@@ -2449,7 +2547,7 @@
       (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
         MoveUpButton2,
         {
-          id: utils.buttonId(idSchema, "moveUp"),
+          id: utils.buttonId(fieldPathId, "moveUp"),
           className: "rjsf-array-item-move-up",
           disabled: disabled || readonly || !hasMoveUp,
           onClick: onArrowUpClick,
@@ -2460,7 +2558,7 @@
       (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
         MoveDownButton2,
         {
-          id: utils.buttonId(idSchema, "moveDown"),
+          id: utils.buttonId(fieldPathId, "moveDown"),
           className: "rjsf-array-item-move-down",
           disabled: disabled || readonly || !hasMoveDown,
           onClick: onArrowDownClick,
@@ -2471,7 +2569,7 @@
       hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
         CopyButton2,
         {
-          id: utils.buttonId(idSchema, "copy"),
+          id: utils.buttonId(fieldPathId, "copy"),
           className: "rjsf-array-item-copy",
           disabled: disabled || readonly,
           onClick: onCopyClick,
@@ -2482,7 +2580,7 @@
       hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
-          id: utils.buttonId(idSchema, "remove"),
+          id: utils.buttonId(fieldPathId, "remove"),
           className: "rjsf-array-item-remove",
           disabled: disabled || readonly,
           onClick: onRemoveClick,
@@ -2497,9 +2595,10 @@
       canAdd,
       className,
       disabled,
-      idSchema,
+      fieldPathId,
       uiSchema,
       items,
+      optionalDataControl,
       onAddClick,
       readonly,
       registry,
@@ -2523,36 +2622,39 @@
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
-    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, id: idSchema.$id, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, id: fieldPathId.$id, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate2,
         {
-          idSchema,
+          fieldPathId,
           title: uiOptions.title || title,
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate2,
         {
-          idSchema,
+          fieldPathId,
           description: uiOptions.description || schema.description,
           schema,
           uiSchema,
           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,
         {
-          id: utils.buttonId(idSchema, "add"),
+          id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -2563,7 +2665,7 @@
     ] });
   }
   function ArrayFieldTitleTemplate(props) {
-    const { idSchema, 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) {
@@ -2577,12 +2679,13 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       TitleFieldTemplate,
       {
-        id: utils.titleId(idSchema),
+        id: utils.titleId(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl
       }
     );
   }
@@ -2698,6 +2801,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
   function AddButton({
+    id,
     className,
     onClick,
     disabled,
@@ -2707,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",
@@ -2793,21 +2898,21 @@
   // src/components/templates/FieldTemplate/index.ts
   var FieldTemplate_default = FieldTemplate;
   function FieldErrorTemplate(props) {
-    const { errors = [], idSchema } = props;
+    const { errors = [], fieldPathId } = props;
     if (errors.length === 0) {
       return null;
     }
-    const id = utils.errorId(idSchema);
+    const id = utils.errorId(fieldPathId);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
       return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-danger", children: error }, index);
     }) }) });
   }
   function FieldHelpTemplate(props) {
-    const { idSchema, help } = props;
+    const { fieldPathId, help } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(idSchema);
+    const id = utils.helpId(fieldPathId);
     if (typeof help === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx("p", { id, className: "help-block", children: help });
     }
@@ -2817,13 +2922,22 @@
     const { children, column, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...rest, children });
   }
+  function MultiSchemaFieldTemplate(props) {
+    const { selector, optionSchemaField } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel panel-default panel-body", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: selector }),
+      optionSchemaField
+    ] });
+  }
   function ObjectFieldTemplate(props) {
     const {
+      className,
       description,
       disabled,
       formData,
-      idSchema,
+      fieldPathId,
       onAddClick,
+      optionalDataControl,
       properties,
       readonly,
       registry,
@@ -2839,36 +2953,39 @@
       registry,
       options
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
-    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: idSchema.$id, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, id: fieldPathId.$id, children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
         {
-          id: utils.titleId(idSchema),
+          id: utils.titleId(fieldPathId),
           title,
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
-          id: utils.descriptionId(idSchema),
+          id: utils.descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
           registry
         }
       ),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map((prop) => prop.content),
       utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          id: utils.buttonId(idSchema, "add"),
+          id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
           onClick: onAddClick(schema),
           disabled: disabled || readonly,
@@ -2878,22 +2995,52 @@
       )
     ] });
   }
+  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) {
-    const { schema, idSchema, reason, registry } = props;
+    const { schema, fieldPathId, reason, registry } = props;
     const { translateString } = registry;
     let translateEnum = utils.TranslatableString.UnsupportedField;
     const translateParams = [];
-    if (idSchema && idSchema.$id) {
+    if (fieldPathId && fieldPathId.$id) {
       translateEnum = utils.TranslatableString.UnsupportedFieldWithId;
-      translateParams.push(idSchema.$id);
+      translateParams.push(fieldPathId.$id);
     }
     if (reason) {
       translateEnum = translateEnum === utils.TranslatableString.UnsupportedField ? utils.TranslatableString.UnsupportedFieldWithReason : utils.TranslatableString.UnsupportedFieldWithIdAndReason;
@@ -2981,7 +3128,9 @@
       FieldErrorTemplate,
       FieldHelpTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       UnsupportedFieldTemplate: UnsupportedField_default,
       WrapIfAdditionalTemplate
@@ -3044,25 +3193,24 @@
     value
   }) {
     const { translateString } = registry;
-    const [lastValue, setLastValue] = react.useState(value);
-    const [state, setState] = react.useReducer(
-      (state2, action) => {
-        return { ...state2, ...action };
+    const [state, setState] = react.useState(utils.parseDateString(value, time));
+    react.useEffect(() => {
+      setState(utils.parseDateString(value, time));
+    }, [time, value]);
+    const handleChange = react.useCallback(
+      (property, value2) => {
+        const nextState = {
+          ...state,
+          [property]: typeof value2 === "undefined" ? -1 : value2
+        };
+        if (readyForChange(nextState)) {
+          onChange(utils.toDateString(nextState, time));
+        } else {
+          setState(nextState);
+        }
       },
-      utils.parseDateString(value, time)
+      [state, onChange, time]
     );
-    react.useEffect(() => {
-      const stateValue = utils.toDateString(state, time);
-      if (readyForChange(state) && stateValue !== value) {
-        onChange(stateValue);
-      } else if (lastValue !== value) {
-        setLastValue(value);
-        setState(utils.parseDateString(value, time));
-      }
-    }, [time, value, onChange, state, lastValue]);
-    const handleChange = react.useCallback((property, value2) => {
-      setState({ [property]: value2 });
-    }, []);
     const handleSetNow = react.useCallback(
       (event) => {
         event.preventDefault();
@@ -3072,7 +3220,7 @@
         const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
         onChange(utils.toDateString(nextState, time));
       },
-      [disabled, readonly, time]
+      [disabled, readonly, time, onChange]
     );
     const handleClear = react.useCallback(
       (event) => {
@@ -3200,11 +3348,11 @@
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
       ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id]
+      [onBlur, id, enumOptions, emptyValue]
     );
     const handleFocus = react.useCallback(
       ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id]
+      [onFocus, id, enumOptions, emptyValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
@@ -3773,7 +3921,8 @@
       widgets: widgets_default(),
       rootSchema: {},
       formContext: {},
-      translateString: utils.englishStringTranslator
+      translateString: utils.englishStringTranslator,
+      globalFormOptions: { idPrefix: utils.DEFAULT_ID_PREFIX, idSeparator: utils.DEFAULT_ID_SEPARATOR }
     };
   }
   var Form = class extends react.Component {
@@ -3781,6 +3930,9 @@
      * 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.
@@ -3819,8 +3971,10 @@
     getSnapshotBeforeUpdate(prevProps, prevState) {
       if (!utils.deepEquals(this.props, prevProps)) {
         const formDataChangedFields = utils.getChangedFields(this.props.formData, prevProps.formData);
+        const stateDataChangedFields = utils.getChangedFields(this.props.formData, this.state.formData);
         const isSchemaChanged = !utils.deepEquals(prevProps.schema, this.props.schema);
         const isFormDataChanged = formDataChangedFields.length > 0 || !utils.deepEquals(prevProps.formData, this.props.formData);
+        const isStateDataChanged = stateDataChangedFields.length > 0 || !utils.deepEquals(this.state.formData, this.props.formData);
         const nextState = this.getStateFromProps(
           this.props,
           this.props.formData,
@@ -3829,7 +3983,9 @@
           //  match one of the subSchemas, the retrieved schema must be updated.
           isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
           isSchemaChanged,
-          formDataChangedFields
+          formDataChangedFields,
+          // Skip live validation for this request if no form data has changed from the last state
+          !isStateDataChanged
         );
         const shouldUpdate = !utils.deepEquals(nextState, prevState);
         return { nextState, shouldUpdate };
@@ -3866,35 +4022,42 @@
      * @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 validator2 = "validator" in props ? props.validator : this.props.validator;
       const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
       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;
       const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
       let schemaUtils = state.schemaUtils;
       if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
-        props.validator,
-        rootSchema,
+        validator2,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf
       )) {
         schemaUtils = utils.createSchemaUtils(
-          props.validator,
-          rootSchema,
+          validator2,
+          schema,
           experimental_defaultFormStateBehavior,
           experimental_customMergeAllOf
         );
       }
-      const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
+      const rootSchema = schemaUtils.getRootSchema();
+      const formData = schemaUtils.getDefaultFormState(
+        rootSchema,
+        inputFormData,
+        false,
+        state.initialDefaultsGenerated
+      );
       const _retrievedSchema = this.updateRetrievedSchema(
-        retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+        retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
       );
       const getCurrentErrors = () => {
         if (props.noValidate || isSchemaChanged) {
@@ -3914,25 +4077,28 @@
       let errorSchema;
       let schemaValidationErrors = state.schemaValidationErrors;
       let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
-      if (mustValidate) {
-        const schemaValidation = this.validate(formData, schema, 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;
+      if (mustValidate && !skipLiveValidate) {
+        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;
         errorSchema = currentErrors.errorSchema;
-        if (formDataChangedFields.length > 0) {
+        if (formDataChangedFields.length > 0 && !mustValidate) {
           const newErrorSchema = formDataChangedFields.reduce(
             (acc, key) => {
               acc[key] = void 0;
@@ -3946,31 +4112,24 @@
             "preventDuplicates"
           );
         }
+        const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+        errors = mergedErrors.errors;
+        errorSchema = mergedErrors.errorSchema;
       }
-      if (props.extraErrors) {
-        const merged = utils.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 fieldPathId = utils.toFieldPathId("", this.getGlobalFormOptions(this.props));
       const nextState = {
         schemaUtils,
-        schema,
+        schema: rootSchema,
         uiSchema,
-        idSchema,
+        fieldPathId,
         formData,
         edit,
         errors,
         errorSchema,
         schemaValidationErrors,
         schemaValidationErrorSchema,
-        retrievedSchema: _retrievedSchema
+        retrievedSchema: _retrievedSchema,
+        initialDefaultsGenerated: true
       };
       return nextState;
     }
@@ -3981,31 +4140,18 @@
      * @returns - True if the component should be updated, false otherwise
      */
     shouldComponentUpdate(nextProps, nextState) {
-      return utils.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, utils.createErrorHandler(prevFormData), uiSchema);
-        const userErrorSchema = utils.unwrapErrorHandler(errorHandler);
-        customValidateErrors = userErrorSchema;
-      }
-      return customValidateErrors;
+      const { experimental_componentUpdateStrategy = "customDeep" } = this.props;
+      return utils.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);
@@ -4014,7 +4160,6 @@
     /** 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 = utils.getUiOptions(uiSchema);
       const ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
       if (errors && errors.length) {
@@ -4025,13 +4170,65 @@
             errorSchema: errorSchema || {},
             schema,
             uiSchema,
-            formContext,
             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 = 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`
@@ -4053,19 +4250,23 @@
      * @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 (_obj[key][utils.RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== "") {
-              acc.push(_obj[key][utils.NAME_KEY]);
+            if (data[utils.RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[utils.NAME_KEY] !== "") {
+              acc.push(data[utils.NAME_KEY]);
             } else {
-              getAllPaths(_obj[key], acc, newPaths);
+              getAllPaths(data, acc, newPaths);
             }
-          } else if (key === utils.NAME_KEY && _obj[key] !== "") {
+          } else if (key === utils.NAME_KEY && data !== "") {
             paths.forEach((path) => {
               const formValue = get2(formData, path);
-              if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
+              const isLeaf = objKeys.length === 1;
+              if (formValueHasData(formValue, isLeaf) || Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf))) {
                 acc.push(path);
               }
             });
@@ -4085,60 +4286,49 @@
       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 (resolvedSchema?.type !== "object" && resolvedSchema?.type !== "array") {
-        filteredErrors.__errors = schemaErrors.__errors;
-      }
-      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?.__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.
+    /** 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 = (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.
      */
-    onChange = (formData, newErrorSchema, id) => {
+    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 (utils.isObject(formData) || Array.isArray(formData)) {
-        const newState = this.getStateFromProps(this.props, formData);
+        if (!isRootPath) {
+          set(formData, path, newValue);
+        }
+        const newState = this.getStateFromProps(this.props, formData, void 0, void 0, void 0, true);
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
       }
@@ -4151,38 +4341,54 @@
           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 = utils.validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (newErrorSchema) {
-          const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-          errorSchema = utils.mergeObjects(errorSchema, filteredErrors, "preventDuplicates");
+      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);
+          }
         }
-        state = {
-          formData: newFormData,
-          errors,
-          errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        };
+      } else if (customErrors && get2(customErrors.ErrorSchema, [...path, utils.ERRORS_KEY])) {
+        customErrors.clearErrors(path);
+      }
+      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 ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
         state = {
           formData: newFormData,
-          errorSchema,
-          errors: utils.toErrorList(errorSchema)
+          ...mergedErrors,
+          customErrors
         };
       }
-      this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-    };
+      this.setState(state, () => {
+        if (onChange) {
+          onChange({ ...this.state, ...state }, id);
+        }
+        this.pendingChanges.shift();
+        this.processPendingChange();
+      });
+    }
     /**
      * If the retrievedSchema has changed the new retrievedSchema is returned.
      * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -4211,7 +4417,9 @@
         errorSchema: {},
         errors: [],
         schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
+        schemaValidationErrorSchema: {},
+        initialDefaultsGenerated: false,
+        customErrors: void 0
       };
       this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
     };
@@ -4277,10 +4485,26 @@
         );
       }
     };
+    /** 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 = utils.DEFAULT_ID_SEPARATOR,
+        idPrefix = utils.DEFAULT_ID_PREFIX
+      } = props;
+      const rootFieldId = uiSchema["ui:rootFieldId"];
+      return { idPrefix: rootFieldId || idPrefix, idSeparator, experimental_componentUpdateStrategy };
+    }
     /** Returns the registry for the form */
     getRegistry() {
       const { translateString: customTranslateString, uiSchema = {} } = this.props;
-      const { schemaUtils } = this.state;
+      const { schema, schemaUtils } = this.state;
       const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
       return {
         fields: { ...fields2, ...this.props.fields },
@@ -4293,11 +4517,12 @@
           }
         },
         widgets: { ...widgets2, ...this.props.widgets },
-        rootSchema: this.props.schema,
+        rootSchema: schema,
         formContext: this.props.formContext || formContext,
         schemaUtils,
         translateString: customTranslateString || translateString,
-        globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
+        globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY],
+        globalFormOptions: this.getGlobalFormOptions(this.props)
       };
     }
     /** Provides a function that can be used to programmatically submit the `Form` */
@@ -4412,8 +4637,6 @@
       const {
         children,
         id,
-        idPrefix,
-        idSeparator,
         className = "",
         tagName,
         name,
@@ -4426,11 +4649,10 @@
         noHtml5Validate = false,
         disabled,
         readonly,
-        formContext,
         showErrorList = "top",
         _internalFormWrapper
       } = this.props;
-      const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
+      const { schema, uiSchema, formData, errorSchema, fieldPathId } = this.state;
       const registry = this.getRegistry();
       const { SchemaField: _SchemaField } = registry.fields;
       const { SubmitButton: SubmitButton2 } = registry.templates.ButtonTemplates;
@@ -4466,10 +4688,7 @@
                 schema,
                 uiSchema,
                 errorSchema,
-                idSchema,
-                idPrefix,
-                idSeparator,
-                formContext,
+                fieldPathId,
                 formData,
                 onChange: this.onChange,
                 onBlur: this.onBlur,
@@ -4513,6 +4732,20 @@
       }
     );
   }
+  function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = { idPrefix: utils.DEFAULT_ID_PREFIX, idSeparator: utils.DEFAULT_ID_SEPARATOR }) {
+    const defaults = getDefaultRegistry();
+    const schemaUtils = utils.createSchemaUtils(validator, rootSchema);
+    return {
+      fields: { ...defaults.fields, ...fields2 },
+      templates: { ...defaults.templates, ...templates2 },
+      widgets: { ...defaults.widgets, ...widgets2 },
+      formContext,
+      rootSchema,
+      schemaUtils,
+      translateString: utils.englishStringTranslator,
+      globalFormOptions
+    };
+  }
 
   // src/index.ts
   var index_default = Form;
@@ -4520,6 +4753,7 @@
   exports.RichDescription = RichDescription;
   exports.default = index_default;
   exports.getDefaultRegistry = getDefaultRegistry;
+  exports.getTestRegistry = getTestRegistry;
   exports.withTheme = withTheme;
 
   Object.defineProperty(exports, '__esModule', { value: true });