@keboola/design 16.1.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @keboola/design
 
+## 17.1.0
+
+### Minor Changes
+
+- Clipboard copy reports its outcome to the host once the copy settles:
+  - `Clipboard` and `ClipboardButton` take `onCopied(copied: boolean)`, called once per copy attempt with whether it succeeded, and not when a click ran no copy.
+  - `AnswerActions` calls `onCopy` only after the answer is on the clipboard, and the new `onCopyError` when the copy failed. `onCopy` used to fire on every click, before the copy settled and even when it failed.
+
+- New building blocks for list and settings pages.
+  - `PageSection`: a titled section without a box — heading, optional description, actions on the right.
+  - `BulkActionsBar` and `Reveal`: the bar a table selection acts through, growing in and out with it.
+  - `Table.EmptyRow`: the one row of a table with nothing to show, under the table's own header.
+
+### Patch Changes
+
+- `isMac` falls back to `navigator.platform` when the client hints report an empty platform (a user-agent override, DevTools emulation), so a Mac keeps the Cmd shortcuts and the `⌘` key labels.
+
+- A glyph Inter does not ship (the `→` range join) renders from the system font again, not from `Inter Fallback`.
+  - `Inter Fallback` covers only the codepoints of the Inter subset (latin + latin-ext), so it stands in for Inter's own glyphs and nothing else.
+
+- `SectionNav`: a group row's chevron opens or collapses the group without navigating.
+  - The rest of the row still opens the group and goes to its first section.
+  - The chevron has its own hover background and a padded hit area.
+
+## 17.0.0
+
+### Major Changes
+
+- `MarkdownTable` takes no `surface` prop: its right-edge fade masks the table itself, so it reads on any background in both themes.
+  - The fade shows while columns remain to the right, as before.
+  - `MessageBubble`'s Show more fold fades the clipped text the same way.
+
+### Patch Changes
+
+- `MultiCombobox` keeps its clear and open buttons on the right, outside the chip row, and wraps the input below the chips only when less than 4rem is left beside them.
+
+- `EmptyState` wraps its centred text evenly:
+  - `EmptyState.Title` balances its lines (`text-wrap: balance`).
+  - `EmptyState.Description` avoids a lone word on its last line (`text-wrap: pretty`).
+
+- Text keeps its place when Inter swaps in.
+  - `Inter Fallback` is Arial (or Liberation Sans) scaled to Inter's width, ascent and descent, one face per Inter weight.
+  - Every Inter stack — `html`, `--font-display`, `font-sans`, `font-display` — lists it right after `Inter`.
+
+- `MarkdownTable` re-renders only when its overflow state changes.
+  - A scroll or resize that leaves the fade and the expand action as they were renders nothing.
+
+- `scroll-fade`, `scroll-fade-y` and `scroll-fade-x` (`@keboola/design/theme` and the `@keboola/tailwind-config/scrollFade` plugin) show no fade in browsers without scroll-driven animations (Firefox), so a `Modal.Body` that does not scroll keeps its first line solid there
+  - Where `animation-timeline: scroll()` is unsupported, the reveal animations are off and both edges stay solid.
+  - `PageLayout`'s nav column applies `scroll-fade-y` without its own `@supports` guard.
+
+- Updated dependencies:
+  - @keboola/tailwind-config@1.2.1
+
 ## 16.1.0
 
 ### Minor Changes

package/dist/{AIKit-Cf5plya2.js → AIKit-DyysN1kS.js}

@@ -1,24 +1,24 @@
 import { cn } from "./classNames-DkX30VJU.js";
-import { Tooltip, TooltipProvider, isMac } from "./utils-DjFceY3H.js";
+import { Tooltip, TooltipProvider, isMac } from "./utils-BxEJOnFD.js";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, BookOpen, Bookmark, Box, Bug, Calendar, ChartBar, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cloud, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Filter, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, HardDrive, History, Hourglass, Info, Key, Layers, Lightbulb, LineChart, Link, List, ListChecks, Loader2, LoaderCircle, Lock, Mail, Maximize2, Minimize2, Minus, Package, Pause, Pencil, Pin, Play, Plus, Quote, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Server, Settings, Shield, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TrendingDown, TrendingUp, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, Wrench, X, XCircle, Zap } from "./icons-DDR9dFSr.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-71Ugbl8c.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-RzY5XxiG.js";
+import { ClipboardButton } from "./ClipboardButton-BWeaQEM2.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CiRKNsls.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { HoverCard } from "./HoverCard-OGWKRXJ7.js";
-import { Command } from "./Command-BcTb6GsR.js";
-import { TextInput } from "./TextInput--1CfZybC.js";
+import { Command } from "./Command-D6XYzzJf.js";
+import { TextInput } from "./TextInput-BAL-zOAN.js";
 import { Badge } from "./Badge-CFRhducL.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Kbd, keys } from "./Kbd-BprYCICe.js";
