@rjsf/mantine 6.0.0-beta.14

package/lib/widgets/PasswordWidget.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { ariaDescribedByIds, labelValue, } from '@rjsf/utils';
+import { PasswordInput } from '@mantine/core';
+import { cleanupOptions } from '../utils';
+/**
+ * The `PasswordWidget` component renders a password input element.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function PasswordWidget(props) {
+    const { id, name, value, placeholder, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, } = props;
+    const emptyValue = options.emptyValue || '';
+    const themeProps = cleanupOptions(options);
+    const handleChange = useCallback((e) => {
+        onChange(e.target.value === '' ? emptyValue : e.target.value);
+    }, [onChange, emptyValue]);
+    const handleBlur = useCallback(({ target }) => {
+        if (onBlur) {
+            onBlur(id, target && target.value);
+        }
+    }, [onBlur, id]);
+    const handleFocus = useCallback(({ target }) => {
+        if (onFocus) {
+            onFocus(id, target && target.value);
+        }
+    }, [onFocus, id]);
+    return (_jsx(PasswordInput, { 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(id) }));
+}
+//# sourceMappingURL=PasswordWidget.js.map

package/lib/widgets/PasswordWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordWidget.js","sourceRoot":"","sources":["../../src/widgets/PasswordWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAElB,UAAU,GAIX,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;IAC3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAE3C,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAgC,EAAE,EAAE;QACnC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE;QAC3C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE;QAC3C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,EAAE,CAAC,CACd,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,WAAW,IAAI,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EACvD,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,KACvE,UAAU,sBACI,kBAAkB,CAAI,EAAE,CAAC,GAC3C,CACH,CAAC;AACJ,CAAC"}

package/lib/widgets/RadioWidget.d.ts

@@ -0,0 +1,7 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/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>): import("react/jsx-runtime").JSX.Element;

package/lib/widgets/RadioWidget.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, optionId, } 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(props) {
+    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) => {
+        if (!disabled && !readonly && onChange) {
+            onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
+        }
+    }, [onChange, disabled, readonly, enumOptions, emptyValue]);
+    const handleBlur = useCallback(({ target }) => {
+        if (onBlur) {
+            onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+        }
+    }, [onBlur, id, enumOptions, emptyValue]);
+    const handleFocus = useCallback(({ target }) => {
+        if (onFocus) {
+            onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+        }
+    }, [onFocus, id, enumOptions, emptyValue]);
+    const selected = enumOptionsIndexForValue(value, enumOptions);
+    return (_jsx(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(id), ...themeProps, children: Array.isArray(enumOptions) ? (_jsx(Flex, { mt: 'xs', direction: inline ? 'row' : 'column', gap: 'xs', wrap: 'wrap', children: enumOptions.map((option, i) => (_jsx(Radio, { 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 }, i))) })) : null }));
+}
+//# sourceMappingURL=RadioWidget.js.map

package/lib/widgets/RadioWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioWidget.js","sourceRoot":"","sources":["../../src/widgets/RadioWidget.tsx"],"names":[],"mappings":"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"}

package/lib/widgets/RangeWidget.d.ts

@@ -0,0 +1,7 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/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>): import("react/jsx-runtime").JSX.Element;

package/lib/widgets/RangeWidget.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { ariaDescribedByIds, rangeSpec, 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(props) {
+    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) => {
+        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 (_jsxs(_Fragment, { children: [!hideLabel && !!label && (_jsx(Input.Label, { id: titleId(id), required: required, children: label })), (options === null || options === void 0 ? void 0 : options.description) && _jsx(Input.Description, { children: options.description }), _jsx(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(id) }), rawErrors &&
+                (rawErrors === null || rawErrors === void 0 ? void 0 : rawErrors.length) > 0 &&
+                rawErrors.map((error, index) => (_jsx(Input.Error, { children: error }, `range-widget-input-errors-${index}`)))] }));
+}
+//# sourceMappingURL=RangeWidget.js.map

package/lib/widgets/RangeWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeWidget.js","sourceRoot":"","sources":["../../src/widgets/RangeWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,kBAAkB,EAClB,SAAS,EAKT,OAAO,GACR,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,KAA2B;IAE3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAc,EAAE,EAAE;QACjB,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACvC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC/B,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,CACxB,KAAC,KAAK,CAAC,KAAK,IAAC,EAAE,EAAE,OAAO,CAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,YAChD,KAAK,GACM,CACf,EACA,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,KAAC,KAAK,CAAC,WAAW,cAAE,OAAO,CAAC,WAAW,GAAqB,EACrF,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,KAChB,UAAU,sBACI,kBAAkB,CAAI,EAAE,CAAC,GAC3C,EACD,SAAS;gBACR,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,IAAG,CAAC;gBACrB,SAAS,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAAC,CAC9C,KAAC,KAAK,CAAC,KAAK,cAA6C,KAAK,IAA5C,6BAA6B,KAAK,EAAE,CAAuB,CAC9E,CAAC,IACH,CACJ,CAAC;AACJ,CAAC"}

package/lib/widgets/SelectWidget.d.ts

@@ -0,0 +1,7 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/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>): import("react/jsx-runtime").JSX.Element;

package/lib/widgets/SelectWidget.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, } 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(props) {
+    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) => {
+        if (!disabled && !readonly && onChange) {
+            onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
+        }
+    }, [onChange, disabled, readonly, enumOptions, emptyValue]);
+    const handleBlur = useCallback(({ target }) => {
+        if (onBlur) {
+            onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+        }
+    }, [onBlur, id, enumOptions, emptyValue]);
+    const handleFocus = useCallback(({ target }) => {
+        if (onFocus) {
+            onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+        }
+    }, [onFocus, id, enumOptions, emptyValue]);
+    const selectedIndexes = enumOptionsIndexForValue(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 (_jsx(Component, { id: id, name: id, label: labelValue(label || undefined, hideLabel, false), data: selectOptions, value: multiple ? selectedIndexes : selectedIndexes, 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: true, ...themeProps, "aria-describedby": ariaDescribedByIds(id), comboboxProps: { withinPortal: false } }));
+}
+//# sourceMappingURL=SelectWidget.js.map

package/lib/widgets/SelectWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectWidget.js","sourceRoot":"","sources":["../../src/widgets/SelectWidget.tsx"],"names":[],"mappings":"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"}

package/lib/widgets/TextareaWidget.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { StrictRJSFSchema, RJSFSchema, FormContextType, WidgetProps } from '@rjsf/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;

package/lib/widgets/TextareaWidget.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { 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(props) {
+    var _a;
+    const { id, name, value, placeholder, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, } = props;
+    const themeProps = cleanupOptions(options);
+    const emptyValue = (_a = options === null || options === void 0 ? void 0 : options.emptyValue) !== null && _a !== void 0 ? _a : '';
+    const handleChange = useCallback((e) => {
+        onChange(e.target.value === '' ? emptyValue : e.target.value);
+    }, [onChange, emptyValue]);
+    const handleBlur = useCallback(({ target }) => {
+        if (onBlur) {
+            onBlur(id, target && target.value);
+        }
+    }, [onBlur, id]);
+    const handleFocus = useCallback(({ target }) => {
+        if (onFocus) {
+            onFocus(id, target && target.value);
+        }
+    }, [onFocus, id]);
+    return (_jsx(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(id), ...themeProps }));
+}
+//# sourceMappingURL=TextareaWidget.js.map

package/lib/widgets/TextareaWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaWidget.js","sourceRoot":"","sources":["../../src/widgets/TextareaWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAKL,UAAU,EACV,kBAAkB,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;;IAC3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,EAAE,CAAC;IAE7C,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAmC,EAAE,EAAE;QACtC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,EAAE,CAAC,CACd,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,WAAW,IAAI,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EACvD,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,sBACzD,kBAAkB,CAAI,EAAE,CAAC,KACvC,UAAU,GACd,CACH,CAAC;AACJ,CAAC"}

package/lib/widgets/index.d.ts

@@ -0,0 +1,4 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+export declare function generateWidgets<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(): RegistryWidgetsType<T, S, F>;
+declare const _default: RegistryWidgetsType<any, RJSFSchema, any>;
+export default _default;

package/lib/widgets/index.js

@@ -0,0 +1,34 @@
+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() {
+    return {
+        AltDateTimeWidget,
+        AltDateWidget,
+        CheckboxesWidget,
+        CheckboxWidget,
+        ColorWidget,
+        FileWidget,
+        DateTimeWidget,
+        DateWidget,
+        PasswordWidget,
+        RadioWidget,
+        RangeWidget,
+        SelectWidget,
+        TextareaWidget,
+        TimeWidget,
+    };
+}
+export default generateWidgets();
+//# sourceMappingURL=index.js.map

package/lib/widgets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/widgets/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACtG,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,gHAAgH;AAChH,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAEhC,MAAM,UAAU,eAAe;IAK7B,OAAO;QACL,iBAAiB;QACjB,aAAa;QACb,gBAAgB;QAChB,cAAc;QACd,WAAW;QACX,UAAU;QACV,cAAc;QACd,UAAU;QACV,cAAc;QACd,WAAW;QACX,WAAW;QACX,YAAY;QACZ,cAAc;QACd,UAAU;KACX,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@rjsf/mantine",
+  "version": "6.0.0-beta.14",
+  "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": {
+    "@mantine/core": ">=8",
+    "@mantine/dates": ">=8",
+    "@mantine/hooks": ">=8",
+    "@rjsf/core": "^6.0.0-beta.14",
+    "@rjsf/utils": "^6.0.0-beta.14",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@mantine/core": "^8.2.4",
+    "@mantine/dates": "^8.2.4",
+    "@mantine/hooks": "^8.2.4",
+    "@restart/hooks": "^0.6.2",
+    "@restart/ui": "^1.9.4",
+    "@rjsf/core": "^6.0.0-beta.14",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.14",
+    "@rjsf/utils": "^6.0.0-beta.14",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.14",
+    "eslint": "^8.57.1",
+    "uncontrollable": "^9.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Farhad Zare <zfarhad.dev@gmail.com>",
+  "contributors": [
+    "Heath Chiavettone <heath.chiavettone@freenome.com",
+    "Algirdas Jokubauskas <sdkster@gmail.com"
+  ],
+  "keywords": [
+    "Mantine",
+    "Mantine UI",
+    "react-jsonschema-form",
+    "jsonschema",
+    "json-schema",
+    "json",
+    "schema",
+    "form",
+    "react",
+    "mantine-ui",
+    "rjsf-mantine"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
+  },
+  "license": "Apache-2.0"
+}

package/src/Form/index.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react';
+import { FormProps, withTheme } from '@rjsf/core';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import { generateTheme } from '../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 generateForm();

package/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<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+  };
+}
+
+export default generateTheme();

package/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;

package/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<T, S, F>) {
+  const { buttonsProps, className, hasToolbar, index, uiSchema, registry, children } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
+    registry,
+    uiOptions,
+  );
+
+  return (
+    <Box key={`array-item-${index}`} className={className || 'rjsf-array-item'} mb='xs'>
+      <Flex gap='xs' align='end' justify='center'>
+        <Box w='100%'>{children}</Box>
+        {hasToolbar && (
+          <Group wrap='nowrap' gap={2} mb={7}>
+            <ArrayFieldItemButtonsTemplate {...buttonsProps} />
+          </Group>
+        )}
+      </Flex>
+    </Box>
+  );
+}

package/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<T, S, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    title,
+    registry,
+  } = props;
+
+  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', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions,
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  const legend = (uiOptions.title || title) && (
+    <ArrayFieldTitleTemplate
+      idSchema={idSchema}
+      required={required}
+      title={uiOptions.title || title}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    />
+  );
+
+  return (
+    <Fieldset legend={legend} className={className} id={idSchema.$id}>
+      {(uiOptions.description || schema.description) && (
+        <ArrayFieldDescriptionTemplate
+          description={uiOptions.description || schema.description}
+          idSchema={idSchema}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+
+      <Box className='row rjsf-array-item-list'>
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
+      </Box>
+
+      {canAdd && (
+        <Group justify='flex-end'>
+          <AddButton
+            id={buttonId<T>(idSchema, 'add')}
+            className='rjsf-array-item-add'
+            disabled={disabled || readonly}
+            onClick={onAddClick}
+            uiSchema={uiSchema}
+            registry={registry}
+            iconType='md'
+          />
+        </Group>
+      )}
+    </Fieldset>
+  );
+}

package/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<T, S, F>) {
+  const { idSchema, title, uiSchema, registry } = props;
+
+  const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
+  const { label: displayLabel = true } = options;
+  if (!title || !displayLabel) {
+    return null;
+  }
+  return (
+    <Title id={titleId<T>(idSchema)} order={4} fw='normal'>
+      {title}
+    </Title>
+  );
+}