twico-ui 1.37.1 → 1.38.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.38.0](https://github.com/EncryptionL/twico-ui/compare/v1.37.2...v1.38.0) (2026-09-22)
+
+
+### Features
+
+* **datatable,tooltip:** toolbar/group-bar controls + rich tooltip labels ([#385](https://github.com/EncryptionL/twico-ui/issues/385), [#386](https://github.com/EncryptionL/twico-ui/issues/386), [#387](https://github.com/EncryptionL/twico-ui/issues/387)) ([a89fb1f](https://github.com/EncryptionL/twico-ui/commit/a89fb1f4885bc51f2383b4c3437eb502aa574a37))
+
+## [1.37.2](https://github.com/EncryptionL/twico-ui/compare/v1.37.1...v1.37.2) (2026-09-18)
+
+
+### Bug Fixes
+
+* **datatable,code:** clipboard paste/copy work outside a secure context ([#380](https://github.com/EncryptionL/twico-ui/issues/380)) ([29aa913](https://github.com/EncryptionL/twico-ui/commit/29aa91382df6df40333ec49132b8883ec6f56b9f)), closes [#343](https://github.com/EncryptionL/twico-ui/issues/343)
+* **datatable,code:** harden [#380](https://github.com/EncryptionL/twico-ui/issues/380) clipboard fix (review follow-ups) ([849c9f8](https://github.com/EncryptionL/twico-ui/commit/849c9f88d331e38d5fd1faf41401b8424e904541))
+
 ## [1.37.1](https://github.com/EncryptionL/twico-ui/compare/v1.37.0...v1.37.1) (2026-09-14)
 
 

package/dist/index.cjs

@@ -7979,7 +7979,11 @@ var TOOLTIP_CSS = `
      (opacity:0) nor a shown bubble can block neighbouring cells/buttons (matches MUI/Radix tooltips). */
   pointer-events: none;
   padding: 6px 10px; border-radius: var(--radius-md);
-  background: var(--color-text); color: var(--color-surface);
+  /* #385: capture the ink as the bubble bg via a private var BEFORE the content wrapper re-scopes
+     --color-text, so a token-driven child (Text/Heading) reads the bubble's fg \u2014 not the page ink,
+     which is this very background \u2014 and the re-scope can't feed back into the bg. */
+  --_tt-bg: var(--color-text); --_tt-fg: var(--color-surface);
+  background: var(--_tt-bg); color: var(--_tt-fg);
   font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
   line-height: 1.3; white-space: normal;
   /* Grow horizontally to max-width, then wrap. max-content sizes to the content (capped by
@@ -7995,7 +7999,13 @@ var TOOLTIP_CSS = `
 .twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
 .twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
 .twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
-.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
+.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--_tt-bg); transform: rotate(45deg); }
+/* #385: re-scope token ink for the label subtree so Text/Heading (which set --color-text as an inline
+   style) render in the bubble's fg instead of the page ink. display:contents adds no box, so the label's
+   own flex/block layout is unchanged; custom properties still inherit through it. */
+.twc-tooltip__content { display: contents; --color-text: var(--_tt-fg);
+  --color-text-muted: color-mix(in srgb, var(--_tt-fg) 72%, var(--_tt-bg));
+  --color-text-subtle: color-mix(in srgb, var(--_tt-fg) 55%, var(--_tt-bg)); }
 /* Arrow tracks the trigger via --_tw-arrow-x/y (px from the tooltip edge) instead of being
    locked to the centre, so it still points at the trigger when the bubble is clamped near a
    viewport edge. Falls back to 50% before measurement / SSR. */
@@ -8120,7 +8130,7 @@ function Tooltip({
           "--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
         },
         children: [
-          label,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__content", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
         ]
       }
@@ -9300,6 +9310,8 @@ function Datatable({
   showExport = false,
   showDensity = false,
   showPivot = false,
+  showColumns,
+  showFilters,
   exportFilename = "export",
   aggregationValues = null,
   disableColumnReorder = false,
@@ -9331,6 +9343,8 @@ function Datatable({
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
   rowGrouping = [],
+  showGroupBar = true,
+  renderGroupLabel,
   rowNumbers = false,
   searchFields = null,
   searchable = true,
@@ -10667,8 +10681,10 @@ function Datatable({
         return;
       }
       if (k === "v") {
-        e.preventDefault();
-        pasteSelection();
+        if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) {
+          e.preventDefault();
+          pasteSelection();
+        }
         return;
       }
     }
@@ -10888,19 +10904,19 @@ function Datatable({
   const copyTypeOf = (col) => col && col.copyType != null ? col.copyType : col && col.type === "number" ? "number" : "text";
   const writeClipboard = (text) => {
     const execFallback = () => {
+      if (typeof document === "undefined") return;
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
       try {
-        if (typeof document !== "undefined") {
-          const ta = document.createElement("textarea");
-          ta.value = text;
-          ta.style.position = "fixed";
-          ta.style.opacity = "0";
-          document.body.appendChild(ta);
-          ta.focus();
-          ta.select();
-          document.execCommand("copy");
-          document.body.removeChild(ta);
-        }
+        document.execCommand("copy");
       } catch {
+      } finally {
+        if (ta.parentNode) ta.parentNode.removeChild(ta);
       }
     };
     try {
@@ -10971,19 +10987,8 @@ function Datatable({
       announceClip(`Copied ${n} cell${n === 1 ? "" : "s"}`, cellRect);
     }
   };
-  const pasteSelection = async () => {
-    if (!cellRect) return;
-    let text = null;
-    try {
-      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) text = await navigator.clipboard.readText();
-    } catch {
-      setClipboardMsg("Paste unavailable \u2014 clipboard permission denied");
-      return;
-    }
-    if (text == null) {
-      setClipboardMsg("Nothing to paste");
-      return;
-    }
+  const applyPastedText = (text) => {
+    if (text == null || !cellRect) return;
     const inApp = clipboardRef.current && clipboardRef.current.tsv === text ? clipboardRef.current : null;
     let matrix;
     if (inApp) matrix = inApp.matrix;
@@ -11028,6 +11033,31 @@ function Datatable({
     const pasteRect = written ? { r0: cellRect.r0, c0: cellRect.c0, r1: Math.min(cellRect.r0 + matrix.length - 1, leafRows.length - 1), c1: Math.min(cellRect.c0 + maxCols - 1, ordered.length - 1) } : null;
     announceClip(`Pasted ${written} cell${written === 1 ? "" : "s"}${skipped ? `, ${skipped} skipped (incompatible column)` : ""}`, pasteRect);
   };
+  const pasteSelection = async () => {
+    if (!cellRect) return;
+    let text = null;
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) text = await navigator.clipboard.readText();
+    } catch {
+      setClipboardMsg("Paste unavailable \u2014 clipboard permission denied");
+      return;
+    }
+    if (text == null) {
+      setClipboardMsg("Nothing to paste");
+      return;
+    }
+    applyPastedText(text);
+  };
+  const onGridPaste = (e) => {
+    if (e.target.closest("input, textarea, select, [contenteditable='true']") || editing) return;
+    if (!e.target.closest(".twc-dt__td[data-r]")) return;
+    if (!(enableClipboard && selectionMode === "cell") || !cellRect) return;
+    if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) return;
+    const text = e.clipboardData ? e.clipboardData.getData("text/plain") : null;
+    if (text == null || text === "") return;
+    e.preventDefault();
+    applyPastedText(text);
+  };
   React51__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
@@ -11094,6 +11124,8 @@ function Datatable({
   }
   const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
   const filterableCols = React51__namespace.default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
+  const columnsShown = showColumns !== void 0 ? showColumns : cols.some((c) => c.hideable) || rowNumbers;
+  const filtersShown = showFilters !== void 0 ? showFilters : filterableCols.length > 0;
   React51__namespace.default.useEffect(() => {
     const el = filterPanelRef.current;
     if (panel !== "filters" || !el || typeof document === "undefined") return void 0;
@@ -11480,6 +11512,7 @@ function Datatable({
   const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasExpandCol ? 1 : 0);
   function renderGroupRow(item) {
     const subs = aggOn ? subtotalText(item.rows) : [];
+    const custom = renderGroupLabel ? renderGroupLabel({ field: item.field, value: item.value, count: item.count, rows: item.rows }) : null;
     return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__group-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__group-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -11491,12 +11524,14 @@ function Datatable({
           onClick: () => toggleGroup(item.key),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__group-chev", "data-open": !item.collapsed || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.chevDown }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__group-name", children: [
-              fieldLabel(item.field),
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__group-val", children: String(item.value) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__group-count", children: item.count })
+            renderGroupLabel ? custom : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__group-name", children: [
+                fieldLabel(item.field),
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__group-val", children: String(item.value) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__group-count", children: item.count })
+            ] })
           ]
         }
       ),
@@ -11861,11 +11896,12 @@ function Datatable({
         /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: diffOnly, onChange: (e) => setDiffOnly(e.target.checked) }),
         diff.toggleLabel != null ? diff.toggleLabel : "Only changed"
       ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      columnsShown ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
           className: "twc-dt__tbtn",
+          "data-tbtn": "columns",
           "data-active": panel === "columns" || void 0,
           "data-tip": "Show or hide columns",
           onClick: (e) => {
@@ -11885,12 +11921,13 @@ function Datatable({
             hidden.size ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tbadge", children: cols.length - hidden.size }) : null
           ]
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      ) : null,
+      filtersShown ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
           className: "twc-dt__tbtn",
+          "data-tbtn": "filters",
           "data-active": panel === "filters" || void 0,
           "data-tip": "Filter rows",
           onClick: (e) => {
@@ -11909,7 +11946,7 @@ function Datatable({
             filters.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tbadge", children: filters.length }) : null
           ]
         }
-      ),
+      ) : null,
       showDensity ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__tbtn", "data-tip": "Change row density", onClick: () => setDensity((d) => d === "compact" ? "standard" : d === "standard" ? "comfortable" : "compact"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.density }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tlabel", children: density[0].toUpperCase() + density.slice(1) })
@@ -12006,7 +12043,7 @@ function Datatable({
         }, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }) : null
       ] }) : null
     ] }),
