@skygraph/react 0.5.2 → 0.6.4

package/dist/table.cjs

@@ -43,7 +43,10 @@ __export(table_exports, {
 module.exports = __toCommonJS(table_exports);
 
 // src/components/complex/Table/Table.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
+
+// src/components/ui/Input.tsx
+var import_react3 = __toESM(require("react"), 1);
 
 // src/components/ConfigProvider.tsx
 var import_react = require("react");
@@ -128,9 +131,14 @@ function Input({
   size: sizeProp,
   disabled: disabledProp,
   loading,
+  allowClear = false,
+  status,
+  prefix,
+  suffix,
   onChange,
   onBlur,
   onFocus,
+  onClear,
   "aria-invalid": ariaInvalid,
   "aria-required": ariaRequired,
   "aria-describedby": ariaDescribedBy,
@@ -142,45 +150,73 @@ function Input({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
+  const [internalValue, setInternalValue] = import_react3.default.useState(defaultValue ?? "");
+  const currentValue = value ?? internalValue;
+  const isControlled = value !== void 0;
   const wrapperClasses = unstyled ? className ?? "" : [
     "sg-input-wrapper",
     `sg-input-wrapper-${size}`,
     loading ? "sg-input-wrapper-loading" : "",
     readOnly ? "sg-input-wrapper-readonly" : "",
+    status ? `sg-input-wrapper-status-${status}` : "",
     className
   ].filter(Boolean).join(" ");
   const inputClasses = unstyled ? "" : [
     "sg-input",
     `sg-input-${size}`,
-    readOnly ? "sg-input-readonly" : ""
+    readOnly ? "sg-input-readonly" : "",
+    status ? `sg-input-status-${status}` : ""
   ].filter(Boolean).join(" ");
+  const clearLabel = config.locale?.input?.clear ?? "Clear";
+  const showClear = allowClear && !disabled && !readOnly && !loading && currentValue !== "";
+  const handleChange = (e) => {
+    if (!isControlled) setInternalValue(e.target.value);
+    onChange?.(e.target.value);
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onChange?.("");
+    onClear?.();
+  };
+  const resolvedAriaInvalid = ariaInvalid ?? (status === "error" ? true : void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: wrapperClasses, style, children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sg-input-prefix", children: prefix }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
         id,
         type,
         className: inputClasses,
-        value,
-        defaultValue,
+        value: currentValue,
         placeholder,
         disabled: disabled || loading,
         readOnly,
-        "aria-invalid": ariaInvalid,
+        "aria-invalid": resolvedAriaInvalid,
         "aria-required": ariaRequired,
         "aria-readonly": readOnly || void 0,
         "aria-describedby": ariaDescribedBy,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: handleChange,
         onBlur,
         onFocus
       }
     ),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spin, { size: "small", unstyled })
+    showClear && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "sg-input-clear",
+        "aria-label": clearLabel,
+        onClick: handleClear,
+        children: "\xD7"
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spin, { size: "small", unstyled }),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sg-input-suffix", children: suffix })
   ] });
 }
 
 // src/components/ui/Pagination.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Pagination({
   current,
