@rjsf/core 6.6.2 → 6.7.0

package/dist/core.umd.js

@@ -898,6 +898,33 @@
     );
   }
   var BooleanField_default = BooleanField;
+  function CyclicSchemaField(props) {
+    const [expanded, setExpanded] = react.useState(false);
+    const { name, registry, schema, uiSchema, fieldPathId } = props;
+    const { globalUiOptions } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const CyclicSchemaExpandTemplate2 = utils.getTemplate(
+      "CyclicSchemaExpandTemplate",
+      registry,
+      uiOptions
+    );
+    if (!expanded) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CyclicSchemaExpandTemplate2,
+        {
+          registry,
+          schema,
+          uiSchema,
+          name,
+          fieldPathId,
+          onExpand: () => setExpanded(true)
+        }
+      );
+    }
+    const { fields: fields2 } = registry;
+    const { SchemaField: SchemaField2 } = fields2;
+    return /* @__PURE__ */ jsxRuntime.jsx(SchemaField2, { ...props, schema: { ...schema, [utils.RJSF_REF_CYCLE_KEY]: false } });
+  }
   function getFallbackTypeSelectionSchema(title) {
     return {
       type: "string",
@@ -1523,217 +1550,179 @@
       }
     );
   }
-  var AnyOfField = class extends react.Component {
-    /** Flag to skip the formData-change-driven option recalculation when the user just selected an option.
-     * Set to true in the setState callback of onOptionChange (after onChange is called), consumed and reset in
-     * componentDidUpdate. This prevents the matching-option recalculation from overriding a user's explicit choice
-     * when getDefaultFormState populates undefined properties that make deepEquals see a false formData change.
-     */
-    skipNextOptionRecalculation = false;
-    /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
-     *
-     * @param props - The `FieldProps` for this template
-     */
-    constructor(props) {
-      super(props);
-      const {
-        formData,
-        options,
-        registry: { schemaUtils }
-      } = this.props;
-      const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-      this.state = {
-        retrievedOptions,
-        selectedOption: this.getMatchingOption(0, formData, retrievedOptions)
-      };
-    }
-    /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
-     * currently selected option based on the overall `formData`
-     *
-     * @param prevProps - The previous `FieldProps` for this template
-     * @param prevState - The previous `AnyOfFieldState` for this template
-     */
-    componentDidUpdate(prevProps, prevState) {
-      const { formData, options, fieldPathId } = this.props;
-      const { selectedOption } = this.state;
-      let newState = this.state;
-      if (!utils.deepEquals(prevProps.options, options)) {
-        const {
-          registry: { schemaUtils }
-        } = this.props;
-        const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-        newState = { selectedOption, retrievedOptions };
+  function AnyOfField(props) {
+    const {
+      name,
+      disabled = false,
+      errorSchema = {},
+      formData,
+      fieldPathId,
+      onBlur,
+      onChange,
+      onFocus,
+      options,
+      readonly,
+      registry,
+      required = false,
+      schema,
+      uiSchema
+    } = props;
+    const { schemaUtils } = registry;
+    const formDataHash = utils.hashObject(formData ?? null);
+    const retrievedOptions = react.useMemo(
+      () => options.map((opt) => schemaUtils.retrieveSchema(opt, formData)),
+      // oxlint-disable-next-line react-hooks/exhaustive-deps -- formDataHash is the value-stable proxy for formData
+      [options, schemaUtils, formDataHash]
+    );
+    const [selectedOption, setSelectedOption] = react.useState(() => {
+      const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+      return schemaUtils.getClosestMatchingOption(formData, retrievedOptions, 0, discriminator);
+    });
+    const skipNextOptionRecalculation = react.useRef(false);
+    const prevFormDataRef = react.useRef(formData);
+    const prevFieldIdRef = react.useRef(fieldPathId.$id);
+    react.useEffect(() => {
+      const prevFormData = prevFormDataRef.current;
+      const prevFieldId = prevFieldIdRef.current;
+      prevFormDataRef.current = formData;
+      prevFieldIdRef.current = fieldPathId.$id;
+      if (!utils.deepEquals(formData, prevFormData) && fieldPathId.$id === prevFieldId) {
+        if (skipNextOptionRecalculation.current) {
+          skipNextOptionRecalculation.current = false;
+          return;
+        }
+        const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+        const matchingOption = schemaUtils.getClosestMatchingOption(
+          formData,
+          retrievedOptions,
+          selectedOption,
+          discriminator
+        );
+        if (matchingOption !== selectedOption) {
+          setSelectedOption(matchingOption);
+        }
       }
-      if (!utils.deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
-        if (this.skipNextOptionRecalculation) {
-          this.skipNextOptionRecalculation = false;
-        } else {
-          const { retrievedOptions } = newState;
-          const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-          if (prevState && matchingOption !== selectedOption) {
-            newState = { selectedOption: matchingOption, retrievedOptions };
-          }
+    });
+    const fieldId = `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+    const onOptionChange = react.useCallback(
+      (option2) => {
+        if (disabled || readonly) {
+          return;
+        }
+        const intOption = option2 !== void 0 ? parseInt(option2, 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");
+        }
+        setSelectedOption(intOption);
+        skipNextOptionRecalculation.current = true;
+        onChange(newFormData, fieldPathId.path, void 0, fieldId);
+      },
+      // setSelectedOption is stable (guaranteed by useState); skipNextOptionRecalculation is a ref
+      [selectedOption, retrievedOptions, disabled, readonly, schemaUtils, formData, fieldPathId, onChange, fieldId]
+    );
+    const { widgets: widgets2, fields: fields2, translateString, globalUiOptions } = registry;
+    const { SchemaField: SchemaFieldComponent } = fields2;
+    const MultiSchemaFieldTemplate2 = utils.getTemplate(
+      "MultiSchemaFieldTemplate",
+      registry,
+      globalUiOptions
+    );
+    const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = utils.isFormDataAvailable(formData);
+    const {
+      widget = "select",
+      placeholder,
+      autofocus,
+      autocomplete,
+      title = schema.title,
+      ...uiOptions
+    } = utils.getUiOptions(uiSchema, globalUiOptions);
+    const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
+    const rawErrors = get(errorSchema, utils.ERRORS_KEY, []);
+    const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
+    let optionSchema;
+    if (option) {
+      const { required: schemaRequired, type: schemaType } = schema;
+      const parentProps = {};
+      if (schemaRequired) {
+        parentProps.required = schemaRequired;
       }
-      if (newState !== this.state) {
-        this.setState(newState);
+      if (schemaType !== void 0 && !("type" in option)) {
+        parentProps.type = schemaType;
       }
+      optionSchema = Object.keys(parentProps).length > 0 ? utils.mergeSchemas(parentProps, option) : option;
     }
-    /** Determines the best matching option for the given `formData` and `options`.
-     *
-     * @param formData - The new formData
-     * @param options - The list of options to choose from
-     * @return - The index of the `option` that best matches the `formData`
-     */
-    getMatchingOption(selectedOption, formData, options) {
-      const {
-        schema,
-        registry: { schemaUtils }
-      } = this.props;
-      const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
-      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 { disabled = false, formData, onChange, readonly = false, registry, fieldPathId } = this.props;
-      if (disabled || readonly) {
-        return;
-      }
-      const { schemaUtils } = registry;
-      const intOption = option !== void 0 ? parseInt(option, 10) : -1;
-      if (intOption === selectedOption) {
-        return;
+    let optionsUiSchema = [];
+    if (utils.ONE_OF_KEY in schema && uiSchema && utils.ONE_OF_KEY in uiSchema) {
+      if (Array.isArray(uiSchema[utils.ONE_OF_KEY])) {
+        optionsUiSchema = uiSchema[utils.ONE_OF_KEY];
+      } else {
+        console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
       }
-      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");
+    } else if (utils.ANY_OF_KEY in schema && uiSchema && utils.ANY_OF_KEY in uiSchema) {
+      if (Array.isArray(uiSchema[utils.ANY_OF_KEY])) {
+        optionsUiSchema = uiSchema[utils.ANY_OF_KEY];
+      } else {
+        console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
       }
-      this.setState({ selectedOption: intOption }, () => {
-        this.skipNextOptionRecalculation = true;
-        onChange(newFormData, fieldPathId.path, void 0, this.getFieldId());
-      });
-    };
-    getFieldId() {
-      const { fieldPathId, schema } = this.props;
-      return `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
     }
-    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-     */
-    render() {
-      const {
-        name,
-        disabled = false,
-        errorSchema = {},
-        formData,
+    let optionUiSchema = uiSchema;
+    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
+      optionUiSchema = optionsUiSchema[selectedOption];
+    }
+    const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
+    const translateParams = title ? [title] : [];
+    const enumOptions = retrievedOptions.map((opt, index) => {
+      const { title: uiTitle = opt.title } = utils.getUiOptions(optionsUiSchema[index]);
+      return {
+        label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
+        value: index
+      };
+    });
+    const selector = !isOptionalRender || hasFormData ? /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        id: fieldId,
+        name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
+        schema: { type: "number", default: 0 },
+        onChange: onOptionChange,
         onBlur,
         onFocus,
-        readonly,
-        required = false,
-        registry,
-        schema,
-        uiSchema
-      } = this.props;
-      const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
-      const { SchemaField: SchemaFieldComponent } = fields2;
-      const MultiSchemaFieldTemplate2 = utils.getTemplate(
-        "MultiSchemaFieldTemplate",
+        disabled: disabled || isEmpty(enumOptions),
+        multiple: false,
+        rawErrors,
+        errorSchema: fieldErrorSchema,
+        value: selectedOption >= 0 ? selectedOption : void 0,
+        options: { enumOptions, ...uiOptions },
         registry,
-        globalUiOptions
-      );
-      const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
-      const hasFormData = utils.isFormDataAvailable(formData);
-      const { selectedOption, retrievedOptions } = this.state;
-      const {
-        widget = "select",
         placeholder,
-        autofocus,
         autocomplete,
-        title = schema.title,
-        ...uiOptions
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
-      const rawErrors = get(errorSchema, utils.ERRORS_KEY, []);
-      const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-      let optionSchema;
-      if (option) {
-        const { required: schemaRequired } = schema;
-        optionSchema = schemaRequired ? utils.mergeSchemas({ required: schemaRequired }, option) : option;
-      }
-      let optionsUiSchema = [];
-      if (utils.ONE_OF_KEY in schema && uiSchema && utils.ONE_OF_KEY in uiSchema) {
-        if (Array.isArray(uiSchema[utils.ONE_OF_KEY])) {
-          optionsUiSchema = uiSchema[utils.ONE_OF_KEY];
-        } else {
-          console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
-        }
-      } else if (utils.ANY_OF_KEY in schema && uiSchema && utils.ANY_OF_KEY in uiSchema) {
-        if (Array.isArray(uiSchema[utils.ANY_OF_KEY])) {
-          optionsUiSchema = uiSchema[utils.ANY_OF_KEY];
-        } else {
-          console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
-        }
+        autofocus,
+        label: title ?? name,
+        hideLabel: !displayLabel,
+        readonly
       }
-      let optionUiSchema = uiSchema;
-      if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
-        optionUiSchema = optionsUiSchema[selectedOption];
+    ) : void 0;
+    const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldComponent, { ...props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MultiSchemaFieldTemplate2,
+      {
+        schema,
+        registry,
+        uiSchema,
+        selector,
+        optionSchemaField: optionsSchemaField
       }
-      const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
-      const translateParams = title ? [title] : [];
-      const enumOptions = retrievedOptions.map((opt, index) => {
-        const { title: uiTitle = opt.title } = utils.getUiOptions(optionsUiSchema[index]);
-        return {
-          label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
-          value: index
-        };
-      });
-      const selector = !isOptionalRender || hasFormData ? /* @__PURE__ */ jsxRuntime.jsx(
-        Widget,
-        {
-          id: this.getFieldId(),
-          name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
-          schema: { type: "number", default: 0 },
-          onChange: this.onOptionChange,
-          onBlur,
-          onFocus,
-          disabled: disabled || isEmpty(enumOptions),
-          multiple: false,
-          rawErrors,
-          errorSchema: fieldErrorSchema,
-          value: selectedOption >= 0 ? selectedOption : void 0,
-          options: { enumOptions, ...uiOptions },
-          registry,
-          placeholder,
-          autocomplete,
-          autofocus,
-          label: title ?? name,
-          hideLabel: !displayLabel,
-          readonly
-        }
-      ) : void 0;
-      const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldComponent, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MultiSchemaFieldTemplate2,
-        {
-          schema,
-          registry,
-          uiSchema,
-          selector,
-          optionSchemaField: optionsSchemaField
-        }
-      );
-    }
-  };
+    );
+  }
   var MultiSchemaField_default = AnyOfField;
   function NullField(props) {
     const { formData, onChange, fieldPathId } = props;
@@ -1756,7 +1745,7 @@
       (newValue, path, errorSchema, id) => {
         setLastValue(newValue);
         const normalizedValue = `${newValue}`.startsWith(".") ? `0${newValue}` : newValue;
-        const processed = typeof normalizedValue === "string" && normalizedValue.match(trailingCharMatcherWithPrefix) ? utils.asNumber(normalizedValue.replace(trailingCharMatcher, "")) : utils.asNumber(normalizedValue);
+        const processed = typeof normalizedValue === "string" && trailingCharMatcherWithPrefix.exec(normalizedValue) ? utils.asNumber(normalizedValue.replace(trailingCharMatcher, "")) : utils.asNumber(normalizedValue);
         onChange(processed, path, errorSchema, id);
       },
       [onChange]
@@ -1945,7 +1934,7 @@
             apSchema = schemaUtils.retrieveSchema({ [utils.REF_KEY]: apSchema[utils.REF_KEY] }, formData);
             type = apSchema.type;
             constValue = apSchema.const;
-            defaultValue = apSchema.default;
+            defaultValue = schemaUtils.getDefaultFormState(apSchema, defaultValue);
           }
           if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
             type = "object";
@@ -2014,7 +2003,9 @@
       title: uiOptions.label === false ? "" : templateTitle,
       description: uiOptions.label === false ? void 0 : description,
       properties: orderedProperties.map((propertyName) => {
-        const addedByAdditionalProperties = has(schema, [utils.PROPERTIES_KEY, propertyName, utils.ADDITIONAL_PROPERTY_FLAG]);
+        const addedByAdditionalProperties = Boolean(
+          schema.properties?.[propertyName]?.[utils.ADDITIONAL_PROPERTY_FLAG]
+        );
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
         const hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
         const content = /* @__PURE__ */ jsxRuntime.jsx(
@@ -2131,7 +2122,7 @@
   };
   function getFieldComponent(schema, uiOptions, registry) {
     const { field } = uiOptions;
-    const { fields: fields2 } = registry;
+    const { fields: fields2, schemaUtils } = registry;
     if (typeof field === "function") {
       return field;
     }
@@ -2145,7 +2136,7 @@
     if (schemaId && schemaId in fields2) {
       componentName = schemaId;
     }
-    if (!componentName && (schema.anyOf || schema.oneOf)) {
+    if ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) && componentName !== "ObjectField") {
       return () => null;
     }
     return componentName in fields2 ? fields2[componentName] : fields2.FallbackField;
@@ -2167,7 +2158,18 @@
       wasPropertyKeyModified = false
     } = props;
     const { schemaUtils, globalFormOptions, globalUiOptions, fields: fields2 } = registry;
-    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields2;
+    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField, CyclicSchemaField: CyclicSchemaField2 } = fields2;
+    const fieldId = fieldPathId[utils.ID_KEY];
+    const handleFieldComponentChange = react.useCallback(
+      (newFormData, path, newErrorSchema, id2) => {
+        const theId = id2 || fieldId;
+        return onChange(newFormData, path, newErrorSchema, theId);
+      },
+      [fieldId, onChange]
+    );
+    if (_schema[utils.RJSF_REF_CYCLE_KEY]) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CyclicSchemaField2, { ...props });
+    }
     const uiSchema = utils.resolveUiSchema(_schema, _uiSchema, registry);
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, uiOptions);
@@ -2179,14 +2181,6 @@
     const FieldHelpTemplate2 = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
     const schema = schemaUtils.retrieveSchema(_schema, formData);
