twico-ui 1.26.0 → 1.27.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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;
@@ -9176,6 +9183,8 @@ function Datatable({
   onActiveCellChange,
   onCellSelectionChange,
   enableClipboard = false,
+  onCellsCopy,
+  onCellsPaste,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -10513,6 +10522,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 +10601,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 +10613,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 +10670,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 +11207,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 +11228,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,
@@ -11561,6 +11591,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",
       {