@@ -205,7 +241,7 @@ function Pagination({
   const itemsPerPageLabel = locale?.itemsPerPage ?? "/ page";
   const jumpLabel = locale?.jump ?? "Go to";
   const ariaLabel = locale?.ariaLabel ?? "Pagination";
-  const [jumpValue, setJumpValue] = (0, import_react3.useState)("");
+  const [jumpValue, setJumpValue] = (0, import_react4.useState)("");
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const safeCurrentPage = Math.min(Math.max(1, current), totalPages);
   const rangeStart = (safeCurrentPage - 1) * pageSize + 1;
@@ -221,6 +257,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;
@@ -271,12 +330,21 @@ function Pagination({
     ] });
   };
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className, style, "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { disabled: safeCurrentPage <= 1, onClick: () => go(safeCurrentPage - 1), children: "\u2039" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className, style, "aria-label": ariaLabel, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: safeCurrentPage <= 1,
+          onClick: () => go(safeCurrentPage - 1),
+          children: "\u2039"
+        }
+      ),
       pages.map(
         (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
+            type: "button",
             onClick: () => go(p),
             "aria-current": p === safeCurrentPage ? "page" : void 0,
             children: p
@@ -284,7 +352,15 @@ function Pagination({
           p
         )
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { disabled: safeCurrentPage >= totalPages, onClick: () => go(safeCurrentPage + 1), children: "\u203A" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: safeCurrentPage >= totalPages,
+          onClick: () => go(safeCurrentPage + 1),
+          children: "\u203A"
+        }
+      )
     ] });
   }
   if (simple) {
@@ -298,10 +374,12 @@ function Pagination({
         ].filter(Boolean).join(" "),
         style,
         "aria-label": ariaLabel,
+        onKeyDown: handleKeyDown,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
+              type: "button",
               className: "sg-pagination-item sg-pagination-prev",
               disabled: safeCurrentPage <= 1,
               onClick: () => go(safeCurrentPage - 1),
@@ -316,6 +394,7 @@ function Pagination({
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
+              type: "button",
               className: "sg-pagination-item sg-pagination-next",
               disabled: safeCurrentPage >= totalPages,
               onClick: () => go(safeCurrentPage + 1),
@@ -332,11 +411,13 @@ function Pagination({
       className: ["sg-pagination", disabled ? "sg-pagination-disabled" : "", className].filter(Boolean).join(" "),
       style,
       "aria-label": ariaLabel,
+      onKeyDown: handleKeyDown,
       children: [
         renderTotal(),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
+            type: "button",
             className: "sg-pagination-item sg-pagination-prev",
             disabled: safeCurrentPage <= 1,
             onClick: () => go(safeCurrentPage - 1),
@@ -347,6 +428,7 @@ function Pagination({
           (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sg-pagination-ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
+              type: "button",
               className: `sg-pagination-item${p === safeCurrentPage ? " sg-pagination-item-active" : ""}`,
               onClick: () => go(p),
               "aria-current": p === safeCurrentPage ? "page" : void 0,
@@ -358,6 +440,7 @@ function Pagination({
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
+            type: "button",
             className: "sg-pagination-item sg-pagination-next",
             disabled: safeCurrentPage >= totalPages,
             onClick: () => go(safeCurrentPage + 1),
@@ -384,7 +467,7 @@ function buildPages(current, total) {
 }
 
 // src/components/ui/Checkbox.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Checkbox({
   checked,
@@ -400,8 +483,8 @@ function Checkbox({
 }) {
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled ?? false;
-  const inputRef = import_react4.default.useRef(null);
-  import_react4.default.useEffect(() => {
+  const inputRef = import_react5.default.useRef(null);
+  import_react5.default.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate ?? false;
     }
@@ -433,7 +516,7 @@ function Checkbox({
 }
 
 // src/components/complex/Table/FilterDropdown.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/components/ui/Button.tsx
@@ -483,10 +566,10 @@ function Button({
 }
 
 // src/components/ui/Select.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/ui/Transition.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 function Transition({
   visible,
   name = "sg-fade",
@@ -500,20 +583,20 @@ function Transition({
   children,
   unmountOnExit = true
 }) {
-  const [mounted, setMounted] = (0, import_react5.useState)(visible);
-  const [phase, setPhase] = (0, import_react5.useState)(visible ? "idle" : "idle");
-  const nodeRef = (0, import_react5.useRef)(null);
-  const timerRef = (0, import_react5.useRef)(void 0);
-  const prevVisible = (0, import_react5.useRef)(visible);
-  const getEnterClasses = (0, import_react5.useCallback)(() => {
+  const [mounted, setMounted] = (0, import_react6.useState)(visible);
+  const [phase, setPhase] = (0, import_react6.useState)(visible ? "idle" : "idle");
+  const nodeRef = (0, import_react6.useRef)(null);
+  const timerRef = (0, import_react6.useRef)(void 0);
+  const prevVisible = (0, import_react6.useRef)(visible);
+  const getEnterClasses = (0, import_react6.useCallback)(() => {
     if (enterFrom && enterTo) return { from: enterFrom, active: `${name}-enter-active`, to: enterTo };
     return { from: `${name}-enter-from`, active: `${name}-enter-active`, to: `${name}-enter-to` };
   }, [name, enterFrom, enterTo]);
-  const getLeaveClasses = (0, import_react5.useCallback)(() => {
+  const getLeaveClasses = (0, import_react6.useCallback)(() => {
     if (leaveFrom && leaveTo) return { from: leaveFrom, active: `${name}-leave-active`, to: leaveTo };
     return { from: `${name}-leave-from`, active: `${name}-leave-active`, to: `${name}-leave-to` };
   }, [name, leaveFrom, leaveTo]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (visible === prevVisible.current) return;
     prevVisible.current = visible;
     clearTimeout(timerRef.current);
@@ -539,7 +622,7 @@ function Transition({
       }, duration);
     }
   }, [visible, duration, unmountOnExit, onAfterEnter, onAfterLeave]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
   if (!mounted && unmountOnExit) return null;
@@ -560,7 +643,7 @@ function Transition({
       transitionClass = `${leaveC.to} ${leaveC.active}`;
       break;
   }
-  return import_react5.default.cloneElement(children, {
+  return import_react6.default.cloneElement(children, {
     ref: nodeRef,
     className: [children.props.className, transitionClass].filter(Boolean).join(" ")
   });
@@ -588,17 +671,17 @@ function Select(props) {
   const disabled = disabledProp ?? config.disabled ?? false;
   const initialSingle = isMultiple ? void 0 : props.value ?? props.defaultValue;
   const initialMultiple = isMultiple ? props.value ?? props.defaultValue ?? [] : [];
-  const [internalSingle, setInternalSingle] = (0, import_react6.useState)(initialSingle);
-  const [internalMultiple, setInternalMultiple] = (0, import_react6.useState)(initialMultiple);
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const [focusedIndex, setFocusedIndex] = (0, import_react6.useState)(-1);
-  const ref = (0, import_react6.useRef)(null);
-  const listboxId = (0, import_react6.useId)();
+  const [internalSingle, setInternalSingle] = (0, import_react7.useState)(initialSingle);
+  const [internalMultiple, setInternalMultiple] = (0, import_react7.useState)(initialMultiple);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react7.useState)(-1);
+  const ref = (0, import_react7.useRef)(null);
+  const listboxId = (0, import_react7.useId)();
   const currentSingle = isMultiple ? void 0 : props.value ?? internalSingle;
   const currentMultiple = isMultiple ? props.value ?? internalMultiple : [];
   const selectedOption = isMultiple ? void 0 : options.find((o) => o.value === currentSingle);
   const selectedOptions = isMultiple ? options.filter((o) => currentMultiple.includes(o.value)) : [];
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -607,7 +690,7 @@ function Select(props) {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) setFocusedIndex(-1);
   }, [open]);
   const emitSingle = (val) => {
@@ -855,8 +938,8 @@ function FilterPortal({
   anchor,
   children
 }) {
-  const [coords, setCoords] = import_react7.default.useState(null);
-  import_react7.default.useLayoutEffect(() => {
+  const [coords, setCoords] = import_react8.default.useState(null);
+  import_react8.default.useLayoutEffect(() => {
     if (!anchor) return;
     const update = () => {
       const r = anchor.getBoundingClientRect();
@@ -1029,14 +1112,14 @@ function AdvancedFilterPanel({ col, t, state, actions, filterRef }) {
   const defaultOps = isNumeric ? NUMBER_OPS : TEXT_OPS;
   const ops = col.advancedFilterOperators ?? defaultOps;
   const current = state.advancedFilters[col.key];
-  const [draftOp, setDraftOp] = import_react7.default.useState(current?.op ?? ops[0]);
-  const [draftValue, setDraftValue] = import_react7.default.useState(() => formatDraftValue(current?.value));
-  const [draftValue2, setDraftValue2] = import_react7.default.useState(() => {
+  const [draftOp, setDraftOp] = import_react8.default.useState(current?.op ?? ops[0]);
+  const [draftValue, setDraftValue] = import_react8.default.useState(() => formatDraftValue(current?.value));
+  const [draftValue2, setDraftValue2] = import_react8.default.useState(() => {
     const v = current?.value;
     if (Array.isArray(v) && v.length === 2) return String(v[1] ?? "");
     return "";
   });
-  import_react7.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (current) {
       setDraftOp(current.op);
       setDraftValue(formatDraftValue(current.value));
@@ -1444,7 +1527,7 @@ function TableHeader(props) {
 }
 
 // src/components/complex/Table/TableBody.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 
 // src/components/complex/Table/export.ts
 function toCSVString(data) {
@@ -1609,13 +1692,13 @@ function TableBody(props) {
   } = props;
   const sCls = slotClassNames ?? {};
   const sSty = slotStyles ?? {};
-  const [editingCell, setEditingCell] = (0, import_react8.useState)(null);
-  const [editValue, setEditValue] = (0, import_react8.useState)("");
-  const editRef = (0, import_react8.useRef)(null);
-  const [dragRowIdx, setDragRowIdx] = (0, import_react8.useState)(null);
-  const [dragOverRowIdx, setDragOverRowIdx] = (0, import_react8.useState)(null);
-  const [copiedCell, setCopiedCell] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const [editingCell, setEditingCell] = (0, import_react9.useState)(null);
+  const [editValue, setEditValue] = (0, import_react9.useState)("");
+  const editRef = (0, import_react9.useRef)(null);
+  const [dragRowIdx, setDragRowIdx] = (0, import_react9.useState)(null);
+  const [dragOverRowIdx, setDragOverRowIdx] = (0, import_react9.useState)(null);
+  const [copiedCell, setCopiedCell] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (editingCell && editRef.current) editRef.current.focus();
   }, [editingCell]);
   const handleEditStart = (rowId, col, val) => {
@@ -1658,14 +1741,11 @@ function TableBody(props) {
       onContextMenu({ x: e.clientX, y: e.clientY, items });
     }
   };
-  const handleCellCopy = (0, import_react8.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",
@@ -1702,7 +1782,7 @@ function TableBody(props) {
     const isDragOver = dragOverRowIdx === rowIdx && dragRowIdx !== rowIdx;
     const isPinned = isPinnedSection;
     const virtualIndexAttr = rowIndexOffset !== void 0 ? rowIndexOffset + rowIdx : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react8.default.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
@@ -1730,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"
               }
             ),
@@ -1742,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)(
@@ -1768,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 ?? "";
@@ -1877,7 +1975,7 @@ function TableBody(props) {
 }
 
 // src/components/complex/Table/VirtualTableBody.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_core = require("@skygraph/core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_ROW_HEIGHT = 40;
@@ -1907,7 +2005,7 @@ function VirtualTableBody(props) {
   } = props;
   const isDeclarative = typeof rowHeight === "function";
   const isDynamic = isDeclarative || estimateRowHeight != null;
-  const virtual = (0, import_react9.useMemo)(
+  const virtual = (0, import_react10.useMemo)(
     () => (0, import_core.createVirtual)({
       itemCount: flatRows.length,
       itemHeight: buildEstimate(rowHeight, estimateRowHeight, flatRows),
@@ -1916,13 +2014,13 @@ function VirtualTableBody(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const [, forceUpdate] = (0, import_react9.useReducer)((n) => n + 1, 0);
-  (0, import_react9.useEffect)(() => virtual.subscribe(() => forceUpdate()), [virtual]);
-  (0, import_react9.useEffect)(() => {
+  const [, forceUpdate] = (0, import_react10.useReducer)((n) => n + 1, 0);
+  (0, import_react10.useEffect)(() => virtual.subscribe(() => forceUpdate()), [virtual]);
+  (0, import_react10.useEffect)(() => {
     virtual.setItemCount(flatRows.length);
     virtual.setItemHeight(buildEstimate(rowHeight, estimateRowHeight, flatRows));
   }, [virtual, flatRows, rowHeight, estimateRowHeight]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isDeclarative) return;
     const fn = rowHeight;
     for (let i = 0; i < flatRows.length; i++) {
@@ -1934,9 +2032,9 @@ function VirtualTableBody(props) {
       }
     }
   }, [virtual, flatRows, rowHeight, isDeclarative]);
-  const [scrollTop, setScrollTop] = (0, import_react9.useState)(0);
-  const [viewportHeight, setViewportHeight] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react10.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     const el = scrollContainerRef.current;
     if (!el) return;
     setViewportHeight(el.clientHeight);
@@ -1965,9 +2063,9 @@ function VirtualTableBody(props) {
   );
   const bottomPad = Math.max(0, totalHeight - topPad - visibleSize);
   const normalizeHeight = (h) => Math.round(h);
-  const roRef = (0, import_react9.useRef)(null);
-  const observedCellsRef = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react9.useEffect)(() => {
+  const roRef = (0, import_react10.useRef)(null);
+  const observedCellsRef = (0, import_react10.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react10.useEffect)(() => {
     if (!isDynamic) return;
     if (isDeclarative) return;
     if (typeof ResizeObserver === "undefined") return;
@@ -1987,7 +2085,7 @@ function VirtualTableBody(props) {
       observedCellsRef.current.clear();
     };
   }, [isDynamic, isDeclarative, virtual]);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!isDynamic) return;
     const grid = scrollContainerRef.current?.querySelector(".sg-table-grid");
     if (!grid) return;
@@ -2064,12 +2162,12 @@ function VirtualTableBody(props) {
 }
 
 // src/components/complex/Table/ContextMenu.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ContextMenu({ state, onClose }) {
-  const ref = (0, import_react10.useRef)(null);
-  const [subMenu, setSubMenu] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react11.useRef)(null);
+  const [subMenu, setSubMenu] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (!state) return;
     const handle = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
@@ -2151,13 +2249,13 @@ function ContextMenu({ state, onClose }) {
 }
 
 // src/components/complex/Table/useTableState.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/hooks/useTable.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_core2 = require("@skygraph/core");
 function useTable(options) {
-  const [{ core, table }] = (0, import_react11.useState)(() => {
+  const [{ core, table }] = (0, import_react12.useState)(() => {
     const c = (0, import_core2.createCore)();
     const t = (0, import_core2.createTable)(c, options);
     if (options?.data) {
@@ -2165,14 +2263,14 @@ function useTable(options) {
     }
     return { core: c, table: t };
   });
-  const [visibleRows, setVisibleRows] = (0, import_react11.useState)(() => table.getVisibleRows());
-  const [tableState, setTableState] = (0, import_react11.useState)(() => table.getTableState());
-  const [pinnedColumns, setPinnedColumns] = (0, import_react11.useState)(() => table.getPinnedColumns());
-  const [columnWidths, setColumnWidthsState] = (0, import_react11.useState)(
+  const [visibleRows, setVisibleRows] = (0, import_react12.useState)(() => table.getVisibleRows());
+  const [tableState, setTableState] = (0, import_react12.useState)(() => table.getTableState());
+  const [pinnedColumns, setPinnedColumns] = (0, import_react12.useState)(() => table.getPinnedColumns());
+  const [columnWidths, setColumnWidthsState] = (0, import_react12.useState)(
     () => table.getColumnWidths()
   );
-  const prevDataRef = (0, import_react11.useRef)(options?.data);
-  (0, import_react11.useEffect)(() => {
+  const prevDataRef = (0, import_react12.useRef)(options?.data);
+  (0, import_react12.useEffect)(() => {
     const newData = options?.data;
     if (newData === prevDataRef.current) return;
     prevDataRef.current = newData;
@@ -2183,93 +2281,93 @@ function useTable(options) {
     setVisibleRows(table.getVisibleRows());
     setTableState(table.getTableState());
   }, [options?.data, table]);
-  const refresh = (0, import_react11.useCallback)(() => {
+  const refresh = (0, import_react12.useCallback)(() => {
     setVisibleRows(table.getVisibleRows());
     setTableState(table.getTableState());
     setPinnedColumns(table.getPinnedColumns());
     setColumnWidthsState(table.getColumnWidths());
   }, [table]);
-  const pinColumn = (0, import_react11.useCallback)(
+  const pinColumn = (0, import_react12.useCallback)(
     (column, side) => {
       table.pinColumn(column, side);
       setPinnedColumns(table.getPinnedColumns());
     },
     [table]
   );
-  const clearPinned = (0, import_react11.useCallback)(() => {
+  const clearPinned = (0, import_react12.useCallback)(() => {
     table.clearPinned();
     setPinnedColumns(table.getPinnedColumns());
   }, [table]);
-  const setColumnWidth = (0, import_react11.useCallback)(
+  const setColumnWidth = (0, import_react12.useCallback)(
     (column, width) => {
       table.setColumnWidth(column, width);
       setColumnWidthsState(table.getColumnWidths());
     },
     [table]
   );
-  const clearColumnWidths = (0, import_react11.useCallback)(() => {
+  const clearColumnWidths = (0, import_react12.useCallback)(() => {
     table.clearColumnWidths();
     setColumnWidthsState(table.getColumnWidths());
   }, [table]);
-  const setSort = (0, import_react11.useCallback)(
+  const setSort = (0, import_react12.useCallback)(
     (column, direction) => {
       table.setSort(column, direction);
       refresh();
     },
     [table, refresh]
   );
-  const setSorts = (0, import_react11.useCallback)(
+  const setSorts = (0, import_react12.useCallback)(
     (sorts) => {
       table.setSorts(sorts);
       refresh();
     },
     [table, refresh]
   );
-  const clearSort = (0, import_react11.useCallback)(() => {
+  const clearSort = (0, import_react12.useCallback)(() => {
     table.clearSort();
     refresh();
   }, [table, refresh]);
-  const addFilter = (0, import_react11.useCallback)(
+  const addFilter = (0, import_react12.useCallback)(
     (filter) => {
       table.addFilter(filter);
       refresh();
     },
     [table, refresh]
   );
-  const removeFilter = (0, import_react11.useCallback)(
+  const removeFilter = (0, import_react12.useCallback)(
     (column) => {
       table.removeFilter(column);
       refresh();
     },
     [table, refresh]
   );
-  const clearFilters = (0, import_react11.useCallback)(() => {
+  const clearFilters = (0, import_react12.useCallback)(() => {
     table.clearFilters();
     refresh();
   }, [table, refresh]);
-  const setFilterFn = (0, import_react11.useCallback)(
+  const setFilterFn = (0, import_react12.useCallback)(
     (fn) => {
       table.setFilterFn(fn);
       refresh();
     },
     [table, refresh]
   );
-  const setPage = (0, import_react11.useCallback)(
+  const setPage = (0, import_react12.useCallback)(
     (page) => {
       table.setPage(page);
       refresh();
     },
     [table, refresh]
   );
-  const nextPage = (0, import_react11.useCallback)(() => {
+  const nextPage = (0, import_react12.useCallback)(() => {
     table.nextPage();
     refresh();
   }, [table, refresh]);
-  const prevPage = (0, import_react11.useCallback)(() => {
+  const prevPage = (0, import_react12.useCallback)(() => {
     table.prevPage();
     refresh();
   }, [table, refresh]);
-  return (0, import_react11.useMemo)(
+  return (0, import_react12.useMemo)(
     () => ({
       core,
       table,
@@ -2690,36 +2788,36 @@ function useTableState(props) {
     setColumnWidth: persistColumnWidth,
     refresh
   } = useTable(tableOptions);
-  const t = (0, import_react12.useMemo)(() => ({ ...DEFAULT_LOCALE, ...locale }), [locale]);
+  const t = (0, import_react13.useMemo)(() => ({ ...DEFAULT_LOCALE, ...locale }), [locale]);
   const hasColumnGroups = columnsProp.some((c) => c.children && c.children.length > 0);
-  const leafColumns = (0, import_react12.useMemo)(() => flattenLeafColumns(columnsProp), [columnsProp]);
-  const headerRows = (0, import_react12.useMemo)(
+  const leafColumns = (0, import_react13.useMemo)(() => flattenLeafColumns(columnsProp), [columnsProp]);
+  const headerRows = (0, import_react13.useMemo)(
     () => hasColumnGroups ? buildHeaderRows(columnsProp) : null,
     [columnsProp, hasColumnGroups]
   );
-  const [internalSorts, setInternalSorts] = (0, import_react12.useState)([]);
+  const [internalSorts, setInternalSorts] = (0, import_react13.useState)([]);
   const sorts = controlledSorts ?? internalSorts;
-  const [colWidths, setColWidths] = (0, import_react12.useState)(() => {
+  const [colWidths, setColWidths] = (0, import_react13.useState)(() => {
     const w = {};
     for (const c of leafColumns) {
       w[c.key] = persistedColWidths[c.key] ?? c.width ?? DEFAULT_COL_WIDTH;
     }
     return w;
   });
-  const [userResizedCols, setUserResizedCols] = (0, import_react12.useState)(
+  const [userResizedCols, setUserResizedCols] = (0, import_react13.useState)(
     () => new Set(Object.keys(persistedColWidths))
   );
-  const [colOrder, setColOrder] = (0, import_react12.useState)(() => leafColumns.map((c) => c.key));
-  const [dragCol, setDragCol] = (0, import_react12.useState)(null);
-  const [dragOver, setDragOver] = (0, import_react12.useState)(null);
-  const [internalHidden, setInternalHidden] = (0, import_react12.useState)(
+  const [colOrder, setColOrder] = (0, import_react13.useState)(() => leafColumns.map((c) => c.key));
+  const [dragCol, setDragCol] = (0, import_react13.useState)(null);
+  const [dragOver, setDragOver] = (0, import_react13.useState)(null);
+  const [internalHidden, setInternalHidden] = (0, import_react13.useState)(
     () => new Set(hiddenColumnsProp ?? [])
   );
-  const hiddenSet = (0, import_react12.useMemo)(
+  const hiddenSet = (0, import_react13.useMemo)(
     () => hiddenColumnsProp ? new Set(hiddenColumnsProp) : internalHidden,
     [hiddenColumnsProp, internalHidden]
   );
-  const toggleColumnVisibility = (0, import_react12.useCallback)(
+  const toggleColumnVisibility = (0, import_react13.useCallback)(
     (key) => {
       if (onHiddenColumnsChange) {
         const current = hiddenColumnsProp ?? [];
@@ -2739,7 +2837,7 @@ function useTableState(props) {
     },
     [hiddenColumnsProp, onHiddenColumnsChange]
   );
-  const [internalExpanded, setInternalExpanded] = (0, import_react12.useState)(() => {
+  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(() => {
     if (tree?.defaultExpandAllRows) {
       const childrenKey2 = tree.childrenColumnName ?? "children";
       return new Set(collectAllTreeIds(props.data ?? [], childrenKey2));
@@ -2747,15 +2845,15 @@ function useTableState(props) {
     return new Set(expandable?.defaultExpandedRowKeys ?? []);
   });
   const expandedKeys = expandable?.expandedKeys ? new Set(expandable.expandedKeys) : internalExpanded;
-  const [treeExpanded, setTreeExpanded] = (0, import_react12.useState)(() => {
+  const [treeExpanded, setTreeExpanded] = (0, import_react13.useState)(() => {
     if (tree?.defaultExpandAllRows) {
       const childrenKey2 = tree.childrenColumnName ?? "children";
       return new Set(collectAllTreeIds(props.data ?? [], childrenKey2));
     }
     return /* @__PURE__ */ new Set();
   });
-  const [searchText, setSearchText] = (0, import_react12.useState)("");
-  const [activeFilters, setActiveFilters] = (0, import_react12.useState)(() => {
+  const [searchText, setSearchText] = (0, import_react13.useState)("");
+  const [activeFilters, setActiveFilters] = (0, import_react13.useState)(() => {
     const init = {};
     for (const col of leafColumns) {
       if (col.filteredValue) {
@@ -2766,12 +2864,12 @@ function useTableState(props) {
     }
     return init;
   });
-  const [filterSearchText, setFilterSearchText] = (0, import_react12.useState)({});
-  const [openFilterDropdown, setOpenFilterDropdown] = (0, import_react12.useState)(null);
-  const [advancedFilters, setAdvancedFiltersState] = (0, import_react12.useState)({});
-  const filterRef = (0, import_react12.useRef)(null);
-  const [filterAnchor, setFilterAnchor] = (0, import_react12.useState)(null);
-  const setAdvancedFilter = (0, import_react12.useCallback)(
+  const [filterSearchText, setFilterSearchText] = (0, import_react13.useState)({});
+  const [openFilterDropdown, setOpenFilterDropdown] = (0, import_react13.useState)(null);
+  const [advancedFilters, setAdvancedFiltersState] = (0, import_react13.useState)({});
+  const filterRef = (0, import_react13.useRef)(null);
+  const [filterAnchor, setFilterAnchor] = (0, import_react13.useState)(null);
+  const setAdvancedFilter = (0, import_react13.useCallback)(
     (colKey, filter) => {
       setAdvancedFiltersState((prev) => {
         const next = { ...prev };
@@ -2784,16 +2882,23 @@ function useTableState(props) {
     },
     [table, refresh]
   );
-  const resizeRef = (0, import_react12.useRef)(null);
-  const [contextMenu, setContextMenu] = (0, import_react12.useState)(null);
-  const columns = (0, import_react12.useMemo)(() => {
+  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 : (() => {
       const map = new Map(leafColumns.map((c) => [c.key, c]));
       return colOrder.filter((k) => map.has(k)).map((k) => map.get(k));
     })();
     return base.filter((c) => !hiddenSet.has(c.key) && !c.hidden);
   }, [leafColumns, colOrder, hasColumnGroups, hiddenSet]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const keys = leafColumns.map((c) => c.key);
     setColOrder((prev) => {
       const prevSet = new Set(prev);
@@ -2802,7 +2907,7 @@ function useTableState(props) {
       return [...valid, ...added];
     });
   }, [leafColumns]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     for (const col of leafColumns) {
       if (col.filteredValue !== void 0) {
         setActiveFilters((prev) => {
@@ -2812,7 +2917,7 @@ function useTableState(props) {
       }
     }
   }, [leafColumns]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const colFilters = columns.filter((c) => c.onFilter && activeFilters[c.key]?.length);
     const hasSearch = searchable && searchText.length > 0;
     if (colFilters.length === 0 && !hasSearch) {
@@ -2835,7 +2940,7 @@ function useTableState(props) {
       return true;
     });
   }, [activeFilters, searchText, searchable, setFilterFn, columns]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!openFilterDropdown) return;
     const handle = (e) => {
       if (filterRef.current && !filterRef.current.contains(e.target)) {
@@ -2845,7 +2950,7 @@ function useTableState(props) {
     document.addEventListener("mousedown", handle);
     return () => document.removeEventListener("mousedown", handle);
   }, [openFilterDropdown]);
-  const handleSort = (0, import_react12.useCallback)(
+  const handleSort = (0, import_react13.useCallback)(
     (col, shiftKey) => {
       if (!col.sortable) return;
       if (multiSort && shiftKey) {
@@ -2894,14 +2999,14 @@ function useTableState(props) {
     },
     [multiSort, sorts, onSortsChange, setSort, setSorts, clearSort]
   );
-  const getSortIndex = (0, import_react12.useCallback)(
+  const getSortIndex = (0, import_react13.useCallback)(
     (colKey) => {
       if (!multiSort || sorts.length <= 1) return -1;
       return sorts.findIndex((s) => s.column === colKey);
     },
     [multiSort, sorts]
   );
-  const getSortDirection = (0, import_react12.useCallback)(
+  const getSortDirection = (0, import_react13.useCallback)(
     (colKey) => {
       const found = sorts.find((s) => s.column === colKey);
       return found?.direction ?? null;
@@ -2910,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) {
@@ -2988,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];
@@ -3017,6 +3127,7 @@ function useTableState(props) {
         return prev;
       });
     };
+    resizeCleanupRef.current = cleanup;
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
   };
@@ -3037,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);
   };
@@ -3051,19 +3160,19 @@ function useTableState(props) {
     setDragCol(null);
     setDragOver(null);
   };
-  const handlePinColumn = (0, import_react12.useCallback)(
+  const handlePinColumn = (0, import_react13.useCallback)(
     (key, fixed) => {
       onColumnPinChange?.(key, fixed);
     },
     [onColumnPinChange]
   );
-  const [isFullscreen, setIsFullscreen] = (0, import_react12.useState)(false);
-  const wrapperRef = (0, import_react12.useRef)(null);
-  const toggleFullscreen = (0, import_react12.useCallback)(() => {
+  const [isFullscreen, setIsFullscreen] = (0, import_react13.useState)(false);
+  const wrapperRef = (0, import_react13.useRef)(null);
+  const toggleFullscreen = (0, import_react13.useCallback)(() => {
     setIsFullscreen((prev) => !prev);
   }, []);
-  const [density, setDensity] = (0, import_react12.useState)("middle");
-  (0, import_react12.useEffect)(() => {
+  const [density, setDensity] = (0, import_react13.useState)("middle");
+  (0, import_react13.useEffect)(() => {
     if (!groupBy) {
       table.clearGroupBy();
       return;
@@ -3074,37 +3183,30 @@ function useTableState(props) {
     }));
     table.groupBy(groupBy, aggregates2);
   }, [groupBy, leafColumns, table]);
-  const [expandedGroups, setExpandedGroups] = (0, import_react12.useState)(() => {
-    return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
-  });
-  const toggleGroupExpand = (0, import_react12.useCallback)(
+  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_react12.useCallback)(() => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      next.add("__all__");
-      return next;
-    });
+  const expandAllGroups = (0, import_react13.useCallback)(() => {
+    setExpandedGroups(new Set(allGroupKeysRef.current));
   }, []);
-  const collapseAllGroups = (0, import_react12.useCallback)(() => {
+  const collapseAllGroups = (0, import_react13.useCallback)(() => {
     setExpandedGroups(/* @__PURE__ */ new Set());
   }, []);
-  const [focusedCell, setFocusedCell] = (0, import_react12.useState)(null);
-  const handleKeyNav = (0, import_react12.useCallback)(
+  const [focusedCell, setFocusedCell] = (0, import_react13.useState)(null);
+  const handleKeyNav = (0, import_react13.useCallback)(
     (e) => {
       if (!keyboardNavigation || !focusedCell) return;
       const maxRow = visibleRows.length - 1;
@@ -3160,7 +3262,7 @@ function useTableState(props) {
     },
     [keyboardNavigation, focusedCell, visibleRows.length, columns.length]
   );
-  const handleAutoResize = (0, import_react12.useCallback)(
+  const handleAutoResize = (0, import_react13.useCallback)(
     (colKey) => {
       const maxLen = visibleRows.reduce((max, row) => {
         const val = String(row.data[colKey] ?? "");
@@ -3180,7 +3282,7 @@ function useTableState(props) {
   const isTreeMode = !!tree;
   const childrenKey = tree?.childrenColumnName ?? "children";
   const indentSize = tree?.indentSize ?? 20;
-  const baseFlatRows = (0, import_react12.useMemo)(() => {
+  const baseFlatRows = (0, import_react13.useMemo)(() => {
     if (!isTreeMode) {
       return visibleRows.map((r) => ({
         id: r.id,
@@ -3191,22 +3293,43 @@ function useTableState(props) {
     }
     return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
   }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
-  const groupedRows = (0, import_react12.useMemo)(() => {
+  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,
     middle: middleRows,
     bottom: pinnedBottom
-  } = (0, import_react12.useMemo)(
+  } = (0, import_react13.useMemo)(
     () => separatePinnedRows(groupedRows, pinnedRowsConfig?.top, pinnedRowsConfig?.bottom),
     [groupedRows, pinnedRowsConfig]
   );
   const flatRows = groupedRows;
-  const aggregates = (0, import_react12.useMemo)(
+  const aggregates = (0, import_react13.useMemo)(
     () => computeColumnAggregates(columns, baseFlatRows),
     [columns, baseFlatRows]
   );
@@ -3242,7 +3365,7 @@ function useTableState(props) {
   });
   const gridTemplate = [...extraBefore, ...colTemplates].join(" ");
   const totalCols = extraBefore.length + columns.length;
-  const fixedLeftOffsets = (0, import_react12.useMemo)(() => {
+  const fixedLeftOffsets = (0, import_react13.useMemo)(() => {
     const o = {};
     const selW = parseInt(SELECTION_COL_WIDTH);
     let left = (rowSelection ? selW : 0) + (expandable ? selW : 0);
@@ -3254,7 +3377,7 @@ function useTableState(props) {
     }
     return o;
   }, [columns, colWidths, rowSelection, expandable]);
-  const fixedRightOffsets = (0, import_react12.useMemo)(() => {
+  const fixedRightOffsets = (0, import_react13.useMemo)(() => {
     const o = {};
     let right = 0;
     for (let i = columns.length - 1; i >= 0; i--) {
@@ -3268,8 +3391,8 @@ function useTableState(props) {
   const fixedStyle = (col, isHeader) => getFixedStyle(col, fixedLeftOffsets, fixedRightOffsets, isHeader);
   const allSelected = rowSelection ? visibleRows.length > 0 && visibleRows.every((r) => rowSelection.selectedKeys.includes(r.id)) : false;
   const someSelected = rowSelection ? visibleRows.some((r) => rowSelection.selectedKeys.includes(r.id)) && !allSelected : false;
-  const spanMap = (0, import_react12.useMemo)(() => computeSpanMap(columns, flatRows), [columns, flatRows]);
-  const hiddenCells = (0, import_react12.useMemo)(
+  const spanMap = (0, import_react13.useMemo)(() => computeSpanMap(columns, flatRows), [columns, flatRows]);
+  const hiddenCells = (0, import_react13.useMemo)(
     () => computeHiddenCells(columns, flatRows, spanMap),
     [columns, flatRows, spanMap]
   );
@@ -3524,14 +3647,14 @@ function TableInner(props, forwardedRef) {
   const bordered = borderedProp ?? config.bordered ?? false;
   const loading = loadingProp ?? false;
   const state = useTableState(props);
-  const tableRef = (0, import_react13.useRef)(null);
-  const scrollRef = (0, import_react13.useRef)(null);
+  const tableRef = (0, import_react14.useRef)(null);
+  const scrollRef = (0, import_react14.useRef)(null);
   const effectiveSize = densityToggle ? state.density : sizeFromProp;
-  const rowNumConfig = (0, import_react13.useMemo)(
+  const rowNumConfig = (0, import_react14.useMemo)(
     () => showRowNumber ? typeof showRowNumber === "object" ? showRowNumber : {} : null,
     [showRowNumber]
   );
-  const getExportData = (0, import_react13.useCallback)(() => {
+  const getExportData = (0, import_react14.useCallback)(() => {
     const cols = state.columns.map((c) => c.key);
     const headers = state.columns.map((c) => typeof c.title === "string" ? c.title : c.key);
     const rows = state.flatRows.filter((r) => !r.__groupRow).map(
@@ -3542,7 +3665,7 @@ function TableInner(props, forwardedRef) {
     );
     return { cols, headers, rows };
   }, [state.columns, state.flatRows]);
-  const handleExportCSV = (0, import_react13.useCallback)(() => {
+  const handleExportCSV = (0, import_react14.useCallback)(() => {
     const { headers, rows } = getExportData();
     const data = [headers, ...rows];
     if (onExport) {
@@ -3551,31 +3674,31 @@ function TableInner(props, forwardedRef) {
       downloadCSV(toCSVString(data));
     }
   }, [getExportData, onExport]);
-  const handleExportJSON = (0, import_react13.useCallback)(() => {
+  const handleExportJSON = (0, import_react14.useCallback)(() => {
     const { headers, rows } = getExportData();
     downloadJSON(toJSONString(headers, rows));
   }, [getExportData]);
-  const handleCopy = (0, import_react13.useCallback)(async () => {
+  const handleCopy = (0, import_react14.useCallback)(async () => {
     const { headers, rows } = getExportData();
     await copyToClipboard(toTSVString([headers, ...rows]));
   }, [getExportData]);
-  const printOptionsFromProp = (0, import_react13.useMemo)(() => {
+  const printOptionsFromProp = (0, import_react14.useMemo)(() => {
     if (typeof printable === "object" && printable !== null) {
       return { fileName: printable.fileName };
     }
     return {};
   }, [printable]);
-  const doPrint = (0, import_react13.useCallback)(
+  const doPrint = (0, import_react14.useCallback)(
     (opts) => {
       printElement(tableRef.current, { ...printOptionsFromProp, ...opts ?? {} });
     },
     [printOptionsFromProp]
   );
-  const handlePrint = (0, import_react13.useCallback)(() => {
+  const handlePrint = (0, import_react14.useCallback)(() => {
     doPrint();
   }, [doPrint]);
-  (0, import_react13.useImperativeHandle)(forwardedRef, () => ({ print: doPrint }), [doPrint]);
-  const gridTemplate = (0, import_react13.useMemo)(() => {
+  (0, import_react14.useImperativeHandle)(forwardedRef, () => ({ print: doPrint }), [doPrint]);
+  const gridTemplate = (0, import_react14.useMemo)(() => {
     const parts = [];
     if (rowDraggable) parts.push(DRAG_HANDLE_WIDTH);
     if (rowNumConfig) parts.push(rowNumConfig.width ? `${rowNumConfig.width}px` : ROW_NUMBER_WIDTH);
@@ -4006,7 +4129,7 @@ function TableInner(props, forwardedRef) {
     }
   );
 }
-var Table = (0, import_react13.forwardRef)(TableInner);
+var Table = (0, import_react14.forwardRef)(TableInner);
 Table.displayName = "Table";
 function ColumnVisibilityDropdown({
   leafColumns,
@@ -4014,9 +4137,9 @@ function ColumnVisibilityDropdown({
   onToggle,
   label
 }) {
-  const [open, setOpen] = import_react13.default.useState(false);
-  const ref = import_react13.default.useRef(null);
-  import_react13.default.useEffect(() => {
+  const [open, setOpen] = import_react14.default.useState(false);
+  const ref = import_react14.default.useRef(null);
+  import_react14.default.useEffect(() => {
     if (!open) return;
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -4038,9 +4161,9 @@ function GroupByDropdown({
   onChange,
   t
 }) {
-  const [open, setOpen] = import_react13.default.useState(false);
-  const ref = import_react13.default.useRef(null);
-  import_react13.default.useEffect(() => {
+  const [open, setOpen] = import_react14.default.useState(false);
+  const ref = import_react14.default.useRef(null);
+  import_react14.default.useEffect(() => {
     if (!open) return;
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -4088,9 +4211,9 @@ function DensityDropdown({
   onChange,
   t
 }) {
-  const [open, setOpen] = import_react13.default.useState(false);
-  const ref = import_react13.default.useRef(null);
-  import_react13.default.useEffect(() => {
+  const [open, setOpen] = import_react14.default.useState(false);
+  const ref = import_react14.default.useRef(null);
+  import_react14.default.useEffect(() => {
     if (!open) return;
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);