@skygraph/react 0.5.2 → 0.5.3

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,7 +1741,7 @@ function TableBody(props) {
       onContextMenu({ x: e.clientX, y: e.clientY, items });
     }
   };
-  const handleCellCopy = (0, import_react8.useCallback)(
+  const handleCellCopy = (0, import_react9.useCallback)(
     async (rowId, colKey, value) => {
       await copyToClipboard(String(value ?? ""));
       setCopiedCell(`${rowId}:${colKey}`);
@@ -1702,7 +1785,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",
         {
@@ -1877,7 +1960,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 +1990,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 +1999,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 +2017,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 +2048,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 +2070,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 +2147,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 +2234,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 +2248,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 +2266,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 +2773,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 +2822,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 +2830,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 +2849,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 +2867,16 @@ 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 [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 +2885,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 +2895,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 +2918,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 +2928,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 +2977,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;
@@ -3051,19 +3134,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,10 +3157,10 @@ function useTableState(props) {
     }));
     table.groupBy(groupBy, aggregates2);
   }, [groupBy, leafColumns, table]);
-  const [expandedGroups, setExpandedGroups] = (0, import_react12.useState)(() => {
+  const [expandedGroups, setExpandedGroups] = (0, import_react13.useState)(() => {
     return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
   });
-  const toggleGroupExpand = (0, import_react12.useCallback)(
+  const toggleGroupExpand = (0, import_react13.useCallback)(
     (groupKey) => {
       setExpandedGroups((prev) => {
         const next = new Set(prev);
@@ -3093,18 +3176,18 @@ function useTableState(props) {
     },
     [onGroupExpandChange]
   );
-  const expandAllGroups = (0, import_react12.useCallback)(() => {
+  const expandAllGroups = (0, import_react13.useCallback)(() => {
     setExpandedGroups((prev) => {
       const next = new Set(prev);
       next.add("__all__");
       return next;
     });
   }, []);
-  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 +3243,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 +3263,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,7 +3274,7 @@ function useTableState(props) {
     }
     return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
   }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
-  const groupedRows = (0, import_react12.useMemo)(() => {
+  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;
@@ -3201,12 +3284,12 @@ function useTableState(props) {
     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 +3325,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 +3337,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 +3351,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 +3607,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 +3625,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 +3634,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 +4089,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 +4097,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 +4121,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 +4171,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);