@keboola/design 13.2.0 → 15.0.0

package/dist/rjsf.js

@@ -1,27 +1,30 @@
-import { Tooltip, debounce } from "./utils-p6tjltbX.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, debounce } from "./utils-DwC9u0tM.js";
 import { BookOpen, Info, Trash2 } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-D2JqBAq7.js";
+import { Button } from "./Button-BNkyYU8u.js";
 import { Label } from "./internal/components/Label.js";
 import { Link } from "./internal/components/Link.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { TextInput } from "./TextInput-B5TDDOty.js";
-import { RadioGroup } from "./RadioGroup-C2vk5acr.js";
-import { Checkbox } from "./Checkbox-D9rafoKh.js";
-import { Combobox } from "./Combobox-B1Kjoy5J.js";
-import { FormGroup } from "./FormGroup-D4O96YPm.js";
+import { TextInput } from "./TextInput-CR0_USaY.js";
+import { RadioGroup } from "./RadioGroup-B0TwHjBb.js";
+import { Checkbox } from "./Checkbox-CHDDJyAA.js";
+import { Combobox } from "./Combobox-CaKqgstG.js";
+import { MultiCombobox } from "./internal/blocks/MultiCombobox.js";
+import { FormGroup } from "./FormGroup-V5kIgQRN.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { DateInput } from "./DateInput-BlKkequE.js";
+import { DateInput } from "./DateInput-BgbMDJkm.js";
 import { PasswordInput } from "./internal/blocks/PasswordInput.js";
-import { Alert } from "./Alert-DuAGeYyM.js";
+import { Alert } from "./Alert-Chz6KZ7e.js";
 import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
-import { Tabs, TabsContent } from "./Tabs-C0uvkPHc.js";
-import { CodeEditor, isLanguageMode } from "./CodeEditor-Y0iE-SwV.js";
+import { Tabs, TabsContent } from "./Tabs-Ck4uWf8U.js";
+import { CodeEditor, isLanguageMode } from "./CodeEditor-DVSPdfdo.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import DOMPurify from "dompurify";
 import Form from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
+import { enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, optionId, useDeepCompareMemo } from "@rjsf/utils";
 //#region src/blocks/RjsfSchemaEditor/fieldHelpers.ts
 /** No-op function reused as onBlur/onFocus stub in custom fields. */
 const noop = () => {};