+import { Kbd, keys } from "./Kbd-6velz9J-.js";
 import { Collapsible } from "./Collapsible-zsXk4Vpp.js";
-import { Alert } from "./Alert-DziS8n1H.js";
-import { Table as Table$1, tableAriaSort } from "./Table-BwgBm3hJ.js";
+import { Alert } from "./Alert-BQB-og_I.js";
+import { Table as Table$1, tableAriaSort } from "./Table-DtLrXt4i.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { DiagramSource, makeResponsive } from "./svgTransforms-BBxxO9T6.js";
-import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-BRPGgaWJ.js";
+import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-CIOqAYpd.js";
 import { Progress } from "./internal/components/Progress.js";
 import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -102,7 +102,7 @@ const SIZES = {
 * - A vote can be changed but not withdrawn; pressing the pressed one re-sends it.
 * - The caller owns the recorded vote and the write.
 */
-const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, extraActions = [], labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again", groupDivider = false, timestamp, voteStyle = "tinted" }) => {
+const AnswerActions = ({ copyText, vote, onVote, onCopy, onCopyError, actions, extraActions = [], labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again", groupDivider = false, timestamp, voteStyle = "tinted" }) => {
 	const { button, gap } = SIZES[size];
 	const votes = VOTE_BUTTONS.map(({ vote: candidate, icon }) => {
 		const isRecorded = vote === candidate;
@@ -127,7 +127,7 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, extraActions =
 		tooltip: "Copy answer",
 		size: button,
 		variant: "invisible",
-		onClick: onCopy
+		onCopied: (copied) => copied ? onCopy?.() : onCopyError?.()
 	}) : null;
 	const regenerate = onRegenerate ? /* @__PURE__ */ jsx(Tooltip, {
 		tooltip: regenerateLabel,
@@ -2120,40 +2120,37 @@ Markdown.Block = MarkdownBlock;
 /** How much wider than its column a table has to be before the column is the wrong surface. */
 const EXPAND_RATIO = 1.5;
 /**
-* The fade's end colour — must match the host's surface, or it draws a strip over the data.
-*
-* - Full class strings: Tailwind reads literals.
-*/
-const FADE_SURFACE = {
-	card: "tw:from-card",
-	background: "tw:from-background"
-};
-/**
 * A table in an answer that shows when it is cut off on the right.
 *
 * - Controls sit in a fixed-height rail above the grid, so they never cover rows or shift them.
 * - The fade shows only while content remains to the right.
-* - A painted gradient, not `tw:scroll-fade-x`: that needs scroll-driven animations, which the
+* - A static mask, not `tw:scroll-fade-x`: that needs scroll-driven animations, which the
 *   `baseline-widely-available` build floor lacks, and must sit on `Table`'s own container.
 * - Past `EXPAND_RATIO` the expand action shows without hover.
 */
-const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable = false, className }) => {
+const MarkdownTable = ({ children, actions, onExpand, sortable = false, className }) => {
 	const frameRef = useRef(null);
 	const [overflow, setOverflow] = useState({
 		scrollable: false,
 		atEnd: true,
-		ratio: 1
+		wide: false
 	});
+	/**
+	* Reads `Table`'s own container (the frame's first child); the frame stays visible for the fade.
+	*
+	* - Keeps the previous state while no flag flips, so a scroll or resize that crosses no edge renders nothing.
+	*/
 	const measure = useCallback(() => {
 		const box = frameRef.current?.firstElementChild;
 		if (!box) return;
 		const { scrollLeft, scrollWidth, clientWidth } = box;
 		const hidden = scrollWidth - clientWidth;
-		setOverflow({
+		const next = {
 			scrollable: hidden > 1,
 			atEnd: scrollLeft >= hidden - 1,
-			ratio: clientWidth > 0 ? scrollWidth / clientWidth : 1
-		});
+			wide: clientWidth > 0 && scrollWidth / clientWidth >= EXPAND_RATIO
+		};
+		setOverflow((prev) => prev.scrollable === next.scrollable && prev.atEnd === next.atEnd && prev.wide === next.wide ? prev : next);
 	}, []);
 	useEffect(() => {
 		const box = frameRef.current?.firstElementChild;
@@ -2168,7 +2165,7 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 			observer.disconnect();
 		};
 	}, [measure]);
-	const showExpand = !!onExpand && overflow.scrollable && overflow.ratio >= EXPAND_RATIO;
+	const showExpand = !!onExpand && overflow.scrollable && overflow.wide;
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [(actions || onExpand) && /* @__PURE__ */ jsxs("div", {
@@ -2184,14 +2181,10 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 					children: [/* @__PURE__ */ jsx(Maximize2, { className: "tw:size-3.5" }), "Open wider"]
 				})
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			ref: frameRef,
-			className: "tw:relative",
-			children: [sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children }) : children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				"data-testid": "markdown-table-fade",
-				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
-			})]
+			className: overflow.atEnd ? void 0 : "tw:mask-r-from-[calc(100%-3rem)]",
+			children: sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children }) : children
 		})]
 	});
 };