-    !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
+    !pivotActive && activeGroupBy.length && showGroupBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.group }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__groupbar-label", children: "Grouped by" }),
       activeGroupBy.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__groupchip", children: [
@@ -12043,6 +12080,7 @@ function Datatable({
             "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
+            onPaste: onGridPaste,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
                 hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
@@ -12480,13 +12518,13 @@ function Datatable({
                   " Sort descending"
                 ] })
               ] }) : null,
-              c.filterable ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", onClick: (e) => {
+              c.filterable && filtersShown ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", onClick: (e) => {
                 addFilter(c.field);
                 setColMenu(null);
                 closeMenu();
                 restoreTriggerFocus();
                 setPanel("filters");
-                openPanel(document.querySelector(".twc-dt__toolbar .twc-dt__tbtn:nth-child(2)"), "left", DT_FILTER_PANEL_W);
+                openPanel(document.querySelector('.twc-dt__toolbar .twc-dt__tbtn[data-tbtn="filters"]'), "left", DT_FILTER_PANEL_W);
               }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.filter }),
                 " Filter"
@@ -12559,7 +12597,7 @@ function Datatable({
                 " ",
                 wrapped.has(c.field) ? "Unwrap text" : "Wrap text"
               ] }) : null,
-              c.hideable ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", onClick: () => {
+              c.hideable && columnsShown ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", onClick: () => {
                 setHidden((h) => new Set(h).add(c.field));
                 close();
               }, children: [
@@ -19117,14 +19155,36 @@ function Code({
   const timerRef = React51__namespace.default.useRef(null);
   React51__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
-    if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
-    navigator.clipboard.writeText(text).then(() => {
+    const flash = () => {
       setCopied(true);
       clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => setCopied(false), 2e3);
-    }).catch(() => {
-    });
+    };
+    const execFallback = () => {
+      if (typeof document === "undefined") return;
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      try {
+        if (document.execCommand("copy")) flash();
+      } catch {
+      } finally {
+        if (ta.parentNode) ta.parentNode.removeChild(ta);
+      }
+    };
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(flash).catch(execFallback);
+        return;
+      }
+    } catch {
+    }
+    execFallback();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref: rootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
     __twcStyles,