@rjsf/core 6.0.0-beta.13 → 6.0.0-beta.15

package/dist/index.js

@@ -38,13 +38,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_utils45 = require("@rjsf/utils");
+var import_cloneDeep3 = __toESM(require("lodash/cloneDeep"), 1);
 var import_forEach = __toESM(require("lodash/forEach"), 1);
 var import_get6 = __toESM(require("lodash/get"), 1);
 var import_isEmpty4 = __toESM(require("lodash/isEmpty"), 1);
 var import_isNil = __toESM(require("lodash/isNil"), 1);
 var import_pick = __toESM(require("lodash/pick"), 1);
+var import_set5 = __toESM(require("lodash/set"), 1);
 var import_toPath = __toESM(require("lodash/toPath"), 1);
 
 // src/getDefaultRegistry.ts
@@ -57,10 +59,10 @@ var import_cloneDeep = __toESM(require("lodash/cloneDeep"), 1);
 var import_get = __toESM(require("lodash/get"), 1);
 var import_isObject = __toESM(require("lodash/isObject"), 1);
 var import_set = __toESM(require("lodash/set"), 1);
-var import_nanoid = require("nanoid");
+var import_uniqueId = __toESM(require("lodash/uniqueId"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function generateRowId() {
-  return (0, import_nanoid.nanoid)();
+  return (0, import_uniqueId.default)("rjsf-array-item-");
 }
 function generateKeyedFormData(formData) {
   return !Array.isArray(formData) ? [] : formData.map((item) => {
@@ -209,7 +211,8 @@ var ArrayField = class extends import_react.Component {
         keyedFormData: newKeyedFormData,
         updatedKeyedFormData: true
       },
-      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      // add click will pass the empty `path` array to the onChange which adds the appropriate path
+      () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema)
     );
   }
   /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
@@ -272,7 +275,8 @@ var ArrayField = class extends import_react.Component {
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        // Copy index will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema)
       );
     };
   };
@@ -307,7 +311,8 @@ var ArrayField = class extends import_react.Component {
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        // drop index will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema)
       );
     };
   };
@@ -351,7 +356,8 @@ var ArrayField = class extends import_react.Component {
         {
           keyedFormData: newKeyedFormData
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        // reorder click will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema)
       );
     };
   };
