@rjsf/react-bootstrap 6.0.0-beta.8 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -9,27 +9,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"
     }
   },
@@ -44,7 +44,7 @@
   },
   "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/react-bootstrap.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/react-bootstrap.esm.js --format=umd --file=dist/react-bootstrap.umd.js --name=@rjsf/react-bootstrap",
     "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
@@ -61,8 +61,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.0.0-beta",
-    "@rjsf/utils": "^6.0.0-beta",
+    "@rjsf/core": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
     "react": ">=18",
     "react-bootstrap": "^2.x"
   },
@@ -71,12 +71,12 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@rjsf/core": "^6.0.0-beta.8",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.8",
-    "@rjsf/utils": "^6.0.0-beta.8",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.8",
-    "eslint": "^8.56.0",
-    "react-bootstrap": "^2.10.9"
+    "@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",
+    "react-bootstrap": "^2.10.10"
   },
   "publishConfig": {
     "access": "public"

package/src/AddButton/AddButton.tsx

@@ -10,10 +10,10 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   const { translateString } = registry;
   return (
     <Button
+      title={translateString(TranslatableString.AddItemButton)}
       {...props}
       style={{ width: '100%' }}
       className={`ml-1 ${props.className}`}
-      title={translateString(TranslatableString.AddItemButton)}
     >
       <BsPlus />
     </Button>

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -14,7 +14,7 @@ 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 { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,7 +2,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import {
-  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   buttonId,
   FormContextType,
@@ -17,24 +16,32 @@ export default function ArrayFieldTemplate<
   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 uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     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 },
@@ -44,32 +51,31 @@ export default function ArrayFieldTemplate<
       <Row className='p-0 m-0'>
         <Col className='p-0 m-0'>
           <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}
           />
-          <Container fluid key={`array-item-list-${idSchema.$id}`} className='p-0 m-0'>
-            {items &&
-              items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-                <ArrayFieldItemTemplate key={key} {...itemProps} />
-              ))}
+          <Container fluid key={`array-item-list-${fieldPathId.$id}`} className='p-0 m-0'>
+            {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+            {items}
             {canAdd && (
               <Container className=''>
                 <Row className='mt-2'>
                   <Col xs={9}></Col>
                   <Col xs={3} className='py-4 col-lg-3 col-3'>
                     <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

@@ -16,6 +16,7 @@ export default function BaseInputTemplate<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   required,
   readonly,
@@ -47,24 +48,24 @@ export default function BaseInputTemplate<
     <>
       <Form.Control
         id={id}
-        name={id}
+        name={htmlName || id}
         placeholder={placeholder}
         autoFocus={autofocus}
         required={required}
         disabled={disabled}
         readOnly={readonly}
         className={rawErrors.length > 0 ? 'is-invalid' : ''}
-        list={schema.examples ? examplesId<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         {...inputProps}
         value={value || value === 0 ? value : ''}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {children}
       {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

@@ -19,6 +19,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -49,10 +50,10 @@ export default function CheckboxWidget<
 
   const description = options.description || schema.description;
   return (
-    <Form.Group className={disabled || readonly ? 'disabled' : ''} aria-describedby={ariaDescribedByIds<T>(id)}>
+    <Form.Group className={disabled || readonly ? 'disabled' : ''} aria-describedby={ariaDescribedByIds(id)}>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -61,7 +62,7 @@ export default function CheckboxWidget<
       )}
       <Form.Check
         id={id}
-        name={id}
+        name={htmlName || id}
         label={labelValue(label, hideLabel || !label)}
         checked={typeof value === 'undefined' ? false : value}
         required={required}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -17,7 +17,19 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }: WidgetProps<T, S, F>) {
+>({
+  id,
+  htmlName,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
@@ -52,14 +64,14 @@ export default function CheckboxesWidget<
               className='bg-transparent border-0'
               type={'checkbox'}
               id={optionId(id, index)}
-              name={id}
+              name={htmlName || id}
               label={option.label}
               autoFocus={autofocus && index === 0}
               onChange={_onChange(index)}
               onBlur={_onBlur}
               onFocus={_onFocus}
               disabled={disabled || itemDisabled || readonly}
-              aria-describedby={ariaDescribedByIds<T>(id)}
+              aria-describedby={ariaDescribedByIds(id)}
             />
           );
         })}

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -10,11 +10,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 (
     <ListGroup as='ul' id={id}>

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -10,11 +10,11 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { idSchema, help, hasErrors } = props;
+  const { fieldPathId, help, hasErrors } = props;
   if (!help) {
     return null;
   }
-  const id = helpId<T>(idSchema);
+  const id = helpId(fieldPathId);
   return (
     <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
       {help}

package/src/FieldTemplate/FieldTemplate.tsx

@@ -26,8 +26,9 @@ export default function FieldTemplate<
   disabled,
   label,
   hidden,
-  onDropPropertyClick,
-  onKeyChange,
+  onKeyRename,
+  onKeyRenameBlur,
+  onRemoveProperty,
   readonly,
   required,
   schema,
@@ -50,8 +51,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

@@ -5,8 +5,14 @@ import { IoIosRemove } from '@react-icons/all-files/io/IoIosRemove';
 import { AiOutlineArrowUp } from '@react-icons/all-files/ai/AiOutlineArrowUp';
 import { AiOutlineArrowDown } from '@react-icons/all-files/ai/AiOutlineArrowDown';
 
+export type BootstrapIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = IconButtonProps<T, S, F> & ButtonProps;
+
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F> & ButtonProps,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return (
@@ -17,7 +23,7 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -26,7 +32,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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -37,7 +43,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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -46,7 +52,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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -54,8 +60,8 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   return (
     <IconButton
       title={translateString(TranslatableString.RemoveButton)}
-      {...props}
       variant='danger'
+      {...props}
       icon={<IoIosRemove />}
     />
   );

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,15 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import Card from 'react-bootstrap/Card';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ selector, optionSchemaField }: MultiSchemaFieldTemplateProps<T, S, F>) {
+  return (
+    <Card style={{ marginBottom: '1rem' }}>
+      <Card.Body>{selector}</Card.Body>
+      <Card.Body>{optionSchemaField}</Card.Body>
+    </Card>
+  );
+}

package/src/MultiSchemaFieldTemplate/index.ts

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

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -25,10 +25,11 @@ export default function ObjectFieldTemplate<
   properties,
   required,
   uiSchema,
-  idSchema,
+  fieldPathId,
   schema,
   formData,
-  onAddClick,
+  optionalDataControl,
+  onAddProperty,
   disabled,
   readonly,
   registry,
@@ -40,6 +41,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -48,17 +50,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}
@@ -66,6 +69,7 @@ export default function ObjectFieldTemplate<
         />
       )}
       <Container fluid className='p-0'>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element: any, index: number) => (
           <Row key={index} style={{ marginBottom: '10px' }} className={element.hidden ? 'd-none' : undefined}>
             <Col xs={12}> {element.content}</Col>
@@ -75,8 +79,8 @@ export default function ObjectFieldTemplate<
           <Row>
             <Col xs={{ offset: 9, span: 3 }} className='py-4'>
               <AddButton
-                id={buttonId<T>(idSchema, 'add')}
-                onClick={onAddClick(schema)}
+                id={buttonId(fieldPathId, 'add')}
+                onClick={onAddProperty}
                 disabled={disabled || readonly}
                 className='rjsf-object-property-expand'
                 uiSchema={uiSchema}

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,47 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { BsPlus } from '@react-icons/all-files/bs/BsPlus';
+
+import IconButton, { RemoveButton } 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 (
+      <IconButton
+        id={id}
+        registry={registry}
+        className='rjsf-add-optional-data'
+        icon={<BsPlus />}
+        onClick={onAddClick}
+        title={label}
+        size='sm'
+        variant='secondary'
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+        size='sm'
+        variant='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

@@ -13,6 +13,7 @@ import {
 
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -46,7 +47,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               label={option.label}
               id={optionId(id, index)}
               key={index}
-              name={id}
+              name={htmlName || id}
               type='radio'
               disabled={disabled || itemDisabled || readonly}
               checked={checked}
@@ -55,7 +56,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               onChange={_onChange}
               onBlur={_onBlur}
               onFocus={_onFocus}
-              aria-describedby={ariaDescribedByIds<T>(id)}
+              aria-describedby={ariaDescribedByIds(id)}
             />
           );
           return radio;

package/src/SelectWidget/SelectWidget.tsx

@@ -17,6 +17,7 @@ export default function SelectWidget<
 >({
   schema,
   id,
+  htmlName,
   options,
   required,
   disabled,
@@ -50,7 +51,7 @@ export default function SelectWidget<
   return (
     <FormSelect
       id={id}
-      name={id}
+      name={htmlName || id}
       value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
       required={required}
       multiple={multiple}
@@ -75,7 +76,7 @@ export default function SelectWidget<
         const newValue = getValue(event, multiple);
         onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
       }}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     >
       {showPlaceholderOption && <option value=''>{placeholder}</option>}
       {(enumOptions as any).map(({ value, label }: any, i: number) => {

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,
   };

package/src/TextareaWidget/TextareaWidget.tsx

@@ -17,6 +17,7 @@ export default function TextareaWidget<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   value,
   required,
@@ -37,7 +38,7 @@ export default function TextareaWidget<
     <InputGroup>
       <FormControl
         id={id}
-        name={id}
+        name={htmlName || id}
         as='textarea'
         placeholder={placeholder}
         disabled={disabled}
@@ -49,7 +50,7 @@ export default function TextareaWidget<
         onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id)}
+        aria-describedby={ariaDescribedByIds(id)}
       />
     </InputGroup>
   );