@rjsf/core 6.4.1 → 6.5.0

package/dist/index.esm.js

@@ -4,12 +4,12 @@ import {
   createSchemaUtils,
   deepEquals as deepEquals2,
   ErrorSchemaBuilder,
-  expandUiSchemaDefinitions,
   getChangedFields,
   getTemplate as getTemplate28,
   getUiOptions as getUiOptions21,
   isObject as isObject6,
   mergeObjects,
+  removeOptionalEmptyObjects,
   shouldRender as shouldRender2,
   SUBMIT_BTN_OPTIONS_KEY,
   toErrorList,
@@ -141,7 +141,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 = optionsList(itemsSchema, itemsUiSchema);
   const { widget = "select", title: uiTitle, ...options } = getUiOptions(uiSchema, globalUiOptions);
   const Widget = getWidget(schema, widget, widgets2);
@@ -474,6 +474,7 @@ function NormalArray(props) {
         name: name && `${name}-${index}`,
         registry,
         uiOptions,
+        parentUiSchema: uiSchema,
         hideError,
         readonly,
         disabled,
@@ -591,6 +592,7 @@ function FixedArray(props) {
         name: name && `${name}-${index}`,
         registry,
         uiOptions,
+        parentUiSchema: uiSchema,
         hideError,
         readonly,
         disabled,
@@ -1916,7 +1918,7 @@ function NumberField(props) {
 var NumberField_default = NumberField;
 
 // src/components/fields/ObjectField.tsx
-import { useCallback as useCallback4, useState as useState5 } from "react";
+import { useCallback as useCallback4, useRef, useState as useState5 } from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY as ANY_OF_KEY4,
@@ -2064,10 +2066,13 @@ function ObjectField(props) {
   } = props;
   const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
   const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+  const formDataRef = useRef(formData);
+  formDataRef.current = formData;
   const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
   const uiOptions = getUiOptions8(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+  const lastRenamedProperty = useRef({ previousKey: "", currentKey: void 0 });
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
   const renderOptionalField = shouldRenderOptionalField3(registry, schema, required, uiSchema);
@@ -2117,14 +2122,19 @@ function ObjectField(props) {
       const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
       set4(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 = useCallback4(
     (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) => {
@@ -2132,10 +2142,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 = useCallback4(
     (key) => {
@@ -2143,6 +2158,12 @@ function ObjectField(props) {
     },
     [onChange, childFieldPathId]
   );
+  const getStableKey = useCallback4((property) => {
+    if (lastRenamedProperty.current.currentKey === property) {
+      return lastRenamedProperty.current.previousKey;
+    }
+    return property;
+  }, []);
   if (!renderOptionalField || hasFormData) {
     try {
       const properties = Object.keys(schemaProperties);
@@ -2185,7 +2206,7 @@ function ObjectField(props) {
           readonly,
           hideError
         },
-        name2
+        getStableKey(name2)
       );
       return {
         content,
@@ -3491,7 +3512,8 @@ function WrapIfAdditionalTemplate(props) {
           id: `${id}-key`,
           onBlur: onKeyRenameBlur,
           defaultValue: label
-        }
+        },
+        label
       )
     ] }) }),
     /* @__PURE__ */ jsx38("div", { className: "form-additional form-group col-xs-5", children }),
@@ -3668,17 +3690,19 @@ var CheckboxWidget_default = CheckboxWidget;
 import { useCallback as useCallback9 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId
 } from "@rjsf/utils";
 import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 function CheckboxesWidget({
   id,
   disabled,
-  options: { inline = false, enumOptions, enumDisabled, emptyValue },
+  options,
   value,
   autofocus = false,
   readonly,
@@ -3687,14 +3711,16 @@ function CheckboxesWidget({
   onFocus,
   htmlName
 }) {
+  const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const handleBlur = useCallback9(
-    ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id, enumOptions, emptyValue]
+    ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, id, enumOptions, emptyValue, optionValueFormat]
   );
   const handleFocus = useCallback9(
-    ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id, enumOptions, emptyValue]
+    ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, id, enumOptions, emptyValue, optionValueFormat]
   );
   return /* @__PURE__ */ jsx42("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected(option.value, checkboxesValues);
@@ -3715,7 +3741,7 @@ function CheckboxesWidget({
           id: optionId(id, index),
           name: htmlName || id,
           checked,
-          value: String(index),
+          value: enumOptionValueEncoder(option.value, index, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
           onChange: handleChange,
@@ -3888,8 +3914,10 @@ function PasswordWidget(props) {
 import { useCallback as useCallback11 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds4,
+  enumOptionValueDecoder as enumOptionValueDecoder2,
+  enumOptionValueEncoder as enumOptionValueEncoder2,
   enumOptionsIsSelected as enumOptionsIsSelected2,
-  enumOptionsValueForIndex as enumOptionsValueForIndex2,
+  getOptionValueFormat as getOptionValueFormat2,
   optionId as optionId2
 } from "@rjsf/utils";
 import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3907,13 +3935,14 @@ function RadioWidget({
   htmlName
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat2(options);
   const handleBlur = useCallback11(
-    ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
-    [onBlur, enumOptions, emptyValue, id]
+    ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, enumOptions, emptyValue, id, optionValueFormat]
   );
   const handleFocus = useCallback11(
-    ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
-    [onFocus, enumOptions, emptyValue, id]
+    ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, enumOptions, emptyValue, id, optionValueFormat]
   );
   return /* @__PURE__ */ jsx50("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
     const checked = enumOptionsIsSelected2(option.value, value);
@@ -3929,7 +3958,7 @@ function RadioWidget({
           checked,
           name: htmlName || id,
           required,
-          value: String(i),
+          value: enumOptionValueEncoder2(option.value, i, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && i === 0,
           onChange: handleChange,
@@ -4068,8 +4097,10 @@ function RatingWidget({
 import { useCallback as useCallback13 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds5,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex as enumOptionsValueForIndex3
+  enumOptionSelectedValue,
+  enumOptionValueDecoder as enumOptionValueDecoder3,
+  enumOptionValueEncoder as enumOptionValueEncoder3,
+  getOptionValueFormat as getOptionValueFormat3
 } from "@rjsf/utils";
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
 function getValue(event, multiple) {
@@ -4096,28 +4127,29 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
+  const optionValueFormat = getOptionValueFormat3(options);
   const handleFocus = useCallback13(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
+      return onFocus(id, enumOptionValueDecoder3(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onFocus, id, multiple, enumOptions, optEmptyVal]
+    [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleBlur = useCallback13(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
+      return onBlur(id, enumOptionValueDecoder3(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onBlur, id, multiple, enumOptions, optEmptyVal]
+    [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleChange = useCallback13(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onChange(enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
+      return onChange(enumOptionValueDecoder3(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onChange, multiple, enumOptions, optEmptyVal]
+    [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
-  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
+  const selectValue = enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === void 0;
   return /* @__PURE__ */ jsxs22(
     "select",
@@ -4127,7 +4159,7 @@ function SelectWidget({
       multiple,
       role: "combobox",
       className: "form-control",
-      value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+      value: selectValue,
       required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -4139,7 +4171,7 @@ function SelectWidget({
         showPlaceholderOption && /* @__PURE__ */ jsx53("option", { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ jsx53("option", { value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ jsx53("option", { value: enumOptionValueEncoder3(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -4532,12 +4564,11 @@ var Form = class extends Component3 {
     }
     const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
     const registry = deepEquals2(state.registry, newRegistry) ? state.registry : newRegistry;
-    const expandedUiSchema = registry.uiSchemaDefinitions ? expandUiSchemaDefinitions(rootSchema, uiSchema, registry) : uiSchema;
     const fieldPathId = state.fieldPathId && state.fieldPathId?.[ID_KEY5] === registry.globalFormOptions.idPrefix ? state.fieldPathId : toFieldPathId6("", registry.globalFormOptions);
     const nextState = {
       schemaUtils,
       schema: rootSchema,
-      uiSchema: expandedUiSchema,
+      uiSchema,
       fieldPathId,
       formData,
       edit,
@@ -4611,7 +4642,7 @@ var Form = class extends Component3 {
       errors = merged.errors;
     }
     if (customErrors) {
-      const merged = validationDataMerge(schemaValidation, customErrors.ErrorSchema, true);
+      const merged = validationDataMerge({ errors, errorSchema }, customErrors.ErrorSchema, true);
       errorSchema = merged.errorSchema;
       errors = merged.errors;
     }
@@ -4719,7 +4750,7 @@ var Form = class extends Component3 {
     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] || "";
@@ -4748,6 +4779,18 @@ var Form = class extends Component3 {
         formData: newFormData
       };
     }
+    if (removeEmptyOptionalObjects) {
+      newFormData = removeOptionalEmptyObjects(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+      state = {
+        ...state,
+        formData: newFormData
+      };
+    }
     if (newErrorSchema) {
       const oldValidationError = !isRootPath ? _get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
       if (!_isEmpty(oldValidationError)) {
@@ -4848,24 +4891,33 @@ var Form = class extends Component3 {
    * @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 = 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,
@@ -4912,11 +4964,20 @@ var Form = class extends Component3 {
       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 = removeOptionalEmptyObjects(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+    }
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       const errorSchema = extraErrors || {};
       const errors = extraErrors ? toErrorList(extraErrors) : [];
@@ -5013,7 +5074,7 @@ var Form = class extends Component3 {
     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];
@@ -5081,11 +5142,20 @@ var Form = class extends Component3 {
    * @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 = 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