@@ -2200,9 +2193,10 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable
 * Clips tall content at `maxHeight` behind a fade, with a Show more / Show less toggle.
 *
 * - The toggle and fade appear only while the content is taller than `maxHeight`.
+* - The fade masks the content itself, so it reads on any surface.
 * - Height is measured with a `ResizeObserver`; without one (jsdom) nothing is clipped.
 */
-const CollapsedMessageBody = ({ maxHeight, fadeClassName, children }) => {
+const CollapsedMessageBody = ({ maxHeight, children }) => {
 	const contentRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(false);
 	const [isExpanded, setIsExpanded] = useState(false);
@@ -2216,16 +2210,13 @@ const CollapsedMessageBody = ({ maxHeight, fadeClassName, children }) => {
 	const isClipped = isOverflowing && !isExpanded;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:flex-col tw:items-start tw:gap-1",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "tw:relative tw:w-full tw:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("tw:w-full tw:overflow-hidden", isClipped && "tw:mask-b-from-[calc(100%-3rem)]"),
 			style: isClipped ? { maxHeight } : void 0,
-			children: [/* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsx("div", {
 				ref: contentRef,
 				children
-			}), isClipped && /* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: cn("tw:pointer-events-none tw:absolute tw:inset-x-0 tw:bottom-0 tw:h-12 tw:bg-gradient-to-t tw:to-transparent", fadeClassName)
-			})]
+			})
 		}), isOverflowing && /* @__PURE__ */ jsx(Button, {
 			variant: "inline",
 			size: "small",
@@ -2344,7 +2335,6 @@ const MessageBubble = ({ variant, children, actions, createdAt, timestamp = "too
 	}) : null;
 	const body = collapseAfterPx === void 0 ? children : /* @__PURE__ */ jsx(CollapsedMessageBody, {
 		maxHeight: collapseAfterPx,
-		fadeClassName: variant === "user" ? "tw:from-muted" : "tw:from-background",
 		children
 	});
 	const hasActionsRow = isTimestampVisible || deliveryStatus !== null;
@@ -4595,4 +4585,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 };
 export { ANSWER_SOURCES_VISIBLE, AnswerActions, AnswerSources, AnswerSummary, AttachmentChip, CONTEXT_CHIP_EXPANDABLE_LENGTH, ChatInlineIcon, ChatNotice, CollapsibleStepHeader, ContextChip, FileDownloadChip, FileGallery, InlineStepDetail, InlineStepGroup, InlineStepLabel, JumpToLatest, Markdown, MarkdownTable, MessageBubble, ModeChip, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SourceChip, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName, splitSealedBlocks, withholdOpenTail };
 
-//# sourceMappingURL=AIKit-Cf5plya2.js.map
+//# sourceMappingURL=AIKit-DyysN1kS.js.map