@rjsf/mantine 6.0.0-beta.14

package/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<T, S, F>) {
+  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<HTMLInputElement>) => onKeyChange(target && target.value),
+    [onKeyChange],
+  );
+
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  // 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 (
+    <div className={classNames} style={style}>
+      <Flex gap='xs' align='end' justify='center'>
+        <Grid w='100%' align='center'>
+          <Grid.Col span={6} className='form-additional'>
+            <div className='form-group'>
+              <TextInput
+                className='form-group'
+                label={keyLabel}
+                defaultValue={label}
+                required={required}
+                disabled={disabled || readonly}
+                id={`${id}-key`}
+                name={`${id}-key`}
+                onBlur={!readonly ? handleBlur : undefined}
+              />
+            </div>
+          </Grid.Col>
+          <Grid.Col span={6} className='form-additional'>
+            {children}
+          </Grid.Col>
+        </Grid>
+        <RemoveButton
+          id={buttonId<T>(id, 'remove')}
+          iconType='sm'
+          className='rjsf-array-item-remove'
+          disabled={disabled || readonly}
+          onClick={onDropPropertyClick(label)}
+          uiSchema={buttonUiOptions}
+          registry={registry}
+        />
+      </Flex>
+    </div>
+  );
+}

package/src/templates/icons.tsx

@@ -0,0 +1,141 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+interface IconProps extends ComponentPropsWithoutRef<'svg'> {
+  size?: number | string;
+}
+
+export function Plus({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-plus'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M12 5l0 14' />
+      <path d='M5 12l14 0' />
+    </svg>
+  );
+}
+
+export function Copy({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-copy'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z' />
+      <path d='M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1' />
+    </svg>
+  );
+}
+
+export function ChevronDown({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-chevron-down'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M6 9l6 6l6 -6' />
+    </svg>
+  );
+}
+
+export function ChevronUp({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-chevron-up'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M6 15l6 -6l6 6' />
+    </svg>
+  );
+}
+
+export function X({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-x'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M18 6l-12 12' />
+      <path d='M6 6l12 12' />
+    </svg>
+  );
+}
+
+export function ExclamationCircle({ size, style, ...others }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-exclamation-circle'
+      style={{ width: size, height: size, ...style }}
+      {...others}
+    >
+      <path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' />
+      <path d='M12 9v4' />
+      <path d='M12 16v.01' />
+    </svg>
+  );
+}

package/src/templates/index.ts

@@ -0,0 +1,43 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
+import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
+import BaseInputTemplate from './BaseInputTemplate';
+import DescriptionField from './DescriptionField';
+import ErrorList from './ErrorList';
+import ButtonTemplates from './ButtonTemplates';
+import FieldErrorTemplate from './FieldErrorTemplate';
+import FieldTemplate from './FieldTemplate';
+import FieldHelpTemplate from './FieldHelpTemplate';
+import GridTemplate from './GridTemplate';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import TitleField from './TitleField';
+import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
+
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldTitleTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: ButtonTemplates<T, S, F>(),
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldTemplate,
+    FieldHelpTemplate,
+    GridTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+    MultiSchemaFieldTemplate,
+  };
+}
+
+export default generateTemplates();

package/src/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "./"
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib",
+    "baseUrl": "../",
+    "jsx": "react-jsx"
+  },
+  "references": [
+    {
+      "path": "../../core"
+    },
+    {
+      "path": "../../utils"
+    },
+    {
+      "path": "../../validator-ajv8"
+    }
+  ]
+}

package/src/utils.ts

@@ -0,0 +1,37 @@
+import { UIOptionsType } from '@rjsf/utils';
+
+const uiOptionsKeys: Array<keyof UIOptionsType> = [
+  'emptyValue',
+  'classNames',
+  'title',
+  'help',
+  'autocomplete',
+  'disabled',
+  'enumDisabled',
+  'hideError',
+  'readonly',
+  'order',
+  'filePreview',
+  'inline',
+  'inputType',
+  'submitButtonOptions',
+  'widget',
+  'enumNames',
+  'addable',
+  'copyable',
+  'orderable',
+  'removable',
+  'duplicateKeySuffixSeparator',
+  'enumOptions',
+  'enableMarkdownInDescription',
+];
+
+export function cleanupOptions<T extends object>(options: T): Omit<T, keyof UIOptionsType> {
+  const result = {} as T;
+  for (const key in options) {
+    if (!uiOptionsKeys.includes(key as keyof UIOptionsType)) {
+      result[key] = options[key];
+    }
+  }
+  return result as Omit<T, keyof UIOptionsType>;
+}

