twico-ui 1.26.0 → 1.27.0

package/dist/index.d.cts

@@ -1956,8 +1956,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  TSV, Ctrl/Cmd+X cuts (copy then clear), Ctrl/Cmd+V pastes onto the target rectangle from the active
    *  cell. Paste is format-restricted by column `copyType` (incompatible cells are skipped) and commits
    *  through `onRowUpdate`/`onRowsChange` in one batched change; outcomes are announced via `aria-live`.
-   *  @default false */
+   *  Copy/cut/paste also show a brief **visible** in-grid confirmation toast + a flash on the affected cells
+   *  (#320), so sighted users get feedback too. @default false */
   enableClipboard?: boolean;
+  /** #320: fired on a clipboard copy/cut with the copied cells (row-major `{key,field}[]`) and `{ cut }`.
+   *  Use it to surface your own toast / integrate an app notification system. */
+  onCellsCopy?: (cells: Array<{ key: string | number; field: string }>, meta: { cut: boolean }) => void;
+  /** #320: fired after a clipboard paste with the outcome — `written` cells committed, `skipped` cells
+   *  rejected (read-only or incompatible `copyType`). */
+  onCellsPaste?: (result: { written: number; skipped: number }) => void;
   /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
    *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
    *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */

package/dist/index.d.ts

@@ -1956,8 +1956,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  TSV, Ctrl/Cmd+X cuts (copy then clear), Ctrl/Cmd+V pastes onto the target rectangle from the active
    *  cell. Paste is format-restricted by column `copyType` (incompatible cells are skipped) and commits
    *  through `onRowUpdate`/`onRowsChange` in one batched change; outcomes are announced via `aria-live`.
-   *  @default false */
+   *  Copy/cut/paste also show a brief **visible** in-grid confirmation toast + a flash on the affected cells
+   *  (#320), so sighted users get feedback too. @default false */
   enableClipboard?: boolean;
+  /** #320: fired on a clipboard copy/cut with the copied cells (row-major `{key,field}[]`) and `{ cut }`.
+   *  Use it to surface your own toast / integrate an app notification system. */
+  onCellsCopy?: (cells: Array<{ key: string | number; field: string }>, meta: { cut: boolean }) => void;
+  /** #320: fired after a clipboard paste with the outcome — `written` cells committed, `skipped` cells
+   *  rejected (read-only or incompatible `copyType`). */
+  onCellsPaste?: (result: { written: number; skipped: number }) => void;
   /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
    *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
    *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */

package/dist/index.mjs

@@ -8138,7 +8138,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;
@@ -9155,6 +9162,8 @@ function Datatable({
   onActiveCellChange,
   onCellSelectionChange,
   enableClipboard = false,
+  onCellsCopy,
+  onCellsPaste,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -10492,6 +10501,21 @@ function Datatable({
   }
   const [clipboardMsg, setClipboardMsg] = React51__default.useState("");
   const clipboardRef = React51__default.useRef(null);
+  const [clipFx, setClipFx] = React51__default.useState(null);
+  const clipFxTimer = React51__default.useRef(null);
+  const onCellsCopyRef = React51__default.useRef(onCellsCopy);
+  onCellsCopyRef.current = onCellsCopy;
+  const onCellsPasteRef = React51__default.useRef(onCellsPaste);
+  onCellsPasteRef.current = onCellsPaste;
+  React51__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 = () => {
@@ -10556,6 +10580,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;
@@ -10567,9 +10592,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 () => {
@@ -10624,7 +10649,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__default.useEffect(() => {
     if (!editing) return;
@@ -11158,6 +11186,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;
@@ -11178,6 +11207,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,
@@ -11540,6 +11570,7 @@ function Datatable({
     ] }) : null,
     /* @__PURE__ */ jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
     /* @__PURE__ */ jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: clipboardMsg }),
+    clipFx ? /* @__PURE__ */ jsx("div", { className: "twc-dt__clip-toast", "aria-hidden": "true", children: clipFx.msg }) : null,
     pivotActive ? renderPivot() : /* @__PURE__ */ jsx(
       "div",
       {