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

package/dist/core.umd.js

@@ -1,12 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/toPath'), require('lodash/cloneDeep'), require('lodash/isObject'), require('lodash/set'), require('nanoid'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/toPath', 'lodash/cloneDeep', 'lodash/isObject', 'lodash/set', 'nanoid', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._forEach, global.get2, global.isEmpty, global._isNil, global._pick, global._toPath, global.cloneDeep2, global.isObject, global.set, global.nanoid, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.noop, global.omit3, global.Markdown, global.unset));
-})(this, (function (exports, react, utils, _forEach, get2, isEmpty, _isNil, _pick, _toPath, cloneDeep2, isObject, set, nanoid, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, noop, omit3, Markdown, unset) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._cloneDeep, global._forEach, global.get2, global.isEmpty, global._isNil, global._pick, global.set, global._toPath, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.unset));
+})(this, (function (exports, react, utils, _cloneDeep, _forEach, get2, isEmpty, _isNil, _pick, set, _toPath, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, unset) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
-    return nanoid.nanoid();
+    return uniqueId("rjsf-array-item-");
   }
   function generateKeyedFormData(formData) {
     return !Array.isArray(formData) ? [] : formData.map((item) => {
@@ -155,7 +155,8 @@
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        // add click will pass the empty `path` array to the onChange which adds the appropriate path
+        () => onChange(keyedToPlainFormData(newKeyedFormData), [], newErrorSchema)
       );
     }
     /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
@@ -205,7 +206,7 @@
         }
         const newKeyedFormDataRow = {
           key: generateRowId(),
-          item: cloneDeep2(keyedFormData[index].item)
+          item: _cloneDeep(keyedFormData[index].item)
         };
         const newKeyedFormData = [...keyedFormData];
         if (index !== void 0) {
@@ -218,7 +219,8 @@
             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)
         );
       };
     };
@@ -253,7 +255,8 @@
             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)
         );
       };
     };
@@ -297,7 +300,8 @@
           {
             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)
         );
       };
     };
@@ -307,28 +311,47 @@
      * @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
         );
       };
     };
     /** Callback handler used to change the value for a checkbox */
     onSelectChange = (value) => {
-      const { onChange, idSchema } = this.props;
-      onChange(value, void 0, idSchema && idSchema.$id);
+      const { name, onChange, idSchema } = this.props;
+      onChange(value, [name], 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() {
@@ -403,6 +426,7 @@
           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,
@@ -415,7 +439,7 @@
             itemIdSchema,
             itemErrorSchema,
             itemData: itemCast,
-            itemUiSchema: uiSchema.items,
+            itemUiSchema,
             autofocus: autofocus && index === 0,
             onBlur,
             onFocus,
@@ -642,7 +666,16 @@
           const itemSchema = (additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
           const itemIdPrefix = idSchema.$id + idSeparator + index;
           const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-          const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+          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,
@@ -847,6 +880,12 @@
         enumOptions = utils.optionsList({ enum: enums }, uiSchema);
       }
     }
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => {
+        return onChange(value, [], errorSchema, id);
+      },
+      [onChange]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Widget,
       {
@@ -855,7 +894,7 @@
         uiSchema,
         id: idSchema.$id,
         name,
-        onChange,
+        onChange: onWidgetChange,
         onFocus,
         onBlur,
         label,
@@ -878,6 +917,9 @@
   function getNonNullishValue(value, fallback) {
     return value ?? fallback;
   }
+  function isNumericIndex(str) {
+    return /^\d+?$/.test(str);
+  }
   var LayoutGridField = class _LayoutGridField extends react.PureComponent {
     static defaultProps = {
       layoutGridSchema: void 0
@@ -991,6 +1033,38 @@
       const baseId = get2(baseIdSchema, utils.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" && 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;
+        }
+        idSchema = { [utils.ID_KEY]: `${idSchema[utils.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
@@ -1030,7 +1104,9 @@
           rawSchema = get2(selectedSchema, [utils.PROPERTIES_KEY, part], {});
           idSchema = get2(selectedIdSchema, part, {});
         } else {
-          rawSchema = {};
+          const result = _LayoutGridField.computeArraySchemasIfPresent(schema, idSchema, part, idSeparator);
+          rawSchema = result.rawSchema ?? {};
+          idSchema = result.idSchema;
         }
         innerData = get2(innerData, part, {});
         schema = schemaUtils.retrieveSchema(rawSchema, innerData);
@@ -1049,9 +1125,15 @@
           idSchema = utils.mergeObjects(rawIdSchema, idSchema);
         }
         isRequired = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
-        schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
-        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-        idSchema = get2(idSchema, leafPath, {});
+        const result = _LayoutGridField.computeArraySchemasIfPresent(schema, idSchema, leafPath, idSeparator);
+        if (result.rawSchema) {
+          schema = result.rawSchema;
+          idSchema = result.idSchema;
+        } else {
+          schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
+          schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+          idSchema = get2(idSchema, leafPath, {});
+        }
         isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
         if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
           const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
@@ -1131,16 +1213,14 @@
      * @returns - The `onChange` handling function for the `dottedPath` field
      */
     onFieldChange = (dottedPath) => {
-      return (value, errSchema, id) => {
-        const { onChange, errorSchema, formData } = this.props;
-        const newFormData = cloneDeep2(formData || {});
+      return (value, path, errSchema, id) => {
+        const { onChange, errorSchema } = this.props;
         let newErrorSchema = errorSchema;
         if (errSchema && errorSchema) {
-          newErrorSchema = cloneDeep2(errorSchema);
+          newErrorSchema = _cloneDeep(errorSchema);
           set(newErrorSchema, dottedPath, errSchema);
         }
-        set(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
@@ -1502,7 +1582,7 @@
       if (newFormData) {
         set(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__ */ jsxRuntime.jsx(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
@@ -1636,7 +1716,7 @@
         newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
       }
       this.setState({ selectedOption: intOption }, () => {
-        onChange(newFormData, void 0, this.getFieldId());
+        onChange(newFormData, [], void 0, this.getFieldId());
       });
     };
     getFieldId() {
@@ -1758,13 +1838,13 @@
     const { StringField: StringField2 } = registry.fields;
     let value = formData;
     const handleChange = react.useCallback(
-      (value2, errorSchema, id) => {
+      (value2, path, errorSchema, id) => {
         setLastValue(value2);
         if (`${value2}`.charAt(0) === ".") {
           value2 = `0${value2}`;
         }
         const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value2.replace(trailingCharMatcher, "")) : utils.asNumber(value2);
-        onChange(processed, errorSchema, id);
+        onChange(processed, path, errorSchema, id);
       },
       [onChange]
     );
@@ -1801,20 +1881,14 @@
      * @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
@@ -1826,10 +1900,10 @@
     onDropPropertyClick = (key) => {
       return (event) => {
         event.preventDefault();
-        const { onChange, formData } = this.props;
+        const { onChange, formData, name } = this.props;
         const copiedFormData = { ...formData };
         unset(copiedFormData, key);
-        onChange(copiedFormData);
+        onChange(copiedFormData, [name]);
       };
     };
     /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
@@ -1856,11 +1930,11 @@
      * @returns - The key change callback function
      */
     onKeyChange = (oldValue) => {
-      return (value, newErrorSchema) => {
+      return (value) => {
         if (oldValue === value) {
           return;
         }
-        const { formData, onChange, errorSchema } = this.props;
+        const { formData, onChange } = this.props;
         value = this.getAvailableKey(value, formData);
         const newFormData = {
           ...formData
@@ -1872,13 +1946,7 @@
         });
         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`
@@ -1914,7 +1982,7 @@
       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) {
@@ -1942,7 +2010,7 @@
         const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
         set(newFormData, newKey, newValue);
       }
-      onChange(newFormData);
+      onChange(newFormData, [name]);
     };
     /** Renders the `ObjectField` from the given props
      */
@@ -2120,9 +2188,9 @@
       _idSchema
     );
     const handleFieldComponentChange = react.useCallback(
-      (formData2, newErrorSchema, id2) => {
+      (formData2, path, newErrorSchema, id2) => {
         const theId = id2 || fieldId;
-        return onChange(formData2, newErrorSchema, theId);
+        return onChange(formData2, path, newErrorSchema, theId);
       },
       [fieldId, onChange]
     );
@@ -2328,6 +2396,12 @@
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const label = uiTitle ?? title ?? name;
     const Widget = utils.getWidget(schema, widget, widgets2);
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => {
+        return onChange(value, [], errorSchema, id);
+      },
+      [onChange]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Widget,
       {
@@ -2340,7 +2414,7 @@
         hideLabel: !displayLabel,
         hideError,
         value: formData,
-        onChange,
+        onChange: onWidgetChange,
         onBlur,
         onFocus,
         required,
@@ -2356,12 +2430,12 @@
   }
   var StringField_default = StringField;
   function NullField(props) {
-    const { formData, onChange } = props;
+    const { name, formData, onChange } = props;
     react.useEffect(() => {
       if (formData === void 0) {
-        onChange(null);
+        onChange(null, [name]);
       }
-    }, [formData, onChange]);
+    }, [name, formData, onChange]);
     return null;
   }
   var NullField_default = NullField;
@@ -3065,25 +3139,24 @@
     value
   }) {
     const { translateString } = registry;
-    const [lastValue, setLastValue] = react.useState(value);
-    const [state, setState] = react.useReducer(
-      (state2, action) => {
-        return { ...state2, ...action };
+    const [state, setState] = react.useState(utils.parseDateString(value, time));
+    react.useEffect(() => {
+      setState(utils.parseDateString(value, time));
+    }, [time, value]);
+    const handleChange = react.useCallback(
+      (property, value2) => {
+        const nextState = {
+          ...state,
+          [property]: typeof value2 === "undefined" ? -1 : value2
+        };
+        if (readyForChange(nextState)) {
+          onChange(utils.toDateString(nextState, time));
+        } else {
+          setState(nextState);
+        }
       },
-      utils.parseDateString(value, time)
+      [state, onChange, time]
     );
-    react.useEffect(() => {
-      const stateValue = utils.toDateString(state, time);
-      if (readyForChange(state) && stateValue !== value) {
-        onChange(stateValue);
-      } else if (lastValue !== value) {
-        setLastValue(value);
-        setState(utils.parseDateString(value, time));
-      }
-    }, [time, value, onChange, state, lastValue]);
-    const handleChange = react.useCallback((property, value2) => {
-      setState({ [property]: value2 });
-    }, []);
     const handleSetNow = react.useCallback(
       (event) => {
         event.preventDefault();
@@ -3093,7 +3166,7 @@
         const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
         onChange(utils.toDateString(nextState, time));
       },
-      [disabled, readonly, time]
+      [disabled, readonly, time, onChange]
     );
     const handleClear = react.useCallback(
       (event) => {
@@ -3221,11 +3294,11 @@
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
       ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id]
+      [onBlur, id, enumOptions, emptyValue]
     );
     const handleFocus = react.useCallback(
       ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id]
+      [onFocus, id, enumOptions, emptyValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
@@ -3802,6 +3875,9 @@
      * provide any possible type here
      */
     formElement;
+    /** The list of pending changes
+     */
+    pendingChanges = [];
     /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
      * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
      * state construction.
@@ -4016,8 +4092,7 @@
       let customValidateErrors = {};
       if (typeof customValidate === "function") {
         const errorHandler = customValidate(prevFormData, utils.createErrorHandler(prevFormData), uiSchema);
-        const userErrorSchema = utils.unwrapErrorHandler(errorHandler);
-        customValidateErrors = userErrorSchema;
+        customValidateErrors = utils.unwrapErrorHandler(errorHandler);
       }
       return customValidateErrors;
     }
@@ -4026,7 +4101,8 @@
      *
      * @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;
@@ -4108,10 +4184,15 @@
       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;
@@ -4145,22 +4226,44 @@
       };
       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 : _cloneDeep(oldFormData);
       if (utils.isObject(formData) || Array.isArray(formData)) {
+        if (!isRootPath) {
+          set(formData, path, newValue);
+        }
         const newState = this.getStateFromProps(this.props, formData);
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
@@ -4174,38 +4277,49 @@
           formData: newFormData
         };
       }
+      if (newErrorSchema && !isRootPath) {
+        const errorSchemaCopy = _cloneDeep(errorSchema);
+        set(errorSchemaCopy, path, newErrorSchema);
+        newErrorSchema = errorSchemaCopy;
+      }
       if (mustValidate) {
         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 = utils.validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
+          errorSchema2 = merged.errorSchema;
           errors = merged.errors;
         }
         if (newErrorSchema) {
           const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-          errorSchema = utils.mergeObjects(errorSchema, filteredErrors, "preventDuplicates");
+          errorSchema2 = utils.mergeObjects(errorSchema2, filteredErrors, "preventDuplicates");
         }
         state = {
           formData: newFormData,
           errors,
-          errorSchema,
+          errorSchema: errorSchema2,
           schemaValidationErrors,
           schemaValidationErrorSchema
         };
       } else if (!noValidate && newErrorSchema) {
-        const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        const errorSchema2 = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
         state = {
           formData: newFormData,
-          errorSchema,
-          errors: utils.toErrorList(errorSchema)
+          errorSchema: errorSchema2,
+          errors: utils.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.
@@ -4440,7 +4554,7 @@
       const {
         children,
         id,
-        idPrefix,
+        idPrefix = "",
         idSeparator,
         className = "",
         tagName,
@@ -4490,7 +4604,7 @@
             /* @__PURE__ */ jsxRuntime.jsx(
               _SchemaField,
               {
-                name: "",
+                name: idPrefix,
                 schema,
                 uiSchema,
                 errorSchema,