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

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset'), require('@rjsf/validator-ajv8')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset', '@rjsf/validator-ajv8'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global.cloneDeep, global.get2, global.isEmpty, global._pick, global.set, global._toPath, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.unset, global.validator));
-})(this, (function (exports, react, utils, cloneDeep, get2, isEmpty, _pick, set, _toPath, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, unset, validator) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global.cloneDeep, global.get, global.isEmpty, global._pick, global.set, global._toPath, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.unset, global.validator));
+})(this, (function (exports, react, utils, cloneDeep, get, isEmpty, _pick, set, _toPath, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, unset, validator) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
@@ -22,176 +22,610 @@
     }
     return [];
   }
-  var ArrayField = class extends react.Component {
-    /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
-     *
-     * @param props - The `FieldProps` for this template
-     */
-    constructor(props) {
-      super(props);
-      const { formData } = props;
-      const keyedFormData = generateKeyedFormData(formData);
-      this.state = {
-        keyedFormData,
-        updatedKeyedFormData: false
-      };
+  function isItemRequired(itemSchema) {
+    if (Array.isArray(itemSchema.type)) {
+      return !itemSchema.type.includes("null");
     }
-    /** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
-     * regenerates the keyed form data and returns it
-     *
-     * @param nextProps - The next set of props data
-     * @param prevState - The previous set of state data
-     */
-    static getDerivedStateFromProps(nextProps, prevState) {
-      if (prevState.updatedKeyedFormData) {
-        return {
-          updatedKeyedFormData: false
-        };
+    return itemSchema.type !== "null";
+  }
+  function canAddItem(registry, schema, formItems, uiSchema) {
+    let { addable } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
+    if (addable !== false) {
+      if (schema.maxItems !== void 0) {
+        addable = formItems.length < schema.maxItems;
+      } else {
+        addable = true;
       }
-      const nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
-      const previousKeyedFormData = prevState.keyedFormData || [];
-      const newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
-        return {
-          key: previousKeyedFormDatum.key,
-          item: nextFormData[index]
-        };
-      }) : generateKeyedFormData(nextFormData);
-      return {
-        keyedFormData: newKeyedFormData
-      };
     }
-    /** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
-     * the description from the schema.items, and finally the string "Item"
-     */
-    get itemTitle() {
-      const { schema, registry } = this.props;
-      const { translateString } = registry;
-      return get2(
-        schema,
-        [utils.ITEMS_KEY, "title"],
-        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
-     * may be null.
-     *
-     * @param itemSchema - The schema for the item
-     * @return - True if the item schema type does not contain the "null" type
-     */
-    isItemRequired(itemSchema) {
-      if (Array.isArray(itemSchema.type)) {
-        return !itemSchema.type.includes("null");
+    return addable;
+  }
+  function computeItemUiSchema(uiSchema, item, index, formContext) {
+    if (typeof uiSchema.items === "function") {
+      try {
+        const result = uiSchema.items(item, index, formContext);
+        return result;
+      } catch (e) {
+        console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+        return void 0;
       }
-      return itemSchema.type !== "null";
+    } else {
+      return uiSchema.items;
     }
-    /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
-     * then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
-     * `formData` matches that value, then false is returned, otherwise true is returned.
-     *
-     * @param formItems - The list of items in the form
-     * @returns - True if the item is addable otherwise false
-     */
-    canAddItem(formItems) {
-      const { schema, uiSchema, registry } = this.props;
-      let { addable } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-      if (addable !== false) {
-        if (schema.maxItems !== void 0) {
-          addable = formItems.length < schema.maxItems;
+  }
+  function getNewFormDataRow(registry, schema) {
+    const { schemaUtils } = registry;
+    let itemSchema = schema.items;
+    if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
+      itemSchema = schema.additionalItems;
+    }
+    return schemaUtils.getDefaultFormState(itemSchema);
+  }
+  function ArrayAsMultiSelect(props) {
+    const {
+      schema,
+      fieldPathId,
+      uiSchema,
+      formData: items = [],
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      placeholder,
+      onBlur,
+      onFocus,
+      registry,
+      rawErrors,
+      name,
+      onSelectChange
+    } = props;
+    const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry;
+    const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
+    const enumOptions = utils.optionsList(itemsSchema, uiSchema);
+    const { widget = "select", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
+    const Widget = utils.getWidget(schema, widget, widgets2);
+    const label = uiTitle ?? schema.title ?? name;
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        id: multiValueFieldPathId[utils.ID_KEY],
+        name,
+        multiple: true,
+        onChange: onSelectChange,
+        onBlur,
+        onFocus,
+        options: { ...options, enumOptions },
+        schema,
+        uiSchema,
+        registry,
+        value: items,
+        disabled,
+        readonly,
+        required,
+        label,
+        hideLabel: !displayLabel,
+        placeholder,
+        autofocus,
+        rawErrors,
+        htmlName: multiValueFieldPathId.name
+      }
+    );
+  }
+  function ArrayAsCustomWidget(props) {
+    const {
+      schema,
+      fieldPathId,
+      uiSchema,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      hideError,
+      placeholder,
+      onBlur,
+      onFocus,
+      formData: items = [],
+      registry,
+      rawErrors,
+      name,
+      onSelectChange
+    } = props;
+    const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry;
+    const { widget, title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
+    const Widget = utils.getWidget(schema, widget, widgets2);
+    const label = uiTitle ?? schema.title ?? name;
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        id: multiValueFieldPathId[utils.ID_KEY],
+        name,
+        multiple: true,
+        onChange: onSelectChange,
+        onBlur,
+        onFocus,
+        options,
+        schema,
+        uiSchema,
+        registry,
+        value: items,
+        disabled,
+        readonly,
+        hideError,
+        required,
+        label,
+        hideLabel: !displayLabel,
+        placeholder,
+        autofocus,
+        rawErrors,
+        htmlName: multiValueFieldPathId.name
+      }
+    );
+  }
+  function ArrayAsFiles(props) {
+    const {
+      schema,
+      uiSchema,
+      fieldPathId,
+      name,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      onBlur,
+      onFocus,
+      registry,
+      formData: items = [],
+      rawErrors,
+      onSelectChange
+    } = props;
+    const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry;
+    const { widget = "files", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
+    const Widget = utils.getWidget(schema, widget, widgets2);
+    const label = uiTitle ?? schema.title ?? name;
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        options,
+        id: multiValueFieldPathId[utils.ID_KEY],
+        name,
+        multiple: true,
+        onChange: onSelectChange,
+        onBlur,
+        onFocus,
+        schema,
+        uiSchema,
+        value: items,
+        disabled,
+        readonly,
+        required,
+        registry,
+        autofocus,
+        rawErrors,
+        label,
+        hideLabel: !displayLabel,
+        htmlName: multiValueFieldPathId.name
+      }
+    );
+  }
+  function ArrayFieldItem(props) {
+    const {
+      itemKey,
+      index,
+      name,
+      disabled,
+      hideError,
+      readonly,
+      registry,
+      uiOptions,
+      parentUiSchema,
+      canAdd,
+      canRemove = true,
+      canMoveUp,
+      canMoveDown,
+      itemSchema,
+      itemData,
+      itemUiSchema,
+      itemFieldPathId,
+      itemErrorSchema,
+      autofocus,
+      onBlur,
+      onFocus,
+      onChange,
+      rawErrors,
+      totalItems,
+      title,
+      handleAddItem,
+      handleCopyItem,
+      handleRemoveItem,
+      handleReorderItems
+    } = props;
+    const {
+      fields: { ArraySchemaField, SchemaField: SchemaField2 }
+    } = registry;
+    const fieldPathId = utils.useDeepCompareMemo(itemFieldPathId);
+    const ItemSchemaField = ArraySchemaField || SchemaField2;
+    const ArrayFieldItemTemplate2 = utils.getTemplate(
+      "ArrayFieldItemTemplate",
+      registry,
+      uiOptions
+    );
+    const { orderable = true, removable = true, copyable = false } = uiOptions;
+    const has4 = {
+      moveUp: orderable && canMoveUp,
+      moveDown: orderable && canMoveDown,
+      copy: copyable && canAdd,
+      remove: removable && canRemove,
+      toolbar: false
+    };
+    has4.toolbar = Object.keys(has4).some((key) => has4[key]);
+    const onAddItem = react.useCallback(
+      (event) => {
+        handleAddItem(event, index + 1);
+      },
+      [handleAddItem, index]
+    );
+    const onCopyItem = react.useCallback(
+      (event) => {
+        handleCopyItem(event, index);
+      },
+      [handleCopyItem, index]
+    );
+    const onRemoveItem = react.useCallback(
+      (event) => {
+        handleRemoveItem(event, index);
+      },
+      [handleRemoveItem, index]
+    );
+    const onMoveUpItem = react.useCallback(
+      (event) => {
+        handleReorderItems(event, index, index - 1);
+      },
+      [handleReorderItems, index]
+    );
+    const onMoveDownItem = react.useCallback(
+      (event) => {
+        handleReorderItems(event, index, index + 1);
+      },
+      [handleReorderItems, index]
+    );
+    const templateProps = {
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ItemSchemaField,
+        {
+          name,
+          title,
+          index,
+          schema: itemSchema,
+          uiSchema: itemUiSchema,
+          formData: itemData,
+          errorSchema: itemErrorSchema,
+          fieldPathId,
+          required: isItemRequired(itemSchema),
+          onChange,
+          onBlur,
+          onFocus,
+          registry,
+          disabled,
+          readonly,
+          hideError,
+          autofocus,
+          rawErrors
+        }
+      ),
+      buttonsProps: {
+        fieldPathId,
+        disabled,
+        readonly,
+        canAdd,
+        hasCopy: has4.copy,
+        hasMoveUp: has4.moveUp,
+        hasMoveDown: has4.moveDown,
+        hasRemove: has4.remove,
+        index,
+        totalItems,
+        onAddItem,
+        onCopyItem,
+        onRemoveItem,
+        onMoveUpItem,
+        onMoveDownItem,
+        registry,
+        schema: itemSchema,
+        uiSchema: itemUiSchema
+      },
+      itemKey,
+      className: "rjsf-array-item",
+      disabled,
+      hasToolbar: has4.toolbar,
+      index,
+      totalItems,
+      readonly,
+      registry,
+      schema: itemSchema,
+      uiSchema: itemUiSchema,
+      parentUiSchema
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...templateProps });
+  }
+  function NormalArray(props) {
+    const {
+      schema,
+      uiSchema = {},
+      errorSchema,
+      fieldPathId,
+      formData: formDataFromProps,
+      name,
+      title,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      hideError = false,
+      registry,
+      onBlur,
+      onFocus,
+      rawErrors,
+      onChange,
+      keyedFormData,
+      handleAddItem,
+      handleCopyItem,
+      handleRemoveItem,
+      handleReorderItems
+    } = props;
+    const fieldTitle = schema.title || title || name;
+    const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry;
+    const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const _schemaItems = isObject(schema.items) ? schema.items : {};
+    const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
+    const formData = keyedToPlainFormData(keyedFormData);
+    const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = utils.isFormDataAvailable(formDataFromProps);
+    const canAdd = canAddItem(registry, schema, formData, uiSchema) && (!renderOptionalField || hasFormData);
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...props }) : void 0;
+    const arrayProps = {
+      canAdd,
+      items: actualFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
+        const itemCast = item;
+        const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
+        const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
+        const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
+        const itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext);
+        const itemProps = {
+          itemKey: key,
+          index,
+          name: name && `${name}-${index}`,
+          registry,
+          uiOptions,
+          hideError,
+          readonly,
+          disabled,
+          required,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
+          canAdd,
+          canMoveUp: index > 0,
+          canMoveDown: index < formData.length - 1,
+          itemSchema,
+          itemFieldPathId,
+          itemErrorSchema,
+          itemData: itemCast,
+          itemUiSchema,
+          autofocus: autofocus && index === 0,
+          onBlur,
+          onFocus,
+          rawErrors,
+          totalItems: keyedFormData.length,
+          handleAddItem,
+          handleCopyItem,
+          handleRemoveItem,
+          handleReorderItems,
+          onChange
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItem, { ...itemProps }, key);
+      }),
+      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`,
+      disabled,
+      fieldPathId,
+      uiSchema,
+      onAddClick: handleAddItem,
+      readonly,
+      required,
+      schema,
+      title: fieldTitle,
+      formData,
+      rawErrors,
+      registry,
+      optionalDataControl
+    };
+    const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
+  }
+  function FixedArray(props) {
+    const {
+      schema,
+      uiSchema = {},
+      formData,
+      errorSchema,
+      fieldPathId,
+      name,
+      title,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      hideError = false,
+      registry,
+      onBlur,
+      onFocus,
+      rawErrors,
+      keyedFormData,
+      onChange,
+      handleAddItem,
+      handleCopyItem,
+      handleRemoveItem,
+      handleReorderItems
+    } = props;
+    let { formData: items = [] } = props;
+    const fieldTitle = schema.title || title || name;
+    const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = utils.isFormDataAvailable(formData);
+    const _schemaItems = isObject(schema.items) ? schema.items : [];
+    const itemSchemas = _schemaItems.map(
+      (item, index) => schemaUtils.retrieveSchema(item, items[index])
+    );
+    const additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
+    if (items.length < itemSchemas.length) {
+      items = items.concat(new Array(itemSchemas.length - items.length));
+    }
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...props }) : void 0;
+    const canAdd = canAddItem(registry, schema, items, uiSchema) && !!additionalSchema && (!renderOptionalField || hasFormData);
+    const arrayProps = {
+      canAdd,
+      className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
+      disabled,
+      fieldPathId,
+      formData,
+      items: actualFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
+        const itemCast = item;
+        const additional = index >= itemSchemas.length;
+        const itemSchema = (additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
+        const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
+        let itemUiSchema;
+        if (additional) {
+          itemUiSchema = uiSchema.additionalItems;
         } else {
-          addable = true;
+          if (Array.isArray(uiSchema.items)) {
+            itemUiSchema = uiSchema.items[index];
+          } else {
+            itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext);
+          }
         }
-      }
-      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);
+        const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
+        const itemProps = {
+          index,
+          itemKey: key,
+          name: name && `${name}-${index}`,
+          registry,
+          uiOptions,
+          hideError,
+          readonly,
+          disabled,
+          required,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
+          canAdd,
+          canRemove: additional,
+          canMoveUp: index >= itemSchemas.length + 1,
+          canMoveDown: additional && index < items.length - 1,
+          itemSchema,
+          itemData: itemCast,
+          itemUiSchema,
+          itemFieldPathId,
+          itemErrorSchema,
+          autofocus: autofocus && index === 0,
+          onBlur,
+          onFocus,
+          rawErrors,
+          totalItems: keyedFormData.length,
+          onChange,
+          handleAddItem,
+          handleCopyItem,
+          handleRemoveItem,
+          handleReorderItems
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItem, { ...itemProps }, key);
+      }),
+      onAddClick: handleAddItem,
+      readonly,
+      required,
+      registry,
+      schema,
+      uiSchema,
+      title: fieldTitle,
+      errorSchema,
+      rawErrors,
+      optionalDataControl
     };
-    /** 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
-     *
-     * @param event - The event for the click
-     * @param [index] - The optional index at which to add the new data
-     */
-    _handleAddClick(event, index) {
-      if (event) {
-        event.preventDefault();
-      }
-      const { onChange, errorSchema, fieldPathId } = this.props;
-      const { keyedFormData } = this.state;
-      let newErrorSchema;
-      if (errorSchema) {
-        newErrorSchema = {};
-        for (const idx in errorSchema) {
-          const i = parseInt(idx);
-          if (index === void 0 || i < index) {
-            set(newErrorSchema, [i], errorSchema[idx]);
-          } else if (i >= index) {
-            set(newErrorSchema, [i + 1], errorSchema[idx]);
+    const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
+  }
+  function useKeyedFormData(formData = []) {
+    const newHash = react.useMemo(() => utils.hashObject(formData), [formData]);
+    const [state, setState] = react.useState(() => ({
+      formDataHash: newHash,
+      keyedFormData: generateKeyedFormData(formData)
+    }));
+    let { keyedFormData, formDataHash } = state;
+    if (newHash !== formDataHash) {
+      const nextFormData = Array.isArray(formData) ? formData : [];
+      const previousKeyedFormData = keyedFormData || [];
+      keyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => ({
+        key: previousKeyedFormDatum.key,
+        item: nextFormData[index]
+      })) : generateKeyedFormData(nextFormData);
+      formDataHash = newHash;
+      setState({ formDataHash, keyedFormData });
+    }
+    const updateKeyedFormData = react.useCallback((newData) => {
+      const plainFormData = keyedToPlainFormData(newData);
+      const newHash2 = utils.hashObject(plainFormData);
+      setState({ formDataHash: newHash2, keyedFormData: newData });
+      return plainFormData;
+    }, []);
+    return { keyedFormData, updateKeyedFormData };
+  }
+  function ArrayField(props) {
+    const { schema, uiSchema, errorSchema, fieldPathId, registry, formData, onChange } = props;
+    const { schemaUtils, translateString } = registry;
+    const { keyedFormData, updateKeyedFormData } = useKeyedFormData(formData);
+    const handleAddItem = react.useCallback(
+      (event, index) => {
+        if (event) {
+          event.preventDefault();
+        }
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (index === void 0 || i < index) {
+              set(newErrorSchema, [i], errorSchema[idx]);
+            } else if (i >= index) {
+              set(newErrorSchema, [i + 1], errorSchema[idx]);
+            }
           }
         }
-      }
-      const newKeyedFormDataRow = {
-        key: generateRowId(),
-        item: this._getNewFormDataRow()
-      };
-      const newKeyedFormData = [...keyedFormData];
-      if (index !== void 0) {
-        newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
-      } else {
-        newKeyedFormData.push(newKeyedFormDataRow);
-      }
-      this.setState(
-        {
-          keyedFormData: newKeyedFormData,
-          updatedKeyedFormData: true
-        },
-        // add click will pass the empty `path` array to the onChange which adds the appropriate path
-        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
-      );
-    }
-    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-     * 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) => {
+        const newKeyedFormDataRow = {
+          key: generateRowId(),
+          item: getNewFormDataRow(registry, schema)
+        };
+        const newKeyedFormData = [...keyedFormData];
+        if (index !== void 0) {
+          newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
+        } else {
+          newKeyedFormData.push(newKeyedFormDataRow);
+        }
+        onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema);
+      },
+      [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, fieldPathId]
+    );
+    const handleCopyItem = react.useCallback(
+      (event, index) => {
         if (event) {
           event.preventDefault();
         }
-        const { onChange, errorSchema, fieldPathId } = this.props;
-        const { keyedFormData } = this.state;
         let newErrorSchema;
         if (errorSchema) {
           newErrorSchema = {};
@@ -214,28 +648,15 @@
         } else {
           newKeyedFormData.push(newKeyedFormDataRow);
         }
-        this.setState(
-          {
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, 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) => {
+        onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema);
+      },
+      [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId]
+    );
+    const handleRemoveItem = react.useCallback(
+      (event, index) => {
         if (event) {
           event.preventDefault();
         }
-        const { onChange, errorSchema, fieldPathId } = this.props;
-        const { keyedFormData } = this.state;
         let newErrorSchema;
         if (errorSchema) {
           newErrorSchema = {};
@@ -249,568 +670,99 @@
           }
         }
         const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-        this.setState(
-          {
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, 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) => {
+        onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema);
+      },
+      [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId]
+    );
+    const handleReorderItems = react.useCallback(
+      (event, index, newIndex) => {
         if (event) {
           event.preventDefault();
           event.currentTarget.blur();
         }
-        const { onChange, errorSchema, fieldPathId } = 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), fieldPathId.path, 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, path, newErrorSchema, id) => {
-        const { onChange } = this.props;
-        onChange(
-          // We need to treat undefined items as nulls to have validation.
-          // See https://github.com/tdegrunt/jsonschema/issues/206
-          value === void 0 ? null : value,
-          path,
-          newErrorSchema,
-          id
-        );
-      };
-    };
-    /** Callback handler used to change the value for a checkbox */
-    onSelectChange = (value) => {
-      const { onChange, fieldPathId } = this.props;
-      onChange(value, fieldPathId.path, void 0, fieldPathId && fieldPathId.$id);
-    };
-    /** Helper method to compute item UI schema for both normal and fixed arrays
-     * Handles both static object and dynamic function cases
-     *
-     * @param uiSchema - The parent UI schema containing items definition
-     * @param item - The item data
-     * @param index - The index of the item
-     * @param formContext - The form context
-     * @returns The computed UI schema for the item
-     */
-    computeItemUiSchema(uiSchema, item, index, formContext) {
-      if (typeof uiSchema.items === "function") {
-        try {
-          const result = uiSchema.items(item, index, formContext);
-          return result;
-        } catch (e) {
-          console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
-          return void 0;
-        }
-      } else {
-        return uiSchema.items;
-      }
-    }
-    /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
-     */
-    render() {
-      const { schema, uiSchema, fieldPathId, registry } = this.props;
-      const { schemaUtils, translateString } = registry;
-      if (!(utils.ITEMS_KEY in schema)) {
-        const uiOptions = utils.getUiOptions(uiSchema);
-        const UnsupportedFieldTemplate = utils.getTemplate(
-          "UnsupportedFieldTemplate",
-          registry,
-          uiOptions
-        );
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          UnsupportedFieldTemplate,
-          {
-            schema,
-            fieldPathId,
-            reason: translateString(utils.TranslatableString.MissingItems),
-            registry
-          }
-        );
-      }
-      if (schemaUtils.isMultiSelect(schema)) {
-        return this.renderMultiSelect();
-      }
-      if (utils.isCustomWidget(uiSchema)) {
-        return this.renderCustomWidget();
-      }
-      if (utils.isFixedItems(schema)) {
-        return this.renderFixedArray();
-      }
-      if (schemaUtils.isFilesArray(schema, uiSchema)) {
-        return this.renderFiles();
-      }
-      return this.renderNormalArray();
-    }
-    /** Renders a normal array without any limitations of length
-     */
-    renderNormalArray() {
-      const {
-        schema,
-        uiSchema = {},
-        errorSchema,
-        fieldPathId,
-        name,
-        title,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        registry,
-        onBlur,
-        onFocus,
-        rawErrors
-      } = this.props;
-      const { keyedFormData } = this.state;
-      const fieldTitle = schema.title || title || name;
-      const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
-      const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
-      const uiOptions = utils.getUiOptions(uiSchema);
-      const _schemaItems = isObject(schema.items) ? schema.items : {};
-      const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
-      const formData = keyedToPlainFormData(this.state.keyedFormData);
-      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
-      const hasFormData = utils.isFormDataAvailable(this.props.formData);
-      const canAdd = this.canAddItem(formData) && (!renderOptionalField || hasFormData);
-      const actualFormData = hasFormData ? keyedFormData : [];
-      const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
-      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props }) : void 0;
-      const arrayProps = {
-        canAdd,
-        items: actualFormData.map((keyedItem, index) => {
-          const { key, item } = keyedItem;
-          const itemCast = item;
-          const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
-          const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
-          const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
-          const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
-          return this.renderArrayFieldItem({
-            key,
-            index,
-            name: name && `${name}-${index}`,
-            title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
-            canAdd,
-            canMoveUp: index > 0,
-            canMoveDown: index < formData.length - 1,
-            itemSchema,
-            itemFieldPathId,
-            itemErrorSchema,
-            itemData: itemCast,
-            itemUiSchema,
-            autofocus: autofocus && index === 0,
-            onBlur,
-            onFocus,
-            rawErrors,
-            totalItems: keyedFormData.length
-          });
-        }),
-        className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`,
-        disabled,
-        fieldPathId,
-        uiSchema,
-        onAddClick: this.onAddClick,
-        readonly,
-        required,
-        schema,
-        title: fieldTitle,
-        formData,
-        rawErrors,
-        registry,
-        optionalDataControl
-      };
-      const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-      return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
-    }
-    /** Renders an array using the custom widget provided by the user in the `uiSchema`
-     */
-    renderCustomWidget() {
-      const {
-        schema,
-        fieldPathId,
-        uiSchema,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        hideError,
-        placeholder,
-        onBlur,
-        onFocus,
-        formData: items = [],
-        registry,
-        rawErrors,
-        name
-      } = this.props;
-      const { widgets: widgets2, formContext, globalUiOptions, schemaUtils } = registry;
-      const { widget, title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets2);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Widget,
-        {
-          id: fieldPathId.$id,
-          name,
-          multiple: true,
-          onChange: this.onSelectChange,
-          onBlur,
-          onFocus,
-          options,
-          schema,
-          uiSchema,
-          registry,
-          value: items,
-          disabled,
-          readonly,
-          hideError,
-          required,
-          label,
-          hideLabel: !displayLabel,
-          placeholder,
-          formContext,
-          autofocus,
-          rawErrors
-        }
-      );
-    }
-    /** Renders an array as a set of checkboxes
-     */
-    renderMultiSelect() {
-      const {
-        schema,
-        fieldPathId,
-        uiSchema,
-        formData: items = [],
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        placeholder,
-        onBlur,
-        onFocus,
-        registry,
-        rawErrors,
-        name
-      } = this.props;
-      const { widgets: widgets2, schemaUtils, formContext, globalUiOptions } = registry;
-      const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
-      const enumOptions = utils.optionsList(itemsSchema, uiSchema);
-      const { widget = "select", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets2);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Widget,
-        {
-          id: fieldPathId.$id,
-          name,
-          multiple: true,
-          onChange: this.onSelectChange,
-          onBlur,
-          onFocus,
-          options: { ...options, enumOptions },
-          schema,
-          uiSchema,
-          registry,
-          value: items,
-          disabled,
-          readonly,
-          required,
-          label,
-          hideLabel: !displayLabel,
-          placeholder,
-          formContext,
-          autofocus,
-          rawErrors
+        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]);
+            }
+          }
         }
