@rjsf/core 5.24.4 → 5.24.7

package/dist/index.esm.js

@@ -72,189 +72,6 @@ var ArrayField = class extends Component {
    */
   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 (isFixedItems(schema) && 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 = {
@@ -329,6 +146,18 @@ var ArrayField = class extends Component {
     }
     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 (isFixedItems(schema) && 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
@@ -372,6 +201,177 @@ var ArrayField = class extends Component {
       () => 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() {
@@ -948,30 +948,6 @@ var AnyOfField = class extends Component2 {
    */
   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,
@@ -1026,6 +1002,30 @@ var AnyOfField = class extends Component2 {
     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"}`;
@@ -1178,138 +1178,11 @@ import set2 from "lodash/set";
 import unset from "lodash/unset";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var ObjectField = class extends Component3 {
-  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 = "-" } = getUiOptions4(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 (isObject3(schema.additionalProperties)) {
-        type = schema.additionalProperties.type;
-        constValue = schema.additionalProperties.const;
-        defaultValue = schema.additionalProperties.default;
-        let apSchema = schema.additionalProperties;
-        if (REF_KEY in apSchema) {
-          const { schemaUtils } = registry;
-          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
-          type = apSchema.type;
-          constValue = apSchema.const;
-          defaultValue = apSchema.default;
-        }
-        if (!type && (ANY_OF_KEY2 in apSchema || ONE_OF_KEY2 in apSchema)) {
-          type = "object";
-        }
-      }
-      const newKey = this.getAvailableKey("newKey", newFormData);
-      const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
-      set2(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
@@ -1319,6 +1192,95 @@ var ObjectField = class extends Component3 {
     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 = "-" } = getUiOptions4(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
@@ -1343,6 +1305,41 @@ var ObjectField = class extends Component3 {
         return translateString(TranslatableString4.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 (isObject3(schema.additionalProperties)) {
+      type = schema.additionalProperties.type;
+      constValue = schema.additionalProperties.const;
+      defaultValue = schema.additionalProperties.default;
+      let apSchema = schema.additionalProperties;
+      if (REF_KEY in apSchema) {
+        const { schemaUtils } = registry;
+        apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
+        type = apSchema.type;
+        constValue = apSchema.const;
+        defaultValue = apSchema.default;
+      }
+      if (!type && (ANY_OF_KEY2 in apSchema || ONE_OF_KEY2 in apSchema)) {
+        type = "object";
+      }
+    }
+    const newKey = this.getAvailableKey("newKey", newFormData);
+    const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+    set2(newFormData, newKey, newValue);
+    onChange(newFormData);
+  };
   /** Renders the `ObjectField` from the given props
    */
   render() {
@@ -3342,6 +3339,10 @@ function getDefaultRegistry() {
 // src/components/Form.tsx
 import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 var Form = class extends Component5 {
+  /** 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.
@@ -3350,268 +3351,6 @@ var Form = class extends Component5 {
    */
   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][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
-              acc.push(_obj[key][NAME_KEY]);
-            } else {
-              getAllPaths(_obj[key], acc, newPaths);
-            }
-          } else if (key === NAME_KEY && _obj[key] !== "") {
-            paths.forEach((path) => {
-              const formValue = _get(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 (isObject5(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 = validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (newErrorSchema) {
-          const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-          errorSchema = mergeObjects2(errorSchema, filteredErrors, "preventDuplicates");
-        }
-        state = {
-          formData: newFormData,
-          errors,
-          errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        };
-      } else if (!noValidate && newErrorSchema) {
-        const errorSchema = extraErrors ? mergeObjects2(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
-        state = {
-          formData: newFormData,
-          errorSchema,
-          errors: 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 ? 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 = 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");
     }
@@ -3855,6 +3594,62 @@ var Form = class extends Component5 {
     }
     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][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
+            acc.push(_obj[key][NAME_KEY]);
+          } else {
+            getAllPaths(_obj[key], acc, newPaths);
+          }
+        } else if (key === NAME_KEY && _obj[key] !== "") {
+          paths.forEach((path) => {
+            const formValue = _get(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;
@@ -3889,6 +3684,67 @@ var Form = class extends Component5 {
     };
     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 (isObject5(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 = validationDataMerge(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+      if (newErrorSchema) {
+        const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
+        errorSchema = mergeObjects2(errorSchema, filteredErrors, "preventDuplicates");
+      }
+      state = {
+        formData: newFormData,
+        errors,
+        errorSchema,
+        schemaValidationErrors,
+        schemaValidationErrorSchema
+      };
+    } else if (!noValidate && newErrorSchema) {
+      const errorSchema = extraErrors ? mergeObjects2(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+      state = {
+        formData: newFormData,
+        errorSchema,
+        errors: 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.
@@ -3902,6 +3758,87 @@ var Form = class extends Component5 {
     const isTheSame = deepEquals3(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 ? 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;
@@ -3925,6 +3862,17 @@ var Form = class extends Component5 {
       globalUiOptions: uiSchema[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.
@@ -3952,6 +3900,59 @@ var Form = class extends Component5 {
       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 = 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.