@rjsf/core 6.0.0-alpha.0 → 6.0.0-beta.1

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/toPath'), require('lodash/cloneDeep'), require('lodash/isObject'), require('lodash/set'), require('nanoid'), require('react/jsx-runtime'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/has'), require('lodash/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/toPath', 'lodash/cloneDeep', 'lodash/isObject', 'lodash/set', 'nanoid', 'react/jsx-runtime', 'lodash/omit', 'markdown-to-jsx', 'lodash/has', 'lodash/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._forEach, global.get3, global.isEmpty, global._pick, global._toPath, global.cloneDeep, global.isObject, global.set, global.nanoid, global.jsxRuntime, global.omit2, global.Markdown, global.has, global.unset));
-})(this, (function (exports, react, utils, _forEach, get3, isEmpty, _pick, _toPath, cloneDeep, isObject, set, nanoid, jsxRuntime, omit2, Markdown, has, unset) { 'use strict';
+  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';
 
   // src/components/Form.tsx
   function generateRowId() {
@@ -29,189 +29,6 @@
      */
     constructor(props) {
       super(props);
-      /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-       * that the schema is fixed and allows additional items.
-       */
-      this._getNewFormDataRow = () => {
-        const { schema, registry } = this.props;
-        const { schemaUtils } = registry;
-        let itemSchema = schema.items;
-        if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
-          itemSchema = schema.additionalItems;
-        }
-        return schemaUtils.getDefaultFormState(itemSchema);
-      };
-      /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-       * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-       * keyed data
-       *
-       * @param event - The event for the click
-       */
-      this.onAddClick = (event) => {
-        this._handleAddClick(event);
-      };
-      /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
-       * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the add button is clicked
-       */
-      this.onAddIndexClick = (index) => {
-        return (event) => {
-          this._handleAddClick(event, index);
-        };
-      };
-      /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
-       * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the copy button is clicked
-       */
-      this.onCopyIndexClick = (index) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-          }
-          const { onChange, errorSchema } = this.props;
-          const { keyedFormData } = this.state;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i <= index) {
-                set(newErrorSchema, [i], errorSchema[idx]);
-              } else if (i > index) {
-                set(newErrorSchema, [i + 1], errorSchema[idx]);
-              }
-            }
-          }
-          const newKeyedFormDataRow = {
-            key: generateRowId(),
-            item: cloneDeep(keyedFormData[index].item)
-          };
-          const newKeyedFormData = [...keyedFormData];
-          if (index !== void 0) {
-            newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
-          } else {
-            newKeyedFormData.push(newKeyedFormDataRow);
-          }
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData,
-              updatedKeyedFormData: true
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
-       * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
-       * from the keyed data
-       *
-       * @param index - The index at which the remove button is clicked
-       */
-      this.onDropIndexClick = (index) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-          }
-          const { onChange, errorSchema } = this.props;
-          const { keyedFormData } = this.state;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i < index) {
-                set(newErrorSchema, [i], errorSchema[idx]);
-              } else if (i > index) {
-                set(newErrorSchema, [i - 1], errorSchema[idx]);
-              }
-            }
-          }
-          const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData,
-              updatedKeyedFormData: true
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
-       * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
-       * plain form data converted from the keyed data
-       *
-       * @param index - The index of the item to move
-       * @param newIndex - The index to where the item is to be moved
-       */
-      this.onReorderClick = (index, newIndex) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-            event.currentTarget.blur();
-          }
-          const { onChange, errorSchema } = this.props;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i == index) {
-                set(newErrorSchema, [newIndex], errorSchema[index]);
-              } else if (i == newIndex) {
-                set(newErrorSchema, [index], errorSchema[newIndex]);
-              } else {
-                set(newErrorSchema, [idx], errorSchema[i]);
-              }
-            }
-          }
-          const { keyedFormData } = this.state;
-          function reOrderArray() {
-            const _newKeyedFormData = keyedFormData.slice();
-            _newKeyedFormData.splice(index, 1);
-            _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-            return _newKeyedFormData;
-          }
-          const newKeyedFormData = reOrderArray();
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
-       * `onChange` callback with the updated form data
-       *
-       * @param index - The index of the item being changed
-       */
-      this.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;
-          });
-          onChange(
-            newFormData,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [index]: newErrorSchema
-            },
-            id
-          );
-        };
-      };
-      /** Callback handler used to change the value for a checkbox */
-      this.onSelectChange = (value) => {
-        const { onChange, idSchema } = this.props;
-        onChange(value, void 0, idSchema && idSchema.$id);
-      };
       const { formData = [] } = props;
       const keyedFormData = generateKeyedFormData(formData);
       this.state = {
@@ -249,10 +66,10 @@
     get itemTitle() {
       const { schema, registry } = this.props;
       const { translateString } = registry;
-      return get3(
+      return get2(
         schema,
         [utils.ITEMS_KEY, "title"],
-        get3(schema, [utils.ITEMS_KEY, "description"], translateString(utils.TranslatableString.ArrayItemTitle))
+        get2(schema, [utils.ITEMS_KEY, "description"], translateString(utils.TranslatableString.ArrayItemTitle))
       );
     }
     /** Determines whether the item described in the schema is always required, which is determined by whether any item
@@ -286,6 +103,18 @@
       }
       return addable;
     }
+    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+     * that the schema is fixed and allows additional items.
+     */
+    _getNewFormDataRow = () => {
+      const { schema, registry } = this.props;
+      const { schemaUtils } = registry;
+      let itemSchema = schema.items;
+      if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
+        itemSchema = schema.additionalItems;
+      }
+      return schemaUtils.getDefaultFormState(itemSchema);
+    };
     /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
      * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
      * the state, and then returning `onChange()` with the plain form data converted from the keyed data
@@ -329,6 +158,177 @@
         () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
       );
     }
+    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+     * keyed data
+     *
+     * @param event - The event for the click
+     */
+    onAddClick = (event) => {
+      this._handleAddClick(event);
+    };
+    /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+     * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the add button is clicked
+     */
+    onAddIndexClick = (index) => {
+      return (event) => {
+        this._handleAddClick(event, index);
+      };
+    };
+    /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
+     * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the copy button is clicked
+     */
+    onCopyIndexClick = (index) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+        }
+        const { onChange, errorSchema } = this.props;
+        const { keyedFormData } = this.state;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i <= index) {
+              set(newErrorSchema, [i], errorSchema[idx]);
+            } else if (i > index) {
+              set(newErrorSchema, [i + 1], errorSchema[idx]);
+            }
+          }
+        }
+        const newKeyedFormDataRow = {
+          key: generateRowId(),
+          item: cloneDeep2(keyedFormData[index].item)
+        };
+        const newKeyedFormData = [...keyedFormData];
+        if (index !== void 0) {
+          newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
+        } else {
+          newKeyedFormData.push(newKeyedFormDataRow);
+        }
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+     * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+     * from the keyed data
+     *
+     * @param index - The index at which the remove button is clicked
+     */
+    onDropIndexClick = (index) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+        }
+        const { onChange, errorSchema } = this.props;
+        const { keyedFormData } = this.state;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i < index) {
+              set(newErrorSchema, [i], errorSchema[idx]);
+            } else if (i > index) {
+              set(newErrorSchema, [i - 1], errorSchema[idx]);
+            }
+          }
+        }
+        const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+     * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+     * plain form data converted from the keyed data
+     *
+     * @param index - The index of the item to move
+     * @param newIndex - The index to where the item is to be moved
+     */
+    onReorderClick = (index, newIndex) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+        const { onChange, errorSchema } = this.props;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i == index) {
+              set(newErrorSchema, [newIndex], errorSchema[index]);
+            } else if (i == newIndex) {
+              set(newErrorSchema, [index], errorSchema[newIndex]);
+            } else {
+              set(newErrorSchema, [idx], errorSchema[i]);
+            }
+          }
+        }
+        const { keyedFormData } = this.state;
+        function reOrderArray() {
+          const _newKeyedFormData = keyedFormData.slice();
+          _newKeyedFormData.splice(index, 1);
+          _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+          return _newKeyedFormData;
+        }
+        const newKeyedFormData = reOrderArray();
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+     * `onChange` callback with the updated form data
+     *
+     * @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;
+        });
+        onChange(
+          newFormData,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [index]: 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);
+    };
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     render() {
@@ -423,7 +423,7 @@
             totalItems: keyedFormData.length
           });
         }),
-        className: `field field-array field-array-of-${itemsSchema.type}`,
+        className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
         disabled,
         idSchema,
         uiSchema,
@@ -631,7 +631,7 @@
       const canAdd = this.canAddItem(items) && !!additionalSchema;
       const arrayProps = {
         canAdd,
-        className: "field field-array field-array-fixed-items",
+        className: "rjsf-field rjsf-field-array rjsf-field-array-fixed-items",
         disabled,
         idSchema,
         formData,
@@ -712,14 +712,14 @@
       } = registry;
       const ItemSchemaField = ArraySchemaField || SchemaField2;
       const { orderable = true, removable = true, copyable = false } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const has2 = {
+      const has4 = {
         moveUp: orderable && canMoveUp,
         moveDown: orderable && canMoveDown,
         copy: copyable && canAdd,
         remove: removable && canRemove,
         toolbar: false
       };
-      has2.toolbar = Object.keys(has2).some((key2) => has2[key2]);
+      has4.toolbar = Object.keys(has4).some((key2) => has4[key2]);
       return {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ItemSchemaField,
@@ -747,21 +747,31 @@
             rawErrors
           }
         ),