-      );
-    }
-    /** Renders an array of files using the `FileWidget`
-     */
-    renderFiles() {
-      const {
-        schema,
-        uiSchema,
-        fieldPathId,
-        name,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        onBlur,
-        onFocus,
+        function reOrderArray() {
+          const _newKeyedFormData = keyedFormData.slice();
+          _newKeyedFormData.splice(index, 1);
+          _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+          return _newKeyedFormData;
+        }
+        const newKeyedFormData = reOrderArray();
+        onChange(updateKeyedFormData(newKeyedFormData), fieldPathId.path, newErrorSchema);
+      },
+      [keyedFormData, onChange, updateKeyedFormData, errorSchema, fieldPathId]
+    );
+    const handleChange = react.useCallback(
+      (value, path, newErrorSchema, id) => {
+        onChange(
+          // We need to treat undefined items as nulls to have validation.
+          // See https://github.com/tdegrunt/jsonschema/issues/206
+          value === void 0 ? null : value,
+          path,
+          newErrorSchema,
+          id
+        );
+      },
+      [onChange]
+    );
+    const onSelectChange = react.useCallback(
+      (value) => {
+        onChange(value, fieldPathId.path, void 0, fieldPathId?.[utils.ID_KEY]);
+      },
+      [onChange, fieldPathId]
+    );
+    if (!(utils.ITEMS_KEY in schema)) {
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const UnsupportedFieldTemplate = utils.getTemplate(
+        "UnsupportedFieldTemplate",
         registry,
-        formData: items = [],
-        rawErrors
-      } = this.props;
-      const { widgets: widgets2, formContext, globalUiOptions, schemaUtils } = registry;
-      const { widget = "files", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets2);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+        uiOptions
+      );
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Widget,
+        UnsupportedFieldTemplate,
         {
-          options,
-          id: fieldPathId.$id,
-          name,
-          multiple: true,
-          onChange: this.onSelectChange,
-          onBlur,
-          onFocus,
           schema,
-          uiSchema,
-          value: items,
-          disabled,
-          readonly,
-          required,
-          registry,
-          formContext,
-          autofocus,
-          rawErrors,
-          label,
-          hideLabel: !displayLabel
+          fieldPathId,
+          reason: translateString(utils.TranslatableString.MissingItems),
+          registry
         }
       );
     }
