@rjsf/core 6.4.1 → 6.5.0

package/dist/index.cjs

@@ -139,7 +139,7 @@ function ArrayAsMultiSelect(props) {
   } = 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 = (0, import_utils.optionsList)(itemsSchema, itemsUiSchema);
   const { widget = "select", title: uiTitle, ...options } = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions);
   const Widget = (0, import_utils.getWidget)(schema, widget, widgets2);
@@ -472,6 +472,7 @@ function NormalArray(props) {
         name: name && `${name}-${index}`,
         registry,
         uiOptions,
+        parentUiSchema: uiSchema,
         hideError,
         readonly,
         disabled,
@@ -589,6 +590,7 @@ function FixedArray(props) {
         name: name && `${name}-${index}`,
         registry,
         uiOptions,
+        parentUiSchema: uiSchema,
         hideError,
         readonly,
         disabled,
@@ -1986,10 +1988,13 @@ function ObjectField(props) {
   } = props;
   const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
   const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+  const formDataRef = (0, import_react8.useRef)(formData);
+  formDataRef.current = formData;
   const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
   const uiOptions = (0, import_utils9.getUiOptions)(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+  const lastRenamedProperty = (0, import_react8.useRef)({ previousKey: "", currentKey: void 0 });
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
   const renderOptionalField = (0, import_utils9.shouldRenderOptionalField)(registry, schema, required, uiSchema);
@@ -2039,14 +2044,19 @@ function ObjectField(props) {
       const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
       (0, import_set4.default)(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 = (0, import_react8.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) => {
@@ -2054,10 +2064,15 @@ function ObjectField(props) {
           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 = (0, import_react8.useCallback)(
     (key) => {
@@ -2065,6 +2080,12 @@ function ObjectField(props) {
     },
     [onChange, childFieldPathId]
   );
+  const getStableKey = (0, import_react8.useCallback)((property) => {
+    if (lastRenamedProperty.current.currentKey === property) {
+      return lastRenamedProperty.current.previousKey;
+    }
+    return property;
+  }, []);
   if (!renderOptionalField || hasFormData) {
     try {
       const properties = Object.keys(schemaProperties);
@@ -2107,7 +2128,7 @@ function ObjectField(props) {
           readonly,
           hideError
         },
-        name2
+        getStableKey(name2)
       );
       return {
         content,
@@ -3343,7 +3364,8 @@ function WrapIfAdditionalTemplate(props) {
           id: `${id}-key`,
           onBlur: onKeyRenameBlur,
           defaultValue: label
-        }
+        },
+        label
       )
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "form-additional form-group col-xs-5", children }),
@@ -3512,7 +3534,7 @@ var import_jsx_runtime42 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
   disabled,
-  options: { inline = false, enumOptions, enumDisabled, emptyValue },
+  options,
   value,
   autofocus = false,
   readonly,
@@ -3521,14 +3543,16 @@ function CheckboxesWidget({
   onFocus,
   htmlName
 }) {
+  const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = (0, import_utils35.getOptionValueFormat)(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const handleBlur = (0, import_react14.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils35.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id, enumOptions, emptyValue]
+    ({ target }) => onBlur(id, (0, import_utils35.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, id, enumOptions, emptyValue, optionValueFormat]
   );
   const handleFocus = (0, import_react14.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils35.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id, enumOptions, emptyValue]
+    ({ target }) => onFocus(id, (0, import_utils35.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, id, enumOptions, emptyValue, optionValueFormat]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils35.enumOptionsIsSelected)(option.value, checkboxesValues);
@@ -3549,7 +3573,7 @@ function CheckboxesWidget({
           id: (0, import_utils35.optionId)(id, index),
           name: htmlName || id,
           checked,
-          value: String(index),
+          value: (0, import_utils35.enumOptionValueEncoder)(option.value, index, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
           onChange: handleChange,
@@ -3728,13 +3752,14 @@ function RadioWidget({
   htmlName
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = (0, import_utils42.getOptionValueFormat)(options);
   const handleBlur = (0, import_react16.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils42.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, enumOptions, emptyValue, id]
+    ({ target }) => onBlur(id, (0, import_utils42.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, enumOptions, emptyValue, id, optionValueFormat]
   );
   const handleFocus = (0, import_react16.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils42.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, enumOptions, emptyValue, id]
+    ({ target }) => onFocus(id, (0, import_utils42.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, enumOptions, emptyValue, id, optionValueFormat]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
     const checked = (0, import_utils42.enumOptionsIsSelected)(option.value, value);
@@ -3750,7 +3775,7 @@ function RadioWidget({
           checked,
           name: htmlName || id,
           required,
-          value: String(i),
+          value: (0, import_utils42.enumOptionValueEncoder)(option.value, i, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && i === 0,
           onChange: handleChange,
@@ -3913,28 +3938,29 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
+  const optionValueFormat = (0, import_utils43.getOptionValueFormat)(options);
   const handleFocus = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, (0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onFocus(id, (0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onFocus, id, multiple, enumOptions, optEmptyVal]
+    [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleBlur = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, (0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onBlur(id, (0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onBlur, id, multiple, enumOptions, optEmptyVal]
+    [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleChange = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onChange((0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onChange((0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onChange, multiple, enumOptions, optEmptyVal]
+    [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
-  const selectedIndexes = (0, import_utils43.enumOptionsIndexForValue)(value, enumOptions, multiple);
+  const selectValue = (0, import_utils43.enumOptionSelectedValue)(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "select",
@@ -3944,7 +3970,7 @@ function SelectWidget({
       multiple,
       role: "combobox",
       className: "form-control",
-      value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+      value: selectValue,
       required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -3956,7 +3982,7 @@ function SelectWidget({
         showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: (0, import_utils43.enumOptionValueEncoder)(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -4349,12 +4375,11 @@ var Form = class extends import_react21.Component {
     }
     const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
     const registry = (0, import_utils50.deepEquals)(state.registry, newRegistry) ? state.registry : newRegistry;
-    const expandedUiSchema = registry.uiSchemaDefinitions ? (0, import_utils50.expandUiSchemaDefinitions)(rootSchema, uiSchema, registry) : uiSchema;
     const fieldPathId = state.fieldPathId && state.fieldPathId?.[import_utils50.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : (0, import_utils50.toFieldPathId)("", registry.globalFormOptions);
     const nextState = {
       schemaUtils,
       schema: rootSchema,
-      uiSchema: expandedUiSchema,
+      uiSchema,
       fieldPathId,
       formData,
       edit,
@@ -4428,7 +4453,7 @@ var Form = class extends import_react21.Component {
       errors = merged.errors;
     }
     if (customErrors) {
-      const merged = (0, import_utils50.validationDataMerge)(schemaValidation, customErrors.ErrorSchema, true);
+      const merged = (0, import_utils50.validationDataMerge)({ errors, errorSchema }, customErrors.ErrorSchema, true);
       errorSchema = merged.errorSchema;
       errors = merged.errors;
     }
@@ -4536,7 +4561,7 @@ var Form = class extends import_react21.Component {
     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] || "";
@@ -4565,6 +4590,18 @@ var Form = class extends import_react21.Component {
         formData: newFormData
       };
     }
+    if (removeEmptyOptionalObjects) {
+      newFormData = (0, import_utils50.removeOptionalEmptyObjects)(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+      state = {
+        ...state,
+        formData: newFormData
+      };
+    }
     if (newErrorSchema) {
       const oldValidationError = !isRootPath ? (0, import_get5.default)(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
       if (!(0, import_isEmpty4.default)(oldValidationError)) {
@@ -4665,24 +4702,33 @@ var Form = class extends import_react21.Component {
    * @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 = (0, import_utils50.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,
@@ -4729,11 +4775,20 @@ var Form = class extends import_react21.Component {
       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 = (0, import_utils50.removeOptionalEmptyObjects)(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+    }
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       const errorSchema = extraErrors || {};
       const errors = extraErrors ? (0, import_utils50.toErrorList)(extraErrors) : [];
@@ -4830,7 +4885,7 @@ var Form = class extends import_react21.Component {
     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];
@@ -4898,11 +4953,20 @@ var Form = class extends import_react21.Component {
    * @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 = (0, import_utils50.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