@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.20

package/lib/components/fields/LayoutGridField.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
-import { ANY_OF_KEY, getDiscriminatorFieldFromSchema, getTemplate, getTestIds, getUiOptions, hashObject, ID_KEY, lookupFromFormContext, mergeObjects, ONE_OF_KEY, PROPERTIES_KEY, READONLY_KEY, UI_OPTIONS_KEY, } from '@rjsf/utils';
+import { ANY_OF_KEY, getDiscriminatorFieldFromSchema, getTemplate, getTestIds, getUiOptions, hashObject, ID_KEY, lookupFromFormContext, ONE_OF_KEY, PROPERTIES_KEY, READONLY_KEY, toFieldPathId, UI_OPTIONS_KEY, UI_GLOBAL_OPTIONS_KEY, ITEMS_KEY, } from '@rjsf/utils';
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import each from 'lodash-es/each.js';
 import flatten from 'lodash-es/flatten.js';
@@ -16,6 +16,7 @@ import isObject from 'lodash-es/isObject.js';
 import isPlainObject from 'lodash-es/isPlainObject.js';
 import isString from 'lodash-es/isString.js';
 import isUndefined from 'lodash-es/isUndefined.js';
+import last from 'lodash-es/last.js';
 import set from 'lodash-es/set.js';
 /** The enumeration of the three different Layout GridTemplate type values
  */
@@ -43,9 +44,6 @@ export const LAYOUT_GRID_UI_OPTION = 'layoutGrid';
 /** The constant representing the main layout grid schema option name in the `uiSchema`
  */
 export const LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
-/** The constant representing the global UI Options object potentially contained within the `uiSchema`
- */
-export const UI_GLOBAL_OPTIONS = 'ui:global_options';
 /** Returns either the `value` if it is non-nullish or the fallback
  *
  * @param [value] - The potential value to return if it is non-nullish
@@ -55,6 +53,14 @@ export const UI_GLOBAL_OPTIONS = 'ui:global_options';
 function getNonNullishValue(value, fallback) {
     return value ?? fallback;
 }
+/** Detects if a `str` is made up entirely of numeric characters
+ *
+ * @param str - The string to check to see if it is a numeric index
+ * @return - True if the string consists entirely of numeric characters
+ */
+function isNumericIndex(str) {
+    return /^\d+?$/.test(str); // Matches positive integers
+}
 /** The `LayoutGridField` will render a schema, uiSchema and formData combination out into a GridTemplate in the shape
  * described in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in
  * the uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):
@@ -297,7 +303,7 @@ export default class LayoutGridField extends PureComponent {
      * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
      */
     static computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
-        const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS], {});
+        const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
         const localUiSchema = get(uiSchema, field);
         const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
         const fieldUiSchema = { ...localUiSchema };
@@ -306,7 +312,7 @@ export default class LayoutGridField extends PureComponent {
         }
         if (!isEmpty(globalUiOptions)) {
             // pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
-            set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+            set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
         }
         let { readonly: uiReadonly } = getUiOptions(fieldUiSchema);
         if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {
@@ -384,37 +390,59 @@ export default class LayoutGridField extends PureComponent {
         }
         return { children: children, gridProps };
     }
-    /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
-     * as the id prefix.
+    /** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
+     * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
+     * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
+     * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
+     * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
+     * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
+     * as is.
      *
-     * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
-     * @param schema - The schema to generate the idSchema for
-     * @param baseIdSchema - The IdSchema for the base
-     * @param formData - The formData to pass the `toIdSchema`
-     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
-     * @returns - The generated `idSchema` for the `schema`
+     * @param schema - The schema to generate the fieldPathId for
+     * @param fieldPathId - The FieldPathId for the schema
+     * @param potentialIndex - A string containing a potential index
+     * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
      */
