@skygraph/react 0.0.0-placeholder.0 → 0.4.0

package/dist/chunk-KCFWFDSP.js

@@ -0,0 +1,847 @@
+import {
+  Checkbox
+} from "./chunk-DRBAZI46.js";
+import {
+  Spin
+} from "./chunk-2OCEO636.js";
+import {
+  useVirtualScroll
+} from "./chunk-SEQI65CF.js";
+
+// src/components/complex/DataGrid/DataGrid.tsx
+import React, { forwardRef, useImperativeHandle, useCallback as useCallback2, useRef as useRef2, useMemo, useState as useState2 } from "react";
+
+// src/components/complex/DataGrid/useDataGridState.ts
+import { useState, useCallback, useRef } from "react";
+function useDataGridState(columns, data) {
+  const [activeCell, setActiveCell] = useState(null);
+  const [editingCell, setEditingCell] = useState(null);
+  const [selection, setSelection] = useState(null);
+  const [columnWidths, setColumnWidths] = useState(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      if (col.width) map.set(col.key, col.width);
+    }
+    return map;
+  });
+  const [columnOrder, setColumnOrder] = useState(null);
+  const editValueRef = useRef(void 0);
+  const dragColumnRef = useRef(null);
+  const startEditing = useCallback(
+    (pos) => {
+      const col = columns[pos.col];
+      if (!col) return;
+      const isEditable = typeof col.editable === "function" ? col.editable(data[pos.row], pos.row) : col.editable !== false;
+      if (!isEditable) return;
+      editValueRef.current = data[pos.row][col.key];
+      setEditingCell(pos);
+    },
+    [columns, data]
+  );
+  const stopEditing = useCallback(() => {
+    setEditingCell(null);
+    editValueRef.current = void 0;
+  }, []);
+  const navigate = useCallback(
+    (from, direction, shiftKey = false) => {
+      let { row, col } = from;
+      switch (direction) {
+        case "up":
+          row = Math.max(0, row - 1);
+          break;
+        case "down":
+          row = Math.min(data.length - 1, row + 1);
+          break;
+        case "left":
+          col = Math.max(0, col - 1);
+          break;
+        case "right":
+          col = Math.min(columns.length - 1, col + 1);
+          break;
+      }
+      const next = { row, col };
+      if (shiftKey) {
+        setSelection((prev) => ({
+          start: prev?.start ?? from,
+          end: next
+        }));
+      } else {
+        setSelection(null);
+      }
+      setActiveCell(next);
+      return next;
+    },
+    [data.length, columns.length]
+  );
+  const resizeColumn = useCallback(
+    (key, width) => {
+      const col = columns.find((c) => c.key === key);
+      const minW = col?.minWidth ?? 50;
+      const maxW = col?.maxWidth ?? Infinity;
+      const clamped = Math.max(minW, Math.min(maxW, width));
+      setColumnWidths((prev) => new Map(prev).set(key, clamped));
+    },
+    [columns]
+  );
+  const getColumnWidth = useCallback(
+    (key) => {
+      return columnWidths.get(key) ?? columns.find((c) => c.key === key)?.width ?? 120;
+    },
+    [columnWidths, columns]
+  );
+  const reorderColumns = useCallback(
+    (fromKey, toKey) => {
+      const order = columnOrder ?? columns.map((c) => c.key);
+      const fromIdx = order.indexOf(fromKey);
+      const toIdx = order.indexOf(toKey);
+      if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return order;
+      const next = [...order];
+      const [moved] = next.splice(fromIdx, 1);
+      next.splice(toIdx, 0, moved);
+      setColumnOrder(next);
+      return next;
+    },
+    [columnOrder, columns]
+  );
+  return {
+    activeCell,
+    setActiveCell,
+    editingCell,
+    startEditing,
+    stopEditing,
+    editValueRef,
+    selection,
+    setSelection,
+    navigate,
+    resizeColumn,
+    getColumnWidth,
+    columnOrder,
+    setColumnOrder,
+    reorderColumns,
+    dragColumnRef
+  };
+}
+
+// src/components/complex/DataGrid/DataGrid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var cls = {
+  root: "sg-datagrid",
+  header: "sg-datagrid-header",
+  headerCell: "sg-datagrid-header-cell",
+  body: "sg-datagrid-body",
+  row: "sg-datagrid-row",
+  rowEven: "sg-datagrid-row--even",
+  rowOdd: "sg-datagrid-row--odd",
+  rowHoverable: "sg-datagrid-row--hoverable",
+  rowSelected: "sg-datagrid-row--selected",
+  cell: "sg-datagrid-cell",
+  cellActive: "sg-datagrid-cell--active",
+  cellEditing: "sg-datagrid-cell--editing",
+  cellSelected: "sg-datagrid-cell--selected",
+  frozen: "sg-datagrid-cell--frozen",
+  sortable: "sg-datagrid-header-cell--sortable",
+  sortAsc: "sg-datagrid-header-cell--asc",
+  sortDesc: "sg-datagrid-header-cell--desc",
+  resizer: "sg-datagrid-resizer",
+  empty: "sg-datagrid-empty",
+  summary: "sg-datagrid-summary",
+  summaryRow: "sg-datagrid-summary-row",
+  summaryCell: "sg-datagrid-summary-cell",
+  contextMenu: "sg-datagrid-context-menu",
+  contextMenuItem: "sg-datagrid-context-menu-item",
+  contextMenuDanger: "sg-datagrid-context-menu-item--danger",
+  contextMenuDisabled: "sg-datagrid-context-menu-item--disabled",
+  contextMenuDivider: "sg-datagrid-context-menu-divider",
+  loading: "sg-datagrid-loading",
+  selectionCell: "sg-datagrid-selection-cell",
+  rowNumberCell: "sg-datagrid-row-number-cell",
+  headerDragOver: "sg-datagrid-header-cell--drag-over"
+};
+var SELECTION_COL_WIDTH = 40;
+var ROW_NUMBER_COL_WIDTH = 48;
+function DefaultEditor({ value, onChange, onCommit, onCancel }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      autoFocus: true,
+      defaultValue: value == null ? "" : String(value),
+      onChange: (e) => onChange(e.target.value),
+      onBlur: onCommit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") onCommit();
+        if (e.key === "Escape") onCancel();
+      },
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        outline: "none",
+        padding: "0 8px",
+        background: "transparent",
+        font: "inherit"
+      }
+    }
+  );
+}
+function isCellInRange(row, col, range) {
+  if (!range) return false;
+  const minRow = Math.min(range.start.row, range.end.row);
+  const maxRow = Math.max(range.start.row, range.end.row);
+  const minCol = Math.min(range.start.col, range.end.col);
+  const maxCol = Math.max(range.start.col, range.end.col);
+  return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol;
+}
+function ContextMenuPopup({
+  items,
+  position,
+  onClose
+}) {
+  const ref = useRef2(null);
+  React.useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cls.contextMenu,
+      style: { position: "fixed", top: position.y, left: position.x },
+      children: items.map(
+        (item) => item.divider ? /* @__PURE__ */ jsx("div", { className: cls.contextMenuDivider }, item.key) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              cls.contextMenuItem,
+              item.danger ? cls.contextMenuDanger : "",
+              item.disabled ? cls.contextMenuDisabled : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => {
+              if (!item.disabled) {
+                item.onClick();
+                onClose();
+              }
+            },
+            children: item.label
+          },
+          item.key
+        )
+      )
+    }
+  );
+}
+function DataGridInner(props, ref) {
+  const {
+    columns,
+    data,
+    rowKey,
+    rowHeight = 36,
+    headerHeight = 40,
+    width = "100%",
+    height = 400,
+    className,
+    style,
+    onCellEdit,
+    sortColumn,
+    sortDirection,
+    onSort,
+    onCopy,
+    onPaste,
+    overscan = 5,
+    locale,
+    rowSelection,
+    selectedRows,
+    onSelectedRowsChange,
+    striped,
+    highlightOnHover = true,
+    showRowNumber,
+    summaryRows,
+    cellClassName,
+    cellStyle: cellStyleFn,
+    columnReorder,
+    onColumnOrderChange,
+    onContextMenu,
+    onRowClick,
+    onRowDoubleClick,
+    rowClassName,
+    loading,
+    emptyContent
+  } = props;
+  const containerRef = useRef2(null);
+  const state = useDataGridState(columns, data);
+  const {
+    activeCell,
+    setActiveCell,
+    editingCell,
+    startEditing,
+    stopEditing,
+    editValueRef,
+    selection,
+    navigate,
+    resizeColumn,
+    getColumnWidth,
+    columnOrder,
+    reorderColumns,
+    dragColumnRef
+  } = state;
+  const [ctxMenu, setCtxMenu] = useState2(null);
+  const [dragOverCol, setDragOverCol] = useState2(null);
+  const { range, containerRef: scrollRef, scrollToIndex } = useVirtualScroll({
+    itemCount: data.length,
+    itemHeight: rowHeight,
+    overscan
+  });
+  const getRowKey = useCallback2(
+    (row, index) => {
+      if (typeof rowKey === "function") return rowKey(row, index);
+      return row[rowKey];
+    },
+    [rowKey]
+  );
+  const frozenLeft = useMemo(
+    () => columns.filter((c) => c.frozen === "left"),
+    [columns]
+  );
+  const frozenRight = useMemo(
+    () => columns.filter((c) => c.frozen === "right"),
+    [columns]
+  );
+  const scrollable = useMemo(
+    () => columns.filter((c) => !c.frozen),
+    [columns]
+  );
+  const orderedColumns = useMemo(() => {
+    const base = [...frozenLeft, ...scrollable, ...frozenRight];
+    if (!columnOrder) return base;
+    const map = new Map(base.map((c) => [c.key, c]));
+    const ordered = [];
+    for (const key of columnOrder) {
+      const col = map.get(key);
+      if (col) ordered.push(col);
+    }
+    for (const col of base) {
+      if (!columnOrder.includes(col.key)) ordered.push(col);
+    }
+    return ordered;
+  }, [frozenLeft, scrollable, frozenRight, columnOrder]);
+  const extraColsWidth = (rowSelection ? SELECTION_COL_WIDTH : 0) + (showRowNumber ? ROW_NUMBER_COL_WIDTH : 0);
+  const totalWidth = useMemo(
+    () => orderedColumns.reduce((sum, col) => sum + getColumnWidth(col.key), 0) + extraColsWidth,
+    [orderedColumns, getColumnWidth, extraColsWidth]
+  );
+  const allSelected = useMemo(() => {
+    if (!selectedRows || data.length === 0) return false;
+    return data.every((row, i) => selectedRows.has(getRowKey(row, i)));
+  }, [selectedRows, data, getRowKey]);
+  const someSelected = useMemo(() => {
+    if (!selectedRows || data.length === 0) return false;
+    const count = data.filter((row, i) => selectedRows.has(getRowKey(row, i))).length;
+    return count > 0 && count < data.length;
+  }, [selectedRows, data, getRowKey]);
+  const handleSelectAll = useCallback2(() => {
+    if (!onSelectedRowsChange) return;
+    if (allSelected) {
+      onSelectedRowsChange(/* @__PURE__ */ new Set());
+    } else {
+      const all = new Set(data.map((row, i) => getRowKey(row, i)));
+      onSelectedRowsChange(all);
+    }
+  }, [allSelected, data, getRowKey, onSelectedRowsChange]);
+  const handleSelectRow = useCallback2(
+    (row, index) => {
+      if (!onSelectedRowsChange || !selectedRows) return;
+      const key = getRowKey(row, index);
+      const next = new Set(selectedRows);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      onSelectedRowsChange(next);
+    },
+    [getRowKey, onSelectedRowsChange, selectedRows]
+  );
+  const handleCellClick = useCallback2(
+    (rowIndex, colIndex) => {
+      if (editingCell) {
+        if (onCellEdit && editValueRef.current !== void 0) {
+          onCellEdit(editingCell.row, orderedColumns[editingCell.col].key, editValueRef.current);
+        }
+        stopEditing();
+      }
+      setActiveCell({ row: rowIndex, col: colIndex });
+    },
+    [editingCell, onCellEdit, editValueRef, orderedColumns, stopEditing, setActiveCell]
+  );
+  const handleCellDoubleClick = useCallback2(
+    (rowIndex, colIndex) => {
+      startEditing({ row: rowIndex, col: colIndex });
+    },
+    [startEditing]
+  );
+  const handleCommitEdit = useCallback2(() => {
+    if (editingCell && onCellEdit && editValueRef.current !== void 0) {
+      onCellEdit(editingCell.row, orderedColumns[editingCell.col].key, editValueRef.current);
+    }
+    stopEditing();
+  }, [editingCell, onCellEdit, editValueRef, orderedColumns, stopEditing]);
+  const handleCancelEdit = useCallback2(() => {
+    stopEditing();
+  }, [stopEditing]);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (!activeCell) return;
+      if (editingCell) return;
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          navigate(activeCell, "up", e.shiftKey);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          navigate(activeCell, "down", e.shiftKey);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          navigate(activeCell, "left", e.shiftKey);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          navigate(activeCell, "right", e.shiftKey);
+          break;
+        case "Enter":
+          e.preventDefault();
+          startEditing(activeCell);
+          break;
+        case "Tab":
+          e.preventDefault();
+          navigate(activeCell, e.shiftKey ? "left" : "right");
+          break;
+        case "Escape":
+          setActiveCell(null);
+          break;
+        case " ":
+          if (rowSelection && selectedRows) {
+            e.preventDefault();
+            const row = data[activeCell.row];
+            if (row) handleSelectRow(row, activeCell.row);
+          }
+          break;
+        case "a":
+          if ((e.ctrlKey || e.metaKey) && rowSelection) {
+            e.preventDefault();
+            handleSelectAll();
+          }
+          break;
+        case "c":
+          if ((e.ctrlKey || e.metaKey) && onCopy) {
+            e.preventDefault();
+            const col = orderedColumns[activeCell.col];
+            const val = data[activeCell.row]?.[col.key];
+            onCopy(val == null ? "" : String(val));
+          }
+          break;
+        case "v":
+          if ((e.ctrlKey || e.metaKey) && onPaste) {
+            e.preventDefault();
+            navigator.clipboard?.readText().then((text) => {
+              onPaste(text, activeCell);
+            });
+          }
+          break;
+      }
+    },
+    [
+      activeCell,
+      editingCell,
+      navigate,
+      startEditing,
+      setActiveCell,
+      onCopy,
+      onPaste,
+      orderedColumns,
+      data,
+      rowSelection,
+      selectedRows,
+      handleSelectRow,
+      handleSelectAll
+    ]
+  );
+  const handleSort = useCallback2(
+    (col) => {
+      if (!col.sortable || !onSort) return;
+      const dir = sortColumn === col.key && sortDirection === "asc" ? "desc" : "asc";
+      onSort(col.key, dir);
+    },
+    [sortColumn, sortDirection, onSort]
+  );
+  const handleCellContextMenu = useCallback2(
+    (e, rowIndex, col) => {
+      if (!onContextMenu) return;
+      e.preventDefault();
+      const row = data[rowIndex];
+      if (!row) return;
+      const items = onContextMenu(rowIndex, col.key, row);
+      if (items.length === 0) return;
+      setCtxMenu({ items, position: { x: e.clientX, y: e.clientY } });
+    },
+    [onContextMenu, data]
+  );
+  const handleHeaderDragStart = useCallback2(
+    (e, colKey) => {
+      if (!columnReorder) return;
+      dragColumnRef.current = colKey;
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [columnReorder, dragColumnRef]
+  );
+  const handleHeaderDragOver = useCallback2(
+    (e, colKey) => {
+      if (!columnReorder || !dragColumnRef.current) return;
+      e.preventDefault();
+      setDragOverCol(colKey);
+    },
+    [columnReorder, dragColumnRef]
+  );
+  const handleHeaderDrop = useCallback2(
+    (e, colKey) => {
+      e.preventDefault();
+      if (!columnReorder || !dragColumnRef.current) return;
+      const newOrder = reorderColumns(dragColumnRef.current, colKey);
+      dragColumnRef.current = null;
+      setDragOverCol(null);
+      onColumnOrderChange?.(newOrder);
+    },
+    [columnReorder, dragColumnRef, reorderColumns, onColumnOrderChange]
+  );
+  const handleHeaderDragEnd = useCallback2(() => {
+    dragColumnRef.current = null;
+    setDragOverCol(null);
+  }, [dragColumnRef]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToRow: scrollToIndex,
+      scrollToColumn: () => {
+      },
+      getActiveCell: () => activeCell,
+      setActiveCell
+    }),
+    [scrollToIndex, activeCell, setActiveCell]
+  );
+  const handleResizeStart = useCallback2(
+    (colKey, startX) => {
+      const startWidth = getColumnWidth(colKey);
+      const onMouseMove = (e) => {
+        const delta = e.clientX - startX;
+        resizeColumn(colKey, startWidth + delta);
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [getColumnWidth, resizeColumn]
+  );
+  const renderCell = useCallback2(
+    (row, rowIndex, col, colIndex) => {
+      const isActive = activeCell?.row === rowIndex && activeCell?.col === colIndex;
+      const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
+      const isSelected = isCellInRange(rowIndex, colIndex, selection);
+      const rawValue = col.formula ? col.formula(row) : row[col.key];
+      const extraClass = cellClassName?.(rawValue, row, rowIndex, col) ?? "";
+      const extraStyle = cellStyleFn?.(rawValue, row, rowIndex, col);
+      const cellClassNames = [
+        cls.cell,
+        isActive ? cls.cellActive : "",
+        isEditing ? cls.cellEditing : "",
+        isSelected ? cls.cellSelected : "",
+        col.frozen ? cls.frozen : "",
+        col.className ?? "",
+        extraClass
+      ].filter(Boolean).join(" ");
+      const baseCellStyle = {
+        width: getColumnWidth(col.key),
+        minWidth: getColumnWidth(col.key),
+        textAlign: col.align ?? "left",
+        ...extraStyle
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cellClassNames,
+          style: baseCellStyle,
+          onClick: () => handleCellClick(rowIndex, colIndex),
+          onDoubleClick: () => handleCellDoubleClick(rowIndex, colIndex),
+          onContextMenu: (e) => handleCellContextMenu(e, rowIndex, col),
+          role: "gridcell",
+          "aria-colindex": colIndex + 1 + (rowSelection ? 1 : 0) + (showRowNumber ? 1 : 0),
+          "aria-selected": isActive || isSelected,
+          children: isEditing ? (col.editor ?? DefaultEditor)({
+            value: rawValue,
+            row,
+            rowIndex,
+            column: col,
+            onChange: (v) => {
+              editValueRef.current = v;
+            },
+            onCommit: handleCommitEdit,
+            onCancel: handleCancelEdit
+          }) : col.render ? col.render(rawValue, row, rowIndex) : /* @__PURE__ */ jsx("span", { children: rawValue == null ? "" : String(rawValue) })
+        },
+        col.key
+      );
+    },
+    [
+      activeCell,
+      editingCell,
+      selection,
+      getColumnWidth,
+      handleCellClick,
+      handleCellDoubleClick,
+      handleCommitEdit,
+      handleCancelEdit,
+      editValueRef,
+      cellClassName,
+      cellStyleFn,
+      handleCellContextMenu,
+      rowSelection,
+      showRowNumber
+    ]
+  );
+  const heightValue = typeof height === "number" ? height : void 0;
+  const bodyHeight = heightValue ? heightValue - headerHeight : void 0;
+  const rootCls = [
+    cls.root,
+    striped ? "sg-datagrid--striped" : "",
+    loading ? "sg-datagrid--loading" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: rootCls,
+      style: { width, height, display: "flex", flexDirection: "column", position: "relative", ...style },
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "grid",
+      "aria-rowcount": data.length,
+      "aria-colcount": orderedColumns.length,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cls.header,
+            style: {
+              display: "flex",
+              height: headerHeight,
+              minHeight: headerHeight,
+              minWidth: totalWidth
+            },
+            role: "row",
+            children: [
+              rowSelection && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${cls.headerCell} ${cls.selectionCell}`,
+                  style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center" },
+                  role: "columnheader",
+                  children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: allSelected,
+                      indeterminate: someSelected,
+                      onChange: handleSelectAll
+                    }
+                  )
+                }
+              ),
+              showRowNumber && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${cls.headerCell} ${cls.rowNumberCell}`,
+                  style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center", userSelect: "none" },
+                  role: "columnheader",
+                  children: "#"
+                }
+              ),
+              orderedColumns.map((col) => {
+                const isSorted = sortColumn === col.key;
+                const headerCls = [
+                  cls.headerCell,
+                  col.sortable ? cls.sortable : "",
+                  isSorted && sortDirection === "asc" ? cls.sortAsc : "",
+                  isSorted && sortDirection === "desc" ? cls.sortDesc : "",
+                  col.headerClassName ?? "",
+                  dragOverCol === col.key ? cls.headerDragOver : ""
+                ].filter(Boolean).join(" ");
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: headerCls,
+                    style: {
+                      width: getColumnWidth(col.key),
+                      minWidth: getColumnWidth(col.key),
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "0 8px",
+                      cursor: col.sortable ? "pointer" : "default",
+                      userSelect: "none"
+                    },
+                    onClick: () => handleSort(col),
+                    draggable: !!columnReorder,
+                    onDragStart: (e) => handleHeaderDragStart(e, col.key),
+                    onDragOver: (e) => handleHeaderDragOver(e, col.key),
+                    onDrop: (e) => handleHeaderDrop(e, col.key),
+                    onDragEnd: handleHeaderDragEnd,
+                    onDragLeave: () => setDragOverCol(null),
+                    role: "columnheader",
+                    children: [
+                      col.title,
+                      isSorted && /* @__PURE__ */ jsx("span", { style: { marginLeft: 4, fontSize: 10 }, children: sortDirection === "asc" ? "\u25B2" : "\u25BC" }),
+                      col.resizable !== false && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cls.resizer,
+                          style: {
+                            position: "absolute",
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            width: 4,
+                            cursor: "col-resize"
+                          },
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            handleResizeStart(col.key, e.clientX);
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  col.key
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: cls.body,
+            style: {
+              flex: 1,
+              overflow: "auto",
+              position: "relative",
+              height: bodyHeight
+            },
+            children: data.length === 0 ? /* @__PURE__ */ jsx("div", { className: cls.empty, style: { padding: 24, textAlign: "center" }, children: emptyContent ?? locale?.noData ?? "No data" }) : /* @__PURE__ */ jsx("div", { style: { height: range.totalHeight, position: "relative", minWidth: totalWidth }, children: range.visibleItems.map((vi) => {
+              const row = data[vi.index];
+              if (!row) return null;
+              const rKey = getRowKey(row, vi.index);
+              const isRowSelected = selectedRows?.has(rKey) ?? false;
+              const rowExtraClass = typeof rowClassName === "function" ? rowClassName(row, vi.index) : rowClassName ?? "";
+              const rowCls = [
+                cls.row,
+                striped ? vi.index % 2 === 0 ? cls.rowEven : cls.rowOdd : "",
+                highlightOnHover ? cls.rowHoverable : "",
+                isRowSelected ? cls.rowSelected : "",
+                rowExtraClass
+              ].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: rowCls,
+                  style: {
+                    display: "flex",
+                    position: "absolute",
+                    top: vi.offsetTop,
+                    height: vi.height,
+                    width: "100%"
+                  },
+                  role: "row",
+                  "aria-rowindex": vi.index + 1,
+                  "aria-selected": isRowSelected,
+                  onClick: () => onRowClick?.(row, vi.index),
+                  onDoubleClick: () => onRowDoubleClick?.(row, vi.index),
+                  children: [
+                    rowSelection && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `${cls.cell} ${cls.selectionCell}`,
+                        style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center" },
+                        onClick: (e) => e.stopPropagation(),
+                        children: /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: isRowSelected,
+                            onChange: () => handleSelectRow(row, vi.index)
+                          }
+                        )
+                      }
+                    ),
+                    showRowNumber && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `${cls.cell} ${cls.rowNumberCell}`,
+                        style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--sg-text-tertiary, #999)" },
+                        children: vi.index + 1
+                      }
+                    ),
+                    orderedColumns.map((col, ci) => renderCell(row, vi.index, col, ci))
+                  ]
+                },
+                rKey
+              );
+            }) })
+          }
+        ),
+        summaryRows && summaryRows.length > 0 && data.length > 0 && /* @__PURE__ */ jsx("div", { className: cls.summary, style: { minWidth: totalWidth }, children: summaryRows.map((sr, sri) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${cls.summaryRow} ${sr.className ?? ""}`,
+            style: { display: "flex", height: rowHeight },
+            children: [
+              rowSelection && /* @__PURE__ */ jsx("div", { className: `${cls.summaryCell}`, style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH } }),
+              showRowNumber && /* @__PURE__ */ jsx("div", { className: `${cls.summaryCell}`, style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH } }),
+              orderedColumns.map((col) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cls.summaryCell,
+                  style: {
+                    width: getColumnWidth(col.key),
+                    minWidth: getColumnWidth(col.key),
+                    textAlign: col.align ?? "left"
+                  },
+                  children: sr.render(col.key, data)
+                },
+                col.key
+              ))
+            ]
+          },
+          sri
+        )) }),
+        ctxMenu && /* @__PURE__ */ jsx(
+          ContextMenuPopup,
+          {
+            items: ctxMenu.items,
+            position: ctxMenu.position,
+            onClose: () => setCtxMenu(null)
+          }
+        ),
+        loading && /* @__PURE__ */ jsx("div", { className: cls.loading, style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.6)", zIndex: 10 }, children: /* @__PURE__ */ jsx(Spin, { size: "large" }) })
+      ]
+    }
+  );
+}
+var DataGrid = forwardRef(DataGridInner);
+
+export {
+  DataGrid
+};
+//# sourceMappingURL=chunk-KCFWFDSP.js.map