@rjsf/mantine 6.0.0-beta.14

package/src/widgets/RadioWidget.tsx

@@ -0,0 +1,103 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Radio, Flex } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** 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>(
+  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 && target.value, enumOptions, emptyValue));
+      }
+    },
+    [onBlur, id, enumOptions, emptyValue],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+      }
+    },
+    [onFocus, id, enumOptions, emptyValue],
+  );
+
+  const selected = enumOptionsIndexForValue<S>(value, enumOptions) as string;
+
+  return (
+    <Radio.Group
+      id={id}
+      name={id}
+      value={selected}
+      label={!hideLabel ? label : undefined}
+      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) => (
+            <Radio
+              key={i}
+              id={optionId(id, i)}
+              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}
+    </Radio.Group>
+  );
+}

package/src/widgets/RangeWidget.tsx

@@ -0,0 +1,95 @@
+import { useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  rangeSpec,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  titleId,
+} from '@rjsf/utils';
+import { Slider, Input } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value alongside 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 {
+    id,
+    name,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+    schema,
+  } = props;
+
+  const themeProps = cleanupOptions(options);
+  const { min, max, step } = rangeSpec(schema);
+
+  const handleChange = useCallback(
+    (nextValue: any) => {
+      if (!disabled && !readonly && onChange) {
+        onChange(nextValue);
+      }
+    },
+    [onChange, disabled, readonly],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
+
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
+
+  return (
+    <>
+      {!hideLabel && !!label && (
+        <Input.Label id={titleId<T>(id)} required={required}>
+          {label}
+        </Input.Label>
+      )}
+      {options?.description && <Input.Description>{options.description}</Input.Description>}
+      <Slider
+        id={id}
+        name={name}
+        value={value}
+        max={max}
+        min={min}
+        step={step}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        {...themeProps}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      />
+      {rawErrors &&
+        rawErrors?.length > 0 &&
+        rawErrors.map((error: string, index: number) => (
+          <Input.Error key={`range-widget-input-errors-${index}`}>{error}</Input.Error>
+        ))}
+    </>
+  );
+}

package/src/widgets/SelectWidget.tsx

@@ -0,0 +1,109 @@
+import { FocusEvent, useCallback, useMemo } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  labelValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Select, MultiSelect } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** 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>(
+  props: WidgetProps<T, S, F>,
+) {
+  const {
+    id,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    multiple,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const { enumOptions, enumDisabled, 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 && target.value, enumOptions, emptyValue));
+      }
+    },
+    [onBlur, id, enumOptions, emptyValue],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+      }
+    },
+    [onFocus, id, enumOptions, emptyValue],
+  );
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+
+  const selectOptions = useMemo(() => {
+    if (Array.isArray(enumOptions)) {
+      return enumOptions.map((option, index) => ({
+        key: String(index),
+        value: String(index),
+        label: option.label,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
+      }));
+    }
+    return [];
+  }, [enumDisabled, enumOptions]);
+
+  const Component = multiple ? MultiSelect : Select;
+
+  return (
+    <Component
+      id={id}
+      name={id}
+      label={labelValue(label || undefined, hideLabel, false)}
+      data={selectOptions}
+      value={multiple ? (selectedIndexes as any) : (selectedIndexes as string)}
+      onChange={!readonly ? handleChange : undefined}
+      onBlur={!readonly ? handleBlur : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      autoFocus={autofocus}
+      placeholder={placeholder}
+      disabled={disabled || readonly}
+      required={required}
+      error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
+      searchable
+      {...themeProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      comboboxProps={{ withinPortal: false }}
+    />
+  );
+}

package/src/widgets/TextareaWidget.tsx

@@ -0,0 +1,87 @@
+import { ReactElement, ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  WidgetProps,
+  labelValue,
+  ariaDescribedByIds,
+} from '@rjsf/utils';
+import { Textarea } from '@mantine/core';
+
+import { cleanupOptions } from '../utils';
+
+/** 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>): ReactElement {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    label,
+    hideLabel,
+    rawErrors,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const themeProps = cleanupOptions(options);
+  const emptyValue = options?.emptyValue ?? '';
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(e.target.value === '' ? emptyValue : e.target.value);
+    },
+    [onChange, emptyValue],
+  );
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => {
+      if (onBlur) {
+        onBlur(id, target && target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => {
+      if (onFocus) {
+        onFocus(id, target && target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  return (
+    <Textarea
+      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}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      {...themeProps}
+    />
+  );
+}

package/src/widgets/index.ts

@@ -0,0 +1,42 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { AltDateTimeWidget, AltDateWidget, DateWidget, DateTimeWidget, TimeWidget } from './DateTime';
+import CheckboxesWidget from './CheckboxesWidget';
+import CheckboxWidget from './CheckboxWidget';
+import ColorWidget from './ColorWidget';
+import FileWidget from './FileWidget';
+import PasswordWidget from './PasswordWidget';
+import RadioWidget from './RadioWidget';
+import RangeWidget from './RangeWidget';
+import SelectWidget from './SelectWidget';
+import TextareaWidget from './TextareaWidget';
+
+// This plugin is needed to support the parsing of date and time values in the `DateWidget` and `DateTimeWidget`
+dayjs.extend(customParseFormat);
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    AltDateTimeWidget,
+    AltDateWidget,
+    CheckboxesWidget,
+    CheckboxWidget,
+    ColorWidget,
+    FileWidget,
+    DateTimeWidget,
+    DateWidget,
+    PasswordWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+    TimeWidget,
+  };
+}
+
+export default generateWidgets();