-    /** Renders an array that has a maximum limit of items
-     */
-    renderFixedArray() {
-      const {
-        schema,
-        uiSchema = {},
-        formData,
-        errorSchema,
-        fieldPathId,
-        name,
-        title,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        registry,
-        onBlur,
-        onFocus,
-        rawErrors
-      } = this.props;
-      let { formData: items = [] } = this.props;
-      const { keyedFormData } = this.state;
-      const fieldTitle = schema.title || title || name;
-      const uiOptions = utils.getUiOptions(uiSchema);
-      const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
-      const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
-      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
-      const hasFormData = utils.isFormDataAvailable(formData);
-      const _schemaItems = isObject(schema.items) ? schema.items : [];
-      const itemSchemas = _schemaItems.map(
-        (item, index) => schemaUtils.retrieveSchema(item, items[index])
-      );
-      const additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
-      if (items.length < itemSchemas.length) {
-        items = items.concat(new Array(itemSchemas.length - items.length));
-      }
-      const actualFormData = hasFormData ? keyedFormData : [];
-      const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
-      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props }) : void 0;
-      const canAdd = this.canAddItem(items) && !!additionalSchema && (!renderOptionalField || hasFormData);
-      const arrayProps = {
-        canAdd,
-        className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
-        disabled,
-        fieldPathId,
-        formData,
-        items: actualFormData.map((keyedItem, index) => {
-          const { key, item } = keyedItem;
-          const itemCast = item;
-          const additional = index >= itemSchemas.length;
-          const itemSchema = (additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
-          const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, fieldPathId);
-          let itemUiSchema;
-          if (additional) {
-            itemUiSchema = uiSchema.additionalItems;
-          } else {
-            if (Array.isArray(uiSchema.items)) {
-              itemUiSchema = uiSchema.items[index];
-            } else {
-              itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
-            }
-          }
-          const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
-          return this.renderArrayFieldItem({
-            key,
-            index,
-            name: name && `${name}-${index}`,
-            title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
-            canAdd,
-            canRemove: additional,
-            canMoveUp: index >= itemSchemas.length + 1,
-            canMoveDown: additional && index < items.length - 1,
-            itemSchema,
-            itemData: itemCast,
-            itemUiSchema,
-            itemFieldPathId,
-            itemErrorSchema,
-            autofocus: autofocus && index === 0,
-            onBlur,
-            onFocus,
-            rawErrors,
-            totalItems: keyedFormData.length
-          });
-        }),
-        onAddClick: this.onAddClick,
-        readonly,
-        required,
-        registry,
-        schema,
-        uiSchema,
-        title: fieldTitle,
-        errorSchema,
-        rawErrors,
-        optionalDataControl
-      };
-      const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-      return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
+    const arrayProps = {
+      handleAddItem,
+      handleCopyItem,
+      handleRemoveItem,
+      handleReorderItems,
+      keyedFormData,
+      onChange: handleChange
+    };
+    if (schemaUtils.isMultiSelect(schema)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsMultiSelect, { ...props, onSelectChange });
     }
-    /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
-     * back to the `ArrayFieldItemTemplate`.
-     *
-     * @param props - The props for the individual array item to be rendered
-     */
-    renderArrayFieldItem(props) {
-      const {
-        key,
-        index,
-        name,
-        canAdd,
-        canRemove = true,
-        canMoveUp,
-        canMoveDown,
-        itemSchema,
-        itemData,
-        itemUiSchema,
-        itemFieldPathId,
-        itemErrorSchema,
-        autofocus,
-        onBlur,
-        onFocus,
-        rawErrors,
-        totalItems,
-        title
-      } = props;
-      const { disabled, hideError, readonly, uiSchema, registry, formContext } = this.props;
-      const {
-        fields: { ArraySchemaField, SchemaField: SchemaField2 },
-        globalUiOptions
-      } = registry;
-      const ItemSchemaField = ArraySchemaField || SchemaField2;
-      const { orderable = true, removable = true, copyable = false } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const has4 = {
-        moveUp: orderable && canMoveUp,
-        moveDown: orderable && canMoveDown,
-        copy: copyable && canAdd,
-        remove: removable && canRemove,
-        toolbar: false
-      };
-      has4.toolbar = Object.keys(has4).some((key2) => has4[key2]);
-      return {
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ItemSchemaField,
-          {
-            name,
-            title,
-            index,
-            schema: itemSchema,
-            uiSchema: itemUiSchema,
-            formData: itemData,
-            formContext,
-            errorSchema: itemErrorSchema,
-            fieldPathId: itemFieldPathId,
-            required: this.isItemRequired(itemSchema),
-            onChange: this.onChangeForIndex(index),
-            onBlur,
-            onFocus,
-            registry,
-            disabled,
-            readonly,
-            hideError,
-            autofocus,
-            rawErrors
-          }
-        ),
-        buttonsProps: {
-          fieldPathId: itemFieldPathId,
-          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,
-        hasToolbar: has4.toolbar,
-        index,
-        totalItems,
-        key,
-        readonly,
-        registry,
-        schema: itemSchema,
-        uiSchema: itemUiSchema
-      };
+    if (utils.isCustomWidget(uiSchema)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsCustomWidget, { ...props, onSelectChange });
     }
-  };
-  var ArrayField_default = ArrayField;
+    if (utils.isFixedItems(schema)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(FixedArray, { ...props, ...arrayProps });
+    }
+    if (schemaUtils.isFilesArray(schema, uiSchema)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsFiles, { ...props, onSelectChange });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(NormalArray, { ...props, ...arrayProps });
+  }
   function BooleanField(props) {
     const {
       schema,
@@ -831,7 +783,7 @@
       rawErrors
     } = props;
     const { title: schemaTitle } = schema;
-    const { widgets: widgets2, formContext, translateString, globalUiOptions } = registry;
+    const { widgets: widgets2, translateString, globalUiOptions } = registry;
     const {
       widget = "checkbox",
       title: uiTitle,
@@ -903,13 +855,123 @@
         readonly,
         hideError,
         registry,
-        formContext,
         autofocus,
-        rawErrors
+        rawErrors,
+        htmlName: fieldPathId.name
       }
     );
   }
   var BooleanField_default = BooleanField;
