@skygraph/react 0.0.0-placeholder.0 → 0.4.0

package/dist/datagrid.cjs

@@ -0,0 +1,1052 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/datagrid.ts
+var datagrid_exports = {};
+__export(datagrid_exports, {
+  DataGrid: () => DataGrid
+});
+module.exports = __toCommonJS(datagrid_exports);
+
+// src/components/complex/DataGrid/DataGrid.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/hooks/useVirtualScroll.ts
+var import_react = require("react");
+var import_core = require("@skygraph/core");
+function useVirtualScroll(options) {
+  const containerRef = (0, import_react.useRef)(null);
+  const engineRef = (0, import_react.useRef)(null);
+  if (!engineRef.current) {
+    engineRef.current = (0, import_core.createVirtual)({
+      itemCount: options.itemCount,
+      itemHeight: options.itemHeight,
+      overscan: options.overscan
+    });
+  }
+  const engine = engineRef.current;
+  (0, import_react.useEffect)(() => {
+    engine.setItemCount(options.itemCount);
+  }, [engine, options.itemCount]);
+  (0, import_react.useEffect)(() => {
+    engine.setItemHeight(options.itemHeight);
+  }, [engine, options.itemHeight]);
+  const [range, setRange] = (0, import_react.useState)(
+    () => engine.getRange(0, 0)
+  );
+  const recalc = (0, import_react.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setRange(engine.getRange(el.scrollTop, el.clientHeight));
+  }, [engine]);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    recalc();
+    el.addEventListener("scroll", recalc, { passive: true });
+    const ro = new ResizeObserver(recalc);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", recalc);
+      ro.disconnect();
+    };
+  }, [recalc]);
+  (0, import_react.useEffect)(() => {
+    recalc();
+  }, [options.itemCount, recalc]);
+  const scrollToIndex = (0, import_react.useCallback)(
+    (index, align = "start") => {
+      const el = containerRef.current;
+      if (!el) return;
+      el.scrollTop = engine.scrollToIndex(index, el.clientHeight, align);
+    },
+    [engine]
+  );
+  return (0, import_react.useMemo)(
+    () => ({ range, containerRef, scrollToIndex, engine }),
+    [range, scrollToIndex, engine]
+  );
+}
+
+// src/components/ui/Spin.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/components/ConfigProvider.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SgConfigContext = (0, import_react2.createContext)({});
+function useConfig() {
+  return (0, import_react2.useContext)(SgConfigContext);
+}
+
+// src/components/ui/Spin.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Spin({
+  spinning = true,
+  size: sizeProp,
+  delay,
+  tip,
+  fullscreen,
+  indicator,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const resolvedSize = sizeProp ?? config.size ?? "middle";
+  const [visible, setVisible] = import_react3.default.useState(delay ? false : spinning);
+  import_react3.default.useEffect(() => {
+    if (!delay) {
+      setVisible(spinning);
+      return;
+    }
+    if (spinning) {
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [spinning, delay]);
+  if (!visible && !children) return null;
+  if (!visible && children) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  const spinSizeClass = resolvedSize === "middle" ? "default" : resolvedSize;
+  const spinClasses = unstyled ? className ?? "" : ["sg-spin", `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(" ");
+  const spinElement = indicator ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: spinClasses,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": config.locale?.spin?.loading ?? "Loading"
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-fullscreen-inner", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }) });
+  }
+  if (!children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: unstyled ? "" : "sg-spin-standalone", style, children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-container", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: unstyled ? "" : "sg-spin-overlay", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: visible ? unstyled ? "" : "sg-spin-blur" : "", children })
+  ] });
+}
+
+// src/components/ui/Checkbox.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Checkbox({
+  checked,
+  defaultChecked,
+  disabled: disabledProp,
+  loading,
+  indeterminate,
+  onChange,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const inputRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-checkbox",
+    disabled || loading ? "sg-checkbox-disabled" : "",
+    loading ? "sg-checkbox-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: wrapperClass, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        "aria-checked": checked,
+        className: unstyled ? "" : "sg-checkbox-input",
+        checked,
+        defaultChecked,
+        disabled: disabled || loading,
+        onChange: (e) => onChange?.(e.target.checked)
+      }
+    ),
+    children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: unstyled ? "" : "sg-checkbox-label", children }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spin, { size: "small", unstyled })
+  ] });
+}
+
+// src/components/complex/DataGrid/useDataGridState.ts
+var import_react5 = require("react");
+function useDataGridState(columns, data) {
+  const [activeCell, setActiveCell] = (0, import_react5.useState)(null);
+  const [editingCell, setEditingCell] = (0, import_react5.useState)(null);
+  const [selection, setSelection] = (0, import_react5.useState)(null);
+  const [columnWidths, setColumnWidths] = (0, import_react5.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] = (0, import_react5.useState)(null);
+  const editValueRef = (0, import_react5.useRef)(void 0);
+  const dragColumnRef = (0, import_react5.useRef)(null);
+  const startEditing = (0, import_react5.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 = (0, import_react5.useCallback)(() => {
+    setEditingCell(null);
+    editValueRef.current = void 0;
+  }, []);
+  const navigate = (0, import_react5.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 = (0, import_react5.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 = (0, import_react5.useCallback)(
+    (key) => {
+      return columnWidths.get(key) ?? columns.find((c) => c.key === key)?.width ?? 120;
+    },
+    [columnWidths, columns]
+  );
+  const reorderColumns = (0, import_react5.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
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.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 = (0, import_react6.useRef)(null);
+  import_react6.default.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__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cls.contextMenu,
+      style: { position: "fixed", top: position.y, left: position.x },
+      children: items.map(
+        (item) => item.divider ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls.contextMenuDivider }, item.key) : /* @__PURE__ */ (0, import_jsx_runtime4.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 = (0, import_react6.useRef)(null);
+  const state = useDataGridState(columns, data);
+  const {
+    activeCell,
+    setActiveCell,
+    editingCell,
+    startEditing,
+    stopEditing,
+    editValueRef,
+    selection,
+    navigate,
+    resizeColumn,
+    getColumnWidth,
+    columnOrder,
+    reorderColumns,
+    dragColumnRef
+  } = state;
+  const [ctxMenu, setCtxMenu] = (0, import_react6.useState)(null);
+  const [dragOverCol, setDragOverCol] = (0, import_react6.useState)(null);
+  const { range, containerRef: scrollRef, scrollToIndex } = useVirtualScroll({
+    itemCount: data.length,
+    itemHeight: rowHeight,
+    overscan
+  });
+  const getRowKey = (0, import_react6.useCallback)(
+    (row, index) => {
+      if (typeof rowKey === "function") return rowKey(row, index);
+      return row[rowKey];
+    },
+    [rowKey]
+  );
+  const frozenLeft = (0, import_react6.useMemo)(
+    () => columns.filter((c) => c.frozen === "left"),
+    [columns]
+  );
+  const frozenRight = (0, import_react6.useMemo)(
+    () => columns.filter((c) => c.frozen === "right"),
+    [columns]
+  );
+  const scrollable = (0, import_react6.useMemo)(
+    () => columns.filter((c) => !c.frozen),
+    [columns]
+  );
+  const orderedColumns = (0, import_react6.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 = (0, import_react6.useMemo)(
+    () => orderedColumns.reduce((sum, col) => sum + getColumnWidth(col.key), 0) + extraColsWidth,
+    [orderedColumns, getColumnWidth, extraColsWidth]
+  );
+  const allSelected = (0, import_react6.useMemo)(() => {
+    if (!selectedRows || data.length === 0) return false;
+    return data.every((row, i) => selectedRows.has(getRowKey(row, i)));
+  }, [selectedRows, data, getRowKey]);
+  const someSelected = (0, import_react6.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 = (0, import_react6.useCallback)(() => {
+    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 = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (rowIndex, colIndex) => {
+      startEditing({ row: rowIndex, col: colIndex });
+    },
+    [startEditing]
+  );
+  const handleCommitEdit = (0, import_react6.useCallback)(() => {
+    if (editingCell && onCellEdit && editValueRef.current !== void 0) {
+      onCellEdit(editingCell.row, orderedColumns[editingCell.col].key, editValueRef.current);
+    }
+    stopEditing();
+  }, [editingCell, onCellEdit, editValueRef, orderedColumns, stopEditing]);
+  const handleCancelEdit = (0, import_react6.useCallback)(() => {
+    stopEditing();
+  }, [stopEditing]);
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (col) => {
+      if (!col.sortable || !onSort) return;
+      const dir = sortColumn === col.key && sortDirection === "asc" ? "desc" : "asc";
+      onSort(col.key, dir);
+    },
+    [sortColumn, sortDirection, onSort]
+  );
+  const handleCellContextMenu = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (e, colKey) => {
+      if (!columnReorder) return;
+      dragColumnRef.current = colKey;
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [columnReorder, dragColumnRef]
+  );
+  const handleHeaderDragOver = (0, import_react6.useCallback)(
+    (e, colKey) => {
+      if (!columnReorder || !dragColumnRef.current) return;
+      e.preventDefault();
+      setDragOverCol(colKey);
+    },
+    [columnReorder, dragColumnRef]
+  );
+  const handleHeaderDrop = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(() => {
+    dragColumnRef.current = null;
+    setDragOverCol(null);
+  }, [dragColumnRef]);
+  (0, import_react6.useImperativeHandle)(
+    ref,
+    () => ({
+      scrollToRow: scrollToIndex,
+      scrollToColumn: () => {
+      },
+      getActiveCell: () => activeCell,
+      setActiveCell
+    }),
+    [scrollToIndex, activeCell, setActiveCell]
+  );
+  const handleResizeStart = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+    (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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: cls.header,
+            style: {
+              display: "flex",
+              height: headerHeight,
+              minHeight: headerHeight,
+              minWidth: totalWidth
+            },
+            role: "row",
+            children: [
+              rowSelection && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                    Checkbox,
+                    {
+                      checked: allSelected,
+                      indeterminate: someSelected,
+                      onChange: handleSelectAll
+                    }
+                  )
+                }
+              ),
+              showRowNumber && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("span", { style: { marginLeft: 4, fontSize: 10 }, children: sortDirection === "asc" ? "\u25B2" : "\u25BC" }),
+                      col.resizable !== false && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: scrollRef,
+            className: cls.body,
+            style: {
+              flex: 1,
+              overflow: "auto",
+              position: "relative",
+              height: bodyHeight
+            },
+            children: data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls.empty, style: { padding: 24, textAlign: "center" }, children: emptyContent ?? locale?.noData ?? "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                          Checkbox,
+                          {
+                            checked: isRowSelected,
+                            onChange: () => handleSelectRow(row, vi.index)
+                          }
+                        )
+                      }
+                    ),
+                    showRowNumber && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls.summary, style: { minWidth: totalWidth }, children: summaryRows.map((sr, sri) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: `${cls.summaryRow} ${sr.className ?? ""}`,
+            style: { display: "flex", height: rowHeight },
+            children: [
+              rowSelection && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${cls.summaryCell}`, style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH } }),
+              showRowNumber && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${cls.summaryCell}`, style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH } }),
+              orderedColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+          ContextMenuPopup,
+          {
+            items: ctxMenu.items,
+            position: ctxMenu.position,
+            onClose: () => setCtxMenu(null)
+          }
+        ),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(Spin, { size: "large" }) })
+      ]
+    }
+  );
+}
+var DataGrid = (0, import_react6.forwardRef)(DataGridInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataGrid
+});
+//# sourceMappingURL=datagrid.cjs.map