-        className: "array-item",
+        buttonsProps: {
+          idSchema: itemIdSchema,
+          disabled,
+          readonly,
+          canAdd,
+          hasCopy: has4.copy,
+          hasMoveUp: has4.moveUp,
+          hasMoveDown: has4.moveDown,
+          hasRemove: has4.remove,
+          index,
+          totalItems,
+          onAddIndexClick: this.onAddIndexClick,
+          onCopyIndexClick: this.onCopyIndexClick,
+          onDropIndexClick: this.onDropIndexClick,
+          onReorderClick: this.onReorderClick,
+          registry,
+          schema: itemSchema,
+          uiSchema: itemUiSchema
+        },
+        className: "rjsf-array-item",
         disabled,
-        canAdd,
-        hasCopy: has2.copy,
-        hasToolbar: has2.toolbar,
-        hasMoveUp: has2.moveUp,
-        hasMoveDown: has2.moveDown,
-        hasRemove: has2.remove,
+        hasToolbar: has4.toolbar,
         index,
         totalItems,
         key,
-        onAddIndexClick: this.onAddIndexClick,
-        onCopyIndexClick: this.onCopyIndexClick,
-        onDropIndexClick: this.onDropIndexClick,
-        onReorderClick: this.onReorderClick,
         readonly,
         registry,
         schema: itemSchema,
@@ -796,6 +806,7 @@
       title: uiTitle,
       // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
       label: displayLabel = true,
+      enumNames,
       ...options
     } = utils.getUiOptions(uiSchema, globalUiOptions);
     const Widget = utils.getWidget(schema, widget, widgets2);
