twico-ui 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.35.0](https://github.com/EncryptionL/twico-ui/compare/v1.34.0...v1.35.0) (2026-08-28)
+
+
+### Bug Fixes
+
+* **datatable:** harden [#359](https://github.com/EncryptionL/twico-ui/issues/359) row-tree (server no-refire, child edit, numbering, cycle) ([7c0c70b](https://github.com/EncryptionL/twico-ui/commit/7c0c70b11b1689a8f60912df3a9cbcc3a2c36a8c)), closes [#350](https://github.com/EncryptionL/twico-ui/issues/350) [#350](https://github.com/EncryptionL/twico-ui/issues/350)
+
+
+### Features
+
+* **datatable:** server-mode lazy row-tree — getRowCanExpand/getSubRows/getRowDepth ([15c7c76](https://github.com/EncryptionL/twico-ui/commit/15c7c767212940c96d5f031466bd251ee4cc83cb)), closes [#350](https://github.com/EncryptionL/twico-ui/issues/350) [#350](https://github.com/EncryptionL/twico-ui/issues/350) [#350](https://github.com/EncryptionL/twico-ui/issues/350) [#359](https://github.com/EncryptionL/twico-ui/issues/359)
+
 # [1.34.0](https://github.com/EncryptionL/twico-ui/compare/v1.33.1...v1.34.0) (2026-08-14)
 
 

package/dist/index.cjs

@@ -9347,6 +9347,13 @@ function Datatable({
   renderRowDetail,
   expandedRowIds,
   onExpandedRowsChange,
+  // #359: server-mode lazy row-tree — `getRowCanExpand(row)` draws the same leading chevron on parent DATA
+  // rows (independent of renderRowDetail); expanding reveals CHILD data rows in the SAME columns rather than a
+  // panel. In server mode the host returns children inline (the expanded set is folded into onServerChange);
+  // in client mode `getSubRows(row)` supplies them. `getRowDepth(row)` indents nested rows so they read as a tree.
+  getRowCanExpand,
+  getRowDepth,
+  getSubRows,
   className = "",
   ...rest
 }) {
@@ -9559,6 +9566,7 @@ function Datatable({
     () => new Set(expandControlled ? expandedRowIds : internalExpanded),
     [expandControlled, expandedRowIds, internalExpanded]
   );
+  const expandedKey = React51__namespace.default.useMemo(() => JSON.stringify([...expandedSet].sort()), [expandedSet]);
   const [pinnedRows, setPinnedRows] = React51__namespace.default.useState({ top: [], bottom: [] });
   const [headH, setHeadH] = React51__namespace.default.useState(41);
   const theadRef = React51__namespace.default.useRef(null);
@@ -9961,7 +9969,10 @@ function Datatable({
   const NUM_W = 56;
   const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
   const hasRowDetail = typeof renderRowDetail === "function";
-  const EXP_W = hasRowDetail ? 44 : 0;
+  const hasRowTree = typeof getRowCanExpand === "function";
+  const hasExpandCol = hasRowDetail || hasRowTree;
+  const treeExpandedKey = hasRowTree ? expandedKey : "";
+  const EXP_W = hasExpandCol ? 44 : 0;
   const numLeft = EXP_W + CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
   const visLeft = React51__namespace.default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
@@ -10034,6 +10045,40 @@ function Datatable({
   React51__namespace.default.useEffect(() => {
     if (pageVal > totalPages - 1) commitPage(0);
   }, [totalPages]);
+  const treeRows = React51__namespace.default.useMemo(() => {
+    if (serverMode || typeof getSubRows !== "function") return null;
+    const out = [];
+    const seen2 = /* @__PURE__ */ new Set();
+    const walk = (r2, d) => {
+      const key = keyOf(r2);
+      if (seen2.has(key)) return;
+      seen2.add(key);
+      out.push({ row: r2, depth: d });
+      if (expandedSet.has(key)) for (const c of getSubRows(r2) || []) walk(c, d + 1);
+    };
+    for (const r2 of paged) walk(r2, 0);
+    return out;
+  }, [serverMode, getSubRows, paged, expandedSet, keyOf]);
+  const depthByKey = React51__namespace.default.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    if (treeRows) for (const t of treeRows) m.set(keyOf(t.row), t.depth);
+    return m;
+  }, [treeRows, keyOf]);
+  const treeSeqByKey = React51__namespace.default.useMemo(() => {
+    if (!treeRows) return null;
+    const m = /* @__PURE__ */ new Map();
+    const seen2 = /* @__PURE__ */ new Set();
+    let n = 0;
+    const walk = (r2) => {
+      const key = keyOf(r2);
+      if (seen2.has(key)) return;
+      seen2.add(key);
+      m.set(key, n++);
+      if (expandedSet.has(key)) for (const c of getSubRows(r2) || []) walk(c);
+    };
+    for (const r2 of processed) walk(r2);
+    return m;
+  }, [treeRows, processed, expandedSet, getSubRows, keyOf]);
   const activeGroupBy = React51__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
@@ -10084,7 +10129,7 @@ function Datatable({
     };
     return build(paged, 0, "");
   }, [activeGroupBy, collapsed, paged, ordered, aggOn]);
-  const leafRows = displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : paged;
+  const leafRows = displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : treeRows ? treeRows.map((t) => t.row) : paged;
   function toggleGroup(key) {
     setCollapsed((s) => {
       const n = new Set(s);
@@ -10336,12 +10381,14 @@ function Datatable({
         // #303: "and" (default) | "or" — the server groups its WHERE accordingly
         quickFilter: quick.trim(),
         visibleColumns,
-        hiddenColumns
+        hiddenColumns,
         // #191: server can project only the visible columns
+        ...hasRowTree ? { expanded: [...expandedSet] } : null
+        // #359: only a row-tree folds expanded parents in
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns, treeExpandedKey]);
   const onColVisRef = React51__namespace.default.useRef(onColumnVisibilityChange);
   onColVisRef.current = onColumnVisibilityChange;
   const lastVisibleKey = React51__namespace.default.useRef(null);
@@ -10715,12 +10762,12 @@ function Datatable({
       next = next === "" ? null : Number(next);
       if (Number.isNaN(next)) next = null;
     }
-    const row = paged.find((r2, i) => keyOf(r2, i) === editing.key);
+    const row = leafRows.find((r2, i) => keyOf(r2, i) === editing.key);
     setEditing(null);
     if (!row || row[editing.field] === next) return;
     const updated = { ...row, [editing.field]: next };
     onRowUpdate?.(updated, row, editing.field);
-    if (onRowsChange) {
+    if (onRowsChange && rows.some((r2, i) => keyOf(r2, i) === editing.key)) {
       onRowsChange(rows.map((r2, i) => keyOf(r2, i) === editing.key ? updated : r2));
     }
   }
@@ -10849,20 +10896,25 @@ function Datatable({
   };
   const writeCellPatches = (patchByKey) => {
     if (!patchByKey.size) return 0;
-    const changed = [];
-    const nextAll = rows.map((r2, i) => {
-      const k = keyOf(r2, i);
-      const patch = patchByKey.get(k);
-      if (!patch) return r2;
+    let count = 0;
+    leafRows.forEach((r2, i) => {
+      const patch = patchByKey.get(keyOf(r2, i));
+      if (!patch) return;
       const updated = { ...r2, ...patch };
-      changed.push([updated, r2, patch]);
-      return updated;
+      for (const f of Object.keys(patch)) onRowUpdate?.(updated, r2, f);
+      count++;
     });
-    changed.forEach(([updated, orig, patch]) => {
-      for (const f of Object.keys(patch)) onRowUpdate?.(updated, orig, f);
-    });
-    if (onRowsChange && changed.length) onRowsChange(nextAll);
-    return changed.length;
+    if (onRowsChange) {
+      let anyTop = false;
+      const nextAll = rows.map((r2, i) => {
+        const patch = patchByKey.get(keyOf(r2, i));
+        if (!patch) return r2;
+        anyTop = true;
+        return { ...r2, ...patch };
+      });
+      if (anyTop) onRowsChange(nextAll);
+    }
+    return count;
   };
   const rectCells = () => {
     if (!cellRect) return null;
@@ -11409,7 +11461,7 @@ function Datatable({
   const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
   const visibleColCount = manageableCols.filter((c) => !effectiveHidden.has(c.field)).length;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
-  const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasRowDetail ? 1 : 0);
+  const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasExpandCol ? 1 : 0);
   function renderGroupRow(item) {
     const subs = aggOn ? subtotalText(item.rows) : [];
     return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__group-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__group-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: [
@@ -11464,8 +11516,10 @@ function Datatable({
     const k = keyOf(row, ri);
     const sel = selected.has(k);
     const detail = hasRowDetail && !pinSide ? renderRowDetail(row) : null;
-    const expandable = detail != null;
+    const canTreeExpand = hasRowTree && !pinSide && !!getRowCanExpand(row);
+    const expandable = detail != null || canTreeExpand;
     const open = expandable && expandedSet.has(k);
+    const depth = getRowDepth ? getRowDepth(row) || 0 : depthByKey.get(k) || 0;
     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];
@@ -11479,7 +11533,7 @@ function Datatable({
         {
           className: "twc-dt__row",
           role: "row",
-          "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
+          "aria-rowindex": treeSeqByKey ? treeSeqByKey.get(k) + 2 : (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
           "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
           "data-op": row.__diffop || void 0,
           "data-selected": sel || void 0,
@@ -11513,7 +11567,7 @@ function Datatable({
           onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
           onClick: (e) => handleRowClick(e, k, row),
           children: [
-            hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W }, children: expandable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__expand-btn", "aria-expanded": open, "aria-controls": open ? `${gridId}-detail-${ri}` : void 0, "aria-label": open ? "Collapse row" : "Expand row", onClick: (e) => {
+            hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W }, children: expandable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__expand-btn", "aria-expanded": open, "aria-controls": open && detail != null ? `${gridId}-detail-${ri}` : void 0, "aria-label": open ? "Collapse row" : "Expand row", onClick: (e) => {
               e.stopPropagation();
               toggleRowDetail(k);
             }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__expand-chev", "data-open": open || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.chevDown }) }) }) : null }) : null,
@@ -11542,7 +11596,7 @@ function Datatable({
               ] }),
               rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
             ] }) : null,
-            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
+            showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: treeSeqByKey ? treeSeqByKey.get(k) + 1 : typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
             ordered.map((c, ci) => {
               const st = stickyOf(c.field);
               const val = getColVal(c, row);
@@ -11565,7 +11619,7 @@ function Datatable({
                   role: "gridcell",
                   "data-r": ri,
                   "data-c": ci,
-                  "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
+                  "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0) + (hasExpandCol ? 1 : 0),
                   tabIndex: focus.r === ri && focus.c === ci ? 0 : -1,
                   "aria-selected": cellSelected || void 0,
                   "data-num": c.type === "number" || void 0,
@@ -11578,7 +11632,7 @@ function Datatable({
                   "data-wrap": effectiveWrapped.has(c.field) || void 0,
                   "data-pin": st.pin,
                   "data-pin-edge": st.edge,
-                  style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
+                  style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null, ...ci === 0 && depth ? { paddingInlineStart: `calc(12px + ${depth * 20}px)` } : null },
                   "data-ovtext": cellTitle,
                   onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
                   onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
@@ -11630,7 +11684,7 @@ function Datatable({
           ]
         }
       ),
-      open ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__detail-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { id: `${gridId}-detail-${ri}`, className: "twc-dt__detail-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: detail }) }) : null
+      open && detail != null ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "twc-dt__detail-row", role: "row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { id: `${gridId}-detail-${ri}`, className: "twc-dt__detail-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: detail }) }) : null
     ] }, (pinSide ? "p-" : "") + k);
   }
   function renderPivot() {
@@ -11967,15 +12021,15 @@ function Datatable({
             ref: gridRef,
             role: "grid",
             "aria-label": ariaLabelAttr || ariaLabel,
-            "aria-rowcount": totalRows + 1,
-            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
+            "aria-rowcount": (treeSeqByKey ? treeSeqByKey.size : totalRows) + 1,
+            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0) + (hasExpandCol ? 1 : 0),
             "aria-multiselectable": selectionMode === "cell" || void 0,
             "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -12152,7 +12206,7 @@ function Datatable({
                 })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: EXP_W, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
                 showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
                 ordered.map((c, ci) => {
@@ -12175,7 +12229,7 @@ function Datatable({
                 pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
               ] }) }),
               hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-                hasRowDetail ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W } }) : null,
                 showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
                 ordered.map((c) => {