+  function getFallbackTypeSelectionSchema(title) {
+    return {
+      type: "string",
+      enum: ["string", "number", "boolean"],
+      default: "string",
+      title
+    };
+  }
+  function getTypeOfFormData(formData) {
+    const dataType = typeof formData;
+    if (dataType === "string" || dataType === "number" || dataType === "boolean") {
+      return dataType;
+    }
+    return "string";
+  }
+  function castToNewType(formData, newType) {
+    switch (newType) {
+      case "string":
+        return String(formData);
+      case "number": {
+        const castedNumber = Number(formData);
+        return isNaN(castedNumber) ? 0 : castedNumber;
+      }
+      case "boolean":
+        return Boolean(formData);
+      default:
+        return formData;
+    }
+  }
+  function FallbackField(props) {
+    const {
+      id,
+      formData,
+      displayLabel = true,
+      schema,
+      name,
+      uiSchema,
+      required,
+      disabled = false,
+      readonly = false,
+      onBlur,
+      onFocus,
+      registry,
+      fieldPathId,
+      onChange,
+      errorSchema
+    } = props;
+    const { translateString, fields: fields2, globalFormOptions } = registry;
+    const [type, setType] = react.useState(getTypeOfFormData(formData));
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const typeSelectorInnerFieldPathId = utils.useDeepCompareMemo(
+      utils.toFieldPathId("__internal_type_selector", globalFormOptions, fieldPathId)
+    );
+    const schemaTitle = translateString(utils.TranslatableString.Type);
+    const typesOptionSchema = react.useMemo(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]);
+    const onTypeChange = (newType) => {
+      if (newType != null) {
+        setType(newType);
+        onChange(castToNewType(formData, newType), fieldPathId.path, errorSchema, id);
+      }
+    };
+    if (!globalFormOptions.useFallbackUiForUnsupportedType) {
+      const UnsupportedFieldTemplate = utils.getTemplate(
+        "UnsupportedFieldTemplate",
+        registry,
+        uiOptions
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        UnsupportedFieldTemplate,
+        {
+          schema,
+          fieldPathId,
+          reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
+          registry
+        }
+      );
+    }
+    const FallbackFieldTemplate2 = utils.getTemplate(
+      "FallbackFieldTemplate",
+      registry,
+      uiOptions
+    );
+    const { SchemaField: SchemaField2 } = fields2;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FallbackFieldTemplate2,
+      {
+        schema,
+        registry,
+        typeSelector: /* @__PURE__ */ jsxRuntime.jsx(
+          SchemaField2,
+          {
+            fieldPathId: typeSelectorInnerFieldPathId,
+            name: `${name}__fallback_type`,
+            schema: typesOptionSchema,
+            formData: type,
+            onChange: onTypeChange,
+            onBlur,
+            onFocus,
+            registry,
+            hideLabel: !displayLabel,
+            disabled,
+            readonly,
+            required
+          },
+          formData ? utils.hashObject(formData) : "__empty__"
+        ),
+        schemaField: /* @__PURE__ */ jsxRuntime.jsx(SchemaField2, { ...props, schema: { type, title: translateString(utils.TranslatableString.Value) } })
+      }
+    );
+  }
   var LOOKUP_REGEX = /^\$lookup=(.+)/;
   var LAYOUT_GRID_UI_OPTION = "layoutGrid";
   function getNonNullishValue(value, fallback) {
@@ -918,518 +980,339 @@
   function isNumericIndex(str) {
     return /^\d+?$/.test(str);
   }
-  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, [utils.UI_GLOBAL_OPTIONS_KEY], {});
-      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, [utils.UI_GLOBAL_OPTIONS_KEY], 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 };
+  var LAYOUT_GRID_FIELD_TEST_IDS = utils.getTestIds();
+  function computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
+    const globalUiOptions = get(uiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], {});
+    const localUiSchema = get(uiSchema, field);
+    const localUiOptions = { ...get(localUiSchema, [utils.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+    const fieldUiSchema = { ...localUiSchema };
+    if (!isEmpty(localUiOptions)) {
+      set(fieldUiSchema, [utils.UI_OPTIONS_KEY], localUiOptions);
     }
-    /** 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;
-      }
+    if (!isEmpty(globalUiOptions)) {
+      set(fieldUiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
     }
-    /** 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)}`);
+    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 { children, gridProps };
     }
-    /** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
-     * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
-     * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
-     * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
-     * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
-     * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
-     * as is.
-     *
-     * @param schema - The schema to generate the fieldPathId for
-     * @param fieldPathId - The FieldPathId for the schema
-     * @param potentialIndex - A string containing a potential index
-     * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
-     */
-    static computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
-      let rawSchema;
-      if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && has(schema, utils.ITEMS_KEY)) {
-        const index = Number(potentialIndex);
-        const items = schema[utils.ITEMS_KEY];
-        if (Array.isArray(items)) {
-          if (index > items.length) {
-            rawSchema = last(items);
-          } else {
-            rawSchema = items[index];
-          }
-        } else {
-          rawSchema = items;
-        }
-        fieldPathId = {
-          [utils.ID_KEY]: fieldPathId[utils.ID_KEY],
-          path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index]
-        };
-      }
-      return { rawSchema, fieldPathId };
+    return { fieldUiSchema, uiReadonly };
+  }
+  function 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;
     }
-    /** 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 registry - The registry
-     * @param dottedPath - The dotted-path to the field for which to get the schema
-     * @param initialSchema - The initial schema to start the search from
-     * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
-     * @param initialFieldIdPath - The initial fieldPathId to start the search from
-     * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
-     *            info if a oneOf/anyOf
-     */
-    static getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
-      const { schemaUtils, globalFormOptions } = registry;
-      let rawSchema = initialSchema;
-      let fieldPathId = initialFieldIdPath;
-      const parts = dottedPath.split(".");
-      const leafPath = parts.pop();
-      let schema = schemaUtils.retrieveSchema(rawSchema, formData);
-      let innerData = formData;
-      let isReadonly = schema.readOnly;
-      parts.forEach((part) => {
-        fieldPathId = utils.toFieldPathId(part, globalFormOptions, fieldPathId);
-        if (has(schema, utils.PROPERTIES_KEY)) {
-          rawSchema = get2(schema, [utils.PROPERTIES_KEY, part], {});
-        } 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);
-          rawSchema = get2(selectedSchema, [utils.PROPERTIES_KEY, part], {});
-        } else {
-          const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, part);
-          rawSchema = result.rawSchema ?? {};
-          fieldPathId = result.fieldPathId;
-        }
-        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;
+  }
+  function 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 (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);
-        }
-        fieldPathId = utils.toFieldPathId(leafPath, globalFormOptions, fieldPathId);
-        isRequired = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
-        const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
-        if (result.rawSchema) {
-          schema = result.rawSchema;
-          fieldPathId = result.fieldPathId;
+    }
+    if (!Array.isArray(children)) {
+      throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
+    }
+    return { children, gridProps };
+  }
+  function computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
+    let rawSchema;
+    if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && has(schema, utils.ITEMS_KEY)) {
+      const index = Number(potentialIndex);
+      const items = schema[utils.ITEMS_KEY];
+      if (Array.isArray(items)) {
+        if (index > items.length) {
+          rawSchema = last(items);
         } else {
-          schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
-          schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-        }
-        isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
-        if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
-          const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
-          const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
-          optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
+          rawSchema = items[index];
         }
+      } else {
+        rawSchema = items;
       }
-      return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
+      fieldPathId = {
+        [utils.ID_KEY]: fieldPathId[utils.ID_KEY],
+        path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index]
+      };
     }
-    /** 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 { rawSchema, fieldPathId };
+  }
+  function getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
+    const { schemaUtils, globalFormOptions } = registry;
+    let rawSchema = initialSchema;
+    let fieldPathId = initialFieldIdPath;
+    const parts = dottedPath.split(".");
+    const leafPath = parts.pop();
+    let schema = schemaUtils.retrieveSchema(rawSchema, formData);
+    let innerData = formData;
+    let isReadonly = schema.readOnly;
+    parts.forEach((part) => {
+      fieldPathId = utils.toFieldPathId(part, globalFormOptions, fieldPathId);
+      if (has(schema, utils.PROPERTIES_KEY)) {
+        rawSchema = get(schema, [utils.PROPERTIES_KEY, 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);
+        rawSchema = get(selectedSchema, [utils.PROPERTIES_KEY, part], {});
+      } else {
+        const result = computeArraySchemasIfPresent(schema, fieldPathId, part);
+        rawSchema = result.rawSchema ?? {};
+        fieldPathId = result.fieldPathId;
       }
-      return null;
+      innerData = get(innerData, part, {});
+      schema = schemaUtils.retrieveSchema(rawSchema, innerData);
+      isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
+    });
+    let optionsInfo;
+    let isRequired2 = false;
+    if (isEmpty(schema)) {
+      schema = void 0;
     }
-    /** 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 ?? "";
+    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);
+      }
+      fieldPathId = utils.toFieldPathId(leafPath, globalFormOptions, fieldPathId);
+      isRequired2 = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
+      const result = computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
+      if (result.rawSchema) {
+        schema = result.rawSchema;
+        fieldPathId = result.fieldPathId;
       } 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 });
-        }
+        schema = get(schema, [utils.PROPERTIES_KEY, leafPath]);
+        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+      }
+      isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
+      if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
+        const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
+        const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+        optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
       }
-      return { name, UIComponent, uiProps, rendered };
     }
-    /** Constructs an `LayoutGridField` with the given `props`
-     *
-     * @param props - The `LayoutGridField` for this template
-     */
-    constructor(props) {
-      super(props);
+    return { schema, isRequired: isRequired2, isReadonly, optionsInfo, fieldPathId };
+  }
+  function getCustomRenderComponent(render, registry) {
+    let customRenderer = render;
+    if (isString(customRenderer)) {
+      customRenderer = utils.lookupFromFormContext(registry, customRenderer);
     }
-    /** 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 of the `schemaType` type
-     */
-    onFieldChange = (dottedPath) => {
-      return (value, path, errSchema, id) => {
-        const { onChange } = this.props;
-        onChange(value, path, errSchema, id);
-      };
-    };
-    /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
-     * `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;
+    if (isFunction(customRenderer)) {
+      return customRenderer;
     }
-    /** 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) });
+    return null;
+  }
+  function 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 = getCustomRenderComponent(render, registry);
+      if (!innerName && UIComponent) {
+        rendered = /* @__PURE__ */ jsxRuntime.jsx(UIComponent, { ...innerProps, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.uiComponent });
+      }
     }
-    /** 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)}`
-      ));
+    return { name, UIComponent, uiProps, rendered };
+  }
+  function LayoutGridFieldChildren(props) {
+    const { childrenLayoutGridSchemaId, ...layoutGridFieldProps } = props;
+    const { registry, schema: rawSchema, formData } = layoutGridFieldProps;
+    const { schemaUtils } = registry;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+    return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
+      LayoutGridField,
+      {
+        ...layoutGridFieldProps,
+        key: `layoutGrid-${utils.hashObject(layoutGridSchema)}`,
+        schema,
+        layoutGridSchema
+      }
+    ));
+  }
+  function LayoutGridCondition(props) {
+    const { layoutGridSchema, ...layoutGridFieldProps } = props;
+    const { formData, registry } = layoutGridFieldProps;
+    const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:condition" /* CONDITION */, registry);
+    const { operator, field = "", value } = gridProps;
+    const fieldData = get(formData, field, null);
+    if (conditionMatches(operator, fieldData, value)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children });
     }
-    /** 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) });
+    return null;
+  }
+  function LayoutGridCol(props) {
+    const { layoutGridSchema, ...layoutGridFieldProps } = props;
+    const { registry, uiSchema } = layoutGridFieldProps;
+    const { children, gridProps } = 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": LAYOUT_GRID_FIELD_TEST_IDS.col, ...gridProps, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children }) });
+  }
+  function LayoutGridColumns(props) {
+    const { layoutGridSchema, ...layoutGridFieldProps } = props;
+    const { registry, uiSchema } = layoutGridFieldProps;
+    const { children, gridProps } = 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": LAYOUT_GRID_FIELD_TEST_IDS.col,
+        ...gridProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: [child] })
+      },
+      `column-${utils.hashObject(child)}`
+    ));
+  }
+  function LayoutGridRow(props) {
+    const { layoutGridSchema, ...layoutGridFieldProps } = props;
+    const { registry, uiSchema } = layoutGridFieldProps;
+    const { children, gridProps } = 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": LAYOUT_GRID_FIELD_TEST_IDS.row, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children }) });
+  }
+  function LayoutGridFieldComponent(props) {
+    const {
+      gridSchema,
+      schema: initialSchema,
+      uiSchema,
+      errorSchema,
+      fieldPathId,
+      onBlur,
+      onFocus,
+      formData,
+      readonly,
+      registry,
+      layoutGridSchema,
+      // Used to pull this out of otherProps since we don't want to pass it through
+      ...otherProps
+    } = props;
+    const { onChange } = otherProps;
+    const { fields: fields2 } = registry;
+    const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
+    const uiComponentProps = computeUIComponentPropsFromGridSchema(registry, gridSchema);
+    const { name, UIComponent, uiProps } = uiComponentProps;
+    const {
+      schema,
+      isRequired: isRequired2,
+      isReadonly,
+      optionsInfo,
+      fieldPathId: fieldIdSchema
+    } = getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId);
+    const memoFieldPathId = utils.useDeepCompareMemo(fieldIdSchema);
+    if (uiComponentProps.rendered) {
+      return uiComponentProps.rendered;
     }
-    /** Iterates through all the `childrenLayoutGrfieldPathId`, rendering a nested `LayoutGridField` for each item in the
-     * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
-     * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
-     * `childrenLayoutGrfieldPathId` is passed as `layoutGridSchema`.
-     *
-     * @param childrenLayoutGrfieldPathId - The list of strings or objects that represents the configurations for the
-     *          children fields
-     * @returns - The nested `LayoutGridField`s
-     */
-    renderChildren(childrenLayoutGrfieldPathId) {
-      const { registry, schema: rawSchema, formData } = this.props;
-      const { schemaUtils } = registry;
-      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-      return childrenLayoutGrfieldPathId.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
-        _LayoutGridField,
+    if (schema) {
+      const Field2 = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
+      const { fieldUiSchema, uiReadonly } = computeFieldUiSchema(name, uiProps, uiSchema, isReadonly, readonly);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Field2,
         {
-          ...this.props,
-          key: `layoutGrid-${utils.hashObject(layoutGridSchema)}`,
+          "data-testid": optionsInfo?.hasDiscriminator ? LAYOUT_GRID_FIELD_TEST_IDS.layoutMultiSchemaField : LAYOUT_GRID_FIELD_TEST_IDS.field,
+          ...otherProps,
+          name,
+          required: isRequired2,
+          readonly: uiReadonly,
           schema,
-          layoutGridSchema
+          uiSchema: fieldUiSchema,
+          errorSchema: get(errorSchema, name),
+          fieldPathId: memoFieldPathId,
+          formData: get(formData, name),
+          onChange,
+          onBlur,
+          onFocus,
+          options: optionsInfo?.options,
+          registry
         }
-      ));
+      );
     }
