@snups/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
1,746 lines (1,708 loc) • 55.8 kB
JavaScript
// src/Form/index.ts
import { withTheme } from "@snups/rjsf-core";
// src/templates/ArrayFieldItemTemplate.tsx
import {
getTemplate,
getUiOptions
} from "@snups/rjsf-utils";
import { Box, Flex, Group } from "@mantine/core";
import { jsx, jsxs } from "react/jsx-runtime";
function ArrayFieldItemTemplate(props) {
const { buttonsProps, className, hasToolbar, index, uiSchema, registry, children } = props;
const uiOptions = getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = getTemplate(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
return /* @__PURE__ */ jsx(Box, { className: className || "rjsf-array-item", mb: "xs", children: /* @__PURE__ */ jsxs(Flex, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ jsx(Box, { w: "100%", children }),
hasToolbar && /* @__PURE__ */ jsx(Group, { wrap: "nowrap", gap: 2, mb: 7, children: /* @__PURE__ */ jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
] }) }, `array-item-${index}`);
}
// src/templates/ArrayFieldTemplate.tsx
import {
getTemplate as getTemplate2,
getUiOptions as getUiOptions2,
buttonId
} from "@snups/rjsf-utils";
import { Fieldset, Box as Box2, Group as Group2 } from "@mantine/core";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function ArrayFieldTemplate(props) {
const {
canAdd,
className,
disabled,
idSchema,
items,
onAddClick,
readonly,
required,
schema,
uiSchema,
title,
registry
} = props;
const uiOptions = getUiOptions2(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate2(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = getTemplate2(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate2 = getTemplate2(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const legend = (uiOptions.title || title) && /* @__PURE__ */ jsx2(
ArrayFieldTitleTemplate2,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
);
return /* @__PURE__ */ jsxs2(Fieldset, { legend, className, id: idSchema.$id, children: [
(uiOptions.description || schema.description) && /* @__PURE__ */ jsx2(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsx2(Box2, { className: "row rjsf-array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx2(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
canAdd && /* @__PURE__ */ jsx2(Group2, { justify: "flex-end", children: /* @__PURE__ */ jsx2(
AddButton2,
{
id: buttonId(idSchema, "add"),
className: "rjsf-array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry,
iconType: "md"
}
) })
] });
}
// src/templates/ArrayFieldTitleTemplate.tsx
import {
getUiOptions as getUiOptions3,
titleId
} from "@snups/rjsf-utils";
import { Title } from "@mantine/core";
import { jsx as jsx3 } from "react/jsx-runtime";
function ArrayFieldTitleTemplate(props) {
const { idSchema, title, uiSchema, registry } = props;
const options = getUiOptions3(uiSchema, registry.globalUiOptions);
const { label: displayLabel = true } = options;
if (!title || !displayLabel) {
return null;
}
return /* @__PURE__ */ jsx3(Title, { id: titleId(idSchema), order: 4, fw: "normal", children: title });
}
// src/templates/BaseInputTemplate.tsx
import { useCallback } from "react";
import {
ariaDescribedByIds,
examplesId,
getInputProps,
labelValue
} from "@snups/rjsf-utils";
import { TextInput, NumberInput } from "@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
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
function BaseInputTemplate(props) {
const {
id,
type,
schema,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
onChange,
onChangeOverride,
onBlur,
onFocus,
options,
rawErrors,
children
} = props;
const inputProps = getInputProps(schema, type, options, false);
const themeProps = cleanupOptions(options);
const handleNumberChange = useCallback((value2) => onChange(value2), [onChange]);
const handleChange = useCallback(
(e) => {
const handler = onChangeOverride ? onChangeOverride : onChange;
const value2 = e.target.value === "" ? options.emptyValue ?? "" : e.target.value;
handler(value2);
},
[onChange, onChangeOverride, options]
);
const handleBlur = useCallback(
(e) => {
onBlur(id, e.target && e.target.value);
},
[onBlur, id]
);
const handleFocus = useCallback(
(e) => {
onFocus(id, e.target && e.target.value);
},
[onFocus, id]
);
const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ jsx4(
NumberInput,
{
id,
name: id,
label: 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 ? examplesId(id) : void 0,
...inputProps,
...themeProps,
step: typeof inputProps.step === "number" ? inputProps.step : 1,
type: "text",
value,
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
}
) : /* @__PURE__ */ jsx4(
TextInput,
{
id,
name: id,
label: 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 ? examplesId(id) : void 0,
...inputProps,
...themeProps,
value,
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
}
);
return /* @__PURE__ */ jsxs3(Fragment, { children: [
input,
children,
Array.isArray(schema.examples) && /* @__PURE__ */ jsx4("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsx4("option", { value: example }, example);
}) })
] });
}
// src/templates/DescriptionField.tsx
import { RichDescription } from "@snups/rjsf-core";
import { Text } from "@mantine/core";
import { jsx as jsx5 } from "react/jsx-runtime";
function DescriptionField(props) {
const { id, description, registry, uiSchema } = props;
if (description) {
return /* @__PURE__ */ jsx5(Text, { id, mt: 3, mb: "sm", children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema }) });
}
return null;
}
// src/templates/ErrorList.tsx
import { TranslatableString } from "@snups/rjsf-utils";
import { Alert, Title as Title2, List } from "@mantine/core";
// src/templates/icons.tsx
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
function Plus({ size, style, ...others }) {
return /* @__PURE__ */ jsxs4(
"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__ */ jsx6("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx6("path", { d: "M12 5l0 14" }),
/* @__PURE__ */ jsx6("path", { d: "M5 12l14 0" })
]
}
);
}
function Copy({ size, style, ...others }) {
return /* @__PURE__ */ jsxs4(
"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__ */ jsx6("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx6("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__ */ jsx6("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__ */ jsxs4(
"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__ */ jsx6("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx6("path", { d: "M6 9l6 6l6 -6" })
]
}
);
}
function ChevronUp({ size, style, ...others }) {
return /* @__PURE__ */ jsxs4(
"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__ */ jsx6("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx6("path", { d: "M6 15l6 -6l6 6" })
]
}
);
}
function X({ size, style, ...others }) {
return /* @__PURE__ */ jsxs4(
"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__ */ jsx6("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsx6("path", { d: "M18 6l-12 12" }),
/* @__PURE__ */ jsx6("path", { d: "M6 6l12 12" })
]
}
);
}
function ExclamationCircle({ size, style, ...others }) {
return /* @__PURE__ */ jsxs4(
"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__ */ jsx6("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
/* @__PURE__ */ jsx6("path", { d: "M12 9v4" }),
/* @__PURE__ */ jsx6("path", { d: "M12 16v.01" })
]
}
);
}
// src/templates/ErrorList.tsx
import { jsx as jsx7 } from "react/jsx-runtime";
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsx7(
Alert,
{
color: "red",
variant: "transparent",
title: /* @__PURE__ */ jsx7(Title2, { order: 5, fw: "normal", children: translateString(TranslatableString.ErrorsLabel) }),
icon: /* @__PURE__ */ jsx7(ExclamationCircle, {}),
children: /* @__PURE__ */ jsx7(List, { children: errors.map((error, index) => /* @__PURE__ */ jsx7(List.Item, { c: "red", children: error.stack }, `error-${index}`)) })
}
);
}
// src/templates/ButtonTemplates/SubmitButton.tsx
import { Button } from "@mantine/core";
import {
getSubmitButtonOptions
} from "@snups/rjsf-utils";
import { jsx as jsx8 } from "react/jsx-runtime";
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsx8(Button, { type: "submit", variant: "filled", ...submitButtonProps, children: submitText });
}
// src/templates/ButtonTemplates/AddButton.tsx
import { TranslatableString as TranslatableString3 } from "@snups/rjsf-utils";
// src/templates/ButtonTemplates/IconButton.tsx
import { ActionIcon } from "@mantine/core";
import { TranslatableString as TranslatableString2 } from "@snups/rjsf-utils";
import { jsx as jsx9 } from "react/jsx-runtime";
function IconButton(props) {
const { icon, iconType = "sm", color, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsx9(
ActionIcon,
{
size: iconType,
color,
onClick,
...otherProps,
children: icon
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx9(IconButton, { title: translateString(TranslatableString2.CopyButton), variant: "subtle", ...props, icon: /* @__PURE__ */ jsx9(Copy, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx9(
IconButton,
{
title: translateString(TranslatableString2.MoveDownButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ jsx9(ChevronDown, {})
}
);
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx9(
IconButton,
{
title: translateString(TranslatableString2.MoveUpButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ jsx9(ChevronUp, {})
}
);
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx9(
IconButton,
{
title: translateString(TranslatableString2.RemoveButton),
variant: "subtle",
color: "red",
...props,
icon: /* @__PURE__ */ jsx9(X, {})
}
);
}
// src/templates/ButtonTemplates/AddButton.tsx
import { jsx as jsx10 } from "react/jsx-runtime";
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx10(IconButton, { title: translateString(TranslatableString3.AddItemButton), variant: "subtle", ...props, icon: /* @__PURE__ */ jsx10(Plus, {}) });
}
// src/templates/ButtonTemplates/index.ts
function buttonTemplates() {
return {
SubmitButton,
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton
};
}
var ButtonTemplates_default = buttonTemplates;
// src/templates/FieldErrorTemplate.tsx
import { errorId } from "@snups/rjsf-utils";
import { Box as Box3, List as List2 } from "@mantine/core";
import { jsx as jsx11 } from "react/jsx-runtime";
function FieldErrorTemplate({ errors, idSchema }) {
if (!errors || !errors.length) {
return null;
}
const id = errorId(idSchema);
return /* @__PURE__ */ jsx11(Box3, { id, c: "red", display: "none", children: /* @__PURE__ */ jsx11(List2, { children: errors.map((error, index) => /* @__PURE__ */ jsx11(List2.Item, { children: error }, `field-error-${index}`)) }) });
}
// src/templates/FieldTemplate.tsx
import { Box as Box4 } from "@mantine/core";
import {
getTemplate as getTemplate3,
getUiOptions as getUiOptions4
} from "@snups/rjsf-utils";
import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
function FieldTemplate(props) {
const {
id,
classNames,
style,
label,
errors,
help,
displayLabel,
description,
rawDescription,
hidden,
schema,
uiSchema,
registry,
children,
...otherProps
} = props;
const uiOptions = getUiOptions4(uiSchema);
const WrapIfAdditionalTemplate2 = getTemplate3(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsx12(Box4, { display: "none", children });
}
return /* @__PURE__ */ jsxs5(
WrapIfAdditionalTemplate2,
{
id,
classNames,
style,
label,
schema,
uiSchema,
registry,
...otherProps,
children: [
children,
errors,
help
]
}
);
}
// src/templates/FieldHelpTemplate.tsx
import { helpId } from "@snups/rjsf-utils";
import { Text as Text2 } from "@mantine/core";
import { jsx as jsx13 } from "react/jsx-runtime";
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
const id = helpId(idSchema);
return !help ? null : /* @__PURE__ */ jsx13(Text2, { id, size: "sm", my: "xs", c: "dimmed", children: help });
}
// src/templates/GridTemplate.tsx
import { Container, Grid } from "@mantine/core";
import { jsx as jsx14 } from "react/jsx-runtime";
function GridTemplate(props) {
const { children, column, fluid = true, ...rest } = props;
if (column) {
return /* @__PURE__ */ jsx14(Grid.Col, { ...rest, children });
}
if (fluid) {
return /* @__PURE__ */ jsx14(Container, { p: "4", mx: 0, w: "100%", children: /* @__PURE__ */ jsx14(Grid, { ...rest, children }) });
}
return /* @__PURE__ */ jsx14(Grid, { grow: true, ...rest, children });
}
// src/templates/ObjectFieldTemplate.tsx
import { Box as Box5, Container as Container2, Group as Group3, SimpleGrid } from "@mantine/core";
import {
buttonId as buttonId2,
canExpand,
descriptionId,
getTemplate as getTemplate4,
getUiOptions as getUiOptions5,
titleId as titleId2
} from "@snups/rjsf-utils";
import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
function ObjectFieldTemplate(props) {
const {
title,
description,
disabled,
properties,
onAddClick,
readonly,
required,
schema,
uiSchema,
idSchema,
formData,
registry
} = props;
const uiOptions = getUiOptions5(uiSchema);
const TitleFieldTemplate = getTemplate4("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = getTemplate4(
"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__ */ jsxs6(Container2, { id: idSchema.$id, p: 0, children: [
title && /* @__PURE__ */ jsx15(
TitleFieldTemplate,
{
id: titleId2(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ jsx15(
DescriptionFieldTemplate,
{
id: descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsx15(
SimpleGrid,
{
cols: gridCols,
spacing: gridSpacing,
verticalSpacing: gridVerticalSpacing,
mb: "sm",
children: properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx15(Box5, { children: element.content }, element.name))
}
),
canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx15(Group3, { mt: "xs", justify: "flex-end", children: /* @__PURE__ */ jsx15(
AddButton2,
{
id: buttonId2(idSchema, "add"),
disabled: disabled || readonly,
onClick: onAddClick(schema),
className: "rjsf-object-property-expand",
uiSchema,
registry
}
) })
] });
}
// src/templates/TitleField.tsx
import { Title as Title3 } from "@mantine/core";
import { jsx as jsx16 } from "react/jsx-runtime";
function TitleField(props) {
const { id, title } = props;
return title ? /* @__PURE__ */ jsx16(Title3, { id, order: 3, fw: "normal", children: title }) : null;
}
// src/templates/WrapIfAdditionalTemplate.tsx
import { useCallback as useCallback2 } from "react";
import {
ADDITIONAL_PROPERTY_FLAG,
UI_OPTIONS_KEY,
buttonId as buttonId3,
TranslatableString as TranslatableString4
} from "@snups/rjsf-utils";
import { Flex as Flex2, Grid as Grid2, TextInput as TextInput2 } from "@mantine/core";
import { jsx as jsx17, jsxs as jsxs7 } from "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(TranslatableString4.KeyLabel, [label]);
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
const handleBlur = useCallback2(
({ target }) => onKeyChange(target && target.value),
[onKeyChange]
);
if (!additional) {
return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
}
const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ jsx17("div", { className: classNames, style, children: /* @__PURE__ */ jsxs7(Flex2, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ jsxs7(Grid2, { w: "100%", align: "center", children: [
/* @__PURE__ */ jsx17(Grid2.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsx17("div", { className: "form-group", children: /* @__PURE__ */ jsx17(
TextInput2,
{
className: "form-group",
label: keyLabel,
defaultValue: label,
required,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0
}
) }) }),
/* @__PURE__ */ jsx17(Grid2.Col, { span: 6, className: "form-additional", children })
] }),
/* @__PURE__ */ jsx17(
RemoveButton2,
{
id: buttonId3(id, "remove"),
iconType: "sm",
className: "rjsf-array-item-remove",
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema: buttonUiOptions,
registry
}
)
] }) });
}
// src/templates/MultiSchemaFieldTemplate.tsx
import { Stack } from "@mantine/core";
import { jsxs as jsxs8 } from "react/jsx-runtime";
function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
return /* @__PURE__ */ jsxs8(Stack, { style: { marginBottom: "1rem" }, children: [
selector,
optionSchemaField
] });
}
// src/templates/index.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
ArrayFieldTitleTemplate,
BaseInputTemplate,
ButtonTemplates: ButtonTemplates_default(),
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldTemplate,
FieldHelpTemplate,
GridTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate,
MultiSchemaFieldTemplate
};
}
var templates_default = generateTemplates();
// src/widgets/index.ts
import dayjs2 from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
// src/widgets/DateTime/AltDateWidget.tsx
import { useCallback as useCallback3, useEffect, useState } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds2,
dateRangeOptions,
parseDateString,
toDateString,
getDateElementProps,
titleId as titleId3,
TranslatableString as TranslatableString5
} from "@snups/rjsf-utils";
import { Flex as Flex3, Box as Box6, Group as Group4, Button as Button2, Select, Input } from "@mantine/core";
import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "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 [state, setState] = useState(parseDateString(value, showTime));
useEffect(() => {
setState(parseDateString(value, showTime));
}, [showTime, value]);
const handleChange = useCallback3(
(property, nextValue) => {
const nextState = {
...state,
[property]: typeof nextValue === "undefined" ? -1 : nextValue
};
if (readyForChange(nextState)) {
onChange(toDateString(nextState, showTime));
} else {
setState(nextState);
}
},
[state, onChange, showTime]
);
const handleSetNow = useCallback3(() => {
if (!disabled && !readonly) {
const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange(toDateString(nextState, showTime));
}
}, [disabled, readonly, showTime, onChange]);
const handleClear = useCallback3(() => {
if (!disabled && !readonly) {
onChange("");
}
}, [disabled, readonly, onChange]);
return /* @__PURE__ */ jsxs9(Fragment2, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsx18(Input.Label, { id: titleId3(id), required, children: label }),
/* @__PURE__ */ jsxs9(Flex3, { gap: "xs", align: "center", wrap: "nowrap", children: [
getDateElementProps(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ jsx18(Box6, { children: /* @__PURE__ */ jsx18(
Select,
{
id: elemId,
name: elemId,
placeholder: elemProps.type,
disabled: disabled || readonly,
data: 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": ariaDescribedByIds2(elemId)
}
) }, i);
}),
/* @__PURE__ */ jsxs9(Group4, { wrap: "nowrap", gap: 3, children: [
(options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx18(Button2, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(TranslatableString5.NowLabel) }),
(options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx18(Button2, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
] })
] }),
rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsx18(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
] });
}
AltDateWidget.defaultProps = {
showTime: false
};
// src/widgets/DateTime/AltDateTimeWidget.tsx
import { jsx as jsx19 } from "react/jsx-runtime";
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ jsx19(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget?.defaultProps,
showTime: true
};
// src/widgets/DateTime/DateTimeInput.tsx
import { useCallback as useCallback4 } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds3,
labelValue as labelValue2
} from "@snups/rjsf-utils";
import dayjs from "dayjs";
import { DateInput } from "@mantine/dates";
import { jsx as jsx20 } from "react/jsx-runtime";
var dateParser = (input, format) => {
if (!input) {
return null;
}
const d = dayjs(input, format);
return d.isValid() ? d.toDate() : null;
};
var dateFormat = (date, format) => {
if (!date) {
return "";
}
return dayjs(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 handleChange = useCallback4(
(nextValue) => {
onChange(dateFormat(nextValue, valueFormat));
},
[onChange, valueFormat]
);
const handleBlur = useCallback4(() => {
if (onBlur) {
onBlur(id, value);
}
}, [onBlur, id, value]);
const handleFocus = useCallback4(() => {
if (onFocus) {
onFocus(id, value);
}
}, [onFocus, id, value]);
return /* @__PURE__ */ jsx20(
DateInput,
{
id,
name,
value: dateParser(value, valueFormat),
dateParser: (v) => dateParser(v, displayFormat),
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: labelValue2(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...options,
"aria-describedby": ariaDescribedByIds3(id),
popoverProps: { withinPortal: false },
classNames: typeof options?.classNames === "object" ? options.classNames : void 0,
valueFormat: displayFormat
}
);
}
// src/widgets/DateTime/DateWidget.tsx
import { jsx as jsx21 } from "react/jsx-runtime";
function DateWidget(props) {
const { valueFormat = "YYYY-MM-DD", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ jsx21(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
// src/widgets/DateTime/DateTimeWidget.tsx
import { jsx as jsx22 } from "react/jsx-runtime";
function DateTimeWidget(props) {
const { valueFormat = "YYYY-MM-DD HH:mm:ss", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ jsx22(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
// src/widgets/DateTime/TimeWidget.tsx
import { useCallback as useCallback5 } from "react";
import {
labelValue as labelValue3,
ariaDescribedByIds as ariaDescribedByIds4
} from "@snups/rjsf-utils";
import { TimeInput } from "@mantine/dates";
import { jsx as jsx23 } from "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 = useCallback5(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = useCallback5(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = useCallback5(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsx23(
TimeInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: labelValue3(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...options,
"aria-describedby": ariaDescribedByIds4(id),
classNames: typeof options?.classNames === "object" ? options.classNames : void 0
}
);
}
// src/widgets/CheckboxesWidget.tsx
import { useCallback as useCallback6 } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds5,
enumOptionsValueForIndex,
enumOptionsIndexForValue,
optionId,
titleId as titleId4
} from "@snups/rjsf-utils";
import { Checkbox, Flex as Flex4, Input as Input2 } from "@mantine/core";
import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs10 } from "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 = useCallback6(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = useCallback6(
({ target }) => {
if (onBlur) {
onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = useCallback6(
({ target }) => {
if (onFocus) {
onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsx24(Input2.Label, { id: titleId4(id), required, children: label }),
/* @__PURE__ */ jsx24(
Checkbox.Group,
{
id,
value: selectedIndexes,
onChange: handleChange,
required,
readOnly: disabled || readonly,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
"aria-describedby": ariaDescribedByIds5(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx24(Flex4, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx24(
Checkbox,
{
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
},
i
)) }) : null
}
)
] }) : null;
}
// src/widgets/CheckboxWidget.tsx
import { useCallback as useCallback7 } from "react";
import {
descriptionId as descriptionId2,
getTemplate as getTemplate5,
labelValue as labelValue4,
ariaDescribedByIds as ariaDescribedByIds6
} from "@snups/rjsf-utils";
import { Checkbox as Checkbox2 } from "@mantine/core";
import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
function CheckboxWidget(props) {
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 = getTemplate5(
"DescriptionFieldTemplate",
registry,
options
);
const handleCheckboxChange = useCallback7(
(e) => {
if (!disabled && !readonly && onChange) {
onChange(e.currentTarget.checked);
}
},
[onChange, disabled, readonly]
);
const handleBlur = useCallback7(
({ target }) => {
if (onBlur) {
onBlur(id, target.checked);
}
},
[onBlur, id]
);
const handleFocus = useCallback7(
({ target }) => {
if (onFocus) {
onFocus(id, target.checked);
}
},
[onFocus, id]
);
const description = options.description || schema.description;
return /* @__PURE__ */ jsxs11(Fragment4, { children: [
!hideLabel && !!description && /* @__PURE__ */ jsx25(
DescriptionFieldTemplate,
{
id: descriptionId2(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsx25(
Checkbox2,
{
id,
name,
label: labelValue4(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": ariaDescribedByIds6(id),
...themeProps
}
)
] });
}
// src/widgets/ColorWidget.tsx
import { useCallback as useCallback8 } from "react";
import {
labelValue as labelValue5,
ariaDescribedByIds as ariaDescribedByIds7
} from "@snups/rjsf-utils";
import { ColorInput } from "@mantine/core";
import { jsx as jsx26 } from "react/jsx-runtime";
function ColorWidget(props) {
const {
id,
name,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
onChange,
onBlur,
onFocus
} = props;
const themeProps = cleanupOptions(options);
const handleChange = useCallback8(
(nextValue) => {
onChange(nextValue);
},
[onChange]
);
const handleBlur = useCallback8(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = useCallback8(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsx26(
ColorInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: labelValue5(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps,
"aria-describedby": ariaDescribedByIds7(id),
popoverProps: { withinPortal: false }
}
);
}
// src/widgets/FileWidget.tsx
import { useCallback as useCallback9 } from "react";
import {
dataURItoBlob,
ariaDescribedByIds as ariaDescribedByIds8,
labelValue as labelValue6
} from "@snups/rjsf-utils";
import { FileInput, Pill } from "@mantine/core";
import { jsx as jsx27 } from "react/jsx-runtime";
function addNameToDataURL(dataURL, name) {
if (dataURL === null) {
return null;
}
return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
}
function processFile(file) {
const { name, size, type } = file;
return new Promise((resolve, reject) => {
const reader = new window.FileReader();
reader.onerror = reject;
reader.onload = (event) => {
if (typeof event.target?.result === "string") {
resolve({
dataURL: addNameToDataURL(event.target.result, name),
name,
size,
type
});
} else {
resolve({
dataURL: null,
name,
size,
type
});
}
};
reader.readAsDataURL(file);
});
}
function processFiles(files) {
return Promise.all(Array.from(files).map(processFile));
}
function extractFileInfo(dataURLs) {
return dataURLs.reduce((acc, dataURL) => {
if (!dataURL) {
return acc;
}
try {
const { blob, name } = dataURItoBlob(dataURL);
return [
...acc,
{
dataURL,
name,
size: blob.size,
type: blob.type
}
];
} catch (e) {
console.log(e);
return acc;
}
}, []);
}
function FileWidget(props) {
const {
id,
name,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
multiple,
onChange
} = props;
const themeProps = cleanupOptions(options);
const handleChange = useCallback9(
(files) => {
if (typeof files === "object") {
processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
if (multiple) {
onChange(value.concat(newValue));
} else {
onChange(newValue[0]);
}
});
}
return;
},
[multiple, value, onChange]
);
const handleRemoveFile = useCallback9(
(index) => {
if (multiple) {
const newValue = value.filter((_, i) => i !== index);
onChange(newValue);
} else {
onChange(void 0);
}
},
[multiple, value, onChange]
);
const ValueComponent = useCallback9(
(props2) => {
const filesInfo = props2.value ? extractFileInfo(Array.isArray(props2.value) ? props2.value : [props2.value]) : null;
if (Array.isArray(filesInfo) && filesInfo.length > 0) {
return /* @__PURE__ */ jsx27(Pill.Group, { children: filesInfo.map((file, index) => /* @__PURE__ */ jsx27(Pill, { withRemoveButton: true, onRemove: () => handleRemoveFile(index), children: file.name }, index)) });
}
return null;
},
[handleRemoveFile]
);
return /* @__PURE__ */ jsx27(
FileInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: labelValue6(label || void 0, hideLabel, false),
multiple: !!multiple,
valueComponent: ValueComponent,
onChange: handleChange,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps,
"aria-describedby": ariaDescribedByIds8(id)
}
);
}
// src/widgets/PasswordWidget.tsx
import { useCallback as useCallback10 } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds9,
labelValue as labelValue7
} from "@snups/rjsf-utils";
import { PasswordInput } from "@mantine/core";
import { jsx as jsx28 } from "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 = useCallback10(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = useCallback10(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = useCallback10(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsx28(
PasswordInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: labelValue7(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps,
"aria-describedby": ariaDescribedByIds9(id)
}
);
}
// src/widgets/RadioWidget.tsx
import { useCallback as useCallback11 } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds10,
enumOptionsIndexForValue as enumOptionsIndexForValue2,
enumOptionsValueForIndex as enumOptionsValueForIndex2,
optionId as optionId2
} from "@snups/rjsf-utils";
import { Radio, Flex as Flex5 } from "@mantine/core";
import { jsx as jsx29 } from "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 = useCallback11(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = useCallback11(
({ target }) => {
if (onBlur) {
onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = useCallback11(
({ target }) => {
if (onFocus) {
onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selected = enumOptionsIndexForValue2(value, enumOptions);
return /* @__PURE__ */ jsx29(
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": ariaDescribedByIds10(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsx29(Flex5, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsx29(
Radio,
{
id: optionId2(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
import { useCallback as useCallback12 } from "react";
import {
ariaDescribedByIds as ariaDescribedByIds11,
rangeSpec,
titleId as titleId5
} from "@snups/rjsf-utils";
import { Slider, Input as Input3 } from "@mantine/core";
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs12 } from "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 } = rangeSpec(schema);
const handleChange = useCallback12(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(nextValue);
}
},
[onChange, disabled, readonly]
);
const handleBlur = useCallback12(() => {
if (onBlur) {
onBlur(id, value);
}
}, [onBlur, id, value]);
const handleFocus = useCallback12(() => {
if (onFocus) {
onFocus(id, value);
}
}, [onFocus, id, value]);
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsx30(Input3.Label, { id: titleId5(id), required, children: label }),
options?.description && /* @__PURE__ */ jsx30(Input3.Description, { children: options.description }),
/* @__PURE__ */ jsx30(
Slider,
{
id,
name,
value,
max,
min,
step,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: handleChan