From f47cd59b882f9404f3500eb7fc1efb161734ecd2 Mon Sep 17 00:00:00 2001
From: Heath C <51679588+heath-freenome@users.noreply.github.com>
Date: Thu, 29 Dec 2022 10:17:53 -0800
Subject: [PATCH] fix: Add generic type support to the mui theme (#3319)

partially fix: #3072 by adding generic type support to the mui theme
- In `@rjsf/core` added a few missing generics to utility function calls in `CheckboxWidget`, `ObjectFieldTemplate`, `SubmitButton` and `SelectWidget`
- In `@rjsf/mui` added generic type support as follows:
  - Updated all of the template and widget components to add the `T = any`, `S extends StrictRJSFSchema = RJSFSchema` and `F extends FormContextType = any` generics on the function definitions, types and utility function calls
  - Added a `generateForm<T, S, F>()` function to `MuiForm.tsx`, exporting it and exporting the default `MuiForm` as a call to `generateForm()`
  - Added a `generateTemplates<T, S, F>()` function to the `Templates.tsx`, exporting it and exporting the default `Templates` as a call to `generateTemplates()`
  - Added a `generateTheme<T, S, F>()` function to the `Theme.tsx`, exporting it and exporting the default `Theme` as a call to `generateTheme()`
  - Added a `generateWidgets<T, S, F>()` function to the `Widgets.tsx`, exporting it and exporting the default `Widgets` as a call to `generateWidgets()`
  - Updated the main `index.ts` for the theme to also export the `generateXXX()` functions
- Fixed the number of new packages listes in the upgrade guide from 3 to 4
- Updated the `CHANGELOG.md` accordingly
---
 CHANGELOG.md                                  |  2 +
 docs/5.x upgrade guide.md                     |  2 +-
 .../ButtonTemplates/SubmitButton.tsx          |  2 +-
 .../templates/ObjectFieldTemplate.tsx         |  2 +-
 .../src/components/widgets/CheckboxWidget.tsx |  2 +-
 .../src/components/widgets/SelectWidget.tsx   |  9 ++-
 packages/mui/src/AddButton/AddButton.tsx      | 23 +++---
 .../ArrayFieldItemTemplate.tsx                | 21 ++++--
 .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 54 ++++++++------
 .../BaseInputTemplate/BaseInputTemplate.tsx   | 67 ++++++++++-------
 .../mui/src/CheckboxWidget/CheckboxWidget.tsx | 25 +++++--
 .../src/CheckboxesWidget/CheckboxesWidget.tsx | 24 ++++--
 .../mui/src/DateTimeWidget/DateTimeWidget.tsx | 27 +++++--
 packages/mui/src/DateWidget/DateWidget.tsx    | 25 +++++--
 .../src/DescriptionField/DescriptionField.tsx | 22 ++++--
 packages/mui/src/ErrorList/ErrorList.tsx      | 21 ++++--
 .../FieldErrorTemplate/FieldErrorTemplate.tsx | 13 +++-
 .../FieldHelpTemplate/FieldHelpTemplate.tsx   | 13 +++-
 .../mui/src/FieldTemplate/FieldTemplate.tsx   | 74 +++++++++++--------
 packages/mui/src/IconButton/IconButton.tsx    | 31 ++++++--
 packages/mui/src/MuiForm/MuiForm.tsx          | 13 +++-
 .../ObjectFieldTemplate.tsx                   | 61 +++++++++------
 packages/mui/src/RadioWidget/RadioWidget.tsx  | 24 ++++--
 packages/mui/src/RangeWidget/RangeWidget.tsx  | 50 ++++++++-----
 .../mui/src/SelectWidget/SelectWidget.tsx     | 31 +++++---
 .../mui/src/SubmitButton/SubmitButton.tsx     | 24 ++++--
 packages/mui/src/Templates/Templates.ts       | 55 +++++++++-----
 .../mui/src/TextareaWidget/TextareaWidget.tsx | 24 ++++--
 packages/mui/src/Theme/Theme.tsx              | 21 ++++--
 packages/mui/src/TitleField/TitleField.tsx    | 21 ++++--
 packages/mui/src/Widgets/Widgets.ts           | 35 ++++++---
 .../WrapIfAdditionalTemplate.tsx              | 45 ++++++-----
 packages/mui/src/index.ts                     |  8 +-
 33 files changed, 595 insertions(+), 276 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cea300ab84..8fcd27cae9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,7 @@ should change the heading of the (upcoming) version to include a major version b
   - Also, passed `registry` into the `SubmitButton` inside of the `Form` as part of this fix
 - Updated `ArrayField` to pass the new `totalItems` prop to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315)
   - Also refactored the near duplicate logic for `onAddClick` and `onAddIndexClick` into a new `_handleAddClick()` function, fixing [#3316](https://github.com/rjsf-team/react-jsonschema-form/issues/3316)
+- Fix passing of generic types to a few helper methods, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072)
 
 ## @rjsf/fluent-ui
 - Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
