twico-ui 1.26.0 → 1.28.0

package/dist/index.d.cts

@@ -1843,6 +1843,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction<T>[];
+  /** #322: fired when the checkbox row selection changes — `(keys, rows)`. The row-mode analogue of
+   *  `onCellSelectionChange`, so a consumer can track the selection and drive a batch action's own
+   *  `disabled`/`hidden` (which also accept predicates). */
+  onRowSelectionChange?: (keys: Array<string | number>, rows: T[]) => void;
   /** Row height preset. With `showDensity`, the toolbar density button cycles it locally; changing this prop re-applies it. @default "comfortable" */
   density?: "compact" | "standard" | "comfortable";
   /**
@@ -1956,8 +1960,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 */
@@ -2222,7 +2233,12 @@ interface DatatableBatchAction<T = any> {
   ) => void;
   /** Render in danger color. */
   danger?: boolean;
-  disabled?: boolean;
+  /** #322: disable the action — a static boolean, or a predicate evaluated against the current selection so
+   *  an action that only applies to a subset of the selected rows can grey out when it doesn't apply. */
+  disabled?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
+  /** #322: hide the action entirely when the predicate returns true (e.g. `(_, rows) => rows.every(r => r.isGroup)`
+   *  drops "Mark as new thread" when only group rows are selected). A static `true` always hides it. */
+  hidden?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
 }
 
 declare function Datatable<T = any>(props: DatatableProps<T>): React.JSX.Element;

package/dist/index.d.ts

@@ -1843,6 +1843,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction<T>[];
+  /** #322: fired when the checkbox row selection changes — `(keys, rows)`. The row-mode analogue of
+   *  `onCellSelectionChange`, so a consumer can track the selection and drive a batch action's own
+   *  `disabled`/`hidden` (which also accept predicates). */
+  onRowSelectionChange?: (keys: Array<string | number>, rows: T[]) => void;
   /** Row height preset. With `showDensity`, the toolbar density button cycles it locally; changing this prop re-applies it. @default "comfortable" */
   density?: "compact" | "standard" | "comfortable";
   /**
@@ -1956,8 +1960,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 */
@@ -2222,7 +2233,12 @@ interface DatatableBatchAction<T = any> {
   ) => void;
   /** Render in danger color. */
   danger?: boolean;
-  disabled?: boolean;
+  /** #322: disable the action — a static boolean, or a predicate evaluated against the current selection so
+   *  an action that only applies to a subset of the selected rows can grey out when it doesn't apply. */
+  disabled?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
+  /** #322: hide the action entirely when the predicate returns true (e.g. `(_, rows) => rows.every(r => r.isGroup)`
+   *  drops "Mark as new thread" when only group rows are selected). A static `true` always hides it. */
+  hidden?: boolean | ((keys: Array<string | number>, rows: T[]) => boolean);
 }
 
 declare function Datatable<T = any>(props: DatatableProps<T>): React.JSX.Element;

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;
@@ -9130,6 +9137,7 @@ function Datatable({
   onServerChange,
   onColumnVisibilityChange,
   batchActions = [],
+  onRowSelectionChange,
   showExport = false,
   showDensity = false,
   showPivot = false,
@@ -9155,6 +9163,8 @@ function Datatable({
   onActiveCellChange,
   onCellSelectionChange,
   enableClipboard = false,
+  onCellsCopy,
+  onCellsPaste,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -10380,6 +10390,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__default.useMemo(() => rows.filter((r2, i) => selected.has(keyOf(r2, i))), [rows, selected]);
+  const selKeys = React51__default.useMemo(() => [...selected], [selected]);
+  const onRowSelRef = React51__default.useRef(onRowSelectionChange);
+  onRowSelRef.current = onRowSelectionChange;
+  const prevRowSelSigRef = React51__default.useRef("");
+  React51__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());
   }
@@ -10476,11 +10498,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;
@@ -10492,6 +10514,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 +10593,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 +10605,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 +10662,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 +11199,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 +11220,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,
@@ -11349,21 +11392,26 @@ function Datatable({
             /* @__PURE__ */ jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
-          batchActions.map((a, i) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { className: "twc-dt__diff-summary", "aria-label": "Diff summary", children: [
@@ -11540,6 +11588,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",
       {