@keboola/design 17.1.0 → 17.2.0

package/dist/internal/components/Combobox.js

@@ -1 +1 @@
-export { BLANK_VALUES, Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "../../Combobox-RZ0i3w8u.js";
+export { BLANK_VALUES, Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "../../Combobox-CakN_1cF.js";

package/dist/rjsf.js

@@ -8,7 +8,7 @@ import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { TextInput } from "./TextInput-BAL-zOAN.js";
 import { RadioGroup } from "./RadioGroup-BIElT-nH.js";
 import { Checkbox } from "./Checkbox-CfjpwIcg.js";
-import { Combobox } from "./Combobox-RZ0i3w8u.js";
+import { Combobox } from "./Combobox-CakN_1cF.js";
 import { MultiCombobox } from "./internal/blocks/MultiCombobox.js";
 import { FormGroup } from "./FormGroup-D7ahkK1q.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
@@ -233,15 +233,37 @@ const CodeEditorField = ({ fieldPathId, formData, onChange, disabled, readonly,
 		options: uiOptions ?? {}
 	});
 };
+// src/blocks/RjsfSchemaEditor/TooltipIcon.tsx
+const TooltipIcon = ({ rawHelp }) => {
+	const renderMarkdown = useRenderMarkdown();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		placement: "top",
+		variant: "explanatory",
+		tooltip: renderMarkdown(rawHelp),
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tw:cursor-help tw:text-muted-foreground",
+			children: /* @__PURE__ */ jsx(Info, { className: "tw:size-4" })
+		})
+	});
+};
 // src/blocks/RjsfSchemaEditor/SchemaDescription.tsx
-/** Renders a schema description with sanitized HTML support (links, formatting, etc.). */
-const SchemaDescription = ({ description }) => {
+/**
+* Renders a schema description with sanitized HTML support (links, formatting, etc.).
+* - `tooltip` adds a help icon at the end of the text.
+*/
+const SchemaDescription = ({ description, tooltip }) => {
 	if (!description) return null;
-	return /* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsxs("p", {
 		className: "tw:text-xs tw:text-muted-foreground",
-		dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(description) }
+		children: [/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(description) } }), tooltip && /* @__PURE__ */ jsx(InlineTooltipIcon, { rawHelp: tooltip })]
 	});
 };