package/src/widgets/CheckboxWidget.tsx

@@ -0,0 +1,110 @@
+import { ReactElement, ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  descriptionId,
+  getTemplate,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  WidgetProps,
+  labelValue,
+  ariaDescribedByIds,
+} from '@rjsf/utils';
+import { Checkbox } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** 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>): ReactElement {
+  const {
+    id,
+    name,
+    value = false,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    schema,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    uiSchema,
+  } = props;
+
+  const themeProps = cleanupOptions(options);
+
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options,
+  );
+
+  const handleCheckboxChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (!disabled && !readonly && onChange) {
+        onChange(e.currentTarget.checked);
+      }
+    },
+    [onChange, disabled, readonly],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, target.checked);
+      }
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, target.checked);
+      }
+    },
+    [onFocus, id],
+  );
+
+  const description = options.description || schema.description;
+  return (
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Checkbox
+        id={id}
+        name={name}
+        label={labelValue(label || undefined, hideLabel, false)}
+        disabled={disabled || readonly}
+        required={required}
+        autoFocus={autofocus}
+        checked={typeof value === 'undefined' ? false : value === 'true' || value}
+        onChange={handleCheckboxChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+        {...themeProps}
+      />
+    </>
+  );
+}

package/src/widgets/CheckboxesWidget.tsx

@@ -0,0 +1,112 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsValueForIndex,
+  enumOptionsIndexForValue,
+  optionId,
+  titleId,
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Checkbox, Flex, Input } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** 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,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const themeProps = cleanupOptions(options);
+
+  const handleChange = useCallback(
+    (nextValue: any) => {
+      if (!disabled && !readonly && onChange) {
+        onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+      }
+    },
+    [onChange, disabled, readonly, enumOptions, emptyValue],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+      }
+    },
+    [onBlur, id, enumOptions, emptyValue],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+      }
+    },
+    [onFocus, id, enumOptions, emptyValue],
+  );
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
+    <>
+      {!hideLabel && !!label && (
+        <Input.Label id={titleId<T>(id)} required={required}>
+          {label}
+        </Input.Label>
+      )}
+      <Checkbox.Group
+        id={id}
+        value={selectedIndexes}
+        onChange={handleChange}
+        required={required}
+        readOnly={disabled || readonly}
+        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+        {...themeProps}
+      >
+        {Array.isArray(enumOptions) ? (
+          <Flex mt='xs' direction={inline ? 'row' : 'column'} gap='xs' wrap='wrap'>
+            {enumOptions.map((option, i) => (
+              <Checkbox
+                key={i}
+                id={optionId(id, i)}
+                name={id}
+                value={String(i)}
+                label={option.label}
+                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
+                autoFocus={i === 0 && autofocus}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+              />
+            ))}
+          </Flex>
+        ) : null}
+      </Checkbox.Group>
+    </>
+  ) : null;
+}

package/src/widgets/ColorWidget.tsx

@@ -0,0 +1,85 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  labelValue,
+  ariaDescribedByIds,
+} from '@rjsf/utils';
+import { ColorInput } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** The `ColorWidget` component uses the `ColorInput` from Mantine, allowing users to pick a color.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const themeProps = cleanupOptions(options);
+
+  const handleChange = useCallback(
+    (nextValue: string) => {
+      onChange(nextValue);
+    },
+    [onChange],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, target && target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, target && target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  return (
+    <ColorInput
+      id={id}
+      name={name}
+      value={value || ''}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      label={labelValue(label || undefined, hideLabel, false)}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      {...themeProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      popoverProps={{ withinPortal: false }}
+    />
+  );
+}

package/src/widgets/DateTime/AltDateTimeWidget.tsx

@@ -0,0 +1,22 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+import _AltDateWidget from './AltDateWidget';
+
+/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+ *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function AltDateTimeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget showTime {...props} />;
+}
+
+AltDateTimeWidget.defaultProps = {
+  ..._AltDateWidget?.defaultProps,
+  showTime: true,
+};