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

package/src/components/fields/ObjectField.tsx

@@ -3,11 +3,12 @@ import {
   getTemplate,
   getUiOptions,
   orderProperties,
+  toFieldPathId,
   ErrorSchema,
+  FieldPathList,
   FieldProps,
   FormContextType,
   GenericObjectType,
-  IdSchema,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -66,8 +67,8 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    * @returns - The onPropertyChange callback for the `name` property
    */
   onPropertyChange = (name: string, addedByAdditionalProperties = false) => {
-    return (value: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      const { formData, onChange, errorSchema } = this.props;
+    return (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const { onChange } = this.props;
       if (value === undefined && addedByAdditionalProperties) {
         // Don't set value = undefined for fields added by
         // additionalProperties. Doing so removes them from the
@@ -78,16 +79,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
         // set empty values to the empty string.
         value = '' as unknown as T;
       }
-      const newFormData = { ...formData, [name]: value } as unknown as T;
-      onChange(
-        newFormData,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [name]: newErrorSchema,
-          },
-        id,
-      );
+      onChange(value, path, newErrorSchema, id);
     };
   };
 
@@ -100,10 +92,11 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   onDropPropertyClick = (key: string) => {
     return (event: DragEvent) => {
       event.preventDefault();
-      const { onChange, formData } = this.props;
+      const { onChange, formData, fieldPathId } = this.props;
       const copiedFormData = { ...formData } as T;
       unset(copiedFormData, key);
-      onChange(copiedFormData);
+      // drop property will pass the name in `path` array
+      onChange(copiedFormData, fieldPathId.path);
     };
   };
 
@@ -133,11 +126,11 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    * @returns - The key change callback function
    */
   onKeyChange = (oldValue: any) => {
-    return (value: any, newErrorSchema: ErrorSchema<T>) => {
+    return (value: any) => {
       if (oldValue === value) {
         return;
       }
-      const { formData, onChange, errorSchema } = this.props;
+      const { formData, onChange, fieldPathId } = this.props;
 
       value = this.getAvailableKey(value, formData);
       const newFormData: GenericObjectType = {
@@ -152,14 +145,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
 
       this.setState({ wasPropertyKeyModified: true });
 
-      onChange(
-        renamedObj,
-        errorSchema &&
-          errorSchema && {
-            ...errorSchema,
-            [value]: newErrorSchema,
-          },
-      );
+      onChange(renamedObj, fieldPathId.path);
     };
   };
 
@@ -198,7 +184,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const newFormData = { ...formData } as T;
     const newKey = this.getAvailableKey('newKey', newFormData);
     if (schema.patternProperties) {
@@ -230,7 +216,8 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       set(newFormData as GenericObjectType, newKey, newValue);
     }
 
-    onChange(newFormData);
+    // add will pass the name in `path` array
+    onChange(newFormData, fieldPathId.path);
   };
 
   /** Renders the `ObjectField` from the given props
@@ -241,21 +228,19 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       uiSchema = {},
       formData,
       errorSchema,
-      idSchema,
+      fieldPathId,
       name,
       required = false,
       disabled,
       readonly,
       hideError,
-      idPrefix,
-      idSeparator,
       onBlur,
       onFocus,
       registry,
       title,
     } = this.props;
 
-    const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
+    const { fields, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
     const { SchemaField } = fields;
     const schema: S = schemaUtils.retrieveSchema(rawSchema, formData);
     const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
@@ -290,7 +275,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
         const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
         const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
-        const fieldIdSchema: IdSchema<T> = get(idSchema, [name], {});
+        const innerFieldIdPathId = toFieldPathId(name, globalFormOptions, fieldPathId);
 
         return {
           content: (
@@ -301,9 +286,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
               schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
               uiSchema={fieldUiSchema}
               errorSchema={get(errorSchema, name)}
-              idSchema={fieldIdSchema}
-              idPrefix={idPrefix}
-              idSeparator={idSeparator}
+              fieldPathId={innerFieldIdPathId}
               formData={get(formData, name)}
               formContext={formContext}
               wasPropertyKeyModified={this.state.wasPropertyKeyModified}
@@ -328,7 +311,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       readonly,
       disabled,
       required,
-      idSchema,
+      fieldPathId,
       uiSchema,
       errorSchema,
       schema,

package/src/components/fields/SchemaField.tsx

@@ -1,9 +1,10 @@
 import { useCallback, Component, ComponentType } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
-  deepEquals,
   descriptionId,
   ErrorSchema,
+  FieldPathId,
+  FieldPathList,
   FieldProps,
   FieldTemplateProps,
   FormContextType,
@@ -11,10 +12,9 @@ import {
   getTemplate,
   getUiOptions,
   ID_KEY,
-  IdSchema,
-  mergeObjects,
   Registry,
   RJSFSchema,
+  shouldRender,
   StrictRJSFSchema,
   TranslatableString,
   UI_OPTIONS_KEY,
@@ -40,14 +40,14 @@ const COMPONENT_TYPES: { [key: string]: string } = {
  *
  * @param schema - The schema from which to obtain the type
  * @param uiOptions - The UI Options that may affect the component decision
- * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+ * @param fieldPathId - The id that is passed to the `UnsupportedFieldTemplate`
  * @param registry - The registry from which fields and templates are obtained
  * @returns - The `Field` component that is used to render the actual field data
  */
 function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   schema: S,
   uiOptions: UIOptionsType<T, S, F>,
-  idSchema: IdSchema<T>,
+  fieldPathId: FieldPathId,
   registry: Registry<T, S, F>,
 ): ComponentType<FieldProps<T, S, F>> {
   const field = uiOptions.field;
@@ -87,7 +87,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
         return (
           <UnsupportedFieldTemplate
             schema={schema}
-            idSchema={idSchema}
+            fieldPathId={fieldPathId}
             reason={translateString(TranslatableString.UnknownFieldType, [String(schema.type)])}
             registry={registry}
           />
@@ -106,12 +106,10 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 ) {
   const {
     schema: _schema,
-    idSchema: _idSchema,
+    fieldPathId,
     uiSchema,
     formData,
     errorSchema,
-    idPrefix,
-    idSeparator,
     name,
     onChange,
     onKeyChange,
@@ -131,24 +129,20 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const fieldId = _idSchema[ID_KEY];
-  const idSchema = mergeObjects(
-    schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
-    _idSchema,
-  ) as IdSchema<T>;
+  const fieldId = fieldPathId[ID_KEY];
 
   /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
    * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
    */
   const handleFieldComponentChange = useCallback(
-    (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+    (formData: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
       const theId = id || fieldId;
-      return onChange(formData, newErrorSchema, theId);
+      return onChange(formData, path, newErrorSchema, theId);
     },
     [fieldId, onChange],
   );
 
-  const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, idSchema, registry);
+  const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, fieldPathId, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
   const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
   const uiSchemaHideError = uiOptions.hideError;
@@ -172,7 +166,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <FieldComponent
       {...props}
       onChange={handleFieldComponentChange}
-      idSchema={idSchema}
+      fieldPathId={fieldPathId}
       schema={schema}
       uiSchema={fieldUiSchema}
       disabled={disabled}
@@ -185,7 +179,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     />
   );
 
-  const id = idSchema[ID_KEY];
+  const id = fieldPathId[ID_KEY];
 
   // If this schema has a title defined, but the user has set a new key/label, retain their input.
   let label;
@@ -213,7 +207,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const helpComponent = (
     <FieldHelpTemplate
       help={help}
-      idSchema={idSchema}
+      fieldPathId={fieldPathId}
       schema={schema}
       uiSchema={uiSchema}
       hasErrors={!hideError && __errors && __errors.length > 0}
@@ -229,7 +223,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       <FieldErrorTemplate
         errors={__errors}
         errorSchema={errorSchema}
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
@@ -238,7 +232,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const fieldProps: Omit<FieldTemplateProps<T, S, F>, 'children'> = {
     description: (
       <DescriptionFieldTemplate
-        id={descriptionId<T>(id)}
+        id={descriptionId(id)}
         description={description}
         schema={schema}
         uiSchema={uiSchema}
@@ -263,7 +257,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     displayLabel,
     classNames: classNames.join(' ').trim(),
     style: uiOptions.style,
-    formContext,
     formData,
     schema,
     uiSchema,
@@ -292,9 +285,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
+            fieldPathId={fieldPathId}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -316,9 +307,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
             errorSchema={errorSchema}
             formData={formData}
             formContext={formContext}
-            idPrefix={idPrefix}
-            idSchema={idSchema}
-            idSeparator={idSeparator}
+            fieldPathId={fieldPathId}
             onBlur={props.onBlur}
             onChange={props.onChange}
             onFocus={props.onFocus}
@@ -343,7 +332,12 @@ class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   FieldProps<T, S, F>
 > {
   shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
-    return !deepEquals(this.props, nextProps);
+    const {
+      registry: { globalFormOptions },
+    } = this.props;
+    const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
+
+    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }
 
   render() {

package/src/components/fields/StringField.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
   getWidget,
   getUiOptions,
@@ -7,6 +8,7 @@ import {
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
+  ErrorSchema,
 } from '@rjsf/utils';
 
 /** The `StringField` component is used to render a schema field that represents a string type
@@ -20,7 +22,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     schema,
     name,
     uiSchema,
-    idSchema,
+    fieldPathId,
     formData,
     required,
     disabled = false,
@@ -44,18 +46,25 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const label = uiTitle ?? title ?? name;
   const Widget = getWidget<T, S, F>(schema, widget, widgets);
+  const onWidgetChange = useCallback(
+    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {
+      // String field change passes an empty path array to the parent field which adds the appropriate path
+      return onChange(value, fieldPathId.path, errorSchema, id);
+    },
+    [onChange, fieldPathId],
+  );
   return (
     <Widget
       options={{ ...options, enumOptions }}
       schema={schema}
       uiSchema={uiSchema}
-      id={idSchema.$id}
+      id={fieldPathId.$id}
       name={name}
       label={label}
       hideLabel={!displayLabel}
       hideError={hideError}
       value={formData}
-      onChange={onChange}
+      onChange={onWidgetChange}
       onBlur={onBlur}
       onFocus={onFocus}
       required={required}

package/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rjsf/utils';
 
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldDescriptionProps` for the component
  */
@@ -18,7 +18,7 @@ export default function ArrayFieldDescriptionTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldDescriptionProps<T, S, F>) {
-  const { idSchema, description, registry, schema, uiSchema } = props;
+  const { fieldPathId, description, registry, schema, uiSchema } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!description || !displayLabel) {
@@ -31,7 +31,7 @@ export default function ArrayFieldDescriptionTemplate<
   );
   return (
     <DescriptionFieldTemplate
-      id={descriptionId<T>(idSchema)}
+      id={descriptionId(fieldPathId)}
       description={description}
       schema={schema}
       uiSchema={uiSchema}

package/src/components/templates/ArrayFieldItemButtonsTemplate.tsx

@@ -23,7 +23,7 @@ export default function ArrayFieldItemButtonsTemplate<
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
+    fieldPathId,
     index,
     onCopyIndexClick,
     onDropIndexClick,
@@ -42,7 +42,7 @@ export default function ArrayFieldItemButtonsTemplate<
     <>
       {(hasMoveUp || hasMoveDown) && (
         <MoveUpButton
-          id={buttonId<T>(idSchema, 'moveUp')}
+          id={buttonId(fieldPathId, 'moveUp')}
           className='rjsf-array-item-move-up'
           disabled={disabled || readonly || !hasMoveUp}
           onClick={onArrowUpClick}
@@ -52,7 +52,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {(hasMoveUp || hasMoveDown) && (
         <MoveDownButton
-          id={buttonId<T>(idSchema, 'moveDown')}
+          id={buttonId(fieldPathId, 'moveDown')}
           className='rjsf-array-item-move-down'
           disabled={disabled || readonly || !hasMoveDown}
           onClick={onArrowDownClick}
@@ -62,7 +62,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {hasCopy && (
         <CopyButton
-          id={buttonId<T>(idSchema, 'copy')}
+          id={buttonId(fieldPathId, 'copy')}
           className='rjsf-array-item-copy'
           disabled={disabled || readonly}
           onClick={onCopyClick}
@@ -72,7 +72,7 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {hasRemove && (
         <RemoveButton
-          id={buttonId<T>(idSchema, 'remove')}
+          id={buttonId(fieldPathId, 'remove')}
           className='rjsf-array-item-remove'
           disabled={disabled || readonly}
           onClick={onRemoveClick}

package/src/components/templates/ArrayFieldTemplate.tsx

@@ -22,7 +22,7 @@ export default function ArrayFieldTemplate<
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     uiSchema,
     items,
     onAddClick,
@@ -53,9 +53,9 @@ export default function ArrayFieldTemplate<
     ButtonTemplates: { AddButton },
   } = registry.templates;
   return (
-    <fieldset className={className} id={idSchema.$id}>
+    <fieldset className={className} id={fieldPathId.$id}>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         required={required}
         schema={schema}
@@ -63,7 +63,7 @@ export default function ArrayFieldTemplate<
         registry={registry}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
@@ -77,7 +77,7 @@ export default function ArrayFieldTemplate<
       </div>
       {canAdd && (
         <AddButton
-          id={buttonId<T>(idSchema, 'add')}
+          id={buttonId(fieldPathId, 'add')}
           className='rjsf-array-item-add'
           onClick={onAddClick}
           disabled={disabled || readonly}

package/src/components/templates/ArrayFieldTitleTemplate.tsx

@@ -10,7 +10,7 @@ import {
 } from '@rjsf/utils';
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */
@@ -19,7 +19,7 @@ export default function ArrayFieldTitleTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTitleProps<T, S, F>) {
-  const { idSchema, title, schema, uiSchema, required, registry } = props;
+  const { fieldPathId, title, schema, uiSchema, required, registry } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
@@ -32,7 +32,7 @@ export default function ArrayFieldTitleTemplate<
   );
   return (
     <TitleFieldTemplate
-      id={titleId<T>(idSchema)}
+      id={titleId(fieldPathId)}
       title={title}
       required={required}
       schema={schema}

package/src/components/templates/BaseInputTemplate.tsx

@@ -85,14 +85,14 @@ export default function BaseInputTemplate<
         autoFocus={autofocus}
         value={inputValue}
         {...inputProps}
-        list={schema.examples ? examplesId<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {Array.isArray(schema.examples) && (
-        <datalist key={`datalist_${id}`} id={examplesId<T>(id)}>
+        <datalist key={`datalist_${id}`} id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example: any) => {

package/src/components/templates/FieldErrorTemplate.tsx

@@ -9,11 +9,11 @@ export default function FieldErrorTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId<T>(idSchema);
+  const id = errorId(fieldPathId);
 
   return (
     <div>

package/src/components/templates/FieldHelpTemplate.tsx

@@ -9,11 +9,11 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = helpId<T>(idSchema);
+  const id = helpId(fieldPathId);
   if (typeof help === 'string') {
     return (
       <p id={id} className='help-block'>

package/src/components/templates/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,20 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
+ * a schema from a list of schemas defined using `anyOf` or `oneOf`.
+ *
+ * @param props - The `MultiSchemaFieldTemplate` to be rendered
+ */
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { selector, optionSchemaField } = props;
+  return (
+    <div className='panel panel-default panel-body'>
+      <div className='form-group'>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -27,7 +27,7 @@ export default function ObjectFieldTemplate<
     description,
     disabled,
     formData,
-    idSchema,
+    fieldPathId,
     onAddClick,
     properties,
     readonly,
@@ -49,10 +49,10 @@ export default function ObjectFieldTemplate<
     ButtonTemplates: { AddButton },
   } = registry.templates;
   return (
-    <fieldset id={idSchema.$id}>
+    <fieldset id={fieldPathId.$id}>
       {title && (
         <TitleFieldTemplate
-          id={titleId<T>(idSchema)}
+          id={titleId(fieldPathId)}
           title={title}
           required={required}
           schema={schema}
@@ -62,7 +62,7 @@ export default function ObjectFieldTemplate<
       )}
       {description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(idSchema)}
+          id={descriptionId(fieldPathId)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -72,7 +72,7 @@ export default function ObjectFieldTemplate<
       {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <AddButton
-          id={buttonId<T>(idSchema, 'add')}
+          id={buttonId(fieldPathId, 'add')}
           className='rjsf-object-property-expand'
           onClick={onAddClick(schema)}
           disabled={disabled || readonly}

package/src/components/templates/UnsupportedField.tsx

@@ -9,13 +9,13 @@ import Markdown from 'markdown-to-jsx';
 function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: UnsupportedFieldProps<T, S, F>,
 ) {
-  const { schema, idSchema, reason, registry } = props;
+  const { schema, fieldPathId, reason, registry } = props;
   const { translateString } = registry;
   let translateEnum: TranslatableString = TranslatableString.UnsupportedField;
   const translateParams: string[] = [];
-  if (idSchema && idSchema.$id) {
+  if (fieldPathId && fieldPathId.$id) {
     translateEnum = TranslatableString.UnsupportedFieldWithId;
-    translateParams.push(idSchema.$id);
+    translateParams.push(fieldPathId.$id);
   }
   if (reason) {
     translateEnum =

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -75,7 +75,7 @@ export default function WrapIfAdditionalTemplate<
         <div className='form-additional form-group col-xs-5'>{children}</div>
         <div className='col-xs-2'>
           <RemoveButton
-            id={buttonId<T>(id, 'remove')}
+            id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove btn-block'
             style={{ border: '0' }}
             disabled={disabled || readonly}

package/src/components/templates/index.ts

@@ -13,6 +13,7 @@ import FieldTemplate from './FieldTemplate';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
 import GridTemplate from './GridTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import TitleField from './TitleField';
 import UnsupportedField from './UnsupportedField';
@@ -37,6 +38,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     FieldErrorTemplate,
     FieldHelpTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField,