twico-ui 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.28.0](https://github.com/EncryptionL/twico-ui/compare/v1.27.0...v1.28.0) (2026-08-03)
+
+
+### Features
+
+* **datatable:** selection-aware batch actions (predicate disabled/hidden) + onRowSelectionChange ([#322](https://github.com/EncryptionL/twico-ui/issues/322)) ([33a1c36](https://github.com/EncryptionL/twico-ui/commit/33a1c36340e36cf0c9cc763cda7ed5d26fd46baa))
+
+# [1.27.0](https://github.com/EncryptionL/twico-ui/compare/v1.26.0...v1.27.0) (2026-08-03)
+
+
+### Features
+
+* **datatable:** visible clipboard copy/cut feedback + onCellsCopy/onCellsPaste ([#320](https://github.com/EncryptionL/twico-ui/issues/320)) ([cff0aaa](https://github.com/EncryptionL/twico-ui/commit/cff0aaa1d31241c3772bc7c38c975d5033a9e6f7))
+
 # [1.26.0](https://github.com/EncryptionL/twico-ui/compare/v1.25.0...v1.26.0) (2026-08-03)
 
 

package/dist/index.cjs

@@ -8159,7 +8159,14 @@ var DT_CSS = `
   /* Stay inside the parent even in a flex/grid container: min-width:0 lets a wide
      grid shrink (default min-width:auto would force it to its content width and
      overflow), so the internal __scroll handles horizontal scrolling. */
-  width: 100%; min-width: 0; max-width: 100%; }
+  width: 100%; min-width: 0; max-width: 100%; position: relative; }
+/* #320: visible clipboard feedback \u2014 a transient in-grid toast + a brief flash on the copied/pasted cells,
+   alongside the SR-only aria-live message (position: relative on the root anchors the toast; it does NOT
+   create a containing block for the position: fixed popovers, so those stay viewport-anchored). */
+.twc-dt__clip-toast { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 6; background: var(--color-text); color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 6px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); pointer-events: none; }
+@keyframes twc-dt-copyflash { from { box-shadow: inset 0 0 0 2px var(--color-primary); } to { box-shadow: inset 0 0 0 2px transparent; } }
+.twc-dt__td[data-copied="true"] { animation: twc-dt-copyflash 1.3s var(--ease-standard); }
+@media (prefers-reduced-motion: reduce) { .twc-dt__td[data-copied="true"] { animation: none; } }
 
 /* Toolbar */
 .twc-dt__toolbar { position: relative; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
@@ -9151,6 +9158,7 @@ function Datatable({
   onServerChange,
   onColumnVisibilityChange,
   batchActions = [],
+  onRowSelectionChange,
   showExport = false,
   showDensity = false,
   showPivot = false,
@@ -9176,6 +9184,8 @@ function Datatable({
   onActiveCellChange,
   onCellSelectionChange,
   enableClipboard = false,
+  onCellsCopy,
+  onCellsPaste,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -10401,6 +10411,18 @@ function Datatable({
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
   }, [leafRows.length, ordered.length, pageVal]);
   const selectedRows = React51__namespace.default.useMemo(() => rows.filter((r2, i) => selected.has(keyOf(r2, i))), [rows, selected]);
+  const selKeys = React51__namespace.default.useMemo(() => [...selected], [selected]);
+  const onRowSelRef = React51__namespace.default.useRef(onRowSelectionChange);
+  onRowSelRef.current = onRowSelectionChange;
+  const prevRowSelSigRef = React51__namespace.default.useRef("");
+  React51__namespace.default.useEffect(() => {
+    const cb = onRowSelRef.current;
+    if (!cb) return;
+    const sig = selKeys.join(",");
+    if (sig === prevRowSelSigRef.current) return;
+    prevRowSelSigRef.current = sig;
+    cb(selKeys, selectedRows);
+  }, [selKeys, selectedRows]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
@@ -10497,11 +10519,11 @@ function Datatable({
       }
       patch[c.field] = v;
     });
-    const selKeys = new Set(selected);
+    const selKeys2 = new Set(selected);
     const changedRows = [];
     const nextAll = rows.map((r2, i) => {
       const k = keyOf(r2, i);
-      if (!selKeys.has(k)) return r2;
+      if (!selKeys2.has(k)) return r2;
       const updated = { ...r2, ...patch };
       changedRows.push(updated);
       return updated;
@@ -10513,6 +10535,21 @@ function Datatable({
   }
   const [clipboardMsg, setClipboardMsg] = React51__namespace.default.useState("");
   const clipboardRef = React51__namespace.default.useRef(null);
+  const [clipFx, setClipFx] = React51__namespace.default.useState(null);
+  const clipFxTimer = React51__namespace.default.useRef(null);
+  const onCellsCopyRef = React51__namespace.default.useRef(onCellsCopy);
+  onCellsCopyRef.current = onCellsCopy;
+  const onCellsPasteRef = React51__namespace.default.useRef(onCellsPaste);
+  onCellsPasteRef.current = onCellsPaste;
+  React51__namespace.default.useEffect(() => () => {
+    if (clipFxTimer.current) clearTimeout(clipFxTimer.current);
+  }, []);
+  const announceClip = (msg, rect) => {
+    setClipboardMsg(msg);
+    setClipFx({ msg, rect: rect || null });
+    if (clipFxTimer.current) clearTimeout(clipFxTimer.current);
+    clipFxTimer.current = setTimeout(() => setClipFx(null), 1600);
+  };
   const copyTypeOf = (col) => col && col.copyType != null ? col.copyType : col && col.type === "number" ? "number" : "text";
   const writeClipboard = (text) => {
     const execFallback = () => {
@@ -10577,6 +10614,7 @@ function Datatable({
     clipboardRef.current = { tsv, colTypes: grid[0].map((cell) => copyTypeOf(cell.col)), matrix: grid.map((line) => line.map((cell) => cell.value)) };
     writeClipboard(tsv);
     const n = grid.reduce((a, line) => a + line.length, 0);
+    onCellsCopyRef.current?.(grid.flatMap((line) => line.map((cell) => ({ key: cell.key, field: cell.field }))), { cut: !!cut });
     if (cut) {
       const patchByKey = /* @__PURE__ */ new Map();
       let clearable = 0;
@@ -10588,9 +10626,9 @@ function Datatable({
         patchByKey.set(cell.key, p);
       }
       writeCellPatches(patchByKey);
-      setClipboardMsg(`Cut ${clearable} cell${clearable === 1 ? "" : "s"}${clearable < n ? `, ${n - clearable} read-only kept` : ""}`);
+      announceClip(`Cut ${clearable} cell${clearable === 1 ? "" : "s"}${clearable < n ? `, ${n - clearable} read-only kept` : ""}`, cellRect);
     } else {
-      setClipboardMsg(`Copied ${n} cell${n === 1 ? "" : "s"}`);
+      announceClip(`Copied ${n} cell${n === 1 ? "" : "s"}`, cellRect);
     }
   };
   const pasteSelection = async () => {
@@ -10645,7 +10683,10 @@ function Datatable({
       }
     }
     writeCellPatches(patchByKey);
-    setClipboardMsg(`Pasted ${written} cell${written === 1 ? "" : "s"}${skipped ? `, ${skipped} skipped (incompatible column)` : ""}`);
+    onCellsPasteRef.current?.({ written, skipped });
+    const maxCols = matrix.reduce((a, m) => Math.max(a, m.length), 0);
+    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);
   };
   React51__namespace.default.useEffect(() => {
     if (!editing) return;
@@ -11179,6 +11220,7 @@ function Datatable({
             const isEditing = editing && editing.key === k && editing.field === c.field;
             const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
             const cellSelected = selectionMode === "cell" && cellRect && ri >= cellRect.r0 && ri <= cellRect.r1 && ci >= cellRect.c0 && ci <= cellRect.c1;
+            const cellFlash = clipFx && clipFx.rect && ri >= clipFx.rect.r0 && ri <= clipFx.rect.r1 && ci >= clipFx.rect.c0 && ci <= clipFx.rect.c1;
             const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
             const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
             const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
@@ -11199,6 +11241,7 @@ function Datatable({
                 "data-editing": isEditing || void 0,
                 "data-cell-active": cellActive || void 0,
                 "data-cell-selected": cellSelected || void 0,
+                "data-copied": cellFlash || void 0,
                 "data-wrap": wrapped.has(c.field) || void 0,
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
@@ -11370,21 +11413,26 @@ function Datatable({
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
-          batchActions.map((a, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "twc-dt__batch-btn",
-              "data-danger": a.danger || void 0,
-              disabled: a.disabled,
-              onClick: (e) => a.onClick?.([...selected], selectedRows, clearSelection, { anchorEl: e.currentTarget }),
-              children: [
-                a.icon,
-                a.label
-              ]
-            },
-            i
-          ))
+          batchActions.map((a, i) => {
+            const isHidden = typeof a.hidden === "function" ? a.hidden(selKeys, selectedRows) : !!a.hidden;
+            if (isHidden) return null;
+            const isDisabled = typeof a.disabled === "function" ? a.disabled(selKeys, selectedRows) : !!a.disabled;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: "twc-dt__batch-btn",
+                "data-danger": a.danger || void 0,
+                disabled: isDisabled,
+                onClick: (e) => a.onClick?.(selKeys, selectedRows, clearSelection, { anchorEl: e.currentTarget }),
+                children: [
+                  a.icon,
+                  a.label
+                ]
+              },
+              i
+            );
+          })
         ] })
       ] }) : null,
       isDiff && diff.showSummary !== false ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__diff-summary", "aria-label": "Diff summary", children: [
@@ -11561,6 +11609,7 @@ function Datatable({
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: clipboardMsg }),
+    clipFx ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__clip-toast", "aria-hidden": "true", children: clipFx.msg }) : null,
     pivotActive ? renderPivot() : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {