@rjsf/core 6.6.2 → 6.7.1

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,85 +9,60 @@ import omit from 'lodash-es/omit.js';
  *
  * @param props - The `FieldProps` for this template
  */
-class AnyOfField extends Component {
+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 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;
-        // 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
+     * 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) {
-            if (this.skipNextOptionRecalculation) {
-                this.skipNextOptionRecalculation = false;
+    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;
             }
-            else {
-                const { retrievedOptions } = newState;
-                const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-                if (prevState && matchingOption !== selectedOption) {
-                    newState = { selectedOption: matchingOption, retrievedOptions };
-                }
+            const discriminator = getDiscriminatorFieldFromSchema(schema);
+            const matchingOption = schemaUtils.getClosestMatchingOption(formData, retrievedOptions, selectedOption, discriminator);
+            if (matchingOption !== selectedOption) {
+                setSelectedOption(matchingOption);
             }
         }
-        if (newState !== this.state) {
-            // oxlint-disable-next-line react/no-did-update-set-state -- guarded to prevent infinite loop
-            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 { disabled = false, formData, onChange, readonly = false, registry, fieldPathId } = this.props;
+    const onOptionChange = useCallback((option) => {
         if (disabled || readonly) {
             return;
         }
-        const { schemaUtils } = registry;
         const intOption = option !== undefined ? parseInt(option, 10) : -1;
         if (intOption === selectedOption) {
             return;
@@ -100,79 +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 }, () => {
-            this.skipNextOptionRecalculation = true;
-            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: SchemaFieldComponent } = 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: schemaRequired } = schema;
-            // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
-            optionSchema = schemaRequired ? mergeSchemas({ required: schemaRequired }, 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 {
-                // oxlint-disable-next-line no-console
-                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 {
-                // oxlint-disable-next-line no-console
-                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(SchemaFieldComponent, { ...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/NumberField.d.ts

@@ -16,6 +16,6 @@ import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '
  *    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,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,2CAgD3B;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;AAOrB;;;;;;;;;;;;;;;;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,+BAsE3B;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/NumberField.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
-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
-// you don't incorrectly match against "0".
+import { asNumber, getDecimalSeparator, getUiOptions, optionsList } from '@rjsf/utils';
+// Static matchers for standard '.' separator used during normalization inside handleChange
 const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
-// This is used for trimming the trailing 0 and . characters without affecting
-// the rest of the string. Its possible to use one RegEx with groups for this
-// functionality, but it is fairly complex compared to simply defining two
-// different matchers.
 const trailingCharMatcher = /[0.]0*$/;
 /**
  * The NumberField class has some special handling for dealing with trailing
@@ -32,6 +25,8 @@ function NumberField(props) {
     const { registry, onChange, formData, value: initialValue } = props;
     const [lastValue, setLastValue] = useState(initialValue);
     const { StringField } = registry.fields;
+    const separator = getDecimalSeparator();
+    const escapedSeparator = separator === '.' ? '\\.' : separator;
     let value = formData;
     /** Handle the change from the `StringField` to properly convert to a number
      *
@@ -40,28 +35,44 @@ function NumberField(props) {
     const handleChange = useCallback((newValue, path, errorSchema, id) => {
         // Cache the original value in component state
         setLastValue(newValue);
+        // Convert locale separator to standard '.' first
+        const standardValue = typeof newValue === 'string' ? newValue.replace(separator, '.') : newValue;
         // Normalize decimals that don't start with a zero character in advance so
         // that the rest of the normalization logic is simpler
-        const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
+        const normalizedValue = `${standardValue}`.startsWith('.') ? `0${standardValue}` : standardValue;
         // 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 normalizedValue === 'string' && normalizedValue.match(trailingCharMatcherWithPrefix)
+        const processed = typeof normalizedValue === 'string' && trailingCharMatcherWithPrefix.exec(normalizedValue)
             ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
             : asNumber(normalizedValue);
         onChange(processed, path, errorSchema, id);
-    }, [onChange]);
+    }, [onChange, separator]);
     if (typeof lastValue === 'string' && typeof value === 'number') {
         // Construct a regular expression that checks for a string that consists
-        // of the formData value suffixed with zero or one '.' characters and zero
+        // of the formData value suffixed with zero or one locale separator characters and zero
         // or more '0' characters
-        const re = new RegExp(`^(${String(value).replace('.', '\\.')})?\\.?0*$`);
+        const re = new RegExp(`^(${String(value).replace('.', escapedSeparator)})?${escapedSeparator}?0*$`);
         // If the cached "lastValue" is a match, use that instead of the formData
         // value to prevent the input value from changing in the UI
         if (lastValue.match(re)) {
             value = lastValue;
         }
     }
-    return _jsx(StringField, { ...props, formData: value, onChange: handleChange });
+    // Format value to use the locale separator for rendering if it is a number
+    let displayValue = value;
+    if (typeof value === 'number' && separator !== '.') {
+        const { schema, uiSchema } = props;
+        const { schemaUtils } = registry;
+        const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
+        const defaultWidget = enumOptions ? 'select' : 'text';
+        const { widget = defaultWidget } = getUiOptions(uiSchema);
+        // Do not convert the value to a locale-specific string for radio, select,
+        // or hidden widgets because option matching relies on the original numeric value.
+        if (widget !== 'radio' && widget !== 'select' && widget !== 'hidden') {
+            displayValue = String(value).replace('.', separator);
+        }
+    }
+    return _jsx(StringField, { ...props, formData: displayValue, onChange: handleChange });
 }
 export default NumberField;

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

@@ -4,5 +4,5 @@ import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '
  *
  * @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":"AAEA,OAAO,KAAK,EAIV,UAAU,EACV,eAAe,EAGf,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,2CA4O3B"}
+{"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;AAuMrB;;;;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,+BAyP3B"}

package/lib/components/fields/ObjectField.js

@@ -39,6 +39,12 @@ function getDefaultValue(translateString, type) {
             return translateString(TranslatableString.NewStringDefault);
     }
 }
+function isAdditionalPropertySchema(schema) {
+    return Boolean(schema?.[ADDITIONAL_PROPERTY_FLAG]);
+}
+function getAdditionalPropertyOrder(schemaProperties) {
+    return Object.keys(schemaProperties).filter((property) => isAdditionalPropertySchema(schemaProperties[property]));
+}
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
 function ObjectFieldPropertyFn(props) {
@@ -103,10 +109,15 @@ export default function ObjectField(props) {
     formDataRef.current = formData;
     const schema = useMemo(() => schemaUtils.retrieveSchema(rawSchema, formData, true), [schemaUtils, rawSchema, formData]);
     const uiOptions = useMemo(() => getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
-    const { properties: schemaProperties = {} } = schema;
+    const schemaProperties = useMemo(() => schema.properties ?? {}, [schema.properties]);
     // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
     const lastRenamedProperty = useRef({ previousKey: '', currentKey: undefined });
+    const [additionalPropertyOrder, setAdditionalPropertyOrder] = useState(() => getAdditionalPropertyOrder(schemaProperties));
+    const definedPropertyOrder = useMemo(() => {
+        const additionalPropertySet = new Set(getAdditionalPropertyOrder(schemaProperties));
+        return Object.keys(schemaProperties).filter((property) => !additionalPropertySet.has(property));
+    }, [schemaProperties]);
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -155,7 +166,7 @@ export default function ObjectField(props) {
                     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,6 +180,7 @@ export default function ObjectField(props) {
             lastRenamedProperty.current.currentKey = newKey;
             lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
         }
+        setAdditionalPropertyOrder((order) => [...order, newKey]);
         onChange(newFormData, childFieldPathId.path);
     }, [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
@@ -197,6 +209,7 @@ export default function ObjectField(props) {
                 lastRenamedProperty.current.previousKey = oldKey;
             }
             lastRenamedProperty.current.currentKey = actualNewKey;
+            setAdditionalPropertyOrder((order) => order.map((property) => (property === oldKey ? actualNewKey : property)));
             onChange(renamedObj, childFieldPathId.path);
         }
     }, [onChange, childFieldPathId, getAvailableKey]);
@@ -204,6 +217,7 @@ export default function ObjectField(props) {
      * value for the path plus the key to be removed
      */
     const handleRemoveProperty = useCallback((key) => {
+        setAdditionalPropertyOrder((order) => order.filter((property) => property !== key));
         onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
     }, [onChange, childFieldPathId]);
     /** Returns the stable React key for a property. For the most recently renamed
@@ -219,8 +233,9 @@ export default function ObjectField(props) {
     }, []);
     if (!renderOptionalField || hasFormData) {
         try {
-            const properties = Object.keys(schemaProperties);
-            orderedProperties = orderProperties(properties, uiOptions.order);
+            const definedPropertySet = new Set(definedPropertyOrder);
+            const currentAdditionalProperties = additionalPropertyOrder.filter((property) => Object.hasOwn(schemaProperties, property) && !definedPropertySet.has(property));
+            orderedProperties = orderProperties([...definedPropertyOrder, ...currentAdditionalProperties], uiOptions.order);
         }
         catch (err) {
             return (_jsxs("div", { children: [_jsx("p", { className: 'rjsf-config-error', style: { color: 'red' }, children: _jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message]) }) }), _jsx("pre", { children: JSON.stringify(schema) })] }));
@@ -233,7 +248,7 @@ export default function ObjectField(props) {
         title: uiOptions.label === false ? '' : templateTitle,
         description: uiOptions.label === false ? undefined : description,
         properties: orderedProperties.map((propertyName) => {
-            const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, propertyName, ADDITIONAL_PROPERTY_FLAG]);
+            const addedByAdditionalProperties = isAdditionalPropertySchema(schema.properties?.[propertyName]);
             const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
             const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
             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)));

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

@@ -4,5 +4,5 @@ import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '
  *
  * @param props - The `FieldProps` for this template
  */
-export default function OptionalDataControlsField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export default function OptionalDataControlsField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): "" | import("react").JSX.Element | undefined;
 //# sourceMappingURL=OptionalDataControlsField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionalDataControlsField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/OptionalDataControlsField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAUrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,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,4DA4D3B"}
+{"version":3,"file":"OptionalDataControlsField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/OptionalDataControlsField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAUrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,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,gDA4D3B"}

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

@@ -1,11 +1,17 @@
-import { Component } from 'react';
 import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
- * and if so, calls the `SchemaFieldRender` component with the props.
+/** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
+ * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
+ * `oneOf` fields.
+ *
+ * @param props - The `FieldProps` for this component
  */
-declare class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<FieldProps<T, S, F>> {
-    shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>): boolean;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react").JSX.Element | null;
+/** The `SchemaField` component wraps `SchemaFieldRender` with a custom memoization comparator that  determines whether it is necessary to rerender the component based on any props changes
+ * using `experimental_componentUpdateStrategy`.
+ *
+ * The cast to `typeof SchemaFieldRender` preserves the generic type signature (<T, S, F>) for consumers,
+ * since React.memo's return type erases generic parameters.
+ */
+declare const SchemaField: typeof SchemaFieldRender;
 export default SchemaField;
 //# sourceMappingURL=SchemaField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAKV,UAAU,EAEV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AA2TrB;;GAEG;AACH,cAAM,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACpH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACpB;IACC,qBAAqB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAS9D,MAAM;CAGP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAKV,UAAU,EAEV,eAAe,EAGf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAgFrB;;;;;GAKG;AACH,iBAAS,iBAAiB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAC1G,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,sCA+O3B;AAED;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAUA,OAAO,iBAAiB,CAAC;AAE1C,eAAe,WAAW,CAAC"}