@keboola/design 13.1.2 → 13.2.0

package/dist/internal/components/Truncated.js

@@ -1,5 +1,5 @@
-import { cn } from "../../classNames-BzrkDnOD.js";
-import { Tooltip } from "../../utils-Bd28bWgm.js";
+import { cn } from "../../classNames-DcGnTh2N.js";
+import { Tooltip } from "../../utils-p6tjltbX.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Truncated.tsx

package/dist/internal/components/Workbench.js

@@ -1,2 +1,2 @@
-import { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench } from "../../Workbench-DmZzpkj7.js";
+import { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench } from "../../Workbench-CxgNCs3I.js";
 export { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench };

package/dist/internal/components/ZoomableSvg.js

@@ -1,2 +1,2 @@
-import { ZoomableSvg, svgToPngBlob, toSvgFileContent } from "../../ZoomableSvg-C65nta_r.js";
+import { ZoomableSvg, svgToPngBlob, toSvgFileContent } from "../../ZoomableSvg-D8sXKpoV.js";
 export { ZoomableSvg, svgToPngBlob, toSvgFileContent };

package/dist/internal/utils.js

@@ -1,5 +1,5 @@
-import { cn } from "../classNames-BzrkDnOD.js";
-import { DEFAULT_ENTRY_SEPARATOR, copyToClipboard, createChangeInputEvent, createPrefixedString, debounce, isMac, noop, splitEntry, useSHA256, withHiddenFullscreen, withTooltipProvider, withVisualSettle } from "../utils-Bd28bWgm.js";
+import { cn } from "../classNames-DcGnTh2N.js";
+import { DEFAULT_ENTRY_SEPARATOR, copyToClipboard, createChangeInputEvent, createPrefixedString, debounce, isMac, noop, splitEntry, useSHA256, withHiddenFullscreen, withTooltipProvider, withVisualSettle } from "../utils-p6tjltbX.js";
 import { findLiteralMatches, findLiteralTermMatches, hasLiteralMatch } from "../findLiteralMatches-DgGLzyG0.js";
 import { mergeRefs } from "./utils/mergeRefs.js";
 export { DEFAULT_ENTRY_SEPARATOR, cn, copyToClipboard, createChangeInputEvent, createPrefixedString, debounce, findLiteralMatches, findLiteralTermMatches, hasLiteralMatch, isMac, mergeRefs, noop, splitEntry, useSHA256, withHiddenFullscreen, withTooltipProvider, withVisualSettle };

package/dist/markdown-editor.js

@@ -1,20 +1,19 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-Bd28bWgm.js";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, SquareCode, Strikethrough, Type, Underline } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip } from "./utils-p6tjltbX.js";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, SquareCode, Strikethrough, Type, Underline } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
+import { DropdownMenu } from "./DropdownMenu-DtRYcKEx.js";
 import { Label } from "./internal/components/Label.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { Popover } from "./Popover-CEk915I1.js";
-import { TextInput } from "./TextInput-BWYXbfs4.js";
-import { FormGroup } from "./FormGroup-CmCppxOn.js";
+import { Popover } from "./Popover-BU7nGOv-.js";
+import { TextInput } from "./TextInput-B5TDDOty.js";
+import { FormGroup } from "./FormGroup-D4O96YPm.js";
+import { Kbd } from "./Kbd-Du93F3o4.js";
 import { Skeleton } from "./internal/components/Skeleton/Skeleton.js";