@@ -48,6 +49,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/mui
 - Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
 - Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+- Updated the theme to accept generic types, exporting `generateXXX` functions for `Form`, `Theme`, `Templates` and `Widgets` to support using the theme with user-specified type generics, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072)
 
 ## @rjsf/semantic-ui
 - Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
diff --git a/docs/5.x upgrade guide.md b/docs/5.x upgrade guide.md
index 47f3365997..e974b5d3d3 100644
--- a/docs/5.x upgrade guide.md	
+++ b/docs/5.x upgrade guide.md	
@@ -24,7 +24,7 @@ Unfortunately, there is required work pending to properly support React 18, so u
 
 ### New packages
 
-There are three new packages added in RJSF version 5:
+There are four new packages added in RJSF version 5:
 
 - `@rjsf/utils`: All of the [utility functions](https://react-jsonschema-form.readthedocs.io/en/stable/api-reference/utiltity-functions) previously imported from `@rjsf/core/utils` as well as the Typescript types for RJSF version 5.
   - The following new utility functions were added: `createSchemaUtils()`, `getInputProps()`, `mergeValidationData()` and `processSelectValue()`
diff --git a/packages/core/src/components/templates/ButtonTemplates/SubmitButton.tsx b/packages/core/src/components/templates/ButtonTemplates/SubmitButton.tsx
index 7b5085cca4..dd3fc415cc 100644
--- a/packages/core/src/components/templates/ButtonTemplates/SubmitButton.tsx
+++ b/packages/core/src/components/templates/ButtonTemplates/SubmitButton.tsx
@@ -18,7 +18,7 @@ export default function SubmitButton<
     submitText,
     norender,
     props: submitButtonProps = {},
-  } = getSubmitButtonOptions(uiSchema);
+  } = getSubmitButtonOptions<T, S, F>(uiSchema);
   if (norender) {
     return null;
   }
diff --git a/packages/core/src/components/templates/ObjectFieldTemplate.tsx b/packages/core/src/components/templates/ObjectFieldTemplate.tsx
index ce2be8b2eb..e63fce64ed 100644
--- a/packages/core/src/components/templates/ObjectFieldTemplate.tsx
+++ b/packages/core/src/components/templates/ObjectFieldTemplate.tsx
@@ -73,7 +73,7 @@ export default function ObjectFieldTemplate<
         />
       )}
       {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
-      {canExpand(schema, uiSchema, formData) && (
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <AddButton
           className="object-property-expand"
           onClick={onAddClick(schema)}
diff --git a/packages/core/src/components/widgets/CheckboxWidget.tsx b/packages/core/src/components/widgets/CheckboxWidget.tsx
index c180c3ddb7..d84cf4f3bc 100644
--- a/packages/core/src/components/widgets/CheckboxWidget.tsx
+++ b/packages/core/src/components/widgets/CheckboxWidget.tsx
@@ -41,7 +41,7 @@ function CheckboxWidget<
   // 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
   // "const" or "enum" keywords
-  const required = schemaRequiresTrueValue(schema);
+  const required = schemaRequiresTrueValue<S>(schema);
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/packages/core/src/components/widgets/SelectWidget.tsx
index 3cbb8374f1..a0af68be79 100644
--- a/packages/core/src/components/widgets/SelectWidget.tsx
+++ b/packages/core/src/components/widgets/SelectWidget.tsx
@@ -50,7 +50,10 @@ function SelectWidget<
   const handleFocus = useCallback(
     (event: FocusEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, processSelectValue(schema, newValue, options));
+      return onFocus(
+        id,
+        processSelectValue<T, S, F>(schema, newValue, options)
+      );
     },
     [onFocus, id, schema, multiple, options]
   );
@@ -58,7 +61,7 @@ function SelectWidget<
   const handleBlur = useCallback(
     (event: FocusEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, processSelectValue(schema, newValue, options));
+      return onBlur(id, processSelectValue<T, S, F>(schema, newValue, options));
     },
     [onBlur, id, schema, multiple, options]
   );
@@ -66,7 +69,7 @@ function SelectWidget<
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onChange(processSelectValue(schema, newValue, options));
+      return onChange(processSelectValue<T, S, F>(schema, newValue, options));
     },
     [onChange, schema, multiple, options]
   );
