@skygraph/react 0.5.3 → 0.6.4

package/dist/table.cjs

@@ -1741,14 +1741,11 @@ function TableBody(props) {
       onContextMenu({ x: e.clientX, y: e.clientY, items });
     }
   };
-  const handleCellCopy = (0, import_react9.useCallback)(
-    async (rowId, colKey, value) => {
-      await copyToClipboard(String(value ?? ""));
-      setCopiedCell(`${rowId}:${colKey}`);
-      setTimeout(() => setCopiedCell(null), 1500);
-    },
-    []
-  );
+  const handleCellCopy = (0, import_react9.useCallback)(async (rowId, colKey, value) => {
+    await copyToClipboard(String(value ?? ""));
+    setCopiedCell(`${rowId}:${colKey}`);
+    setTimeout(() => setCopiedCell(null), 1500);
+  }, []);
   if (flatRows.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
@@ -1813,7 +1810,13 @@ function TableBody(props) {
               {
                 className: "sg-table-td sg-table-cell-drag-handle",
                 role: "cell",
-                style: { cursor: "grab", userSelect: "none", display: "flex", alignItems: "center", justifyContent: "center" },
+                style: {
+                  cursor: "grab",
+                  userSelect: "none",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
                 children: "\u283F"
               }
             ),
@@ -1825,10 +1828,24 @@ function TableBody(props) {
                 role: "cell",
                 onClick: (e) => {
                   e.stopPropagation();
-                  onSelectRow(row.id, row.data);
+                  if (e.target === e.currentTarget) {
+                    onSelectRow(row.id, row.data);
+                  }
                 },
-                children: rowSelection.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "radio", checked: !!isSelected, readOnly: true }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { checked: !!isSelected, onChange: () => {
-                } })
+                children: rowSelection.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  {
+                    type: "radio",
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Checkbox,
+                  {
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                )
               }
             ),
             expandable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "sg-table-td sg-table-cell-expand", role: "cell", children: canExpand && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1851,10 +1868,8 @@ function TableBody(props) {
               const isFocused = keyboardNavigation && focusedCell?.row === rowIdx && focusedCell?.col === colIndex;
               const isCopied = copiedCell === cellKey;
               const cellStyle = { ...fixedStyle(col) };
-              if (span?.colSpan && span.colSpan > 1)
-                cellStyle.gridColumn = `span ${span.colSpan}`;
-              if (span?.rowSpan && span.rowSpan > 1)
-                cellStyle.gridRow = `span ${span.rowSpan}`;
+              if (span?.colSpan && span.colSpan > 1) cellStyle.gridColumn = `span ${span.colSpan}`;
+              if (span?.rowSpan && span.rowSpan > 1) cellStyle.gridRow = `span ${span.rowSpan}`;
               const isFirstCol = colIndex === 0;
               const treeIndent = isTreeMode && isFirstCol ? row.depth * indentSize : 0;
               const cellClsExtra = typeof col.cellClassName === "function" ? col.cellClassName(val, row.data, row.id) : col.cellClassName ?? "";
@@ -2868,6 +2883,13 @@ function useTableState(props) {
     [table, refresh]
   );
   const resizeRef = (0, import_react13.useRef)(null);
+  const resizeCleanupRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(
+    () => () => {
+      resizeCleanupRef.current?.();
+    },
+    []
+  );
   const [contextMenu, setContextMenu] = (0, import_react13.useState)(null);
   const columns = (0, import_react13.useMemo)(() => {
     const base = hasColumnGroups ? leafColumns : (() => {
@@ -2993,9 +3015,8 @@ function useTableState(props) {
   );
   const handleToggleExpand = (id) => {
     const open = expandedKeys.has(id);
-    if (expandable?.onExpand) {
-      expandable.onExpand(!open, id);
-    } else {
+    expandable?.onExpand?.(!open, id);
+    if (expandable?.expandedKeys == null) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
         if (open) {
@@ -3071,28 +3092,34 @@ function useTableState(props) {
   const handleResizeStart = (e, colKey) => {
     e.preventDefault();
     e.stopPropagation();
+    resizeCleanupRef.current?.();
     resizeRef.current = {
       col: colKey,
       startX: e.clientX,
       startW: colWidths[colKey] ?? DEFAULT_COL_WIDTH
     };
     const onMove = (ev) => {
-      if (!resizeRef.current) return;
-      const diff = ev.clientX - resizeRef.current.startX;
-      const min = leafColumns.find((c) => c.key === resizeRef.current.col)?.minWidth ?? MIN_COL_WIDTH;
+      const ref = resizeRef.current;
+      if (!ref) return;
+      const diff = ev.clientX - ref.startX;
+      const min = leafColumns.find((c) => c.key === ref.col)?.minWidth ?? MIN_COL_WIDTH;
+      const nextWidth = Math.max(min, ref.startW + diff);
+      const col = ref.col;
       setColWidths((prev) => ({
         ...prev,
-        [resizeRef.current.col]: Math.max(min, resizeRef.current.startW + diff)
+        [col]: nextWidth
       }));
-      setUserResizedCols(
-        (prev) => prev.has(resizeRef.current.col) ? prev : new Set(prev).add(resizeRef.current.col)
-      );
+      setUserResizedCols((prev) => prev.has(col) ? prev : new Set(prev).add(col));
     };
-    const onUp = () => {
-      const ref = resizeRef.current;
+    const cleanup = () => {
       resizeRef.current = null;
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", onUp);
+      resizeCleanupRef.current = null;
+    };
+    const onUp = () => {
+      const ref = resizeRef.current;
+      cleanup();
       if (!ref) return;
       setColWidths((prev) => {
         const w = prev[ref.col];
@@ -3100,6 +3127,7 @@ function useTableState(props) {
         return prev;
       });
     };
+    resizeCleanupRef.current = cleanup;
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
   };
@@ -3120,13 +3148,11 @@ function useTableState(props) {
       setDragOver(null);
       return;
     }
-    setColOrder((prev) => {
-      const next = prev.filter((k) => k !== dragCol);
-      const idx = next.indexOf(targetKey);
-      next.splice(idx, 0, dragCol);
-      onColumnOrderChange?.(next);
-      return next;
-    });
+    const next = colOrder.filter((k) => k !== dragCol);
+    const idx = next.indexOf(targetKey);
+    next.splice(idx, 0, dragCol);
+    setColOrder(next);
+    onColumnOrderChange?.(next);
     setDragCol(null);
     setDragOver(null);
   };
@@ -3157,31 +3183,24 @@ function useTableState(props) {
     }));
     table.groupBy(groupBy, aggregates2);
   }, [groupBy, leafColumns, table]);
-  const [expandedGroups, setExpandedGroups] = (0, import_react13.useState)(() => {
-    return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
-  });
+  const [expandedGroups, setExpandedGroups] = (0, import_react13.useState)(() => /* @__PURE__ */ new Set());
+  const allGroupKeysRef = (0, import_react13.useRef)([]);
+  const groupsSeededRef = (0, import_react13.useRef)(false);
   const toggleGroupExpand = (0, import_react13.useCallback)(
     (groupKey) => {
+      const willExpand = !expandedGroups.has(groupKey);
       setExpandedGroups((prev) => {
         const next = new Set(prev);
-        const wasExpanded = next.has(groupKey);
-        if (wasExpanded) {
-          next.delete(groupKey);
-        } else {
-          next.add(groupKey);
-        }
-        onGroupExpandChange?.(groupKey, !wasExpanded);
+        if (next.has(groupKey)) next.delete(groupKey);
+        else next.add(groupKey);
         return next;
       });
+      onGroupExpandChange?.(groupKey, willExpand);
     },
-    [onGroupExpandChange]
+    [onGroupExpandChange, expandedGroups]
   );
   const expandAllGroups = (0, import_react13.useCallback)(() => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      next.add("__all__");
-      return next;
-    });
+    setExpandedGroups(new Set(allGroupKeysRef.current));
   }, []);
   const collapseAllGroups = (0, import_react13.useCallback)(() => {
     setExpandedGroups(/* @__PURE__ */ new Set());
@@ -3274,11 +3293,32 @@ function useTableState(props) {
     }
     return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
   }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
+  const allGroupKeys = (0, import_react13.useMemo)(() => {
+    if (!groupBy) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const keys = [];
+    for (const r of baseFlatRows) {
+      const k = String(r.data[groupBy] ?? "Other");
+      if (!seen.has(k)) {
+        seen.add(k);
+        keys.push(k);
+      }
+    }
+    return keys;
+  }, [baseFlatRows, groupBy]);
+  allGroupKeysRef.current = allGroupKeys;
+  (0, import_react13.useEffect)(() => {
+    groupsSeededRef.current = false;
+  }, [groupBy]);
+  (0, import_react13.useEffect)(() => {
+    if (!groupBy || !defaultGroupExpanded) return;
+    if (groupsSeededRef.current || allGroupKeys.length === 0) return;
+    groupsSeededRef.current = true;
+    setExpandedGroups(new Set(allGroupKeys));
+  }, [groupBy, defaultGroupExpanded, allGroupKeys]);
   const groupedRows = (0, import_react13.useMemo)(() => {
     if (!groupBy) return baseFlatRows;
-    const allExpanded = expandedGroups.has("__all__");
-    const effectiveExpanded = allExpanded ? /* @__PURE__ */ new Set([...expandedGroups, ...baseFlatRows.map((r) => String(r.data[groupBy] ?? "Other"))]) : expandedGroups;
-    return groupByColumn(baseFlatRows, groupBy, columns, effectiveExpanded);
+    return groupByColumn(baseFlatRows, groupBy, columns, expandedGroups);
   }, [baseFlatRows, groupBy, columns, expandedGroups]);
   const {
     top: pinnedTop,