@rjsf/core 6.4.1 → 6.5.0

package/dist/core.umd.js

@@ -82,7 +82,7 @@
     } = props;
     const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry;
     const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
-    const itemsUiSchema = uiSchema?.items ?? {};
+    const itemsUiSchema = uiSchema?.items ?? uiSchema;
     const enumOptions = utils.optionsList(itemsSchema, itemsUiSchema);
     const { widget = "select", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
     const Widget = utils.getWidget(schema, widget, widgets2);
@@ -415,6 +415,7 @@
           name: name && `${name}-${index}`,
           registry,
           uiOptions,
+          parentUiSchema: uiSchema,
           hideError,
           readonly,
           disabled,
@@ -532,6 +533,7 @@
           name: name && `${name}-${index}`,
           registry,
           uiOptions,
+          parentUiSchema: uiSchema,
           hideError,
           readonly,
           disabled,
@@ -1857,10 +1859,13 @@
     } = props;
     const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const formDataRef = react.useRef(formData);
+    formDataRef.current = formData;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+    const lastRenamedProperty = react.useRef({ previousKey: "", currentKey: void 0 });
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -1910,14 +1915,19 @@
         const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
         set(newFormData, newKey, newValue);
       }
+      if (lastRenamedProperty.current.previousKey === newKey) {
+        lastRenamedProperty.current.currentKey = newKey;
+        lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
+      }
       onChange(newFormData, childFieldPathId.path);
     }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
     const handleKeyRename = react.useCallback(
       (oldKey, newKey) => {
         if (oldKey !== newKey) {
-          const actualNewKey = getAvailableKey(newKey, formData);
+          const currentFormData = formDataRef.current;
+          const actualNewKey = getAvailableKey(newKey, currentFormData);
           const newFormData = {
-            ...formData
+            ...currentFormData
           };
           const newKeys = { [oldKey]: actualNewKey };
           const keyValues = Object.keys(newFormData).map((key) => {
@@ -1925,10 +1935,15 @@
             return { [newKey2]: newFormData[key] };
           });
           const renamedObj = Object.assign({}, ...keyValues);
+          formDataRef.current = renamedObj;
+          if (oldKey !== lastRenamedProperty.current.currentKey) {
+            lastRenamedProperty.current.previousKey = oldKey;
+          }
+          lastRenamedProperty.current.currentKey = actualNewKey;
           onChange(renamedObj, childFieldPathId.path);
         }
       },
-      [formData, onChange, childFieldPathId, getAvailableKey]
+      [onChange, childFieldPathId, getAvailableKey]
     );
     const handleRemoveProperty = react.useCallback(
       (key) => {
@@ -1936,6 +1951,12 @@
       },
       [onChange, childFieldPathId]
     );
+    const getStableKey = react.useCallback((property) => {
+      if (lastRenamedProperty.current.currentKey === property) {
+        return lastRenamedProperty.current.previousKey;
+      }
+      return property;
+    }, []);
     if (!renderOptionalField || hasFormData) {
       try {
         const properties = Object.keys(schemaProperties);
@@ -1978,7 +1999,7 @@
             readonly,
             hideError
           },
-          name2
+          getStableKey(name2)
         );
         return {
           content,
@@ -3085,7 +3106,8 @@
             id: `${id}-key`,
             onBlur: onKeyRenameBlur,
             defaultValue: label
-          }
+          },
+          label
         )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-additional form-group col-xs-5", children }),
@@ -3237,7 +3259,7 @@
   function CheckboxesWidget({
     id,
     disabled,
-    options: { inline = false, enumOptions, enumDisabled, emptyValue },
+    options,
     value,
     autofocus = false,
     readonly,
@@ -3246,14 +3268,16 @@
     onFocus,
     htmlName
   }) {
+    const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id, enumOptions, emptyValue]
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onBlur, id, enumOptions, emptyValue, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id, enumOptions, emptyValue]
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onFocus, id, enumOptions, emptyValue, optionValueFormat]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
@@ -3274,7 +3298,7 @@
             id: utils.optionId(id, index),
             name: htmlName || id,
             checked,
-            value: String(index),
+            value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
             disabled: disabled || itemDisabled || readonly,
             autoFocus: autofocus && index === 0,
             onChange: handleChange,
@@ -3419,13 +3443,14 @@
     htmlName
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, enumOptions, emptyValue, id]
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onBlur, enumOptions, emptyValue, id, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, enumOptions, emptyValue, id]
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onFocus, enumOptions, emptyValue, id, optionValueFormat]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
       const checked = utils.enumOptionsIsSelected(option.value, value);
@@ -3441,7 +3466,7 @@
             checked,
             name: htmlName || id,
             required,
-            value: String(i),
+            value: utils.enumOptionValueEncoder(option.value, i, optionValueFormat),
             disabled: disabled || itemDisabled || readonly,
             autoFocus: autofocus && i === 0,
             onChange: handleChange,