diff --git a/packages/mui/src/AddButton/AddButton.tsx b/packages/mui/src/AddButton/AddButton.tsx
index efeb631fbd..d91ab01966 100644
--- a/packages/mui/src/AddButton/AddButton.tsx
+++ b/packages/mui/src/AddButton/AddButton.tsx
@@ -1,18 +1,23 @@
 import React from "react";
 import AddIcon from "@mui/icons-material/Add";
 import IconButton from "@mui/material/IconButton";
-import { IconButtonProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-const AddButton: React.ComponentType<IconButtonProps> = ({
-  uiSchema,
-  registry,
-  ...props
-}) => {
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema, registry, ...props }: IconButtonProps<T, S, F>) {
   return (
     <IconButton title="Add Item" {...props} color="primary">
       <AddIcon />
     </IconButton>
   );
-};
-
-export default AddButton;
+}
diff --git a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index 3050a5667b..c66660e05c 100644
--- a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -2,9 +2,22 @@ import React, { CSSProperties } from "react";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
-import { ArrayFieldTemplateItemType } from "@rjsf/utils";
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` 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,
@@ -70,6 +83,4 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
       )}
     </Grid>
   );
-};
-
-export default ArrayFieldItemTemplate;
+}
diff --git a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 591495954a..1a4d1c347c 100644
--- a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -3,13 +3,24 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import {
-  ArrayFieldTemplateItemType,
-  ArrayFieldTemplateProps,
   getTemplate,
   getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
 } from "@rjsf/utils";
 
-const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` 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,
@@ -23,23 +34,24 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
     schema,
     title,
   } = props;
-  const uiOptions = getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate =
-    getTemplate<"ArrayFieldDescriptionTemplate">(
-      "ArrayFieldDescriptionTemplate",
-      registry,
-      uiOptions
-    );
-  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate">(
+  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">(
+  const ArrayFieldTitleTemplate = getTemplate<
     "ArrayFieldTitleTemplate",
-    registry,
-    uiOptions
-  );
+    T,
+    S,
+    F
+  >("ArrayFieldTitleTemplate", registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -64,9 +76,11 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
         />
         <Grid container={true} key={`array-item-list-${idSchema.$id}`}>
           {items &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
-              <ArrayFieldItemTemplate key={key} {...itemProps} />
-            ))}
+            items.map(
+              ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+                <ArrayFieldItemTemplate key={key} {...itemProps} />
+              )
+            )}
           {canAdd && (
             <Grid container justifyContent="flex-end">
               <Grid item={true}>
@@ -86,6 +100,4 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       </Box>
     </Paper>
   );
-};
-
-export default ArrayFieldTemplate;
+}
diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx
index af1dba4d30..65566bf9a9 100644
--- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -1,29 +1,46 @@
 import React from "react";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { getInputProps, WidgetProps } from "@rjsf/utils";
+import {
+  getInputProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const BaseInputTemplate = ({
-  id,
-  placeholder,
-  required,
-  readonly,
-  disabled,
-  type,
-  label,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  autofocus,
-  options,
-  schema,
-  uiSchema,
-  rawErrors = [],
-  formContext,
-  registry,
-  ...textFieldProps
-}: WidgetProps) => {
-  const inputProps = getInputProps(schema, type, options);
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    type,
+    label,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    formContext,
+    registry,
+    ...textFieldProps
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   const { step, min, max, ...rest } = inputProps;
   const otherProps = {
@@ -77,6 +94,4 @@ const BaseInputTemplate = ({
       )}
     </>
   );
-};
-
-export default BaseInputTemplate;
+}
diff --git a/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx
index 412d44e8b7..e76ef912b9 100644
--- a/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx
+++ b/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,9 +1,24 @@
 import React from "react";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { schemaRequiresTrueValue, WidgetProps } from "@rjsf/utils";