-    static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
-        const baseId = get(baseIdSchema, ID_KEY);
-        return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+    static computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
+        let rawSchema;
+        if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && has(schema, ITEMS_KEY)) {
+            const index = Number(potentialIndex);
+            const items = schema[ITEMS_KEY];
+            if (Array.isArray(items)) {
+                if (index > items.length) {
+                    rawSchema = last(items);
+                }
+                else {
+                    rawSchema = items[index];
+                }
+            }
+            else {
+                rawSchema = items;
+            }
+            fieldPathId = {
+                [ID_KEY]: fieldPathId[ID_KEY],
+                path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index],
+            };
+        }
+        return { rawSchema, fieldPathId };
     }
     /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
      * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
      * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
      * `options`.
      *
-     * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
+     * @param registry - The registry
      * @param dottedPath - The dotted-path to the field for which to get the schema
      * @param initialSchema - The initial schema to start the search from
      * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
-     * @param initialIdSchema - The initial idSchema to start the search from
-     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+     * @param initialFieldIdPath - The initial fieldPathId to start the search from
      * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
      *            info if a oneOf/anyOf
      */
-    static getSchemaDetailsForField(schemaUtils, dottedPath, initialSchema, formData, initialIdSchema, idSeparator) {
+    static getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
+        const { schemaUtils, globalFormOptions } = registry;
         let rawSchema = initialSchema;
-        let idSchema = initialIdSchema;
+        let fieldPathId = initialFieldIdPath;
         const parts = dottedPath.split('.');
         const leafPath = parts.pop(); // pop off the last element in the list as the leaf
         let schema = schemaUtils.retrieveSchema(rawSchema, formData); // always returns an object
@@ -423,20 +451,20 @@ export default class LayoutGridField extends PureComponent {
         // For all the remaining path parts
         parts.forEach((part) => {
             // dive into the properties of the current schema (when it exists) and get the schema for the next part
+            fieldPathId = toFieldPathId(part, globalFormOptions, fieldPathId);
             if (has(schema, PROPERTIES_KEY)) {
                 rawSchema = get(schema, [PROPERTIES_KEY, part], {});
-                idSchema = get(idSchema, part, {});
             }
             else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
                 const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
                 // When the schema represents a oneOf/anyOf, find the selected schema for it and grab the inner part
                 const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-                const selectedIdSchema = LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, selectedSchema, idSeparator);
                 rawSchema = get(selectedSchema, [PROPERTIES_KEY, part], {});
-                idSchema = get(selectedIdSchema, part, {});
             }
             else {
-                rawSchema = {};
+                const result = LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, part);
+                rawSchema = result.rawSchema ?? {};
+                fieldPathId = result.fieldPathId;
             }
             // Now drill into the innerData for the part, returning an empty object by default if it doesn't exist
             innerData = get(innerData, part, {});
@@ -456,16 +484,20 @@ export default class LayoutGridField extends PureComponent {
                 const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
                 // Grab the selected schema for the oneOf/anyOf value for the leafPath using the innerData
                 schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
-                // Generate the idSchema for the oneOf/anyOf value then merge with the existing `idSchema`
-                const rawIdSchema = LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, schema, idSeparator);
-                idSchema = mergeObjects(rawIdSchema, idSchema);
             }
+            fieldPathId = toFieldPathId(leafPath, globalFormOptions, fieldPathId);
             isRequired = schema !== undefined && Array.isArray(schema.required) && includes(schema.required, leafPath);
-            // Now grab the schema from the leafPath of the current schema properties
-            schema = get(schema, [PROPERTIES_KEY, leafPath]);
-            // Resolve any `$ref`s for the current schema
-            schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-            idSchema = get(idSchema, leafPath, {});
+            const result = LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
+            if (result.rawSchema) {
+                schema = result.rawSchema;
+                fieldPathId = result.fieldPathId;
+            }
+            else {
+                // Now grab the schema from the leafPath of the current schema properties
+                schema = get(schema, [PROPERTIES_KEY, leafPath]);
+                // Resolve any `$ref`s for the current schema
+                schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+            }
             isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
             if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
                 const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
@@ -474,7 +506,7 @@ export default class LayoutGridField extends PureComponent {
                 optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
             }
         }
