twico-ui 1.28.0 → 1.29.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.29.0](https://github.com/EncryptionL/twico-ui/compare/v1.28.0...v1.29.0) (2026-08-03)
+
+
+### Features
+
+* **datatable:** controlled active row for selectionMode="row" (activeRowId) ([#324](https://github.com/EncryptionL/twico-ui/issues/324)) ([c118a06](https://github.com/EncryptionL/twico-ui/commit/c118a069d3f91ce9640b39751cab24717569be2b))
+
 # [1.28.0](https://github.com/EncryptionL/twico-ui/compare/v1.27.0...v1.28.0) (2026-08-03)
 
 

package/dist/index.cjs

@@ -9183,6 +9183,8 @@ function Datatable({
   onCellClick,
   onActiveCellChange,
   onCellSelectionChange,
+  activeRowId,
+  scrollActiveRowIntoView = true,
   enableClipboard = false,
   onCellsCopy,
   onCellsPaste,
@@ -9315,6 +9317,8 @@ function Datatable({
   };
   const [selected, setSelected] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__namespace.default.useState(null);
+  const activeRowControlled = activeRowId !== void 0;
+  const activeRowVal = activeRowControlled ? activeRowId : activeRow;
   const [activeCell, setActiveCell] = React51__namespace.default.useState(null);
   const [anchorCell, setAnchorCell] = React51__namespace.default.useState(null);
   const gridId = React51__namespace.default.useId();
@@ -10302,7 +10306,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);
     }
@@ -10381,8 +10385,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;
@@ -10423,6 +10428,11 @@ function Datatable({
     prevRowSelSigRef.current = sig;
     cb(selKeys, selectedRows);
   }, [selKeys, selectedRows]);
+  React51__namespace.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());
   }
@@ -11140,7 +11150,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 } : {} };