@rjsf/core 5.24.5 → 5.24.7

package/dist/core.umd.js

@@ -29,189 +29,6 @@
      */
     constructor(props) {
       super(props);
-      /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-       * that the schema is fixed and allows additional items.
-       */
-      this._getNewFormDataRow = () => {
-        const { schema, registry } = this.props;
-        const { schemaUtils } = registry;
-        let itemSchema = schema.items;
-        if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
-          itemSchema = schema.additionalItems;
-        }
-        return schemaUtils.getDefaultFormState(itemSchema);
-      };
-      /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-       * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-       * keyed data
-       *
-       * @param event - The event for the click
-       */
-      this.onAddClick = (event) => {
-        this._handleAddClick(event);
-      };
-      /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
-       * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the add button is clicked
-       */
-      this.onAddIndexClick = (index) => {
-        return (event) => {
-          this._handleAddClick(event, index);
-        };
-      };
-      /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
-       * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the copy button is clicked
-       */
-      this.onCopyIndexClick = (index) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-          }
-          const { onChange, errorSchema } = this.props;
-          const { keyedFormData } = this.state;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i <= index) {
-                set(newErrorSchema, [i], errorSchema[idx]);
-              } else if (i > index) {
-                set(newErrorSchema, [i + 1], errorSchema[idx]);
-              }
-            }
-          }
-          const newKeyedFormDataRow = {
-            key: generateRowId(),
-            item: cloneDeep(keyedFormData[index].item)
-          };
-          const newKeyedFormData = [...keyedFormData];
-          if (index !== void 0) {
-            newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
-          } else {
-            newKeyedFormData.push(newKeyedFormDataRow);
-          }
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData,
-              updatedKeyedFormData: true
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
-       * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
-       * from the keyed data
-       *
-       * @param index - The index at which the remove button is clicked
-       */
-      this.onDropIndexClick = (index) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-          }
-          const { onChange, errorSchema } = this.props;
-          const { keyedFormData } = this.state;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i < index) {
-                set(newErrorSchema, [i], errorSchema[idx]);
-              } else if (i > index) {
-                set(newErrorSchema, [i - 1], errorSchema[idx]);
-              }
-            }
-          }
-          const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData,
-              updatedKeyedFormData: true
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
-       * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
-       * plain form data converted from the keyed data
-       *
-       * @param index - The index of the item to move
-       * @param newIndex - The index to where the item is to be moved
-       */
-      this.onReorderClick = (index, newIndex) => {
-        return (event) => {
-          if (event) {
-            event.preventDefault();
-            event.currentTarget.blur();
-          }
-          const { onChange, errorSchema } = this.props;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i == index) {
-                set(newErrorSchema, [newIndex], errorSchema[index]);
-              } else if (i == newIndex) {
-                set(newErrorSchema, [index], errorSchema[newIndex]);
-              } else {
-                set(newErrorSchema, [idx], errorSchema[i]);
-              }
-            }
-          }
-          const { keyedFormData } = this.state;
-          function reOrderArray() {
-            const _newKeyedFormData = keyedFormData.slice();
-            _newKeyedFormData.splice(index, 1);
-            _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-            return _newKeyedFormData;
-          }
-          const newKeyedFormData = reOrderArray();
-          this.setState(
-            {
-              keyedFormData: newKeyedFormData
-            },
-            () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-          );
-        };
-      };
-      /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
-       * `onChange` callback with the updated form data
-       *
-       * @param index - The index of the item being changed
-       */
-      this.onChangeForIndex = (index) => {
-        return (value, newErrorSchema, id) => {
-          const { formData, onChange, errorSchema } = this.props;
-          const arrayData = Array.isArray(formData) ? formData : [];
-          const newFormData = arrayData.map((item, i) => {
-            const jsonValue = typeof value === "undefined" ? null : value;
-            return index === i ? jsonValue : item;
-          });
-          onChange(
-            newFormData,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [index]: newErrorSchema
-            },
-            id
-          );
-        };
-      };
-      /** Callback handler used to change the value for a checkbox */
-      this.onSelectChange = (value) => {
-        const { onChange, idSchema } = this.props;
-        onChange(value, void 0, idSchema && idSchema.$id);
-      };
       const { formData = [] } = props;
       const keyedFormData = generateKeyedFormData(formData);
       this.state = {
@@ -286,6 +103,18 @@
       }
       return addable;
     }
