+
+
+
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [About The Project](#about-the-project)
+ - [Built With](#built-with)
+- [Getting Started](#getting-started)
+ - [Prerequisites](#prerequisites)
+ - [Installation](#installation)
+- [Usage](#usage)
+- [Optional Mantine Theme properties](#optional-mantine-theme-properties)
+ - [Mantine Widget Optional Properties](#mantine-widget-optional-properties)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Contact](#contact)
+
+
+
+## About The Project
+
+`Mantine` theme, fields and widgets for `react-jsonschema-form`.
+
+### Built With
+
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
+- [Mantine](https://mantine.dev/)
+
+
+
+## Getting Started
+
+- See the [getting started guide](https://mantine.dev/getting-started/) on Mantine documentation.
+
+### Prerequisites
+
+- `@mantine/core >= 8`
+- `@mantine/hooks >= 8`
+- `@mantine/dates >= 8`
+- `dayjs >= 1.8.0`
+- `@rjsf/core >= 6.0.0`
+
+```sh
+npm install @mantine/core @mantine/hooks @mantine/dates dayjs @rjsf/core
+```
+
+### Installation
+
+```sh
+npm install @rjsf/mantine
+```
+
+
+
+## Usage
+
+```javascript
+import Form from '@rjsf/mantine';
+```
+
+or
+
+```javascript
+import { withTheme } from '@rjsf/core';
+import { Theme as MantineTheme } from '@rjsf/mantine';
+
+// Make modifications to the theme with your own fields and widgets
+
+const Form = withTheme(MantineTheme);
+```
+
+## Optional Mantine Theme properties
+
+- To pass additional properties to widgets, see this [guide](https://rjsf-team.github.io/react-jsonschema-form/docs/usage/objects#additional-properties).
+
+#### Mantine Widget Optional Properties
+
+- [Mantine props for CheckboxWidget](https://mantine.dev/core/checkbox/?t=props)
+- [Mantine props for ColorWidget](https://mantine.dev/core/color-input/?t=props)
+- [Mantine props for DateWidget](https://mantine.dev/dates/date-input/?t=props)
+- [Mantine props for DateTimeWidget](https://mantine.dev/dates/date-input/?t=props)
+- [Mantine props for PasswordWidget](https://mantine.dev/core/password-input/?t=props)
+- [Mantine props for RadioWidget](https://mantine.dev/core/radio/?t=props)
+- [Mantine props for RangeWidget](https://mantine.dev/core/slider/?t=props)
+- [Mantine props for SelectWidget](https://mantine.dev/core/select/?t=props)
+- [Mantine props for UpDownWidget](https://mantine.dev/core/number-input/?t=props)
+- [Mantine props for TextWidget](https://mantine.dev/core/text-input/?t=props)
+- [Mantine props for TextAreaWidget](https://mantine.dev/core/textarea/?t=props)
+- [Mantine props for TimeWidget](https://mantine.dev/dates/time-input/?t=props)
+
+
+
+## Roadmap
+
+See the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues).
+
+
+
+## Contributing
+
+Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.
+
+
+
+## Contact
+
+rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)
+
+GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+
+
+
+
+[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
+[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
+[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg
+[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
+[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
+[license-url]: https://choosealicense.com/licenses/apache-2.0/
+[npm-shield]: https://img.shields.io/npm/v/@rjsf/mantine/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/mantine
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/mantine.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/mantine
+[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/mantine/screenshot.png
diff --git a/packages/mantine/babel.config.json b/packages/mantine/babel.config.json
new file mode 100644
index 0000000000..ac08da0a4a
--- /dev/null
+++ b/packages/mantine/babel.config.json
@@ -0,0 +1,3 @@
+{
+ "extends": "../../babel.config.json"
+}
diff --git a/packages/mantine/jest.config.json b/packages/mantine/jest.config.json
new file mode 100644
index 0000000000..4c7e4e5d80
--- /dev/null
+++ b/packages/mantine/jest.config.json
@@ -0,0 +1,10 @@
+{
+ "rootDir": "./",
+ "snapshotSerializers": ["/test/cleanSnapshotSerializer.ts"],
+ "verbose": true,
+ "testEnvironment": "jsdom",
+ "testEnvironmentOptions": {
+ "browsers": ["chrome", "firefox", "safari"]
+ },
+ "transformIgnorePatterns": ["/node_modules/(?!nanoid)"]
+}
diff --git a/packages/mantine/logo.png b/packages/mantine/logo.png
new file mode 100644
index 0000000000..1da1cc6141
Binary files /dev/null and b/packages/mantine/logo.png differ
diff --git a/packages/mantine/package.json b/packages/mantine/package.json
new file mode 100644
index 0000000000..dcda12ebbe
--- /dev/null
+++ b/packages/mantine/package.json
@@ -0,0 +1,112 @@
+{
+ "name": "@rjsf/mantine",
+ "version": "6.0.0-beta.1",
+ "main": "dist/index.js",
+ "module": "lib/index.js",
+ "typings": "lib/index.d.ts",
+ "type": "module",
+ "description": "Mantine 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"
+ ],
+ "engineStrict": false,
+ "engines": {
+ "node": ">=20"
+ },
+ "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:esm": "esbuild ./src/index.ts --bundle --outfile=dist/mantine.esm.js --sourcemap --packages=external --format=esm",
+ "build:umd": "rollup dist/mantine.esm.js --format=umd --file=dist/mantine.umd.js --name=@rjsf/mantine",
+ "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
+ "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
+ "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
+ "lint": "eslint src test",
+ "precommit": "lint-staged",
+ "test": "jest",
+ "test:update": "jest --u"
+ },
+ "lint-staged": {
+ "{src,test}/**/*.ts?(x)": [
+ "eslint --fix"
+ ]
+ },
+ "peerDependencies": {
+ "@rjsf/core": "^6.0.0-beta",
+ "@rjsf/utils": "^6.0.0-beta",
+ "react": ">=18",
+ "@mantine/core": ">=8",
+ "@mantine/hooks": ">=8",
+ "@mantine/dates": ">=8"
+ },
+ "devDependencies": {
+ "@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",
+ "@mantine/core": ">=8",
+ "@mantine/hooks": ">=8",
+ "@mantine/dates": ">=8",
+ "@restart/hooks": "^0.6.2",
+ "@restart/ui": "^1.9.4",
+ "ajv": "^8.17.1",
+ "ajv-keywords": "^5.1.0",
+ "uncontrollable": "^9.0.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "author": "Farhad Zare ",
+ "contributors": [
+ "Heath Chiavettone (): ComponentType> {
+ return withTheme(generateTheme());
+}
+
+export default generateForm();
diff --git a/packages/mantine/src/Theme/index.ts b/packages/mantine/src/Theme/index.ts
new file mode 100644
index 0000000000..2118ff3b52
--- /dev/null
+++ b/packages/mantine/src/Theme/index.ts
@@ -0,0 +1,18 @@
+import { ThemeProps } from '@rjsf/core';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import { generateTemplates } from '../templates';
+import { generateWidgets } from '../widgets';
+
+export function generateTheme<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(): ThemeProps {
+ return {
+ templates: generateTemplates(),
+ widgets: generateWidgets(),
+ };
+}
+
+export default generateTheme();
diff --git a/packages/mantine/src/index.ts b/packages/mantine/src/index.ts
new file mode 100644
index 0000000000..7cdb4fbd94
--- /dev/null
+++ b/packages/mantine/src/index.ts
@@ -0,0 +1,8 @@
+import Form, { generateForm } from './Form';
+import Templates, { generateTemplates } from './templates';
+import Theme, { generateTheme } from './Theme';
+import Widgets, { generateWidgets } from './widgets';
+
+export { Form, Templates, Theme, Widgets, generateForm, generateTemplates, generateTheme, generateWidgets };
+
+export default Form;
diff --git a/packages/mantine/src/templates/ArrayFieldItemTemplate.tsx b/packages/mantine/src/templates/ArrayFieldItemTemplate.tsx
new file mode 100644
index 0000000000..dac78a9499
--- /dev/null
+++ b/packages/mantine/src/templates/ArrayFieldItemTemplate.tsx
@@ -0,0 +1,40 @@
+import {
+ ArrayFieldItemTemplateType,
+ FormContextType,
+ getTemplate,
+ getUiOptions,
+ RJSFSchema,
+ StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Box, Flex, Group } from '@mantine/core';
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType) {
+ const { buttonsProps, className, hasToolbar, index, uiSchema, registry, children } = props;
+ const uiOptions = getUiOptions(uiSchema);
+ const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+ 'ArrayFieldItemButtonsTemplate',
+ registry,
+ uiOptions,
+ );
+
+ return (
+
+
+ {children}
+ {hasToolbar && (
+
+
+
+ )}
+
+
+ );
+}
diff --git a/packages/mantine/src/templates/ArrayFieldTemplate.tsx b/packages/mantine/src/templates/ArrayFieldTemplate.tsx
new file mode 100644
index 0000000000..cd159b333a
--- /dev/null
+++ b/packages/mantine/src/templates/ArrayFieldTemplate.tsx
@@ -0,0 +1,103 @@
+import {
+ getTemplate,
+ getUiOptions,
+ ArrayFieldTemplateProps,
+ ArrayFieldItemTemplateType,
+ buttonId,
+ FormContextType,
+ RJSFSchema,
+ StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Fieldset, Box, Group } from '@mantine/core';
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
+ */
+export default function ArrayFieldTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(props: ArrayFieldTemplateProps) {
+ const {
+ canAdd,
+ className,
+ disabled,
+ idSchema,
+ items,
+ onAddClick,
+ readonly,
+ required,
+ schema,
+ uiSchema,
+ title,
+ registry,
+ } = props;
+
+ const uiOptions = getUiOptions(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,
+ );
+ // Button templates are not overridden in the uiSchema
+ const {
+ ButtonTemplates: { AddButton },
+ } = registry.templates;
+
+ const legend = (uiOptions.title || title) && (
+
+ );
+
+ return (
+
+ );
+}
diff --git a/packages/mantine/src/templates/ArrayFieldTitleTemplate.tsx b/packages/mantine/src/templates/ArrayFieldTitleTemplate.tsx
new file mode 100644
index 0000000000..29ea42cc25
--- /dev/null
+++ b/packages/mantine/src/templates/ArrayFieldTitleTemplate.tsx
@@ -0,0 +1,33 @@
+import {
+ getUiOptions,
+ titleId,
+ ArrayFieldTitleProps,
+ FormContextType,
+ RJSFSchema,
+ StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Title } from '@mantine/core';
+
+/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
+export default function ArrayFieldTitleTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(props: ArrayFieldTitleProps) {
+ const { idSchema, title, uiSchema, registry } = props;
+
+ const options = getUiOptions(uiSchema, registry.globalUiOptions);
+ const { label: displayLabel = true } = options;
+ if (!title || !displayLabel) {
+ return null;
+ }
+ return (
+ (idSchema)} order={4} fw='normal'>
+ {title}
+
+ );
+}
diff --git a/packages/mantine/src/templates/BaseInputTemplate.tsx b/packages/mantine/src/templates/BaseInputTemplate.tsx
new file mode 100644
index 0000000000..24e26425d5
--- /dev/null
+++ b/packages/mantine/src/templates/BaseInputTemplate.tsx
@@ -0,0 +1,134 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+ ariaDescribedByIds,
+ BaseInputTemplateProps,
+ examplesId,
+ getInputProps,
+ labelValue,
+ FormContextType,
+ RJSFSchema,
+ StrictRJSFSchema,
+} from '@rjsf/utils';
+import { TextInput, NumberInput } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme.
+ * It is used as the template for rendering many of the 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: BaseInputTemplateProps) {
+ const {
+ id,
+ type,
+ schema,
+ value,
+ placeholder,
+ required,
+ disabled,
+ readonly,
+ autofocus,
+ label,
+ hideLabel,
+ onChange,
+ onChangeOverride,
+ onBlur,
+ onFocus,
+ options,
+ rawErrors,
+ children,
+ } = props;
+
+ const inputProps = getInputProps(schema, type, options, false);
+ const themeProps = cleanupOptions(options);
+
+ const handleNumberChange = useCallback((value: number | string) => onChange(value), [onChange]);
+
+ const handleChange = useCallback(
+ (e: ChangeEvent) => {
+ const handler = onChangeOverride ? onChangeOverride : onChange;
+ const value = e.target.value === '' ? (options.emptyValue ?? '') : e.target.value;
+ handler(value);
+ },
+ [onChange, onChangeOverride, options],
+ );
+
+ const handleBlur = useCallback(
+ (e: FocusEvent) => {
+ onBlur(id, e.target && e.target.value);
+ },
+ [onBlur, id],
+ );
+
+ const handleFocus = useCallback(
+ (e: FocusEvent) => {
+ onFocus(id, e.target && e.target.value);
+ },
+ [onFocus, id],
+ );
+
+ const input =
+ inputProps.type === 'number' || inputProps.type === 'integer' ? (
+ 0 ? rawErrors.join('\n') : undefined}
+ list={schema.examples ? examplesId(id) : undefined}
+ {...inputProps}
+ {...themeProps}
+ step={typeof inputProps.step === 'number' ? inputProps.step : 1}
+ type='text'
+ value={value}
+ aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+ />
+ ) : (
+ 0 ? rawErrors.join('\n') : undefined}
+ list={schema.examples ? examplesId(id) : undefined}
+ {...inputProps}
+ {...themeProps}
+ value={value}
+ aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+ />
+ );
+
+ return (
+ <>
+ {input}
+ {children}
+ {Array.isArray(schema.examples) && (
+
+ )}
+
+ );
+}
diff --git a/packages/mantine/src/templates/ButtonTemplates/AddButton.tsx b/packages/mantine/src/templates/ButtonTemplates/AddButton.tsx
new file mode 100644
index 0000000000..9f824359c6
--- /dev/null
+++ b/packages/mantine/src/templates/ButtonTemplates/AddButton.tsx
@@ -0,0 +1,17 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+import IconButton from './IconButton';
+import { Plus } from '../icons';
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton(
+ props: IconButtonProps,
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ } />
+ );
+}
diff --git a/packages/mantine/src/templates/ButtonTemplates/IconButton.tsx b/packages/mantine/src/templates/ButtonTemplates/IconButton.tsx
new file mode 100644
index 0000000000..600ac2c82f
--- /dev/null
+++ b/packages/mantine/src/templates/ButtonTemplates/IconButton.tsx
@@ -0,0 +1,87 @@
+import { MouseEventHandler } from 'react';
+import { ActionIcon, ActionIconProps } from '@mantine/core';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+import { Copy, ChevronDown, ChevronUp, X } from '../icons';
+
+export type MantineIconButtonProps<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> = IconButtonProps & Omit;
+
+export default function IconButton(
+ props: MantineIconButtonProps,
+) {
+ const { icon, iconType = 'sm', color, onClick, uiSchema, registry, ...otherProps } = props;
+ return (
+ & MouseEventHandler}
+ {...otherProps}
+ >
+ {icon}
+
+ );
+}
+
+export function CopyButton(
+ props: MantineIconButtonProps,
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ } />
+ );
+}
+
+export function MoveDownButton(
+ props: MantineIconButtonProps,
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
+
+export function MoveUpButton(
+ props: MantineIconButtonProps,
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
+
+export function RemoveButton(
+ props: MantineIconButtonProps,
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
diff --git a/packages/mantine/src/templates/ButtonTemplates/SubmitButton.tsx b/packages/mantine/src/templates/ButtonTemplates/SubmitButton.tsx
new file mode 100644
index 0000000000..a36a69b1f5
--- /dev/null
+++ b/packages/mantine/src/templates/ButtonTemplates/SubmitButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@mantine/core';
+import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+
+/** 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) {
+ const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
+ if (norender) {
+ return null;
+ }
+ return (
+
+ );
+}
diff --git a/packages/mantine/src/templates/ButtonTemplates/index.ts b/packages/mantine/src/templates/ButtonTemplates/index.ts
new file mode 100644
index 0000000000..9f1c389a31
--- /dev/null
+++ b/packages/mantine/src/templates/ButtonTemplates/index.ts
@@ -0,0 +1,21 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import SubmitButton from './SubmitButton';
+import AddButton from './AddButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+
+function buttonTemplates<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(): TemplatesType['ButtonTemplates'] {
+ return {
+ SubmitButton,
+ AddButton,
+ CopyButton,
+ MoveDownButton,
+ MoveUpButton,
+ RemoveButton,
+ };
+}
+
+export default buttonTemplates;
diff --git a/packages/mantine/src/templates/DescriptionField.tsx b/packages/mantine/src/templates/DescriptionField.tsx
new file mode 100644
index 0000000000..12875aad6c
--- /dev/null
+++ b/packages/mantine/src/templates/DescriptionField.tsx
@@ -0,0 +1,24 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { RichDescription } from '@rjsf/core';
+import { Text } from '@mantine/core';
+
+/** 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) {
+ const { id, description, registry, uiSchema } = props;
+ if (description) {
+ return (
+
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/packages/mantine/src/templates/ErrorList.tsx b/packages/mantine/src/templates/ErrorList.tsx
new file mode 100644
index 0000000000..507396c547
--- /dev/null
+++ b/packages/mantine/src/templates/ErrorList.tsx
@@ -0,0 +1,36 @@
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { Alert, Title, List } from '@mantine/core';
+
+import { ExclamationCircle } from './icons';
+
+/** 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({
+ errors,
+ registry,
+}: ErrorListProps) {
+ const { translateString } = registry;
+
+ return (
+
+ {translateString(TranslatableString.ErrorsLabel)}
+
+ }
+ icon={}
+ >
+
+ {errors.map((error, index) => (
+
+ {error.stack}
+
+ ))}
+
+
+ );
+}
diff --git a/packages/mantine/src/templates/FieldErrorTemplate.tsx b/packages/mantine/src/templates/FieldErrorTemplate.tsx
new file mode 100644
index 0000000000..fde5ae2023
--- /dev/null
+++ b/packages/mantine/src/templates/FieldErrorTemplate.tsx
@@ -0,0 +1,27 @@
+import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Box, List } from '@mantine/core';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>({ errors, idSchema }: FieldErrorProps) {
+ if (!errors || !errors.length) {
+ return null;
+ }
+ // In mantine, errors are handled directly in each component, so there is no need to render a separate error template.
+ const id = errorId(idSchema);
+ return (
+
+
+ {errors.map((error, index) => (
+ {error}
+ ))}
+
+
+ );
+}
diff --git a/packages/mantine/src/templates/FieldHelpTemplate.tsx b/packages/mantine/src/templates/FieldHelpTemplate.tsx
new file mode 100644
index 0000000000..a2f249ee6c
--- /dev/null
+++ b/packages/mantine/src/templates/FieldHelpTemplate.tsx
@@ -0,0 +1,22 @@
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Text } from '@mantine/core';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>(props: FieldHelpProps) {
+ const { idSchema, help } = props;
+
+ const id = helpId(idSchema);
+
+ return !help ? null : (
+
+ {help}
+
+ );
+}
diff --git a/packages/mantine/src/templates/FieldTemplate.tsx b/packages/mantine/src/templates/FieldTemplate.tsx
new file mode 100644
index 0000000000..ac86ffa8de
--- /dev/null
+++ b/packages/mantine/src/templates/FieldTemplate.tsx
@@ -0,0 +1,66 @@
+import { Box } from '@mantine/core';
+import {
+ FieldTemplateProps,
+ FormContextType,
+ RJSFSchema,
+ StrictRJSFSchema,
+ getTemplate,
+ getUiOptions,
+} from '@rjsf/utils';
+
+/** 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 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) {
+ const {
+ id,
+ classNames,
+ style,
+ label,
+ errors,
+ help,
+ displayLabel,
+ description,
+ rawDescription,
+ hidden,
+ schema,
+ uiSchema,
+ registry,
+ children,
+ ...otherProps
+ } = props;
+
+ const uiOptions = getUiOptions(uiSchema);
+ const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+ 'WrapIfAdditionalTemplate',
+ registry,
+ uiOptions,
+ );
+
+ if (hidden) {
+ return {children};
+ }
+
+ return (
+
+ {children}
+ {errors}
+ {help}
+
+ );
+}
diff --git a/packages/mantine/src/templates/GridTemplate.tsx b/packages/mantine/src/templates/GridTemplate.tsx
new file mode 100644
index 0000000000..1528ef79fd
--- /dev/null
+++ b/packages/mantine/src/templates/GridTemplate.tsx
@@ -0,0 +1,30 @@
+import { Container, Grid } from '@mantine/core';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for mantine, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid`/`Grid.Col`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the Mantine grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+ const { children, column, fluid = true, ...rest } = props;
+
+ if (column) {
+ return {children};
+ }
+
+ // Grid with fluid container
+ if (fluid) {
+ return (
+
+ {children}
+
+ );
+ }
+ // Grid without container
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/mantine/src/templates/MultiSchemaFieldTemplate.tsx b/packages/mantine/src/templates/MultiSchemaFieldTemplate.tsx
new file mode 100644
index 0000000000..7a763fba29
--- /dev/null
+++ b/packages/mantine/src/templates/MultiSchemaFieldTemplate.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@mantine/core';
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+>({ selector, optionSchemaField }: MultiSchemaFieldTemplateProps) {
+ return (
+
+ {selector}
+ {optionSchemaField}
+
+ );
+}
diff --git a/packages/mantine/src/templates/ObjectFieldTemplate.tsx b/packages/mantine/src/templates/ObjectFieldTemplate.tsx
new file mode 100644
index 0000000000..08f8db9f31
--- /dev/null
+++ b/packages/mantine/src/templates/ObjectFieldTemplate.tsx
@@ -0,0 +1,104 @@
+import { Box, Container, Group, MantineSpacing, SimpleGrid } from '@mantine/core';
+import {
+ buttonId,
+ canExpand,
+ descriptionId,
+ FormContextType,
+ getTemplate,
+ getUiOptions,
+ ObjectFieldTemplatePropertyType,
+ ObjectFieldTemplateProps,
+ RJSFSchema,
+ StrictRJSFSchema,
+ titleId,
+} from '@rjsf/utils';
+
+/** 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) {
+ const {
+ title,
+ description,
+ disabled,
+ properties,
+ onAddClick,
+ readonly,
+ required,
+ schema,
+ uiSchema,
+ idSchema,
+ formData,
+ registry,
+ } = props;
+ const uiOptions = getUiOptions(uiSchema);
+ const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+ const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+ 'DescriptionFieldTemplate',
+ registry,
+ uiOptions,
+ );
+ // Button templates are not overridden in the uiSchema
+ const {
+ ButtonTemplates: { AddButton },
+ } = registry.templates;
+ const gridCols = (typeof uiOptions?.gridCols === 'number' && uiOptions?.gridCols) || undefined;
+ const gridSpacing = uiOptions?.gridSpacing;
+ const gridVerticalSpacing = uiOptions?.gridVerticalSpacing;
+
+ return (
+
+ {title && (
+ (idSchema)}
+ title={title}
+ required={required}
+ schema={schema}
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+ )}
+ {description && (
+ (idSchema)}
+ description={description}
+ schema={schema}
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+ )}
+
+ {properties
+ .filter((e) => !e.hidden)
+ .map((element: ObjectFieldTemplatePropertyType) => (
+ {element.content}
+ ))}
+
+
+ {canExpand(schema, uiSchema, formData) && (
+
+ (idSchema, 'add')}
+ disabled={disabled || readonly}
+ onClick={onAddClick(schema)}
+ className='rjsf-object-property-expand'
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+
+ )}
+
+ );
+}
diff --git a/packages/mantine/src/templates/TitleField.tsx b/packages/mantine/src/templates/TitleField.tsx
new file mode 100644
index 0000000000..0b7b9fb9c7
--- /dev/null
+++ b/packages/mantine/src/templates/TitleField.tsx
@@ -0,0 +1,17 @@
+import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Title } from '@mantine/core';
+
+/** 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(
+ props: TitleFieldProps,
+) {
+ const { id, title } = props;
+ return title ? (
+
+ {title}
+
+ ) : null;
+}
diff --git a/packages/mantine/src/templates/WrapIfAdditionalTemplate.tsx b/packages/mantine/src/templates/WrapIfAdditionalTemplate.tsx
new file mode 100644
index 0000000000..b69ef7ebf9
--- /dev/null
+++ b/packages/mantine/src/templates/WrapIfAdditionalTemplate.tsx
@@ -0,0 +1,99 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+ ADDITIONAL_PROPERTY_FLAG,
+ UI_OPTIONS_KEY,
+ buttonId,
+ FormContextType,
+ RJSFSchema,
+ StrictRJSFSchema,
+ TranslatableString,
+ WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+import { Flex, Grid, TextInput } from '@mantine/core';
+
+/** 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) {
+ const {
+ id,
+ classNames,
+ style,
+ label,
+ required,
+ readonly,
+ disabled,
+ schema,
+ uiSchema,
+ onKeyChange,
+ onDropPropertyClick,
+ registry,
+ children,
+ } = props;
+ const { templates, translateString } = registry;
+ // Button templates are not overridden in the uiSchema
+ const { RemoveButton } = templates.ButtonTemplates;
+ const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+ const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+
+ const handleBlur = useCallback(
+ ({ target }: FocusEvent) => onKeyChange(target && target.value),
+ [onKeyChange],
+ );
+
+ if (!additional) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
+ const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
+ const buttonUiOptions = {
+ ...uiSchema,
+ [UI_OPTIONS_KEY]: { ...uiOptions, block: true },
+ };
+
+ return (
+
+
+
+