@rjsf/fluentui-rc 6.0.0-beta.9 → 6.0.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rjsf/fluentui-rc",
-  "version": "6.0.0-beta.9",
+  "version": "6.0.0",
   "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
   "scripts": {
     "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
     "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
@@ -31,27 +31,27 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
     "./lib": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
     "./lib/*.js": {
       "types": "./lib/*.d.ts",
-      "require": "./dist/*.js",
+      "require": "./dist/*.cjs",
       "import": "./lib/*.js"
     },
     "./dist": {
       "types": "./lib/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./lib/index.js"
     },
-    "./dist/*.js": {
+    "./dist/*.cjs": {
       "types": "./lib/*.d.ts",
-      "require": "./dist/*.js",
+      "require": "./dist/*.cjs",
       "import": "./lib/*.js"
     }
   },
@@ -65,22 +65,22 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.0.0-beta",
-    "@rjsf/utils": "^6.0.0-beta",
     "@fluentui/react-components": "^9.63.0",
     "@fluentui/react-icons": "^2.0.298",
     "@fluentui/react-migration-v0-v9": "^9.3.10",
+    "@rjsf/core": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
     "react": ">=18"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.63.0",
-    "@fluentui/react-icons": "^2.0.298",
-    "@fluentui/react-migration-v0-v9": "^9.3.10",
-    "@rjsf/core": "^6.0.0-beta.9",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.9",
-    "@rjsf/utils": "^6.0.0-beta.9",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.9",
-    "eslint": "^8.56.0"
+    "@fluentui/react-components": "^9.72.3",
+    "@fluentui/react-icons": "^2.0.313",
+    "@fluentui/react-migration-v0-v9": "^9.6.11",
+    "@rjsf/core": "^6.0.0-beta.23",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.23",
+    "eslint": "^8.57.1"
   },
   "directories": {
     "test": "test"

package/src/AddButton/AddButton.tsx

@@ -8,5 +8,5 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   ...props
 }: IconButtonProps<T, S, F>) {
   const { translateString } = registry;
-  return <Button {...props} icon={<AddRegular />} title={translateString(TranslatableString.AddItemButton)} />;
+  return <Button title={translateString(TranslatableString.AddItemButton)} {...props} icon={<AddRegular />} />;
 }

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,5 +1,5 @@
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -19,13 +19,13 @@ const useStyles = makeStyles({
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemTemplateType<T, S, F>) {
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
   const classes = useStyles();
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -4,7 +4,6 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -19,15 +18,27 @@ const useStyles = makeStyles({
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldTemplateProps` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
-  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
-    props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
   const classes = useStyles();
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
@@ -35,16 +46,12 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -52,29 +59,28 @@ export default function ArrayFieldTemplate<
   return (
     <>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
       />
-      <Flex column key={`array-item-list-${idSchema.$id}`} className={classes.arrayItemList}>
-        {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-            <ArrayFieldItemTemplate key={key} {...itemProps} />
-          ))}
+      <Flex column key={`array-item-list-${fieldPathId.$id}`} className={classes.arrayItemList}>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+        {items}
         {canAdd && (
           <Flex hAlign='end'>
             <AddButton
-              id={buttonId<T>(idSchema, 'add')}
+              id={buttonId(fieldPathId, 'add')}
               className='rjsf-array-item-add'
               onClick={onAddClick}
               disabled={disabled || readonly}

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -35,6 +35,7 @@ export default function BaseInputTemplate<
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -68,7 +69,7 @@ export default function BaseInputTemplate<
       )}
       <Input
         id={id}
-        name={id}
+        name={htmlName || id}
         placeholder={placeholder}
         autoFocus={autofocus}
         required={required}
@@ -77,16 +78,16 @@ export default function BaseInputTemplate<
         input={{
           className: classes.input,
           // Due to Fluent UI this does not work correctly
-          list: schema.examples ? examplesId<T>(id) : undefined,
+          list: schema.examples ? examplesId(id) : undefined,
         }}
         value={value || value === 0 ? value : ''}
         onChange={onChangeOverride || _onChange}
         onFocus={_onFocus}
         onBlur={_onBlur}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {Array.isArray(schema.examples) && (
-        <datalist id={examplesId<T>(id)}>
+        <datalist id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example: any) => {

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -24,6 +24,7 @@ export default function CheckboxWidget<
   const {
     schema,
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -48,15 +49,15 @@ export default function CheckboxWidget<
   const required = schemaRequiresTrueValue<S>(schema);
 
   const _onChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.checked);
   const description = options.description ?? schema.description;
 
   return (
     <>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -65,7 +66,7 @@ export default function CheckboxWidget<
       )}
       <Checkbox
         id={id}
-        name={id}
+        name={htmlName || id}
         label={label}
         checked={typeof value === 'undefined' ? false : Boolean(value)}
         required={required}
@@ -74,7 +75,7 @@ export default function CheckboxWidget<
         onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       />
     </>
   );

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -28,6 +28,7 @@ export default function CheckboxesWidget<
   label,
   hideLabel,
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -73,7 +74,7 @@ export default function CheckboxesWidget<
               <Checkbox
                 key={index}
                 id={optionId(id, index)}
-                name={id}
+                name={htmlName || id}
                 label={option.label}
                 checked={checked}
                 disabled={disabled || itemDisabled || readonly}
@@ -81,7 +82,7 @@ export default function CheckboxesWidget<
                 onChange={_onChange(index)}
                 onBlur={_onBlur}
                 onFocus={_onFocus}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
             );
           })}

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -20,13 +20,13 @@ 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;
   const classes = useStyles();
 
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId<T>(idSchema);
+  const id = errorId(fieldPathId);
 
   return (
     <ul className={classes.list}>

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -10,10 +10,10 @@ 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);
   return <Caption1 id={id}>{help}</Caption1>;
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -27,8 +27,9 @@ export default function FieldTemplate<
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     rawErrors = [],
@@ -57,8 +58,9 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
       readonly={readonly}
       required={required}
       schema={schema}

package/src/IconButton/IconButton.tsx

@@ -1,19 +1,25 @@
-import { Button } from '@fluentui/react-components';
+import { Button, ButtonProps } from '@fluentui/react-components';
 import { ArrowSortUpRegular, ArrowSortDownRegular, CopyRegular, SubtractRegular } from '@fluentui/react-icons';
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
+export type FluentIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = IconButtonProps<T, S, F> & Omit<ButtonProps, 'onChange' | 'as'>;
+
 export default function FluentIconButton<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: IconButtonProps<T, S, F>) {
+>(props: FluentIconButtonProps<T, S, F>) {
   const { color, uiSchema, registry, ...otherProps } = props;
 
   return <Button {...otherProps} color='secondary' />;
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: FluentIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -28,7 +34,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 }
 
 export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: FluentIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -43,7 +49,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
 }
 
 export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: FluentIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -58,7 +64,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
 }
 
 export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: FluentIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,25 @@
+import { makeStyles } from '@fluentui/react-components';
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  root: {
+    '> div': { marginBottom: '4px' },
+  },
+});
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { selector, optionSchemaField } = props;
+
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <div>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

package/src/MultiSchemaFieldTemplate/index.ts

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

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -31,10 +31,11 @@ export default function ObjectFieldTemplate<
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -44,6 +45,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -52,17 +54,18 @@ export default function ObjectFieldTemplate<
     <>
       {title && (
         <TitleFieldTemplate
-          id={titleId<T>(idSchema)}
+          id={titleId(fieldPathId)}
           title={title}
           required={required}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(idSchema)}
+          id={descriptionId(fieldPathId)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -70,6 +73,7 @@ export default function ObjectFieldTemplate<
         />
       )}
       <Flex fill column gap='gap.medium'>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element, index) =>
           // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
@@ -84,9 +88,9 @@ export default function ObjectFieldTemplate<
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
           <Flex hAlign='end'>
             <AddButton
-              id={buttonId<T>(idSchema, 'add')}
+              id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'
-              onClick={onAddClick(schema)}
+              onClick={onAddProperty}
               disabled={disabled || readonly}
               uiSchema={uiSchema}
               registry={registry}

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,48 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { AddSquareMultipleRegular, SubtractSquareMultipleRegular } from '@fluentui/react-icons';
+
+import FluentIconButton from '../IconButton';
+
+/** The OptionalDataControlsTemplate renders one of three different states. If
+ * there is an `onAddClick()` function, it renders the "Add" button. If there is
+ * an `onRemoveClick()` function, it renders the "Remove" button. Otherwise it
+ * renders the "No data found" section. All of them use the `label` as either
+ * the `title` of buttons or simply outputting it.
+ *
+ * @param props - The `OptionalDataControlsTemplateProps` for the template
+ */
+export default function OptionalDataControlsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: OptionalDataControlsTemplateProps<T, S, F>) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <FluentIconButton
+        id={id}
+        registry={registry}
+        icon={<AddSquareMultipleRegular />}
+        className='rjsf-add-optional-data'
+        onClick={onAddClick}
+        title={label}
+        size='small'
+        appearance='secondary'
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <FluentIconButton
+        id={id}
+        registry={registry}
+        icon={<SubtractSquareMultipleRegular />}
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+        size='small'
+        appearance='secondary'
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/OptionalDataControlsTemplate/index.ts

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

package/src/RadioWidget/RadioWidget.tsx

@@ -19,6 +19,7 @@ import { Label, Radio, RadioGroup, RadioGroupOnChangeData } from '@fluentui/reac
  */
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -51,13 +52,13 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       )}
       <RadioGroup
         id={id}
-        name={id}
+        name={htmlName || id}
         layout={inline ? 'horizontal' : 'vertical'}
         value={selectedIndex as string | undefined}
         onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       >
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {

package/src/RangeWidget/RangeWidget.tsx

@@ -42,7 +42,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onBlur={_onBlur}
         onFocus={_onFocus}
         {...sliderProps}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       />
     </>
   );

package/src/SelectWidget/SelectWidget.tsx

@@ -25,6 +25,7 @@ function getValue(data: OptionOnSelectData, multiple: boolean) {
  */
 function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   label,
   hideLabel,
@@ -72,7 +73,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
     >
       <Dropdown
         id={id}
-        name={id}
+        name={htmlName || id}
         multiselect={multiple}
         className='form-control'
         value={dropdownValue}
@@ -82,7 +83,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
         onFocus={_onFocus}
         onOptionSelect={_onChange}
         selectedOptions={selectedIndexesAsArray}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       >
         {showPlaceholderOption && <Option value=''>{placeholder || ''}</Option>}
         {Array.isArray(enumOptions) &&

package/src/Templates/Templates.ts

@@ -9,7 +9,9 @@ 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 OptionalDataControlsTemplate from '../OptionalDataControlsTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
 import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
@@ -38,7 +40,9 @@ export function generateTemplates<
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
   };