+    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+     * that the schema is fixed and allows additional items.
+     */
+    _getNewFormDataRow = () => {
+      const { schema, registry } = this.props;
+      const { schemaUtils } = registry;
+      let itemSchema = schema.items;
+      if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
+        itemSchema = schema.additionalItems;
+      }
+      return schemaUtils.getDefaultFormState(itemSchema);
+    };
     /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
      * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
      * the state, and then returning `onChange()` with the plain form data converted from the keyed data
@@ -329,6 +158,177 @@
         () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
       );
     }
+    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+     * keyed data
+     *
+     * @param event - The event for the click
+     */
+    onAddClick = (event) => {
+      this._handleAddClick(event);
+    };
+    /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+     * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the add button is clicked
+     */
+    onAddIndexClick = (index) => {
+      return (event) => {
+        this._handleAddClick(event, index);
+      };
+    };
+    /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
+     * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the copy button is clicked
+     */
+    onCopyIndexClick = (index) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+        }
+        const { onChange, errorSchema } = this.props;
+        const { keyedFormData } = this.state;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i <= index) {
+              set(newErrorSchema, [i], errorSchema[idx]);
+            } else if (i > index) {
+              set(newErrorSchema, [i + 1], errorSchema[idx]);
+            }
+          }
+        }
+        const newKeyedFormDataRow = {
+          key: generateRowId(),
+          item: cloneDeep(keyedFormData[index].item)
+        };
+        const newKeyedFormData = [...keyedFormData];
+        if (index !== void 0) {
+          newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
+        } else {
+          newKeyedFormData.push(newKeyedFormDataRow);
+        }
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+     * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+     * from the keyed data
+     *
+     * @param index - The index at which the remove button is clicked
+     */
+    onDropIndexClick = (index) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+        }
+        const { onChange, errorSchema } = this.props;
+        const { keyedFormData } = this.state;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i < index) {
+              set(newErrorSchema, [i], errorSchema[idx]);
+            } else if (i > index) {
+              set(newErrorSchema, [i - 1], errorSchema[idx]);
+            }
+          }
+        }
+        const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+     * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+     * plain form data converted from the keyed data
+     *
+     * @param index - The index of the item to move
+     * @param newIndex - The index to where the item is to be moved
+     */
+    onReorderClick = (index, newIndex) => {
+      return (event) => {
+        if (event) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+        const { onChange, errorSchema } = this.props;
+        let newErrorSchema;
+        if (errorSchema) {
+          newErrorSchema = {};
+          for (const idx in errorSchema) {
+            const i = parseInt(idx);
+            if (i == index) {
+              set(newErrorSchema, [newIndex], errorSchema[index]);
+            } else if (i == newIndex) {
+              set(newErrorSchema, [index], errorSchema[newIndex]);
+            } else {
+              set(newErrorSchema, [idx], errorSchema[i]);
+            }
+          }
+        }
+        const { keyedFormData } = this.state;
+        function reOrderArray() {
+          const _newKeyedFormData = keyedFormData.slice();
+          _newKeyedFormData.splice(index, 1);
+          _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+          return _newKeyedFormData;
+        }
+        const newKeyedFormData = reOrderArray();
+        this.setState(
+          {
+            keyedFormData: newKeyedFormData
+          },
+          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        );
+      };
+    };
+    /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+     * `onChange` callback with the updated form data
+     *
+     * @param index - The index of the item being changed
+     */
+    onChangeForIndex = (index) => {
+      return (value, newErrorSchema, id) => {
+        const { formData, onChange, errorSchema } = this.props;
+        const arrayData = Array.isArray(formData) ? formData : [];
+        const newFormData = arrayData.map((item, i) => {
+          const jsonValue = typeof value === "undefined" ? null : value;
+          return index === i ? jsonValue : item;
+        });
+        onChange(
+          newFormData,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [index]: newErrorSchema
+          },
+          id
+        );
+      };
+    };
+    /** Callback handler used to change the value for a checkbox */
+    onSelectChange = (value) => {
+      const { onChange, idSchema } = this.props;
+      onChange(value, void 0, idSchema && idSchema.$id);
+    };
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     render() {
@@ -877,30 +877,6 @@
      */
     constructor(props) {
       super(props);
-      /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-       * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-       * the `onChange` handler.
-       *
-       * @param option - The new option value being selected
-       */
-      this.onOptionChange = (option) => {
-        const { selectedOption, retrievedOptions } = this.state;
-        const { formData, onChange, registry } = this.props;
-        const { schemaUtils } = registry;
-        const intOption = option !== void 0 ? parseInt(option, 10) : -1;
-        if (intOption === selectedOption) {
-          return;
-        }
-        const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
-        const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
-        let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-        if (newOption) {
-          newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
-        }
-        this.setState({ selectedOption: intOption }, () => {
-          onChange(newFormData, void 0, this.getFieldId());
-        });
-      };
       const {
         formData,
         options,
@@ -955,6 +931,30 @@
       const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
       return option;
     }
+    /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
+     * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
+     * the `onChange` handler.
+     *
+     * @param option - The new option value being selected
+     */
+    onOptionChange = (option) => {
+      const { selectedOption, retrievedOptions } = this.state;
+      const { formData, onChange, registry } = this.props;
+      const { schemaUtils } = registry;
+      const intOption = option !== void 0 ? parseInt(option, 10) : -1;
+      if (intOption === selectedOption) {
+        return;
+      }
+      const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
+      const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
+      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      if (newOption) {
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+      }
+      this.setState({ selectedOption: intOption }, () => {
+        onChange(newFormData, void 0, this.getFieldId());
+      });
+    };
     getFieldId() {
       const { idSchema, schema } = this.props;
       return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
@@ -1081,138 +1081,11 @@
   }
   var NumberField_default = NumberField;
   var ObjectField = class extends react.Component {
-    constructor() {
-      super(...arguments);
-      /** Set up the initial state */
-      this.state = {
-        wasPropertyKeyModified: false,
-        additionalProperties: {}
-      };
-      /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-       * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-       * formData.
-       *
-       * @param name - The name of the property
-       * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-       * @returns - The onPropertyChange callback for the `name` property
-       */
-      this.onPropertyChange = (name, addedByAdditionalProperties = false) => {
-        return (value, newErrorSchema, id) => {
-          const { formData, onChange, errorSchema } = this.props;
-          if (value === void 0 && addedByAdditionalProperties) {
-            value = "";
-          }
-          const newFormData = { ...formData, [name]: value };
-          onChange(
-            newFormData,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [name]: newErrorSchema
-            },
-            id
-          );
-        };
-      };
-      /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
-       * and calls the `onChange` callback with it
-       *
-       * @param key - The key for which the drop callback is desired
-       * @returns - The drop property click callback
-       */
-      this.onDropPropertyClick = (key) => {
-        return (event) => {
-          event.preventDefault();
-          const { onChange, formData } = this.props;
-          const copiedFormData = { ...formData };
-          unset(copiedFormData, key);
-          onChange(copiedFormData);
-        };
-      };
-      /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
-       * that is already not assigned is found.
-       *
-       * @param preferredKey - The preferred name of a new key
-       * @param [formData] - The form data in which to check if the desired key already exists
-       * @returns - The name of the next available key from `preferredKey`
-       */
-      this.getAvailableKey = (preferredKey, formData) => {
-        const { uiSchema, registry } = this.props;
-        const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-        let index = 0;
-        let newKey = preferredKey;
-        while (has(formData, newKey)) {
-          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
-        }
-        return newKey;
-      };
-      /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
-       * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
-       *
-       * @param oldValue - The old value of a field
-       * @returns - The key change callback function
-       */
-      this.onKeyChange = (oldValue) => {
-        return (value, newErrorSchema) => {
-          if (oldValue === value) {
-            return;
-          }
-          const { formData, onChange, errorSchema } = this.props;
-          value = this.getAvailableKey(value, formData);
-          const newFormData = {
-            ...formData
-          };
-          const newKeys = { [oldValue]: value };
-          const keyValues = Object.keys(newFormData).map((key) => {
-            const newKey = newKeys[key] || key;
-            return { [newKey]: newFormData[key] };
-          });
-          const renamedObj = Object.assign({}, ...keyValues);
-          this.setState({ wasPropertyKeyModified: true });
-          onChange(
-            renamedObj,
-            errorSchema && errorSchema && {
-              ...errorSchema,
-              [value]: newErrorSchema
-            }
-          );
-        };
-      };
-      /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
-       * default data for that field has been added to the formData.
-       *
-       * @param schema - The schema element to which the new property is being added
-       */
-      this.handleAddClick = (schema) => () => {
-        if (!schema.additionalProperties) {
-          return;
-        }
-        const { formData, onChange, registry } = this.props;
-        const newFormData = { ...formData };
-        let type = void 0;
-        let constValue = void 0;
-        let defaultValue = void 0;
-        if (isObject(schema.additionalProperties)) {
-          type = schema.additionalProperties.type;
-          constValue = schema.additionalProperties.const;
-          defaultValue = schema.additionalProperties.default;
-          let apSchema = schema.additionalProperties;
-          if (utils.REF_KEY in apSchema) {
-            const { schemaUtils } = registry;
-            apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
-            type = apSchema.type;
-            constValue = apSchema.const;
-            defaultValue = apSchema.default;
-          }
-          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
-            type = "object";
-          }
-        }
-        const newKey = this.getAvailableKey("newKey", newFormData);
-        const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
-        set(newFormData, newKey, newValue);
-        onChange(newFormData);
-      };
-    }
+    /** Set up the initial state */
+    state = {
+      wasPropertyKeyModified: false,
+      additionalProperties: {}
+    };
     /** Returns a flag indicating whether the `name` field is required in the object schema
      *
      * @param name - The name of the field to check for required-ness
@@ -1222,6 +1095,95 @@
       const { schema } = this.props;
       return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
     }
+    /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+     * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+     * formData.
+     *
+     * @param name - The name of the property
+     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+     * @returns - The onPropertyChange callback for the `name` property
+     */
+    onPropertyChange = (name, addedByAdditionalProperties = false) => {
+      return (value, newErrorSchema, id) => {
+        const { formData, onChange, errorSchema } = this.props;
+        if (value === void 0 && addedByAdditionalProperties) {
+          value = "";
+        }
+        const newFormData = { ...formData, [name]: value };
+        onChange(
+          newFormData,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [name]: newErrorSchema
+          },
+          id
+        );
+      };
+    };
+    /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
+     * and calls the `onChange` callback with it
+     *
+     * @param key - The key for which the drop callback is desired
+     * @returns - The drop property click callback
+     */
+    onDropPropertyClick = (key) => {
+      return (event) => {
+        event.preventDefault();
+        const { onChange, formData } = this.props;
+        const copiedFormData = { ...formData };
+        unset(copiedFormData, key);
+        onChange(copiedFormData);
+      };
+    };
+    /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
+     * that is already not assigned is found.
+     *
+     * @param preferredKey - The preferred name of a new key
+     * @param [formData] - The form data in which to check if the desired key already exists
+     * @returns - The name of the next available key from `preferredKey`
+     */
+    getAvailableKey = (preferredKey, formData) => {
+      const { uiSchema, registry } = this.props;
+      const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
+      let index = 0;
+      let newKey = preferredKey;
+      while (has(formData, newKey)) {
+        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+      }
+      return newKey;
+    };
+    /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+     * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+     *
+     * @param oldValue - The old value of a field
+     * @returns - The key change callback function
+     */
+    onKeyChange = (oldValue) => {
+      return (value, newErrorSchema) => {
+        if (oldValue === value) {
+          return;
+        }
+        const { formData, onChange, errorSchema } = this.props;
+        value = this.getAvailableKey(value, formData);
+        const newFormData = {
+          ...formData
+        };
+        const newKeys = { [oldValue]: value };
+        const keyValues = Object.keys(newFormData).map((key) => {
+          const newKey = newKeys[key] || key;
+          return { [newKey]: newFormData[key] };
+        });
+        const renamedObj = Object.assign({}, ...keyValues);
+        this.setState({ wasPropertyKeyModified: true });
+        onChange(
+          renamedObj,
+          errorSchema && errorSchema && {
+            ...errorSchema,
+            [value]: newErrorSchema
+          }
+        );
+      };
+    };
     /** Returns a default value to be used for a new additional schema property of the given `type`
      *
      * @param type - The type of the new additional schema property
@@ -1246,6 +1208,41 @@
           return translateString(utils.TranslatableString.NewStringDefault);
       }
     }
+    /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+     * default data for that field has been added to the formData.
+     *
+     * @param schema - The schema element to which the new property is being added
+     */
+    handleAddClick = (schema) => () => {
+      if (!schema.additionalProperties) {
+        return;
+      }
+      const { formData, onChange, registry } = this.props;
+      const newFormData = { ...formData };
+      let type = void 0;
+      let constValue = void 0;
+      let defaultValue = void 0;
+      if (isObject(schema.additionalProperties)) {
+        type = schema.additionalProperties.type;
+        constValue = schema.additionalProperties.const;
+        defaultValue = schema.additionalProperties.default;
+        let apSchema = schema.additionalProperties;
+        if (utils.REF_KEY in apSchema) {
+          const { schemaUtils } = registry;
+          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
+          type = apSchema.type;
+          constValue = apSchema.const;
+          defaultValue = apSchema.default;
+        }
+        if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
+          type = "object";
+        }
+      }
+      const newKey = this.getAvailableKey("newKey", newFormData);
+      const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+      set(newFormData, newKey, newValue);
+      onChange(newFormData);
+    };
     /** Renders the `ObjectField` from the given props
      */
     render() {
@@ -2988,6 +2985,10 @@
     };
   }
   var Form = class extends react.Component {
+    /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
+     * provide any possible type here
+     */
+    formElement;
     /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
      * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
      * state construction.
@@ -2996,268 +2997,6 @@
      */
     constructor(props) {
       super(props);
-      /** Returns the `formData` with only the elements specified in the `fields` list
-       *
-       * @param formData - The data for the `Form`
-       * @param fields - The fields to keep while filtering
-       */
-      this.getUsedFormData = (formData, fields2) => {
-        if (fields2.length === 0 && typeof formData !== "object") {
-          return formData;
-        }
-        const data = _pick(formData, fields2);
-        if (Array.isArray(formData)) {
-          return Object.keys(data).map((key) => data[key]);
-        }
-        return data;
-      };
-      /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
-       *
-       * @param pathSchema - The `PathSchema` object for the form
-       * @param [formData] - The form data to use while checking for empty objects/arrays
-       */
-      this.getFieldNames = (pathSchema, formData) => {
-        const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-          Object.keys(_obj).forEach((key) => {
-            if (typeof _obj[key] === "object") {
-              const newPaths = paths.map((path) => [...path, key]);
-              if (_obj[key][utils.RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== "") {
-                acc.push(_obj[key][utils.NAME_KEY]);
-              } else {
-                getAllPaths(_obj[key], acc, newPaths);
-              }
-            } else if (key === utils.NAME_KEY && _obj[key] !== "") {
-              paths.forEach((path) => {
-                const formValue = get3(formData, path);
-                if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
-                  acc.push(path);
-                }
-              });
-            }
-          });
-          return acc;
-        };
-        return getAllPaths(pathSchema);
-      };
-      /** Returns the `formData` after filtering to remove any extra data not in a form field
-       *
-       * @param formData - The data for the `Form`
-       * @returns The `formData` after omitting extra data
-       */
-      this.omitExtraData = (formData) => {
-        const { schema, schemaUtils } = this.state;
-        const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-        const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
-        const fieldNames = this.getFieldNames(pathSchema, formData);
-        const newFormData = this.getUsedFormData(formData, fieldNames);
-        return newFormData;
-      };
-      /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-       * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-       * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-       * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-       * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-       * callback will be called if specified with the updated state.
-       *
-       * @param formData - The new form data from a change to a field
-       * @param newErrorSchema - The new `ErrorSchema` based on the field change
-       * @param id - The id of the field that caused the change
-       */
-      this.onChange = (formData, newErrorSchema, id) => {
-        const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-        const { schemaUtils, schema } = this.state;
-        let retrievedSchema = this.state.retrievedSchema;
-        if (utils.isObject(formData) || Array.isArray(formData)) {
-          const newState = this.getStateFromProps(this.props, formData);
-          formData = newState.formData;
-          retrievedSchema = newState.retrievedSchema;
-        }
-        const mustValidate = !noValidate && liveValidate;
-        let state = { formData, schema };
-        let newFormData = formData;
-        if (omitExtraData === true && liveOmit === true) {
-          newFormData = this.omitExtraData(formData);
-          state = {
-            formData: newFormData
-          };
-        }
-        if (mustValidate) {
-          const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-          let errors = schemaValidation.errors;
-          let errorSchema = schemaValidation.errorSchema;
-          const schemaValidationErrors = errors;
-          const schemaValidationErrorSchema = errorSchema;
-          if (extraErrors) {
-            const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
-          }
-          if (newErrorSchema) {
-            const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-            errorSchema = utils.mergeObjects(errorSchema, filteredErrors, "preventDuplicates");
-          }
-          state = {
-            formData: newFormData,
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          };
-        } else if (!noValidate && newErrorSchema) {
-          const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
-          state = {
-            formData: newFormData,
-            errorSchema,
-            errors: utils.toErrorList(errorSchema)
-          };
-        }
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-      };
-      /**
-       * Callback function to handle reset form data.
-       * - Reset all fields with default values.
-       * - Reset validations and errors
-       *
-       */
-      this.reset = () => {
-        const { onChange } = this.props;
-        const newState = this.getStateFromProps(this.props, void 0);
-        const newFormData = newState.formData;
-        const state = {
-          formData: newFormData,
-          errorSchema: {},
-          errors: [],
-          schemaValidationErrors: [],
-          schemaValidationErrorSchema: {}
-        };
-        this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
-      };
-      /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was blurred
-       * @param data - The data associated with the field that was blurred
-       */
-      this.onBlur = (id, data) => {
-        const { onBlur } = this.props;
-        if (onBlur) {
-          onBlur(id, data);
-        }
-      };
-      /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was focused
-       * @param data - The data associated with the field that was focused
-       */
-      this.onFocus = (id, data) => {
-        const { onFocus } = this.props;
-        if (onFocus) {
-          onFocus(id, data);
-        }
-      };
-      /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
-       * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
-       * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
-       * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
-       * back the `onSubmit` callback if it was provided.
-       *
-       * @param event - The submit HTML form event
-       */
-      this.onSubmit = (event) => {
-        event.preventDefault();
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        event.persist();
-        const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
-        let { formData: newFormData } = this.state;
-        if (omitExtraData === true) {
-          newFormData = this.omitExtraData(newFormData);
-        }
-        if (noValidate || this.validateFormWithFormData(newFormData)) {
-          const errorSchema = extraErrors || {};
-          const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
-          this.setState(
-            {
-              formData: newFormData,
-              errors,
-              errorSchema,
-              schemaValidationErrors: [],
-              schemaValidationErrorSchema: {}
-            },
-            () => {
-              if (onSubmit) {
-                onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
-              }
-            }
-          );
-        }
-      };
-      /** Provides a function that can be used to programmatically submit the `Form` */
-      this.submit = () => {
-        if (this.formElement.current) {
-          const submitCustomEvent = new CustomEvent("submit", {
-            cancelable: true
-          });
-          submitCustomEvent.preventDefault();
-          this.formElement.current.dispatchEvent(submitCustomEvent);
-          this.formElement.current.requestSubmit();
-        }
-      };
-      /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
-       * If `onError` is provided, then it will be called with the list of errors.
-       *
-       * @param formData - The form data to validate
-       * @returns - True if the form is valid, false otherwise.
-       */
-      this.validateFormWithFormData = (formData) => {
-        const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-        const { errors: prevErrors } = this.state;
-        const schemaValidation = this.validate(formData);
-        let errors = schemaValidation.errors;
-        let errorSchema = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema;
-        const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
-        if (hasError) {
-          if (extraErrors) {
-            const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
-          }
-          if (focusOnFirstError) {
-            if (typeof focusOnFirstError === "function") {
-              focusOnFirstError(errors[0]);
-            } else {
-              this.focusOnError(errors[0]);
-            }
-          }
-          this.setState(
-            {
-              errors,
-              errorSchema,
-              schemaValidationErrors,
-              schemaValidationErrorSchema
-            },
-            () => {
-              if (onError) {
-                onError(errors);
-              } else {
-                console.error("Form validation failed", errors);
-              }
-            }
-          );
-        } else if (prevErrors.length > 0) {
-          this.setState({
-            errors: [],
-            errorSchema: {},
-            schemaValidationErrors: [],
-            schemaValidationErrorSchema: {}
-          });
-        }
-        return !hasError;
-      };
       if (!props.validator) {
         throw new Error("A validator is required for Form functionality to work");
       }
@@ -3501,6 +3240,62 @@
       }
       return null;
     }