+import {
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const CheckboxWidget = (props: WidgetProps) => {
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     schema,
     id,
@@ -19,7 +34,7 @@ const CheckboxWidget = (props: WidgetProps) => {
   // 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
   // "const" or "enum" keywords
-  const required = schemaRequiresTrueValue(schema);
+  const required = schemaRequiresTrueValue<S>(schema);
 
   const _onChange = (_: any, checked: boolean) => onChange(checked);
   const _onBlur = ({
@@ -47,6 +62,4 @@ const CheckboxWidget = (props: WidgetProps) => {
       label={label || ""}
     />
   );
-};
-
-export default CheckboxWidget;
+}
diff --git a/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx
index 49c1158e6d..e02f105fcf 100644
--- a/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx
+++ b/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -3,7 +3,12 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 import FormLabel from "@mui/material/FormLabel";
-import { WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
 const selectValue = (value: any, selected: any, all: any) => {
   const at = all.indexOf(value);
@@ -18,7 +23,16 @@ const deselectValue = (value: any, selected: any) => {
   return selected.filter((v: any) => v !== value);
 };
 
-const CheckboxesWidget = ({
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
   schema,
   label,
   id,
@@ -31,7 +45,7 @@ const CheckboxesWidget = ({
   onChange,
   onBlur,
   onFocus,
-}: WidgetProps) => {
+}: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline } = options;
 
   const _onChange =
@@ -88,6 +102,4 @@ const CheckboxesWidget = ({
       </FormGroup>
     </>
   );
-};
-
-export default CheckboxesWidget;
+}
diff --git a/packages/mui/src/DateTimeWidget/DateTimeWidget.tsx b/packages/mui/src/DateTimeWidget/DateTimeWidget.tsx
index c89802c5ae..ef39a8afc6 100644
--- a/packages/mui/src/DateTimeWidget/DateTimeWidget.tsx
+++ b/packages/mui/src/DateTimeWidget/DateTimeWidget.tsx
@@ -1,9 +1,26 @@
 import React from "react";
-import { getTemplate, localToUTC, utcToLocal, WidgetProps } from "@rjsf/utils";
+import {
+  getTemplate,
+  localToUTC,
+  utcToLocal,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const DateTimeWidget = (props: WidgetProps) => {
+/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+ * the value to/from utc using the appropriate utility functions.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const { options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate">(
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>(
     "BaseInputTemplate",
     registry,
     options
@@ -24,6 +41,4 @@ const DateTimeWidget = (props: WidgetProps) => {
       onChange={onChange}
     />
   );
-};
-
-export default DateTimeWidget;
+}
diff --git a/packages/mui/src/DateWidget/DateWidget.tsx b/packages/mui/src/DateWidget/DateWidget.tsx
index 90ac16f47d..2a96a0e902 100644
--- a/packages/mui/src/DateWidget/DateWidget.tsx
+++ b/packages/mui/src/DateWidget/DateWidget.tsx
@@ -1,9 +1,24 @@
 import React from "react";
-import { getTemplate, WidgetProps } from "@rjsf/utils";
+import {
+  getTemplate,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const DateWidget = (props: WidgetProps) => {
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const { options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate">(
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>(
     "BaseInputTemplate",
     registry,
     options
@@ -17,6 +32,4 @@ const DateWidget = (props: WidgetProps) => {
       {...props}
     />
   );
-};
-
-export default DateWidget;
+}
diff --git a/packages/mui/src/DescriptionField/DescriptionField.tsx b/packages/mui/src/DescriptionField/DescriptionField.tsx
index 7da6e3e8db..de115c3737 100644
--- a/packages/mui/src/DescriptionField/DescriptionField.tsx
+++ b/packages/mui/src/DescriptionField/DescriptionField.tsx
@@ -1,8 +1,22 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
-import { DescriptionFieldProps } from "@rjsf/utils";
+import {
+  DescriptionFieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-const DescriptionField = ({ description, id }: DescriptionFieldProps) => {
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
   if (description) {
     return (
       <Typography id={id} variant="subtitle2" style={{ marginTop: "5px" }}>
@@ -12,6 +26,4 @@ const DescriptionField = ({ description, id }: DescriptionFieldProps) => {
   }
 
   return null;
-};
-
-export default DescriptionField;
+}
diff --git a/packages/mui/src/ErrorList/ErrorList.tsx b/packages/mui/src/ErrorList/ErrorList.tsx
index d39a4ee2d9..6b57b6d05d 100644
--- a/packages/mui/src/ErrorList/ErrorList.tsx
+++ b/packages/mui/src/ErrorList/ErrorList.tsx
@@ -7,9 +7,22 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import { ErrorListProps } from "@rjsf/utils";
+import {
+  ErrorListProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-const ErrorList = ({ errors }: ErrorListProps) => {
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ errors }: ErrorListProps<T, S, F>) {
   return (
     <Paper elevation={2}>
       <Box mb={2} p={2}>
@@ -29,6 +42,4 @@ const ErrorList = ({ errors }: ErrorListProps) => {
       </Box>
     </Paper>
   );
-};
-
-export default ErrorList;
+}
diff --git a/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
index 41eeb80116..b6025ee6b1 100644
--- a/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
+++ b/packages/mui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
@@ -1,14 +1,23 @@
 import React from "react";
-import { FieldErrorProps } from "@rjsf/utils";
 import ListItem from "@mui/material/ListItem";
 import FormHelperText from "@mui/material/FormHelperText";
 import List from "@mui/material/List";
+import {
+  FieldErrorProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
-export default function FieldErrorTemplate(props: FieldErrorProps) {
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {
     return null;
diff --git a/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
index 3fff68a188..7a33ffa67f 100644
--- a/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
+++ b/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,12 +1,21 @@
 import React from "react";
-import { FieldHelpProps } from "@rjsf/utils";
 import FormHelperText from "@mui/material/FormHelperText";
+import {
+  FieldHelpProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
  * @param props - The `FieldHelpProps` to be rendered
  */
-export default function FieldHelpTemplate(props: FieldHelpProps) {
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
   const { idSchema, help } = props;
   if (!help) {
     return null;
diff --git a/packages/mui/src/FieldTemplate/FieldTemplate.tsx b/packages/mui/src/FieldTemplate/FieldTemplate.tsx
index fe6252701f..bcc7d0d7b5 100644
--- a/packages/mui/src/FieldTemplate/FieldTemplate.tsx
+++ b/packages/mui/src/FieldTemplate/FieldTemplate.tsx
@@ -1,34 +1,52 @@
 import React from "react";
 import FormControl from "@mui/material/FormControl";
 import Typography from "@mui/material/Typography";
-import { FieldTemplateProps, getTemplate, getUiOptions } from "@rjsf/utils";
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
 
-const FieldTemplate = ({
-  id,
-  children,
-  classNames,
-  disabled,
-  displayLabel,
-  hidden,
-  label,
-  onDropPropertyClick,
-  onKeyChange,
-  readonly,
-  required,
-  rawErrors = [],
-  errors,
-  help,
-  rawDescription,
-  schema,
-  uiSchema,
-  registry,
-}: FieldTemplateProps) => {
-  const uiOptions = getUiOptions(uiSchema);
-  const WrapIfAdditionalTemplate = getTemplate<"WrapIfAdditionalTemplate">(
-    "WrapIfAdditionalTemplate",
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    children,
+    classNames,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    rawDescription,
+    schema,
+    uiSchema,
     registry,
-    uiOptions
-  );
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<
+    "WrapIfAdditionalTemplate",
+    T,
+    S,
+    F
+  >("WrapIfAdditionalTemplate", registry, uiOptions);
 
   if (hidden) {
     return <div style={{ display: "none" }}>{children}</div>;
@@ -63,6 +81,4 @@ const FieldTemplate = ({
       </FormControl>
     </WrapIfAdditionalTemplate>
   );
-};
-
-export default FieldTemplate;
+}
diff --git a/packages/mui/src/IconButton/IconButton.tsx b/packages/mui/src/IconButton/IconButton.tsx
index bb0cf636aa..a8bd30ac42 100644
--- a/packages/mui/src/IconButton/IconButton.tsx
+++ b/packages/mui/src/IconButton/IconButton.tsx
@@ -5,9 +5,18 @@ import IconButton, {
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import RemoveIcon from "@mui/icons-material/Remove";
-import { IconButtonProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-export default function MuiIconButton(props: IconButtonProps) {
+export default function MuiIconButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
   return (
     <IconButton
@@ -20,7 +29,11 @@ export default function MuiIconButton(props: IconButtonProps) {
   );
 }
 
-export function MoveDownButton(props: IconButtonProps) {
+export function MoveDownButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return (
     <MuiIconButton
       title="Move down"
@@ -30,7 +43,11 @@ export function MoveDownButton(props: IconButtonProps) {
   );
 }
 
-export function MoveUpButton(props: IconButtonProps) {
+export function MoveUpButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return (
     <MuiIconButton
       title="Move up"
@@ -40,7 +57,11 @@ export function MoveUpButton(props: IconButtonProps) {
   );
 }
 
-export function RemoveButton(props: IconButtonProps) {
+export function RemoveButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   const { iconType, ...otherProps } = props;
   return (
     <MuiIconButton
diff --git a/packages/mui/src/MuiForm/MuiForm.tsx b/packages/mui/src/MuiForm/MuiForm.tsx
index 302df67c04..ca5f1aae84 100644
--- a/packages/mui/src/MuiForm/MuiForm.tsx
+++ b/packages/mui/src/MuiForm/MuiForm.tsx
@@ -1,8 +1,15 @@
 import { ComponentType } from "react";
 import { withTheme, FormProps } from "@rjsf/core";
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
 
-import Theme from "../Theme";
+import { generateTheme } from "../Theme";
 
-const MuiForm: ComponentType<FormProps> = withTheme(Theme);
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>());
+}
 
-export default MuiForm;
+export default generateForm();
diff --git a/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
index fac9bd76e7..4467dd5bef 100644
--- a/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ b/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -1,37 +1,52 @@
 import React from "react";
 import Grid from "@mui/material/Grid";
 import {
+  FormContextType,
   ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
   canExpand,
   getTemplate,
   getUiOptions,
 } from "@rjsf/utils";
 
-const ObjectFieldTemplate = ({
-  description,
-  title,
-  properties,
-  required,
-  disabled,
-  readonly,
-  uiSchema,
-  idSchema,
-  schema,
-  formData,
-  onAddClick,
-  registry,
-}: ObjectFieldTemplateProps) => {
-  const uiOptions = getUiOptions(uiSchema);
-  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate">(
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    title,
+    properties,
+    required,
+    disabled,
+    readonly,
+    uiSchema,
+    idSchema,
+    schema,
+    formData,
+    onAddClick,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>(
     "TitleFieldTemplate",
     registry,
     uiOptions
   );
-  const DescriptionFieldTemplate = getTemplate<"DescriptionFieldTemplate">(
+  const DescriptionFieldTemplate = getTemplate<
     "DescriptionFieldTemplate",
-    registry,
-    uiOptions
-  );
+    T,
+    S,
+    F
+  >("DescriptionFieldTemplate", registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -74,7 +89,7 @@ const ObjectFieldTemplate = ({
             </Grid>
           )
         )}
-        {canExpand(schema, uiSchema, formData) && (
+        {canExpand<T, S, F>(schema, uiSchema, formData) && (
           <Grid container justifyContent="flex-end">
             <Grid item={true}>
               <AddButton
@@ -90,6 +105,4 @@ const ObjectFieldTemplate = ({
       </Grid>
     </>
   );
-};
-
-export default ObjectFieldTemplate;
+}
diff --git a/packages/mui/src/RadioWidget/RadioWidget.tsx b/packages/mui/src/RadioWidget/RadioWidget.tsx
index 86dad81eac..971e5ce085 100644
--- a/packages/mui/src/RadioWidget/RadioWidget.tsx
+++ b/packages/mui/src/RadioWidget/RadioWidget.tsx
@@ -3,9 +3,23 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import { WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const RadioWidget = ({
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
   id,
   schema,
   options,
@@ -17,7 +31,7 @@ const RadioWidget = ({
   onChange,
   onBlur,
   onFocus,
-}: WidgetProps) => {
+}: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled } = options;
 
   const _onChange = (_: any, value: any) =>
@@ -70,6 +84,4 @@ const RadioWidget = ({
       </RadioGroup>
     </>
   );
-};
-
-export default RadioWidget;
+}
diff --git a/packages/mui/src/RangeWidget/RangeWidget.tsx b/packages/mui/src/RangeWidget/RangeWidget.tsx
index bce787b56f..2114fd2aea 100644
--- a/packages/mui/src/RangeWidget/RangeWidget.tsx
+++ b/packages/mui/src/RangeWidget/RangeWidget.tsx
@@ -1,22 +1,38 @@
 import React from "react";
 import FormLabel from "@mui/material/FormLabel";
 import Slider from "@mui/material/Slider";
-import { WidgetProps, rangeSpec } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  rangeSpec,
+} from "@rjsf/utils";
 
-const RangeWidget = ({
-  value,
-  readonly,
-  disabled,
-  onBlur,
-  onFocus,
-  options,
-  schema,
-  onChange,
-  required,
-  label,
-  id,
-}: WidgetProps) => {
-  const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @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>) {
+  const {
+    value,
+    readonly,
+    disabled,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    onChange,
+    required,
+    label,
+    id,
+  } = props;
+  const sliderProps = { value, label, id, name: id, ...rangeSpec<S>(schema) };
 
   const _onChange = (_: any, value?: number | number[]) => {
     onChange(value ? value : options.emptyValue);
@@ -42,6 +58,4 @@ const RangeWidget = ({
       />
     </>
   );
-};
-
-export default RangeWidget;
+}
diff --git a/packages/mui/src/SelectWidget/SelectWidget.tsx b/packages/mui/src/SelectWidget/SelectWidget.tsx
index 03401d731d..d62b40e7b2 100644
--- a/packages/mui/src/SelectWidget/SelectWidget.tsx
+++ b/packages/mui/src/SelectWidget/SelectWidget.tsx
@@ -1,9 +1,24 @@
 import React from "react";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
-import { WidgetProps, processSelectValue } from "@rjsf/utils";
+import {
+  processSelectValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-const SelectWidget = ({
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
   schema,
   id,
   options,
@@ -18,7 +33,7 @@ const SelectWidget = ({
   onBlur,
   onFocus,
   rawErrors = [],
-}: WidgetProps) => {
+}: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled } = options;
 
   const emptyValue = multiple ? [] : "";
@@ -26,13 +41,13 @@ const SelectWidget = ({
   const _onChange = ({
     target: { value },
   }: React.ChangeEvent<{ name?: string; value: unknown }>) =>
-    onChange(processSelectValue(schema, value, options));
+    onChange(processSelectValue<T, S, F>(schema, value, options));
   const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-    onBlur(id, processSelectValue(schema, value, options));
+    onBlur(id, processSelectValue<T, S, F>(schema, value, options));
   const _onFocus = ({
     target: { value },
   }: React.FocusEvent<HTMLInputElement>) =>
-    onFocus(id, processSelectValue(schema, value, options));
+    onFocus(id, processSelectValue<T, S, F>(schema, value, options));
 
   return (
     <TextField
@@ -66,6 +81,4 @@ const SelectWidget = ({
       })}
     </TextField>
   );
-};
-
-export default SelectWidget;
+}
diff --git a/packages/mui/src/SubmitButton/SubmitButton.tsx b/packages/mui/src/SubmitButton/SubmitButton.tsx
index 8a2d99f4e3..b0f8bc80c1 100644
--- a/packages/mui/src/SubmitButton/SubmitButton.tsx
+++ b/packages/mui/src/SubmitButton/SubmitButton.tsx
@@ -1,14 +1,26 @@
 import React from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { SubmitButtonProps, getSubmitButtonOptions } from "@rjsf/utils";
+import {
+  getSubmitButtonOptions,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  SubmitButtonProps,
+} from "@rjsf/utils";
 
-const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
   const {
     submitText,
     norender,
-    props: submitButtonProps,
-  } = getSubmitButtonOptions(props.uiSchema);
+    props: submitButtonProps = {},
+  } = getSubmitButtonOptions<T, S, F>(uiSchema);
   if (norender) {
     return null;
   }
@@ -24,6 +36,4 @@ const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
       </Button>
     </Box>
   );
-};
-
-export default SubmitButton;
+}
diff --git a/packages/mui/src/Templates/Templates.ts b/packages/mui/src/Templates/Templates.ts
index ce8c6020ea..357980042a 100644
--- a/packages/mui/src/Templates/Templates.ts
+++ b/packages/mui/src/Templates/Templates.ts
@@ -1,3 +1,10 @@
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TemplatesType,
+} from "@rjsf/utils";
+
 import AddButton from "../AddButton";
 import ArrayFieldItemTemplate from "../ArrayFieldItemTemplate";
 import ArrayFieldTemplate from "../ArrayFieldTemplate";
@@ -13,23 +20,31 @@ import SubmitButton from "../SubmitButton";
 import TitleField from "../TitleField";
 import WrapIfAdditionalTemplate from "../WrapIfAdditionalTemplate";
 
-export default {
-  ArrayFieldItemTemplate,
-  ArrayFieldTemplate,
-  BaseInputTemplate,
-  ButtonTemplates: {
-    AddButton,
-    MoveDownButton,
-    MoveUpButton,
-    RemoveButton,
-    SubmitButton,
-  },
-  DescriptionFieldTemplate: DescriptionField,
-  ErrorListTemplate: ErrorList,
-  FieldErrorTemplate,
-  FieldHelpTemplate,
-  FieldTemplate,
-  ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField,
-  WrapIfAdditionalTemplate,
-};
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export default generateTemplates();
diff --git a/packages/mui/src/TextareaWidget/TextareaWidget.tsx b/packages/mui/src/TextareaWidget/TextareaWidget.tsx
index 96865fac9f..a5486401e4 100644
--- a/packages/mui/src/TextareaWidget/TextareaWidget.tsx
+++ b/packages/mui/src/TextareaWidget/TextareaWidget.tsx
@@ -1,9 +1,23 @@
 import React from "react";
-import { getTemplate, WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  getTemplate,
+} from "@rjsf/utils";
 
-const TextareaWidget = (props: WidgetProps) => {
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const { options, registry } = props;
-  const BaseInputTemplate = getTemplate<"BaseInputTemplate">(
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, S, F>(
     "BaseInputTemplate",
     registry,
     options
@@ -15,6 +29,4 @@ const TextareaWidget = (props: WidgetProps) => {
   }
 
   return <BaseInputTemplate {...props} multiline rows={rows} />;
-};
-
-export default TextareaWidget;
+}
diff --git a/packages/mui/src/Theme/Theme.tsx b/packages/mui/src/Theme/Theme.tsx
index ecfcdd5720..1c50874ba2 100644
--- a/packages/mui/src/Theme/Theme.tsx
+++ b/packages/mui/src/Theme/Theme.tsx
@@ -1,11 +1,18 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
 import { ThemeProps } from "@rjsf/core";
 
-import Templates from "../Templates";
-import Widgets from "../Widgets";
+import { generateTemplates } from "../Templates";
+import { generateWidgets } from "../Widgets";
 
-const Theme: ThemeProps = {
-  templates: Templates,
-  widgets: Widgets,
-};
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ThemeProps<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+  };
+}
 
-export default Theme;
+export default generateTheme();
diff --git a/packages/mui/src/TitleField/TitleField.tsx b/packages/mui/src/TitleField/TitleField.tsx
index 86fffc8655..cd97343c39 100644
--- a/packages/mui/src/TitleField/TitleField.tsx
+++ b/packages/mui/src/TitleField/TitleField.tsx
@@ -2,15 +2,26 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
-import { TitleFieldProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  TitleFieldProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-const TitleField = ({ id, title }: TitleFieldProps) => {
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ id, title }: TitleFieldProps<T, S, F>) {
   return (
     <Box id={id} mb={1} mt={1}>
       <Typography variant="h5">{title}</Typography>
       <Divider />
     </Box>
   );
-};
-
-export default TitleField;
+}
diff --git a/packages/mui/src/Widgets/Widgets.ts b/packages/mui/src/Widgets/Widgets.ts
index 24ecef0178..58456c00cc 100644
--- a/packages/mui/src/Widgets/Widgets.ts
+++ b/packages/mui/src/Widgets/Widgets.ts
@@ -1,3 +1,10 @@
+import {
+  FormContextType,
+  RegistryWidgetsType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+
 import CheckboxWidget from "../CheckboxWidget/CheckboxWidget";
 import CheckboxesWidget from "../CheckboxesWidget/CheckboxesWidget";
 import DateWidget from "../DateWidget/DateWidget";
@@ -7,13 +14,21 @@ import RangeWidget from "../RangeWidget/RangeWidget";
 import SelectWidget from "../SelectWidget/SelectWidget";
 import TextareaWidget from "../TextareaWidget/TextareaWidget";
 
-export default {
-  CheckboxWidget,
-  CheckboxesWidget,
-  DateWidget,
-  DateTimeWidget,
-  RadioWidget,
-  RangeWidget,
-  SelectWidget,
-  TextareaWidget,
-};
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    CheckboxWidget,
+    CheckboxesWidget,
+    DateWidget,
+    DateTimeWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+  };
+}
+
+export default generateWidgets();
diff --git a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
index c16fcbb60d..e1c06b0a7e 100644
--- a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
+++ b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -5,23 +5,36 @@ import InputLabel from "@mui/material/InputLabel";
 import Input from "@mui/material/OutlinedInput";
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
   WrapIfAdditionalTemplateProps,
 } from "@rjsf/utils";
 
-const WrapIfAdditionalTemplate = ({
-  children,
-  classNames,
-  disabled,
-  id,
-  label,
-  onDropPropertyClick,
-  onKeyChange,
-  readonly,
-  required,
-  schema,
-  uiSchema,
-  registry,
-}: WrapIfAdditionalTemplateProps) => {
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
   // Button templates are not overridden in the uiSchema
   const { RemoveButton } = registry.templates.ButtonTemplates;
   const keyLabel = `${label} Key`; // i18n ?
@@ -76,6 +89,4 @@ const WrapIfAdditionalTemplate = ({
       </Grid>
     </Grid>
   );
-};
-
-export default WrapIfAdditionalTemplate;
+}
diff --git a/packages/mui/src/index.ts b/packages/mui/src/index.ts
index 710586d10e..bcd29442d3 100644
--- a/packages/mui/src/index.ts
+++ b/packages/mui/src/index.ts
@@ -1,8 +1,8 @@
 import MuiForm from "./MuiForm/MuiForm";
 
-export { default as Form } from "./MuiForm";
-export { default as Templates } from "./Templates";
-export { default as Theme } from "./Theme";
-export { default as Widgets } from "./Widgets";
+export { default as Form, generateForm } from "./MuiForm";
+export { default as Templates, generateTemplates } from "./Templates";
+export { default as Theme, generateTheme } from "./Theme";
+export { default as Widgets, generateWidgets } from "./Widgets";
 
 export default MuiForm;