-        return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+        return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
     }
     /** Gets the custom render component from the `render`, by either determining that it is either already a function or
      * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
@@ -511,7 +543,7 @@ export default class LayoutGridField extends PureComponent {
             name = gridSchema ?? '';
         }
         else {
-            const { name: innerName, render, ...innerProps } = gridSchema;
+            const { name: innerName = '', render, ...innerProps } = gridSchema;
             name = innerName;
             uiProps = innerProps;
             if (!isEmpty(uiProps)) {
@@ -545,19 +577,17 @@ export default class LayoutGridField extends PureComponent {
      * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
      *
      * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
-     * @returns - The `onChange` handling function for the `dottedPath` field
+     * @returns - The `onChange` handling function for the `dottedPath` field of the `schemaType` type
      */
     onFieldChange = (dottedPath) => {
-        return (value, errSchema, id) => {
-            const { onChange, errorSchema, formData } = this.props;
-            const newFormData = cloneDeep(formData || {});
+        return (value, path, errSchema, id) => {
+            const { onChange, errorSchema } = this.props;
             let newErrorSchema = errorSchema;
             if (errSchema && errorSchema) {
                 newErrorSchema = cloneDeep(errorSchema);
                 set(newErrorSchema, dottedPath, errSchema);
             }
-            set(newFormData, dottedPath, value);
-            onChange(newFormData, newErrorSchema, id);
+            onChange(value, path, newErrorSchema, id);
         };
     };
     /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
@@ -620,20 +650,20 @@ export default class LayoutGridField extends PureComponent {
         const GridTemplate = getTemplate('GridTemplate', registry, uiOptions);
         return (_jsx(GridTemplate, { ...gridProps, "data-testid": LayoutGridField.TEST_IDS.row, children: this.renderChildren(children) }));
     }
-    /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
+    /** Iterates through all the `childrenLayoutGrfieldPathId`, rendering a nested `LayoutGridField` for each item in the
      * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
      * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
-     * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
+     * `childrenLayoutGrfieldPathId` is passed as `layoutGridSchema`.
      *
-     * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+     * @param childrenLayoutGrfieldPathId - The list of strings or objects that represents the configurations for the
      *          children fields
      * @returns - The nested `LayoutGridField`s
      */
-    renderChildren(childrenLayoutGridSchema) {
+    renderChildren(childrenLayoutGrfieldPathId) {
         const { registry, schema: rawSchema, formData } = this.props;
         const { schemaUtils } = registry;
         const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-        return childrenLayoutGridSchema.map((layoutGridSchema) => (_createElement(LayoutGridField, { ...this.props, key: `layoutGrid-${hashObject(layoutGridSchema)}`, schema: schema, layoutGridSchema: layoutGridSchema })));
+        return childrenLayoutGrfieldPathId.map((layoutGridSchema) => (_createElement(LayoutGridField, { ...this.props, key: `layoutGrid-${hashObject(layoutGridSchema)}`, schema: schema, layoutGridSchema: layoutGridSchema })));
     }
     /** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
      * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
@@ -641,7 +671,7 @@ export default class LayoutGridField extends PureComponent {
      * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
      * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
      * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
-     * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
+     * `uiSchema`, `errorSchema`, `fieldPathId` and `formData` drilled down to the dotted-path field, spreading any other
      * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
      * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
      * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
@@ -651,16 +681,16 @@ export default class LayoutGridField extends PureComponent {
      * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
      */
     renderField(gridSchema) {
-        const { schema: initialSchema, uiSchema, errorSchema, idSchema, onBlur, onFocus, formData, readonly, registry, idSeparator, layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
+        const { schema: initialSchema, uiSchema, errorSchema, fieldPathId, onBlur, onFocus, formData, readonly, registry, layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through
         ...otherProps } = this.props;
-        const { fields, schemaUtils } = registry;
+        const { fields } = registry;
         const { SchemaField, LayoutMultiSchemaField } = fields;
         const uiComponentProps = LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
         if (uiComponentProps.rendered) {
             return uiComponentProps.rendered;
         }
         const { name, UIComponent, uiProps } = uiComponentProps;
-        const { schema, isRequired, isReadonly, optionsInfo, idSchema: fieldIdSchema, } = LayoutGridField.getSchemaDetailsForField(schemaUtils, name, initialSchema, formData, idSchema, idSeparator);
+        const { schema, isRequired, isReadonly, optionsInfo, fieldPathId: fieldIdSchema, } = LayoutGridField.getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId);
         if (schema) {
             const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField : SchemaField;
             // Call this function to get the appropriate UISchema, which will always have its `readonly` state matching the
@@ -671,10 +701,10 @@ export default class LayoutGridField extends PureComponent {
             const { fieldUiSchema, uiReadonly } = LayoutGridField.computeFieldUiSchema(name, uiProps, uiSchema, isReadonly, readonly);
             return (_jsx(Field, { "data-testid": optionsInfo?.hasDiscriminator
                     ? LayoutGridField.TEST_IDS.layoutMultiSchemaField
-                    : LayoutGridField.TEST_IDS.field, ...otherProps, name: name, required: isRequired, readonly: uiReadonly, schema: schema, uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), idSchema: fieldIdSchema, idSeparator: idSeparator, formData: get(formData, name), onChange: this.onFieldChange(name), onBlur: onBlur, onFocus: onFocus, options: optionsInfo?.options, registry: registry }));
+                    : LayoutGridField.TEST_IDS.field, ...otherProps, name: name, required: isRequired, readonly: uiReadonly, schema: schema, uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), fieldPathId: fieldIdSchema, formData: get(formData, name), onChange: this.onFieldChange(name), onBlur: onBlur, onFocus: onFocus, options: optionsInfo?.options, registry: registry }));
         }
         if (UIComponent) {
-            return (_jsx(UIComponent, { "data-testid": LayoutGridField.TEST_IDS.uiComponent, ...otherProps, name: name, required: isRequired, formData: formData, readOnly: !!isReadonly || readonly, errorSchema: errorSchema, uiSchema: uiSchema, schema: initialSchema, idSchema: idSchema, idSeparator: idSeparator, onBlur: onBlur, onFocus: onFocus, registry: registry, ...uiProps }));
+            return (_jsx(UIComponent, { "data-testid": LayoutGridField.TEST_IDS.uiComponent, ...otherProps, name: name, required: isRequired, formData: formData, readOnly: !!isReadonly || readonly, errorSchema: errorSchema, uiSchema: uiSchema, schema: initialSchema, fieldPathId: fieldPathId, onBlur: onBlur, onFocus: onFocus, registry: registry, ...uiProps }));
         }
         return null;
     }

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

@@ -1,5 +1,5 @@
 import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `idSchema`
+/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `fieldPathId`
  * and whether it is `required` from the props. The `title` is derived from the props as follows:
  * - If there is a title in the `uiSchema`, it is displayed
  * - Else, if there is an explicit `title` passed in the props, it is displayed

package/lib/components/fields/LayoutHeaderField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
-/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `idSchema`
+/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `fieldPathId`
  * and whether it is `required` from the props. The `title` is derived from the props as follows:
  * - If there is a title in the `uiSchema`, it is displayed
  * - Else, if there is an explicit `title` passed in the props, it is displayed
@@ -10,7 +10,7 @@ import { getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
  * @param props - The `LayoutHeaderField` for the component
  */
 export default function LayoutHeaderField(props) {
-    const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+    const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
     const options = getUiOptions(uiSchema, registry.globalUiOptions);
     const { title: uiTitle } = options;
     const { title: schemaTitle } = schema;
@@ -19,5 +19,5 @@ export default function LayoutHeaderField(props) {
         return null;
     }
     const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
-    return (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: fieldTitle, required: required, schema: schema, uiSchema: uiSchema, registry: registry }));
+    return (_jsx(TitleFieldTemplate, { id: titleId(fieldPathId), title: fieldTitle, required: required, schema: schema, uiSchema: uiSchema, registry: registry }));
 }

package/lib/components/fields/LayoutMultiSchemaField.js

@@ -55,10 +55,10 @@ export function computeEnumOptions(schema, options, schemaUtils, uiSchema, formD
  * is active. If no `selectorField` is specified, then an error is thrown.
  */
 export default function LayoutMultiSchemaField(props) {
-    const { name, baseType, disabled = false, formData, idSchema, onBlur, onChange, options, onFocus, registry, uiSchema, schema, formContext, autofocus, readonly, required, errorSchema, hideError = false, } = props;
+    const { name, baseType, disabled = false, formData, fieldPathId, onBlur, onChange, options, onFocus, registry, uiSchema, schema, formContext, autofocus, readonly, required, errorSchema, hideError = false, } = props;
     const { widgets, schemaUtils, globalUiOptions } = registry;
     const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
-    const id = get(idSchema, ID_KEY);
+    const id = get(fieldPathId, ID_KEY);
     const discriminator = getDiscriminatorFieldFromSchema(schema);
     const FieldErrorTemplate = getTemplate('FieldErrorTemplate', registry, options);
     const FieldTemplate = getTemplate('FieldTemplate', registry, options);
@@ -104,11 +104,12 @@ export default function LayoutMultiSchemaField(props) {
         if (newFormData) {
             set(newFormData, selectorField, opt);
         }
-        onChange(newFormData, undefined, id);
+        // Pass the component name in the path
+        onChange(newFormData, fieldPathId.path, undefined, id);
     };
     // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop
     const widgetOptions = { enumOptions, ...uiOptions };
-    const errors = !hideFieldError && rawErrors.length > 0 ? (_jsx(FieldErrorTemplate, { idSchema: idSchema, schema: schema, errors: rawErrors, registry: registry })) : undefined;
+    const errors = !hideFieldError && rawErrors.length > 0 ? (_jsx(FieldErrorTemplate, { fieldPathId: fieldPathId, schema: schema, errors: rawErrors, registry: registry })) : undefined;
     const ignored = (value) => noop;
-    return (_jsx(FieldTemplate, { id: id, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, formContext: formContext, required: required, readonly: !!readonly, registry: registry, displayLabel: displayLabel, errors: errors, onChange: onChange, onDropPropertyClick: ignored, onKeyChange: ignored, children: _jsx(Widget, { id: id, name: name, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, formContext: formContext, autofocus: autofocus, readonly: readonly, required: required, registry: registry, multiple: false, rawErrors: rawErrors, hideError: hideFieldError, hideLabel: !displayLabel, errorSchema: fieldErrorSchema, placeholder: placeholder, onChange: onOptionChange, onBlur: onBlur, onFocus: onFocus, value: selectedOption, options: widgetOptions }) }));
+    return (_jsx(FieldTemplate, { id: id, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, required: required, readonly: !!readonly, registry: registry, displayLabel: displayLabel, errors: errors, onChange: onChange, onDropPropertyClick: ignored, onKeyChange: ignored, children: _jsx(Widget, { id: id, name: name, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, formContext: formContext, autofocus: autofocus, readonly: readonly, required: required, registry: registry, multiple: false, rawErrors: rawErrors, hideError: hideFieldError, hideLabel: !displayLabel, errorSchema: fieldErrorSchema, placeholder: placeholder, onChange: onOptionChange, onBlur: onBlur, onFocus: onFocus, value: selectedOption, options: widgetOptions }) }));
 }

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;AAIlC,OAAO,EAIL,UAAU,EACV,eAAe,EAMf,UAAU,EACV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAErB,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;CA0GP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/MultiSchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAIL,UAAU,EACV,eAAe,EAOf,UAAU,EACV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAErB,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;CAyHP;AAED,eAAe,UAAU,CAAC"}

package/lib/components/fields/MultiSchemaField.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import get from 'lodash-es/get.js';
 import isEmpty from 'lodash-es/isEmpty.js';
 import omit from 'lodash-es/omit.js';
-import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getUiOptions, getWidget, mergeSchemas, ONE_OF_KEY, TranslatableString, } from '@rjsf/utils';
+import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getTemplate, getUiOptions, getWidget, mergeSchemas, ONE_OF_KEY, TranslatableString, } 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`.
  *
@@ -31,7 +31,7 @@ class AnyOfField extends Component {
      * @param prevState - The previous `AnyOfFieldState` for this template
      */
     componentDidUpdate(prevProps, prevState) {
-        const { formData, options, idSchema } = this.props;
+        const { formData, options, fieldPathId } = this.props;
         const { selectedOption } = this.state;
         let newState = this.state;
         if (!deepEquals(prevProps.options, options)) {
@@ -40,7 +40,7 @@ class AnyOfField extends Component {
             const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
             newState = { selectedOption, retrievedOptions };
         }
-        if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+        if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
             const { retrievedOptions } = newState;
             const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
             if (prevState && matchingOption !== selectedOption) {
@@ -71,7 +71,7 @@ class AnyOfField extends Component {
      */
     onOptionChange = (option) => {
         const { selectedOption, retrievedOptions } = this.state;
-        const { formData, onChange, registry } = this.props;
+        const { formData, onChange, registry, fieldPathId } = this.props;
         const { schemaUtils } = registry;
         const intOption = option !== undefined ? parseInt(option, 10) : -1;
         if (intOption === selectedOption) {
@@ -86,12 +86,12 @@ class AnyOfField extends Component {
             newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
         }
         this.setState({ selectedOption: intOption }, () => {
-            onChange(newFormData, undefined, this.getFieldId());
+            onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
         });
     };
     getFieldId() {
-        const { idSchema, schema } = this.props;
-        return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
+        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`
      */