@@ -239,7 +242,7 @@ const CodeEditorField = ({ fieldPathId, formData, onChange, disabled, readonly,
 const SchemaDescription = ({ description }) => {
 	if (!description) return null;
 	return /* @__PURE__ */ jsx("p", {
-		className: "tw:text-xs tw:text-neutral-400",
+		className: "tw:text-xs tw:text-muted-foreground",
 		dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(description) }
 	});
 };
@@ -305,10 +308,10 @@ const GridObjectField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 		});
 	}
 	if (schema.title) return /* @__PURE__ */ jsxs("div", {
-		className: "tw:rounded-lg tw:border tw:border-solid tw:border-neutral-200 tw:p-4",
+		className: "tw:rounded-lg tw:border tw:border-solid tw:border-border tw:p-4",
 		children: [
 			/* @__PURE__ */ jsx("h3", {
-				className: "tw:mb-3 tw:text-base tw:font-medium tw:text-neutral-800",
+				className: "tw:mb-3 tw:text-base tw:font-medium tw:text-foreground",
 				children: schema.title
 			}),
 			/* @__PURE__ */ jsx(SchemaDescription, { description: schema.description }),
@@ -359,7 +362,7 @@ const TooltipIcon = ({ rawHelp }) => {
 		tooltip: renderMarkdown(rawHelp),
 		triggerAsChild: true,
 		children: /* @__PURE__ */ jsx("span", {
-			className: "tw:cursor-help tw:text-neutral-400",
+			className: "tw:cursor-help tw:text-muted-foreground",
 			children: /* @__PURE__ */ jsx(Info, { className: "tw:size-4" })
 		})
 	});
@@ -434,13 +437,13 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 	const table = items.length > 0 && /* @__PURE__ */ jsxs("table", {
 		className: "tw:w-full tw:table-fixed tw:border-collapse tw:text-sm",
 		children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [isPrimitiveItems ? /* @__PURE__ */ jsx("th", {
-			className: "tw:border-b tw:border-neutral-200 tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-neutral-600",
+			className: "tw:border-b tw:border-border tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-muted-foreground",
 			children: itemSchema?.title ?? ""
 		}) : columnKeys.map((key) => /* @__PURE__ */ jsx("th", {
-			className: "tw:border-b tw:border-neutral-200 tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-neutral-600",
+			className: "tw:border-b tw:border-border tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-muted-foreground",
 			children: properties[key]?.title ?? key
 		}, key)), !isReadOnly && /* @__PURE__ */ jsx("th", { className: "tw:w-20" })] }) }), /* @__PURE__ */ jsx("tbody", { children: items.map((item, rowIndex) => /* @__PURE__ */ jsxs("tr", {
-			className: "tw:border-b tw:border-neutral-100",
+			className: "tw:border-b tw:border-border",
 			children: [isPrimitiveItems ? /* @__PURE__ */ jsx("td", {
 				className: "tw:px-2 tw:py-1.5 tw:[&>div]:mb-0",
 				children: /* @__PURE__ */ jsx(SchemaField, {
@@ -557,7 +560,7 @@ const TabsObjectField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 		className: "tw:flex tw:flex-col tw:gap-4",
 		children: [
 			schema.title && /* @__PURE__ */ jsx("h3", {
-				className: "tw:text-base tw:font-medium tw:text-neutral-800",
+				className: "tw:text-base tw:font-medium tw:text-foreground",
 				children: schema.title
 			}),
 			/* @__PURE__ */ jsx(SchemaDescription, { description: schema.description }),
@@ -609,7 +612,7 @@ const ArrayFieldItemTemplate = ({ children, index, totalItems, schema, hasToolba
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: "tw:rounded-lg tw:border tw:border-solid tw:border-neutral-200 tw:bg-white tw:p-4",
+		className: "tw:rounded-lg tw:border tw:border-solid tw:border-border tw:bg-card tw:p-4",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "tw:flex tw:items-start tw:gap-3",
 			children: [/* @__PURE__ */ jsx("div", {
@@ -634,10 +637,10 @@ const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, disabled
 		className: "tw:flex tw:flex-col tw:gap-4",
 		children: [
 			(title || schema.description) && /* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
-				className: "tw:text-base tw:font-medium tw:text-neutral-800",
+				className: "tw:text-base tw:font-medium tw:text-foreground",
 				children: title
 			}), schema.description && /* @__PURE__ */ jsx("p", {
-				className: "tw:mt-1 tw:text-xs tw:text-neutral-400",
+				className: "tw:mt-1 tw:text-xs tw:text-muted-foreground",
 				children: schema.description
 			})] }),
 			items,
@@ -665,7 +668,7 @@ const DescriptionFieldTemplate = ({ description, id }) => {
 	});
 	return /* @__PURE__ */ jsx("p", {
 		id,
-		className: "tw:text-xs tw:text-neutral-400",
+		className: "tw:text-xs tw:text-muted-foreground",
 		dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(String(description)) }
 	});
 };
@@ -740,7 +743,7 @@ const DocumentationLinkIcon = ({ documentation }) => /* @__PURE__ */ jsx(Tooltip
 	children: /* @__PURE__ */ jsx(Link, {
 		href: documentation.link,
 		children: /* @__PURE__ */ jsx("span", {
-			className: "tw:cursor-pointer tw:text-neutral-400 tw:hover:text-neutral-600",
+			className: "tw:cursor-pointer tw:text-muted-foreground tw:hover:text-foreground",
 			children: /* @__PURE__ */ jsx(BookOpen, { className: "tw:size-4" })
 		})
 	})
@@ -845,14 +848,14 @@ const ObjectFieldTemplate = ({ title, description, properties, formData, uiSchem
 		children: childrenContent
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "tw:rounded-lg tw:border tw:border-solid tw:border-neutral-200 tw:bg-white tw:p-4",
+		className: "tw:rounded-lg tw:border tw:border-solid tw:border-border tw:bg-card tw:p-4",
 		children: [
 			title && /* @__PURE__ */ jsx("h3", {
-				className: "tw:mb-2 tw:text-base tw:font-medium tw:text-neutral-800",
+				className: "tw:mb-2 tw:text-base tw:font-medium tw:text-foreground",
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "tw:mb-3 tw:text-xs tw:text-neutral-400",
+				className: "tw:mb-3 tw:text-xs tw:text-muted-foreground",
 				children: description
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -863,6 +866,29 @@ const ObjectFieldTemplate = ({ title, description, properties, formData, uiSchem
 	});
 };
 //#endregion
+//#region src/blocks/RjsfSchemaEditor/widgets/CheckboxesWidget.tsx
+/**
+* A group of checkboxes for an array of enum values (`format: 'checkbox'`).
+*
+* - `options.inline` lays the options out in a wrapping row instead of a column.
+* - An option listed in `options.enumDisabled` is disabled on its own.
+*/
+const CheckboxesWidget = ({ id, value, onChange, disabled, readonly, options }) => {
+	const { enumOptions = [], enumDisabled, inline } = options;
+	const selected = Array.isArray(value) ? value : [value];
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cn("tw:flex tw:gap-2", inline ? "tw:flex-wrap tw:gap-x-4" : "tw:flex-col"),
+		children: enumOptions.map((option, index) => /* @__PURE__ */ jsx(Checkbox, {
+			id: optionId(id, index),
+			checked: enumOptionsIsSelected(option.value, selected),
+			disabled: disabled || readonly || Array.isArray(enumDisabled) && enumDisabled.includes(option.value),
+			onCheckedChange: (checked) => onChange(checked ? enumOptionsSelectValue(index, selected, enumOptions) : enumOptionsDeselectValue(index, selected, enumOptions)),
+			children: option.label
+		}, index))
+	});
+};
+//#endregion
 //#region src/blocks/RjsfSchemaEditor/widgets/CheckboxWidget.tsx
 const CheckboxWidget = ({ id, value, onChange, disabled, readonly, label, hideLabel }) => {
 	return /* @__PURE__ */ jsx(Checkbox, {
@@ -899,8 +925,7 @@ const DateWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readonly,
 		onFocus: () => onFocus(id, value),
 		disabled: disabled || readonly,
 		placeholder: placeholder || "Select a date",
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -924,7 +949,6 @@ const DynamicSelectWidget = ({ id, value, onChange, onBlur, disabled, readonly,
 	const items = fallbackItem ? [fallbackItem, ...dynamicItems] : dynamicItems;
 	return /* @__PURE__ */ jsx(Combobox, {
 		id,
-		variant: "secondary",
 		items,
 		value: selectedItem,
 		allowClear: !required,
@@ -936,6 +960,65 @@ const DynamicSelectWidget = ({ id, value, onChange, onBlur, disabled, readonly,
 	});
 };
 //#endregion
+//#region src/blocks/RjsfSchemaEditor/widgets/MultiSelectWidget.tsx
+/**
+* A `MultiCombobox` over the `items.enum` options of a multi-value array.
+*
+* - Default for `async-multi-select`; it ignores `async`, `creatable` and `enumSource`, which a
+*   host's replacement handles.
+* - A stored value outside `items.enum` stays a chip labelled by the value, so an edit keeps it.
+* - An option listed in `options.enumDisabled` cannot be picked.
+*/
+const MultiSelectWidget = ({ id, value, onChange, onBlur, disabled, readonly, options, placeholder, rawErrors }) => {
+	const enumOptions = useDeepCompareMemo(options.enumOptions ?? []);
+	const enumDisabled = useDeepCompareMemo(options.enumDisabled);
+	const values = useDeepCompareMemo(Array.isArray(value) ? value : []);
+	const { items, selected, valueOf } = useMemo(() => {
+		const entries = enumOptions.map((option, index) => ({
+			value: option.value,
+			item: {
+				value: String(index),
+				label: option.label,
+				disabled: Array.isArray(enumDisabled) && enumDisabled.includes(option.value)
+			}
+		}));
+		const all = [...entries];
+		const selected = values.map((stored, index) => {
+			const known = entries.find((entry) => enumOptionsIsSelected(entry.value, [stored]));
+			if (known) return known.item;
+			const unknown = {
+				value: stored,
+				item: {
+					value: `unknown-${index}`,
+					label: String(stored)
+				}
+			};
+			all.push(unknown);
+			return unknown.item;
+		});
+		return {
+			items: all.map((entry) => entry.item),
+			selected,
+			valueOf: new Map(all.map((entry) => [entry.item, entry.value]))
+		};
+	}, [
+		enumOptions,
+		enumDisabled,
+		values
+	]);
+	return /* @__PURE__ */ jsx(MultiCombobox, {
+		id,
+		items,
+		value: selected,
+		disabled: disabled || readonly,
+		placeholder,
+		"aria-invalid": rawErrors?.length ? true : void 0,
+		state: rawErrors?.length ? "error" : "default",
+		onBlur: () => onBlur(id, value),
+		onValueChange: (next) => onChange(next.map((item) => valueOf.get(item)))
+	});
+};
+//#endregion
 //#region src/blocks/RjsfSchemaEditor/widgets/NumberWidget.tsx
 const NumberWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readonly, placeholder, schema, rawErrors }) => {
 	return /* @__PURE__ */ jsx(NumberInput, {
@@ -949,8 +1032,7 @@ const NumberWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readonly
 		min: schema.minimum,
 		max: schema.maximum,
 		step: schema.multipleOf,
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -965,8 +1047,7 @@ const PasswordWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readon
 		disabled: disabled || readonly,
 		placeholder,
 		allowPasswordToggle: true,
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -997,7 +1078,6 @@ const SelectWidget = ({ id, value, schema, onChange, onBlur, disabled, readonly,
 	const selectedItem = items.find((item) => item.value === (value == null ? "" : String(value)));
 	return /* @__PURE__ */ jsx(Combobox, {
 		id,
-		variant: "secondary",
 		items,
 		value: selectedItem ?? null,
 		allowClear: !required,
@@ -1083,8 +1163,7 @@ const TemplateWatchWidget = ({ id, value, onChange, disabled, readonly, rawError
 		value: computed,
 		readOnly: true,
 		disabled: disabled || readonly,
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -1100,8 +1179,7 @@ const TextareaWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readon
 		disabled: disabled || readonly,
 		placeholder,
 		minRows: rows,
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -1121,8 +1199,7 @@ const TextWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readonly,
 		disabled: disabled || readonly,
 		placeholder,
 		type: schema.format === "email" ? "email" : "text",
-		state: rawErrors?.length ? "error" : "default",
-		variant: "secondary"
+		state: rawErrors?.length ? "error" : "default"
 	});
 };
 //#endregion
@@ -1144,6 +1221,7 @@ const defaultWidgets = {
 	PasswordWidget,
 	SelectWidget,
 	CheckboxWidget,
+	CheckboxesWidget,
 	RadioWidget,
 	EmailWidget: TextWidget,
 	URLWidget: TextWidget,
@@ -1152,10 +1230,10 @@ const defaultWidgets = {
 	"code-editor": CodeEditorWidget,
 	"dynamic-select": DynamicSelectWidget,
 	"template-watch": TemplateWatchWidget,
+	"async-multi-select": MultiSelectWidget,
 	"test-connection": StubWidget,
 	"sync-action": StubWidget,
-	"async-select": StubWidget,
-	"async-multi-select": StubWidget
+	"async-select": StubWidget
 };
 const defaultTemplates = {
 	FieldTemplate,