@keboola/design 6.3.0 → 6.5.0

package/README.md

@@ -116,7 +116,7 @@ Worked examples: `src/components/Button/Button.stories.tsx` (click + disabled),
 
 **Coverage so far:** the interactive surface is covered — Button, ButtonInline, Combobox, MultiCombobox, CreatableMultiCombobox, Select, Modal, Sheet, Popover, Popconfirm, DropdownMenu, SplitButton, Tooltip, HoverCard, InfoTooltip, Switch, Checkbox, RadioGroup, Slider, Tabs, PageHeaderTabs, Collapsible, PanelWithDetails, Toast, TextInput, NumberInput, SearchInput, SearchInputWithNavigation, PasswordInput, Textarea, AutoSaveTextarea, AlertWithAction, ListDetail, FilterToolbar. Add a `play()` to new interactive stories by default.
 
-**Known gaps (not yet driven headlessly):** `Command` (cmdk input value isn't reflected on the DOM node under the test runner), `CollapsiblePanel` (collapses via CSS height, so `toBeVisible()` can't see the state change), `Calendar`/`DateInput`/`TimeInput` (day/segment targeting is brittle), `ColorInput`, `Clipboard`/`ClipboardButton` (clipboard API), and `MultiActionButton`/`Tagger` (stories use `alert()` / `onClick` side effects that block a headless run). `ModalForm` currently throws `formContext only works within a formComponent` when its modal opens (`FormBody` is outside `form.AppForm`) — a story-wiring fix, tracked separately. `Search` is deprecated and intentionally untested.
+**Known gaps (not yet driven headlessly):** `Command` (cmdk input value isn't reflected on the DOM node under the test runner), `CollapsiblePanel` (collapses via CSS height, so `toBeVisible()` can't see the state change), `Calendar`/`DateInput`/`TimeInput` (day/segment targeting is brittle), `ColorInput`, `Clipboard`/`ClipboardButton` (clipboard API), and `MultiActionButton` (stories use `alert()` / `onClick` side effects that block a headless run). `ModalForm` currently throws `formContext only works within a formComponent` when its modal opens (`FormBody` is outside `form.AppForm`) — a story-wiring fix, tracked separately. `Search` is deprecated and intentionally untested.
 
 **Timing-sensitive:** `HoverCard` is the only test driven by a real `userEvent.hover` past a 200 ms open delay (its `findByText` carries a raised timeout). It passes headlessly today, but it's the most likely flake if CI is slow — `Tooltip` deliberately opens via keyboard focus to avoid this. Watch it when wiring CI.
 
@@ -136,7 +136,7 @@ Same prerequisites as `test:stories` (build workspace deps, install Chromium). R
 
 **What's covered:** `src/**` component source, excluding stories (`*.stories.tsx`), unit tests (`*.test.{ts,tsx}`), barrels (`index.ts`), type decls, `src/docs/**`, and `src/icons/**` (curated lucide re-exports plus custom SVG marks like `Keboola` — trivial visual surface, no logic to gate).
 
-**What the numbers reflect:** only some story files carry a `play()` interaction test; the rest contribute just their render/smoke path, so branch coverage trails statement coverage. The lowest-covered areas are the interaction-heavy blocks that still lack a `play()` (e.g. `Tagger`). Run `test:stories:coverage` and open `coverage/index.html` for the current per-file numbers — they're not pinned here because they drift with every story and `play()` added.
+**What the numbers reflect:** only some story files carry a `play()` interaction test; the rest contribute just their render/smoke path, so branch coverage trails statement coverage. The lowest-covered areas are the interaction-heavy blocks that still lack a `play()`. Run `test:stories:coverage` and open `coverage/index.html` for the current per-file numbers — they're not pinned here because they drift with every story and `play()` added.
 
 ### Icons
 

package/dist/editors.cjs

@@ -267,6 +267,7 @@ var Tooltip = ({
   placement = "right",
   forceHide = false,
   forceShow = false,
+  delayDuration,
   // trigger props
   triggerAsChild = false
 }) => {
@@ -286,6 +287,7 @@ var Tooltip = ({
     {
       open: !!tooltip && (open || forceShow) && !forceHide,
       onOpenChange: setOpen,
+      delayDuration,
       disableHoverableContent: isActionVariant,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -337,7 +339,8 @@ var HelpBlock = ({ children, className, state = "default", ...rest }) => {
 var icons_exports = {};
 __export(icons_exports, {
   Google: () => Google,
-  Keboola: () => Keboola
+  Keboola: () => Keboola,
+  Microsoft: () => Microsoft
 });
 __reExport(icons_exports, lucide_react_star__namespace);
 var Google = react.forwardRef(
@@ -396,6 +399,7 @@ var Keboola = react.forwardRef(
       width: size,
       height: size,
       viewBox: "0 0 300 512",
+      overflow: "visible",
       fill: color,
       className: cn("lucide", className),
       ...rest,
@@ -407,6 +411,29 @@ var Keboola = react.forwardRef(
   )
 );
 Keboola.displayName = "Keboola";
+var Microsoft = react.forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 21 21",
+      fill: "none",
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
+        children
+      ]
+    }
+  )
+);
+Microsoft.displayName = "Microsoft";
 var variants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -937,14 +964,9 @@ var getLanguageMode = (mode) => {
       return langJson.json();
   }
 };
+var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
 var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cn("tw-text-xs tw-text-muted-foreground", className) });
-var KbdGroup = ({
-  ref,
-  className,
-  children,
-  separator,
-  ...props
-}) => {
+var KbdGroup = ({ ref, className, children, separator, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "kbd",
     {
@@ -1035,7 +1057,7 @@ var CodeEditor = ({
   const commonExtensions = react.useMemo(() => {
     return [
       getLanguageMode(mode),
-      mode === "application/json" && lint.linter(langJson.jsonParseLinter()),
+      shouldLintJson(mode, readOnly) && lint.linter(langJson.jsonParseLinter()),
       withLineWrapping ? view.EditorView.lineWrapping : [],
       CodeMirror.EditorState.languageData.of(() => [
         { autocomplete: completeAny ? autocomplete.completeAnyWord : autocompletions }
@@ -1053,7 +1075,7 @@ var CodeEditor = ({
       autocomplete.autocompletion({ activateOnTyping: completeAny }),
       baseTheme
     ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping, baseTheme]);
+  }, [autocompletions, completeAny, extraKeys, mode, readOnly, withLineWrapping, baseTheme]);
   const extensions = react.useMemo(() => {
     return [
       ...commonExtensions,