@keboola/design 6.4.0 → 6.5.0

package/dist/mermaid.cjs

@@ -9,6 +9,7 @@ var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var brandRegistry = require('@keboola/brand-registry');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var DOMPurify = require('dompurify');
 var reactSlot = require('@radix-ui/react-slot');
 var lucide_react_star = require('lucide-react');
@@ -251,6 +252,7 @@ var Tooltip = ({
   placement = "right",
   forceHide = false,
   forceShow = false,
+  delayDuration,
   // trigger props
   triggerAsChild = false
 }) => {
@@ -270,6 +272,7 @@ var Tooltip = ({
     {
       open: !!tooltip && (open || forceShow) && !forceHide,
       onOpenChange: setOpen,
+      delayDuration,
       disableHoverableContent: isActionVariant,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -402,6 +405,7 @@ var Keboola = react.forwardRef(
       width: size,
       height: size,
       viewBox: "0 0 300 512",
+      overflow: "visible",
       fill: color,
       className: cn("lucide", className),
       ...rest,
@@ -860,10 +864,13 @@ var ClipboardButton = ({
 var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
-var ZoomableSvg = ({ html, copyText, className }) => {
+var ZoomableSvg = ({ html, copyText, className, allowForeignObject }) => {
   const safeHtml = react.useMemo(
-    () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
-    [html]
+    () => DOMPurify__default.default.sanitize(html, {
+      USE_PROFILES: { svg: true, svgFilters: true },
+      ...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
+    }),
+    [html, allowForeignObject]
   );
   const containerRef = react.useRef(null);
   const [scale, setScale] = react.useState(1);
@@ -892,7 +899,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, []);
+  }, [isFullscreen]);
   const didDragRef = react.useRef(false);
   const handleMouseDown = react.useCallback(
     (e) => {
@@ -999,14 +1006,18 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     }
   );
   if (isFullscreen) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "presentation",
-        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
-        onClick: stopPropagation,
-        children: diagramContent
-      }
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "presentation",
+          "data-testid": "zoomable-svg-fullscreen",
+          className: "tailwindcss-preflight tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
+          onClick: stopPropagation,
+          children: diagramContent
+        }
+      ),
+      document.body
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1020,15 +1031,47 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     }
   );
 };
+
+// src/blocks/MermaidDiagram/svgTransforms.ts
+var HTML_TAG = /<[^>]+>/g;
+var FOREIGN_OBJECT = /(<foreignObject\b[^>]*>)([\s\S]*?)(<\/foreignObject>)/g;
+var ROOT_SVG_TAG = /^(\s*<svg\b)([^>]*)(>)/i;
+var flattenForeignObjectLabels = (svg) => svg.replace(FOREIGN_OBJECT, (_match, open, inner, close) => {
+  const text = inner.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim();
+  return `${open}${text}${close}`;
+});
+var STYLE_ATTR = /\s+style="([^"]*)"/i;
+var makeResponsive = (svgString) => {
+  const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
+  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
+  return svgString.replace(ROOT_SVG_TAG, (_match, open, attrs, close) => {
+    const existingStyle = attrs.match(STYLE_ATTR)?.[1] ?? "";
+    const styleDecls = existingStyle.replace(/max-width:\s*[^;"]*;?\s*/gi, "").replace(/\s+/g, " ").trim().replace(/;$/, "");
+    let nextAttrs = attrs.replace(/\s+width="[^"]*"/i, "").replace(/\s+height="[^"]*"/i, "").replace(STYLE_ATTR, "");
+    nextAttrs += ' width="100%"';
+    const styleParts = [styleDecls, vbWidth ? `max-width: ${vbWidth}px` : ""].filter(Boolean).join("; ");
+    if (styleParts) nextAttrs += ` style="${styleParts}"`;
+    return `${open}${nextAttrs}${close}`;
+  });
+};
 var PRIMARY_FALLBACK_CHANNELS = "31 143 255";
 var resolvePrimary = () => {
   const channels = typeof document === "undefined" ? PRIMARY_FALLBACK_CHANNELS : getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim() || PRIMARY_FALLBACK_CHANNELS;
   return `rgb(${channels})`;
 };
 var mermaidPromise = null;
+var registerLucideIconPack = (m) => {
+  m.registerIconPacks([
+    {
+      name: "lucide",
+      loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default)
+    }
+  ]);
+};
 var getMermaid = () => {
   if (!mermaidPromise) {
     mermaidPromise = import('mermaid').then((m) => {
+      registerLucideIconPack(m.default);
       m.default.initialize({
         startOnLoad: false,
         securityLevel: "strict",
@@ -1092,7 +1135,9 @@ var getMermaid = () => {
   return mermaidPromise;
 };
 var stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
+var hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
 var tryFastRender = (code) => {
+  if (hasIconSyntax(code)) return null;
   try {
     return stripFontImports(
       beautifulMermaid.renderMermaidSVG(code, {
@@ -1102,27 +1147,11 @@ var tryFastRender = (code) => {
         font: "Inter, system-ui, sans-serif"
       })
     );
-  } catch {
+  } catch (err) {
+    console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
     return null;
   }
 };
-var makeResponsive = (svgString) => {
-  const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
-  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
-  let result = svgString.replace(/(<svg[^>]*?)\s+width="[^"]*"/i, '$1 width="100%"').replace(/(<svg[^>]*?)\s+height="[^"]*"/i, "$1");
-  if (!vbWidth) return result;
-  const hasStyle = /(<svg[^>]*?)\s+style="([^"]*)"/i.test(result);
-  if (hasStyle) {
-    result = result.replace(/(<svg[^>]*?)\s+style="([^"]*)"/i, (_m, pre, styles) => {
-      const cleaned = styles.replace(/max-width:\s*[^;"]*;?\s*/g, "").trim();
-      const combined = [cleaned, `max-width: ${vbWidth}px`].filter(Boolean).join("; ");
-      return `${pre} style="${combined}"`;
-    });
-  } else {
-    result = result.replace(/<svg/, `<svg style="max-width: ${vbWidth}px"`);
-  }
-  return result;
-};
 var RENDER_DEBOUNCE_MS = 300;
 var svgCache = /* @__PURE__ */ new Map();
 var resolveSyncSvg = (code) => {
@@ -1163,8 +1192,9 @@ var MermaidDiagram = ({ code }) => {
         try {
           const result = await mermaidModule.default.render(rendererId, code, container);
           if (renderIdRef.current === currentRenderId && result) {
-            svgCache.set(code, result.svg);
-            setSvg(result.svg);
+            const svgOutput = flattenForeignObjectLabels(result.svg);
+            svgCache.set(code, svgOutput);
+            setSvg(svgOutput);
             setRenderFailed(false);
           }
         } finally {
@@ -1211,7 +1241,8 @@ var MermaidDiagram = ({ code }) => {
         copyText: `\`\`\`mermaid
 ${code}
 \`\`\``,
-        className: "tw-my-3"
+        className: "tw-my-3",
+        allowForeignObject: true
       },
       code
     );