-    /** 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`, `fieldPathId` and `formData` drilled down to the dotted-path field, spreading any other
-     * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
-     * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
-     * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
-     * 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,
-        fieldPathId,
-        onBlur,
-        onFocus,
-        formData,
-        readonly,
-        registry,
-        layoutGridSchema,
-        // Used to pull this out of otherProps since we don't want to pass it through
-        ...otherProps
-      } = this.props;
-      const { fields: fields2 } = 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,
-        fieldPathId: fieldIdSchema
-      } = _LayoutGridField.getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId);
-      if (schema) {
-        const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
-        const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
+    if (UIComponent) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        UIComponent,
+        {
+          "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.uiComponent,
+          ...otherProps,
           name,
-          uiProps,
+          required: isRequired2,
+          formData,
+          readOnly: !!isReadonly || readonly,
+          errorSchema,
           uiSchema,
-          isReadonly,
-          readonly
-        );
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Field,
-          {
-            "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),
-            fieldPathId: fieldIdSchema,
-            formData: get2(formData, name),
-            onChange: this.onFieldChange(name),
-            onBlur,
-            onFocus,
-            options: optionsInfo?.options,
-            registry
-          }
-        );
+          schema: initialSchema,
+          fieldPathId,
+          onBlur,
+          onFocus,
+          registry,
+          ...uiProps
+        }
+      );
+    }
+    return null;
+  }
+  function LayoutGridField(props) {
+    const { uiSchema } = props;
+    let { layoutGridSchema } = 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 /* @__PURE__ */ jsxRuntime.jsx(LayoutGridRow, { ...props, layoutGridSchema });
       }
-      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,
-            fieldPathId,
-            onBlur,
-            onFocus,
-            registry,
-            ...uiProps
-          }
-        );
+      if ("ui:col" /* COLUMN */ in layoutGridSchema) {
+        return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridCol, { ...props, layoutGridSchema });
       }
-      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 ("ui:columns" /* COLUMNS */ in layoutGridSchema) {
+        return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridColumns, { ...props, layoutGridSchema });
       }
-      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);
-        }
+      if ("ui:condition" /* CONDITION */ in layoutGridSchema) {
+        return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridCondition, { ...props, layoutGridSchema });
       }
-      return this.renderField(layoutGridSchema);
     }
-  };
+    return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldComponent, { ...props, gridSchema: layoutGridSchema });
+  }
+  LayoutGridField.TEST_IDS = LAYOUT_GRID_FIELD_TEST_IDS;
   function LayoutHeaderField(props) {
     const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
     const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
@@ -1460,8 +1343,8 @@
     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));
+      const selector = get(option, [utils.PROPERTIES_KEY, selectorField]);
+      const result = get(selector, utils.DEFAULT_KEY, get(selector, utils.CONST_KEY, defaultValue));
       return result === value;
     });
   }
@@ -1493,7 +1376,6 @@
       registry,
       uiSchema,
       schema,
-      formContext,
       autofocus,
       readonly,
       required,
@@ -1502,7 +1384,7 @@
     } = props;
     const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
     const [enumOptions, setEnumOptions] = react.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
-    const id = get2(fieldPathId, utils.ID_KEY);
+    const id = get(fieldPathId, utils.ID_KEY);
     const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, options);
     const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, options);
@@ -1524,13 +1406,13 @@
     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 selectedOption = get(formData, selectorField);
+    let optionSchema = get(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 rawErrors = get(errorSchema, [utils.ERRORS_KEY], []);
     const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const onOptionChange = (opt) => {
@@ -1547,7 +1429,6 @@
     };
     const widgetOptions = { enumOptions, ...uiOptions };
     const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FieldErrorTemplate2, { fieldPathId, schema, errors: rawErrors, registry }) : void 0;
-    const ignored = (value) => noop;
     return /* @__PURE__ */ jsxRuntime.jsx(
       FieldTemplate2,
       {
@@ -1562,8 +1443,9 @@
         displayLabel,
         errors,
         onChange,
-        onDropPropertyClick: ignored,
-        onKeyChange: ignored,
+        onKeyRename: noop,
+        onKeyRenameBlur: noop,
+        onRemoveProperty: noop,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Widget,
           {
@@ -1573,7 +1455,6 @@
             label: (title || schema.title) ?? "",
             disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
             uiSchema,
-            formContext,
             autofocus,
             readonly,
             required,
@@ -1588,7 +1469,8 @@
             onBlur,
             onFocus,
             value: selectedOption,
-            options: widgetOptions
+            options: widgetOptions,
+            htmlName: fieldPathId.name
           }
         )
       }
@@ -1690,10 +1572,11 @@
         name,
         disabled = false,
         errorSchema = {},
-        formContext,
+        formData,
         onBlur,
         onFocus,
         readonly,
+        required = false,
         registry,
         schema,
         uiSchema
@@ -1705,6 +1588,8 @@
         registry,
         globalUiOptions
       );
+      const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+      const hasFormData = utils.isFormDataAvailable(formData);
       const { selectedOption, retrievedOptions } = this.state;
       const {
         widget = "select",
@@ -1715,14 +1600,14 @@
         ...uiOptions
       } = utils.getUiOptions(uiSchema, globalUiOptions);
       const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
-      const rawErrors = get2(errorSchema, utils.ERRORS_KEY, []);
+      const rawErrors = get(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;
       if (option) {
-        const { required } = schema;
-        optionSchema = required ? utils.mergeSchemas({ required }, option) : option;
+        const { required: required2 } = schema;
+        optionSchema = required2 ? utils.mergeSchemas({ required: required2 }, option) : option;
       }
       let optionsUiSchema = [];
       if (utils.ONE_OF_KEY in schema && uiSchema && utils.ONE_OF_KEY in uiSchema) {
@@ -1751,7 +1636,7 @@
           value: index
         };
       });
-      const selector = /* @__PURE__ */ jsxRuntime.jsx(
+      const selector = !isOptionalRender || hasFormData ? /* @__PURE__ */ jsxRuntime.jsx(
         Widget,
         {
           id: this.getFieldId(),
@@ -1767,7 +1652,6 @@
           value: selectedOption >= 0 ? selectedOption : void 0,
           options: { enumOptions, ...uiOptions },
           registry,
-          formContext,
           placeholder,
           autocomplete,
           autofocus,
@@ -1775,7 +1659,7 @@
           hideLabel: !displayLabel,
           readonly
         }
-      );
+      ) : void 0;
       const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
       return /* @__PURE__ */ jsxRuntime.jsx(
         MultiSchemaFieldTemplate2,
@@ -1817,132 +1701,154 @@
     return /* @__PURE__ */ jsxRuntime.jsx(StringField2, { ...props, formData: value, onChange: handleChange });
   }
   var NumberField_default = NumberField;
-  var ObjectField = class extends react.Component {
-    /** 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
-     * @returns - True if the field `name` is required, false otherwise
-     */
-    isRequired(name) {
-      const { schema } = this.props;
-      return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+  function isRequired(schema, name) {
+    return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+  }
+  function getDefaultValue(translateString, type) {
+    switch (type) {
+      case "array":
+        return [];
+      case "boolean":
+        return false;
+      case "null":
+        return null;
+      case "number":
+        return 0;
+      case "object":
+        return {};
+      case "string":
+      default:
+        return translateString(utils.TranslatableString.NewStringDefault);
     }
-    /** 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, path, newErrorSchema, id) => {
-        const { onChange } = this.props;
+  }
+  function ObjectFieldProperty(props) {
+    const {
+      fieldPathId,
+      schema,
+      registry,
+      uiSchema,
+      errorSchema,
+      formData,
+      onChange,
+      onBlur,
+      onFocus,
+      disabled,
+      readonly,
+      required,
+      hideError,
+      propertyName,
+      handleKeyRename,
+      handleRemoveProperty,
+      addedByAdditionalProperties
+    } = props;
+    const [wasPropertyKeyModified, setWasPropertyKeyModified] = react.useState(false);
+    const { globalFormOptions, fields: fields2 } = registry;
+    const { SchemaField: SchemaField2 } = fields2;
+    const innerFieldIdPathId = utils.useDeepCompareMemo(
+      utils.toFieldPathId(propertyName, globalFormOptions, fieldPathId.path)
+    );
+    const onPropertyChange = react.useCallback(
+      (value, path, newErrorSchema, id) => {
         if (value === void 0 && addedByAdditionalProperties) {
           value = "";
         }
         onChange(value, path, 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, fieldPathId } = this.props;
-        const copiedFormData = { ...formData };
-        unset(copiedFormData, key);
-        onChange(copiedFormData, fieldPathId.path);
-      };
-    };
-    /** 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) => {
-        if (oldValue === value) {
-          return;
+      },
+      [onChange, addedByAdditionalProperties]
+    );
+    const onKeyRename = react.useCallback(
+      (value) => {
+        if (propertyName !== value) {
+          setWasPropertyKeyModified(true);
         }
-        const { formData, onChange, fieldPathId } = 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, fieldPathId.path);
-      };
-    };
-    /** 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
-     */
-    getDefaultValue(type) {
-      const {
-        registry: { translateString }
-      } = this.props;
-      switch (type) {
-        case "array":
-          return [];
-        case "boolean":
-          return false;
-        case "null":
-          return null;
-        case "number":
-          return 0;
-        case "object":
-          return {};
-        case "string":
-        default:
-          return translateString(utils.TranslatableString.NewStringDefault);
+        handleKeyRename(propertyName, value);
+      },
+      [propertyName, handleKeyRename]
+    );
+    const onKeyRenameBlur = react.useCallback(
+      (event) => {
+        const {
+          target: { value }
+        } = event;
+        onKeyRename(value);
+      },
+      [onKeyRename]
+    );
+    const onRemoveProperty = react.useCallback(() => {
+      handleRemoveProperty(propertyName);
+    }, [propertyName, handleRemoveProperty]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SchemaField2,
+      {
+        name: propertyName,
+        required,
+        schema,
+        uiSchema,
+        errorSchema,
+        fieldPathId: innerFieldIdPathId,
+        formData,
+        wasPropertyKeyModified,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
+        onChange: onPropertyChange,
+        onBlur,
+        onFocus,
+        registry,
+        disabled,
+        readonly,
+        hideError
       }
-    }
-    /** 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) => () => {
+    );
+  }
+  function ObjectField(props) {
+    const {
+      schema: rawSchema,
+      uiSchema = {},
+      formData,
+      errorSchema,
+      fieldPathId,
+      name,
+      required = false,
+      disabled,
+      readonly,
+      hideError,
+      onBlur,
+      onFocus,
+      onChange,
+      registry,
+      title
+    } = props;
+    const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
+    const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const { properties: schemaProperties = {} } = schema;
+    const formDataHash = utils.hashObject(formData || {});
+    const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
+    const description = uiOptions.description ?? schema.description;
+    const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = utils.isFormDataAvailable(formData);
+    let orderedProperties = [];
+    const getAvailableKey = react.useCallback(
+      (preferredKey, formData2) => {
+        const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, globalUiOptions);
+        let index = 0;
+        let newKey = preferredKey;
+        while (has(formData2, newKey)) {
+          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+        }
+        return newKey;
+      },
+      [uiSchema, globalUiOptions]
+    );
+    const onAddProperty = react.useCallback(() => {
       if (!(schema.additionalProperties || schema.patternProperties)) {
         return;
       }
-      const { formData, onChange, registry, fieldPathId } = this.props;
+      const { translateString: translateString2 } = registry;
       const newFormData = { ...formData };
-      const newKey = this.getAvailableKey("newKey", newFormData);
+      const newKey = getAvailableKey("newKey", newFormData);
       if (schema.patternProperties) {
         set(newFormData, newKey, null);
       } else {
@@ -1955,8 +1861,8 @@
           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);
+            const { schemaUtils: schemaUtils2 } = registry;
+            apSchema = schemaUtils2.retrieveSchema({ [utils.REF_KEY]: apSchema[utils.REF_KEY] }, formData);
             type = apSchema.type;
             constValue = apSchema.const;
             defaultValue = apSchema.default;
@@ -1965,111 +1871,104 @@
             type = "object";
           }
         }
-        const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+        const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
         set(newFormData, newKey, newValue);
       }
       onChange(newFormData, fieldPathId.path);
-    };
-    /** Renders the `ObjectField` from the given props
-     */
-    render() {
-      const {
-        schema: rawSchema,
-        uiSchema = {},
-        formData,
-        errorSchema,
-        fieldPathId,
-        name,
-        required = false,
-        disabled,
-        readonly,
-        hideError,
-        onBlur,
-        onFocus,
-        registry,
-        title
-      } = this.props;
-      const { fields: fields2, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
-      const { OptionalDataControlsField: OptionalDataControlsField2, SchemaField: SchemaField2 } = fields2;
-      const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
-      const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
-      const { properties: schemaProperties = {} } = schema;
-      const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
-      const description = uiOptions.description ?? schema.description;
-      const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
-      const hasFormData = utils.isFormDataAvailable(formData);
-      let orderedProperties = [];
-      if (!renderOptionalField || hasFormData) {
-        try {
-          const properties = Object.keys(schemaProperties);
-          orderedProperties = utils.orderProperties(properties, uiOptions.order);
-        } catch (err) {
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
-          ] });
+    }, [formData, onChange, registry, fieldPathId, getAvailableKey, schema]);
+    const handleKeyRename = react.useCallback(
+      (oldKey, newKey) => {
+        if (oldKey !== newKey) {
+          const actualNewKey = getAvailableKey(newKey, formData);
+          const newFormData = {
+            ...formData
+          };
+          const newKeys = { [oldKey]: actualNewKey };
+          const keyValues = Object.keys(newFormData).map((key) => {
+            const newKey2 = newKeys[key] || key;
+            return { [newKey2]: newFormData[key] };
+          });
+          const renamedObj = Object.assign({}, ...keyValues);
+          onChange(renamedObj, fieldPathId.path);
         }
+      },
+      [formData, onChange, fieldPathId, getAvailableKey]
+    );
+    const handleRemoveProperty = react.useCallback(
+      (key) => {
+        const copiedFormData = { ...formData };
+        unset(copiedFormData, key);
+        onChange(copiedFormData, fieldPathId.path);
+      },
+      [onChange, fieldPathId, formData]
+    );
+    if (!renderOptionalField || hasFormData) {
+      try {
+        const properties = Object.keys(schemaProperties);
+        orderedProperties = utils.orderProperties(properties, uiOptions.order);
+      } catch (err) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
+        ] });
       }