@@ -820,9 +831,8 @@
         uiSchema
       );
     } else {
-      const schemaWithEnumNames = schema;
       const enums = schema.enum ?? [true, false];
-      if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
+      if (!enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
         enumOptions = [
           {
             value: enums[0],
@@ -834,42 +844,717 @@
           }
         ];
       } else {
-        enumOptions = utils.optionsList(
+        enumOptions = utils.optionsList({ enum: enums }, uiSchema);
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        options: { ...options, enumOptions },
+        schema,
+        uiSchema,
+        id: idSchema.$id,
+        name,
+        onChange,
+        onFocus,
+        onBlur,
+        label,
+        hideLabel: !displayLabel,
+        value: formData,
+        required,
+        disabled,
+        readonly,
+        hideError,
+        registry,
+        formContext,
+        autofocus,
+        rawErrors
+      }
+    );
+  }
+  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;
+  }
+  var LayoutGridField = class _LayoutGridField extends react.PureComponent {
+    static defaultProps = {
+      layoutGridSchema: void 0
+    };
+    static TEST_IDS = utils.getTestIds();
+    /** Computes the uiSchema for the field with `name` from the `uiProps` and `uiSchema` provided. The field UI Schema
+     * will always contain a copy of the global options from the `uiSchema` (so they can be passed down) as well as
+     * copying them into the local ui options. When the `forceReadonly` flag is true, then the field UI Schema is
+     * updated to make "readonly" be true. When the `schemaReadonly` flag is true AND the field UI Schema does NOT have
+     * the flag already provided, then we also make "readonly" true. We always make sure to return the final value of the
+     * field UI Schema's "readonly" flag as `uiReadonly` along with the `fieldUiSchema` in the return value.
+     *
+     * @param field - The name of the field to pull the existing UI Schema for
+     * @param uiProps - Any props that should be put into the field's uiSchema
+     * @param [uiSchema] - The optional UI Schema from which to get the UI schema for the field
+     * @param [schemaReadonly] - Optional flag indicating whether the schema indicates the field is readonly
+     * @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 localUiSchema = get2(uiSchema, field);
+      const localUiOptions = { ...get2(localUiSchema, [utils.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+      const fieldUiSchema = { ...localUiSchema };
+      if (!isEmpty(localUiOptions)) {
+        set(fieldUiSchema, [utils.UI_OPTIONS_KEY], localUiOptions);
+      }
+      if (!isEmpty(globalUiOptions)) {
+        set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+      }
+      let { readonly: uiReadonly } = utils.getUiOptions(fieldUiSchema);
+      if (forceReadonly === true || isUndefined(uiReadonly) && schemaReadonly === true) {
+        uiReadonly = true;
+        if (has(localUiOptions, utils.READONLY_KEY)) {
+          set(fieldUiSchema, [utils.UI_OPTIONS_KEY, utils.READONLY_KEY], true);
+        } else {
+          set(fieldUiSchema, `ui:${utils.READONLY_KEY}`, true);
+        }
+      }
+      return { fieldUiSchema, uiReadonly };
+    }
+    /** Given an `operator`, `datum` and `value` determines whether this condition is considered matching. Matching
+     * depends on the `operator`. The `datum` and `value` are converted into arrays if they aren't already and then the
+     * contents of the two arrays are compared using the `operator`. When `operator` is All, then the two arrays must be
+     * equal to match. When `operator` is SOME then the intersection of the two arrays must have at least one value in
+     * common to match. When `operator` is NONE then the intersection of the two arrays must not have any values in common
+     * to match.
+     *
+     * @param [operator] - The optional operator for the condition
+     * @param [datum] - The optional datum for the condition, this can be an item or a list of items of type unknown
+     * @param [value='$0m3tH1nG Un3xP3cT3d'] The optional value for the condition, defaulting to a highly unlikely value
+     *        to avoid comparing two undefined elements when `value` was forgotten in the condition definition.
+     *        This can be an item or a list of items of type unknown
+     * @returns - True if the condition matches, false otherwise
+     */
+    static conditionMatches(operator, datum, value = "$0m3tH1nG Un3xP3cT3d") {
+      const data = flatten([datum]).sort();
+      const values = flatten([value]).sort();
+      switch (operator) {
+        case "all" /* ALL */:
+          return isEqual(data, values);
+        case "some" /* SOME */:
+          return intersection(data, values).length > 0;
+        case "none" /* NONE */:
+          return intersection(data, values).length === 0;
+        default:
+          return false;
+      }
+    }
+    /** From within the `layoutGridSchema` finds the `children` and any extra `gridProps` from the object keyed by
+     * `schemaKey`. If the `children` contains extra `gridProps` and those props contain a `className` string, try to
+     * lookup whether that `className` has a replacement value in the `registry` using the `FORM_CONTEXT_LOOKUP_BASE`.
+     * When the `className` value contains multiple classNames separated by a space, the lookup will look for a
+     * replacement value for each `className` and combine them into one.
+     *
+     * @param layoutGridSchema - The GridSchemaType instance from which to obtain the `schemaKey` children and extra props
+     * @param schemaKey - A `GridType` value, used to get the children and extra props from within the `layoutGridSchema`
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @returns - An object containing the list of `LayoutGridSchemaType` `children` and any extra `gridProps`
+     * @throws - A `TypeError` when the `children` is not an array
+     */
+    static findChildrenAndProps(layoutGridSchema, schemaKey, registry) {
+      let gridProps = {};
+      let children = layoutGridSchema[schemaKey];
+      if (isPlainObject(children)) {
+        const { children: elements, className: toMapClassNames, ...otherProps } = children;
+        children = elements;
+        if (toMapClassNames) {
+          const classes = toMapClassNames.split(" ");
+          const className = classes.map((ele) => utils.lookupFromFormContext(registry, ele, ele)).join(" ");
+          gridProps = { ...otherProps, className };
+        } else {
+          gridProps = otherProps;
+        }
+      }
+      if (!Array.isArray(children)) {
+        throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
+      }
+      return { children, gridProps };
+    }
+    /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
+     * as the id prefix.
+     *
+     * @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`
+     */
+    static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
+      const baseId = get2(baseIdSchema, utils.ID_KEY);
+      return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+    }
+    /** 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 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
+     * @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) {
+      let rawSchema = initialSchema;
+      let idSchema = initialIdSchema;
+      const parts = dottedPath.split(".");
+      const leafPath = parts.pop();
+      let schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      let innerData = formData;
+      let isReadonly = schema.readOnly;
+      parts.forEach((part) => {
+        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 = {};
+        }
+        innerData = get2(innerData, part, {});
+        schema = schemaUtils.retrieveSchema(rawSchema, innerData);
+        isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
+      });
+      let optionsInfo;
+      let isRequired = false;
+      if (isEmpty(schema)) {
+        schema = void 0;
+      }
+      if (schema && leafPath) {
+        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);
+        }
+        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, {});
+        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;
+          const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+          optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
+        }
+      }
+      return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+    }
+    /** 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,
+     * null is returned.
+     *
+     * @param render - The potential render function or lookup name to one
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @returns - Either a render function if available, or null if not
+     */
+    static getCustomRenderComponent(render, registry) {
+      let customRenderer = render;
+      if (isString(customRenderer)) {
+        customRenderer = utils.lookupFromFormContext(registry, customRenderer);
+      }
+      if (isFunction(customRenderer)) {
+        return customRenderer;
+      }
+      return null;
+    }
+    /** Extract the `name`, and optional `render` and all other props from the `gridSchema`. We look up the `render` to
+     * see if can be resolved to a UIComponent. If `name` does not exist and there is an optional `render` UIComponent, we
+     * set the `rendered` component with only specified props for that component in the object.
+     *
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @param gridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The UIComponentPropsType computed from the gridSchema
+     */
+    static computeUIComponentPropsFromGridSchema(registry, gridSchema) {
+      let name;
+      let UIComponent = null;
+      let uiProps = {};
+      let rendered;
+      if (isString(gridSchema) || isUndefined(gridSchema)) {
+        name = gridSchema ?? "";
+      } else {
+        const { name: innerName, render, ...innerProps } = gridSchema;
+        name = innerName;
+        uiProps = innerProps;
+        if (!isEmpty(uiProps)) {
+          each(uiProps, (prop, key) => {
+            if (isString(prop)) {
+              const match = LOOKUP_REGEX.exec(prop);
+              if (Array.isArray(match) && match.length > 1) {
+                const name2 = match[1];
+                uiProps[key] = utils.lookupFromFormContext(registry, name2, name2);
+              }
+            }
+          });
+        }
+        UIComponent = _LayoutGridField.getCustomRenderComponent(render, registry);
+        if (!innerName && UIComponent) {
+          rendered = /* @__PURE__ */ jsxRuntime.jsx(UIComponent, { ...innerProps, "data-testid": _LayoutGridField.TEST_IDS.uiComponent });
+        }
+      }
+      return { name, UIComponent, uiProps, rendered };
+    }
+    /** Constructs an `LayoutGridField` with the given `props`
+     *
+     * @param props - The `LayoutGridField` for this template
+     */
+    constructor(props) {
+      super(props);
+    }
+    /** Generates an `onChange` handler for the field associated with the `dottedPath`. This handler will clone and update
+     * the `formData` with the new `value` and the `errorSchema` if an `errSchema` is provided. After updating those two
+     * 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
+     */
+    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);
+      };
+    };
+    /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
+     * `GridType.CONDITION` is separated into the `children` and other `gridProps`. The `gridProps` are used to extract
+     * the `operator`, `field` and `value` of the condition. If the condition matches, then all of the `children` are
+     * rendered, otherwise null is returned.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered the children for the `GridType.CONDITION` or null
+     */
+    renderCondition(layoutGridSchema) {
+      const { formData, registry } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:condition" /* CONDITION */,
+        registry
+      );
+      const { operator, field = "", value } = gridProps;
+      const fieldData = get2(formData, field, null);
+      if (_LayoutGridField.conditionMatches(operator, fieldData, value)) {
+        return this.renderChildren(children);
+      }
+      return null;
+    }
+    /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMN` is separated
+     * into the `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside
+     * the `GridTemplate` all the `children` are rendered.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMN`
+     */
+    renderCol(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:col" /* COLUMN */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
+      return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { column: true, "data-testid": _LayoutGridField.TEST_IDS.col, ...gridProps, children: this.renderChildren(children) });
+    }
+    /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMNS` is separated
+     * into the `children` and other `gridProps`. The `children` is iterated on and `gridProps` will be spread onto the
+     * outer `GridTemplate`. Each child will have their own rendered `GridTemplate`.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMNS`
+     */
+    renderColumns(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:columns" /* COLUMNS */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
+      return children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        GridTemplate2,
+        {
+          column: true,
+          "data-testid": _LayoutGridField.TEST_IDS.col,
+          ...gridProps,
+          children: this.renderChildren([child])
+        },
+        `column-${utils.hashObject(child)}`
+      ));
+    }
+    /** Renders a material-ui `GridTemplate` as a container. The
+     * `layoutGridSchema` for the `GridType.ROW` is separated into the `children` and other `gridProps`. The `gridProps`
+     * will be spread onto the outer `GridTemplate`. Inside of the `GridTemplate` all of the `children` are rendered.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.ROW`
+     */
+    renderRow(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:row" /* ROW */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      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
+     * 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`.
+     *
+     * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+     *          children fields
+     * @returns - The nested `LayoutGridField`s
+     */
+    renderChildren(childrenLayoutGridSchema) {
+      const { registry, schema: rawSchema, formData } = this.props;
+      const { schemaUtils } = registry;
+      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
+        _LayoutGridField,
+        {
+          ...this.props,
+          key: `layoutGrid-${utils.hashObject(layoutGridSchema)}`,
+          schema,
+          layoutGridSchema
+        }
+      ));
+    }
+    /** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
+     * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
+     * other props. If `name` does not exist and there is an optional `render`, we return the `render` component with only
+     * 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
+     * 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
+     * handling props. If none of the previous render paths are valid, then a null is returned.
+     *
+     * @param gridSchema - The string or object that represents the configuration for the grid field
+     * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
+     */
+    renderField(gridSchema) {
+      const {
+        schema: initialSchema,
+        uiSchema,
+        errorSchema,
+        idSchema,
+        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 { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
+      const uiComponentProps = _LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
+      if (uiComponentProps.rendered) {
+        return uiComponentProps.rendered;
+      }
+      const { name, UIComponent, uiProps } = uiComponentProps;
+      const {
+        schema,
+        isRequired,
+        isReadonly,
+        optionsInfo,
+        idSchema: fieldIdSchema
+      } = _LayoutGridField.getSchemaDetailsForField(
+        schemaUtils,
+        name,
+        initialSchema,
+        formData,
+        idSchema,
+        idSeparator
+      );
+      if (schema) {
+        const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
+        const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
+          name,
+          uiProps,
+          uiSchema,
+          isReadonly,
+          readonly
+        );
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Field,
           {
-            enum: enums,
-            // NOTE: enumNames is deprecated, but still supported for now.
-            enumNames: schemaWithEnumNames.enumNames
-          },
-          uiSchema
+            "data-testid": optionsInfo?.hasDiscriminator ? _LayoutGridField.TEST_IDS.layoutMultiSchemaField : _LayoutGridField.TEST_IDS.field,
+            ...otherProps,
+            name,
+            required: isRequired,
+            readonly: uiReadonly,
+            schema,
+            uiSchema: fieldUiSchema,
+            errorSchema: get2(errorSchema, name),
+            idSchema: fieldIdSchema,
+            idSeparator,
+            formData: get2(formData, name),
+            onChange: this.onFieldChange(name),
+            onBlur,
+            onFocus,
+            options: optionsInfo?.options,
+            registry
+          }
+        );
+      }
+      if (UIComponent) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          UIComponent,
+          {
+            "data-testid": _LayoutGridField.TEST_IDS.uiComponent,
+            ...otherProps,
+            name,
+            required: isRequired,
+            formData,
+            readOnly: !!isReadonly || readonly,
+            errorSchema,
+            uiSchema,
+            schema: initialSchema,
+            idSchema,
+            idSeparator,
+            onBlur,
+            onFocus,
+            registry,
+            ...uiProps
+          }
         );
       }
+      return null;
+    }
+    /** Renders the `LayoutGridField`. If there isn't a `layoutGridSchema` prop defined, then try pulling it out of the
+     * `uiSchema` via `ui:LayoutGridField`. If `layoutGridSchema` is an object, then check to see if any of the properties
+     * match one of the `GridType`s. If so, call the appropriate render function for the type. Otherwise, just call the
+     * generic `renderField()` function with the `layoutGridSchema`.
+     *
+     * @returns - the rendered `LayoutGridField`
+     */
+    render() {
+      const { uiSchema } = this.props;
+      let { layoutGridSchema } = this.props;
+      const uiOptions = utils.getUiOptions(uiSchema);
+      if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject(uiOptions[LAYOUT_GRID_UI_OPTION])) {
+        layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
+      }
+      if (isObject(layoutGridSchema)) {
+        if ("ui:row" /* ROW */ in layoutGridSchema) {
+          return this.renderRow(layoutGridSchema);
+        }
+        if ("ui:col" /* COLUMN */ in layoutGridSchema) {
+          return this.renderCol(layoutGridSchema);
+        }
+        if ("ui:columns" /* COLUMNS */ in layoutGridSchema) {
+          return this.renderColumns(layoutGridSchema);
+        }
+        if ("ui:condition" /* CONDITION */ in layoutGridSchema) {
+          return this.renderCondition(layoutGridSchema);
+        }
+      }
+      return this.renderField(layoutGridSchema);
+    }
+  };
+  function LayoutHeaderField(props) {
+    const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+    const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
+    const { title: uiTitle } = options;
+    const { title: schemaTitle } = schema;
+    const fieldTitle = uiTitle || title || schemaTitle || name;
+    if (!fieldTitle) {
+      return null;
+    }
+    const TitleFieldTemplate = utils.getTemplate(
+      "TitleFieldTemplate",
+      registry,
+      options
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TitleFieldTemplate,
+      {
+        id: utils.titleId(idSchema),
+        title: fieldTitle,
+        required,
+        schema,
+        uiSchema,
+        registry
+      }
+    );
+  }
+  function getSelectedOption(options, selectorField, value) {
+    const defaultValue = "!@#!@$@#$!@$#";
+    const schemaOptions = options.map(({ schema }) => schema);
+    return schemaOptions.find((option) => {
+      const selector = get2(option, [utils.PROPERTIES_KEY, selectorField]);
+      const result = get2(selector, utils.DEFAULT_KEY, get2(selector, utils.CONST_KEY, defaultValue));
+      return result === value;
+    });
+  }
+  function computeEnumOptions(schema, options, schemaUtils, uiSchema, formData) {
+    const realOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
+    let tempSchema = schema;
+    if (has(schema, utils.ONE_OF_KEY)) {
+      tempSchema = { ...schema, [utils.ONE_OF_KEY]: realOptions };
+    } else if (has(schema, utils.ANY_OF_KEY)) {
+      tempSchema = { ...schema, [utils.ANY_OF_KEY]: realOptions };
+    }
+    const enumOptions = utils.optionsList(tempSchema, uiSchema);
+    if (!enumOptions) {
+      throw new Error(`No enumOptions were computed from the schema ${JSON.stringify(tempSchema)}`);
+    }
+    return enumOptions;
+  }
+  function LayoutMultiSchemaField(props) {
+    const {
+      name,
+      baseType,
+      disabled = false,
+      formData,
+      idSchema,
+      onBlur,
+      onChange,
+      options,
+      onFocus,
+      registry,
+      uiSchema,
+      schema,
+      formContext,
+      autofocus,
+      readonly,
+      required,
+      errorSchema,
+      hideError = false
+    } = 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 discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+    const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, options);
+    const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, options);
+    const schemaHash = utils.hashObject(schema);
+    const optionsHash = utils.hashObject(options);
+    const uiSchemaHash = uiSchema ? utils.hashObject(uiSchema) : "";
+    const formDataHash = formData ? utils.hashObject(formData) : "";
+    react.useEffect(() => {
+      setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
+    const {
+      widget = discriminator ? "radio" : "select",
+      title = "",
+      placeholder = "",
+      optionsSchemaSelector: selectorField = discriminator,
+      hideError: uiSchemaHideError,
+      ...uiOptions
+    } = utils.getUiOptions(uiSchema);
+    if (!selectorField) {
+      throw new Error("No selector field provided for the LayoutMultiSchemaField");
     }
+    const selectedOption = get2(formData, selectorField);
+    let optionSchema = get2(enumOptions[0]?.schema, [utils.PROPERTIES_KEY, selectorField], {});
+    const option = getSelectedOption(enumOptions, selectorField, selectedOption);
+    optionSchema = optionSchema?.type ? optionSchema : { ...optionSchema, type: option?.type || baseType };
+    const Widget = utils.getWidget(optionSchema, widget, widgets2);
+    const hideFieldError = uiSchemaHideError === void 0 ? hideError : Boolean(uiSchemaHideError);
+    const rawErrors = get2(errorSchema, [utils.ERRORS_KEY], []);
+    const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const onOptionChange = (opt) => {
+      const newOption = getSelectedOption(enumOptions, selectorField, opt);
+      const oldOption = getSelectedOption(enumOptions, selectorField, selectedOption);
+      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      if (newFormData && newOption) {
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+      }
+      if (newFormData) {
+        set(newFormData, selectorField, opt);
+      }
+      onChange(newFormData, 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 ignored = (value) => noop;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Widget,
+      FieldTemplate2,
       {
-        options: { ...options, enumOptions },
+        id,
         schema,
+        label: (title || schema.title) ?? "",
+        disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
         uiSchema,
-        id: idSchema.$id,
-        name,
-        onChange,
-        onFocus,
-        onBlur,
-        label,
-        hideLabel: !displayLabel,
-        value: formData,
+        formContext,
         required,
-        disabled,
-        readonly,
-        hideError,
+        readonly: !!readonly,
         registry,
-        formContext,
-        autofocus,
-        rawErrors
+        displayLabel,
+        errors,
+        onChange,
+        onDropPropertyClick: ignored,
+        onKeyChange: ignored,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Widget,
+          {
+            id,
+            name,
+            schema,
+            label: (title || schema.title) ?? "",
+            disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
+            uiSchema,
+            formContext,
+            autofocus,
+            readonly,
+            required,
+            registry,
+            multiple: false,
+            rawErrors,
+            hideError: hideFieldError,
+            hideLabel: !displayLabel,
+            errorSchema: fieldErrorSchema,
+            placeholder,
+            onChange: onOptionChange,
+            onBlur,
+            onFocus,
+            value: selectedOption,
+            options: widgetOptions
+          }
+        )
       }
     );
   }
-  var BooleanField_default = BooleanField;
   var AnyOfField = class extends react.Component {
     /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
      *
@@ -877,29 +1562,6 @@
      */
     constructor(props) {
       super(props);
-      /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-       * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-       * the `onChange` handler.
-       *
-       * @param option - The new option value being selected
-       */
-      this.onOptionChange = (option) => {
-        const { selectedOption, retrievedOptions } = this.state;
-        const { formData, onChange, registry } = this.props;
-        const { schemaUtils } = registry;
-        const intOption = option !== void 0 ? parseInt(option, 10) : -1;
-        if (intOption === selectedOption) {
-          return;
-        }
-        const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
-        const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
-        let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-        if (newFormData && newOption) {
-          newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
-        }
-        onChange(newFormData, void 0, this.getFieldId());
-        this.setState({ selectedOption: intOption });
-      };
       const {
         formData,
         options,
@@ -954,6 +1616,30 @@
       const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
       return option;
     }
+    /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
+     * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
+     * the `onChange` handler.
+     *
+     * @param option - The new option value being selected
+     */
+    onOptionChange = (option) => {
+      const { selectedOption, retrievedOptions } = this.state;
+      const { formData, onChange, registry } = this.props;
+      const { schemaUtils } = registry;
+      const intOption = option !== void 0 ? parseInt(option, 10) : -1;
+      if (intOption === selectedOption) {
+        return;
+      }
+      const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
+      const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
+      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      if (newOption) {
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+      }
+      this.setState({ selectedOption: intOption }, () => {
+        onChange(newFormData, void 0, this.getFieldId());
+      });
+    };
     getFieldId() {
       const { idSchema, schema } = this.props;
       return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
@@ -968,6 +1654,7 @@
         formContext,
         onBlur,
         onFocus,
+        readonly,
         registry,
         schema,
         uiSchema
@@ -984,8 +1671,8 @@
         ...uiOptions
       } = utils.getUiOptions(uiSchema, globalUiOptions);
       const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
-      const rawErrors = get3(errorSchema, utils.ERRORS_KEY, []);
-      const fieldErrorSchema = omit2(errorSchema, [utils.ERRORS_KEY]);
+      const rawErrors = get2(errorSchema, utils.ERRORS_KEY, []);
+      const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
       const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
       const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
       let optionSchema;
@@ -1042,10 +1729,11 @@
             autocomplete,
             autofocus,
             label: title ?? name,
-            hideLabel: !displayLabel
+            hideLabel: !displayLabel,
+            readonly
           }
         ) }),
-        optionSchema && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
+        optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
       ] });
     }
   };
@@ -1058,13 +1746,13 @@
     const { StringField: StringField2 } = registry.fields;
     let value = formData;
     const handleChange = react.useCallback(
-      (value2) => {
+      (value2, 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);
+        onChange(processed, errorSchema, id);
       },
       [onChange]
     );
@@ -1078,134 +1766,11 @@
   }
   var NumberField_default = NumberField;
   var ObjectField = class extends react.Component {
-    constructor() {
-      super(...arguments);
-      /** Set up the initial state */
-      this.state = {
-        wasPropertyKeyModified: false,
-        additionalProperties: {}
-      };
-      /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-       * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-       * formData.
-       *
-       * @param name - The name of the property
-       * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-       * @returns - The onPropertyChange callback for the `name` property
-       */
-      this.onPropertyChange = (name, addedByAdditionalProperties = false) => {
-        return (value, newErrorSchema, id) => {
-          const { formData, onChange, errorSchema } = this.props;
-          if (value === void 0 && addedByAdditionalProperties) {
-            value = "";
-          }
-          const newFormData = { ...formData, [name]: value };
-          onChange(
-            newFormData,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [name]: newErrorSchema
-            },
-            id
-          );
-        };
-      };
-      /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
-       * and calls the `onChange` callback with it
-       *
-       * @param key - The key for which the drop callback is desired
-       * @returns - The drop property click callback
-       */
-      this.onDropPropertyClick = (key) => {
-        return (event) => {
-          event.preventDefault();
-          const { onChange, formData } = this.props;
-          const copiedFormData = { ...formData };
-          unset(copiedFormData, key);
-          onChange(copiedFormData);
-        };
-      };
-      /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
-       * that is already not assigned is found.
-       *
-       * @param preferredKey - The preferred name of a new key
-       * @param [formData] - The form data in which to check if the desired key already exists
-       * @returns - The name of the next available key from `preferredKey`
-       */
-      this.getAvailableKey = (preferredKey, formData) => {
-        const { uiSchema, registry } = this.props;
-        const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-        let index = 0;
-        let newKey = preferredKey;
-        while (has(formData, newKey)) {
-          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
-        }
-        return newKey;
-      };
-      /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
-       * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
-       *
-       * @param oldValue - The old value of a field
-       * @returns - The key change callback function
-       */
-      this.onKeyChange = (oldValue) => {
-        return (value, newErrorSchema) => {
-          if (oldValue === value) {
-            return;
-          }
-          const { formData, onChange, errorSchema } = this.props;
-          value = this.getAvailableKey(value, formData);
-          const newFormData = {
-            ...formData
-          };
-          const newKeys = { [oldValue]: value };
-          const keyValues = Object.keys(newFormData).map((key) => {
-            const newKey = newKeys[key] || key;
-            return { [newKey]: newFormData[key] };
-          });
-          const renamedObj = Object.assign({}, ...keyValues);
-          this.setState({ wasPropertyKeyModified: true });
-          onChange(
-            renamedObj,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [value]: newErrorSchema
-            }
-          );
-        };
-      };
-      /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
-       * default data for that field has been added to the formData.
-       *
-       * @param schema - The schema element to which the new property is being added
-       */
-      this.handleAddClick = (schema) => () => {
-        if (!schema.additionalProperties) {
-          return;
-        }
-        const { formData, onChange, registry } = this.props;
-        const newFormData = { ...formData };
-        let type = void 0;
-        let defaultValue = void 0;
-        if (isObject(schema.additionalProperties)) {
-          type = schema.additionalProperties.type;
-          defaultValue = schema.additionalProperties.default;
-          let apSchema = schema.additionalProperties;
-          if (utils.REF_KEY in apSchema) {
-            const { schemaUtils } = registry;
-            apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
-            type = apSchema.type;
-            defaultValue = apSchema.default;
-          }
-          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
-            type = "object";
-          }
-        }
-        const newKey = this.getAvailableKey("newKey", newFormData);
-        set(newFormData, newKey, defaultValue ?? this.getDefaultValue(type));
-        onChange(newFormData);
-      };
-    }
+    /** Set up the initial state */
+    state = {
+      wasPropertyKeyModified: false,
+      additionalProperties: {}
+    };
     /** Returns a flag indicating whether the `name` field is required in the object schema
      *
      * @param name - The name of the field to check for required-ness
@@ -1215,6 +1780,95 @@
       const { schema } = this.props;
       return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
     }
+    /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+     * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+     * formData.
+     *
+     * @param name - The name of the property
+     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+     * @returns - The onPropertyChange callback for the `name` property
+     */
+    onPropertyChange = (name, addedByAdditionalProperties = false) => {
+      return (value, newErrorSchema, id) => {
+        const { formData, onChange, errorSchema } = this.props;
+        if (value === void 0 && addedByAdditionalProperties) {
+          value = "";
+        }
+        const newFormData = { ...formData, [name]: value };
+        onChange(
+          newFormData,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [name]: newErrorSchema
+          },
+          id
+        );
+      };
+    };
+    /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
+     * and calls the `onChange` callback with it
+     *
+     * @param key - The key for which the drop callback is desired
+     * @returns - The drop property click callback
+     */
+    onDropPropertyClick = (key) => {
+      return (event) => {
+        event.preventDefault();
+        const { onChange, formData } = this.props;
+        const copiedFormData = { ...formData };
+        unset(copiedFormData, key);
+        onChange(copiedFormData);
+      };
+    };
+    /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
+     * that is already not assigned is found.
+     *
+     * @param preferredKey - The preferred name of a new key
+     * @param [formData] - The form data in which to check if the desired key already exists
+     * @returns - The name of the next available key from `preferredKey`
+     */
+    getAvailableKey = (preferredKey, formData) => {
+      const { uiSchema, registry } = this.props;
+      const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
+      let index = 0;
+      let newKey = preferredKey;
+      while (has(formData, newKey)) {
+        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+      }
+      return newKey;
+    };
+    /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+     * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+     *
+     * @param oldValue - The old value of a field
+     * @returns - The key change callback function
+     */
+    onKeyChange = (oldValue) => {
+      return (value, newErrorSchema) => {
+        if (oldValue === value) {
+          return;
+        }
+        const { formData, onChange, errorSchema } = this.props;
+        value = this.getAvailableKey(value, formData);
+        const newFormData = {
+          ...formData
+        };
+        const newKeys = { [oldValue]: value };
+        const keyValues = Object.keys(newFormData).map((key) => {
+          const newKey = newKeys[key] || key;
+          return { [newKey]: newFormData[key] };
+        });
+        const renamedObj = Object.assign({}, ...keyValues);
+        this.setState({ wasPropertyKeyModified: true });
+        onChange(
+          renamedObj,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [value]: newErrorSchema
+          }
+        );
+      };
+    };
     /** Returns a default value to be used for a new additional schema property of the given `type`
      *
      * @param type - The type of the new additional schema property
@@ -1239,6 +1893,45 @@
           return translateString(utils.TranslatableString.NewStringDefault);
       }
     }
+    /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+     * default data for that field has been added to the formData.
+     *
+     * @param schema - The schema element to which the new property is being added
+     */
+    handleAddClick = (schema) => () => {
+      if (!(schema.additionalProperties || schema.patternProperties)) {
+        return;
+      }
+      const { formData, onChange, registry } = this.props;
+      const newFormData = { ...formData };
+      const newKey = this.getAvailableKey("newKey", newFormData);
+      if (schema.patternProperties) {
+        set(newFormData, newKey, null);
+      } else {
+        let type = void 0;
+        let constValue = void 0;
+        let defaultValue = void 0;
+        if (isObject(schema.additionalProperties)) {
+          type = schema.additionalProperties.type;
+          constValue = schema.additionalProperties.const;
+          defaultValue = schema.additionalProperties.default;
+          let apSchema = schema.additionalProperties;
+          if (utils.REF_KEY in apSchema) {
+            const { schemaUtils } = registry;
+            apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
+            type = apSchema.type;
+            constValue = apSchema.const;
+            defaultValue = apSchema.default;
+          }
+          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
+            type = "object";
+          }
+        }
+        const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+        set(newFormData, newKey, newValue);
+      }
+      onChange(newFormData);
+    };
     /** Renders the `ObjectField` from the given props
      */
     render() {
@@ -1273,7 +1966,7 @@
         orderedProperties = utils.orderProperties(properties, uiOptions.order);
       } catch (err) {
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "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("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) })
         ] });
       }
@@ -1286,20 +1979,20 @@
           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 = get3(idSchema, [name2], {});
+          const fieldIdSchema = get2(idSchema, [name2], {});
           return {
             content: /* @__PURE__ */ jsxRuntime.jsx(
               SchemaField2,
               {
                 name: name2,
                 required: this.isRequired(name2),
-                schema: get3(schema, [utils.PROPERTIES_KEY, name2], {}),
+                schema: get2(schema, [utils.PROPERTIES_KEY, name2], {}),
                 uiSchema: fieldUiSchema,
-                errorSchema: get3(errorSchema, name2),
+                errorSchema: get2(errorSchema, name2),
                 idSchema: fieldIdSchema,
                 idPrefix,
                 idSeparator,
-                formData: get3(formData, name2),
+                formData: get2(formData, name2),
                 formContext,
                 wasPropertyKeyModified: this.state.wasPropertyKeyModified,
                 onKeyChange: this.onKeyChange(name2),
@@ -1432,9 +2125,9 @@
     }
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const { __errors, ...fieldErrorSchema } = errorSchema || {};
-    const fieldUiSchema = omit2(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+    const fieldUiSchema = omit3(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
     if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
-      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit2(fieldUiSchema[utils.UI_OPTIONS_KEY], ["classNames", "style"]);
+      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit3(fieldUiSchema[utils.UI_OPTIONS_KEY], ["classNames", "style"]);
     }
     const field = /* @__PURE__ */ jsxRuntime.jsx(
       FieldComponent,
@@ -1464,17 +2157,9 @@
     const richDescription = uiOptions.enableMarkdownInDescription ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: description }) : description;
     const help = uiOptions.help;
     const hidden = uiOptions.widget === "hidden";
-    const classNames = ["form-group", "field", `field-${utils.getSchemaType(schema)}`];
+    const classNames = ["rjsf-field", `rjsf-field-${utils.getSchemaType(schema)}`];
     if (!hideError && __errors && __errors.length > 0) {
-      classNames.push("field-error has-error has-danger");
-    }
-    if (uiSchema?.classNames) {
-      {
-        console.warn(
-          "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
-        );
-      }
-      classNames.push(uiSchema.classNames);
+      classNames.push("rjsf-field-error");
     }
     if (uiOptions.classNames) {
       classNames.push(uiOptions.classNames);
@@ -1561,6 +2246,7 @@
             (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
           ),
           registry,
+          required,
           schema,
           uiSchema
         }
@@ -1585,6 +2271,7 @@
             (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
           ),
           registry,
+          required,
           schema,
           uiSchema
         }
@@ -1674,6 +2361,9 @@
       ArrayField: ArrayField_default,
       // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
       BooleanField: BooleanField_default,
+      LayoutGridField,
+      LayoutHeaderField,
+      LayoutMultiSchemaField,
       NumberField: NumberField_default,
       ObjectField: ObjectField_default,
       OneOfField: MultiSchemaField_default,
@@ -1707,24 +2397,13 @@
     );
   }
   function ArrayFieldItemTemplate(props) {
-    const {
-      children,
-      className,
-      disabled,
-      hasToolbar,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      hasCopy,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
+    const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldItemButtonsTemplate2 = utils.getTemplate(
+      "ArrayFieldItemButtonsTemplate",
       registry,
-      uiSchema
-    } = props;
-    const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+      uiOptions
+    );
     const btnStyle = {
       flex: 1,
       paddingLeft: 6,
@@ -1733,7 +2412,7 @@
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "btn-group",
@@ -1741,52 +2420,79 @@
             display: "flex",
             justifyContent: "space-around"
           },
-          children: [
-            (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
-              MoveUpButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly || !hasMoveUp,
-                onClick: onReorderClick(index, index - 1),
-                uiSchema,
-                registry
-              }
-            ),
-            (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
-              MoveDownButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly || !hasMoveDown,
-                onClick: onReorderClick(index, index + 1),
-                uiSchema,
-                registry
-              }
-            ),
-            hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
-              CopyButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly,
-                onClick: onCopyIndexClick(index),
-                uiSchema,
-                registry
-              }
-            ),
-            hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
-              RemoveButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly,
-                onClick: onDropIndexClick(index),
-                uiSchema,
-                registry
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
         }
       ) })
     ] });
   }
+  function ArrayFieldItemButtonsTemplate(props) {
+    const {
+      disabled,
+      hasCopy,
+      hasMoveDown,
+      hasMoveUp,
+      hasRemove,
+      idSchema,
+      index,
+      onCopyIndexClick,
+      onDropIndexClick,
+      onReorderClick,
+      readonly,
+      registry,
+      uiSchema
+    } = props;
+    const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+    const onCopyClick = react.useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+    const onRemoveClick = react.useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+    const onArrowUpClick = react.useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+    const onArrowDownClick = react.useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+        MoveUpButton2,
+        {
+          id: utils.buttonId(idSchema, "moveUp"),
+          className: "rjsf-array-item-move-up",
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onArrowUpClick,
+          uiSchema,
+          registry
+        }
+      ),
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+        MoveDownButton2,
+        {
+          id: utils.buttonId(idSchema, "moveDown"),
+          className: "rjsf-array-item-move-down",
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onArrowDownClick,
+          uiSchema,
+          registry
+        }
+      ),
+      hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
+        CopyButton2,
+        {
+          id: utils.buttonId(idSchema, "copy"),
+          className: "rjsf-array-item-copy",
+          disabled: disabled || readonly,
+          onClick: onCopyClick,
+          uiSchema,
+          registry
+        }
+      ),
+      hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton2,
+        {
+          id: utils.buttonId(idSchema, "remove"),
+          className: "rjsf-array-item-remove",
+          disabled: disabled || readonly,
+          onClick: onRemoveClick,
+          uiSchema,
+          registry
+        }
+      )
+    ] });
+  }
   function ArrayFieldTemplate(props) {
     const {
       canAdd,
@@ -1847,7 +2553,8 @@
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          className: "array-item-add",
+          id: utils.buttonId(idSchema, "add"),
+          className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
           uiSchema,
@@ -1967,62 +2674,29 @@
     const { iconType = "default", icon, className, uiSchema, registry, ...otherProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: `glyphicon glyphicon-${icon}` }) });
   }
-  function CopyButton(props) {
-    const {
-      registry: { translateString }
-    } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.CopyButton),
-        className: "array-item-copy",
-        ...props,
-        icon: "copy"
-      }
-    );
+  function CopyButton(props) {
+    const {
+      registry: { translateString }
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: "copy" });
   }
   function MoveDownButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.MoveDownButton),
-        className: "array-item-move-down",
-        ...props,
-        icon: "arrow-down"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: "arrow-down" });
   }
   function MoveUpButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.MoveUpButton),
-        className: "array-item-move-up",
-        ...props,
-        icon: "arrow-up"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: "arrow-up" });
   }
   function RemoveButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.RemoveButton),
-        className: "array-item-remove",
-        ...props,
-        iconType: "danger",
-        icon: "remove"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
   function AddButton({
     className,
@@ -2134,6 +2808,10 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "help-block", children: help });
   }
+  function GridTemplate(props) {
+    const { children, column, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...rest, children });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -2185,7 +2863,8 @@
       utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          className: "object-property-expand",
+          id: utils.buttonId(idSchema, "add"),
+          className: "rjsf-object-property-expand",
           onClick: onAddClick(schema),
           disabled: disabled || readonly,
           uiSchema,
@@ -2233,6 +2912,8 @@
       readonly,
       required,
       schema,
+      hideError,
+      rawErrors,
       children,
       uiSchema,
       registry
@@ -2241,10 +2922,15 @@
     const { RemoveButton: RemoveButton2 } = templates2.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const classNamesList = ["form-group", classNames];
+    if (!hideError && rawErrors && rawErrors.length > 0) {
+      classNamesList.push("has-error has-danger");
+    }
+    const uiClassNames = classNamesList.join(" ").trim();
     if (!additional) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { label: keyLabel, required, id: `${id}-key` }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2262,7 +2948,8 @@
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
-          className: "array-item-remove btn-block",
+          id: utils.buttonId(id, "remove"),
+          className: "rjsf-object-property-remove btn-block",
           style: { border: "0" },
           disabled: disabled || readonly,
           onClick: onDropPropertyClick(label),
@@ -2278,6 +2965,7 @@
     return {
       ArrayFieldDescriptionTemplate,
       ArrayFieldItemTemplate,
+      ArrayFieldItemButtonsTemplate,
       ArrayFieldTemplate,
       ArrayFieldTitleTemplate,
       ButtonTemplates: ButtonTemplates_default(),
@@ -2287,6 +2975,7 @@
       FieldTemplate: FieldTemplate_default,
       FieldErrorTemplate,
       FieldHelpTemplate,
+      GridTemplate,
       ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
       UnsupportedFieldTemplate: UnsupportedField_default,
@@ -2351,9 +3040,12 @@
   }) {
     const { translateString } = registry;
     const [lastValue, setLastValue] = react.useState(value);
-    const [state, setState] = react.useReducer((state2, action) => {
-      return { ...state2, ...action };
-    }, utils.parseDateString(value, time));
+    const [state, setState] = react.useReducer(
+      (state2, action) => {
+        return { ...state2, ...action };
+      },
+      utils.parseDateString(value, time)
+    );
     react.useEffect(() => {
       const stateValue = utils.toDateString(state, time);
       if (readyForChange(state) && stateValue !== value) {
@@ -2661,7 +3353,7 @@
             type: blob.type
           }
         ];
-      } catch (e) {
+      } catch {
         return acc;
       }
     }, []);
@@ -2677,7 +3369,7 @@
         processFiles(event.target.files).then((filesInfoEvent) => {
           const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
           if (multiple) {
-            onChange(value.concat(newValue[0]));
+            onChange(value.concat(newValue));
           } else {
             onChange(newValue[0]);
           }
@@ -2750,13 +3442,13 @@
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const handleBlur = react.useCallback(
       ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id]
+      [onBlur, enumOptions, emptyValue, id]
     );
     const handleFocus = react.useCallback(
       ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id]
+      [onFocus, enumOptions, emptyValue, id]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
       const checked = utils.enumOptionsIsSelected(option.value, value);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -2797,6 +3489,105 @@
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "range-view", children: value })
     ] });
   }
+  function RatingWidget({
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onFocus,
+    onBlur,
+    schema,
+    options
+  }) {
+    const { stars = 5, shape = "star" } = options;
+    const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
+    const min = schema.minimum || 0;
+    const handleStarClick = react.useCallback(
+      (starValue) => {
+        if (!disabled && !readonly) {
+          onChange(starValue);
+        }
+      },
+      [onChange, disabled, readonly]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        if (onFocus) {
+          const starValue = Number(event.target.dataset.value);
+          onFocus(id, starValue);
+        }
+      },
+      [onFocus, id]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        if (onBlur) {
+          const starValue = Number(event.target.dataset.value);
+          onBlur(id, starValue);
+        }
+      },
+      [onBlur, id]
+    );
+    const getSymbol = (isFilled) => {
+      if (shape === "heart") {
+        return isFilled ? "\u2665" : "\u2661";
+      }
+      return isFilled ? "\u2605" : "\u2606";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rating-widget",
+        style: {
+          display: "inline-flex",
+          fontSize: "1.5rem",
+          cursor: disabled || readonly ? "default" : "pointer"
+        },
+        children: [
+          [...Array(numStars)].map((_, index) => {
+            const starValue = min + index;
+            const isFilled = starValue <= value;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                onClick: () => handleStarClick(starValue),
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                "data-value": starValue,
+                tabIndex: disabled || readonly ? -1 : 0,
+                role: "radio",
+                "aria-checked": starValue === value,
+                "aria-label": `${starValue} ${shape === "heart" ? "heart" : "star"}${starValue === 1 ? "" : "s"}`,
+                style: {
+                  color: isFilled ? "#FFD700" : "#ccc",
+                  padding: "0 0.2rem",
+                  transition: "color 0.2s",
+                  userSelect: "none"
+                },
+                children: getSymbol(isFilled)
+              },
+              index
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              id,
+              name: id,
+              value: value || "",
+              required,
+              disabled: disabled || readonly,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) });
+  }
   function getValue(event, multiple) {
     if (multiple) {
       return Array.from(event.target.options).slice().filter((o) => o.selected).map((o) => o.value);
@@ -2825,21 +3616,21 @@
         const newValue = getValue(event, multiple);
         return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onFocus, id, schema, multiple, enumOptions, optEmptyVal]
+      [onFocus, id, multiple, enumOptions, optEmptyVal]
     );
     const handleBlur = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onBlur, id, schema, multiple, enumOptions, optEmptyVal]
+      [onBlur, id, multiple, enumOptions, optEmptyVal]
     );
     const handleChange = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onChange, schema, multiple, enumOptions, optEmptyVal]
+      [onChange, multiple, enumOptions, optEmptyVal]
     );
     const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
     const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -2849,6 +3640,7 @@
         id,
         name: id,
         multiple,
+        role: "combobox",
         className: "form-control",
         value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
         required,
@@ -2957,6 +3749,7 @@
       PasswordWidget,
       RadioWidget: RadioWidget_default,
       RangeWidget,
+      RatingWidget,
       SelectWidget: SelectWidget_default,
       TextWidget,
       TextareaWidget: TextareaWidget_default,
@@ -2979,6 +3772,10 @@
     };
   }
   var Form = class extends react.Component {
+    /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
+     * provide any possible type here
+     */
+    formElement;
     /** 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.
@@ -2987,266 +3784,6 @@
      */
     constructor(props) {
       super(props);
-      /** Returns the `formData` with only the elements specified in the `fields` list
-       *
-       * @param formData - The data for the `Form`
-       * @param fields - The fields to keep while filtering
-       */
-      this.getUsedFormData = (formData, fields2) => {
-        if (fields2.length === 0 && typeof formData !== "object") {
-          return formData;
-        }
-        const data = _pick(formData, fields2);
-        if (Array.isArray(formData)) {
-          return Object.keys(data).map((key) => data[key]);
-        }
-        return data;
-      };
-      /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
-       *
-       * @param pathSchema - The `PathSchema` object for the form
-       * @param [formData] - The form data to use while checking for empty objects/arrays
-       */
-      this.getFieldNames = (pathSchema, formData) => {
-        const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-          Object.keys(_obj).forEach((key) => {
-            if (typeof _obj[key] === "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]);
-              } else {
-                getAllPaths(_obj[key], acc, newPaths);
-              }
-            } else if (key === utils.NAME_KEY && _obj[key] !== "") {
-              paths.forEach((path) => {
-                const formValue = get3(formData, path);
-                if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
-                  acc.push(path);
-                }
-              });
-            }
-          });
-          return acc;
-        };
-        return getAllPaths(pathSchema);
-      };
-      /** Returns the `formData` after filtering to remove any extra data not in a form field
-       *
-       * @param formData - The data for the `Form`
-       * @returns The `formData` after omitting extra data
-       */
-      this.omitExtraData = (formData) => {
-        const { schema, schemaUtils } = this.state;
-        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;
-      };
-      /** 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.
-       *
-       * @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
-       */
-      this.onChange = (formData, newErrorSchema, id) => {
-        const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-        const { schemaUtils, schema, retrievedSchema } = this.state;
-        if (utils.isObject(formData) || Array.isArray(formData)) {
-          const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
-          formData = newState.formData;
-        }
-        const mustValidate = !noValidate && liveValidate;
-        let state = { formData, schema };
-        let newFormData = formData;
-        if (omitExtraData === true && liveOmit === true) {
-          newFormData = this.omitExtraData(formData);
-          state = {
-            formData: newFormData
-          };
-        }
-        if (mustValidate) {
-          const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-          let errors = schemaValidation.errors;
-          let errorSchema = schemaValidation.errorSchema;
-          const schemaValidationErrors = errors;
-          const schemaValidationErrorSchema = errorSchema;
-          if (extraErrors) {
-            const merged = 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");
-          }
-          state = {
-            formData: newFormData,
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          };
-        } else if (!noValidate && newErrorSchema) {
-          const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
-          state = {
-            formData: newFormData,
-            errorSchema,
-            errors: utils.toErrorList(errorSchema)
-          };
-        }
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-      };
-      /**
-       * Callback function to handle reset form data.
-       * - Reset all fields with default values.
-       * - Reset validations and errors
-       *
-       */
-      this.reset = () => {
-        const { onChange } = this.props;
-        const newState = this.getStateFromProps(this.props, void 0);
-        const newFormData = newState.formData;
-        const state = {
-          formData: newFormData,
-          errorSchema: {},
-          errors: [],
-          schemaValidationErrors: [],
-          schemaValidationErrorSchema: {}
-        };
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
-      };
-      /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was blurred
-       * @param data - The data associated with the field that was blurred
-       */
-      this.onBlur = (id, data) => {
-        const { onBlur } = this.props;
-        if (onBlur) {
-          onBlur(id, data);
-        }
-      };
-      /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was focused
-       * @param data - The data associated with the field that was focused
-       */
-      this.onFocus = (id, data) => {
-        const { onFocus } = this.props;
-        if (onFocus) {
-          onFocus(id, data);
-        }
-      };
-      /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
-       * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
-       * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
-       * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
-       * back the `onSubmit` callback if it was provided.
-       *
-       * @param event - The submit HTML form event
-       */
-      this.onSubmit = (event) => {
-        event.preventDefault();
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        event.persist();
-        const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
-        let { formData: newFormData } = this.state;
-        if (omitExtraData === true) {
-          newFormData = this.omitExtraData(newFormData);
-        }
-        if (noValidate || this.validateFormWithFormData(newFormData)) {
-          const errorSchema = extraErrors || {};
-          const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
-          this.setState(
-            {
-              formData: newFormData,
-              errors,
-              errorSchema,
-              schemaValidationErrors: [],
-              schemaValidationErrorSchema: {}
-            },
-            () => {
-              if (onSubmit) {
-                onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
-              }
-            }
-          );
-        }
-      };
-      /** Provides a function that can be used to programmatically submit the `Form` */
-      this.submit = () => {
-        if (this.formElement.current) {
-          const submitCustomEvent = new CustomEvent("submit", {
-            cancelable: true
-          });
-          submitCustomEvent.preventDefault();
-          this.formElement.current.dispatchEvent(submitCustomEvent);
-          this.formElement.current.requestSubmit();
-        }
-      };
-      /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
-       * If `onError` is provided, then it will be called with the list of errors.
-       *
-       * @param formData - The form data to validate
-       * @returns - True if the form is valid, false otherwise.
-       */
-      this.validateFormWithFormData = (formData) => {
-        const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-        const { errors: prevErrors } = this.state;
-        const schemaValidation = this.validate(formData);
-        let errors = schemaValidation.errors;
-        let errorSchema = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema;
-        const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
-        if (hasError) {
-          if (extraErrors) {
-            const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
-          }
-          if (focusOnFirstError) {
-            if (typeof focusOnFirstError === "function") {
-              focusOnFirstError(errors[0]);
-            } else {
-              this.focusOnError(errors[0]);
-            }
-          }
-          this.setState(
-            {
-              errors,
-              errorSchema,
-              schemaValidationErrors,
-              schemaValidationErrorSchema
-            },
-            () => {
-              if (onError) {
-                onError(errors);
-              } else {
-                console.error("Form validation failed", errors);
-              }
-            }
-          );
-        } else if (prevErrors.length > 0) {
-          this.setState({
-            errors: [],
-            errorSchema: {},
-            schemaValidationErrors: [],
-            schemaValidationErrorSchema: {}
-          });
-        }
-        return !hasError;
-      };
       if (!props.validator) {
         throw new Error("A validator is required for Form functionality to work");
       }
@@ -3276,8 +3813,9 @@
      */
     getSnapshotBeforeUpdate(prevProps, prevState) {
       if (!utils.deepEquals(this.props, prevProps)) {
+        const formDataChangedFields = utils.getChangedFields(this.props.formData, prevProps.formData);
         const isSchemaChanged = !utils.deepEquals(prevProps.schema, this.props.schema);
-        const isFormDataChanged = !utils.deepEquals(prevProps.formData, this.props.formData);
+        const isFormDataChanged = formDataChangedFields.length > 0 || !utils.deepEquals(prevProps.formData, this.props.formData);
         const nextState = this.getStateFromProps(
           this.props,
           this.props.formData,
@@ -3285,7 +3823,8 @@
           // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
           //  match one of the subSchemas, the retrieved schema must be updated.
           isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
-          isSchemaChanged
+          isSchemaChanged,
+          formDataChangedFields
         );
         const shouldUpdate = !utils.deepEquals(nextState, prevState);
         return { nextState, shouldUpdate };
@@ -3300,9 +3839,6 @@
      * If an update is required, it applies the next state and, if needed, triggers the `onChange` handler to inform about
      * changes.
      *
-     * This method effectively replaces the deprecated `UNSAFE_componentWillReceiveProps`, providing a safer alternative
-     * to handle prop changes and state updates.
-     *
      * @param _ - The previous set of props.
      * @param prevState - The previous state of the component before the update.
      * @param snapshot - The value returned from `getSnapshotBeforeUpdate`.
@@ -3324,9 +3860,10 @@
      * @param inputFormData - The new or current data for the `Form`
      * @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`
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false) {
+    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
       const state = this.state || {};
       const schema = "schema" in props ? props.schema : this.props.schema;
       const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
@@ -3335,12 +3872,25 @@
       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, experimental_defaultFormStateBehavior)) {
-        schemaUtils = utils.createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior);
+      if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
+        props.validator,
+        rootSchema,
+        experimental_defaultFormStateBehavior,
+        experimental_customMergeAllOf
+      )) {
+        schemaUtils = utils.createSchemaUtils(
+          props.validator,
+          rootSchema,
+          experimental_defaultFormStateBehavior,
+          experimental_customMergeAllOf
+        );
       }
       const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-      const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+      const _retrievedSchema = this.updateRetrievedSchema(
+        retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+      );
       const getCurrentErrors = () => {
         if (props.noValidate || isSchemaChanged) {
           return { errors: [], errorSchema: {} };
@@ -3362,7 +3912,7 @@
       if (mustValidate) {
         const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
         errors = schemaValidation.errors;
-        if (isSchemaChanged) {
+        if (retrievedSchema === void 0) {
           errorSchema = schemaValidation.errorSchema;
         } else {
           errorSchema = utils.mergeObjects(
@@ -3377,6 +3927,20 @@
         const currentErrors = getCurrentErrors();
         errors = currentErrors.errors;
         errorSchema = currentErrors.errorSchema;
+        if (formDataChangedFields.length > 0) {
+          const newErrorSchema = formDataChangedFields.reduce(
+            (acc, key) => {
+              acc[key] = void 0;
+              return acc;
+            },
+            {}
+          );
+          errorSchema = schemaValidationErrorSchema = utils.mergeObjects(
+            currentErrors.errorSchema,
+            newErrorSchema,
+            "preventDuplicates"
+          );
+        }
       }
       if (props.extraErrors) {
         const merged = utils.validationDataMerge({ errorSchema, errors }, props.extraErrors);
@@ -3414,6 +3978,21 @@
     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;
+    }
     /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
      * `schemaUtils` in the state), returning the results.
      *
@@ -3448,6 +4027,62 @@
       }
       return null;
     }
+    /** Returns the `formData` with only the elements specified in the `fields` list
+     *
+     * @param formData - The data for the `Form`
+     * @param fields - The fields to keep while filtering
+     */
+    getUsedFormData = (formData, fields2) => {
+      if (fields2.length === 0 && typeof formData !== "object") {
+        return formData;
+      }
+      const data = _pick(formData, fields2);
+      if (Array.isArray(formData)) {
+        return Object.keys(data).map((key) => data[key]);
+      }
+      return data;
+    };
+    /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
+     *
+     * @param pathSchema - The `PathSchema` object for the form
+     * @param [formData] - The form data to use while checking for empty objects/arrays
+     */
+    getFieldNames = (pathSchema, formData) => {
+      const getAllPaths = (_obj, acc = [], paths = [[]]) => {
+        Object.keys(_obj).forEach((key) => {
+          if (typeof _obj[key] === "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]);
+            } else {
+              getAllPaths(_obj[key], acc, newPaths);
+            }
+          } else if (key === utils.NAME_KEY && _obj[key] !== "") {
+            paths.forEach((path) => {
+              const formValue = get2(formData, path);
+              if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
+                acc.push(path);
+              }
+            });
+          }
+        });
+        return acc;
+      };
+      return getAllPaths(pathSchema);
+    };
+    /** Returns the `formData` after filtering to remove any extra data not in a form field
+     *
+     * @param formData - The data for the `Form`
+     * @returns The `formData` after omitting extra data
+     */
+    omitExtraData = (formData) => {
+      const { schema, schemaUtils } = this.state;
+      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;
+    };
     // 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;
