twico-ui 1.27.0 → 1.29.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";
   /**
@@ -1945,6 +1949,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
+  /** #324: controlled highlighted row key for `selectionMode="row"`. When provided, the grid highlights THIS
+   *  row (not its internal state) and reports clicks via `onRowClick` so you update the prop — the same
+   *  controlled/uncontrolled split as `page`. Pass `null` to clear. Lets an external selection (a graph, a
+   *  master/detail pane) drive the row highlight, with scroll-into-view. */
+  activeRowId?: string | number | null;
+  /** #324: scroll the controlled active row into view when `activeRowId` changes. @default true */
+  scrollActiveRowIntoView?: boolean;
   /** Fired when a cell is clicked in "cell" selection mode: (value, row, field). */
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
@@ -2229,7 +2240,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";
   /**
@@ -1945,6 +1949,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
+  /** #324: controlled highlighted row key for `selectionMode="row"`. When provided, the grid highlights THIS
+   *  row (not its internal state) and reports clicks via `onRowClick` so you update the prop — the same
+   *  controlled/uncontrolled split as `page`. Pass `null` to clear. Lets an external selection (a graph, a
+   *  master/detail pane) drive the row highlight, with scroll-into-view. */
+  activeRowId?: string | number | null;
+  /** #324: scroll the controlled active row into view when `activeRowId` changes. @default true */
+  scrollActiveRowIntoView?: boolean;
   /** Fired when a cell is clicked in "cell" selection mode: (value, row, field). */
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
@@ -2229,7 +2240,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

@@ -9137,6 +9137,7 @@ function Datatable({
   onServerChange,
   onColumnVisibilityChange,
   batchActions = [],
+  onRowSelectionChange,
   showExport = false,
   showDensity = false,
   showPivot = false,
@@ -9161,6 +9162,8 @@ function Datatable({
   onCellClick,
   onActiveCellChange,
   onCellSelectionChange,
+  activeRowId,
+  scrollActiveRowIntoView = true,
   enableClipboard = false,
   onCellsCopy,
   onCellsPaste,
@@ -9293,6 +9296,8 @@ function Datatable({
   };
   const [selected, setSelected] = React51__default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__default.useState(null);
+  const activeRowControlled = activeRowId !== void 0;
+  const activeRowVal = activeRowControlled ? activeRowId : activeRow;
   const [activeCell, setActiveCell] = React51__default.useState(null);
   const [anchorCell, setAnchorCell] = React51__default.useState(null);
   const gridId = React51__default.useId();
@@ -10280,7 +10285,7 @@ function Datatable({
     if (selectionMode === "none") return;
     if (e.target.closest("button, a, input, select, .twc-dt__check, .twc-dt__editor-wrap")) return;
     if (selectionMode === "row") {
-      setActiveRow(k);
+      if (!activeRowControlled) setActiveRow(k);
       onRowClick?.(row, k);
       onActiveCellChange?.(null);
     }
@@ -10359,8 +10364,9 @@ function Datatable({
         }
         if (selectionMode === "row") {
           e.preventDefault();
-          setActiveRow(keyOf(leafRows[r2], r2));
-          onRowClick?.(leafRows[r2], keyOf(leafRows[r2], r2));
+          const rk = keyOf(leafRows[r2], r2);
+          if (!activeRowControlled) setActiveRow(rk);
+          onRowClick?.(leafRows[r2], rk);
           return;
         }
         handled = false;
@@ -10389,6 +10395,23 @@ 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]);
+  React51__default.useEffect(() => {
+    if (!activeRowControlled || !scrollActiveRowIntoView || activeRowId == null) return;
+    const el = gridRef.current && gridRef.current.querySelector('.twc-dt__row[data-active="true"]');
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+  }, [activeRowId, activeRowControlled, scrollActiveRowIntoView]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
@@ -10485,11 +10508,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;
@@ -11106,7 +11129,7 @@ function Datatable({
   function renderLeaf(row, ri, pinSide, midIdx) {
     const k = keyOf(row, ri);
     const sel = selected.has(k);
-    const rowActive = selectionMode === "row" && activeRow === k;
+    const rowActive = selectionMode === "row" && activeRowVal === k;
     const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
     const h = rowHeights[k];
     const rowStyle = { ...stickyStyle || {}, ...h ? { height: h } : {} };
@@ -11379,21 +11402,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: [