@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
1,511 lines (1,475 loc) • 55.6 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Form: () => Form_default,
Templates: () => templates_default,
Theme: () => Theme_default,
Widgets: () => widgets_default,
default: () => src_default,
generateForm: () => generateForm,
generateTemplates: () => generateTemplates,
generateTheme: () => generateTheme,
generateWidgets: () => generateWidgets
});
module.exports = __toCommonJS(src_exports);
// src/Form/index.ts
var import_core23 = require("@rjsf/core");
// src/templates/ArrayFieldItemTemplate.tsx
var import_core = require("@mantine/core");
var import_jsx_runtime = require("react/jsx-runtime");
function ArrayFieldItemTemplate(props) {
const {
disabled,
className,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
hasToolbar,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
uiSchema,
registry,
children
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { className: className || "array-item", mb: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Flex, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { w: "100%", children }),
hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", gap: 2, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveUpButton2,
{
iconType: "sm",
className: "array-item-move-up",
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveDownButton2,
{
iconType: "sm",
className: "array-item-move-down",
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CopyButton2,
{
iconType: "sm",
className: "array-item-copy",
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RemoveButton2,
{
iconType: "sm",
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] })
] }) }, `array-item-${index}`);
}
// src/templates/ArrayFieldTemplate.tsx
var import_utils = require("@rjsf/utils");
var import_core2 = require("@mantine/core");
var import_jsx_runtime2 = require("react/jsx-runtime");
function ArrayFieldTemplate(props) {
const {
canAdd,
className,
disabled,
idSchema,
items,
onAddClick,
readonly,
required,
schema,
uiSchema,
title,
registry
} = props;
const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
const ArrayFieldDescriptionTemplate = (0, import_utils.getTemplate)(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = (0, import_utils.getTemplate)(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate2 = (0, import_utils.getTemplate)(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const legend = (uiOptions.title || title) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ArrayFieldTitleTemplate2,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Fieldset, { legend, className, id: idSchema.$id, children: [
(uiOptions.description || schema.description) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Box, { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
canAdd && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Group, { justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
AddButton2,
{
className: "array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) })
] });
}
// src/templates/ArrayFieldTitleTemplate.tsx
var import_utils2 = require("@rjsf/utils");
var import_core3 = require("@mantine/core");
var import_jsx_runtime3 = require("react/jsx-runtime");
function ArrayFieldTitleTemplate(props) {
const { idSchema, title, uiSchema, registry } = props;
const options = (0, import_utils2.getUiOptions)(uiSchema, registry.globalUiOptions);
const { label: displayLabel = true } = options;
if (!title || !displayLabel) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Title, { id: (0, import_utils2.titleId)(idSchema), order: 4, fw: "normal", children: title });
}
// src/templates/BaseInputTemplate.tsx
var import_utils3 = require("@rjsf/utils");
var import_core4 = require("@mantine/core");
// src/utils.ts
var uiOptionsKeys = [
"emptyValue",
"classNames",
"title",
"help",
"autocomplete",
"disabled",
"enumDisabled",
"hideError",
"readonly",
"order",
"filePreview",
"inline",
"inputType",
"submitButtonOptions",
"widget",
"enumNames",
"addable",
"copyable",
"orderable",
"removable",
"duplicateKeySuffixSeparator",
"enumOptions",
"enableMarkdownInDescription"
];
function cleanupOptions(options) {
const result = {};
for (const key in options) {
if (!uiOptionsKeys.includes(key)) {
result[key] = options[key];
}
}
return result;
}
// src/templates/BaseInputTemplate.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function BaseInputTemplate(props) {
const {
id,
type,
schema,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
onChange,
onChangeOverride,
onBlur,
onFocus,
options,
rawErrors
} = props;
const inputProps = (0, import_utils3.getInputProps)(schema, type, options, false);
const themeProps = cleanupOptions(options);
const handleNumberChange = (value2) => onChange(value2);
const handleChange = onChangeOverride ? onChangeOverride : (e) => onChange(e.target.value === "" ? options.emptyValue ?? "" : e.target.value);
const handleBlur = (e) => onBlur(id, e.target && e.target.value);
const handleFocus = (e) => onFocus(id, e.target && e.target.value);
const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.NumberInput,
{
id,
name: id,
label: (0, import_utils3.labelValue)(label || void 0, hideLabel, false),
required,
autoFocus: autofocus,
disabled: disabled || readonly,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleNumberChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
list: schema.examples ? (0, import_utils3.examplesId)(id) : void 0,
...inputProps,
...themeProps,
step: typeof inputProps.step === "number" ? inputProps.step : 1,
type: "text",
value,
"aria-describedby": (0, import_utils3.ariaDescribedByIds)(id, !!schema.examples)
}
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.TextInput,
{
id,
name: id,
label: (0, import_utils3.labelValue)(label || void 0, hideLabel, false),
required,
autoFocus: autofocus,
disabled: disabled || readonly,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
list: schema.examples ? (0, import_utils3.examplesId)(id) : void 0,
...inputProps,
...themeProps,
value,
"aria-describedby": (0, import_utils3.ariaDescribedByIds)(id, !!schema.examples)
}
);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
input,
Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("datalist", { id: (0, import_utils3.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: example }, example);
}) })
] });
}
// src/templates/ErrorList.tsx
var import_utils5 = require("@rjsf/utils");
var import_core5 = require("@mantine/core");
// src/templates/icons.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function Plus({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 5l0 14" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 12l14 0" })
]
}
);
}
function Copy({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
]
}
);
}
function ChevronDown({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 9l6 6l6 -6" })
]
}
);
}
function ChevronUp({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 15l6 -6l6 6" })
]
}
);
}
function X({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6l-12 12" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 6l12 12" })
]
}
);
}
function ExclamationCircle({ size, style, ...others }) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"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,
children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 16v.01" })
]
}
);
}
// src/templates/ErrorList.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_core5.Alert,
{
color: "red",
variant: "transparent",
title: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.Title, { order: 5, fw: "normal", children: translateString(import_utils5.TranslatableString.ErrorsLabel) }),
icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExclamationCircle, {}),
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.List, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.List.Item, { c: "red", children: error.stack }, `error-${index}`)) })
}
);
}
// src/templates/ButtonTemplates/SubmitButton.tsx
var import_core6 = require("@mantine/core");
var import_utils6 = require("@rjsf/utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils6.getSubmitButtonOptions)(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Button, { type: "submit", variant: "filled", ...submitButtonProps, children: submitText });
}
// src/templates/ButtonTemplates/AddButton.tsx
var import_utils8 = require("@rjsf/utils");
// src/templates/ButtonTemplates/IconButton.tsx
var import_core7 = require("@mantine/core");
var import_utils7 = require("@rjsf/utils");
var import_jsx_runtime8 = require("react/jsx-runtime");
function IconButton(props) {
const { icon, iconType, color, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_core7.ActionIcon,
{
size: iconType,
color,
onClick,
...otherProps,
children: icon
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { title: translateString(import_utils7.TranslatableString.CopyButton), variant: "subtle", ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Copy, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
IconButton,
{
title: translateString(import_utils7.TranslatableString.MoveDownButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDown, {})
}
);
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
IconButton,
{
title: translateString(import_utils7.TranslatableString.MoveUpButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronUp, {})
}
);
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
IconButton,
{
title: translateString(import_utils7.TranslatableString.RemoveButton),
variant: "subtle",
color: "red",
...props,
icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(X, {})
}
);
}
// src/templates/ButtonTemplates/AddButton.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconButton, { title: translateString(import_utils8.TranslatableString.CopyButton), variant: "subtle", ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Plus, {}) });
}
// src/templates/ButtonTemplates/index.ts
function buttonTemplates() {
return {
SubmitButton,
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton
};
}
var ButtonTemplates_default = buttonTemplates;
// src/templates/FieldErrorTemplate.tsx
var import_utils9 = require("@rjsf/utils");
var import_core8 = require("@mantine/core");
var import_jsx_runtime10 = require("react/jsx-runtime");
function FieldErrorTemplate({ errors, idSchema }) {
if (!errors || !errors.length) {
return null;
}
const id = (0, import_utils9.errorId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core8.Box, { id, c: "red", display: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core8.List, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core8.List.Item, { children: error }, `field-error-${index}`)) }) });
}
// src/templates/FieldTemplate.tsx
var import_utils10 = require("@rjsf/utils");
var import_core9 = require("@mantine/core");
var import_jsx_runtime11 = require("react/jsx-runtime");
function FieldTemplate(props) {
const { id, classNames, style, label, errors, help, hidden, schema, uiSchema, registry, children, ...otherProps } = props;
const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
const WrapIfAdditionalTemplate2 = (0, import_utils10.getTemplate)(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core9.Box, { display: "none", children });
}
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
WrapIfAdditionalTemplate2,
{
id,
classNames,
style,
label,
schema,
uiSchema,
registry,
...otherProps,
children: [
children,
help,
errors
]
}
);
}
// src/templates/FieldHelpTemplate.tsx
var import_utils11 = require("@rjsf/utils");
var import_core10 = require("@mantine/core");
var import_jsx_runtime12 = require("react/jsx-runtime");
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
const id = (0, import_utils11.helpId)(idSchema);
return !help ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core10.Text, { id, size: "sm", my: "xs", c: "dimmed", children: help });
}
// src/templates/ObjectFieldTemplate.tsx
var import_utils12 = require("@rjsf/utils");
var import_core11 = require("@mantine/core");
var import_jsx_runtime13 = require("react/jsx-runtime");
function ObjectFieldTemplate(props) {
const {
title,
description,
disabled,
properties,
onAddClick,
readonly,
required,
schema,
uiSchema,
idSchema,
formData,
registry
} = props;
const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
const TitleFieldTemplate = (0, import_utils12.getTemplate)("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = (0, import_utils12.getTemplate)(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const gridCols = typeof uiOptions?.gridCols === "number" && uiOptions?.gridCols || void 0;
const gridSpacing = uiOptions?.gridSpacing;
const gridVerticalSpacing = uiOptions?.gridVerticalSpacing;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core11.Container, { id: idSchema.$id, children: [
title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
TitleFieldTemplate,
{
id: (0, import_utils12.titleId)(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils12.descriptionId)(idSchema),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_core11.SimpleGrid,
{
cols: gridCols,
spacing: gridSpacing,
verticalSpacing: gridVerticalSpacing,
children: properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core11.Box, { children: element.content }, element.name))
}
),
(0, import_utils12.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core11.Box, { mt: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
AddButton2,
{
disabled: disabled || readonly,
onClick: onAddClick(schema),
uiSchema,
registry
}
) })
] });
}
// src/templates/TitleField.tsx
var import_core12 = require("@mantine/core");
var import_jsx_runtime14 = require("react/jsx-runtime");
function TitleField(props) {
const { id, title } = props;
return title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core12.Title, { id, order: 3, fw: "normal", children: title }) : null;
}
// src/templates/WrapIfAdditionalTemplate.tsx
var import_utils13 = require("@rjsf/utils");
var import_core13 = require("@mantine/core");
var import_jsx_runtime15 = require("react/jsx-runtime");
function WrapIfAdditionalTemplate(props) {
const {
id,
classNames,
style,
label,
required,
readonly,
disabled,
schema,
uiSchema,
onKeyChange,
onDropPropertyClick,
registry,
children
} = props;
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(import_utils13.TranslatableString.KeyLabel, [label]);
const additional = import_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target && target.value);
const uiOptions = uiSchema ? uiSchema[import_utils13.UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[import_utils13.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Flex, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Grid, { w: "100%", align: "center", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core13.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_core13.TextInput,
{
className: "form-group",
label: keyLabel,
defaultValue: label,
required,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0
}
) }) }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core13.Grid.Col, { span: 6, className: "form-additional", children })
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
RemoveButton2,
{
iconType: "sm",
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema: buttonUiOptions,
registry
}
)
] }) });
}
// src/templates/index.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
ArrayFieldTitleTemplate,
BaseInputTemplate,
ButtonTemplates: ButtonTemplates_default(),
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldTemplate,
FieldHelpTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var templates_default = generateTemplates();
// src/widgets/index.ts
var import_dayjs2 = __toESM(require("dayjs"));
var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
// src/widgets/DateTime/AltDateWidget.tsx
var import_react = require("react");
var import_utils14 = require("@rjsf/utils");
var import_core14 = require("@mantine/core");
var import_jsx_runtime16 = require("react/jsx-runtime");
function readyForChange(state) {
return Object.values(state).every((value) => value !== -1);
}
function AltDateWidget(props) {
const {
id,
value,
required,
disabled,
readonly,
label,
hideLabel,
rawErrors,
options,
onChange,
showTime = false,
registry
} = props;
const { translateString } = registry;
const [lastValue, setLastValue] = (0, import_react.useState)(value);
const [state, setState] = (0, import_react.useState)((0, import_utils14.parseDateString)(value, showTime));
(0, import_react.useEffect)(() => {
const stateValue = (0, import_utils14.toDateString)(state, showTime);
if (lastValue !== value) {
setLastValue(value);
setState((0, import_utils14.parseDateString)(value, showTime));
} else if (readyForChange(state) && stateValue !== value) {
onChange(stateValue);
setLastValue(stateValue);
}
}, [showTime, value, onChange, state, lastValue]);
const handleChange = (0, import_react.useCallback)((property, nextValue) => {
setState((prev) => ({ ...prev, [property]: typeof nextValue === "undefined" ? -1 : nextValue }));
}, []);
const handleSetNow = (0, import_react.useCallback)(() => {
if (!disabled && !readonly) {
const nextState = (0, import_utils14.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange((0, import_utils14.toDateString)(nextState, showTime));
}
}, [disabled, readonly, showTime]);
const handleClear = (0, import_react.useCallback)(() => {
if (!disabled && !readonly) {
onChange("");
}
}, [disabled, readonly, onChange]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core14.Input.Label, { id: (0, import_utils14.titleId)(id), required, children: label }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core14.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
(0, import_utils14.getDateElementProps)(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core14.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_core14.Select,
{
id: elemId,
name: elemId,
placeholder: elemProps.type,
disabled: disabled || readonly,
data: (0, import_utils14.dateRangeOptions)(elemProps.range[0], elemProps.range[1]).map((item) => item.value.toString()),
value: !elemProps.value || elemProps.value < 0 ? null : elemProps.value.toString(),
onChange: (v) => handleChange(elemProps.type, v),
searchable: false,
allowDeselect: false,
comboboxProps: { withinPortal: false },
"aria-describedby": (0, import_utils14.ariaDescribedByIds)(elemId)
}
) }, i);
}),
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core14.Group, { wrap: "nowrap", gap: 3, children: [
(options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core14.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(import_utils14.TranslatableString.NowLabel) }),
(options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core14.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(import_utils14.TranslatableString.ClearLabel) })
] })
] }),
rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core14.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
] });
}
AltDateWidget.defaultProps = {
showTime: false
};
var AltDateWidget_default = AltDateWidget;
// src/widgets/DateTime/AltDateTimeWidget.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget_default?.defaultProps,
showTime: true
};
// src/widgets/DateTime/DateTimeInput.tsx
var import_react2 = require("react");
var import_utils15 = require("@rjsf/utils");
var import_dayjs = __toESM(require("dayjs"));
var import_dates = require("@mantine/dates");
var import_jsx_runtime18 = require("react/jsx-runtime");
var dateParser = (input, format) => {
if (!input) {
return null;
}
const d = (0, import_dayjs.default)(input, format);
return d.isValid() ? d.toDate() : null;
};
var dateFormat = (date, format) => {
if (!date) {
return "";
}
return (0, import_dayjs.default)(date).format(format || "YYYY-MM-DD");
};
function DateTimeInput(props) {
const {
id,
name,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
onChange,
onBlur,
onFocus,
valueFormat,
displayFormat
} = props;
const emptyValue = options?.emptyValue ?? "";
const handleChange = (0, import_react2.useCallback)(
(nextValue) => {
onChange(dateFormat(nextValue, valueFormat));
},
[onChange, emptyValue]
);
const handleBlur = () => onBlur && onBlur(id, value);
const handleFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_dates.DateInput,
{
id,
name,
value: dateParser(value, valueFormat),
dateParser: (v) => dateParser(v, displayFormat),
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: (0, import_utils15.labelValue)(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...options,
"aria-describedby": (0, import_utils15.ariaDescribedByIds)(id),
popoverProps: { withinPortal: false },
classNames: typeof options?.classNames === "object" ? options.classNames : void 0,
valueFormat: displayFormat
}
);
}
// src/widgets/DateTime/DateWidget.tsx
var import_jsx_runtime19 = require("react/jsx-runtime");
function DateWidget(props) {
const { valueFormat = "YYYY-MM-DD", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
// src/widgets/DateTime/DateTimeWidget.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
function DateTimeWidget(props) {
const { valueFormat = "YYYY-MM-DD HH:mm:ss", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
// src/widgets/DateTime/TimeWidget.tsx
var import_react3 = require("react");
var import_utils16 = require("@rjsf/utils");
var import_dates2 = require("@mantine/dates");
var import_jsx_runtime21 = require("react/jsx-runtime");
function TimeWidget(props) {
const {
id,
name,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
onChange,
onBlur,
onFocus
} = props;
const emptyValue = options.emptyValue || "";
const handleChange = (0, import_react3.useCallback)(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = (0, import_react3.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = (0, import_react3.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_dates2.TimeInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: (0, import_utils16.labelValue)(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...options,
"aria-describedby": (0, import_utils16.ariaDescribedByIds)(id),
classNames: typeof options?.classNames === "object" ? options.classNames : void 0
}
);
}
// src/widgets/CheckboxesWidget.tsx
var import_react4 = require("react");
var import_utils17 = require("@rjsf/utils");
var import_core15 = require("@mantine/core");
var import_jsx_runtime22 = require("react/jsx-runtime");
function CheckboxesWidget(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 = (0, import_react4.useCallback)(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange((0, import_utils17.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = (0, import_react4.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, (0, import_utils17.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = (0, import_react4.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, (0, import_utils17.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selectedIndexes = (0, import_utils17.enumOptionsIndexForValue)(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core15.Input.Label, { id: (0, import_utils17.titleId)(id), required, children: label }),
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_core15.Checkbox.Group,
{
id,
value: selectedIndexes,
onChange: handleChange,
required,
readOnly: disabled || readonly,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
"aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core15.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_core15.Checkbox,
{
id: (0, import_utils17.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
},
i
)) }) : null
}
)
] }) : null;
}
// src/widgets/CheckboxWidget.tsx
var import_react5 = require("react");
var import_utils19 = require("@rjsf/utils");
var import_core16 = require("@mantine/core");
var import_jsx_runtime23 = require("react/jsx-runtime");
function CheckboxWidget(props) {
const {
id,
name,
value = false,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
onChange,
onBlur,
onFocus
} = props;
const themeProps = cleanupOptions(options);
const handleCheckboxChange = (0, import_react5.useCallback)(
(e) => {
if (!disabled && !readonly && onChange) {
onChange(e.currentTarget.checked);
}
},
[onChange, disabled, readonly]
);
const handleBlur = (0, import_react5.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, target.checked);
}
},
[onBlur, id]
);
const handleFocus = (0, import_react5.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, target.checked);
}
},
[onFocus, id]
);
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_core16.Checkbox,
{
id,
name,
label: (0, import_utils19.labelValue)(label || void 0, hideLabel, false),
disabled: disabled || readonly,
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") : void 0,
"aria-describedby": (0, import_utils19.ariaDescribedByIds)(id),
...themeProps
}
);
}
// src/widgets/ColorWidget.tsx
var import_react6 = require("react");
var import_utils21 = require("@rjsf/utils");
var import_core17 = require("@mantine/core");
var import_jsx_runtime24 = require("react/jsx-runtime");
function ColorWidget(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 = (0, import_react6.useCallback)(
(nextValue) => {
onChange(nextValue);
},
[onChange, emptyValue]
);
const handleBlur = (0, import_react6.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = (0, import_react6.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
import_core17.ColorInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: (0, import_utils21.labelValue)(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps,
"aria-describedby": (0, import_utils21.ariaDescribedByIds)(id),
popoverProps: { withinPortal: false }
}
);
}
// src/widgets/PasswordWidget.tsx
var import_react7 = require("react");
var import_utils23 = require("@rjsf/utils");
var import_core18 = require("@mantine/core");
var import_jsx_runtime25 = require("react/jsx-runtime");
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 = (0, import_react7.useCallback)(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = (0, import_react7.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = (0, import_react7.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_core18.PasswordInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: (0, import_utils23.labelValue)(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps,
"aria-describedby": (0, import_utils23.ariaDescribedByIds)(id)
}
);
}
// src/widgets/RadioWidget.tsx
var import_react8 = require("react");
var import_utils25 = require("@rjsf/utils");
var import_core19 = require("@mantine/core");
var import_jsx_runtime26 = require("react/jsx-runtime");
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 = (0, import_react8.useCallback)(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange((0, import_utils25.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = (0, import_react8.useCallback)(
({ target }) => {
if (onBlur) {
onBlur(id, (0, import_utils25.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = (0, import_react8.useCallback)(
({ target }) => {
if (onFocus) {
onFocus(id, (0, import_utils25.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selected = (0, import_utils25.enumOptionsIndexForValue)(value, enumOptions);
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_core19.Radio.Group,
{
id,
name: id,
value: selected,
label: !hideLabel ? label : void 0,
onChange: handleChange,
required,
readOnly: disabled || readonly,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
"aria-describedby": (0, import_utils25.ariaDescribedByIds)(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core19.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_core19.Radio,
{
id: (0, import_utils25.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
}
);
}
// src/widgets/RangeWidget.tsx
var import_react9 = require("react");
var import_utils27 = require("@rjsf/utils");
var import_core20 = require("@mantine/core");
var import_jsx_runtime27 = require("react/jsx-runtime");
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 } = (0, import_utils27.rangeSpec)(schema);
const handleChange = (0, import_react9.useCallback)(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(nextValue);
}
},
[onChange, disabled, readonly]
);
const handleBlur = () => onBlur && onBlur(id, value);
const handleFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core20.Input.Label, { id: (0, import_utils27.titleId)(id), required, children: label }),
options?.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core20.Input.Description, { children: options.description }),
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
import_core20.Slider,
{
id,
name,
value,
max,
min,
step,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: handleChange,
onBlur: h