@@ -3458,18 +4093,185 @@
       if (resolvedSchema?.type !== "object" && resolvedSchema?.type !== "array") {
         filteredErrors.__errors = schemaErrors.__errors;
       }
-      const filterUndefinedErrors = (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) => {
-          if (errorAtKey === void 0) {
+          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)) {
-            filterUndefinedErrors(errorAtKey);
+            filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
           }
         });
         return errors;
       };
-      return filterUndefinedErrors(filteredErrors);
+      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.
+     *
+     * @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
+     */
+    onChange = (formData, newErrorSchema, id) => {
+      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+      const { schemaUtils, schema } = this.state;
+      let retrievedSchema = this.state.retrievedSchema;
+      if (utils.isObject(formData) || Array.isArray(formData)) {
+        const newState = this.getStateFromProps(this.props, formData);
+        formData = newState.formData;
+        retrievedSchema = newState.retrievedSchema;
+      }
+      const mustValidate = !noValidate && liveValidate;
+      let state = { formData, schema };
+      let newFormData = formData;
+      if (omitExtraData === true && liveOmit === true) {
+        newFormData = this.omitExtraData(formData);
+        state = {
+          formData: newFormData
+        };
+      }
+      if (mustValidate) {
+        const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
+        let errors = schemaValidation.errors;
+        let errorSchema = schemaValidation.errorSchema;
+        const schemaValidationErrors = errors;
+        const schemaValidationErrorSchema = errorSchema;
+        if (extraErrors) {
+          const merged = 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");
+        }
+        state = {
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors,
+          schemaValidationErrorSchema
+        };
+      } else if (!noValidate && newErrorSchema) {
+        const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        state = {
+          formData: newFormData,
+          errorSchema,
+          errors: utils.toErrorList(errorSchema)
+        };
+      }
+      this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
+    };
+    /**
+     * If the retrievedSchema has changed the new retrievedSchema is returned.
+     * Otherwise, the old retrievedSchema is returned to persist reference.
+     * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+     *    avoiding the performance cost of recompiling the schema.
+     *
+     * @param retrievedSchema The new retrieved schema.
+     * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+     */
+    updateRetrievedSchema(retrievedSchema) {
+      const isTheSame = utils.deepEquals(retrievedSchema, this.state?.retrievedSchema);
+      return isTheSame ? this.state.retrievedSchema : retrievedSchema;
     }
