[feat] Add MultiSchemaFieldTemplate

- Add MultiSchemaFieldTemplate
- Refactor MultiSchemaField to use MultiSchemaFieldTemplate
- Add implementation of MultiSchemaFieldTemplate to each theme
- Documentation & migration guide for MultiSchemaFieldTemplate
- Update snapshots

Author: nickgros

CHANGELOG.md

@@ -21,15 +21,54 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/antd
 
 - Set peerDependency for `@ant-design/icons` to `^6.0.0`, fixing [#4643](https://github.com/rjsf-team/react-jsonschema-form/issues/4643)
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/chakra-ui
+
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/core
+
+- Refactored `MultiSchemaField` to use the `MultiSchemaFieldTemplate` provided by the registry.
+- Added `MultiSchemaFieldTemplate` component to maintain the same functionality as the previous `MultiSchemaField` implementation.
+
+## @rjsf/daisyui
+
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/fluentui-rc
+
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/mui
+
+- Added `MultiSchemaFieldTemplate`
 
 ## @rjsf/primereact
 
 - New theme!
 
+## @rjsf/react-bootstrap
+
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/semantic-ui
+
+- Added `MultiSchemaFieldTemplate`
+
+## @rjsf/shadcn
+
+- Added `MultiSchemaFieldTemplate`
+
 ## @rjsf/utils
 
 - Fixed issue where oneOf radio button could not be modified when defaults were set, fixing [#4634](https://github.com/rjsf-team/react-jsonschema-form/issues/4634)
 - Fix default value for object properties such as enums that are rendered in select, radio inputs, etc.
+- Add support for `MultiSchemaFieldTemplate`, with new `MultiSchemaFieldTemplateProps`, to the `TemplatesType` interface
+
+## Dev / docs / playground
+
+- Added documentation for the new `MultiSchemaFieldTemplate`
 
 # 6.0.0-beta.10
 

packages/antd/src/templates/MultiSchemaFieldTemplate/index.tsx

@@ -0,0 +1,16 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { optionSchemaField, selector } = props;
+
+  return (
+    <div>
+      <div>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

packages/antd/src/templates/index.ts

@@ -9,6 +9,7 @@ import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } fro
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldTemplate from './FieldTemplate';
 import GridTemplate from './GridTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import SubmitButton from './SubmitButton';
 import TitleField from './TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

packages/chakra-ui/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,16 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { optionSchemaField, selector } = props;
+
+  return (
+    <div>
+      <div>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

packages/chakra-ui/src/MultiSchemaFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiSchemaFieldTemplate';
+export * from './MultiSchemaFieldTemplate';

packages/chakra-ui/src/Templates/Templates.ts

@@ -9,6 +9,7 @@ import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
 import GridTemplate from '../GridTemplate';
+import MultiSchemaFieldTemplate from '../MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -38,6 +39,7 @@ export function generateTemplates<
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

packages/core/src/components/fields/MultiSchemaField.tsx

@@ -9,6 +9,7 @@ import {
   FieldProps,
   FormContextType,
   getDiscriminatorFieldFromSchema,
+  getTemplate,
   getUiOptions,
   getWidget,
   mergeSchemas,
@@ -157,6 +158,12 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
     const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
     const { SchemaField: _SchemaField } = fields;
+    const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
+      'MultiSchemaFieldTemplate',
+      registry,
+      globalUiOptions,
+    );
+
     const { selectedOption, retrievedOptions } = this.state;
     const {
       widget = 'select',
@@ -215,36 +222,45 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       };
     });
 
+    const selector = (
+      <Widget
+        id={this.getFieldId()}
+        name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
+        schema={{ type: 'number', default: 0 } as S}
+        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' && (
+        <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
+      )) ||
+      null;
+
     return (
-      <div className='panel panel-default panel-body'>
-        <div className='form-group'>
-          <Widget
-            id={this.getFieldId()}
-            name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
-            schema={{ type: 'number', default: 0 } as S}
-            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}
-          />
-        </div>
-        {optionSchema && optionSchema.type !== 'null' && (
-          <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
-        )}
-      </div>
+      <MultiSchemaFieldTemplate
+        schema={schema}
+        registry={registry}
+        uiSchema={uiSchema}
+        selector={selector}
+        optionSchemaField={optionsSchemaField}
+      />
     );
   }
 }

packages/core/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>
+  );
+}

packages/core/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,

packages/daisyui/src/templates/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,15 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { optionSchemaField, selector } = props;
+  return (
+    <div className='p-4 border rounded-sm shadow-sm'>
+      <div className='mb-4'>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}