@flanksource/clicky-ui 0.3.48 → 0.3.49

package/dist/data/DataTable.cjs

@@ -159,6 +159,8 @@ function DataTableInner({
   isRowClickable,
   getRowHref,
   renderExpandedRow,
+  expandedRowIds,
+  onExpandedRowIdsChange,
   renderCard,
   detailStyle = "row",
   detailDialogTitle,
@@ -237,7 +239,7 @@ function DataTableInner({
     if (boundedFilters) onBoundedFiltersChange == null ? void 0 : onBoundedFiltersChange(updated);
     else setNumberFilters(updated);
   };
-  const [expandedRows, setExpandedRows] = react.useState({});
+  const [localExpandedRows, setLocalExpandedRows] = react.useState({});
   const [detailRow, setDetailRow] = react.useState(null);
   const [localGroupingMode, setLocalGroupingMode] = react.useState(defaultGroupingMode);
   const [localGlobalFilter, setLocalGlobalFilter] = react.useState("");
@@ -1028,7 +1030,8 @@ function DataTableInner({
   const rowStream = react.useMemo(() => {
     const withExpansion = (record) => {
       const row = { kind: "row", record };
-      if (detailStyle !== "row" || !renderExpandedRow || !expandedRows[record.id]) {
+      const expanded = expandedRowIds ? expandedRowIds.includes(record.id) : localExpandedRows[record.id];
+      if (detailStyle !== "row" || !renderExpandedRow || !expanded) {
         return [row];
       }
       const content = renderExpandedRow(record.row, {
@@ -1050,7 +1053,8 @@ function DataTableInner({
     visibleSorted,
     detailStyle,
     renderExpandedRow,
-    expandedRows,
+    expandedRowIds,
+    localExpandedRows,
     effectiveColumns,
     visibleColumns,
     filterActionsByColumn
@@ -1576,7 +1580,7 @@ function DataTableInner({
                             return /* @__PURE__ */ jsxRuntime.jsx("tr", { ...rowHooks, className: "align-top", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border-b border-border/60 p-density-2", children: renderCard(record.row) }) }, record.id);
                           }
                           const href = getRowHref == null ? void 0 : getRowHref(record.row);
-                          const expanded = expandedRows[record.id] ?? false;
+                          const expanded = expandedRowIds ? expandedRowIds.includes(record.id) : localExpandedRows[record.id] ?? false;
                           const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
                             columns: effectiveColumns,
                             visibleColumns,
@@ -1592,10 +1596,16 @@ function DataTableInner({
                           const activateRow = () => {
                             if (selectionClickEnabled) toggleRowSelection(record);
                             if (expandsInline) {
-                              setExpandedRows((current) => ({
-                                ...current,
-                                [record.id]: !current[record.id]
-                              }));
+                              if (expandedRowIds) {
+                                onExpandedRowIdsChange == null ? void 0 : onExpandedRowIdsChange(
+                                  expanded ? expandedRowIds.filter((id) => id !== record.id) : [...expandedRowIds, record.id]
+                                );
+                              } else {
+                                setLocalExpandedRows((current) => ({
+                                  ...current,
+                                  [record.id]: !current[record.id]
+                                }));
+                              }
                             }
                             if (opensDialog) setDetailRow(record);
                             if (rowClickEnabled) onRowClick == null ? void 0 : onRowClick(record.row);