+    /** Returns the `formData` with only the elements specified in the `fields` list
+     *
+     * @param formData - The data for the `Form`
+     * @param fields - The fields to keep while filtering
+     */
+    getUsedFormData = (formData, fields2) => {
+      if (fields2.length === 0 && typeof formData !== "object") {
+        return formData;
+      }
+      const data = _pick(formData, fields2);
+      if (Array.isArray(formData)) {
+        return Object.keys(data).map((key) => data[key]);
+      }
+      return data;
+    };
+    /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
+     *
+     * @param pathSchema - The `PathSchema` object for the form
+     * @param [formData] - The form data to use while checking for empty objects/arrays
+     */
+    getFieldNames = (pathSchema, formData) => {
+      const getAllPaths = (_obj, acc = [], paths = [[]]) => {
+        Object.keys(_obj).forEach((key) => {
+          if (typeof _obj[key] === "object") {
+            const newPaths = paths.map((path) => [...path, key]);
+            if (_obj[key][utils.RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== "") {
+              acc.push(_obj[key][utils.NAME_KEY]);
+            } else {
+              getAllPaths(_obj[key], acc, newPaths);
+            }
+          } else if (key === utils.NAME_KEY && _obj[key] !== "") {
+            paths.forEach((path) => {
+              const formValue = get3(formData, path);
+              if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
+                acc.push(path);
+              }
+            });
+          }
+        });
+        return acc;
+      };
+      return getAllPaths(pathSchema);
+    };
+    /** Returns the `formData` after filtering to remove any extra data not in a form field
+     *
+     * @param formData - The data for the `Form`
+     * @returns The `formData` after omitting extra data
+     */
+    omitExtraData = (formData) => {
+      const { schema, schemaUtils } = this.state;
+      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+      const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+      const fieldNames = this.getFieldNames(pathSchema, formData);
+      const newFormData = this.getUsedFormData(formData, fieldNames);
+      return newFormData;
+    };
     // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
     filterErrorsBasedOnSchema(schemaErrors, resolvedSchema, formData) {
       const { retrievedSchema, schemaUtils } = this.state;
@@ -3535,6 +3330,67 @@
       };
       return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
     }
