@salt-ds/data-grid 1.0.0

package/dist-es/packages/grid/src/Grid.js

@@ -0,0 +1,930 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { GridContext } from './GridContext.js';
+import cn from 'classnames';
+import './internal/Cell.js';
+import { CellMeasure } from './internal/CellMeasure.js';
+import './internal/Cursor.js';
+import './internal/GroupHeaderRow.js';
+import './internal/HeaderRow.js';
+import { LeftPart } from './internal/LeftPart.js';
+import { MiddlePart } from './internal/MiddlePart.js';
+import { RightPart } from './internal/RightPart.js';
+import { Scrollable } from './internal/Scrollable.js';
+import './internal/TableRow.js';
+import { clamp, getFocusablePosition } from './internal/utils.js';
+import { SelectionContext } from './SelectionContext.js';
+import { EditorContext } from './EditorContext.js';
+import { CursorContext } from './CursorContext.js';
+import { useColumnRegistry, useSumWidth, useSum, useClientMidWidth, useBodyVisibleColumnRange, useVisibleColumnGroupRange, useHeadVisibleColumnRange, useLeftScrolledOutWidth, useClientMidHeight, useVisibleRowRange, useBodyVisibleAreaTop, useColumnRange, useSumRangeWidth, useScrollToCell, useRowSelection, useRangeSelection, useRowModels, useColumnResize, useColumnMove } from './internal/gridHooks.js';
+import { TopLeftPart } from './internal/TopLeftPart.js';
+import { TopPart } from './internal/TopPart.js';
+import { TopRightPart } from './internal/TopRightPart.js';
+import './internal/FakeCell.css.js';
+import './internal/DefaultCellValue.js';
+import './Grid.css.js';
+import { SizingContext } from './SizingContext.js';
+import { LayoutContext } from './LayoutContext.js';
+import { ColumnDragContext } from './ColumnDragContext.js';
+import { ColumnGhost } from './internal/ColumnGhost.js';
+import { ColumnDropTarget } from './internal/ColumnDropTarget.js';
+import { ColumnDataContext } from './ColumnDataContext.js';
+
+const withBaseName = makePrefixer("saltGrid");
+function defaultRowKeyGetter(row, index) {
+  return `${index}`;
+}
+const Grid = function Grid2(props) {
+  const {
+    rowData,
+    zebra,
+    hideHeader,
+    columnSeparators,
+    pinnedSeparators = true,
+    className,
+    style,
+    rowKeyGetter = defaultRowKeyGetter,
+    children,
+    defaultSelectedRowIdxs,
+    selectedRowIdxs,
+    variant = "primary",
+    rowSelectionMode = "multi",
+    onRowSelected,
+    columnMove,
+    onColumnMoved,
+    cellSelectionMode = "none",
+    onVisibleRowRangeChange,
+    headerIsFocusable
+  } = props;
+  const rootRef = useRef(null);
+  const scrollableRef = useRef(null);
+  const middleRef = useRef(null);
+  const topRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const bottomRef = useRef(null);
+  const [scrollSource, setScrollSource] = useState("user");
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [hoverRowKey, setHoverRowKey] = useState(void 0);
+  const [clientWidth, setClientWidth] = useState(0);
+  const [clientHeight, setClientHeight] = useState(0);
+  const [scrollBarHeight, setScrollBarHeight] = useState(0);
+  const [scrollBarWidth, setScrollBarWidth] = useState(0);
+  const [rowHeight, setRowHeight] = useState(0);
+  const [cursorRowIdx, setCursorRowIdx] = useState(0);
+  const [cursorColIdx, setCursorColIdx] = useState(0);
+  const [focusedPart, setFocusedPart] = useState(
+    headerIsFocusable ? "header" : "body"
+  );
+  const [editMode, setEditMode] = useState(false);
+  const [initialText, setInitialText] = useState(void 0);
+  const resizeClient = useCallback(
+    (clW, clH, sbW, sbH) => {
+      setClientHeight(clH);
+      setClientWidth(clW);
+      setScrollBarHeight(sbH);
+      setScrollBarWidth(sbW);
+    },
+    [setClientHeight, setClientWidth, setScrollBarHeight, setScrollBarWidth]
+  );
+  const {
+    leftCols,
+    midCols,
+    rightCols,
+    leftGroups,
+    midGroups,
+    rightGroups,
+    contextValue
+  } = useColumnRegistry(children);
+  const midColsById = useMemo(
+    () => new Map(
+      midCols.map((c) => [c.info.props.id, c])
+    ),
+    [midCols]
+  );
+  const leftWidth = useSumWidth(leftCols);
+  const midWidth = useSumWidth(midCols);
+  const rightWidth = useSumWidth(rightCols);
+  const totalWidth = useSum([leftWidth, midWidth, rightWidth]);
+  const hasColumnGroups = leftGroups.length > 0 || midGroups.length > 0 || rightGroups.length > 0;
+  const headRowCount = hideHeader ? 0 : hasColumnGroups ? 2 : 1;
+  const rowCount = rowData.length;
+  const botRowCount = 0;
+  const topHeight = rowHeight * headRowCount;
+  const midHeight = rowCount === 0 ? 0 : rowHeight * rowCount + 1;
+  const botHeight = botRowCount * rowHeight;
+  const totalHeight = useSum([topHeight, midHeight, botHeight]);
+  const clientMidWidth = useClientMidWidth(clientWidth, leftWidth, rightWidth);
+  const midGap = Math.max(0, Math.floor(clientMidWidth - midWidth));
+  const bodyVisColRng = useBodyVisibleColumnRange(
+    midCols,
+    scrollLeft,
+    clientMidWidth
+  );
+  const midGrpByColId = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (let g of midGroups) {
+      for (let c of g.childrenIds) {
+        m.set(c, g);
+      }
+    }
+    return m;
+  }, [midGroups]);
+  const visColGrpRng = useVisibleColumnGroupRange(
+    bodyVisColRng,
+    midCols,
+    midGrpByColId,
+    leftGroups.length
+  );
+  const visColGrps = useMemo(() => {
+    return midGroups.slice(visColGrpRng.start, visColGrpRng.end);
+  }, [visColGrpRng, midGroups]);
+  const headVisColRng = useHeadVisibleColumnRange(
+    bodyVisColRng,
+    visColGrps,
+    midColsById,
+    leftCols.length
+  );
+  const bodyScrOutColWh = useLeftScrolledOutWidth(midCols, bodyVisColRng);
+  const headScrOutColWh = useLeftScrolledOutWidth(midCols, headVisColRng);
+  const bodyVisAreaLeft = useSum([leftWidth, bodyScrOutColWh]);
+  const headVisAreaLeft = useSum([leftWidth, headScrOutColWh]);
+  const clientMidHeight = useClientMidHeight(
+    clientHeight,
+    topHeight,
+    botHeight
+  );
+  const visRowRng = useVisibleRowRange(
+    scrollTop,
+    clientMidHeight,
+    rowHeight,
+    rowCount
+  );
+  const bodyVisAreaTop = useBodyVisibleAreaTop(rowHeight, visRowRng, topHeight);
+  const bodyVisibleColumns = useColumnRange(midCols, bodyVisColRng);
+  const headVisibleColumns = useColumnRange(midCols, headVisColRng);
+  const bodyVisColWh = useSumRangeWidth(midCols, bodyVisColRng);
+  const headVisColWh = bodyVisColWh;
+  const rootStyle = useMemo(
+    () => ({
+      ...style,
+      "--grid-total-width": `${totalWidth}px`,
+      "--grid-total-height": `${totalHeight}px`,
+      "--grid-topPart-height": `${topHeight}px`,
+      "--grid-leftPart-width": `${leftWidth}px`,
+      "--grid-rightPart-width": `${rightWidth}px`,
+      "--grid-bodyVisibleColumns-width": `${bodyVisColWh}px`,
+      "--grid-bodyVisibleArea-top": `${bodyVisAreaTop}px`,
+      "--grid-bodyVisibleArea-left": `${bodyVisAreaLeft}px`,
+      "--grid-bottomHeight": `${botHeight}px`,
+      "--grid-headerVisibleColumns-width": `${headVisColWh}px`,
+      "--grid-headerVisibleArea-left": `${headVisAreaLeft}px`,
+      "--grid-scrollBar-height": `${scrollBarHeight}px`,
+      "--grid-scrollBar-width": `${scrollBarWidth}px`
+    }),
+    [
+      style,
+      totalHeight,
+      totalWidth,
+      topHeight,
+      leftWidth,
+      rightWidth,
+      botHeight,
+      bodyVisColWh,
+      bodyVisAreaLeft,
+      bodyVisAreaTop,
+      headVisColWh,
+      headVisAreaLeft,
+      scrollBarHeight,
+      scrollBarWidth
+    ]
+  );
+  const onWheel = useCallback(
+    (event) => {
+      let { deltaX, deltaY, shiftKey } = event;
+      if (deltaX === 0 && shiftKey) {
+        deltaX = deltaY;
+        deltaY = 0;
+      }
+      const s = scrollableRef.current;
+      if (s) {
+        s.scrollLeft += deltaX;
+        s.scrollTop += deltaY;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [scrollableRef.current]
+  );
+  const cols = useMemo(
+    () => [...leftCols, ...midCols, ...rightCols],
+    [leftCols, midCols, rightCols]
+  );
+  const colsById = useMemo(
+    () => new Map(
+      cols.map((c) => [c.info.props.id, c])
+    ),
+    [cols]
+  );
+  const getColById = useCallback(
+    (id) => {
+      return colsById.get(id);
+    },
+    [colsById]
+  );
+  const columnDataContext = useMemo(
+    () => ({
+      getColById
+    }),
+    [getColById]
+  );
+  const scroll = useCallback(
+    (left, top, source) => {
+      setScrollSource(source || "user");
+      if (left !== void 0) {
+        setScrollLeft(left);
+      }
+      if (top !== void 0) {
+        setScrollTop(top);
+      }
+    },
+    [setScrollLeft, setScrollTop, setScrollSource]
+  );
+  const scrollToCell = useScrollToCell(
+    visRowRng,
+    rowHeight,
+    clientMidHeight,
+    midCols,
+    bodyVisColRng,
+    clientMidWidth,
+    scroll
+  );
+  const focusCellElement = (part, rowIdx, colIdx) => {
+    setTimeout(() => {
+      var _a;
+      const selector = part === "body" ? `td[data-row-index="${rowIdx}"][data-column-index="${colIdx}"]` : `th[data-column-index="${colIdx}"]`;
+      const nodeToFocus = (_a = rootRef.current) == null ? void 0 : _a.querySelector(selector);
+      if (nodeToFocus) {
+        nodeToFocus.focus({ preventScroll: true });
+      } else {
+        console.warn(`focusCellElement can't find the element`);
+      }
+    }, 0);
+  };
+  const startEditMode = (text) => {
+    if (editMode || cursorRowIdx == void 0 || cursorColIdx == void 0) {
+      return;
+    }
+    const c = cols[cursorColIdx];
+    const isEditable = !!contextValue.getEditor(c.info.props.id);
+    if (isEditable) {
+      setInitialText(text);
+      setEditMode(true);
+    }
+  };
+  const endEditMode = (value) => {
+    if (!editMode) {
+      return;
+    }
+    if (cursorColIdx == void 0) {
+      console.error(`endEditMode: cursorColIdx is undefined in edit mode`);
+      return;
+    }
+    const c = cols[cursorColIdx];
+    const handler = c.info.props.onChange;
+    if (cursorRowIdx == void 0) {
+      console.error(`endEditMode: cursorRowIdx is undefined in edit mode`);
+      return;
+    }
+    if (!handler) {
+      console.warn(
+        `onChange is not specified for editable column "${c.info.props.id}".`
+      );
+    } else {
+      handler(rowData[cursorRowIdx], cursorRowIdx, value);
+    }
+    setEditMode(false);
+    focusCellElement(focusedPart, cursorRowIdx, cursorColIdx);
+  };
+  const cancelEditMode = () => {
+    if (!editMode) {
+      return;
+    }
+    setEditMode(false);
+    if (cursorRowIdx != null && cursorColIdx != null) {
+      focusCellElement(focusedPart, cursorRowIdx, cursorColIdx);
+    }
+  };
+  const {
+    selRowIdxs,
+    isAllSelected,
+    isAnySelected,
+    selectAll,
+    selectRows,
+    unselectAll,
+    onMouseDown: onRowSelectionMouseDown
+  } = useRowSelection(
+    rowKeyGetter,
+    rowData,
+    defaultSelectedRowIdxs,
+    selectedRowIdxs,
+    rowSelectionMode,
+    onRowSelected
+  );
+  const rangeSelection = useRangeSelection(cellSelectionMode);
+  const moveCursor = useCallback(
+    (part, rowIdx, colIdx) => {
+      cancelEditMode();
+      if (!headerIsFocusable && part === "header") {
+        console.warn(
+          `Cannot move focus to the header. "headerIsFocusable" prop is false.`
+        );
+        return;
+      }
+      setFocusedPart(part);
+      colIdx = clamp(colIdx, 0, cols.length - 1);
+      if (part === "body") {
+        if (rowData.length < 1 || cols.length < 1) {
+          return;
+        }
+        rowIdx = clamp(rowIdx, 0, rowData.length - 1);
+      } else if (part === "header") {
+        rowIdx = 0;
+      }
+      setCursorRowIdx(rowIdx);
+      setCursorColIdx(colIdx);
+      scrollToCell(part, rowIdx, colIdx);
+      focusCellElement(part, rowIdx, colIdx);
+      if (part === "body") {
+        rangeSelection.onCursorMove({ rowIdx, colIdx });
+      }
+    },
+    [
+      setCursorRowIdx,
+      setCursorColIdx,
+      rowData,
+      rowKeyGetter,
+      cols,
+      rootRef.current,
+      scrollToCell,
+      endEditMode,
+      rangeSelection.onCursorMove,
+      focusedPart,
+      headerIsFocusable
+    ]
+  );
+  const rows = useRowModels(rowKeyGetter, rowData, visRowRng);
+  const isLeftRaised = scrollLeft > 0;
+  const isRightRaised = scrollLeft + clientMidWidth < midWidth;
+  const isHeaderRaised = scrollTop > 0;
+  const resizeColumn = useCallback(
+    (colIdx, width) => {
+      const col = cols[colIdx];
+      col.info.onWidthChanged(width);
+    },
+    [cols]
+  );
+  const onResizeHandleMouseDown = useColumnResize(cols, resizeColumn);
+  const sizingContext = useMemo(
+    () => ({
+      resizeColumn,
+      rowHeight,
+      onResizeHandleMouseDown
+    }),
+    [resizeColumn, rowHeight, onResizeHandleMouseDown]
+  );
+  const layoutContext = useMemo(
+    () => ({
+      totalHeight,
+      totalWidth,
+      clientWidth,
+      clientHeight
+    }),
+    [totalHeight, totalWidth]
+  );
+  const editorContext = useMemo(
+    () => ({
+      initialText,
+      editMode,
+      startEditMode,
+      endEditMode,
+      cancelEditMode
+    }),
+    [editMode, startEditMode, endEditMode, cancelEditMode, initialText]
+  );
+  const [isFocused, setFocused] = useState(false);
+  const onFocus = useCallback(
+    (event) => {
+      setFocused(true);
+    },
+    [setFocused]
+  );
+  const onBlur = useCallback(
+    (event) => {
+      setFocused(false);
+    },
+    [setFocused]
+  );
+  const cursorContext = useMemo(
+    () => ({
+      isFocused,
+      cursorRowIdx,
+      cursorColIdx,
+      moveCursor,
+      focusedPart,
+      headerIsFocusable: Boolean(headerIsFocusable)
+    }),
+    [
+      cursorRowIdx,
+      cursorColIdx,
+      moveCursor,
+      isFocused,
+      focusedPart,
+      headerIsFocusable
+    ]
+  );
+  const onColumnMove = (columnId, fromIndex, toIndex) => {
+    if (onColumnMoved && fromIndex !== toIndex) {
+      onColumnMoved(columnId, fromIndex, toIndex);
+    }
+  };
+  const {
+    dragState,
+    onColumnMoveHandleMouseDown,
+    activeTarget,
+    onColumnMoveCancel
+  } = useColumnMove(
+    columnMove,
+    rootRef,
+    leftCols,
+    midCols,
+    rightCols,
+    cols,
+    scrollLeft,
+    clientMidWidth,
+    onColumnMove
+  );
+  const columnDragContext = useMemo(
+    () => ({
+      columnMove,
+      onColumnMoveHandleMouseDown
+    }),
+    [columnMove, onColumnMoveHandleMouseDown]
+  );
+  const onMouseDown = (event) => {
+    onRowSelectionMouseDown(event);
+    rangeSelection.onCellMouseDown(event);
+    const target = event.target;
+    try {
+      const { part, rowIndex, columnIndex } = getFocusablePosition(target);
+      if (part === "header" && !headerIsFocusable) {
+        return;
+      }
+      moveCursor(part, rowIndex, columnIndex);
+    } catch (e) {
+    }
+  };
+  const onKeyUp = useCallback(
+    (event) => {
+      const { key } = event;
+      if (key === "Shift") {
+        rangeSelection.onKeyboardRangeSelectionEnd();
+      }
+    },
+    [rangeSelection.onKeyboardRangeSelectionEnd]
+  );
+  const editModeKeyHandler = useCallback(
+    (event) => {
+      const { key } = event;
+      switch (key) {
+        case "F2":
+        case "Enter":
+          startEditMode();
+          break;
+        case "Backspace":
+          startEditMode("");
+          break;
+        case "Escape":
+          if (editMode) {
+            cancelEditMode();
+            break;
+          } else {
+            return false;
+          }
+        default:
+          if (!editMode && !event.ctrlKey && !event.metaKey && !event.altKey && /^[\w\d ]$/.test(key)) {
+            startEditMode(key);
+          } else {
+            return false;
+          }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    },
+    [startEditMode, editMode, cancelEditMode]
+  );
+  const selectionKeyHandler = useCallback(
+    (event) => {
+      const { key } = event;
+      switch (key) {
+        case "Shift":
+          rangeSelection.onKeyboardRangeSelectionStart({
+            rowIdx: cursorRowIdx || 0,
+            colIdx: cursorColIdx || 0
+          });
+          break;
+        case " ":
+          if (focusedPart === "body") {
+            if (event.ctrlKey) {
+              if (cursorColIdx != void 0) {
+                rangeSelection.selectRange({
+                  start: { rowIdx: 0, colIdx: cursorColIdx },
+                  end: { rowIdx: rowData.length, colIdx: cursorColIdx }
+                });
+              }
+            } else {
+              if (cursorRowIdx != void 0) {
+                selectRows({
+                  rowIndex: cursorRowIdx,
+                  isRange: false,
+                  incremental: true,
+                  unselectOtherRows: !event.shiftKey
+                });
+              }
+            }
+            break;
+          } else {
+            return false;
+          }
+        case "a":
+          if (event.ctrlKey || event.metaKey) {
+            rangeSelection.selectRange({
+              start: { rowIdx: 0, colIdx: 0 },
+              end: { rowIdx: rowData.length, colIdx: cols.length }
+            });
+            selectAll();
+          }
+          break;
+        default:
+          return false;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    },
+    [
+      rangeSelection.selectRange,
+      rangeSelection.onKeyboardRangeSelectionStart,
+      selectRows,
+      selectAll,
+      cursorColIdx,
+      cursorRowIdx,
+      rowData.length,
+      cols.length,
+      focusedPart
+    ]
+  );
+  const clipboardKeyHandler = useCallback(
+    (event) => {
+      const { key } = event;
+      if (key === "c" && (event.ctrlKey || event.metaKey) && rangeSelection.selectedCellRange) {
+        const { start, end } = rangeSelection.selectedCellRange;
+        const c = (x, y) => x - y;
+        const [minRow, maxRow] = [start.rowIdx, end.rowIdx].sort(c);
+        const [minCol, maxCol] = [start.colIdx, end.colIdx].sort(c);
+        const text = [];
+        for (let r = minRow; r <= maxRow; ++r) {
+          const row = rowData[r];
+          const rowText = [];
+          for (let c2 = minCol; c2 <= maxCol; ++c2) {
+            const col = cols[c2];
+            const cellValue = col.info.props.getValue(row);
+            rowText.push(cellValue);
+          }
+          text.push(rowText.join("	"));
+        }
+        navigator.clipboard.writeText(text.join("\n"));
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+      }
+      return false;
+    },
+    [rangeSelection.selectedCellRange]
+  );
+  const pageSize = Math.max(1, visRowRng.length - 1);
+  const navigationKeyHandler = useCallback(
+    (event) => {
+      const { key } = event;
+      switch (key) {
+        case "ArrowLeft":
+          moveCursor(focusedPart, cursorRowIdx, (cursorColIdx || 0) - 1);
+          break;
+        case "ArrowRight":
+          moveCursor(focusedPart, cursorRowIdx, (cursorColIdx || 0) + 1);
+          break;
+        case "ArrowUp":
+          if (cursorRowIdx === 0 && headerIsFocusable) {
+            moveCursor("header", 0, cursorColIdx);
+          } else {
+            moveCursor(focusedPart, (cursorRowIdx || 0) - 1, cursorColIdx);
+          }
+          break;
+        case "ArrowDown":
+          if (focusedPart === "header") {
+            moveCursor("body", 0, cursorColIdx);
+          } else {
+            moveCursor(focusedPart, (cursorRowIdx || 0) + 1, cursorColIdx);
+          }
+          break;
+        case "PageUp":
+          if (cursorRowIdx === 0 && headerIsFocusable) {
+            moveCursor("header", 0, cursorColIdx);
+          } else {
+            moveCursor(
+              focusedPart,
+              (cursorRowIdx || 0) - pageSize,
+              cursorColIdx
+            );
+          }
+          break;
+        case "PageDown":
+          if (focusedPart === "header") {
+            moveCursor("body", 0, cursorColIdx);
+          } else {
+            moveCursor(
+              focusedPart,
+              (cursorRowIdx || 0) + pageSize,
+              cursorColIdx
+            );
+          }
+          break;
+        case "Home":
+          if (!event.ctrlKey) {
+            moveCursor(focusedPart, cursorRowIdx, 0);
+          } else {
+            moveCursor(focusedPart, 0, 0);
+          }
+          break;
+        case "End":
+          if (!event.ctrlKey) {
+            moveCursor(focusedPart, cursorRowIdx, cols.length - 1);
+          } else {
+            moveCursor(focusedPart, rowData.length - 1, cols.length - 1);
+          }
+          break;
+        case "Tab":
+          if (!event.ctrlKey && !event.metaKey && !event.altKey && editMode && cursorColIdx != null && cursorRowIdx != null) {
+            if (!event.shiftKey) {
+              if (cursorColIdx < cols.length - 1) {
+                moveCursor(focusedPart, cursorRowIdx, cursorColIdx + 1);
+              } else {
+                if (cursorRowIdx < rowData.length - 1) {
+                  moveCursor(focusedPart, cursorRowIdx + 1, 0);
+                }
+              }
+            } else {
+              if (cursorColIdx > 0) {
+                moveCursor(focusedPart, cursorRowIdx, cursorColIdx - 1);
+              } else {
+                if (cursorRowIdx > 0) {
+                  moveCursor(focusedPart, cursorRowIdx - 1, cols.length - 1);
+                }
+              }
+            }
+          } else {
+            return false;
+          }
+          break;
+        case "Enter":
+          if (editMode && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+            if (cursorRowIdx == void 0) {
+              moveCursor(focusedPart, 0, 0);
+            } else {
+              moveCursor(focusedPart, cursorRowIdx + 1, cursorColIdx);
+            }
+          } else {
+            return false;
+          }
+          break;
+        default:
+          return false;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    },
+    [
+      moveCursor,
+      cursorRowIdx,
+      cursorRowIdx,
+      cols.length,
+      rowData.length,
+      headerIsFocusable,
+      pageSize
+    ]
+  );
+  const columnMoveKeyHandler = useCallback(
+    (event) => {
+      const { key } = event;
+      if (key === "Escape") {
+        onColumnMoveCancel();
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+      }
+      return false;
+    },
+    []
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (cursorColIdx != void 0 && cursorRowIdx != void 0) {
+        const column = cols[cursorColIdx];
+        if (column.info.props.onKeyDown) {
+          column.info.props.onKeyDown(event, cursorRowIdx);
+        }
+      }
+      if (!event.isPropagationStopped()) {
+        [
+          navigationKeyHandler,
+          clipboardKeyHandler,
+          selectionKeyHandler,
+          editModeKeyHandler,
+          columnMoveKeyHandler
+        ].find((handler) => {
+          return handler(event);
+        });
+      }
+    },
+    [
+      navigationKeyHandler,
+      clipboardKeyHandler,
+      selectionKeyHandler,
+      editModeKeyHandler,
+      columnMoveKeyHandler
+    ]
+  );
+  const selectionContext = useMemo(
+    () => ({
+      selRowIdxs,
+      selectRows,
+      isAllSelected,
+      isAnySelected,
+      selectAll,
+      unselectAll,
+      selectedCellRange: rangeSelection == null ? void 0 : rangeSelection.selectedCellRange
+    }),
+    [
+      selRowIdxs,
+      selectRows,
+      isAllSelected,
+      isAnySelected,
+      selectAll,
+      unselectAll,
+      rangeSelection == null ? void 0 : rangeSelection.selectedCellRange
+    ]
+  );
+  useEffect(() => {
+    if (onVisibleRowRangeChange) {
+      onVisibleRowRangeChange(visRowRng.start, visRowRng.end);
+    }
+  }, [onVisibleRowRangeChange, visRowRng]);
+  return /* @__PURE__ */ jsx(GridContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx(LayoutContext.Provider, {
+      value: layoutContext,
+      children: /* @__PURE__ */ jsx(SelectionContext.Provider, {
+        value: selectionContext,
+        children: /* @__PURE__ */ jsx(ColumnDragContext.Provider, {
+          value: columnDragContext,
+          children: /* @__PURE__ */ jsx(CursorContext.Provider, {
+            value: cursorContext,
+            children: /* @__PURE__ */ jsx(SizingContext.Provider, {
+              value: sizingContext,
+              children: /* @__PURE__ */ jsx(EditorContext.Provider, {
+                value: editorContext,
+                children: /* @__PURE__ */ jsxs(ColumnDataContext.Provider, {
+                  value: columnDataContext,
+                  children: [
+                    props.children,
+                    /* @__PURE__ */ jsxs("div", {
+                      className: cn(
+                        withBaseName(),
+                        {
+                          [withBaseName("zebra")]: zebra,
+                          [withBaseName("columnSeparators")]: columnSeparators,
+                          [withBaseName("pinnedSeparators")]: pinnedSeparators,
+                          [withBaseName("primaryBackground")]: variant === "primary",
+                          [withBaseName("secondaryBackground")]: variant === "secondary"
+                        },
+                        className
+                      ),
+                      style: rootStyle,
+                      ref: rootRef,
+                      onKeyDown,
+                      onKeyUp,
+                      onMouseDown,
+                      onFocus,
+                      onBlur,
+                      "data-name": "grid-root",
+                      role: "grid",
+                      "aria-colcount": cols.length,
+                      "aria-rowcount": rowCount + headRowCount,
+                      "aria-multiselectable": rowSelectionMode === "multi",
+                      children: [
+                        /* @__PURE__ */ jsx(CellMeasure, {
+                          setRowHeight
+                        }),
+                        /* @__PURE__ */ jsx(Scrollable, {
+                          resizeClient,
+                          scrollLeft,
+                          scrollTop,
+                          scrollSource,
+                          scroll,
+                          scrollerRef: scrollableRef,
+                          topRef,
+                          rightRef,
+                          bottomRef,
+                          leftRef,
+                          middleRef
+                        }),
+                        !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsx(TopLeftPart, {
+                          onWheel,
+                          columns: leftCols,
+                          columnGroups: leftGroups,
+                          rightShadow: isLeftRaised,
+                          bottomShadow: isHeaderRaised
+                        }),
+                        !hideHeader && /* @__PURE__ */ jsx(TopPart, {
+                          columns: headVisibleColumns,
+                          columnGroups: visColGrps,
+                          topRef,
+                          onWheel,
+                          midGap,
+                          bottomShadow: isHeaderRaised
+                        }),
+                        !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsx(TopRightPart, {
+                          onWheel,
+                          columns: rightCols,
+                          columnGroups: rightGroups,
+                          leftShadow: isRightRaised,
+                          bottomShadow: isHeaderRaised
+                        }),
+                        leftCols.length > 0 && /* @__PURE__ */ jsx(LeftPart, {
+                          leftRef,
+                          onWheel,
+                          columns: leftCols,
+                          rows,
+                          rightShadow: isLeftRaised,
+                          hoverOverRowKey: hoverRowKey,
+                          setHoverOverRowKey: setHoverRowKey,
+                          zebra
+                        }),
+                        /* @__PURE__ */ jsx(MiddlePart, {
+                          middleRef,
+                          onWheel,
+                          columns: bodyVisibleColumns,
+                          rows,
+                          hoverOverRowKey: hoverRowKey,
+                          setHoverOverRowKey: setHoverRowKey,
+                          midGap,
+                          zebra
+                        }),
+                        rightCols.length > 0 && /* @__PURE__ */ jsx(RightPart, {
+                          rightRef,
+                          onWheel,
+                          columns: rightCols,
+                          rows,
+                          leftShadow: isRightRaised,
+                          hoverOverRowKey: hoverRowKey,
+                          setHoverOverRowKey: setHoverRowKey,
+                          zebra
+                        }),
+                        /* @__PURE__ */ jsx(ColumnDropTarget, {
+                          x: activeTarget == null ? void 0 : activeTarget.x
+                        }),
+                        /* @__PURE__ */ jsx(ColumnGhost, {
+                          columns: cols,
+                          rows,
+                          dragState,
+                          zebra
+                        })
+                      ]
+                    })
+                  ]
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+};
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map