-    const fieldId = fieldPathId[utils.ID_KEY];
-    const handleFieldComponentChange = react.useCallback(
-      (newFormData, path, newErrorSchema, id2) => {
-        const theId = id2 || fieldId;
-        return onChange(newFormData, path, newErrorSchema, theId);
-      },
-      [fieldId, onChange]
-    );
     const FieldComponent = getFieldComponent(schema, uiOptions, registry);
     const isDeprecated = Boolean(schema.deprecated);
     const deprecatedHandling = isDeprecated ? uiOptions.deprecatedHandling ?? "label" : void 0;
@@ -2348,18 +2342,16 @@
       )
     ] }) });
   }
-  var SchemaField = class extends react.Component {
-    shouldComponentUpdate(nextProps) {
-      const {
-        registry: { globalFormOptions }
-      } = this.props;
-      const { experimental_componentUpdateStrategy = "customDeep" } = globalFormOptions;
-      return utils.shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
+  var SchemaField = react.memo(SchemaFieldRender, (prevProps, nextProps) => {
+    const { experimental_componentUpdateStrategy = "customDeep" } = nextProps.registry.globalFormOptions;
+    if (experimental_componentUpdateStrategy === "always") {
+      return false;
     }
-    render() {
-      return /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldRender, { ...this.props });
+    if (experimental_componentUpdateStrategy === "shallow") {
+      return utils.shallowEquals(prevProps, nextProps);
     }
-  };
+    return utils.deepEquals(prevProps, nextProps);
+  });
   var SchemaField_default = SchemaField;
   function StringField(props) {
     const {
@@ -2430,6 +2422,7 @@
       ArrayField,
       // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
       BooleanField: BooleanField_default,
+      CyclicSchemaField,
       FallbackField,
       LayoutGridField,
       LayoutHeaderField,
@@ -2705,12 +2698,9 @@
       ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue),
       [onChange, options]
     );
-    const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, target && target.value),
-      [onBlur, id]
-    );
+    const handleBlur = react.useCallback(({ target }) => onBlur(id, target?.value), [onBlur, id]);
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, target && target.value),
+      ({ target }) => onFocus(id, target?.value),
       [onFocus, id]
     );
     const handleClear = react.useCallback(
@@ -2852,6 +2842,27 @@
     };
   }
   var ButtonTemplates_default = buttonTemplates;