+    /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
+     * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
+     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
+     * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
+     * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
+     * callback will be called if specified with the updated state.
+     *
+     * @param formData - The new form data from a change to a field
+     * @param newErrorSchema - The new `ErrorSchema` based on the field change
+     * @param id - The id of the field that caused the change
+     */
+    onChange = (formData, newErrorSchema, id) => {
+      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+      const { schemaUtils, schema } = this.state;
+      let retrievedSchema = this.state.retrievedSchema;
+      if (utils.isObject(formData) || Array.isArray(formData)) {
+        const newState = this.getStateFromProps(this.props, formData);
+        formData = newState.formData;
+        retrievedSchema = newState.retrievedSchema;
+      }
+      const mustValidate = !noValidate && liveValidate;
+      let state = { formData, schema };
+      let newFormData = formData;
+      if (omitExtraData === true && liveOmit === true) {
+        newFormData = this.omitExtraData(formData);
+        state = {
+          formData: newFormData
+        };
+      }
+      if (mustValidate) {
+        const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
+        let errors = schemaValidation.errors;
+        let errorSchema = schemaValidation.errorSchema;
+        const schemaValidationErrors = errors;
+        const schemaValidationErrorSchema = errorSchema;
+        if (extraErrors) {
+          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
+          errorSchema = merged.errorSchema;
+          errors = merged.errors;
+        }
+        if (newErrorSchema) {
+          const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
+          errorSchema = utils.mergeObjects(errorSchema, filteredErrors, "preventDuplicates");
+        }
+        state = {
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors,
+          schemaValidationErrorSchema
+        };
+      } else if (!noValidate && newErrorSchema) {
+        const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        state = {
+          formData: newFormData,
+          errorSchema,
+          errors: utils.toErrorList(errorSchema)
+        };
+      }
+      this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
+    };
     /**
      * If the retrievedSchema has changed the new retrievedSchema is returned.
      * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -3548,6 +3404,87 @@
       const isTheSame = utils.deepEquals(retrievedSchema, this.state?.retrievedSchema);
       return isTheSame ? this.state.retrievedSchema : retrievedSchema;
     }
+    /**
+     * Callback function to handle reset form data.
+     * - Reset all fields with default values.
+     * - Reset validations and errors
+     *
+     */
+    reset = () => {
+      const { onChange } = this.props;
+      const newState = this.getStateFromProps(this.props, void 0);
+      const newFormData = newState.formData;
+      const state = {
+        formData: newFormData,
+        errorSchema: {},
+        errors: [],
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {}
+      };
+      this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+    };
+    /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was blurred
+     * @param data - The data associated with the field that was blurred
+     */
+    onBlur = (id, data) => {
+      const { onBlur } = this.props;
+      if (onBlur) {
+        onBlur(id, data);
+      }
+    };
+    /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was focused
+     * @param data - The data associated with the field that was focused
+     */
+    onFocus = (id, data) => {
+      const { onFocus } = this.props;
+      if (onFocus) {
+        onFocus(id, data);
+      }
+    };
+    /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
+     * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
+     * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
+     * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
+     * back the `onSubmit` callback if it was provided.
+     *
+     * @param event - The submit HTML form event
+     */
+    onSubmit = (event) => {
+      event.preventDefault();
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      event.persist();
+      const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+      let { formData: newFormData } = this.state;
+      if (omitExtraData === true) {
+        newFormData = this.omitExtraData(newFormData);
+      }
+      if (noValidate || this.validateFormWithFormData(newFormData)) {
+        const errorSchema = extraErrors || {};
+        const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
+        this.setState(
+          {
+            formData: newFormData,
+            errors,
+            errorSchema,
+            schemaValidationErrors: [],
+            schemaValidationErrorSchema: {}
+          },
+          () => {
+            if (onSubmit) {
+              onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
+            }
+          }
+        );
+      }
+    };
     /** Returns the registry for the form */
     getRegistry() {
       const { translateString: customTranslateString, uiSchema = {} } = this.props;
@@ -3571,6 +3508,17 @@
         globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
       };
     }