+    /**
+     * Callback function to handle reset form data.
+     * - Reset all fields with default values.
+     * - Reset validations and errors
+     *
+     */
+    reset = () => {
+      const { onChange } = this.props;
+      const newState = this.getStateFromProps(this.props, void 0);
+      const newFormData = newState.formData;
+      const state = {
+        formData: newFormData,
+        errorSchema: {},
+        errors: [],
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {}
+      };
+      this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+    };
+    /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was blurred
+     * @param data - The data associated with the field that was blurred
+     */
+    onBlur = (id, data) => {
+      const { onBlur } = this.props;
+      if (onBlur) {
+        onBlur(id, data);
+      }
+    };
+    /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was focused
+     * @param data - The data associated with the field that was focused
+     */
+    onFocus = (id, data) => {
+      const { onFocus } = this.props;
+      if (onFocus) {
+        onFocus(id, data);
+      }
+    };
+    /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
+     * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
+     * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
+     * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
+     * back the `onSubmit` callback if it was provided.
+     *
+     * @param event - The submit HTML form event
+     */
+    onSubmit = (event) => {
+      event.preventDefault();
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      event.persist();
+      const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+      let { formData: newFormData } = this.state;
+      if (omitExtraData === true) {
+        newFormData = this.omitExtraData(newFormData);
+      }
+      if (noValidate || this.validateFormWithFormData(newFormData)) {
+        const errorSchema = extraErrors || {};
+        const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
+        this.setState(
+          {
+            formData: newFormData,
+            errors,
+            errorSchema,
+            schemaValidationErrors: [],
+            schemaValidationErrorSchema: {}
+          },
+          () => {
+            if (onSubmit) {
+              onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
+            }
+          }
+        );
+      }
+    };
     /** Returns the registry for the form */
     getRegistry() {
       const { translateString: customTranslateString, uiSchema = {} } = this.props;
@@ -3493,6 +4295,17 @@
         globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
       };
     }