+  function CyclicSchemaExpandTemplate(props) {
+    const { name, fieldPathId, registry, onExpand } = props;
+    const { translateString } = registry;
+    const buttonId5 = `${fieldPathId[utils.ID_KEY]}-button`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-danger", children: translateString(utils.TranslatableString.CycleDetected, [name]) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: buttonId5,
+            type: "button",
+            className: "btn btn-sm btn-warning",
+            onClick: () => onExpand(fieldPathId[utils.ID_KEY]),
+            children: translateString(utils.TranslatableString.ExpandButton)
+          }
+        ),
+        " "
+      ] })
+    ] });
+  }
   var TEST_IDS = utils.getTestIds();
   function RichDescription({ description, registry, uiSchema = {} }) {
     const { globalUiOptions } = registry;
@@ -3089,7 +3100,7 @@
     const { translateString } = registry;
     let translateEnum = utils.TranslatableString.UnsupportedField;
     const translateParams = [];
-    if (fieldPathId && fieldPathId.$id) {
+    if (fieldPathId?.$id) {
       translateEnum = utils.TranslatableString.UnsupportedFieldWithId;
       translateParams.push(fieldPathId.$id);
     }
@@ -3179,6 +3190,7 @@
       ArrayFieldTitleTemplate,
       ButtonTemplates: ButtonTemplates_default(),
       BaseInputTemplate,
+      CyclicSchemaExpandTemplate,
       DescriptionFieldTemplate: DescriptionField,
       ErrorListTemplate: ErrorList,
       FallbackFieldTemplate,
@@ -3247,11 +3259,11 @@
     const optionValueFormat = utils.getOptionValueFormat(options);
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target?.value, enumOptions, optionValueFormat, emptyValue)),
       [onBlur, id, enumOptions, emptyValue, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(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) => {
@@ -3495,11 +3507,11 @@
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const optionValueFormat = utils.getOptionValueFormat(options);
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target?.value, enumOptions, optionValueFormat, emptyValue)),
       [onBlur, enumOptions, emptyValue, id, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(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) => {
@@ -3664,7 +3676,9 @@
     onBlur,
     onFocus,
     placeholder,
-    htmlName
+    htmlName,
+    registry,
+    uiSchema
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
@@ -3692,8 +3706,19 @@
     );
     const selectValue = utils.enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
     const showPlaceholderOption = !multiple && schema.default === void 0;
-    return (
-      // oxlint-disable-next-line jsx-a11y/no-autofocus
+    utils.logUnsupportedDefaultForEnum(id, schema, enumOptions, multiple);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        utils.SelectedOptionDescription,
+        {
+          id,
+          multiple,
+          options,
+          registry,
+          uiSchema,
+          value
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
@@ -3726,12 +3751,12 @@
           ]
         }
       )