-import { Kbd } from "./Kbd-J4n1J6i4.js";
-import { toast } from "./toast-CyXEdaCZ.js";
+import { toast } from "./toast-D6Z6MOB5.js";
 import { Suspense, createContext, lazy, use, useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { $createCodeNode, $isCodeNode, CodeNode } from "@lexical/code";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
@@ -42,6 +41,11 @@ import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, TRANS
 const ImageRendererContext = createContext(null);
 const ImageRendererProvider = ImageRendererContext;
 const useImageRenderer = () => use(ImageRendererContext);
+const EditorLayerContext = createContext(void 0);
+/** Takes the id `MarkdownEditor`'s blur guard matches on its toolbar's portalled layers. */
+const EditorLayerProvider = EditorLayerContext;
+/** Props for a layer the toolbar portals out of the editor, so its blur guard counts focus there. */
+const useEditorLayer = () => ({ "data-editor-layer": use(EditorLayerContext) });
 //#endregion
 //#region src/blocks/MarkdownEditor/nodes/ImageNodeComponent.tsx
 const isPlaceholder = (src) => src.startsWith("upload-placeholder-");
@@ -277,7 +281,7 @@ const KeyboardPlugin = ({ onSave, onCancel, singleLine, blurOnEscape, skipBlurSa
 };
 //#endregion
 //#region src/blocks/MarkdownEditor/nodes/MermaidNodeComponent.tsx
-const MermaidDiagram = lazy(() => import("./MermaidDiagram-B30x2yV7.js").then((n) => n.MermaidDiagram_exports).then((m) => ({ default: m.MermaidDiagram }), (error) => {
+const MermaidDiagram = lazy(() => import("./MermaidDiagram-D2ThT8Q-.js").then((n) => n.MermaidDiagram_exports).then((m) => ({ default: m.MermaidDiagram }), (error) => {
 	console.error("[MarkdownEditor] failed to load MermaidDiagram chunk", error);
 	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
 }));
@@ -760,6 +764,7 @@ const TRIGGER_LABEL = "Text alignment";
 const ALIGNMENT_ICONS = Object.fromEntries(ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon]));
 const AlignmentDropdown = ({ editor, alignment }) => {
 	const savedSelectionRef = useRef(null);
+	const editorLayer = useEditorLayer();
 	const handleOpenChange = (open) => {
 		if (open) editor.getEditorState().read(() => {
 			const selection = $getSelection();
@@ -784,11 +789,12 @@ const AlignmentDropdown = ({ editor, alignment }) => {
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					"aria-label": TRIGGER_LABEL,
-					className: cn("tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-accent"),
+					className: cn("tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-hover"),
 					children: [/* @__PURE__ */ jsx(CurrentAlignmentIcon, { className: "tw:size-4" }), /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3" })]
 				})
 			})
 		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			...editorLayer,
 			align: "start",
 			className: "tw:min-w-32",
 			children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
@@ -851,6 +857,7 @@ const BLOCK_TYPE_OPTIONS = Object.entries(BLOCK_TYPE_META).filter(([, meta]) =>
 const isBlockType = (value) => Object.prototype.hasOwnProperty.call(BLOCK_TYPE_META, value);
 const BlockTypeDropdown = ({ editor, blockType }) => {
 	const savedSelectionRef = useRef(null);
+	const editorLayer = useEditorLayer();
 	const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
 	const CurrentBlockIcon = currentMeta?.icon ?? Type;
 	const handleOpenChange = (open) => {
@@ -889,7 +896,7 @@ const BlockTypeDropdown = ({ editor, blockType }) => {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					className: cn("tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1.5 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-accent"),
+					className: cn("tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1.5 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-hover"),
 					children: [
 						/* @__PURE__ */ jsx(CurrentBlockIcon, { className: "tw:size-4" }),
 						currentMeta?.label ?? "Normal",
@@ -898,6 +905,7 @@ const BlockTypeDropdown = ({ editor, blockType }) => {
 				})
 			})
 		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			...editorLayer,
 			align: "start",
 			className: "tw:min-w-40",
 			children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
@@ -922,7 +930,12 @@ const MOD_KEY = IS_APPLE ? {
 	aria: "Control",
 	symbol: "Ctrl"
 };
-const ToolbarButton = ({ active, disabled, onClick, tooltip, shortcutKey, children, className: extraClassName }) => /* @__PURE__ */ jsx(Tooltip, {
+/**
+* An icon button named by its tooltip.
+*
+* - Other props reach the `<button>`, so it can be a trigger; they cannot rename it.
+*/
+const ToolbarButton = ({ active, tooltip, shortcutKey, children, className: extraClassName, ...props }) => /* @__PURE__ */ jsx(Tooltip, {
 	tooltip: shortcutKey ? /* @__PURE__ */ jsxs("span", {
 		className: "tw:inline-flex tw:items-center tw:gap-2",
 		children: [tooltip, /* @__PURE__ */ jsxs(Kbd.Group, {
@@ -941,16 +954,16 @@ const ToolbarButton = ({ active, disabled, onClick, tooltip, shortcutKey, childr
 	triggerAsChild: true,
 	children: /* @__PURE__ */ jsx("button", {
 		type: "button",
+		...props,
 		"aria-label": tooltip,
 		"aria-keyshortcuts": shortcutKey ? `${MOD_KEY.aria}+${shortcutKey}` : void 0,
-		disabled,
-		onClick,
-		className: cn("tw:flex tw:h-7 tw:min-w-7 tw:cursor-pointer tw:items-center tw:justify-center tw:rounded tw:border-0 tw:bg-transparent tw:px-1 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-accent tw:disabled:cursor-not-allowed tw:disabled:opacity-30", active && "tw:bg-secondary-100 tw:text-secondary-500", extraClassName),
+		className: cn("tw:flex tw:h-7 tw:min-w-7 tw:cursor-pointer tw:items-center tw:justify-center tw:rounded tw:border-0 tw:bg-transparent tw:px-1 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-hover tw:disabled:cursor-not-allowed tw:disabled:opacity-30", active && "tw:bg-secondary-100 tw:text-secondary-500", extraClassName),
 		children
 	})
 });
 //#endregion
 //#region src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+const PANEL_NAME = "Insert Link";
 const insertLink = (editor, url, label, savedSelection) => {
 	editor.update(() => {
 		$setSelection(savedSelection);
@@ -969,13 +982,25 @@ const insertLink = (editor, url, label, savedSelection) => {
 	});
 };
 const LinkPanel = ({ editor, isLink }) => {
+	const editorLayer = useEditorLayer();
 	const [open, setOpen] = useState(false);
 	const [url, setUrl] = useState("");
 	const [label, setLabel] = useState("");
 	const savedSelectionRef = useRef(null);
 	const panelRef = useRef(null);
+	const labelRef = useRef(null);
 	const labelId = useId();
 	const urlId = useId();
+	/**
+	* Focuses and selects the Label field on every open.
+	*
+	* - `FocusScope` does it only on mount, and a reopen during the exit animation reuses the panel.
+	*/
+	useEffect(() => {
+		if (!open) return;
+		labelRef.current?.focus({ preventScroll: true });
+		labelRef.current?.select();
+	}, [open]);
 	const handleOpen = () => {
 		editor.getEditorState().read(() => {
 			const selection = $getSelection();
@@ -998,14 +1023,14 @@ const LinkPanel = ({ editor, isLink }) => {
 		editor.focus();
 	};
 	/**
-	* Closes the panel on Escape pressed anywhere while it is open.
+	* Opens the panel, or closes it however Radix asks: Escape, its button again, an outside click.
 	*
-	* - `preventDefault` claims the key from a surface outside Radix's stack (`FullScreenModal`).
-	* - Focus goes back to the editor only from inside the panel; anywhere else it stays put.
+	* - Focus still in the panel (Escape, or the button, which leaves focus put): the editor takes it.
+	* - Focus already elsewhere (an outside click or focus): it stays there.
 	*/
-	const handleEscape = (event) => {
-		event.preventDefault();
-		if (panelRef.current?.contains(document.activeElement)) handleClose();
+	const handleOpenChange = (next) => {
+		if (next) handleOpen();
+		else if (panelRef.current?.contains(document.activeElement)) handleClose();
 		else resetPanel();
 	};
 	const handleSubmit = () => {
@@ -1026,58 +1051,62 @@ const LinkPanel = ({ editor, isLink }) => {
 		tooltip: "Remove Link",
 		children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "tw:relative",
-		children: [/* @__PURE__ */ jsx(ToolbarButton, {
-			active: open,
-			onClick: handleOpen,
-			tooltip: "Insert Link",
-			children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
-		}), open && /* @__PURE__ */ jsx(DismissableLayer, {
-			ref: panelRef,
-			onEscapeKeyDown: handleEscape,
-			className: "tw:absolute tw:left-0 tw:top-full tw:z-50 tw:mt-1 tw:w-80 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:p-3 tw:text-popover-foreground tw:shadow-lg",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "tw:flex tw:flex-col tw:gap-2",
-				children: [
-					/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: labelId,
-						className: "tw:mb-1 tw:text-xs",
-						children: "Label"
-					}), /* @__PURE__ */ jsx(TextInput, {
-						id: labelId,
-						autoFocus: true,
-						placeholder: "Link text",
-						value: label,
-						onValueChange: setLabel,
-						onKeyDown: handleKeyDown,
-						variant: "secondary"
-					})] }),
-					/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: urlId,
-						className: "tw:mb-1 tw:text-xs",
-						children: "URL"
-					}), /* @__PURE__ */ jsx(TextInput, {
-						id: urlId,
-						placeholder: "https://…",
-						value: url,
-						onValueChange: setUrl,
-						onKeyDown: handleKeyDown,
-						variant: "secondary"
-					})] }),
-					/* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(Button, {
-						size: "small",
-						variant: "outline",
-						onClick: handleClose,
-						children: "Cancel"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "small",
-						onClick: handleSubmit,
-						disabled: !url.trim(),
-						children: "Add link"
-					})] })
-				]
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				active: open,
+				tooltip: PANEL_NAME,
+				children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
 			})
+		}), /* @__PURE__ */ jsxs(Popover.Content, {
+			ref: panelRef,
+			"aria-label": PANEL_NAME,
+			...editorLayer,
+			align: "start",
+			collisionPadding: 8,
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			className: "tw:w-80 tw:max-w-[calc(100vw-1rem)] tw:gap-2 tw:p-3",
+			children: [
+				/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: labelId,
+					className: "tw:mb-1 tw:text-xs",
+					children: "Label"
+				}), /* @__PURE__ */ jsx(TextInput, {
+					ref: labelRef,
+					id: labelId,
+					placeholder: "Link text",
+					value: label,
+					onValueChange: setLabel,
+					onKeyDown: handleKeyDown,
+					variant: "secondary"
+				})] }),
+				/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: urlId,
+					className: "tw:mb-1 tw:text-xs",
+					children: "URL"
+				}), /* @__PURE__ */ jsx(TextInput, {
+					id: urlId,
+					placeholder: "https://…",
+					value: url,
+					onValueChange: setUrl,
+					onKeyDown: handleKeyDown,
+					variant: "secondary"
+				})] }),
+				/* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					variant: "outline",
+					onClick: handleClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: handleSubmit,
+					disabled: !url.trim(),
+					children: "Add link"
+				})] })
+			]
 		})]
 	});
 };
@@ -1103,6 +1132,7 @@ const hasFocus = (element) => !!element?.contains(document.activeElement);
 * Keeps focus, and the editor selection with it, where it was when a toolbar control is pressed.
 *
 * - A link panel field takes focus as usual, so a click there lands the caret in it.
+* - The link panel is portalled, but React bubbles its events up here all the same.
 */
 const keepEditorFocus = (event) => {
 	if (event.target instanceof HTMLInputElement) return;
@@ -1110,6 +1140,7 @@ const keepEditorFocus = (event) => {
 };
 const ToolbarPlugin = ({ mode = "floating" }) => {
 	const [editor] = useLexicalComposerContext();
+	const editorLayer = useEditorLayer();
 	const [isBold, setIsBold] = useState(false);
 	const [isItalic, setIsItalic] = useState(false);
 	const [isUnderline, setIsUnderline] = useState(false);
@@ -1364,6 +1395,7 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 	return /* @__PURE__ */ jsxs(Popover, {
 		open: true,
 		children: [/* @__PURE__ */ jsx(Popover.Anchor, { virtualRef: { current: anchor } }), /* @__PURE__ */ jsx(Popover.Content, {
+			...editorLayer,
 			ref: toolbarRef,
 			role: "toolbar",
 			"aria-label": "Formatting options",
@@ -1375,7 +1407,7 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 			onEscapeKeyDown: handleEscape,
 			onInteractOutside: handleInteractOutside,
 			onMouseDown: keepEditorFocus,
-			className: cn(TOOLBAR_BASE_CLASS, "tw:flex-row tw:overflow-visible"),
+			className: cn(TOOLBAR_BASE_CLASS, "tw:flex-row"),
 			children: buttons
 		})]
 	});
@@ -1401,6 +1433,7 @@ const editorTheme = {
 		ol: "tw:!list-decimal",
 		ul: "tw:!list-disc",
 		checklist: "tw:!list-none tw:!pl-0",
+		nested: { listitem: "tw:list-none tw:before:hidden tw:after:hidden" },
 		listitemChecked: [
 			"tw:relative tw:!pl-6 tw:list-none tw:outline-hidden tw:line-through tw:text-muted-foreground",
 			"tw:before:content-[\"\"] tw:before:absolute tw:before:left-0 tw:before:top-[3px]",
@@ -1444,12 +1477,14 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 		}
 	}));
 	const skipBlurSaveRef = useRef(false);
+	const layerId = useId();
 	const handleBlur = saveOnBlur && onSave ? (event) => {
 		if (skipBlurSaveRef.current) {
 			skipBlurSaveRef.current = false;
 			return;
 		}
-		if (!event.currentTarget.contains(event.relatedTarget)) onSave();
+		const next = event.relatedTarget;
+		if (!event.currentTarget.contains(next) && !next?.closest(`[data-editor-layer="${layerId}"]`)) onSave();
 	} : void 0;
 	return /* @__PURE__ */ jsx(LexicalComposer, {
 		initialConfig,
@@ -1459,7 +1494,10 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 				className: cn(!compact && "tw:prose", compact && "tw:[&_p]:m-0 tw:[&_p+p]:mt-2", clampDisplay && "tw:[&:not(:focus-within)]:line-clamp-2", className),
 				onBlur: handleBlur,
 				children: [
-					showToolbar && editable && /* @__PURE__ */ jsx(ToolbarPlugin, { mode: toolbarMode }),
+					showToolbar && editable && /* @__PURE__ */ jsx(EditorLayerProvider, {
+						value: layerId,
+						children: /* @__PURE__ */ jsx(ToolbarPlugin, { mode: toolbarMode })
+					}),
 					/* @__PURE__ */ jsx("div", {
 						className: cn("tw:relative tw:rounded-md tw:transition-colors", contentPadding, compact && "tw:-mx-1.5 tw:-my-0.5", editable && "tw:cursor-text tw:hover:bg-muted tw:focus-within:ring-2 tw:focus-within:ring-ring/40"),
 						children: /* @__PURE__ */ jsx(RichTextPlugin, {