@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
1,531 lines (1,519 loc) • 48.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@mantine/core'), require('react/jsx-runtime'), require('@rjsf/utils'), require('dayjs'), require('dayjs/plugin/customParseFormat'), require('react'), require('@mantine/dates')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@mantine/core', 'react/jsx-runtime', '@rjsf/utils', 'dayjs', 'dayjs/plugin/customParseFormat', 'react', '@mantine/dates'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@teknim/rjsf-mantine"] = {}, global.core, global.core$1, global.jsxRuntime, global.utils, global.dayjs, global.customParseFormat, global.react, global.dates));
})(this, (function (exports, core, core$1, jsxRuntime, utils, dayjs, customParseFormat, react, dates) { 'use strict';
// src/Form/index.ts
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__ */ jsxRuntime.jsx(core$1.Box, { className: className || "array-item", mb: "xs", children: /* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { w: "100%", children }),
hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs(core$1.Group, { wrap: "nowrap", gap: 2, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveUpButton2,
{
iconType: "sm",
className: "array-item-move-up",
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveDownButton2,
{
iconType: "sm",
className: "array-item-move-down",
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
CopyButton2,
{
iconType: "sm",
className: "array-item-copy",
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
iconType: "sm",
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] })
] }) }, `array-item-${index}`);
}
function ArrayFieldTemplate(props) {
const {
canAdd,
className,
disabled,
idSchema,
items,
onAddClick,
readonly,
required,
schema,
uiSchema,
title,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = utils.getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = utils.getTemplate(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate2 = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const legend = (uiOptions.title || title) && /* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldTitleTemplate2,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(core$1.Fieldset, { legend, className, id: idSchema.$id, children: [
(uiOptions.description || schema.description) && /* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
canAdd && /* @__PURE__ */ jsxRuntime.jsx(core$1.Group, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
className: "array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) })
] });
}
function ArrayFieldTitleTemplate(props) {
const { idSchema, title, uiSchema, registry } = props;
const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
const { label: displayLabel = true } = options;
if (!title || !displayLabel) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { id: utils.titleId(idSchema), order: 4, fw: "normal", children: title });
}
// 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;
}
function BaseInputTemplate(props) {
const {
id,
type,
schema,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
onChange,
onChangeOverride,
onBlur,
onFocus,
options,
rawErrors
} = props;
const inputProps = utils.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__ */ jsxRuntime.jsx(
core$1.NumberInput,
{
id,
name: id,
label: utils.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 ? utils.examplesId(id) : void 0,
...inputProps,
...themeProps,
step: typeof inputProps.step === "number" ? inputProps.step : 1,
type: "text",
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
core$1.TextInput,
{
id,
name: id,
label: utils.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 ? utils.examplesId(id) : void 0,
...inputProps,
...themeProps,
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
input,
Array.isArray(schema.examples) && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, example);
}) })
] });
}
function Plus({ size, style, ...others }) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5l0 14" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l14 0" })
]
}
);
}
function Copy({ size, style, ...others }) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6l6 -6" })
]
}
);
}
function ChevronUp({ size, style, ...others }) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 15l6 -6l6 6" })
]
}
);
}
function X({ size, style, ...others }) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6l-12 12" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12" })
]
}
);
}
function ExclamationCircle({ size, style, ...others }) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4" }),
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v.01" })
]
}
);
}
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.Alert,
{
color: "red",
variant: "transparent",
title: /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { order: 5, fw: "normal", children: translateString(utils.TranslatableString.ErrorsLabel) }),
icon: /* @__PURE__ */ jsxRuntime.jsx(ExclamationCircle, {}),
children: /* @__PURE__ */ jsxRuntime.jsx(core$1.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.List.Item, { c: "red", children: error.stack }, `error-${index}`)) })
}
);
}
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { type: "submit", variant: "filled", ...submitButtonProps, children: submitText });
}
function IconButton(props) {
const { icon, iconType, color, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.ActionIcon,
{
size: iconType,
color,
onClick,
...otherProps,
children: icon
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), variant: "subtle", ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(Copy, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.MoveDownButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
}
);
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.MoveUpButton),
variant: "subtle",
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(ChevronUp, {})
}
);
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.RemoveButton),
variant: "subtle",
color: "red",
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(X, {})
}
);
}
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), variant: "subtle", ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(Plus, {}) });
}
// src/templates/ButtonTemplates/index.ts
function buttonTemplates() {
return {
SubmitButton,
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton
};
}
var ButtonTemplates_default = buttonTemplates;
function FieldErrorTemplate({ errors, idSchema }) {
if (!errors || !errors.length) {
return null;
}
const id = utils.errorId(idSchema);
return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { id, c: "red", display: "none", children: /* @__PURE__ */ jsxRuntime.jsx(core$1.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.List.Item, { children: error }, `field-error-${index}`)) }) });
}
function FieldTemplate(props) {
const { id, classNames, style, label, errors, help, hidden, schema, uiSchema, registry, children, ...otherProps } = props;
const uiOptions = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { display: "none", children });
}
return /* @__PURE__ */ jsxRuntime.jsxs(
WrapIfAdditionalTemplate2,
{
id,
classNames,
style,
label,
schema,
uiSchema,
registry,
...otherProps,
children: [
children,
help,
errors
]
}
);
}
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
const id = utils.helpId(idSchema);
return !help ? null : /* @__PURE__ */ jsxRuntime.jsx(core$1.Text, { id, size: "sm", my: "xs", c: "dimmed", children: help });
}
function ObjectFieldTemplate(props) {
const {
title,
description,
disabled,
properties,
onAddClick,
readonly,
required,
schema,
uiSchema,
idSchema,
formData,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = utils.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__ */ jsxRuntime.jsxs(core$1.Container, { id: idSchema.$id, children: [
title && /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
core$1.SimpleGrid,
{
cols: gridCols,
spacing: gridSpacing,
verticalSpacing: gridVerticalSpacing,
children: properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { children: element.content }, element.name))
}
),
utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { mt: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
disabled: disabled || readonly,
onClick: onAddClick(schema),
uiSchema,
registry
}
) })
] });
}
function TitleField(props) {
const { id, title } = props;
return title ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Title, { id, order: 3, fw: "normal", children: title }) : null;
}
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(utils.TranslatableString.KeyLabel, [label]);
const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target && target.value);
const uiOptions = uiSchema ? uiSchema[utils.UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[utils.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "end", justify: "center", children: [
/* @__PURE__ */ jsxRuntime.jsxs(core$1.Grid, { w: "100%", align: "center", children: [
/* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: 6, className: "form-additional", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: /* @__PURE__ */ jsxRuntime.jsx(
core$1.TextInput,
{
className: "form-group",
label: keyLabel,
defaultValue: label,
required,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(core$1.Grid.Col, { span: 6, className: "form-additional", children })
] }),
/* @__PURE__ */ jsxRuntime.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();
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] = react.useState(value);
const [state, setState] = react.useState(utils.parseDateString(value, showTime));
react.useEffect(() => {
const stateValue = utils.toDateString(state, showTime);
if (lastValue !== value) {
setLastValue(value);
setState(utils.parseDateString(value, showTime));
} else if (readyForChange(state) && stateValue !== value) {
onChange(stateValue);
setLastValue(stateValue);
}
}, [showTime, value, onChange, state, lastValue]);
const handleChange = react.useCallback((property, nextValue) => {
setState((prev) => ({ ...prev, [property]: typeof nextValue === "undefined" ? -1 : nextValue }));
}, []);
const handleSetNow = react.useCallback(() => {
if (!disabled && !readonly) {
const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange(utils.toDateString(nextState, showTime));
}
}, [disabled, readonly, showTime]);
const handleClear = react.useCallback(() => {
if (!disabled && !readonly) {
onChange("");
}
}, [disabled, readonly, onChange]);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
/* @__PURE__ */ jsxRuntime.jsxs(core$1.Flex, { gap: "xs", align: "center", wrap: "nowrap", children: [
utils.getDateElementProps(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ jsxRuntime.jsx(core$1.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
core$1.Select,
{
id: elemId,
name: elemId,
placeholder: elemProps.type,
disabled: disabled || readonly,
data: utils.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": utils.ariaDescribedByIds(elemId)
}
) }, i);
}),
/* @__PURE__ */ jsxRuntime.jsxs(core$1.Group, { wrap: "nowrap", gap: 3, children: [
(options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { variant: "subtle", size: "xs", onClick: handleSetNow, children: translateString(utils.TranslatableString.NowLabel) }),
(options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsxRuntime.jsx(core$1.Button, { variant: "subtle", size: "xs", onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) })
] })
] }),
rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`))
] });
}
AltDateWidget.defaultProps = {
showTime: false
};
var AltDateWidget_default = AltDateWidget;
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget_default?.defaultProps,
showTime: true
};
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 emptyValue = options?.emptyValue ?? "";
const handleChange = react.useCallback(
(nextValue) => {
onChange(dateFormat(nextValue, valueFormat));
},
[onChange, emptyValue]
);
const handleBlur = () => onBlur && onBlur(id, value);
const handleFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ jsxRuntime.jsx(
dates.DateInput,
{
id,
name,
value: dateParser(value, valueFormat),
dateParser: (v) => dateParser(v, displayFormat),
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: utils.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": utils.ariaDescribedByIds(id),
popoverProps: { withinPortal: false },
classNames: typeof options?.classNames === "object" ? options.classNames : void 0,
valueFormat: displayFormat
}
);
}
function DateWidget(props) {
const { valueFormat = "YYYY-MM-DD", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ jsxRuntime.jsx(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
function DateTimeWidget(props) {
const { valueFormat = "YYYY-MM-DD HH:mm:ss", displayFormat, ...otherOptions } = props.options;
return /* @__PURE__ */ jsxRuntime.jsx(
DateTimeInput,
{
...props,
options: otherOptions,
valueFormat,
displayFormat: displayFormat || valueFormat
}
);
}
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 = react.useCallback(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
dates.TimeInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: utils.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": utils.ariaDescribedByIds(id),
classNames: typeof options?.classNames === "object" ? options.classNames : void 0
}
);
}
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 = react.useCallback(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, utils.enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, utils.enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
/* @__PURE__ */ jsxRuntime.jsx(
core$1.Checkbox.Group,
{
id,
value: selectedIndexes,
onChange: handleChange,
required,
readOnly: disabled || readonly,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
"aria-describedby": utils.ariaDescribedByIds(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
core$1.Checkbox,
{
id: utils.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;
}
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 = react.useCallback(
(e) => {
if (!disabled && !readonly && onChange) {
onChange(e.currentTarget.checked);
}
},
[onChange, disabled, readonly]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, target.checked);
}
},
[onBlur, id]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, target.checked);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.Checkbox,
{
id,
name,
label: utils.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": utils.ariaDescribedByIds(id),
...themeProps
}
);
}
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 = react.useCallback(
(nextValue) => {
onChange(nextValue);
},
[onChange, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.ColorInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: utils.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": utils.ariaDescribedByIds(id),
popoverProps: { withinPortal: false }
}
);
}
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 = react.useCallback(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.PasswordInput,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: utils.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": utils.ariaDescribedByIds(id)
}
);
}
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 = react.useCallback(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selected = utils.enumOptionsIndexForValue(value, enumOptions);
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.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": utils.ariaDescribedByIds(id),
...themeProps,
children: Array.isArray(enumOptions) ? /* @__PURE__ */ jsxRuntime.jsx(core$1.Flex, { mt: "xs", direction: inline ? "row" : "column", gap: "xs", wrap: "wrap", children: enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
core$1.Radio,
{
id: utils.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
}
);
}
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 } = utils.rangeSpec(schema);
const handleChange = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Label, { id: utils.titleId(id), required, children: label }),
options?.description && /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Description, { children: options.description }),
/* @__PURE__ */ jsxRuntime.jsx(
core$1.Slider,
{
id,
name,
value,
max,
min,
step,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
...themeProps,
"aria-describedby": utils.ariaDescribedByIds(id)
}
),
rawErrors && rawErrors?.length > 0 && rawErrors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(core$1.Input.Error, { children: error }, `range-widget-input-errors-${index}`))
] });
}
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 = react.useCallback(
(nextValue) => {
if (!disabled && !readonly && onChange) {
onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
}
},
[onChange, disabled, readonly, enumOptions, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
}
},
[onBlur, id, enumOptions, emptyValue]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
}
},
[onFocus, id, enumOptions, emptyValue]
);
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
const selectOptions = react.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 ? core$1.MultiSelect : core$1.Select;
return /* @__PURE__ */ jsxRuntime.jsx(
Component,
{
id,
name: id,
label: utils.labelValue(label || void 0, hideLabel, false),
data: selectOptions,
value: multiple ? selectedIndexes : selectedIndexes,
onChange: !readonly ? handleChange : void 0,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0,
autoFocus: autofocus,
placeholder,
disabled: disabled || readonly,
required,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
searchable: true,
...themeProps,
"aria-describedby": utils.ariaDescribedByIds(id),
comboboxProps: { withinPortal: false }
}
);
}
function TextareaWidget(props) {
const {
id,
name,
value,
placeholder,
required,
disabled,
readonly,
autofocus,
label,
hideLabel,
rawErrors,
options,
onChange,
onBlur,
onFocus
} = props;
const themeProps = cleanupOptions(options);
const emptyValue = options?.emptyValue ?? "";
const handleChange = react.useCallback(
(e) => {
onChange(e.target.value === "" ? emptyValue : e.target.value);
},
[onChange, emptyValue]
);
const handleBlur = react.useCallback(
({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
},
[onBlur, id]
);
const handleFocus = react.useCallback(
({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
},
[onFocus, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
core$1.Textarea,
{
id,
name,
value: value || "",
placeholder: placeholder || void 0,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
label: utils.labelValue(label || void 0, hideLabel, false),
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
error: rawErrors && rawErrors.length > 0 ? rawErrors.join("\n") : void 0,
...themeProps
}
);
}
// src/widgets/index.ts
dayjs.extend(customParseFormat);
function generateWidgets() {
return {
AltDateTimeWidget,
AltDateWidget: AltDateWidget_default,
CheckboxesWidget,
CheckboxWidget,
ColorWidget,
DateTimeWidget,
DateWidget,
PasswordWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget,
TimeWidget
};
}
var widgets_default = generateWidgets();
// src/Theme/index.ts
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets()
};
}
var Theme_default = generateTheme();
// src/Form/index.ts
function generateForm() {
return core.withTheme(generateTheme());
}
var Form_default = generateForm();
// src/index.ts
var src_default = Form_default;
exports.Form = Form_default;
exports.Templates = templates_default;
exports.Theme = Theme_default;
exports.Widgets = widgets_default;
exports.default = src_default;
exports.generateForm = generateForm;
exports.generateTemplates = generateTemplates;
exports.generateTheme = generateTheme;
exports.generateWidgets = generateWidgets;
Object.defineProperty(exports, '__esModule', { value: true });
}));