-    );
+    ] });
   }
   var SelectWidget_default = SelectWidget;
   function TextareaWidget({
     id,
-    options = {},
+    options,
     placeholder,
     value,
     required,
@@ -3748,11 +3773,11 @@
       [onChange, options.emptyValue]
     );
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, target && target.value),
+      ({ target }) => onBlur(id, target?.value),
       [onBlur, id]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, target && target.value),
+      ({ target }) => onFocus(id, target?.value),
       [id, onFocus]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4154,14 +4179,15 @@
       const schemaUtils = altSchemaUtils || this.state.schemaUtils;
       const { customValidate, transformErrors, uiSchema } = this.props;
       const validationSchema = retrievedSchema ?? schema;
-      return schemaUtils.getValidator().validateFormData(formData, validationSchema, customValidate, transformErrors, uiSchema);
+      const validationFormData = formData ? JSON.parse(JSON.stringify(formData)) : void 0;
+      return schemaUtils.getValidator().validateFormData(validationFormData, validationSchema, customValidate, transformErrors, uiSchema);
     }
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
     renderErrors(registry) {
       const { errors, errorSchema, schema, uiSchema } = this.state;
       const options = utils.getUiOptions(uiSchema);
       const ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
-      if (errors && errors.length) {
+      if (errors?.length) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           ErrorListTemplate,
           {
@@ -4308,10 +4334,10 @@
       const wasPreviouslyNull = oldFormData === null || oldFormData === void 0;
       const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? void 0 : formData;
       if (utils.isObject(formData) || Array.isArray(formData)) {
+        let plainLeafWasCleared = false;
         if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
           _unset(formData, path);
         } else if (!isRootPath) {
-          let unsetPath = false;
           let valueForPath = newValue;
           if (newValue === void 0) {
             const lastSegment = path[path.length - 1];
@@ -4322,12 +4348,12 @@
               const leaf = field;
               const isOneOfOrAnyOfLeaf = leaf && (utils.ONE_OF_KEY in leaf || utils.ANY_OF_KEY in leaf);
               if (!isOneOfOrAnyOfLeaf && leaf !== void 0) {
-                unsetPath = true;
+                plainLeafWasCleared = true;
               }
             }
           }
-          if (unsetPath) {
-            _unset(formData, path);
+          if (plainLeafWasCleared) {
+            set(formData, path, void 0);
           } else {
             set(formData, path, valueForPath);
           }
@@ -4344,6 +4370,9 @@
         );
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
+        if (plainLeafWasCleared && formData) {
+          set(formData, path, void 0);
+        }
       }
       const mustValidate = !noValidate && (liveValidate === true || liveValidate === "onChange");
       let state = { formData, retrievedSchema };
@@ -4443,7 +4472,7 @@
         initialDefaultsGenerated: false,
         customErrors: void 0
       };
-      this.setState(state, () => onChange && onChange(toIChangeEvent({ ...this.state, ...state })));
+      this.setState(state, () => onChange?.(toIChangeEvent({ ...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. Also runs any live validation and/or live omit operations if the flags indicate they should happen
@@ -4620,7 +4649,7 @@
       if (!field) {
         field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
       }
-      if (field && field.length) {
+      if (field?.length) {
         field = field[0];
       }
       if (field) {