+    /** Provides a function that can be used to programmatically submit the `Form` */
+    submit = () => {
+      if (this.formElement.current) {
+        const submitCustomEvent = new CustomEvent("submit", {
+          cancelable: true
+        });
+        submitCustomEvent.preventDefault();
+        this.formElement.current.dispatchEvent(submitCustomEvent);
+        this.formElement.current.requestSubmit();
+      }
+    };
     /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
      * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
      * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
@@ -3598,6 +3546,59 @@
         field.focus();
       }
     }
+    /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+     * If `onError` is provided, then it will be called with the list of errors.
+     *
+     * @param formData - The form data to validate
+     * @returns - True if the form is valid, false otherwise.
+     */
+    validateFormWithFormData = (formData) => {
+      const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+      const { errors: prevErrors } = this.state;
+      const schemaValidation = this.validate(formData);
+      let errors = schemaValidation.errors;
+      let errorSchema = schemaValidation.errorSchema;
+      const schemaValidationErrors = errors;
+      const schemaValidationErrorSchema = errorSchema;
+      const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
+      if (hasError) {
+        if (extraErrors) {
+          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
+          errorSchema = merged.errorSchema;
+          errors = merged.errors;
+        }
+        if (focusOnFirstError) {
+          if (typeof focusOnFirstError === "function") {
+            focusOnFirstError(errors[0]);
+          } else {
+            this.focusOnError(errors[0]);
+          }
+        }
+        this.setState(
+          {
+            errors,
+            errorSchema,
+            schemaValidationErrors,
+            schemaValidationErrorSchema
+          },
+          () => {
+            if (onError) {
+              onError(errors);
+            } else {
+              console.error("Form validation failed", errors);
+            }
+          }
+        );
+      } else if (prevErrors.length > 0) {
+        this.setState({
+          errors: [],
+          errorSchema: {},
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        });
+      }
+      return !hasError;
+    };
     /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
      * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
      * same way as would happen on form submission.