@rjsf/mui 5.24.10 → 6.0.0-beta.1

package/package.json

@@ -1,17 +1,45 @@
 {
   "name": "@rjsf/mui",
-  "version": "5.24.10",
+  "version": "6.0.0-beta.1",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
+  "type": "module",
   "description": "Material UI 5 theme, fields and widgets for react-jsonschema-form",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    },
+    "./dist": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./dist/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    }
+  },
   "files": [
     "dist",
     "lib",
     "src"
   ],
   "scripts": {
-    "compileReplacer": "tsc -p tsconfig.replacer.json",
+    "compileReplacer": "tsc -p tsconfig.replacer.json && move-file muiReplacer.js muiReplacer.cjs",
     "build:ts": "npm run compileReplacer && rimraf ./lib && 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:esm": "esbuild ./src/index.ts --bundle --outfile=dist/mui.esm.js --sourcemap --packages=external --format=esm",
@@ -30,49 +58,28 @@
     ]
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.2.0 || ^6.0.0",
-    "@mui/material": "^5.2.2 || ^6.0.0",
-    "@rjsf/core": "^5.24.x",
-    "@rjsf/utils": "^5.24.x",
-    "react": ">=17"
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@rjsf/core": "^6.x",
+    "@rjsf/utils": "^6.x",
+    "react": ">=18"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/base": "5.0.0-beta.28",
-    "@mui/icons-material": "6.0.2",
-    "@mui/material": "6.0.2",
-    "@rjsf/core": "^5.24.10",
-    "@rjsf/snapshot-tests": "^5.24.10",
-    "@rjsf/utils": "^5.24.10",
-    "@rjsf/validator-ajv8": "^5.24.10",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-test-renderer": "^18.0.7",
-    "babel-jest": "^29.7.0",
-    "eslint": "^8.56.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-watch-typeahead": "^2.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
-    "typescript": "^4.9.5"
+    "@mui/icons-material": "^6.4.11",
+    "@mui/material": "^6.4.11",
+    "@rjsf/core": "^6.0.0-beta.1",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.1",
+    "@rjsf/utils": "^6.0.0-beta.1",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.1",
+    "eslint": "^8.56.0"
   },
   "publishConfig": {
     "access": "public"
@@ -99,6 +106,5 @@
     "type": "git",
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
-  "license": "Apache-2.0",
-  "gitHead": "ad33d7c324cb040d0f34da30a17caea0251f1e3a"
+  "license": "Apache-2.0"
 }

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,35 +1,32 @@
 import { CSSProperties } from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getUiOptions,
