@skygraph/react 0.5.2 → 0.6.4

package/dist/{chunk-NXB3VAVF.js → chunk-7AA2JPZB.js}

@@ -2,14 +2,14 @@ import {
   Button,
   Input,
   Transition
-} from "./chunk-ZJF6SJLP.js";
+} from "./chunk-45YW5VSP.js";
 import {
   Checkbox
-} from "./chunk-FSV73JI4.js";
+} from "./chunk-PEX2UTNG.js";
 import {
   Spin,
   useConfig
-} from "./chunk-2OCEO636.js";
+} from "./chunk-VLRLCHEL.js";
 
 // src/components/ui/Pagination.tsx
 import { useState } from "react";
@@ -53,6 +53,29 @@ function Pagination({
     }
     setJumpValue("");
   };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    const tag = e.target.tagName;
+    if (tag === "INPUT" || tag === "SELECT") return;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        go(safeCurrentPage - 1);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        go(safeCurrentPage + 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        go(1);
+        break;
+      case "End":
+        e.preventDefault();
+        go(totalPages);
+        break;
+    }
+  };
   const pages = buildPages(safeCurrentPage, totalPages);
   const renderTotal = () => {
     if (!showTotal) return null;
@@ -103,12 +126,21 @@ function Pagination({
     ] });
   };
   if (unstyled) {
-    return /* @__PURE__ */ jsxs("nav", { className, style, "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx("button", { disabled: safeCurrentPage <= 1, onClick: () => go(safeCurrentPage - 1), children: "\u2039" }),
+    return /* @__PURE__ */ jsxs("nav", { className, style, "aria-label": ariaLabel, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: safeCurrentPage <= 1,
+          onClick: () => go(safeCurrentPage - 1),
+          children: "\u2039"
+        }
+      ),
       pages.map(
         (p, i) => p === "..." ? /* @__PURE__ */ jsx("span", { children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: () => go(p),
             "aria-current": p === safeCurrentPage ? "page" : void 0,
             children: p
@@ -116,7 +148,15 @@ function Pagination({
           p
         )
       ),
-      /* @__PURE__ */ jsx("button", { disabled: safeCurrentPage >= totalPages, onClick: () => go(safeCurrentPage + 1), children: "\u203A" })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: safeCurrentPage >= totalPages,
+          onClick: () => go(safeCurrentPage + 1),
+          children: "\u203A"
+        }
+      )
     ] });
   }
   if (simple) {
@@ -130,10 +170,12 @@ function Pagination({
         ].filter(Boolean).join(" "),
         style,
         "aria-label": ariaLabel,
+        onKeyDown: handleKeyDown,
         children: [
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               className: "sg-pagination-item sg-pagination-prev",
               disabled: safeCurrentPage <= 1,
               onClick: () => go(safeCurrentPage - 1),
@@ -148,6 +190,7 @@ function Pagination({
           /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               className: "sg-pagination-item sg-pagination-next",
               disabled: safeCurrentPage >= totalPages,
               onClick: () => go(safeCurrentPage + 1),
@@ -164,11 +207,13 @@ function Pagination({
       className: ["sg-pagination", disabled ? "sg-pagination-disabled" : "", className].filter(Boolean).join(" "),
       style,
       "aria-label": ariaLabel,
+      onKeyDown: handleKeyDown,
       children: [
         renderTotal(),
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             className: "sg-pagination-item sg-pagination-prev",
             disabled: safeCurrentPage <= 1,
             onClick: () => go(safeCurrentPage - 1),
@@ -179,6 +224,7 @@ function Pagination({
           (p, i) => p === "..." ? /* @__PURE__ */ jsx("span", { className: "sg-pagination-ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               className: `sg-pagination-item${p === safeCurrentPage ? " sg-pagination-item-active" : ""}`,
               onClick: () => go(p),
               "aria-current": p === safeCurrentPage ? "page" : void 0,
@@ -190,6 +236,7 @@ function Pagination({
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             className: "sg-pagination-item sg-pagination-next",
             disabled: safeCurrentPage >= totalPages,
             onClick: () => go(safeCurrentPage + 1),
@@ -1549,14 +1596,11 @@ function TableBody(props) {
       onContextMenu({ x: e.clientX, y: e.clientY, items });
     }
   };
-  const handleCellCopy = useCallback2(
-    async (rowId, colKey, value) => {
-      await copyToClipboard(String(value ?? ""));
-      setCopiedCell(`${rowId}:${colKey}`);
-      setTimeout(() => setCopiedCell(null), 1500);
-    },
-    []
-  );
+  const handleCellCopy = useCallback2(async (rowId, colKey, value) => {
+    await copyToClipboard(String(value ?? ""));
+    setCopiedCell(`${rowId}:${colKey}`);
+    setTimeout(() => setCopiedCell(null), 1500);
+  }, []);
   if (flatRows.length === 0) {
     return /* @__PURE__ */ jsx6(
       "div",
@@ -1621,7 +1665,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"
               }
             ),
@@ -1633,10 +1683,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__ */ jsx6("input", { type: "radio", checked: !!isSelected, readOnly: true }) : /* @__PURE__ */ jsx6(Checkbox, { checked: !!isSelected, onChange: () => {
-                } })
+                children: rowSelection.type === "radio" ? /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "radio",
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                ) : /* @__PURE__ */ jsx6(
+                  Checkbox,
+                  {
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                )
               }
             ),
             expandable && /* @__PURE__ */ jsx6("div", { className: "sg-table-td sg-table-cell-expand", role: "cell", children: canExpand && /* @__PURE__ */ jsx6(
@@ -1659,10 +1723,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 ?? "";
@@ -2510,6 +2572,13 @@ function useTableState(props) {
     [table, refresh]
   );
   const resizeRef = useRef6(null);
+  const resizeCleanupRef = useRef6(null);
+  useEffect6(
+    () => () => {
+      resizeCleanupRef.current?.();
+    },
+    []
+  );
   const [contextMenu, setContextMenu] = useState7(null);
   const columns = useMemo3(() => {
     const base = hasColumnGroups ? leafColumns : (() => {
@@ -2635,9 +2704,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) {
@@ -2713,28 +2781,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];
@@ -2742,6 +2816,7 @@ function useTableState(props) {
         return prev;
       });
     };
+    resizeCleanupRef.current = cleanup;
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
   };
@@ -2762,13 +2837,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);
   };
@@ -2799,31 +2872,24 @@ function useTableState(props) {
     }));
     table.groupBy(groupBy, aggregates2);
   }, [groupBy, leafColumns, table]);
-  const [expandedGroups, setExpandedGroups] = useState7(() => {
-    return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
-  });
+  const [expandedGroups, setExpandedGroups] = useState7(() => /* @__PURE__ */ new Set());
+  const allGroupKeysRef = useRef6([]);
+  const groupsSeededRef = useRef6(false);
   const toggleGroupExpand = useCallback3(
     (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 = useCallback3(() => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      next.add("__all__");
-      return next;
-    });
+    setExpandedGroups(new Set(allGroupKeysRef.current));
   }, []);
   const collapseAllGroups = useCallback3(() => {
     setExpandedGroups(/* @__PURE__ */ new Set());
@@ -2916,11 +2982,32 @@ function useTableState(props) {
     }
     return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
   }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
+  const allGroupKeys = useMemo3(() => {
+    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;
+  useEffect6(() => {
+    groupsSeededRef.current = false;
+  }, [groupBy]);
+  useEffect6(() => {
+    if (!groupBy || !defaultGroupExpanded) return;
+    if (groupsSeededRef.current || allGroupKeys.length === 0) return;
+    groupsSeededRef.current = true;
+    setExpandedGroups(new Set(allGroupKeys));
+  }, [groupBy, defaultGroupExpanded, allGroupKeys]);
   const groupedRows = useMemo3(() => {
     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,
@@ -3791,4 +3878,4 @@ export {
   printElement,
   Table
 };
-//# sourceMappingURL=chunk-NXB3VAVF.js.map
+//# sourceMappingURL=chunk-7AA2JPZB.js.map