@keboola/design 13.1.3 → 14.0.0

package/dist/rjsf.js

@@ -1,27 +1,30 @@
-import { Tooltip, debounce } from "./utils-Bd28bWgm.js";
-import { BookOpen, Info, Trash2 } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, debounce } from "./utils-LQ4jJA-9.js";
+import { BookOpen, Info, Trash2 } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.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-BWYXbfs4.js";
-import { RadioGroup } from "./RadioGroup-CYEp8Wnx.js";
-import { Checkbox } from "./Checkbox-8yIIgY7g.js";
-import { Combobox } from "./Combobox-BNhW0TDB.js";
-import { FormGroup } from "./FormGroup-CmCppxOn.js";
+import { TextInput } from "./TextInput-K2DSDs5O.js";
+import { RadioGroup } from "./RadioGroup-C8EC3fqO.js";
+import { Checkbox } from "./Checkbox-uFE8XLT_.js";
+import { Combobox } from "./Combobox-CEesMe2M.js";
+import { MultiCombobox } from "./internal/blocks/MultiCombobox.js";
+import { FormGroup } from "./FormGroup-DiYFdEhH.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { DateInput } from "./DateInput-D0nWUasV.js";
+import { DateInput } from "./DateInput-ClK1lCxz.js";
 import { PasswordInput } from "./internal/blocks/PasswordInput.js";
-import { Alert } from "./Alert-UI-CIs-1.js";
+import { Alert } from "./Alert-CZ0dDsuk.js";
 import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
-import { Tabs, TabsContent } from "./Tabs-CTDmye1N.js";
-import { CodeEditor, isLanguageMode } from "./CodeEditor-Df7VVx08.js";
+import { Tabs, TabsContent } from "./Tabs-C0uvkPHc.js";
+import { CodeEditor, isLanguageMode } from "./CodeEditor-BfRSCKEs.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 = () => {};
@@ -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, {
@@ -936,6 +962,66 @@ 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,
+		variant: "secondary",
+		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, {
@@ -1144,6 +1230,7 @@ const defaultWidgets = {
 	PasswordWidget,
 	SelectWidget,
 	CheckboxWidget,
+	CheckboxesWidget,
 	RadioWidget,
 	EmailWidget: TextWidget,
 	URLWidget: TextWidget,
@@ -1152,10 +1239,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,