@@ -99,6 +99,7 @@ class AnyOfField extends Component {
         const { name, disabled = false, errorSchema = {}, formContext, onBlur, onFocus, readonly, registry, schema, uiSchema, } = this.props;
         const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
         const { SchemaField: _SchemaField } = fields;
+        const MultiSchemaFieldTemplate = getTemplate('MultiSchemaFieldTemplate', registry, globalUiOptions);
         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);
@@ -148,7 +149,10 @@ class AnyOfField extends Component {
                 value: index,
             };
         });
-        return (_jsxs("div", { className: 'panel panel-default panel-body', children: [_jsx("div", { className: 'form-group', children: _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, formContext: formContext, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly }) }), optionSchema && optionSchema.type !== 'null' && (_jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }))] }));
+        const selector = (_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, formContext: formContext, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly }));
+        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 }));
     }
 }
 export default AnyOfField;

package/lib/components/fields/NullField.js

@@ -5,12 +5,12 @@ import { useEffect } from 'react';
  * @param props - The `FieldProps` for this template
  */
 function NullField(props) {
-    const { formData, onChange } = props;
+    const { name, formData, onChange } = props;
     useEffect(() => {
         if (formData === undefined) {
-            onChange(null);
+            onChange(null, [name]);
         }
-    }, [formData, onChange]);
+    }, [name, formData, onChange]);
     return null;
 }
 export default NullField;

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,EAAyB,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAc/G;;;;;;;;;;;;;;;;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,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"}

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,7 +37,7 @@ function NumberField(props) {
      *
      * @param value - The current value for the change occurring
      */
-    const handleChange = useCallback((value, errorSchema, id) => {
+    const handleChange = useCallback((value, path, errorSchema, id) => {
         // Cache the original value in component state
         setLastValue(value);
         // Normalize decimals that don't start with a zero character in advance so
@@ -51,7 +51,7 @@ function NumberField(props) {
         const processed = typeof value === 'string' && value.match(trailingCharMatcherWithPrefix)
             ? asNumber(value.replace(trailingCharMatcher, ''))
             : asNumber(value);
-        onChange(processed, errorSchema, id);
+        onChange(processed, path, errorSchema, id);
     }, [onChange]);
     if (typeof lastValue === 'string' && typeof value === 'number') {
         // Construct a regular expression that checks for a string that consists

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { ErrorSchema, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ErrorSchema, FieldPathList, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** Type used for the state of the `ObjectField` component */
 type ObjectFieldState = {
     /** Flag indicating whether an additional property key was modified */
@@ -32,7 +32,7 @@ declare class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
      * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
      * @returns - The onPropertyChange callback for the `name` property
      */
-    onPropertyChange: (name: string, addedByAdditionalProperties?: boolean) => (value: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
+    onPropertyChange: (name: string, addedByAdditionalProperties?: boolean) => (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
     /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
      * and calls the `onChange` callback with it
      *
@@ -54,7 +54,7 @@ declare class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
      * @param oldValue - The old value of a field
      * @returns - The key change callback function
      */
-    onKeyChange: (oldValue: any) => (value: any, newErrorSchema: ErrorSchema<T>) => void;
+    onKeyChange: (oldValue: any) => (value: any) => void;
     /** Returns a default value to be used for a new additional schema property of the given `type`
      *
      * @param type - The type of the new additional schema property

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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAIL,WAAW,EACX,UAAU,EACV,eAAe,EAGf,UAAU,EACV,gBAAgB,EAOjB,MAAM,aAAa,CAAC;AAQrB,6DAA6D;AAC7D,KAAK,gBAAgB,GAAG;IACtB,sEAAsE;IACtE,sBAAsB,EAAE,OAAO,CAAC;IAChC,uCAAuC;IACvC,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;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,EACnB,gBAAgB,CACjB;IACC,+BAA+B;IAC/B,KAAK;;;MAGH;IAEF;;;;OAIG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM;IAKvB;;;;;;;OAOG;IACH,gBAAgB,GAAI,MAAM,MAAM,EAAE,qCAAmC,MAC3D,OAAO,CAAC,GAAG,SAAS,EAAE,iBAAiB,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,UAuB1E;IAEF;;;;;OAKG;IACH,mBAAmB,GAAI,KAAK,MAAM,MACxB,OAAO,SAAS,UAOxB;IAEF;;;;;;OAMG;IACH,eAAe,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,YAUnD;IAEF;;;;;OAKG;IACH,WAAW,GAAI,UAAU,GAAG,MAClB,OAAO,GAAG,EAAE,gBAAgB,WAAW,CAAC,CAAC,CAAC,UA4BlD;IAEF;;;OAGG;IACH,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC;IAsBzC;;;;OAIG;IACH,cAAc,GAAI,QAAQ,CAAC,gBAqCzB;IAEF;OACG;IACH,MAAM;CAuGP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAKL,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAOjB,MAAM,aAAa,CAAC;AAQrB,6DAA6D;AAC7D,KAAK,gBAAgB,GAAG;IACtB,sEAAsE;IACtE,sBAAsB,EAAE,OAAO,CAAC;IAChC,uCAAuC;IACvC,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;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,EACnB,gBAAgB,CACjB;IACC,+BAA+B;IAC/B,KAAK;;;MAGH;IAEF;;;;OAIG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM;IAKvB;;;;;;;OAOG;IACH,gBAAgB,GAAI,MAAM,MAAM,EAAE,qCAAmC,MAC3D,OAAO,CAAC,GAAG,SAAS,EAAE,MAAM,aAAa,EAAE,iBAAiB,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,UAc/F;IAEF;;;;;OAKG;IACH,mBAAmB,GAAI,KAAK,MAAM,MACxB,OAAO,SAAS,UAQxB;IAEF;;;;;;OAMG;IACH,eAAe,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,YAUnD;IAEF;;;;;OAKG;IACH,WAAW,GAAI,UAAU,GAAG,MAClB,OAAO,GAAG,UAqBlB;IAEF;;;OAGG;IACH,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC;IAsBzC;;;;OAIG;IACH,cAAc,GAAI,QAAQ,CAAC,gBAsCzB;IAEF;OACG;IACH,MAAM;CAmGP;AAED,eAAe,WAAW,CAAC"}