@rjsf/core 6.6.1 → 6.7.0

package/lib/components/fields/LayoutMultiSchemaField.d.ts

@@ -1,4 +1,4 @@
-import { EnumOptionsType, FieldProps, FormContextType, RJSFSchema, SchemaUtilsType, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
+import type { EnumOptionsType, FieldProps, FormContextType, RJSFSchema, SchemaUtilsType, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
 /** Gets the selected option from the list of `options`, using the `selectorField` to search inside each `option` for
  * the `properties[selectorField].default(or const)` that matches the given `value`.
  *
@@ -24,5 +24,5 @@ export declare function computeEnumOptions<T = any, S extends StrictRJSFSchema =
  * field or indirectly via `ui:optionsSchemaSelector` in the `uiSchema`) to help determine which `anyOf`/`oneOf` schema
  * is active. If no `selectorField` is specified, then an error is thrown.
  */
-export default function LayoutMultiSchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+export default function LayoutMultiSchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react").JSX.Element;
 //# sourceMappingURL=LayoutMultiSchemaField.d.ts.map

package/lib/components/fields/LayoutMultiSchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutMultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/LayoutMultiSchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,eAAe,EAEf,UAAU,EACV,eAAe,EAOf,UAAU,EAIV,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACT,MAAM,aAAa,CAAC;AAQrB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,OAAO,GACb,CAAC,GAAG,SAAS,CAQf;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC,EAAE,EACZ,WAAW,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAC5B,QAAQ,CAAC,EAAE,CAAC,GACX,eAAe,CAAC,CAAC,CAAC,EAAE,CAatB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAuI3B"}
+{"version":3,"file":"LayoutMultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/LayoutMultiSchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,eAAe,EACf,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACT,MAAM,aAAa,CAAC;AAuBrB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,OAAO,GACb,CAAC,GAAG,SAAS,CAQf;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC,EAAE,EACZ,WAAW,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAC5B,QAAQ,CAAC,EAAE,CAAC,GACX,eAAe,CAAC,CAAC,CAAC,EAAE,CAatB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BA0I3B"}

package/lib/components/fields/LayoutMultiSchemaField.js

@@ -69,7 +69,7 @@ export default function LayoutMultiSchemaField(props) {
     useEffect(() => {
         setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
         // We are using hashes in place of the dependencies
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
     const { widget = discriminator ? 'radio' : 'select', title = '', placeholder = '', optionsSchemaSelector: selectorField = discriminator, hideError: uiSchemaHideError, ...uiOptions } = getUiOptions(uiSchema);
     if (!selectorField) {
@@ -94,6 +94,9 @@ export default function LayoutMultiSchemaField(props) {
      *      will use it as the index of the new option to select
      */
     const onOptionChange = (opt) => {
+        if (disabled || readonly) {
+            return;
+        }
         const newOption = getSelectedOption(enumOptions, selectorField, opt);
         const oldOption = getSelectedOption(enumOptions, selectorField, selectedOption);
         let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);

package/lib/components/fields/MultiSchemaField.d.ts

@@ -1,48 +1,9 @@
-import { Component } from 'react';
-import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-/** Type used for the state of the `AnyOfField` component */
-type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {
-    /** The currently selected option */
-    selectedOption: number;
-    /** The option schemas after retrieving all $refs */
-    retrievedOptions: S[];
-};
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
  *
  * @param props - The `FieldProps` for this template
  */
-declare class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<FieldProps<T, S, F>, AnyOfFieldState<S>> {
-    /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
-     *
-     * @param props - The `FieldProps` for this template
-     */
-    constructor(props: FieldProps<T, S, F>);
-    /** 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: Readonly<FieldProps<T, S, F>>, prevState: Readonly<AnyOfFieldState>): void;
-    /** 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: number, formData: T | undefined, options: S[]): number;
-    /** 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?: string) => void;
-    getFieldId(): string;
-    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-     */
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare function AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react").JSX.Element;
 export default AnyOfField;
 //# sourceMappingURL=MultiSchemaField.d.ts.map

package/lib/components/fields/MultiSchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/MultiSchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAIL,UAAU,EACV,eAAe,EAQf,UAAU,EAEV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAKrB,4DAA4D;AAC5D,KAAK,eAAe,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,IAAI;IAC9D,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,gBAAgB,EAAE,CAAC,EAAE,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,cAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACnH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACnB,eAAe,CAAC,CAAC,CAAC,CACnB;IACC;;;OAGG;gBACS,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAiBtC;;;;;OAKG;IACH,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,eAAe,CAAC;IAyBjG;;;;;OAKG;IACH,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;IAW/E;;;;;OAKG;IACH,cAAc,GAAI,SAAS,MAAM,UAqB/B;IAEF,UAAU;IAKV;OACG;IACH,MAAM;CA4HP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/MultiSchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAY,MAAM,aAAa,CAAC;AAoBvG;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAmO3B;AAED,eAAe,UAAU,CAAC"}

package/lib/components/fields/MultiSchemaField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Component } from 'react';
-import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getTemplate, getUiOptions, getWidget, isFormDataAvailable, mergeSchemas, ONE_OF_KEY, shouldRenderOptionalField, TranslatableString, } from '@rjsf/utils';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getTemplate, getUiOptions, getWidget, hashObject, isFormDataAvailable, mergeSchemas, ONE_OF_KEY, shouldRenderOptionalField, TranslatableString, } from '@rjsf/utils';
 import get from 'lodash-es/get.js';
 import isEmpty from 'lodash-es/isEmpty.js';
 import omit from 'lodash-es/omit.js';
@@ -9,70 +9,60 @@ import omit from 'lodash-es/omit.js';
  *
  * @param props - The `FieldProps` for this template
  */
-class AnyOfField extends Component {
-    /** 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;
-        // cache the retrieved options in state in case they have $refs to save doing it later
-        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
+function AnyOfField(props) {
+    const { name, disabled = false, errorSchema = {}, formData, fieldPathId, onBlur, onChange, onFocus, options, readonly, registry, required = false, schema, uiSchema, } = props;
+    const { schemaUtils } = registry;
+    // Hash formData by value so the memo only invalidates when data actually changes, not on every
+    // new object reference. hashObject(undefined) throws, so null is used as the fallback.
+    const formDataHash = hashObject(formData ?? null);
+    // retrievedOptions is purely derived from options — useMemo handles re-derivation automatically
+    // when options, schemaUtils, or formData's value changes, with no render-phase dispatch needed.
+    const retrievedOptions = 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] = useState(() => {
+        const discriminator = getDiscriminatorFieldFromSchema(schema);
+        return schemaUtils.getClosestMatchingOption(formData, retrievedOptions, 0, discriminator);
+    });
+    /** Flag to skip the formData-change-driven option recalculation when the user just selected an option.
+     * Set to true in onOptionChange (before onChange is called), consumed and reset in the update effect.
+     * 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.
      */
-    componentDidUpdate(prevProps, prevState) {
-        const { formData, options, fieldPathId } = this.props;
-        const { selectedOption } = this.state;
-        let newState = this.state;
-        if (!deepEquals(prevProps.options, options)) {
-            const { registry: { schemaUtils }, } = this.props;
-            // re-cache the retrieved options in state in case they have $refs to save doing it later
-            const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-            newState = { selectedOption, retrievedOptions };
-        }
-        if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
-            const { retrievedOptions } = newState;
-            const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-            if (prevState && matchingOption !== selectedOption) {
-                newState = { selectedOption: matchingOption, retrievedOptions };
+    const skipNextOptionRecalculation = useRef(false);
+    const prevFormDataRef = useRef(formData);
+    const prevFieldIdRef = useRef(fieldPathId.$id);
+    // Mirrors componentDidUpdate: re-match selectedOption when formData changes on the same field.
+    // Runs after every render (no deps array) to compare against prev values stored in refs.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        const prevFormData = prevFormDataRef.current;
+        const prevFieldId = prevFieldIdRef.current;
+        prevFormDataRef.current = formData;
+        prevFieldIdRef.current = fieldPathId.$id;
+        if (!deepEquals(formData, prevFormData) && fieldPathId.$id === prevFieldId) {
+            if (skipNextOptionRecalculation.current) {
+                skipNextOptionRecalculation.current = false;
+                return;
+            }
+            const discriminator = getDiscriminatorFieldFromSchema(schema);
+            const matchingOption = schemaUtils.getClosestMatchingOption(formData, retrievedOptions, selectedOption, discriminator);
+            if (matchingOption !== selectedOption) {
+                setSelectedOption(matchingOption);
             }
         }
-        if (newState !== this.state) {
-            this.setState(newState);
-        }
-    }
-    /** 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 = getDiscriminatorFieldFromSchema(schema);
-        const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
-        return option;
-    }
+    });
+    const fieldId = `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
     /** 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, fieldPathId } = this.props;
-        const { schemaUtils } = registry;
+    const onOptionChange = useCallback((option) => {
+        if (disabled || readonly) {
+            return;
+        }
         const intOption = option !== undefined ? parseInt(option, 10) : -1;
         if (intOption === selectedOption) {
             return;
@@ -85,76 +75,80 @@ class AnyOfField extends Component {
             // so that only the root objects themselves are created without adding undefined children properties
             newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
         }
-        this.setState({ selectedOption: intOption }, () => {
-            onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
-        });
-    };
-    getFieldId() {
-        const { fieldPathId, schema } = this.props;
-        return `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
+        setSelectedOption(intOption);
+        skipNextOptionRecalculation.current = true;
+        onChange(newFormData, fieldPathId.path, undefined, fieldId);
+    }, 
+    // setSelectedOption is stable (guaranteed by useState); skipNextOptionRecalculation is a ref
+    [selectedOption, retrievedOptions, disabled, readonly, schemaUtils, formData, fieldPathId, onChange, fieldId]);
+    const { widgets, fields, translateString, globalUiOptions } = registry;
+    const { SchemaField: SchemaFieldComponent } = fields;
+    const MultiSchemaFieldTemplate = getTemplate('MultiSchemaFieldTemplate', registry, globalUiOptions);
+    const isOptionalRender = shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable(formData);
+    const { widget = 'select', placeholder, autofocus, autocomplete, title = schema.title, ...uiOptions } = getUiOptions(uiSchema, globalUiOptions);
+    const Widget = getWidget({ type: 'number' }, widget, widgets);
+    const rawErrors = get(errorSchema, ERRORS_KEY, []);
+    const fieldErrorSchema = omit(errorSchema, [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;
+        }
+        // Propagate the parent schema type to options that don't define their own.
+        // This is necessary when the parent constrains the type (e.g. { type: 'string',
+        // oneOf: [{ pattern: '...' }, { pattern: '...' }] }) but the option sub-schemas
+        // omit the type — without it, getSchemaType returns undefined and the option
+        // renders as FallbackField instead of the correct widget (e.g. StringField).
+        if (schemaType !== undefined && !('type' in option)) {
+            parentProps.type = schemaType;
+        }
+        // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
+        optionSchema = Object.keys(parentProps).length > 0 ? mergeSchemas(parentProps, option) : option;
     }
-    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-     */
-    render() {
-        const { name, disabled = false, errorSchema = {}, formData, onBlur, onFocus, readonly, required = false, registry, schema, uiSchema, } = this.props;
-        const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
-        const { SchemaField: _SchemaField } = fields;
-        const MultiSchemaFieldTemplate = getTemplate('MultiSchemaFieldTemplate', registry, globalUiOptions);
-        const isOptionalRender = shouldRenderOptionalField(registry, schema, required, uiSchema);
-        const hasFormData = isFormDataAvailable(formData);
-        const { selectedOption, retrievedOptions } = this.state;
-        const { widget = 'select', placeholder, autofocus, autocomplete, title = schema.title, ...uiOptions } = getUiOptions(uiSchema, globalUiOptions);
-        const Widget = getWidget({ type: 'number' }, widget, widgets);
-        const rawErrors = get(errorSchema, ERRORS_KEY, []);
-        const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
-        const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-        const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-        let optionSchema;
-        if (option) {
-            // merge top level required field
-            const { required } = schema;
-            // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
-            optionSchema = required ? mergeSchemas({ required }, option) : option;
+    // First we will check to see if there is an anyOf/oneOf override for the UI schema
+    let optionsUiSchema = [];
+    if (ONE_OF_KEY in schema && uiSchema && ONE_OF_KEY in uiSchema) {
+        if (Array.isArray(uiSchema[ONE_OF_KEY])) {
+            optionsUiSchema = uiSchema[ONE_OF_KEY];
         }
-        // First we will check to see if there is an anyOf/oneOf override for the UI schema
-        let optionsUiSchema = [];
-        if (ONE_OF_KEY in schema && uiSchema && ONE_OF_KEY in uiSchema) {
-            if (Array.isArray(uiSchema[ONE_OF_KEY])) {
-                optionsUiSchema = uiSchema[ONE_OF_KEY];
-            }
-            else {
-                console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
-            }
+        else {
+            // oxlint-disable-next-line no-console
+            console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
         }
-        else if (ANY_OF_KEY in schema && uiSchema && ANY_OF_KEY in uiSchema) {
-            if (Array.isArray(uiSchema[ANY_OF_KEY])) {
-                optionsUiSchema = uiSchema[ANY_OF_KEY];
-            }
-            else {
-                console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
-            }
+    }
+    else if (ANY_OF_KEY in schema && uiSchema && ANY_OF_KEY in uiSchema) {
+        if (Array.isArray(uiSchema[ANY_OF_KEY])) {
+            optionsUiSchema = uiSchema[ANY_OF_KEY];
         }
-        // Then we pick the one that matches the selected option index, if one exists otherwise default to the main uiSchema
-        let optionUiSchema = uiSchema;
-        if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
-            optionUiSchema = optionsUiSchema[selectedOption];
+        else {
+            // oxlint-disable-next-line no-console
+            console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
         }
-        const translateEnum = title
-            ? TranslatableString.TitleOptionPrefix
-            : TranslatableString.OptionPrefix;
-        const translateParams = title ? [title] : [];
-        const enumOptions = retrievedOptions.map((opt, index) => {
-            // Also see if there is an override title in the uiSchema for each option, otherwise use the title from the option
-            const { title: uiTitle = opt.title } = getUiOptions(optionsUiSchema[index]);
-            return {
-                label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
-                value: index,
-            };
-        });
-        const selector = !isOptionalRender || hasFormData ? (_jsx(Widget, { id: this.getFieldId(), name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`, schema: { type: 'number', default: 0 }, onChange: this.onOptionChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled || isEmpty(enumOptions), multiple: false, rawErrors: rawErrors, errorSchema: fieldErrorSchema, value: selectedOption >= 0 ? selectedOption : undefined, options: { enumOptions, ...uiOptions }, registry: registry, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly })) : undefined;
-        const optionsSchemaField = (optionSchema && optionSchema.type !== 'null' && (_jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }))) ||
-            null;
-        return (_jsx(MultiSchemaFieldTemplate, { schema: schema, registry: registry, uiSchema: uiSchema, selector: selector, optionSchemaField: optionsSchemaField }));
     }
+    // Then we pick the one that matches the selected option index, if one exists otherwise default to the main uiSchema
+    let optionUiSchema = uiSchema;
+    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
+        optionUiSchema = optionsUiSchema[selectedOption];
+    }
+    const translateEnum = title
+        ? TranslatableString.TitleOptionPrefix
+        : TranslatableString.OptionPrefix;
+    const translateParams = title ? [title] : [];
+    const enumOptions = retrievedOptions.map((opt, index) => {
+        const { title: uiTitle = opt.title } = getUiOptions(optionsUiSchema[index]);
+        return {
+            label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
+            value: index,
+        };
+    });
+    const selector = !isOptionalRender || hasFormData ? (_jsx(Widget, { id: fieldId, name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`, schema: { type: 'number', default: 0 }, onChange: onOptionChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled || isEmpty(enumOptions), multiple: false, rawErrors: rawErrors, errorSchema: fieldErrorSchema, value: selectedOption >= 0 ? selectedOption : undefined, options: { enumOptions, ...uiOptions }, registry: registry, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly })) : undefined;
+    const optionsSchemaField = (optionSchema && optionSchema.type !== 'null' && (_jsx(SchemaFieldComponent, { ...props, schema: optionSchema, uiSchema: optionUiSchema }))) ||
+        null;
+    return (_jsx(MultiSchemaFieldTemplate, { schema: schema, registry: registry, uiSchema: uiSchema, selector: selector, optionSchemaField: optionsSchemaField }));
 }
 export default AnyOfField;

package/lib/components/fields/NullField.d.ts

@@ -1,4 +1,4 @@
-import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
  * also set to null if it has no value.
  *

package/lib/components/fields/NullField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NullField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NullField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExF;;;;GAIG;AACH,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,QAU3B;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NullField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NullField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE7F;;;;GAIG;AACH,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,QAU3B;AAED,eAAe,SAAS,CAAC"}

package/lib/components/fields/NumberField.d.ts

@@ -1,4 +1,4 @@
-import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /**
  * The NumberField class has some special handling for dealing with trailing
  * decimal points and/or zeroes. This logic is designed to allow trailing values
@@ -16,6 +16,6 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
  *    value cached in the state. If it matches the cached value, the cached
  *    value is passed to the input instead of the formData value
  */
-declare function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+declare function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react").JSX.Element;
 export default NumberField;
 //# sourceMappingURL=NumberField.d.ts.map

package/lib/components/fields/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAcrB;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkD3B;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAerB;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BAgD3B;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/NumberField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
-import { asNumber, } from '@rjsf/utils';
+import { asNumber } from '@rjsf/utils';
 // Matches a string that ends in a . character, optionally followed by a sequence of
 // digits followed by any number of 0 characters up until the end of the line.
 // Ensuring that there is at least one prefixed character is important so that
@@ -37,20 +37,18 @@ function NumberField(props) {
      *
      * @param value - The current value for the change occurring
      */
-    const handleChange = useCallback((value, path, errorSchema, id) => {
+    const handleChange = useCallback((newValue, path, errorSchema, id) => {
         // Cache the original value in component state
-        setLastValue(value);
+        setLastValue(newValue);
         // Normalize decimals that don't start with a zero character in advance so
         // that the rest of the normalization logic is simpler
-        if (`${value}`.charAt(0) === '.') {
-            value = `0${value}`;
-        }
+        const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
         // Check that the value is a string (this can happen if the widget used is a
         // <select>, due to an enum declaration etc) then, if the value ends in a
         // trailing decimal point or multiple zeroes, strip the trailing values
-        const processed = typeof value === 'string' && value.match(trailingCharMatcherWithPrefix)
-            ? asNumber(value.replace(trailingCharMatcher, ''))
-            : asNumber(value);
+        const processed = typeof normalizedValue === 'string' && trailingCharMatcherWithPrefix.exec(normalizedValue)
+            ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
+            : asNumber(normalizedValue);
         onChange(processed, path, errorSchema, id);
     }, [onChange]);
     if (typeof lastValue === 'string' && typeof value === 'number') {

package/lib/components/fields/ObjectField.d.ts

@@ -1,8 +1,8 @@
-import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
  * additional property key was modified and what it was modified to
  *
  * @param props - The `FieldProps` for this template
  */
-export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react").JSX.Element;
 //# sourceMappingURL=ObjectField.d.ts.map

package/lib/components/fields/ObjectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAaL,UAAU,EACV,eAAe,EAMf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AA2KrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyO3B"}
+{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIV,UAAU,EACV,eAAe,EAIf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AA6LrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,+BA8O3B"}

package/lib/components/fields/ObjectField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, getTemplate, getUiOptions, isFormDataAvailable, orderProperties, shouldRenderOptionalField, toFieldPathId, useDeepCompareMemo, ONE_OF_KEY, PROPERTIES_KEY, REF_KEY, TranslatableString, } from '@rjsf/utils';
 import get from 'lodash-es/get.js';
 import has from 'lodash-es/has.js';
 import isObject from 'lodash-es/isObject.js';
 import set from 'lodash-es/set.js';
-import { Markdown } from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx/react';
 import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants.js';
 /** Returns a flag indicating whether the `name` field is required in the object schema
  *
@@ -14,7 +14,7 @@ import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants.js';
  * @returns - True if the field `name` is required, false otherwise
  */
 function isRequired(schema, name) {
-    return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+    return Array.isArray(schema.required) && schema.required.includes(name);
 }
 /** Returns a default value to be used for a new additional schema property of the given `type`
  *
@@ -41,7 +41,7 @@ function getDefaultValue(translateString, type) {
 }
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
-function ObjectFieldProperty(props) {
+function ObjectFieldPropertyFn(props) {
     const { fieldPathId, schema, registry, uiSchema, errorSchema, formData, onChange, onBlur, onFocus, disabled, readonly, required, hideError, propertyName, handleKeyRename, handleRemoveProperty, addedByAdditionalProperties, } = props;
     const [wasPropertyKeyModified, setWasPropertyKeyModified] = useState(false);
     const { globalFormOptions, fields } = registry;
@@ -56,14 +56,15 @@ function ObjectFieldProperty(props) {
      * @returns - The onPropertyChange callback for the `name` property
      */
     const onPropertyChange = useCallback((value, path, newErrorSchema, id) => {
+        // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
+        // formData, which causes them to completely disappear (including the input field for the property name). Unlike
+        // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
+        // button, so set empty values to the empty string.
+        let normalizedValue = value;
         if (value === undefined && addedByAdditionalProperties) {
-            // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
-            // formData, which causes them to completely disappear (including the input field for the property name). Unlike
-            // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
-            // button, so set empty values to the empty string.
-            value = '';
+            normalizedValue = '';
         }
-        onChange(value, path, newErrorSchema, id);
+        onChange(normalizedValue, path, newErrorSchema, id);
     }, [onChange, addedByAdditionalProperties]);
     /** The key change event handler; Called when the key associated with a field is changed for an additionalProperty.
      * simply returns a function that call the `handleKeyChange()` event with the value
@@ -88,6 +89,7 @@ function ObjectFieldProperty(props) {
     }, [propertyName, handleRemoveProperty]);
     return (_jsx(SchemaField, { name: propertyName, required: required, schema: schema, uiSchema: uiSchema, errorSchema: errorSchema, fieldPathId: innerFieldIdPathId, formData: formData, wasPropertyKeyModified: wasPropertyKeyModified, onKeyRename: onKeyRename, onKeyRenameBlur: onKeyRenameBlur, onRemoveProperty: onRemoveProperty, onChange: onPropertyChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }));
 }
+const ObjectFieldProperty = memo(ObjectFieldPropertyFn);
 /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
  * additional property key was modified and what it was modified to
  *
@@ -99,8 +101,8 @@ export default function ObjectField(props) {
     const { OptionalDataControlsField } = fields;
     const formDataRef = useRef(formData);
     formDataRef.current = formData;
-    const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
-    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    const schema = useMemo(() => schemaUtils.retrieveSchema(rawSchema, formData, true), [schemaUtils, rawSchema, formData]);
+    const uiOptions = useMemo(() => getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
     const { properties: schemaProperties = {} } = schema;
     // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
@@ -117,12 +119,13 @@ export default function ObjectField(props) {
      * @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`
      */
-    const getAvailableKey = useCallback((preferredKey, formData) => {
+    const getAvailableKey = useCallback((preferredKey, existingFormData) => {
         const { duplicateKeySuffixSeparator = '-' } = getUiOptions(uiSchema, globalUiOptions);
         let index = 0;
         let newKey = preferredKey;
-        while (has(formData, newKey)) {
-            newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+        while (has(existingFormData, newKey)) {
+            index += 1;
+            newKey = `${preferredKey}${duplicateKeySuffixSeparator}${index}`;
         }
         return newKey;
     }, [uiSchema, globalUiOptions]);
@@ -133,7 +136,6 @@ export default function ObjectField(props) {
         if (!(schema.additionalProperties || schema.patternProperties)) {
             return;
         }
-        const { translateString } = registry;
         const newFormData = { ...formData };
         const newKey = getAvailableKey('newKey', newFormData);
         if (schema.patternProperties) {
@@ -150,11 +152,10 @@ export default function ObjectField(props) {
                 defaultValue = schema.additionalProperties.default;
                 let apSchema = schema.additionalProperties;
                 if (REF_KEY in apSchema) {
-                    const { schemaUtils } = registry;
                     apSchema = schemaUtils.retrieveSchema({ [REF_KEY]: apSchema[REF_KEY] }, formData);
                     type = apSchema.type;
                     constValue = apSchema.const;
-                    defaultValue = apSchema.default;
+                    defaultValue = schemaUtils.getDefaultFormState(apSchema, defaultValue);
                 }
                 if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
                     type = 'object';
@@ -169,7 +170,7 @@ export default function ObjectField(props) {
             lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
         }
         onChange(newFormData, childFieldPathId.path);
-    }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
+    }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
     /** 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.
      *
@@ -186,8 +187,9 @@ export default function ObjectField(props) {
             };
             const newKeys = { [oldKey]: actualNewKey };
             const keyValues = Object.keys(newFormData).map((key) => {
-                const newKey = newKeys[key] || key;
-                return { [newKey]: newFormData[key] };
+                // `Object.hasOwn` so a falsy rename target (e.g. `""`) isn't dropped.
+                const mappedKey = Object.hasOwn(newKeys, key) ? newKeys[key] : key;
+                return { [mappedKey]: newFormData[key] };
             });
             const renamedObj = Object.assign({}, ...keyValues);
             formDataRef.current = renamedObj;
@@ -230,14 +232,14 @@ export default function ObjectField(props) {
         // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
         title: uiOptions.label === false ? '' : templateTitle,
         description: uiOptions.label === false ? undefined : description,
-        properties: orderedProperties.map((name) => {
-            const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
-            const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+        properties: orderedProperties.map((propertyName) => {
+            const addedByAdditionalProperties = Boolean(schema.properties?.[propertyName]?.[ADDITIONAL_PROPERTY_FLAG]);
+            const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
             const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
-            const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [name]), fieldPathId: childFieldPathId, formData: get(formData, [name]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, getStableKey(name)));
+            const content = (_jsx(ObjectFieldProperty, { propertyName: propertyName, required: isRequired(schema, propertyName), schema: get(schema, [PROPERTIES_KEY, propertyName], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [propertyName]), fieldPathId: childFieldPathId, formData: get(formData, [propertyName]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, getStableKey(propertyName)));
             return {
                 content,
-                name,
+                name: propertyName,
                 readonly,
                 disabled,
                 required,