-      const Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
-      const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...this.props, schema }) : void 0;
-      const templateProps = {
-        // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
-        title: uiOptions.label === false ? "" : templateTitle,
-        description: uiOptions.label === false ? void 0 : description,
-        properties: orderedProperties.map((name2) => {
-          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 innerFieldIdPathId = utils.toFieldPathId(name2, globalFormOptions, fieldPathId);
-          return {
-            content: /* @__PURE__ */ jsxRuntime.jsx(
-              SchemaField2,
-              {
-                name: name2,
-                required: this.isRequired(name2),
-                schema: get2(schema, [utils.PROPERTIES_KEY, name2], {}),
-                uiSchema: fieldUiSchema,
-                errorSchema: get2(errorSchema, name2),
-                fieldPathId: innerFieldIdPathId,
-                formData: get2(formData, name2),
-                formContext,
-                wasPropertyKeyModified: this.state.wasPropertyKeyModified,
-                onKeyChange: this.onKeyChange(name2),
-                onChange: this.onPropertyChange(name2, addedByAdditionalProperties),
-                onBlur,
-                onFocus,
-                registry,
-                disabled,
-                readonly,
-                hideError,
-                onDropPropertyClick: this.onDropPropertyClick
-              },
-              name2
-            ),
-            name: name2,
-            readonly,
-            disabled,
-            required,
-            hidden
-          };
-        }),
-        readonly,
-        disabled,
-        required,
-        fieldPathId,
-        uiSchema,
-        errorSchema,
-        schema,
-        formData,
-        formContext,
-        registry,
-        optionalDataControl,
-        className: renderOptionalField ? "rjsf-optional-object-field" : void 0
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...templateProps, onAddClick: this.handleAddClick });
     }
-  };
-  var ObjectField_default = ObjectField;
+    const Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...props, schema }) : void 0;
+    const templateProps = {
+      // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
+      title: uiOptions.label === false ? "" : templateTitle,
+      description: uiOptions.label === false ? void 0 : description,
+      properties: orderedProperties.map((name2) => {
+        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 content = /* @__PURE__ */ jsxRuntime.jsx(
+          ObjectFieldProperty,
+          {
+            propertyName: name2,
+            required: isRequired(schema, name2),
+            schema: get(schema, [utils.PROPERTIES_KEY, name2], {}),
+            uiSchema: fieldUiSchema,
+            errorSchema: get(errorSchema, name2),
+            fieldPathId,
+            formData: get(formData, name2),
+            handleKeyRename,
+            handleRemoveProperty,
+            addedByAdditionalProperties,
+            onChange,
+            onBlur,
+            onFocus,
+            registry,
+            disabled,
+            readonly,
+            hideError
+          },
+          addedByAdditionalProperties ? `${name2}-${formDataHash}` : name2
+        );
+        return {
+          content,
+          name: name2,
+          readonly,
+          disabled,
+          required,
+          hidden
+        };
+      }),
+      readonly,
+      disabled,
+      required,
+      fieldPathId,
+      uiSchema,
+      errorSchema,
+      schema,
+      formData,
+      registry,
+      optionalDataControl,
+      className: renderOptionalField ? "rjsf-optional-object-field" : void 0
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...templateProps, onAddProperty });
+  }
   function OptionalDataControlsField(props) {
     const {
       schema,
@@ -2136,9 +2035,9 @@
     string: "StringField",
     null: "NullField"
   };
-  function getFieldComponent(schema, uiOptions, fieldPathId, registry) {
+  function getFieldComponent(schema, uiOptions, registry) {
     const field = uiOptions.field;
-    const { fields: fields2, translateString } = registry;
+    const { fields: fields2 } = registry;
     if (typeof field === "function") {
       return field;
     }
@@ -2155,22 +2054,7 @@
     if (!componentName && (schema.anyOf || schema.oneOf)) {
       return () => null;
     }
-    return componentName in fields2 ? fields2[componentName] : () => {
-      const UnsupportedFieldTemplate = utils.getTemplate(
-        "UnsupportedFieldTemplate",
-        registry,
-        uiOptions
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        UnsupportedFieldTemplate,
-        {
-          schema,
-          fieldPathId,
-          reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
-          registry
-        }
-      );
-    };
+    return componentName in fields2 ? fields2[componentName] : fields2["FallbackField"];
   }
   function SchemaFieldRender(props) {
     const {
@@ -2181,13 +2065,15 @@
       errorSchema,
       name,
       onChange,
-      onKeyChange,
-      onDropPropertyClick,
-      required,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
+      required = false,
       registry,
       wasPropertyKeyModified = false
     } = props;
-    const { formContext, schemaUtils, globalUiOptions } = registry;
+    const { schemaUtils, globalUiOptions, fields: fields2 } = registry;
+    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields2;
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, uiOptions);
     const DescriptionFieldTemplate = utils.getTemplate(
@@ -2206,7 +2092,7 @@
       },
       [fieldId, onChange]
     );
-    const FieldComponent = getFieldComponent(schema, uiOptions, fieldPathId, registry);
+    const FieldComponent = getFieldComponent(schema, uiOptions, registry);
     const disabled = Boolean(uiOptions.disabled ?? props.disabled);
     const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
@@ -2215,7 +2101,26 @@
     if (Object.keys(schema).length === 0) {
       return null;
     }
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    let displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const isReplacingAnyOrOneOf = uiOptions.field && uiOptions.fieldReplacesAnyOrOneOf === true;
+    let XxxOfField;
+    let XxxOfOptions;
+    if ((utils.ANY_OF_KEY in schema || utils.ONE_OF_KEY in schema) && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema)) {
+      if (schema[utils.ANY_OF_KEY]) {
+        XxxOfField = _AnyOfField;
+        XxxOfOptions = schema[utils.ANY_OF_KEY].map(
+          (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
+        );
+      } else if (schema[utils.ONE_OF_KEY]) {
+        XxxOfField = _OneOfField;
+        XxxOfOptions = schema[utils.ONE_OF_KEY].map(
+          (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
+        );
+      }
+      const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+      const hasFormData = utils.isFormDataAvailable(formData);
+      displayLabel = displayLabel && (!isOptionalRender || hasFormData);
+    }
     const { __errors, ...fieldErrorSchema } = errorSchema || {};
     const fieldUiSchema = omit3(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
     if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
@@ -2234,7 +2139,6 @@
         hideError,
         autofocus,
         errorSchema: fieldErrorSchema,
-        formContext,
         rawErrors: __errors
       }
     );
@@ -2266,7 +2170,7 @@
         registry
       }
     );
-    const errorsComponent = hideError || (schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
+    const errorsComponent = hideError || XxxOfField && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
       FieldErrorTemplate2,
       {
         errors: __errors,
@@ -2297,8 +2201,9 @@
       label,
       hidden,
       onChange,
-      onKeyChange,
-      onDropPropertyClick,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       required,
       disabled,
       readonly,
@@ -2311,36 +2216,10 @@
       uiSchema,
       registry
     };
-    const _AnyOfField = registry.fields.AnyOfField;
-    const _OneOfField = registry.fields.OneOfField;
-    const isReplacingAnyOrOneOf = uiSchema?.["ui:field"] && uiSchema?.["ui:fieldReplacesAnyOrOneOf"] === true;
     return /* @__PURE__ */ jsxRuntime.jsx(FieldTemplate2, { ...fieldProps, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       field,
-      schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsxRuntime.jsx(
-        _AnyOfField,
-        {
-          name,
-          disabled,
-          readonly,
-          hideError,
-          errorSchema,
-          formData,
-          formContext,
-          fieldPathId,
-          onBlur: props.onBlur,
-          onChange: props.onChange,
-          onFocus: props.onFocus,
-          options: schema.anyOf.map(
-            (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
-          ),
-          registry,
-          required,
-          schema,
-          uiSchema
-        }
-      ),
-      schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsxRuntime.jsx(
-        _OneOfField,
+      XxxOfField && /* @__PURE__ */ jsxRuntime.jsx(
+        XxxOfField,
         {
           name,
           disabled,
@@ -2348,14 +2227,11 @@
           hideError,
           errorSchema,
           formData,
-          formContext,
           fieldPathId,
           onBlur: props.onBlur,
           onChange: props.onChange,
           onFocus: props.onFocus,
-          options: schema.oneOf.map(
-            (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
-          ),
+          options: XxxOfOptions,
           registry,
           required,
           schema,
@@ -2396,7 +2272,7 @@
       hideError
     } = props;
     const { title, format } = schema;
-    const { widgets: widgets2, formContext, schemaUtils, globalUiOptions } = registry;
+    const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
     const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema, uiSchema) : void 0;
     let defaultWidget = enumOptions ? "select" : "text";
     if (format && utils.hasWidget(schema, format, widgets2)) {
@@ -2430,11 +2306,11 @@
         required,
         disabled,
         readonly,
-        formContext,
         autofocus,
         registry,
         placeholder,
-        rawErrors
+        rawErrors,
+        htmlName: fieldPathId.name
       }
     );
   }
@@ -2454,14 +2330,15 @@
   function fields() {
     return {
       AnyOfField: MultiSchemaField_default,
-      ArrayField: ArrayField_default,
+      ArrayField,
       // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
       BooleanField: BooleanField_default,
+      FallbackField,
       LayoutGridField,
       LayoutHeaderField,
       LayoutMultiSchemaField,
       NumberField: NumberField_default,
-      ObjectField: ObjectField_default,
+      ObjectField,
       OneOfField: MultiSchemaField_default,
       OptionalDataControlsField,
       SchemaField: SchemaField_default,
@@ -2530,19 +2407,15 @@
       hasMoveUp,
       hasRemove,
       fieldPathId,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
+      onCopyItem,
+      onRemoveItem,
+      onMoveDownItem,
+      onMoveUpItem,
       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,
@@ -2550,7 +2423,7 @@
           id: utils.buttonId(fieldPathId, "moveUp"),
           className: "rjsf-array-item-move-up",
           disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
+          onClick: onMoveUpItem,
           uiSchema,
           registry
         }
@@ -2561,7 +2434,7 @@
           id: utils.buttonId(fieldPathId, "moveDown"),
           className: "rjsf-array-item-move-down",
           disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
+          onClick: onMoveDownItem,
           uiSchema,
           registry
         }
@@ -2572,7 +2445,7 @@
           id: utils.buttonId(fieldPathId, "copy"),
           className: "rjsf-array-item-copy",
           disabled: disabled || readonly,
-          onClick: onCopyClick,
+          onClick: onCopyItem,
           uiSchema,
           registry
         }
@@ -2583,7 +2456,7 @@
           id: utils.buttonId(fieldPathId, "remove"),
           className: "rjsf-array-item-remove",
           disabled: disabled || readonly,
-          onClick: onRemoveClick,
+          onClick: onRemoveItem,
           uiSchema,
           registry
         }
@@ -2612,11 +2485,6 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate2 = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
@@ -2650,7 +2518,7 @@
         }
       ),
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row array-item-list", children: items }),
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
@@ -2694,6 +2562,7 @@
       id,
       name,
       // remove this from ...rest