+    /** Provides a function that can be used to programmatically submit the `Form` */
+    submit = () => {
+      if (this.formElement.current) {
+        const submitCustomEvent = new CustomEvent("submit", {
+          cancelable: true
+        });
+        submitCustomEvent.preventDefault();
+        this.formElement.current.dispatchEvent(submitCustomEvent);
+        this.formElement.current.requestSubmit();
+      }
+    };
     /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
      * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
      * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
@@ -3511,7 +4324,7 @@
       const elementId = path.join(idSeparator);
       let field = this.formElement.current.elements[elementId];
       if (!field) {
-        field = this.formElement.current.querySelector(`input[id^=${elementId}`);
+        field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
       }
       if (field && field.length) {
         field = field[0];
@@ -3520,6 +4333,59 @@
         field.focus();
       }
     }
+    /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+     * If `onError` is provided, then it will be called with the list of errors.
+     *
+     * @param formData - The form data to validate
+     * @returns - True if the form is valid, false otherwise.
+     */
+    validateFormWithFormData = (formData) => {
+      const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+      const { errors: prevErrors } = this.state;
+      const schemaValidation = this.validate(formData);
+      let errors = schemaValidation.errors;
+      let errorSchema = schemaValidation.errorSchema;
+      const schemaValidationErrors = errors;
+      const schemaValidationErrorSchema = errorSchema;
+      const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
+      if (hasError) {
+        if (extraErrors) {
+          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
+          errorSchema = merged.errorSchema;
+          errors = merged.errors;
+        }
+        if (focusOnFirstError) {
+          if (typeof focusOnFirstError === "function") {
+            focusOnFirstError(errors[0]);
+          } else {
+            this.focusOnError(errors[0]);
+          }
+        }
+        this.setState(
+          {
+            errors,
+            errorSchema,
+            schemaValidationErrors,
+            schemaValidationErrorSchema
+          },
+          () => {
+            if (onError) {
+              onError(errors);
+            } else {
+              console.error("Form validation failed", errors);
+            }
+          }
+        );
+      } else if (prevErrors.length > 0) {
+        this.setState({
+          errors: [],
+          errorSchema: {},
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        });
+      }
+      return !hasError;
+    };
     /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
      * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
      * same way as would happen on form submission.
@@ -3551,7 +4417,6 @@
         action,
         autoComplete,
         enctype,
-        acceptcharset,
         acceptCharset,
         noHtml5Validate = false,
         disabled,
@@ -3582,7 +4447,7 @@
           action,
           autoComplete,
           encType: enctype,
-          acceptCharset: acceptCharset || acceptcharset,
+          acceptCharset,
           noValidate: noHtml5Validate,
           onSubmit: this.onSubmit,
           as,
@@ -3645,9 +4510,9 @@
   }
 
   // src/index.ts
-  var src_default = Form;
+  var index_default = Form;
 
-  exports.default = src_default;
+  exports.default = index_default;
   exports.getDefaultRegistry = getDefaultRegistry;
   exports.withTheme = withTheme;