@keboola/design 2.0.0 → 2.1.0

package/dist/markdown-editor.d.cts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarkdownEditorProps = {
+    /** Markdown string (controlled) */
+    value: string;
+    onChange?: (markdown: string) => void;
+    /**
+     * Renders content but never accepts input. Use for permanent view-only contexts
+     * (e.g. a current user lacks edit permission). Toolbar is hidden.
+     */
+    readOnly?: boolean;
+    /**
+     * Temporarily blocks input but signals intent to re-enable
+     * (e.g. while a save is in flight). Functionally identical to `readOnly` today.
+     */
+    disabled?: boolean;
+    placeholder?: string;
+    autoFocus?: boolean;
+    /** Invoked on Cmd/Ctrl+Enter — typically used to commit a form. */
+    onSave?: () => void;
+    /**
+     * Invoked on Escape in inline-edit mode (`singleLine || saveOnBlur`). Per the
+     * inline-editable-text pattern spec, Esc reverts the in-progress edit — callers
+     * reset `value` to the last-committed state inside this handler.
+     */
+    onCancel?: () => void;
+    /**
+     * Async image upload. Resolved URL is embedded as the image src
+     * (`![alt](url)` in the underlying markdown).
+     */
+    onImageUpload?: (file: File) => Promise<{
+        url: string;
+    }>;
+    className?: string;
+    imageRenderer?: (props: {
+        src: string;
+        alt: string;
+    }) => ReactNode;
+    showToolbar?: boolean;
+    /**
+     * Strips the prose typography wrapper, removes the min-height, and tightens padding so
+     * the editor visually blends with surrounding text. Use for inline / Linear-style edit
+     * affordances inside headings, list rows, or table cells. Pair with `className` to set
+     * the caller's typography.
+     */
+    compact?: boolean;
+    /**
+     * Calls `onSave` when focus leaves the editor (and is not moved into the toolbar).
+     * `onChange` already keeps the caller's value in sync — `onSave` is the "commit" signal.
+     */
+    saveOnBlur?: boolean;
+    /**
+     * Disables block-level markdown (lists, headings, code blocks, HR) and makes a plain
+     * Enter press trigger `onSave` and blur the editor. Shift+Enter still inserts a soft
+     * line break. Use for editable titles.
+     */
+    singleLine?: boolean;
+    /**
+     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
+     * focus expands the editor to full height (no clamp). Per the inline-editable-text
+     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     */
+    clampDisplay?: boolean;
+    /**
+     * Minimum visible height in lines. `1` renders as a single line that grows with
+     * content (Linear/Slack/GitHub-PR-comment pattern); `0` removes the floor entirely.
+     * Omit to keep the default ~4-line floor. Ignored in `compact` mode (which has no floor).
+     */
+    minRows?: number;
+};
+declare const MarkdownEditor: ({ value, onChange, readOnly, placeholder, autoFocus, disabled, onSave, onCancel, onImageUpload, className, imageRenderer, showToolbar, compact, saveOnBlur, singleLine, clampDisplay, minRows, }: MarkdownEditorProps) => react_jsx_runtime.JSX.Element;
+
+export { MarkdownEditor, type MarkdownEditorProps };