+  getTemplate,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    children,
-    disabled,
-    hasToolbar,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
-    uiSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    uiOptions,
+  );
   const btnStyle: CSSProperties = {
     flex: 1,
     paddingLeft: 6,
@@ -38,54 +35,19 @@ export default function ArrayFieldItemTemplate<
     minWidth: 0,
   };
   return (
-    <Grid container={true} alignItems='center'>
-      <Grid item={true} xs style={{ overflow: 'auto' }}>
+    <Grid2 container={true} alignItems='center'>
+      <Grid2 size='auto' style={{ overflow: 'auto' }}>
         <Box mb={2}>
           <Paper elevation={2}>
             <Box p={2}>{children}</Box>
           </Paper>
         </Box>
-      </Grid>
+      </Grid2>
       {hasToolbar && (
-        <Grid item={true}>
-          {(hasMoveUp || hasMoveDown) && (
-            <MoveUpButton
-              style={btnStyle}
-              disabled={disabled || readonly || !hasMoveUp}
-              onClick={onReorderClick(index, index - 1)}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
-          {(hasMoveUp || hasMoveDown) && (
-            <MoveDownButton
-              style={btnStyle}
-              disabled={disabled || readonly || !hasMoveDown}
-              onClick={onReorderClick(index, index + 1)}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
-          {hasCopy && (
-            <CopyButton
-              style={btnStyle}
-              disabled={disabled || readonly}
-              onClick={onCopyIndexClick(index)}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
-          {hasRemove && (
-            <RemoveButton
-              style={btnStyle}
-              disabled={disabled || readonly}
-              onClick={onDropIndexClick(index)}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
-        </Grid>
+        <Grid2>
+          <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
+        </Grid2>
       )}
-    </Grid>
+    </Grid2>
   );
 }

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,24 +1,25 @@
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
+  buttonId,
 } from '@rjsf/utils';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
     props;
@@ -26,17 +27,17 @@ export default function ArrayFieldTemplate<
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
     'ArrayFieldItemTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -61,23 +62,24 @@ export default function ArrayFieldTemplate<
           registry={registry}
         />
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (
-          <Grid container justifyContent='flex-end'>
-            <Grid item={true}>
+          <Grid2 container justifyContent='flex-end'>
+            <Grid2>
               <Box mt={2}>
                 <AddButton
-                  className='array-item-add'
+                  id={buttonId<T>(idSchema, 'add')}
+                  className='rjsf-array-item-add'
                   onClick={onAddClick}
                   disabled={disabled || readonly}
                   uiSchema={uiSchema}
                   registry={registry}
                 />
               </Box>
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         )}
       </Box>
     </Paper>

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -22,7 +22,7 @@ const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
 export default function BaseInputTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -21,7 +21,7 @@ import {
 export default function CheckboxWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const {
     schema,
@@ -42,7 +42,7 @@ export default function CheckboxWidget<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -25,7 +25,7 @@ import {
 export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   label,
   hideLabel,
@@ -64,7 +64,7 @@ export default function CheckboxesWidget<
         <FormLabel required={required} htmlFor={id}>
           {label || undefined}
         </FormLabel>,
-        hideLabel
+        hideLabel,
       )}
       <FormGroup id={id} row={!!inline}>
         {Array.isArray(enumOptions) &&

package/src/DescriptionField/DescriptionField.tsx

@@ -8,7 +8,7 @@ import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema }
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: DescriptionFieldProps<T, S, F>) {
   const { id, description } = props;
   if (description) {

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -10,7 +10,7 @@ import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema
 export default function FieldErrorTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -8,7 +8,7 @@ import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema }
 export default function FieldHelpTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
   const { idSchema, help } = props;
   if (!help) {

package/src/FieldTemplate/FieldTemplate.tsx

@@ -17,7 +17,7 @@ import {
 export default function FieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: FieldTemplateProps<T, S, F>) {
   const {
     id,
@@ -45,7 +45,7 @@ export default function FieldTemplate<
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
     'WrapIfAdditionalTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
 
   if (hidden) {

package/src/GridTemplate/GridTemplate.tsx

@@ -0,0 +1,16 @@
+import Grid2 from '@mui/material/Grid2';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid2`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  return (
+    <Grid2 container={!column} {...rest}>
+      {children}
+    </Grid2>
+  );
+}

package/src/GridTemplate/index.ts

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

package/src/IconButton/IconButton.tsx

@@ -8,7 +8,7 @@ import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, Transla
 export default function MuiIconButton<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: IconButtonProps<T, S, F>) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
   return (
@@ -19,7 +19,7 @@ export default function MuiIconButton<
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>
+  props: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -34,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: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -49,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: IconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -64,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: IconButtonProps<T, S, F>,
 ) {
   const { iconType, ...otherProps } = props;
   const {

package/src/MuiForm/MuiForm.tsx

@@ -7,7 +7,7 @@ import { generateTheme } from '../Theme';
 export function generateForm<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): ComponentType<FormProps<T, S, F>> {
   return withTheme<T, S, F>(generateTheme<T, S, F>());
 }

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import {
   FormContextType,
   ObjectFieldTemplateProps,
@@ -9,6 +9,7 @@ import {
   getTemplate,
   getUiOptions,
   titleId,
+  buttonId,
 } from '@rjsf/utils';
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -20,7 +21,7 @@ import {
 export default function ObjectFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const {
     description,
@@ -41,7 +42,7 @@ export default function ObjectFieldTemplate<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -68,32 +69,33 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid container={true} spacing={2} style={{ marginTop: '10px' }}>
+      <Grid2 container={true} spacing={2} style={{ marginTop: '10px' }}>
         {properties.map((element, index) =>
-          // Remove the <Grid> if the inner element is hidden as the <Grid>
+          // Remove the <Grid2> if the inner element is hidden as the <Grid2>
           // itself would otherwise still take up space.
           element.hidden ? (
             element.content
           ) : (
-            <Grid item={true} xs={12} key={index} style={{ marginBottom: '10px' }}>
+            <Grid2 size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
               {element.content}
-            </Grid>
-          )
+            </Grid2>
+          ),
         )}
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <Grid container justifyContent='flex-end'>
-            <Grid item={true}>
+          <Grid2 container justifyContent='flex-end'>
+            <Grid2>
               <AddButton
-                className='object-property-expand'
+                id={buttonId<T>(idSchema, 'add')}
+                className='rjsf-object-property-expand'
                 onClick={onAddClick(schema)}
                 disabled={disabled || readonly}
                 uiSchema={uiSchema}
                 registry={registry}
               />
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         )}
-      </Grid>
+      </Grid2>
     </>
   );
 }

package/src/RadioWidget/RadioWidget.tsx

@@ -50,7 +50,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         <FormLabel required={required} htmlFor={id}>
           {label || undefined}
         </FormLabel>,
-        hideLabel
+        hideLabel,
       )}
       <RadioGroup
         id={id}

package/src/RangeWidget/RangeWidget.tsx

@@ -17,7 +17,7 @@ import {
  * @param props - The `WidgetProps` for this component
  */
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } =
     props;
@@ -35,7 +35,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         <FormLabel required={required} htmlFor={id}>
           {label || undefined}
         </FormLabel>,
-        hideLabel
+        hideLabel,
       )}
       <Slider
         disabled={disabled || readonly}

package/src/SelectWidget/SelectWidget.tsx

@@ -20,7 +20,7 @@ import {
 export default function SelectWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({
   schema,
   id,

package/src/SubmitButton/SubmitButton.tsx

@@ -7,7 +7,7 @@ import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema,
 export default function SubmitButton<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({ uiSchema }: SubmitButtonProps<T, S, F>) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions<T, S, F>(uiSchema);
   if (norender) {

package/src/Templates/Templates.ts

@@ -10,6 +10,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
+import GridTemplate from '../GridTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -18,7 +19,7 @@ import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
 export function generateTemplates<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): Partial<TemplatesType<T, S, F>> {
   return {
     ArrayFieldItemTemplate,
@@ -37,6 +38,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

package/src/TextareaWidget/TextareaWidget.tsx

@@ -7,7 +7,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, getTemplate
 export default function TextareaWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/Theme/Theme.tsx

@@ -7,7 +7,7 @@ import { generateWidgets } from '../Widgets';
 export function generateTheme<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): ThemeProps<T, S, F> {
   return {
     templates: generateTemplates<T, S, F>(),