+/** Help icon that flows with the text it ends. */
+const InlineTooltipIcon = ({ rawHelp }) => /* @__PURE__ */ jsx("span", {
+	className: "tw:ml-1 tw:inline-block tw:align-middle",
+	children: /* @__PURE__ */ jsx(TooltipIcon, { rawHelp })
+});
 // src/blocks/RjsfSchemaEditor/fields/GridObjectField.tsx
 /**
 * Custom field that renders an object's properties in a responsive grid layout.
@@ -346,20 +368,6 @@ const InfoField = ({ schema, uiSchema }) => {
 		})
 	});
 };
-// src/blocks/RjsfSchemaEditor/TooltipIcon.tsx
-const TooltipIcon = ({ rawHelp }) => {
-	const renderMarkdown = useRenderMarkdown();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		placement: "top",
-		variant: "explanatory",
-		tooltip: renderMarkdown(rawHelp),
-		triggerAsChild: true,
-		children: /* @__PURE__ */ jsx("span", {
-			className: "tw:cursor-help tw:text-muted-foreground",
-			children: /* @__PURE__ */ jsx(Info, { className: "tw:size-4" })
-		})
-	});
-};
 // src/blocks/RjsfSchemaEditor/fields/TableArrayField.tsx
 /** Default value for a freshly added cell/item, honouring the schema default. */
 const defaultValueFor = (prop) => {
@@ -454,7 +462,7 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 				className: "tw:px-2 tw:py-1.5 tw:[&>div]:mb-0",
 				children: /* @__PURE__ */ jsx(SchemaField, {
 					name: key,
-					schema: properties[key],
+					schema: properties[key] ?? {},
 					uiSchema: getCellUiSchema(key),
 					formData: item[key],
 					...SCHEMA_FIELD_STUBS,
@@ -481,28 +489,31 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 		onClick: handleAddRow,
 		children: ["Add ", itemSchema?.title || "Item"]
 	});
-	if (schema.title) {
-		const tooltip = uiSchema["ui:help"];
-		return /* @__PURE__ */ jsxs(CollapsiblePanel, {
-			className: "tw:rounded-lg",
-			headerClassName: "tw:rounded-lg",
-			header: /* @__PURE__ */ jsxs("span", {
-				className: "tw:inline-flex tw:items-center tw:gap-1",
-				children: [schema.title, tooltip && /* @__PURE__ */ jsx(TooltipIcon, { rawHelp: tooltip })]
-			}),
-			defaultExpanded: true,
-			bodyClassName: "tw:flex tw:flex-col tw:gap-4",
-			children: [
-				/* @__PURE__ */ jsx(SchemaDescription, { description: schema.description }),
-				table,
-				addButton
-			]
-		});
-	}
+	const tooltip = uiSchema["ui:help"];
+	const tooltipInDescription = Boolean(tooltip && schema.description && uiSchema["ui:options"]?.tooltipPlacement === "description");
+	const description = /* @__PURE__ */ jsx(SchemaDescription, {
+		description: schema.description,
+		tooltip: tooltipInDescription ? tooltip : void 0
+	});
+	if (schema.title) return /* @__PURE__ */ jsxs(CollapsiblePanel, {
+		className: "tw:rounded-lg",
+		headerClassName: "tw:rounded-lg",
+		header: /* @__PURE__ */ jsxs("span", {
+			className: "tw:inline-flex tw:items-center tw:gap-1",
+			children: [schema.title, tooltip && !tooltipInDescription && /* @__PURE__ */ jsx(TooltipIcon, { rawHelp: tooltip })]
+		}),
+		defaultExpanded: true,
+		bodyClassName: "tw:flex tw:flex-col tw:gap-4",
+		children: [
+			description,
+			table,
+			addButton
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:flex-col tw:gap-4",
 		children: [
-			/* @__PURE__ */ jsx(SchemaDescription, { description: schema.description }),
+			description,
 			table,
 			addButton
 		]
@@ -742,12 +753,15 @@ const FieldTemplateBody = ({ id, label, rawHelp, rawDescription, rawErrors, chil
 	if (widget === "test-connection" || widget === "sync-action") return /* @__PURE__ */ jsx(Fragment$1, { children });
 	if (schema.type === "object") return /* @__PURE__ */ jsx(Fragment$1, { children });
 	if (schema.type === "array" && !uiSchema?.["ui:widget"]) return /* @__PURE__ */ jsx(Fragment$1, { children });
-	const documentation = (uiSchema?.["ui:options"])?.documentation;
+	const uiOptions = uiSchema?.["ui:options"];
+	const documentation = uiOptions?.documentation;
 	const hasErrors = rawErrors && rawErrors.length > 0;
 	const isCheckbox = schema.type === "boolean" && uiSchema?.["ui:widget"] !== "select";
 	const showLabel = displayLabel && label && !isCheckbox;
-	const hasHelpIcons = Boolean(rawHelp || documentation);
-	const helpIcons = /* @__PURE__ */ jsxs(Fragment$1, { children: [rawHelp && /* @__PURE__ */ jsx(TooltipIcon, { rawHelp }), documentation && /* @__PURE__ */ jsx(DocumentationLinkIcon, { documentation })] });
+	const helpInDescription = Boolean(rawHelp && rawDescription && uiOptions?.tooltipPlacement === "description");
+	const labelHelp = helpInDescription ? void 0 : rawHelp;
+	const hasHelpIcons = Boolean(labelHelp || documentation);
+	const helpIcons = /* @__PURE__ */ jsxs(Fragment$1, { children: [labelHelp && /* @__PURE__ */ jsx(TooltipIcon, { rawHelp: labelHelp }), documentation && /* @__PURE__ */ jsx(DocumentationLinkIcon, { documentation })] });
 	return /* @__PURE__ */ jsxs(FormGroup, {
 		state: hasErrors ? "error" : "default",
 		children: [
@@ -766,7 +780,7 @@ const FieldTemplateBody = ({ id, label, rawHelp, rawDescription, rawErrors, chil
 				className: "tw:flex tw:items-center tw:gap-1",
 				children: [children, helpIcons]
 			}) : children,
-			rawDescription && /* @__PURE__ */ jsx(FormGroup.Help, { children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(rawDescription) } }) }),
+			rawDescription && /* @__PURE__ */ jsxs(FormGroup.Help, { children: [/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(rawDescription) } }), helpInDescription && rawHelp && /* @__PURE__ */ jsx(InlineTooltipIcon, { rawHelp })] }),
 			hasErrors && /* @__PURE__ */ jsx(FormGroup.Help, { children: rawErrors.join(". ") })
 		]
 	});
@@ -1339,7 +1353,13 @@ const generateUiSchema = (schema, readOnly = false, definitions, globalConfig, h
 			if (globalValue !== void 0) {
 				if (typeof globalValue !== "object" || globalValue === null || Array.isArray(globalValue)) fieldUi["ui:disabled"] = true;
 			}
-			if (options?.tooltip) fieldUi["ui:help"] = String(options.tooltip);
+			if (options?.tooltip) {
+				fieldUi["ui:help"] = String(options.tooltip);
+				if (options.tooltip_placement === "description") fieldUi["ui:options"] = {
+					...fieldUi["ui:options"],
+					tooltipPlacement: "description"
+				};
+			}
 			if ((options?.documentation)?.link) fieldUi["ui:options"] = {
 				...fieldUi["ui:options"],
 				documentation: options?.documentation