package/dist/markdown-editor.d.ts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarkdownEditorProps = {
+    /** Markdown string (controlled) */
+    value: string;
+    onChange?: (markdown: string) => void;
+    /**
+     * Renders content but never accepts input. Use for permanent view-only contexts
+     * (e.g. a current user lacks edit permission). Toolbar is hidden.
+     */
+    readOnly?: boolean;
+    /**
+     * Temporarily blocks input but signals intent to re-enable
+     * (e.g. while a save is in flight). Functionally identical to `readOnly` today.
+     */
+    disabled?: boolean;
+    placeholder?: string;
+    autoFocus?: boolean;
+    /** Invoked on Cmd/Ctrl+Enter — typically used to commit a form. */
+    onSave?: () => void;
+    /**
+     * Invoked on Escape in inline-edit mode (`singleLine || saveOnBlur`). Per the
+     * inline-editable-text pattern spec, Esc reverts the in-progress edit — callers
+     * reset `value` to the last-committed state inside this handler.
+     */
+    onCancel?: () => void;
+    /**
+     * Async image upload. Resolved URL is embedded as the image src
+     * (`![alt](url)` in the underlying markdown).
+     */
+    onImageUpload?: (file: File) => Promise<{
+        url: string;
+    }>;
+    className?: string;
+    imageRenderer?: (props: {
+        src: string;
+        alt: string;
+    }) => ReactNode;
+    showToolbar?: boolean;
+    /**
+     * Strips the prose typography wrapper, removes the min-height, and tightens padding so
+     * the editor visually blends with surrounding text. Use for inline / Linear-style edit
+     * affordances inside headings, list rows, or table cells. Pair with `className` to set
+     * the caller's typography.
+     */
+    compact?: boolean;
+    /**
+     * Calls `onSave` when focus leaves the editor (and is not moved into the toolbar).
+     * `onChange` already keeps the caller's value in sync — `onSave` is the "commit" signal.
+     */
+    saveOnBlur?: boolean;
+    /**
+     * Disables block-level markdown (lists, headings, code blocks, HR) and makes a plain
+     * Enter press trigger `onSave` and blur the editor. Shift+Enter still inserts a soft
+     * line break. Use for editable titles.
+     */
+    singleLine?: boolean;
+    /**
+     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
+     * focus expands the editor to full height (no clamp). Per the inline-editable-text
+     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     */
+    clampDisplay?: boolean;
+    /**
+     * Minimum visible height in lines. `1` renders as a single line that grows with
+     * content (Linear/Slack/GitHub-PR-comment pattern); `0` removes the floor entirely.
+     * Omit to keep the default ~4-line floor. Ignored in `compact` mode (which has no floor).
+     */
+    minRows?: number;
+};
+declare const MarkdownEditor: ({ value, onChange, readOnly, placeholder, autoFocus, disabled, onSave, onCancel, onImageUpload, className, imageRenderer, showToolbar, compact, saveOnBlur, singleLine, clampDisplay, minRows, }: MarkdownEditorProps) => react_jsx_runtime.JSX.Element;
+
+export { MarkdownEditor, type MarkdownEditorProps };

package/dist/markdown-editor.js

@@ -4,11 +4,8 @@ import { Portal, Content, Root, Trigger } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createContext, lazy, Suspense, use, useId, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { AlignLeft, AlignCenter, AlignRight, AlignJustify, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Type, Bold, Italic, Underline, Strikethrough, Code, Minimize2, Maximize2, ChevronDown, Link, Copy, X, Loader2, AlertCircle, CircleCheck, Info, AlertTriangle, ChevronRight, ToggleRight, Circle, Check } from 'lucide-react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import '@awesome.me/kit-be8bcf7e5e/icons';
+import { AlignLeft, AlignCenter, AlignRight, AlignJustify, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Type, Bold, Italic, Underline, Strikethrough, Code, Minimize2, Maximize2, ChevronDown, Link, Copy, X, Loader2, AlertCircle, CircleCheck, Info, AlertTriangle, ChevronRight, Pipette, ToggleRight, Circle, Check } from 'lucide-react';
 import { Root as Root$2, Slottable } from '@radix-ui/react-slot';
-import { Tooltip as Tooltip$1, cn as cn$1 } from '@keboola/design';
 import { renderMermaidSVG } from 'beautiful-mermaid';
 import colors from '@keboola/tailwind-config/colors';
 import { CodeNode, $isCodeNode, $createCodeNode } from '@lexical/code';
@@ -33,13 +30,13 @@ import { HeadingNode, QuoteNode, $isHeadingNode, $isQuoteNode, $createQuoteNode,
 import { DecoratorNode, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, $createParagraphNode, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, DROP_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_HIGH, $insertNodes, $getNodeByKey, $setSelection, FORMAT_ELEMENT_COMMAND, $createTextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { toast as toast$1 } from 'sonner';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createPortal } from 'react-dom';
 import { $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
 import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
 import { Root as Root$1, Group, Trigger as Trigger$1 } from '@radix-ui/react-dropdown-menu';
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import TextareaAutosize from 'react-textarea-autosize';
-import { Pipette } from '@keboola/design/icons';
 import * as RLabel from '@radix-ui/react-label';
 
 var __defProp = Object.defineProperty;
@@ -220,7 +217,7 @@ var init_TooltipTrigger = __esm({
         if (keepOpenOnClick) event.preventDefault();
         onClick?.(event);
       };
-      const handePointerDown = (event) => {
+      const handlePointerDown = (event) => {
         if (keepOpenOnClick) event.preventDefault();
         onPointerDown?.(event);
       };
@@ -232,8 +229,16 @@ var init_TooltipTrigger = __esm({
           ref,
           className: cn("tailwindcss-preflight", className),
           onClick: handleClick,
-          onPointerDown: handePointerDown,
-          children: asChild ? children : /* @__PURE__ */ jsx("span", { children })
+          onPointerDown: handlePointerDown,
+          children: asChild ? children : (
+            // Default-mode trigger wraps children in a span so Radix has a
+            // single DOM element to attach handlers to. `tailwindcss-preflight`
+            // (merged in via Slot) activates Tailwind's preflight inside the
+            // span, which sets `svg { display: block }` — without an inline-flex
+            // container that would stack any bare Lucide icon onto its own
+            // line. `tw-inline-flex tw-items-center` keeps icon + text aligned.
+            /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-items-center", children })
+          )
         }
       );
     };
@@ -449,17 +454,6 @@ var init_icons = __esm({
   "src/icons/index.ts"() {
   }
 });
-var Icon;
-var init_Icon = __esm({
-  "src/components/Icon/Icon.tsx"() {
-    Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
-  }
-});
-var init_Icon2 = __esm({
-  "src/components/Icon/index.ts"() {
-    init_Icon();
-  }
-});
 var variants, argoVariants;
 var init_styles = __esm({
   "src/components/Button/styles.ts"() {
@@ -586,15 +580,38 @@ var init_styles = __esm({
             ]
           },
           size: {
-            medium: ["tw-max-h-10", "tw-min-h-10", "tw-px-4", "tw-py-2.5", "[&_svg]:tw-size-4"],
-            small: ["tw-max-h-8", "tw-min-h-8", "tw-px-4", "tw-py-1.5", "[&_svg]:tw-size-4"],
-            large: ["tw-max-h-12", "tw-min-h-12", "tw-px-4", "tw-py-3.5", "[&_svg]:tw-size-4"],
-            "icon-lg": ["tw-size-12", "tw-p-0", "[&_svg]:tw-size-6"],
-            icon: ["tw-size-10", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-sm": ["tw-size-8", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-xs": ["tw-size-6", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-2xs": ["!tw-inline-flex", "tw-size-5", "tw-max-h-5", "[&_svg]:tw-size-3"],
-            "icon-3xs": ["tw-h-fit", "tw-w-fit", "[&_svg]:tw-size-4"]
+            medium: [
+              "tw-max-h-10",
+              "tw-min-h-10",
+              "tw-px-4",
+              "tw-py-2.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            small: [
+              "tw-max-h-8",
+              "tw-min-h-8",
+              "tw-px-4",
+              "tw-py-1.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            large: [
+              "tw-max-h-12",
+              "tw-min-h-12",
+              "tw-px-4",
+              "tw-py-3.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            "icon-lg": ["tw-size-12", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+            icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-2xs": [
+              "!tw-inline-flex",
+              "tw-size-5",
+              "tw-max-h-5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+            ],
+            "icon-3xs": ["tw-h-fit", "tw-w-fit", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
           }
         }
       }
@@ -721,7 +738,6 @@ var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
     init_utils();
-    init_Icon2();
     init_styles();
     Button = ({
       ref,
@@ -736,10 +752,10 @@ var init_Button = __esm({
       variant = "primary",
       size = "medium",
       block = false,
-      icon,
       ...buttonProps
     }) => {
       const Comp = asChild ? Root$2 : "button";
+      const isIconOnly = String(size).startsWith("icon");
       const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
         size,
         variant,
@@ -762,14 +778,13 @@ var init_Button = __esm({
           disabled,
           "aria-disabled": disabled,
           "data-variant": variant,
-          "data-icon-only": String(size).startsWith("icon"),
+          "data-icon-only": isIconOnly,
           type,
           onClick: handleClick,
           className: cn(classNames),
           children: [
             isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-            !isLoading && icon && /* @__PURE__ */ jsx(Icon, { icon }),
-            /* @__PURE__ */ jsx(Slottable, { children })
+            /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
           ]
         }
       );
@@ -833,6 +848,7 @@ var Clipboard;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
     init_utils();
+    init_Tooltip2();
     Clipboard = ({
       ref,
       text: textProp,
@@ -872,21 +888,21 @@ var init_Clipboard = __esm({
         return tooltip;
       })();
       const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-      return /* @__PURE__ */ jsxs(Tooltip$1.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+      return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
         /* @__PURE__ */ jsx(
-          Tooltip$1.Trigger,
+          Tooltip.Trigger,
           {
             ...restButtonProps,
             asChild,
             keepOpenOnClick: true,
             onClick: handleOnClick,
-            className: cn$1("tw-cursor-pointer", className),
+            className: cn("tw-cursor-pointer", className),
             ref,
             children: children ?? text
           }
         ),
         /* @__PURE__ */ jsx(
-          Tooltip$1.Content,
+          Tooltip.Content,
           {
             keepOpenOnPointerDownOutside: true,
             placement: tooltipPlacement,
@@ -1533,9 +1549,7 @@ init_utils();
 // src/components/Toast/ToastRoot.tsx
 init_icons();
 init_utils();
-
-// src/utils/legacyIcon.tsx
-init_Icon2();
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
 var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
 var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsx(Icon, { icon: value }) : value;
 
@@ -1618,7 +1632,7 @@ var ToastDismiss = ({
       "tw-row-start-1",
       "tailwindcss-preflight",
       "[&_svg]:tw-aspect-square",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
@@ -1769,13 +1783,14 @@ var ToastRoot = ({
           "tw-inline-flex",
           "tw-items-center",
           "tw-justify-center",
+          "tw-self-center",
           // styles — container at 20px with no padding so the 20px Lucide
           // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
           // 16px child into 8px of visible space)
           "tw-aspect-square",
           "tw-size-5",
           "tw-shrink-0",
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-white",
           "group-data-[variant=default]/toast:tw-text-popover-foreground"
         ),
@@ -2207,7 +2222,7 @@ var variants3 = cva(
           "tw-border-border",
           "tw-rounded-full",
           "tw-bg-white",
-          "[&_svg]:tw-size-2",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
@@ -2215,14 +2230,14 @@ var variants3 = cva(
           "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
           "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
         ],
-        check: ["[&_svg]:tw-size-3.5", "[&_svg]:tw-text-primary"],
+        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
         checkbox: [
           "[&_svg]:tw-text-white",
           "tw-border",
           "tw-border-solid",
           "tw-border-neutral-200",
           "tw-rounded",
-          "[&_svg]:tw-size-3",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
@@ -2233,7 +2248,7 @@ var variants3 = cva(
           "tw-size-5",
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-neutral-400",
           "data-[state=unchecked]:tw-rotate-180",
           "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
@@ -2284,7 +2299,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
       // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
       "tw-size-5",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
       "group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
       "group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
@@ -3360,6 +3375,7 @@ InputGroup.Text = InputGroupText;
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
 init_utils();
+init_icons();
 
 // src/blocks/ColorInput/utils.ts
 var HEX_CHARSET = /^[0-9a-fA-F]+$/;
@@ -4306,10 +4322,13 @@ var MarkdownEditor = ({
   compact = false,
   saveOnBlur = false,
   singleLine = false,
-  clampDisplay = false
+  clampDisplay = false,
+  minRows
 }) => {
   const editable = !readOnly && !disabled;
   const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
+  const useDefaultMinHeight = !compact && minRows === void 0;
+  const customMinHeight = !compact && minRows !== void 0 ? { minHeight: `${minRows * 1.75}em` } : void 0;
   const [initialConfig] = useState(() => ({
     namespace: "MarkdownEditor",
     theme: editorTheme,
@@ -4368,7 +4387,8 @@ var MarkdownEditor = ({
                 contentEditable: /* @__PURE__ */ jsx(
                   ContentEditable,
                   {
-                    className: cn("tw-outline-none", !compact && "tw-min-h-[100px]"),
+                    className: cn("tw-outline-none", useDefaultMinHeight && "tw-min-h-[100px]"),
+                    style: customMinHeight,
                     "aria-placeholder": placeholder ?? "",
                     placeholder: placeholder ? /* @__PURE__ */ jsx(
                       "div",