+      htmlName,
       value,
       readonly,
       disabled,
@@ -2705,7 +2574,6 @@
       options,
       schema,
       uiSchema,
-      formContext,
       registry,
       rawErrors,
       type,
@@ -2746,7 +2614,7 @@
         "input",
         {
           id,
-          name: id,
+          name: htmlName || id,
           className: "form-control",
           readOnly: readonly,
           disabled,
@@ -2864,6 +2732,22 @@
       }) })
     ] });
   }
+  function FallbackFieldTemplate(props) {
+    const { schema, registry, typeSelector, schemaField } = props;
+    const MultiSchemaFieldTemplate2 = utils.getTemplate(
+      "MultiSchemaFieldTemplate",
+      registry
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MultiSchemaFieldTemplate2,
+      {
+        selector: typeSelector,
+        optionSchemaField: schemaField,
+        schema,
+        registry
+      }
+    );
+  }
   var REQUIRED_FIELD_SYMBOL = "*";
   function Label(props) {
     const { label, required, id } = props;
@@ -2936,7 +2820,7 @@
       disabled,
       formData,
       fieldPathId,
-      onAddClick,
+      onAddProperty,
       optionalDataControl,
       properties,
       readonly,
@@ -2987,7 +2871,7 @@
         {
           id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -3059,8 +2943,8 @@
       style,
       disabled,
       label,
-      onKeyChange,
-      onDropPropertyClick,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -3091,7 +2975,7 @@
             className: "form-control",
             type: "text",
             id: `${id}-key`,
-            onBlur: ({ target }) => onKeyChange(target && target.value),
+            onBlur: onKeyRenameBlur,
             defaultValue: label
           }
         )
@@ -3104,7 +2988,7 @@
           className: "rjsf-object-property-remove btn-block",
           style: { border: "0" },
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema,
           registry
         }
@@ -3124,6 +3008,7 @@
       BaseInputTemplate,
       DescriptionFieldTemplate: DescriptionField,
       ErrorListTemplate: ErrorList,
+      FallbackFieldTemplate,
       FieldTemplate: FieldTemplate_default,
       FieldErrorTemplate,
       FieldHelpTemplate,
@@ -3137,109 +3022,13 @@
     };
   }
   var templates_default = templates;
-  function readyForChange(state) {
-    return Object.values(state).every((value) => value !== -1);
-  }
-  function DateElement({
-    type,
-    range,
-    value,
-    select,
-    rootId,
-    name,
-    disabled,
-    readonly,
-    autofocus,
-    registry,
-    onBlur,
-    onFocus
-  }) {
-    const id = rootId + "_" + type;
-    const { SelectWidget: SelectWidget2 } = registry.widgets;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SelectWidget2,
-      {
-        schema: { type: "integer" },
-        id,
-        name,
-        className: "form-control",
-        options: { enumOptions: utils.dateRangeOptions(range[0], range[1]) },
-        placeholder: type,
-        value,
-        disabled,
-        readonly,
-        autofocus,
-        onChange: (value2) => select(type, value2),
-        onBlur,
-        onFocus,
-        registry,
-        label: "",
-        "aria-describedby": utils.ariaDescribedByIds(rootId)
-      }
-    );
-  }
-  function AltDateWidget({
-    time = false,
-    disabled = false,
-    readonly = false,
-    autofocus = false,
-    options,
-    id,
-    name,
-    registry,
-    onBlur,
-    onFocus,
-    onChange,
-    value
-  }) {
+  function AltDateWidget(props) {
+    const { disabled = false, readonly = false, autofocus = false, options, id, name, registry, onBlur, onFocus } = props;
     const { translateString } = registry;
-    const [state, setState] = react.useState(utils.parseDateString(value, time));
-    react.useEffect(() => {
-      setState(utils.parseDateString(value, time));
-    }, [time, value]);
-    const handleChange = react.useCallback(
-      (property, value2) => {
-        const nextState = {
-          ...state,
-          [property]: typeof value2 === "undefined" ? -1 : value2
-        };
-        if (readyForChange(nextState)) {
-          onChange(utils.toDateString(nextState, time));
-        } else {
-          setState(nextState);
-        }
-      },
-      [state, onChange, time]
-    );
-    const handleSetNow = react.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled || readonly) {
-          return;
-        }
-        const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
-        onChange(utils.toDateString(nextState, time));
-      },
-      [disabled, readonly, time, onChange]
-    );
-    const handleClear = react.useCallback(
-      (event) => {
-        event.preventDefault();
-        if (disabled || readonly) {
-          return;
-        }
-        onChange(void 0);
-      },
-      [disabled, readonly, onChange]
-    );
+    const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-inline", children: [
-      utils.getDateElementProps(
-        state,
-        time,
-        options.yearsRange,
-        options.format
-      ).map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DateElement,
+      elements.map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
+        utils.DateElement,
         {
           rootId: id,
           name,
@@ -3280,7 +3069,8 @@
     onBlur,
     onFocus,
     onChange,
-    registry
+    registry,
+    htmlName
   }) {
     const DescriptionFieldTemplate = utils.getTemplate(
       "DescriptionFieldTemplate",
@@ -3318,7 +3108,7 @@
           {
             type: "checkbox",
             id,
-            name: id,
+            name: htmlName || id,
             checked: typeof value === "undefined" ? false : value,
             required,
             disabled: disabled || readonly,
@@ -3343,7 +3133,8 @@
     readonly,
     onChange,
     onBlur,
-    onFocus
+    onFocus,
+    htmlName
   }) {
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
@@ -3371,7 +3162,7 @@
           {
             type: "checkbox",
             id: utils.optionId(id, index),
-            name: id,
+            name: htmlName || id,
             checked,
             value: String(index),
             disabled: disabled || itemDisabled || readonly,
@@ -3417,40 +3208,6 @@
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
     return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "email", ...props });
   }
-  function addNameToDataURL(dataURL, name) {
-    if (dataURL === null) {
-      return null;
-    }
-    return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
-  }
-  function processFile(file) {
-    const { name, size, type } = file;
-    return new Promise((resolve, reject) => {
-      const reader = new window.FileReader();
-      reader.onerror = reject;
-      reader.onload = (event) => {
-        if (typeof event.target?.result === "string") {
-          resolve({
-            dataURL: addNameToDataURL(event.target.result, name),
-            name,
-            size,
-            type
-          });
-        } else {
-          resolve({
-            dataURL: null,
-            name,
-            size,
-            type
-          });
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  }
-  function processFiles(files) {
-    return Promise.all(Array.from(files).map(processFile));
-  }
   function FileInfoPreview({
     fileInfo,
     registry
@@ -3490,58 +3247,15 @@
       ] }, key);
     }) });
   }
