@keboola/design 2.0.1 → 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"() {
@@ -744,7 +738,6 @@ var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
     init_utils();
-    init_Icon2();
     init_styles();
     Button = ({
       ref,
@@ -759,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,
@@ -785,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 })
           ]
         }
       );
@@ -856,6 +848,7 @@ var Clipboard;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
     init_utils();
+    init_Tooltip2();
     Clipboard = ({
       ref,
       text: textProp,
@@ -895,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,
@@ -1556,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;
 
@@ -1792,6 +1783,7 @@ 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)
@@ -3383,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]+$/;
@@ -4329,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,
@@ -4391,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",