@rjsf/mantine 6.0.0-beta.14

package/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 `<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: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    type,
+    schema,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    options,
+    rawErrors,
+    children,
+  } = props;
+
+  const inputProps = getInputProps<T, S, F>(schema, type, options, false);
+  const themeProps = cleanupOptions(options);
+
+  const handleNumberChange = useCallback((value: number | string) => onChange(value), [onChange]);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      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<HTMLInputElement>) => {
+      onBlur(id, e.target && e.target.value);
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onFocus(id, e.target && e.target.value);
+    },
+    [onFocus, id],
+  );
+
+  const input =
+    inputProps.type === 'number' || inputProps.type === 'integer' ? (
+      <NumberInput
+        id={id}
+        name={id}
+        label={labelValue(label || undefined, hideLabel, false)}
+        required={required}
+        autoFocus={autofocus}
+        disabled={disabled || readonly}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleNumberChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        {...themeProps}
+        step={typeof inputProps.step === 'number' ? inputProps.step : 1}
+        type='text'
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    ) : (
+      <TextInput
+        id={id}
+        name={id}
+        label={labelValue(label || undefined, hideLabel, false)}
+        required={required}
+        autoFocus={autofocus}
+        disabled={disabled || readonly}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        {...themeProps}
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    );
+
+  return (
+    <>
+      {input}
+      {children}
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton title={translateString(TranslatableString.AddItemButton)} variant='subtle' {...props} icon={<Plus />} />
+  );
+}

package/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<T, S, F> & Omit<ActionIconProps, 'onClick'>;
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: MantineIconButtonProps<T, S, F>,
+) {
+  const { icon, iconType = 'sm', color, onClick, uiSchema, registry, ...otherProps } = props;
+  return (
+    <ActionIcon
+      size={iconType as ActionIconProps['size']}
+      color={color as ActionIconProps['color']}
+      onClick={onClick as MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLButtonElement>}
+      {...otherProps}
+    >
+      {icon}
+    </ActionIcon>
+  );
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: MantineIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton title={translateString(TranslatableString.CopyButton)} variant='subtle' {...props} icon={<Copy />} />
+  );
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: MantineIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.MoveDownButton)}
+      variant='subtle'
+      {...props}
+      icon={<ChevronDown />}
+    />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: MantineIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.MoveUpButton)}
+      variant='subtle'
+      {...props}
+      icon={<ChevronUp />}
+    />
+  );
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: MantineIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.RemoveButton)}
+      variant='subtle'
+      color='red'
+      {...props}
+      icon={<X />}
+    />
+  );
+}

package/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<T, S, F>) {
+  const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <Button type='submit' variant='filled' {...submitButtonProps}>
+      {submitText}
+    </Button>
+  );
+}

package/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<T, S, F>['ButtonTemplates'] {
+  return {
+    SubmitButton,
+    AddButton,
+    CopyButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton,
+  };
+}
+
+export default buttonTemplates;

package/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<T, S, F>) {
+  const { id, description, registry, uiSchema } = props;
+  if (description) {
+    return (
+      <Text id={id} mt={3} mb='sm'>
+        <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+      </Text>
+    );
+  }
+
+  return null;
+}

package/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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+
+  return (
+    <Alert
+      color='red'
+      variant='transparent'
+      title={
+        <Title order={5} fw='normal'>
+          {translateString(TranslatableString.ErrorsLabel)}
+        </Title>
+      }
+      icon={<ExclamationCircle />}
+    >
+      <List>
+        {errors.map((error, index) => (
+          <List.Item key={`error-${index}`} c='red'>
+            {error.stack}
+          </List.Item>
+        ))}
+      </List>
+    </Alert>
+  );
+}

package/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<T, S, F>) {
+  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<T>(idSchema);
+  return (
+    <Box id={id} c='red' display='none'>
+      <List>
+        {errors.map((error, index) => (
+          <List.Item key={`field-error-${index}`}>{error}</List.Item>
+        ))}
+      </List>
+    </Box>
+  );
+}

package/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<T, S, F>) {
+  const { idSchema, help } = props;
+
+  const id = helpId<T>(idSchema);
+
+  return !help ? null : (
+    <Text id={id} size='sm' my='xs' c='dimmed'>
+      {help}
+    </Text>
+  );
+}

package/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<T, S, F>) {
+  const {
+    id,
+    classNames,
+    style,
+    label,
+    errors,
+    help,
+    displayLabel,
+    description,
+    rawDescription,
+    hidden,
+    schema,
+    uiSchema,
+    registry,
+    children,
+    ...otherProps
+  } = props;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions,
+  );
+
+  if (hidden) {
+    return <Box display='none'>{children}</Box>;
+  }
+
+  return (
+    <WrapIfAdditionalTemplate
+      id={id}
+      classNames={classNames}
+      style={style}
+      label={label}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+      {...otherProps}
+    >
+      {children}
+      {errors}
+      {help}
+    </WrapIfAdditionalTemplate>
+  );
+}

package/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 <Grid.Col {...rest}>{children}</Grid.Col>;
+  }
+
+  // Grid with fluid container
+  if (fluid) {
+    return (
+      <Container p='4' mx={0} w='100%'>
+        <Grid {...rest}>{children}</Grid>
+      </Container>
+    );
+  }
+  // Grid without container
+  return (
+    <Grid grow {...rest}>
+      {children}
+    </Grid>
+  );
+}

package/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<T, S, F>) {
+  return (
+    <Stack style={{ marginBottom: '1rem' }}>
+      {selector}
+      {optionSchemaField}
+    </Stack>
+  );
+}

package/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<T, S, F>) {
+  const {
+    title,
+    description,
+    disabled,
+    properties,
+    onAddClick,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    idSchema,
+    formData,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(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 (
+    <Container id={idSchema.$id} p={0}>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <SimpleGrid
+        cols={gridCols}
+        spacing={gridSpacing as MantineSpacing | undefined}
+        verticalSpacing={gridVerticalSpacing as MantineSpacing | undefined}
+        mb='sm'
+      >
+        {properties
+          .filter((e) => !e.hidden)
+          .map((element: ObjectFieldTemplatePropertyType) => (
+            <Box key={element.name}>{element.content}</Box>
+          ))}
+      </SimpleGrid>
+
+      {canExpand(schema, uiSchema, formData) && (
+        <Group mt='xs' justify='flex-end'>
+          <AddButton
+            id={buttonId<T>(idSchema, 'add')}
+            disabled={disabled || readonly}
+            onClick={onAddClick(schema)}
+            className='rjsf-object-property-expand'
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </Group>
+      )}
+    </Container>
+  );
+}

package/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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: TitleFieldProps<T, S, F>,
+) {
+  const { id, title } = props;
+  return title ? (
+    <Title id={id} order={3} fw='normal'>
+      {title}
+    </Title>
+  ) : null;
+}