@@ -3592,28 +3617,29 @@
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const handleFocus = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onFocus(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onFocus, id, multiple, enumOptions, optEmptyVal]
+      [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
     const handleBlur = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onBlur(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onBlur, id, multiple, enumOptions, optEmptyVal]
+      [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
     const handleChange = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onChange(utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onChange, multiple, enumOptions, optEmptyVal]
+      [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
+    const selectValue = utils.enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
     const showPlaceholderOption = !multiple && schema.default === void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
@@ -3623,7 +3649,7 @@
         multiple,
         role: "combobox",
         className: "form-control",
-        value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+        value: selectValue,
         required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
@@ -3635,7 +3661,7 @@
           showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
           Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
             const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i), disabled: disabled2, children: label }, i);
+            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: utils.enumOptionValueEncoder(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
           })
         ]
       }
@@ -4003,12 +4029,11 @@
       }
       const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
       const registry = utils.deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
-      const expandedUiSchema = registry.uiSchemaDefinitions ? utils.expandUiSchemaDefinitions(rootSchema, uiSchema, registry) : uiSchema;
       const fieldPathId = state.fieldPathId && state.fieldPathId?.[utils.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : utils.toFieldPathId("", registry.globalFormOptions);
       const nextState = {
         schemaUtils,
         schema: rootSchema,
-        uiSchema: expandedUiSchema,
+        uiSchema,
         fieldPathId,
         formData,
         edit,
@@ -4082,7 +4107,7 @@
         errors = merged.errors;
       }
       if (customErrors) {
-        const merged = utils.validationDataMerge(schemaValidation, customErrors.ErrorSchema, true);
+        const merged = utils.validationDataMerge({ errors, errorSchema }, customErrors.ErrorSchema, true);
         errorSchema = merged.errorSchema;
         errors = merged.errors;
       }
@@ -4190,7 +4215,7 @@
       this._isProcessingUserChange = true;
       const { newValue, path, id } = this.pendingChanges[0];
       const { newErrorSchema } = this.pendingChanges[0];
-      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } = this.props;
       const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
       let { customErrors, errorSchema: originalErrorSchema } = this.state;
       const rootPathId = fieldPathId.path[0] || "";
@@ -4219,6 +4244,18 @@
           formData: newFormData
         };
       }
+      if (removeEmptyOptionalObjects) {
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+        state = {
+          ...state,
+          formData: newFormData
+        };
+      }
       if (newErrorSchema) {
         const oldValidationError = !isRootPath ? get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
         if (!isEmpty(oldValidationError)) {
@@ -4319,24 +4356,33 @@
      * @param data - The data associated with the field that was blurred
      */
     onBlur = (id, data) => {
-      const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
+      const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
       if (onBlur) {
         onBlur(id, data);
       }
       if (omitExtraData === true && liveOmit === "onBlur" || liveValidate === "onBlur") {
         const { onChange, extraErrors } = this.props;
-        const { formData } = this.state;
+        const { formData, schemaUtils, schema } = this.state;
         let newFormData = formData;
         let state = { formData: newFormData };
         if (omitExtraData === true && liveOmit === "onBlur") {
           newFormData = this.omitExtraData(formData);
           state = { formData: newFormData };
         }
+        if (removeEmptyOptionalObjects) {
+          newFormData = utils.removeOptionalEmptyObjects(
+            schemaUtils.getValidator(),
+            schema,
+            schemaUtils.getRootSchema(),
+            newFormData
+          );
+          state = { ...state, formData: newFormData };
+        }
         if (liveValidate === "onBlur") {
-          const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+          const { schema: schema2, schemaUtils: schemaUtils2, errorSchema, customErrors, retrievedSchema } = this.state;
           const liveValidation = this.liveValidate(
-            schema,
-            schemaUtils,
+            schema2,
+            schemaUtils2,
             errorSchema,
             newFormData,
             extraErrors,
@@ -4383,11 +4429,20 @@
         return;
       }
       event.persist();
-      const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+      const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
       let { formData: newFormData } = this.state;
       if (omitExtraData === true) {
         newFormData = this.omitExtraData(newFormData);
       }
+      if (removeEmptyOptionalObjects) {
+        const { schemaUtils, schema } = this.state;
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+      }
       if (noValidate || this.validateFormWithFormData(newFormData)) {
         const errorSchema = extraErrors || {};
         const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
@@ -4484,7 +4539,7 @@
       const elementId = path.join(idSeparator);
       let field = this.formElement.current.elements[elementId];
       if (!field) {
-        field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
+        field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
       }
       if (field && field.length) {
         field = field[0];
@@ -4552,11 +4607,20 @@
      * @returns - True if the form is valid, false otherwise.
      */
     validateForm() {
-      const { omitExtraData } = this.props;
+      const { omitExtraData, removeEmptyOptionalObjects } = this.props;
       let { formData: newFormData } = this.state;
       if (omitExtraData === true) {
         newFormData = this.omitExtraData(newFormData);
       }
+      if (removeEmptyOptionalObjects) {
+        const { schemaUtils, schema } = this.state;
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+      }
       return this.validateFormWithFormData(newFormData);
     }
     /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if