@@ -361,19 +367,16 @@ var ArrayField = class extends import_react.Component {
    * @param index - The index of the item being changed
    */
   onChangeForIndex = (index) => {
-    return (value, newErrorSchema, id) => {
-      const { formData, onChange, errorSchema } = this.props;
-      const arrayData = Array.isArray(formData) ? formData : [];
-      const newFormData = arrayData.map((item, i) => {
-        const jsonValue = typeof value === "undefined" ? null : value;
-        return index === i ? jsonValue : item;
-      });
+    return (value, path, newErrorSchema, id) => {
+      const { onChange } = this.props;
+      const changePath = Array.isArray(path) ? path.slice() : [];
+      changePath.unshift(index);
       onChange(
-        newFormData,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [index]: newErrorSchema
-        },
+        // We need to treat undefined items as nulls to have validation.
+        // See https://github.com/tdegrunt/jsonschema/issues/206
+        value === void 0 ? null : value,
+        changePath,
+        newErrorSchema,
         id
       );
     };
@@ -381,8 +384,30 @@ var ArrayField = class extends import_react.Component {
   /** Callback handler used to change the value for a checkbox */
   onSelectChange = (value) => {
     const { onChange, idSchema } = this.props;
-    onChange(value, void 0, idSchema && idSchema.$id);
+    onChange(value, [], void 0, idSchema && idSchema.$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() {
@@ -457,6 +482,7 @@ var ArrayField = class extends import_react.Component {
         const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+        const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
         return this.renderArrayFieldItem({
           key,
           index,
@@ -469,7 +495,7 @@ var ArrayField = class extends import_react.Component {
           itemIdSchema,
           itemErrorSchema,
           itemData: itemCast,
-          itemUiSchema: uiSchema.items,
+          itemUiSchema,
           autofocus: autofocus && index === 0,
           onBlur,
           onFocus,
@@ -696,7 +722,16 @@ var ArrayField = class extends import_react.Component {
         const itemSchema = (additional && (0, import_isObject.default)(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-        const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+        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,
@@ -836,6 +871,7 @@ var ArrayField = class extends import_react.Component {
 var ArrayField_default = ArrayField;
 
 // src/components/fields/BooleanField.tsx
+var import_react2 = require("react");
 var import_utils2 = require("@rjsf/utils");
 var import_isObject2 = __toESM(require("lodash/isObject"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -906,6 +942,12 @@ function BooleanField(props) {
       enumOptions = (0, import_utils2.optionsList)({ enum: enums }, uiSchema);
     }
   }
+  const onWidgetChange = (0, import_react2.useCallback)(
+    (value, errorSchema, id) => {
+      return onChange(value, [], errorSchema, id);
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Widget,
     {
@@ -914,7 +956,7 @@ function BooleanField(props) {
       uiSchema,
       id: idSchema.$id,
       name,
-      onChange,
+      onChange: onWidgetChange,
       onFocus,
       onBlur,
       label,
@@ -934,7 +976,7 @@ function BooleanField(props) {
 var BooleanField_default = BooleanField;
 
 // src/components/fields/LayoutGridField.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_utils3 = require("@rjsf/utils");
 var import_cloneDeep2 = __toESM(require("lodash/cloneDeep"), 1);
 var import_each = __toESM(require("lodash/each"), 1);
@@ -950,16 +992,20 @@ var import_isObject3 = __toESM(require("lodash/isObject"), 1);
 var import_isPlainObject = __toESM(require("lodash/isPlainObject"), 1);
 var import_isString = __toESM(require("lodash/isString"), 1);
 var import_isUndefined = __toESM(require("lodash/isUndefined"), 1);
+var import_last = __toESM(require("lodash/last"), 1);
 var import_set2 = __toESM(require("lodash/set"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var LOOKUP_REGEX = /^\$lookup=(.+)/;
 var LAYOUT_GRID_UI_OPTION = "layoutGrid";
 var LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
 function getNonNullishValue(value, fallback) {
   return value ?? fallback;
 }
-var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent {
+function isNumericIndex(str) {
+  return /^\d+?$/.test(str);
+}
+var LayoutGridField = class _LayoutGridField extends import_react3.PureComponent {
   static defaultProps = {
     layoutGridSchema: void 0
   };
@@ -1072,6 +1118,38 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
     const baseId = (0, import_get2.default)(baseIdSchema, import_utils3.ID_KEY);
     return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
   }
+  /** Computes the `rawSchema` and `idSchema` 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 `idSchema` 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 `idSchema` is returned
+   * as is.
+   *
+   * @param schema - The schema to generate the idSchema for
+   * @param idSchema - The IdSchema for the schema
+   * @param potentialIndex - A string containing a potential index
+   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+   * @returns - An object containing the `rawSchema` and `idSchema` of an array item, otherwise an undefined `rawSchema`
+   */
+  static computeArraySchemasIfPresent(schema, idSchema, potentialIndex, idSeparator) {
+    let rawSchema;
+    if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && (0, import_has.default)(schema, import_utils3.ITEMS_KEY)) {
+      const index = Number(potentialIndex);
+      const items = schema[import_utils3.ITEMS_KEY];
+      if (Array.isArray(items)) {
+        if (index > items.length) {
+          rawSchema = (0, import_last.default)(items);
+        } else {
+          rawSchema = items[index];
+        }
+      } else {
+        rawSchema = items;
+      }
+      idSchema = { [import_utils3.ID_KEY]: `${idSchema[import_utils3.ID_KEY]}${idSeparator ?? "_"}${index}` };
+    }
+    return { rawSchema, idSchema };
+  }
   /** 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
@@ -1111,7 +1189,9 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
         rawSchema = (0, import_get2.default)(selectedSchema, [import_utils3.PROPERTIES_KEY, part], {});
         idSchema = (0, import_get2.default)(selectedIdSchema, part, {});
       } else {
-        rawSchema = {};
+        const result = _LayoutGridField.computeArraySchemasIfPresent(schema, idSchema, part, idSeparator);
+        rawSchema = result.rawSchema ?? {};
+        idSchema = result.idSchema;
       }
       innerData = (0, import_get2.default)(innerData, part, {});
       schema = schemaUtils.retrieveSchema(rawSchema, innerData);
@@ -1130,9 +1210,15 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
         idSchema = (0, import_utils3.mergeObjects)(rawIdSchema, idSchema);
       }
       isRequired = schema !== void 0 && Array.isArray(schema.required) && (0, import_includes.default)(schema.required, leafPath);
-      schema = (0, import_get2.default)(schema, [import_utils3.PROPERTIES_KEY, leafPath]);
-      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-      idSchema = (0, import_get2.default)(idSchema, leafPath, {});
+      const result = _LayoutGridField.computeArraySchemasIfPresent(schema, idSchema, leafPath, idSeparator);
+      if (result.rawSchema) {
+        schema = result.rawSchema;
+        idSchema = result.idSchema;
+      } else {
+        schema = (0, import_get2.default)(schema, [import_utils3.PROPERTIES_KEY, leafPath]);
+        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+        idSchema = (0, import_get2.default)(idSchema, leafPath, {});
+      }
       isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
       if (schema && ((0, import_has.default)(schema, import_utils3.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils3.ANY_OF_KEY))) {
         const xxx = (0, import_has.default)(schema, import_utils3.ONE_OF_KEY) ? import_utils3.ONE_OF_KEY : import_utils3.ANY_OF_KEY;
@@ -1212,16 +1298,14 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
    * @returns - The `onChange` handling function for the `dottedPath` field
    */
   onFieldChange = (dottedPath) => {
-    return (value, errSchema, id) => {
-      const { onChange, errorSchema, formData } = this.props;
-      const newFormData = (0, import_cloneDeep2.default)(formData || {});
+    return (value, path, errSchema, id) => {
+      const { onChange, errorSchema } = this.props;
       let newErrorSchema = errorSchema;
       if (errSchema && errorSchema) {
         newErrorSchema = (0, import_cloneDeep2.default)(errorSchema);
         (0, import_set2.default)(newErrorSchema, dottedPath, errSchema);
       }
-      (0, import_set2.default)(newFormData, dottedPath, value);
-      onChange(newFormData, newErrorSchema, id);
+      onChange(value, dottedPath.split("."), newErrorSchema, id);
     };
   };
   /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
@@ -1322,7 +1406,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
     const { registry, schema: rawSchema, formData } = this.props;
     const { schemaUtils } = registry;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ (0, import_react3.createElement)(
+    return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ (0, import_react4.createElement)(
       _LayoutGridField,
       {
         ...this.props,
@@ -1502,7 +1586,7 @@ function LayoutHeaderField(props) {
 }
 
 // src/components/fields/LayoutMultiSchemaField.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_utils5 = require("@rjsf/utils");
 var import_get3 = __toESM(require("lodash/get"), 1);
 var import_has2 = __toESM(require("lodash/has"), 1);
@@ -1556,7 +1640,7 @@ function LayoutMultiSchemaField(props) {
     hideError = false
   } = props;
   const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
-  const [enumOptions, setEnumOptions] = (0, import_react4.useState)(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+  const [enumOptions, setEnumOptions] = (0, import_react5.useState)(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
   const id = (0, import_get3.default)(idSchema, import_utils5.ID_KEY);
   const discriminator = (0, import_utils5.getDiscriminatorFieldFromSchema)(schema);
   const FieldErrorTemplate2 = (0, import_utils5.getTemplate)("FieldErrorTemplate", registry, options);
@@ -1565,7 +1649,7 @@ function LayoutMultiSchemaField(props) {
   const optionsHash = (0, import_utils5.hashObject)(options);
   const uiSchemaHash = uiSchema ? (0, import_utils5.hashObject)(uiSchema) : "";
   const formDataHash = formData ? (0, import_utils5.hashObject)(formData) : "";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
   }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
   const {
@@ -1598,7 +1682,7 @@ function LayoutMultiSchemaField(props) {
     if (newFormData) {
       (0, import_set3.default)(newFormData, selectorField, opt);
     }
-    onChange(newFormData, void 0, id);
+    onChange(newFormData, [name], void 0, id);
   };
   const widgetOptions = { enumOptions, ...uiOptions };
   const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
@@ -1652,13 +1736,13 @@ function LayoutMultiSchemaField(props) {
 }
 
 // src/components/fields/MultiSchemaField.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_get4 = __toESM(require("lodash/get"), 1);
 var import_isEmpty3 = __toESM(require("lodash/isEmpty"), 1);
 var import_omit2 = __toESM(require("lodash/omit"), 1);
 var import_utils6 = require("@rjsf/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var AnyOfField = class extends import_react5.Component {
+var AnyOfField = class extends import_react6.Component {
   /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
    *
    * @param props - The `FieldProps` for this template
@@ -1740,7 +1824,7 @@ var AnyOfField = class extends import_react5.Component {
       newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
     }
     this.setState({ selectedOption: intOption }, () => {
-      onChange(newFormData, void 0, this.getFieldId());
+      onChange(newFormData, [], void 0, this.getFieldId());
     });
   };
   getFieldId() {
@@ -1856,24 +1940,24 @@ var AnyOfField = class extends import_react5.Component {
 var MultiSchemaField_default = AnyOfField;
 
 // src/components/fields/NumberField.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_utils7 = require("@rjsf/utils");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
 var trailingCharMatcher = /[0.]0*$/;
 function NumberField(props) {
   const { registry, onChange, formData, value: initialValue } = props;
-  const [lastValue, setLastValue] = (0, import_react6.useState)(initialValue);
+  const [lastValue, setLastValue] = (0, import_react7.useState)(initialValue);
   const { StringField: StringField2 } = registry.fields;
   let value = formData;
-  const handleChange = (0, import_react6.useCallback)(
-    (value2, errorSchema, id) => {
+  const handleChange = (0, import_react7.useCallback)(
+    (value2, path, errorSchema, id) => {
       setLastValue(value2);
       if (`${value2}`.charAt(0) === ".") {
         value2 = `0${value2}`;
       }
       const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? (0, import_utils7.asNumber)(value2.replace(trailingCharMatcher, "")) : (0, import_utils7.asNumber)(value2);
-      onChange(processed, errorSchema, id);
+      onChange(processed, path, errorSchema, id);
     },
     [onChange]
   );
@@ -1888,7 +1972,7 @@ function NumberField(props) {
 var NumberField_default = NumberField;
 
 // src/components/fields/ObjectField.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_utils8 = require("@rjsf/utils");
 var import_markdown_to_jsx = __toESM(require("markdown-to-jsx"), 1);
 var import_get5 = __toESM(require("lodash/get"), 1);
@@ -1897,7 +1981,7 @@ var import_isObject4 = __toESM(require("lodash/isObject"), 1);
 var import_set4 = __toESM(require("lodash/set"), 1);
 var import_unset = __toESM(require("lodash/unset"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var ObjectField = class extends import_react7.Component {
+var ObjectField = class extends import_react8.Component {
   /** Set up the initial state */
   state = {
     wasPropertyKeyModified: false,
@@ -1921,20 +2005,14 @@ var ObjectField = class extends import_react7.Component {
    * @returns - The onPropertyChange callback for the `name` property
    */
   onPropertyChange = (name, addedByAdditionalProperties = false) => {
-    return (value, newErrorSchema, id) => {
-      const { formData, onChange, errorSchema } = this.props;
+    return (value, path, newErrorSchema, id) => {
+      const { onChange } = this.props;
       if (value === void 0 && addedByAdditionalProperties) {
         value = "";
       }
-      const newFormData = { ...formData, [name]: value };
-      onChange(
-        newFormData,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [name]: newErrorSchema
-        },
-        id
-      );
+      const changePath = Array.isArray(path) ? path.slice() : [];
+      changePath.unshift(name);
+      onChange(value, changePath, newErrorSchema, id);
     };
   };
   /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
@@ -1946,10 +2024,10 @@ var ObjectField = class extends import_react7.Component {
   onDropPropertyClick = (key) => {
     return (event) => {
       event.preventDefault();
-      const { onChange, formData } = this.props;
+      const { onChange, formData, name } = this.props;
       const copiedFormData = { ...formData };
       (0, import_unset.default)(copiedFormData, key);
-      onChange(copiedFormData);
+      onChange(copiedFormData, [name]);
     };
   };
   /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
@@ -1976,11 +2054,11 @@ var ObjectField = class extends import_react7.Component {
    * @returns - The key change callback function
    */
   onKeyChange = (oldValue) => {
-    return (value, newErrorSchema) => {
+    return (value) => {
       if (oldValue === value) {
         return;
       }
-      const { formData, onChange, errorSchema } = this.props;
+      const { formData, onChange } = this.props;
       value = this.getAvailableKey(value, formData);
       const newFormData = {
         ...formData
@@ -1992,13 +2070,7 @@ var ObjectField = class extends import_react7.Component {
       });
       const renamedObj = Object.assign({}, ...keyValues);
       this.setState({ wasPropertyKeyModified: true });
-      onChange(
-        renamedObj,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [value]: newErrorSchema
-        }
-      );
+      onChange(renamedObj, []);
     };
   };
   /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -2034,7 +2106,7 @@ var ObjectField = class extends import_react7.Component {
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { formData, onChange, registry } = this.props;
+    const { formData, name, onChange, registry } = this.props;
     const newFormData = { ...formData };
     const newKey = this.getAvailableKey("newKey", newFormData);
     if (schema.patternProperties) {
@@ -2062,7 +2134,7 @@ var ObjectField = class extends import_react7.Component {
       const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
       (0, import_set4.default)(newFormData, newKey, newValue);
     }
-    onChange(newFormData);
+    onChange(newFormData, [name]);
   };
   /** Renders the `ObjectField` from the given props
    */
@@ -2163,7 +2235,7 @@ var ObjectField = class extends import_react7.Component {
 var ObjectField_default = ObjectField;
 
 // src/components/fields/SchemaField.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_utils9 = require("@rjsf/utils");
 var import_isObject5 = __toESM(require("lodash/isObject"), 1);
 var import_omit3 = __toESM(require("lodash/omit"), 1);
@@ -2246,10 +2318,10 @@ function SchemaFieldRender(props) {
     schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
     _idSchema
   );
-  const handleFieldComponentChange = (0, import_react8.useCallback)(
-    (formData2, newErrorSchema, id2) => {
+  const handleFieldComponentChange = (0, import_react9.useCallback)(
+    (formData2, path, newErrorSchema, id2) => {
       const theId = id2 || fieldId;
-      return onChange(formData2, newErrorSchema, theId);
+      return onChange(formData2, path, newErrorSchema, theId);
     },
     [fieldId, onChange]
   );
@@ -2416,7 +2488,7 @@ function SchemaFieldRender(props) {
     )
   ] }) });
 }
-var SchemaField = class extends import_react8.Component {
+var SchemaField = class extends import_react9.Component {
   shouldComponentUpdate(nextProps) {
     const { experimental_componentUpdateStrategy = "customDeep" } = this.props.registry;
     return (0, import_utils9.shouldRender)(this, nextProps, this.state, experimental_componentUpdateStrategy);
@@ -2428,6 +2500,7 @@ var SchemaField = class extends import_react8.Component {
 var SchemaField_default = SchemaField;
 
 // src/components/fields/StringField.tsx
+var import_react10 = require("react");
 var import_utils10 = require("@rjsf/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function StringField(props) {
@@ -2459,6 +2532,12 @@ function StringField(props) {
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const label = uiTitle ?? title ?? name;
   const Widget = (0, import_utils10.getWidget)(schema, widget, widgets2);
+  const onWidgetChange = (0, import_react10.useCallback)(
+    (value, errorSchema, id) => {
+      return onChange(value, [], errorSchema, id);
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Widget,
     {
@@ -2471,7 +2550,7 @@ function StringField(props) {
       hideLabel: !displayLabel,
       hideError,
       value: formData,
-      onChange,
+      onChange: onWidgetChange,
       onBlur,
       onFocus,
       required,
@@ -2488,14 +2567,14 @@ function StringField(props) {
 var StringField_default = StringField;
 
 // src/components/fields/NullField.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 function NullField(props) {
-  const { formData, onChange } = props;
-  (0, import_react9.useEffect)(() => {
+  const { name, formData, onChange } = props;
+  (0, import_react11.useEffect)(() => {
     if (formData === void 0) {
-      onChange(null);
+      onChange(null, [name]);
     }
-  }, [formData, onChange]);
+  }, [name, formData, onChange]);
   return null;
 }
 var NullField_default = NullField;
@@ -2581,7 +2660,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/components/templates/ArrayFieldItemButtonsTemplate.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_utils13 = require("@rjsf/utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ArrayFieldItemButtonsTemplate(props) {
@@ -2601,10 +2680,10 @@ function ArrayFieldItemButtonsTemplate(props) {
     uiSchema
   } = props;
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-  const onCopyClick = (0, import_react10.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = (0, import_react10.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = (0, import_react10.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = (0, import_react10.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+  const onCopyClick = (0, import_react12.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = (0, import_react12.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = (0, import_react12.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = (0, import_react12.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       MoveUpButton2,
@@ -2756,7 +2835,7 @@ function ArrayFieldTitleTemplate(props) {
 }
 
 // src/components/templates/BaseInputTemplate.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_utils16 = require("@rjsf/utils");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
@@ -2799,15 +2878,15 @@ function BaseInputTemplate(props) {
   } else {
     inputValue = value == null ? "" : value;
   }
-  const _onChange = (0, import_react11.useCallback)(
+  const _onChange = (0, import_react13.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options]
   );
-  const _onBlur = (0, import_react11.useCallback)(
+  const _onBlur = (0, import_react13.useCallback)(
     ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
-  const _onFocus = (0, import_react11.useCallback)(
+  const _onFocus = (0, import_react13.useCallback)(
     ({ target }) => onFocus(id, target && target.value),
     [onFocus, id]
   );
@@ -3236,7 +3315,7 @@ function templates() {
 var templates_default = templates;
 
 // src/components/widgets/AltDateWidget.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_utils28 = require("@rjsf/utils");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function readyForChange(state) {
@@ -3295,26 +3374,25 @@ function AltDateWidget({
   value
 }) {
   const { translateString } = registry;
-  const [lastValue, setLastValue] = (0, import_react12.useState)(value);
-  const [state, setState] = (0, import_react12.useReducer)(
-    (state2, action) => {
-      return { ...state2, ...action };
+  const [state, setState] = (0, import_react14.useState)((0, import_utils28.parseDateString)(value, time));
+  (0, import_react14.useEffect)(() => {
+    setState((0, import_utils28.parseDateString)(value, time));
+  }, [time, value]);
+  const handleChange = (0, import_react14.useCallback)(
+    (property, value2) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value2 === "undefined" ? -1 : value2
+      };
+      if (readyForChange(nextState)) {
+        onChange((0, import_utils28.toDateString)(nextState, time));
+      } else {
+        setState(nextState);
+      }
     },
-    (0, import_utils28.parseDateString)(value, time)
+    [state, onChange, time]
   );
-  (0, import_react12.useEffect)(() => {
-    const stateValue = (0, import_utils28.toDateString)(state, time);
-    if (readyForChange(state) && stateValue !== value) {
-      onChange(stateValue);
-    } else if (lastValue !== value) {
-      setLastValue(value);
-      setState((0, import_utils28.parseDateString)(value, time));
-    }
-  }, [time, value, onChange, state, lastValue]);
-  const handleChange = (0, import_react12.useCallback)((property, value2) => {
-    setState({ [property]: value2 });
-  }, []);
-  const handleSetNow = (0, import_react12.useCallback)(
+  const handleSetNow = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -3323,9 +3401,9 @@ function AltDateWidget({
       const nextState = (0, import_utils28.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), time);
       onChange((0, import_utils28.toDateString)(nextState, time));
     },
-    [disabled, readonly, time]
+    [disabled, readonly, time, onChange]
   );
-  const handleClear = (0, import_react12.useCallback)(
+  const handleClear = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -3374,7 +3452,7 @@ function AltDateTimeWidget({
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/components/widgets/CheckboxWidget.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_utils29 = require("@rjsf/utils");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function CheckboxWidget({
@@ -3399,15 +3477,15 @@ function CheckboxWidget({
     options
   );
   const required = (0, import_utils29.schemaRequiresTrueValue)(schema);
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react15.useCallback)(
     (event) => onChange(event.target.checked),
     [onChange]
   );
-  const handleBlur = (0, import_react13.useCallback)(
+  const handleBlur = (0, import_react15.useCallback)(
     (event) => onBlur(id, event.target.checked),
     [onBlur, id]
   );
-  const handleFocus = (0, import_react13.useCallback)(
+  const handleFocus = (0, import_react15.useCallback)(
     (event) => onFocus(id, event.target.checked),
     [onFocus, id]
   );
@@ -3447,7 +3525,7 @@ function CheckboxWidget({
 var CheckboxWidget_default = CheckboxWidget;
 
 // src/components/widgets/CheckboxesWidget.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_utils30 = require("@rjsf/utils");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function CheckboxesWidget({
@@ -3462,13 +3540,13 @@ function CheckboxesWidget({
   onFocus
 }) {
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react16.useCallback)(
     ({ target }) => onBlur(id, (0, import_utils30.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id]
+    [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react16.useCallback)(
     ({ target }) => onFocus(id, (0, import_utils30.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id]
+    [onFocus, id, enumOptions, emptyValue]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils30.enumOptionsIsSelected)(option.value, checkboxesValues);
@@ -3515,13 +3593,13 @@ function ColorWidget(props) {
 }
 
 // src/components/widgets/DateWidget.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_utils32 = require("@rjsf/utils");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function DateWidget(props) {
   const { onChange, options, registry } = props;
   const BaseInputTemplate2 = (0, import_utils32.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react15.useCallback)((value) => onChange(value || void 0), [onChange]);
+  const handleChange = (0, import_react17.useCallback)((value) => onChange(value || void 0), [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
 }
 
@@ -3552,7 +3630,7 @@ function EmailWidget(props) {
 }
 
 // src/components/widgets/FileWidget.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_utils35 = require("@rjsf/utils");
 var import_markdown_to_jsx4 = __toESM(require("markdown-to-jsx"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -3653,7 +3731,7 @@ function extractFileInfo(dataURLs) {
 function FileWidget(props) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
   const BaseInputTemplate2 = (0, import_utils35.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react16.useCallback)(
+  const handleChange = (0, import_react18.useCallback)(
     (event) => {
       if (!event.target.files) {
         return;
@@ -3669,8 +3747,8 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const filesInfo = (0, import_react16.useMemo)(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
-  const rmFile = (0, import_react16.useCallback)(
+  const filesInfo = (0, import_react18.useMemo)(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+  const rmFile = (0, import_react18.useCallback)(
     (index) => {
       if (multiple) {
         const newValue = value.filter((_, i) => i !== index);
@@ -3728,7 +3806,7 @@ function PasswordWidget(props) {
 }
 
 // src/components/widgets/RadioWidget.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_utils37 = require("@rjsf/utils");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function RadioWidget({
@@ -3744,11 +3822,11 @@ function RadioWidget({
   id
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
-  const handleBlur = (0, import_react17.useCallback)(
+  const handleBlur = (0, import_react19.useCallback)(
     ({ target }) => onBlur(id, (0, import_utils37.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
     [onBlur, enumOptions, emptyValue, id]
   );
-  const handleFocus = (0, import_react17.useCallback)(
+  const handleFocus = (0, import_react19.useCallback)(
     ({ target }) => onFocus(id, (0, import_utils37.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
     [onFocus, enumOptions, emptyValue, id]
   );
@@ -3798,7 +3876,7 @@ function RangeWidget(props) {
 }
 
 // src/components/widgets/RatingWidget.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function RatingWidget({
   id,
@@ -3816,7 +3894,7 @@ function RatingWidget({
   const { stars = 5, shape = "star" } = options;
   const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
   const min = schema.minimum || 0;
-  const handleStarClick = (0, import_react18.useCallback)(
+  const handleStarClick = (0, import_react20.useCallback)(
     (starValue) => {
       if (!disabled && !readonly) {
         onChange(starValue);
@@ -3824,7 +3902,7 @@ function RatingWidget({
     },
     [onChange, disabled, readonly]
   );
-  const handleFocus = (0, import_react18.useCallback)(
+  const handleFocus = (0, import_react20.useCallback)(
     (event) => {
       if (onFocus) {
         const starValue = Number(event.target.dataset.value);
@@ -3833,7 +3911,7 @@ function RatingWidget({
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react18.useCallback)(
+  const handleBlur = (0, import_react20.useCallback)(
     (event) => {
       if (onBlur) {
         const starValue = Number(event.target.dataset.value);
@@ -3901,7 +3979,7 @@ function RatingWidget({
 }
 
 // src/components/widgets/SelectWidget.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_utils38 = require("@rjsf/utils");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function getValue(event, multiple) {
@@ -3927,21 +4005,21 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
-  const handleFocus = (0, import_react19.useCallback)(
+  const handleFocus = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
       return onFocus(id, (0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
     },
     [onFocus, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleBlur = (0, import_react19.useCallback)(
+  const handleBlur = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
       return onBlur(id, (0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
     },
     [onBlur, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleChange = (0, import_react19.useCallback)(
+  const handleChange = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
       return onChange((0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
@@ -3979,7 +4057,7 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/components/widgets/TextareaWidget.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_utils39 = require("@rjsf/utils");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function TextareaWidget({
@@ -3995,15 +4073,15 @@ function TextareaWidget({
   onBlur,
   onFocus
 }) {
-  const handleChange = (0, import_react20.useCallback)(
+  const handleChange = (0, import_react22.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options.emptyValue]
   );
-  const handleBlur = (0, import_react20.useCallback)(
+  const handleBlur = (0, import_react22.useCallback)(
     ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
-  const handleFocus = (0, import_react20.useCallback)(
+  const handleFocus = (0, import_react22.useCallback)(
     ({ target }) => onFocus(id, target && target.value),
     [id, onFocus]
   );
@@ -4043,13 +4121,13 @@ function TextWidget(props) {
 }
 
 // src/components/widgets/TimeWidget.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_utils41 = require("@rjsf/utils");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function TimeWidget(props) {
   const { onChange, options, registry } = props;
   const BaseInputTemplate2 = (0, import_utils41.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react21.useCallback)((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
+  const handleChange = (0, import_react23.useCallback)((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
 }
 
@@ -4112,11 +4190,14 @@ function getDefaultRegistry() {
 
 // src/components/Form.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var Form = class extends import_react22.Component {
+var Form = class extends import_react24.Component {
   /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
    * provide any possible type here
    */
   formElement;
+  /** The list of pending changes
+   */
+  pendingChanges = [];
   /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
    * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
    * state construction.
@@ -4132,7 +4213,7 @@ var Form = class extends import_react22.Component {
     if (this.props.onChange && !(0, import_utils45.deepEquals)(this.state.formData, this.props.formData)) {
       this.props.onChange(this.state);
     }
-    this.formElement = (0, import_react22.createRef)();
+    this.formElement = (0, import_react24.createRef)();
   }
   /**
    * `getSnapshotBeforeUpdate` is a React lifecycle method that is invoked right before the most recently rendered
@@ -4155,8 +4236,10 @@ var Form = class extends import_react22.Component {
   getSnapshotBeforeUpdate(prevProps, prevState) {
     if (!(0, import_utils45.deepEquals)(this.props, prevProps)) {
       const formDataChangedFields = (0, import_utils45.getChangedFields)(this.props.formData, prevProps.formData);
+      const stateDataChangedFields = (0, import_utils45.getChangedFields)(this.props.formData, this.state.formData);
       const isSchemaChanged = !(0, import_utils45.deepEquals)(prevProps.schema, this.props.schema);
       const isFormDataChanged = formDataChangedFields.length > 0 || !(0, import_utils45.deepEquals)(prevProps.formData, this.props.formData);
+      const isStateDataChanged = stateDataChangedFields.length > 0 || !(0, import_utils45.deepEquals)(this.state.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -4165,7 +4248,9 @@ var Form = class extends import_react22.Component {
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
         isSchemaChanged,
-        formDataChangedFields
+        formDataChangedFields,
+        // Skip live validation for this request if no form data has changed from the last state
+        !isStateDataChanged
       );
       const shouldUpdate = !(0, import_utils45.deepEquals)(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -4204,14 +4289,14 @@ var Form = class extends import_react22.Component {
    * @param formDataChangedFields - The changed fields of `formData`
    * @returns - The new state for the `Form`
    */
-  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
+  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = [], skipLiveValidate = false) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
     const validator = "validator" in props ? props.validator : this.props.validator;
     const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
     const edit = typeof inputFormData !== "undefined";
     const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
-    const mustValidate = edit && !props.noValidate && liveValidate;
+    const mustValidate = edit && !props.noValidate && liveValidate && !skipLiveValidate;
     const experimental_defaultFormStateBehavior = "experimental_defaultFormStateBehavior" in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
     const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
     let schemaUtils = state.schemaUtils;
@@ -4331,8 +4416,7 @@ var Form = class extends import_react22.Component {
     let customValidateErrors = {};
     if (typeof customValidate === "function") {
       const errorHandler = customValidate(prevFormData, (0, import_utils45.createErrorHandler)(prevFormData), uiSchema);
-      const userErrorSchema = (0, import_utils45.unwrapErrorHandler)(errorHandler);
-      customValidateErrors = userErrorSchema;
+      customValidateErrors = (0, import_utils45.unwrapErrorHandler)(errorHandler);
     }
     return customValidateErrors;
   }
@@ -4341,7 +4425,8 @@ var Form = class extends import_react22.Component {
    *
    * @param formData - The new form data to validate
    * @param schema - The schema used to validate against
-   * @param altSchemaUtils - The alternate schemaUtils to use for validation
+   * @param [altSchemaUtils] - The alternate schemaUtils to use for validation
+   * @param [retrievedSchema] - An optionally retrieved schema for per
    */
   validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
@@ -4423,10 +4508,15 @@ var Form = class extends import_react22.Component {
     const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
     const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
     const fieldNames = this.getFieldNames(pathSchema, formData);
-    const newFormData = this.getUsedFormData(formData, fieldNames);
-    return newFormData;
+    return this.getUsedFormData(formData, fieldNames);
   };
-  // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
+  /** Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
+   *
+   * @param schemaErrors - The schema errors to filter
+   * @param [resolvedSchema] - An optionally resolved schema to use for performance reasons
+   * @param [formData] - The formData to help filter errors
+   * @private
+   */
   filterErrorsBasedOnSchema(schemaErrors, resolvedSchema, formData) {
     const { retrievedSchema, schemaUtils } = this.state;
     const _retrievedSchema = resolvedSchema ?? retrievedSchema;
@@ -4460,23 +4550,45 @@ var Form = class extends import_react22.Component {
     };
     return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
   }
-  /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-   * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-   * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-   * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-   * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-   * callback will be called if specified with the updated state.
+  /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
+   * the array only contains a single pending change.
    *
-   * @param formData - The new form data from a change to a field
-   * @param newErrorSchema - The new `ErrorSchema` based on the field change
-   * @param id - The id of the field that caused the change
+   * @param newValue - The new form data from a change to a field
+   * @param [path] - The path to the change into which to set the formData
+   * @param [newErrorSchema] - The new `ErrorSchema` based on the field change
+   * @param [id] - The id of the field that caused the change
+   */
+  onChange = (newValue, path, newErrorSchema, id) => {
+    this.pendingChanges.push({ newValue, path, newErrorSchema, id });
+    if (this.pendingChanges.length === 1) {
+      this.processPendingChange();
+    }
+  };
+  /** Function to handle changes made to a field in the `Form`. This handler gets the first change from the
+   * `pendingChanges` list, containing the `newValue` for the `formData` and the `path` at which the `newValue` is to be
+   * updated, along with a new, optional `ErrorSchema` for that same `path` and potentially the `id` of the field being
+   * changed. It will first update the `formData` with any missing default fields and then, if `omitExtraData` and
+   * `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not in a form field. Then, the
+   * resulting `formData` will be validated if required. The state will be updated with the new updated (potentially
+   * filtered) `formData`, any errors that resulted from validation. Finally the `onChange` callback will be called, if
+   * specified, with the updated state and the `processPendingChange()` function is called again.
    */
-  onChange = (formData, newErrorSchema, id) => {
-    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema } = this.state;
+  processPendingChange() {
+    if (this.pendingChanges.length === 0) {
+      return;
+    }
+    const { newValue, path, id } = this.pendingChanges[0];
+    let { newErrorSchema } = this.pendingChanges[0];
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, idPrefix = "" } = this.props;
+    const { formData: oldFormData, schemaUtils, schema, errorSchema } = this.state;
+    const isRootPath = !path || path.length === 0 || path.length === 1 && path[0] === idPrefix;
     let retrievedSchema = this.state.retrievedSchema;
+    let formData = isRootPath ? newValue : (0, import_cloneDeep3.default)(oldFormData);
     if ((0, import_utils45.isObject)(formData) || Array.isArray(formData)) {
-      const newState = this.getStateFromProps(this.props, formData);
+      if (!isRootPath) {
+        (0, import_set5.default)(formData, path, newValue);
+      }
+      const newState = this.getStateFromProps(this.props, formData, void 0, void 0, void 0, true);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
     }
@@ -4489,38 +4601,49 @@ var Form = class extends import_react22.Component {
         formData: newFormData
       };
     }
-    if (mustValidate) {
+    if (newErrorSchema && !isRootPath) {
+      const errorSchemaCopy = (0, import_cloneDeep3.default)(errorSchema);
+      (0, import_set5.default)(errorSchemaCopy, path, newErrorSchema);
+      newErrorSchema = errorSchemaCopy;
+    }
+    if (mustValidate && this.pendingChanges.length === 1) {
       const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
       let errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
+      let errorSchema2 = schemaValidation.errorSchema;
       const schemaValidationErrors = errors;
-      const schemaValidationErrorSchema = errorSchema;
+      const schemaValidationErrorSchema = errorSchema2;
       if (extraErrors) {
         const merged = (0, import_utils45.validationDataMerge)(schemaValidation, extraErrors);
-        errorSchema = merged.errorSchema;
+        errorSchema2 = merged.errorSchema;
         errors = merged.errors;
       }
       if (newErrorSchema) {
         const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-        errorSchema = (0, import_utils45.mergeObjects)(errorSchema, filteredErrors, "preventDuplicates");
+        errorSchema2 = (0, import_utils45.mergeObjects)(errorSchema2, filteredErrors, "preventDuplicates");
       }
       state = {
         formData: newFormData,
         errors,
-        errorSchema,
+        errorSchema: errorSchema2,
         schemaValidationErrors,
         schemaValidationErrorSchema
       };
     } else if (!noValidate && newErrorSchema) {
-      const errorSchema = extraErrors ? (0, import_utils45.mergeObjects)(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+      const errorSchema2 = extraErrors ? (0, import_utils45.mergeObjects)(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
       state = {
         formData: newFormData,
-        errorSchema,
-        errors: (0, import_utils45.toErrorList)(errorSchema)
+        errorSchema: errorSchema2,
+        errors: (0, import_utils45.toErrorList)(errorSchema2)
       };
     }
-    this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-  };
+    this.setState(state, () => {
+      if (onChange) {
+        onChange({ ...this.state, ...state }, id);
+      }
+      this.pendingChanges.shift();
+      this.processPendingChange();
+    });
+  }
   /**
    * If the retrievedSchema has changed the new retrievedSchema is returned.
    * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -4755,7 +4878,7 @@ var Form = class extends import_react22.Component {
     const {
       children,
       id,
-      idPrefix,
+      idPrefix = "",
       idSeparator,
       className = "",
       tagName,
@@ -4805,7 +4928,7 @@ var Form = class extends import_react22.Component {
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             _SchemaField,
             {
-              name: "",
+              name: idPrefix,
               schema,
               uiSchema,
               errorSchema,
@@ -4831,10 +4954,10 @@ var Form = class extends import_react22.Component {
 };
 
 // src/withTheme.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function withTheme(themeProps) {
-  return (0, import_react23.forwardRef)(
+  return (0, import_react25.forwardRef)(
     ({ fields: fields2, widgets: widgets2, templates: templates2, ...directProps }, ref) => {
       fields2 = { ...themeProps?.fields, ...fields2 };
       widgets2 = { ...themeProps?.widgets, ...widgets2 };