-  function extractFileInfo(dataURLs) {
-    return dataURLs.reduce((acc, dataURL) => {
-      if (!dataURL) {
-        return acc;
-      }
-      try {
-        const { blob, name } = utils.dataURItoBlob(dataURL);
-        return [
-          ...acc,
-          {
-            dataURL,
-            name,
-            size: blob.size,
-            type: blob.type
-          }
-        ];
-      } catch {
-        return acc;
-      }
-    }, []);
-  }
   function FileWidget(props) {
     const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
+    const { filesInfo, handleChange, handleRemove } = utils.useFileWidgetProps(value, onChange, multiple);
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    const handleChange = react.useCallback(
-      (event) => {
-        if (!event.target.files) {
-          return;
-        }
-        processFiles(event.target.files).then((filesInfoEvent) => {
-          const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-          if (multiple) {
-            onChange(value.concat(newValue));
-          } else {
-            onChange(newValue[0]);
-          }
-        });
-      },
-      [multiple, value, onChange]
-    );
-    const filesInfo = react.useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
-    const rmFile = react.useCallback(
-      (index) => {
-        if (multiple) {
-          const newValue = value.filter((_, i) => i !== index);
-          onChange(newValue);
-        } else {
-          onChange(void 0);
-        }
-      },
-      [multiple, value, onChange]
-    );
+    const handleOnChangeEvent = (event) => {
+      if (event.target.files) {
+        handleChange(event.target.files);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         BaseInputTemplate2,
@@ -3550,7 +3264,7 @@
           disabled: disabled || readonly,
           type: "file",
           required: value ? false : required,
-          onChangeOverride: handleChange,
+          onChangeOverride: handleOnChangeEvent,
           value: "",
           accept: options.accept ? String(options.accept) : void 0
         }
@@ -3559,7 +3273,7 @@
         FilesInfo,
         {
           filesInfo,
-          onRemove: rmFile,
+          onRemove: handleRemove,
           registry,
           preview: options.filePreview,
           options
@@ -3570,9 +3284,10 @@
   var FileWidget_default = FileWidget;
   function HiddenWidget({
     id,
-    value
+    value,
+    htmlName
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", id, name: id, value: typeof value === "undefined" ? "" : value });
+    return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", id, name: htmlName || id, value: typeof value === "undefined" ? "" : value });
   }
   var HiddenWidget_default = HiddenWidget;
   function PasswordWidget(props) {
@@ -3590,7 +3305,8 @@
     onBlur,
     onFocus,
     onChange,
-    id
+    id,
+    htmlName
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const handleBlur = react.useCallback(
@@ -3613,7 +3329,7 @@
             type: "radio",
             id: utils.optionId(id, i),
             checked,
-            name: id,
+            name: htmlName || id,
             required,
             value: String(i),
             disabled: disabled || itemDisabled || readonly,
@@ -3653,7 +3369,8 @@
     onFocus,
     onBlur,
     schema,
-    options
+    options,
+    htmlName
   }) {
     const { stars = 5, shape = "star" } = options;
     const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
@@ -3730,7 +3447,7 @@
             {
               type: "hidden",
               id,
-              name: id,
+              name: htmlName || id,
               value: value || "",
               required,
               disabled: disabled || readonly,
@@ -3760,7 +3477,8 @@
     onChange,
     onBlur,
     onFocus,
-    placeholder
+    placeholder,
+    htmlName
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
@@ -3791,7 +3509,7 @@
       "select",
       {
         id,
-        name: id,
+        name: htmlName || id,
         multiple,
         role: "combobox",
         className: "form-control",
@@ -3825,7 +3543,8 @@
     autofocus = false,
     onChange,
     onBlur,
-    onFocus
+    onFocus,
+    htmlName
   }) {
     const handleChange = react.useCallback(
       ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
@@ -3843,7 +3562,7 @@
       "textarea",
       {
         id,
-        name: id,
+        name: htmlName || id,
         className: "form-control",
         value: value ? value : "",
         placeholder,
@@ -3922,7 +3641,18 @@
       rootSchema: {},
       formContext: {},
       translateString: utils.englishStringTranslator,
-      globalFormOptions: { idPrefix: utils.DEFAULT_ID_PREFIX, idSeparator: utils.DEFAULT_ID_SEPARATOR }
+      globalFormOptions: {
+        idPrefix: utils.DEFAULT_ID_PREFIX,
+        idSeparator: utils.DEFAULT_ID_SEPARATOR,
+        useFallbackUiForUnsupportedType: false
+      }
+    };
+  }
+  var IS_RESET = Symbol("reset");
+  function toIChangeEvent(state, status) {
+    return {
+      ..._pick(state, ["schema", "uiSchema", "fieldPathId", "schemaUtils", "formData", "edit", "errors", "errorSchema"]),
+      ...status !== void 0 && { status }
     };
   }
   var Form = class extends react.Component {
@@ -3944,9 +3674,11 @@
       if (!props.validator) {
         throw new Error("A validator is required for Form functionality to work");
       }
-      this.state = this.getStateFromProps(props, props.formData);
-      if (this.props.onChange && !utils.deepEquals(this.state.formData, this.props.formData)) {
-        this.props.onChange(this.state);
+      const { formData: propsFormData, initialFormData, onChange } = props;
+      const formData = propsFormData ?? initialFormData;
+      this.state = this.getStateFromProps(props, formData, void 0, void 0, void 0, true);
+      if (onChange && !utils.deepEquals(this.state.formData, formData)) {
+        onChange(toIChangeEvent(this.state));
       }
       this.formElement = react.createRef();
     }
@@ -4008,7 +3740,7 @@
       if (snapshot.shouldUpdate) {
         const { nextState } = snapshot;
         if (!utils.deepEquals(nextState.formData, this.props.formData) && !utils.deepEquals(nextState.formData, prevState.formData) && this.props.onChange) {
-          this.props.onChange(nextState);
+          this.props.onChange(toIChangeEvent(nextState));
         }
         this.setState(nextState);
       }
@@ -4030,6 +3762,7 @@
       const schema = "schema" in props ? props.schema : this.props.schema;
       const validator2 = "validator" in props ? props.validator : this.props.validator;
       const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
+      const isUncontrolled = props.formData === void 0 && this.props.formData === void 0;
       const edit = typeof inputFormData !== "undefined";
       const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
       const mustValidate = edit && !props.noValidate && liveValidate;
@@ -4050,9 +3783,15 @@
         );
       }
       const rootSchema = schemaUtils.getRootSchema();
+      let defaultsFormData = inputFormData;
+      if (inputFormData === IS_RESET) {
+        defaultsFormData = void 0;
+      } else if (inputFormData === void 0 && isUncontrolled) {
+        defaultsFormData = state.formData;
+      }
       const formData = schemaUtils.getDefaultFormState(
         rootSchema,
-        inputFormData,
+        defaultsFormData,
         false,
         state.initialDefaultsGenerated
       );
@@ -4116,7 +3855,9 @@
         errors = mergedErrors.errors;
         errorSchema = mergedErrors.errorSchema;
       }
-      const fieldPathId = utils.toFieldPathId("", this.getGlobalFormOptions(this.props));
+      const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
+      const registry = utils.deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
+      const fieldPathId = state.fieldPathId && state.fieldPathId?.[utils.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : utils.toFieldPathId("", registry.globalFormOptions);
       const nextState = {
         schemaUtils,
         schema: rootSchema,
@@ -4129,7 +3870,8 @@
         schemaValidationErrors,
         schemaValidationErrorSchema,
         retrievedSchema: _retrievedSchema,
-        initialDefaultsGenerated: true
+        initialDefaultsGenerated: true,
+        registry
       };
       return nextState;
     }
@@ -4264,7 +4006,7 @@
             }
           } else if (key === utils.NAME_KEY && data !== "") {
             paths.forEach((path) => {
-              const formValue = get2(formData, path);
+              const formValue = get(formData, path);
               const isLeaf = objKeys.length === 1;
               if (formValueHasData(formValue, isLeaf) || Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf))) {
                 acc.push(path);
@@ -4288,6 +4030,19 @@
       const fieldNames = this.getFieldNames(pathSchema, formData);
       return this.getUsedFormData(formData, fieldNames);
     };
+    /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
+     * `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
+     * value in the field.
+     *
+     * @param fieldPath - Either a dotted path to the field or the `FieldPathList` to the field
+     * @param [newValue] - The new value for the field
+     */
+    setFieldValue = (fieldPath, newValue) => {
+      const { registry } = this.state;
+      const path = Array.isArray(fieldPath) ? fieldPath : fieldPath.split(".");
+      const fieldPathId = utils.toFieldPathId("", registry.globalFormOptions, path);
+      this.onChange(newValue, path, void 0, fieldPathId[utils.ID_KEY]);
+    };
     /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
      * the array only contains a single pending change.
      *
@@ -4332,17 +4087,17 @@
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
       }
-      const mustValidate = !noValidate && liveValidate;
+      const mustValidate = !noValidate && (liveValidate === true || liveValidate === "onChange");
       let state = { formData, schema };
       let newFormData = formData;
-      if (omitExtraData === true && liveOmit === true) {
+      if (omitExtraData === true && (liveOmit === true || liveOmit === "onChange")) {
         newFormData = this.omitExtraData(formData);
         state = {
           formData: newFormData
         };
       }
       if (newErrorSchema) {
-        const oldValidationError = !isRootPath ? get2(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
+        const oldValidationError = !isRootPath ? get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
         if (!isEmpty(oldValidationError)) {
           if (!isRootPath) {
             set(originalErrorSchema, path, newErrorSchema);
@@ -4354,12 +4109,15 @@
             customErrors = new utils.ErrorSchemaBuilder();
           }
           if (isRootPath) {
-            customErrors.setErrors(get2(newErrorSchema, utils.ERRORS_KEY, ""));
+            const errors2 = get(newErrorSchema, utils.ERRORS_KEY);
+            if (errors2) {
+              customErrors.setErrors(errors2);
+            }
           } else {
             set(customErrors.ErrorSchema, path, newErrorSchema);
           }
         }
-      } else if (customErrors && get2(customErrors.ErrorSchema, [...path, utils.ERRORS_KEY])) {
+      } else if (customErrors && get(customErrors.ErrorSchema, [...path, utils.ERRORS_KEY])) {
         customErrors.clearErrors(path);
       }
       if (mustValidate && this.pendingChanges.length === 1) {
@@ -4383,7 +4141,7 @@
       }
       this.setState(state, () => {
         if (onChange) {
-          onChange({ ...this.state, ...state }, id);
+          onChange(toIChangeEvent({ ...this.state, ...state }), id);
         }
         this.pendingChanges.shift();
         this.processPendingChange();
@@ -4409,8 +4167,15 @@
      *
      */
     reset = () => {
-      const { onChange } = this.props;
-      const newState = this.getStateFromProps(this.props, void 0);
+      const { formData: propsFormData, initialFormData = IS_RESET, onChange } = this.props;
+      const newState = this.getStateFromProps(
+        this.props,
+        propsFormData ?? initialFormData,
+        void 0,
+        void 0,
+        void 0,
+        true
+      );
       const newFormData = newState.formData;
       const state = {
         formData: newFormData,
@@ -4421,19 +4186,53 @@
         initialDefaultsGenerated: false,
         customErrors: void 0
       };
-      this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+      this.setState(state, () => onChange && onChange(toIChangeEvent({ ...this.state, ...state })));
     };
     /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-     * was provided.
+     * was provided. Also runs any live validation and/or live omit operations if the flags indicate they should happen
+     * during `onBlur`.
      *
      * @param id - The unique `id` of the field that was blurred
      * @param data - The data associated with the field that was blurred
      */
     onBlur = (id, data) => {
-      const { onBlur } = this.props;
+      const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
       if (onBlur) {
         onBlur(id, data);
       }
+      if (omitExtraData === true && liveOmit === "onBlur" || liveValidate === "onBlur") {
+        const { onChange, extraErrors } = this.props;
+        const { formData } = this.state;
+        let newFormData = formData;
+        let state = { formData: newFormData };
+        if (omitExtraData === true && liveOmit === "onBlur") {
+          newFormData = this.omitExtraData(formData);
+          state = { formData: newFormData };
+        }
+        if (liveValidate === "onBlur") {
+          const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+          const liveValidation = this.liveValidate(
+            schema,
+            schemaUtils,
+            errorSchema,
+            newFormData,
+            extraErrors,
+            customErrors,
+            retrievedSchema
+          );
+          state = { formData: newFormData, ...liveValidation, customErrors };
+        }
+        const hasChanges = Object.keys(state).filter((key) => !key.startsWith("schemaValidation")).some((key) => {
+          const oldData = get(this.state, key);
+          const newData = get(state, key);
+          return !utils.deepEquals(oldData, newData);
+        });
+        this.setState(state, () => {
+          if (onChange && hasChanges) {
+            onChange(toIChangeEvent({ ...this.state, ...state }), id);
+          }
+        });
+      }
     };
     /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
      * was provided.
@@ -4479,7 +4278,7 @@
           },
           () => {
             if (onSubmit) {
-              onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
+              onSubmit(toIChangeEvent({ ...this.state, formData: newFormData }, "submitted"), event);
             }
           }
         );
@@ -4496,33 +4295,40 @@
         uiSchema = {},
         experimental_componentUpdateStrategy,
         idSeparator = utils.DEFAULT_ID_SEPARATOR,
-        idPrefix = utils.DEFAULT_ID_PREFIX
+        idPrefix = utils.DEFAULT_ID_PREFIX,
+        nameGenerator,
+        useFallbackUiForUnsupportedType = false
       } = props;
       const rootFieldId = uiSchema["ui:rootFieldId"];
-      return { idPrefix: rootFieldId || idPrefix, idSeparator, experimental_componentUpdateStrategy };
+      return {
+        idPrefix: rootFieldId || idPrefix,
+        idSeparator,
+        useFallbackUiForUnsupportedType,
+        ...experimental_componentUpdateStrategy !== void 0 && { experimental_componentUpdateStrategy },
+        ...nameGenerator !== void 0 && { nameGenerator }
+      };
     }
-    /** Returns the registry for the form */
-    getRegistry() {
-      const { translateString: customTranslateString, uiSchema = {} } = this.props;
-      const { schema, schemaUtils } = this.state;
+    /** Computed the registry for the form using the given `props`, `schema` and `schemaUtils` */
+    getRegistry(props, schema, schemaUtils) {
+      const { translateString: customTranslateString, uiSchema = {} } = props;
       const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
       return {
-        fields: { ...fields2, ...this.props.fields },
+        fields: { ...fields2, ...props.fields },
         templates: {
           ...templates2,
-          ...this.props.templates,
+          ...props.templates,
           ButtonTemplates: {
             ...templates2.ButtonTemplates,
-            ...this.props.templates?.ButtonTemplates
+            ...props.templates?.ButtonTemplates
           }
         },
-        widgets: { ...widgets2, ...this.props.widgets },
+        widgets: { ...widgets2, ...props.widgets },
         rootSchema: schema,
-        formContext: this.props.formContext || formContext,
+        formContext: props.formContext || formContext,
         schemaUtils,
         translateString: customTranslateString || translateString,
         globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY],
-        globalFormOptions: this.getGlobalFormOptions(this.props)
+        globalFormOptions: this.getGlobalFormOptions(props)
       };
     }
     /** Provides a function that can be used to programmatically submit the `Form` */
@@ -4652,8 +4458,7 @@
         showErrorList = "top",
         _internalFormWrapper
       } = this.props;
-      const { schema, uiSchema, formData, errorSchema, fieldPathId } = this.state;
-      const registry = this.getRegistry();
+      const { schema, uiSchema, formData, errorSchema, fieldPathId, registry } = this.state;
       const { SchemaField: _SchemaField } = registry.fields;
       const { SubmitButton: SubmitButton2 } = registry.templates.ButtonTemplates;
       const as = _internalFormWrapper ? tagName : void 0;
@@ -4732,7 +4537,11 @@
       }
     );
   }
-  function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = { idPrefix: utils.DEFAULT_ID_PREFIX, idSeparator: utils.DEFAULT_ID_SEPARATOR }) {
+  function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = {
+    idPrefix: utils.DEFAULT_ID_PREFIX,
+    idSeparator: utils.DEFAULT_ID_SEPARATOR,
+    useFallbackUiForUnsupportedType: false
+  }) {
     const defaults = getDefaultRegistry();
     const schemaUtils = utils.createSchemaUtils(validator, rootSchema);
     return {