@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

package/dist/cjs/components/Grid/index.cjs

@@ -1,3 +1,4 @@
+require("./Grid.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -8,7 +9,8 @@ const reactWindow = require('react-window');
 const AutoSizer = require('react-virtualized-auto-sizer');
 const RowNumberColumn = require('./RowNumberColumn.cjs');
 const Header = require('./Header.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Grid_module = require('./Grid.module.css.cjs');
 const useSelectionActions = require('./useSelectionActions.cjs');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
 const Cell = require('./Cell.cjs');
@@ -17,592 +19,732 @@ const copyGridElements = require('./copyGridElements.cjs');
 const useColumns = require('./useColumns.cjs');
 const useResizingState = require('./useResizingState.cjs');
 const ContextMenu = require('../ContextMenu/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
 const AutoSizer__default = /*#__PURE__*/_interopDefault(AutoSizer);
 
+const gridVariants = classVarianceAuthority.cva(Grid_module.default["grid"], {
+  variants: {
+    bordered: { true: Grid_module.default["grid_bordered"] }
+  }
+});
 const NO_BUTTONS_PRESSED = 0;
 const LEFT_BUTTON_PRESSED = 1;
 const RIGHT_BUTTON_PRESSED = 2;
-const GridContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-175eneg-0"
-})(["display:flex;flex-direction:column-reverse;user-select:none;overflow-anchor:none;"]);
-const getRenderedCursor = (children) => children.reduce(([minRow, maxRow, minColumn, maxColumn], {
-  props: {
-    columnIndex,
-    rowIndex
-  }
-}) => {
-  if (rowIndex < minRow) {
-    minRow = rowIndex;
-  }
-  if (rowIndex > maxRow) {
-    maxRow = rowIndex;
-  }
-  if (columnIndex < minColumn) {
-    minColumn = columnIndex;
-  }
-  if (columnIndex > maxColumn) {
-    maxColumn = columnIndex;
+const getRenderedCursor = (children) => children.reduce(
+  ([minRow, maxRow, minColumn, maxColumn], { props: { columnIndex, rowIndex } }) => {
+    if (rowIndex < minRow) {
+      minRow = rowIndex;
+    }
+    if (rowIndex > maxRow) {
+      maxRow = rowIndex;
+    }
+    if (columnIndex < minColumn) {
+      minColumn = columnIndex;
+    }
+    if (columnIndex > maxColumn) {
+      maxColumn = columnIndex;
+    }
+    return [minRow, maxRow, minColumn, maxColumn];
+  },
+  [
+    Number.POSITIVE_INFINITY,
+    Number.NEGATIVE_INFINITY,
+    Number.POSITIVE_INFINITY,
+    Number.NEGATIVE_INFINITY
+  ]
+);
+const roundedRadii = {
+  none: "var(--click-grid-radii-none)",
+  lg: "var(--click-grid-radii-lg)",
+  md: "var(--click-grid-radii-md)",
+  sm: "var(--click-grid-radii-sm)"
+};
+const OuterElementType = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-testid": "grid-outer-element",
+    tabIndex: 0,
+    ...props
   }
-  return [minRow, maxRow, minColumn, maxColumn];
-}, [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]);
-const GridDataContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-175eneg-1"
-})(["position:absolute;top:0;left:0;", ""], ({
-  $top,
-  $left
-}) => `
-    margin-top: ${$top}px;
-    margin-left: ${$left}px;
-  `);
-const ContextMenuTrigger = styledComponents.styled.div.withConfig({
-  componentId: "sc-175eneg-2"
-})(["outline:none;overflow:hidden;height:", ";width:100%;background:", ";border-radius:", ";", ";"], ({
-  $height
-}) => $height ? `${$height}px` : "100%", ({
-  theme
-}) => theme.click.grid.body.cell.color.background.default, ({
-  theme,
-  $rounded
-}) => theme.click.grid.radii[$rounded], ({
-  $showBorder,
-  theme
-}) => $showBorder && `border: 1px solid ${theme.click.grid.header.cell.color.stroke.default}`);
-const OuterElementType = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
-const Grid = react.forwardRef(({
-  autoFocus,
-  autoHeight = false,
-  rowStart = 0,
-  showRowNumber = true,
-  rounded = "none",
-  showHeader = true,
-  focus: focusProp,
-  useIsScrolling = true,
-  rowHeight = 33,
-  columnCount,
-  columnWidth: columnWidthProp,
-  onSelect: onSelectProp,
-  headerHeight = 33,
-  rowCount,
-  cell,
-  onColumnResize: onColumnResizeProp,
-  onFocusChange: onFocusChangeProp,
-  getMenuOptions,
-  onKeyDown: onKeyDownProp,
-  selection: selectionProp,
-  showToast,
-  onMouseDown: onMouseDownProp,
-  onMouseMove: onMouseMoveProp,
-  showBorder = false,
-  onCopy: onCopyProp,
-  onCopyCallback,
-  onContextMenu: onContextMenuProp,
-  forwardedGridRef,
-  onItemsRendered: onItemsRenderedProp,
-  rowAutoHeight,
-  ...props
-}, forwardedRef) => {
-  const [focus, setFocus] = react.useState(focusProp ?? {
-    row: rowStart,
-    column: 0
-  });
-  const [selection, setSelection] = react.useState(selectionProp ?? {
-    type: "empty"
-  });
-  const defaultOnCopy = react.useCallback(async () => {
-    try {
-      await copyGridElements.default({
-        cell,
-        selection,
-        focus: focusProp ?? focus,
-        rowCount,
-        columnCount,
-        outerRef
-      });
-      if (onCopyCallback) {
-        onCopyCallback(true);
-      }
-      if (showToast) {
-        toastEmitter.createToast({
-          title: "Copied successfully",
-          description: "Now you can paste the content",
-          type: "success"
-        });
-      }
-    } catch (e) {
-      console.error(e);
-      if (onCopyCallback) {
-        onCopyCallback(false);
-      }
-      if (showToast) {
-        toastEmitter.createToast({
-          title: "Failed to copy",
-          description: "Encountered an error while copying. Try again after sometime",
-          type: "danger"
-        });
-      }
-    }
-  }, [cell, columnCount, focus, focusProp, rowCount, selection, showToast, onCopyCallback]);
-  const customOnCopy = react.useMemo(() => {
-    const result = async () => {
-      if (onCopyProp) {
-        await onCopyProp(selection, focus);
-      }
-    };
-    return result;
-  }, [onCopyProp, selection, focus]);
-  const onCopy = typeof onCopyProp === "function" ? customOnCopy : defaultOnCopy;
-  const defaultMenuOptions = [{
-    label: "Copy",
-    onSelect: onCopy
-  }];
-  const [menuOptions, setMenuOptions] = react.useState(defaultMenuOptions);
-  const [contextMenuOpen, setContextMenuOpen] = react.useState(false);
-  const [scrolledVertical, setScrolledVertical] = react.useState(false);
-  const [scrolledHorizontal, setScrolledHorizontal] = react.useState(false);
-  const dragState = react.useRef(false);
-  const gridRef = react.useRef(null);
-  const containerRef = react.useRef(null);
-  const outerRef = react.useRef(null);
-  const elementBorderRef = react.useRef({
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    scrollBarWidth: 0,
-    scrollBarHeight: 0,
-    width: 0,
-    height: 0
-  });
-  const onCellSelect = react.useCallback((action, selection2, focus2) => {
-    setSelection(selection2);
-    if (typeof onSelectProp === "function") {
-      onSelectProp(action, selection2, focus2);
-    }
-  }, [onSelectProp]);
-  const resizingState = useResizingState.default();
-  const [rowHeights, setRowHeights] = react.useState({});
-  const getRowHeight = react.useCallback((index) => {
-    if (rowAutoHeight && rowHeights[index] !== void 0) {
-      return rowHeights[index] + rowHeight;
-    }
-    return rowHeight;
-  }, [rowHeight, rowAutoHeight, rowHeights]);
-  const updateRowHeight = react.useCallback((rowIndex, height) => {
-    if (!rowAutoHeight) {
-      return;
-    }
-    setRowHeights((prevRowHeights) => {
-      if (height > (prevRowHeights[rowIndex] || 0) && gridRef.current) {
-        const newRowHeights = {
-          ...prevRowHeights,
-          [rowIndex]: height
-        };
-        gridRef.current.resetAfterRowIndex(rowIndex);
-        return newRowHeights;
-      }
-      return prevRowHeights;
-    });
-  }, [rowAutoHeight, gridRef]);
-  const onFocusChange = react.useCallback((row, column) => {
-    setFocus((focus2) => ({
-      row: row ?? focusProp?.row ?? focus2.row,
-      column: column ?? focusProp?.column ?? focus2.column
-    }));
-    if (typeof onFocusChangeProp === "function") {
-      onFocusChangeProp(row, column);
-    }
-  }, [onFocusChangeProp, focusProp]);
-  const rowNumberWidth = ((rowStart + rowCount).toString().length + 2) * 8 + 3;
-  const {
-    getColumnHorizontalPosition,
-    onColumnResize,
-    columnWidth,
-    initColumnSize
-  } = useColumns.default({
+));
+const Grid = react.forwardRef(
+  ({
+    autoFocus,
+    autoHeight = false,
+    rowStart = 0,
+    showRowNumber = true,
+    rounded = "none",
+    showHeader = true,
+    focus: focusProp,
+    useIsScrolling = true,
+    rowHeight = 33,
     columnCount,
     columnWidth: columnWidthProp,
-    outerGridRef: outerRef,
-    gridRef,
-    onColumnResize: onColumnResizeProp
-  });
-  const scrollGridTo = react.useCallback(async ({
-    row,
-    column
-  }) => {
-    if (!outerRef.current || !gridRef.current) {
-      return;
-    }
-    const rowIndex = row ?? 0;
-    const columnIndex = column ?? 0;
-    let element = outerRef.current?.querySelector(`[data-row="${rowIndex}"][data-column="${columnIndex}"]`);
-    if (!element) {
-      return;
-    }
-    const {
-      scrollTop,
-      scrollLeft
-    } = outerRef.current;
-    if (typeof element?.scrollIntoView === "function") {
-      element?.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      });
-      await new Promise(requestAnimationFrame);
-    }
-    element = outerRef.current?.querySelector(`[data-row="${rowIndex}"][data-column="${columnIndex}"]`);
-    if (!element) {
-      return;
-    }
-    if (scrollLeft > element.offsetLeft || scrollTop > element.offsetTop) {
-      outerRef.current?.scrollBy(scrollLeft > element.offsetLeft ? -rowNumberWidth : 0, scrollTop > element.offsetTop ? -headerHeight : 0);
-    }
-  }, [headerHeight, rowNumberWidth]);
-  const getFixedResizerLeftPosition = react.useCallback((clientX, width, columnIndex) => {
-    const columnPosition = getColumnHorizontalPosition(columnIndex);
-    const columnLeft = columnPosition + width;
-    const {
-      width: containerWidth,
-      left,
-      scrollBarWidth
-    } = elementBorderRef.current;
-    const scrollLeft = outerRef.current?.scrollLeft ?? 0;
-    if (clientX + rowNumberWidth - left > containerWidth + scrollBarWidth) {
-      return scrollLeft + containerWidth - scrollBarWidth - 4;
-    }
-    if (width < 50) {
-      return columnPosition + rowNumberWidth + 50;
-    }
-    return columnLeft + rowNumberWidth - 4;
-  }, [getColumnHorizontalPosition, rowNumberWidth]);
-  const getResizerPosition = react.useCallback((clientX, width, columnIndex) => {
-    const result = {
-      left: `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`
-    };
-    if (outerRef.current) {
-      result.top = `${outerRef.current.scrollTop}px`;
-    }
-    return result;
-  }, [getFixedResizerLeftPosition]);
-  const clearSelectionAndFocus = react.useCallback((force) => {
-    setSelection((selection2) => {
-      if (selection2.type === "columns" && !force) {
-        return selection2;
-      } else {
-        return {
-          type: "empty"
-        };
-      }
-    });
-    const newFocus = focusProp ?? focus;
-    onFocusChange(newFocus.row, newFocus.column);
-    scrollGridTo(newFocus);
-  }, [focus, focusProp, onFocusChange, scrollGridTo]);
-  react.useEffect(() => {
-    clearSelectionAndFocus(true);
-  }, [rowStart]);
-  const {
-    getSelectionType,
-    onSelection,
-    mouseMoveCellSelect,
-    moveSelection
-  } = useSelectionActions.useSelectionActions({
-    onCellSelect,
-    focus: focusProp ?? focus,
-    columnCount,
+    onSelect: onSelectProp,
+    headerHeight = 33,
     rowCount,
-    onFocusChange,
-    scrollGridTo,
-    selection: selectionProp ?? selection,
-    rowStart
-  });
-  const data = {
-    showRowNumber,
     cell,
-    rowCount,
-    columnCount,
-    showHeader,
-    focus: focusProp ?? focus,
-    getSelectionType,
-    rowHeight,
-    headerHeight,
-    rowNumberWidth,
-    rowStart,
+    onColumnResize: onColumnResizeProp,
+    onFocusChange: onFocusChangeProp,
+    getMenuOptions,
+    onKeyDown: onKeyDownProp,
+    selection: selectionProp,
+    showToast,
+    onMouseDown: onMouseDownProp,
+    onMouseMove: onMouseMoveProp,
+    showBorder = false,
+    onCopy: onCopyProp,
+    onCopyCallback,
+    onContextMenu: onContextMenuProp,
+    forwardedGridRef,
+    onItemsRendered: onItemsRenderedProp,
     rowAutoHeight,
-    updateRowHeight,
-    getRowHeight
-  };
-  const InnerElementType = react.forwardRef(({
-    children,
-    ...containerProps
-  }, ref) => {
-    const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
-    return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-      showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn.default, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
-      showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header.default, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
-    ] });
-  });
-  react.useEffect(() => {
-    if (autoFocus) {
-      containerRef.current?.focus();
-    }
-  }, [autoFocus]);
-  const onMouseDown = react.useCallback((e) => {
-    containerRef.current?.focus();
-    if (typeof onMouseDownProp === "function" && e.buttons === LEFT_BUTTON_PRESSED) {
-      onMouseDownProp(e);
-    }
-    const target = e.target.closest("[data-grid-row][data-grid-column]");
-    if (!target || target.dataset.gridRow === void 0 || target.dataset.gridColumn === void 0) {
-      return;
-    }
-    if (e.buttons === RIGHT_BUTTON_PRESSED && target.dataset.selected === "true") {
-      return;
-    }
-    const {
-      gridRow: rowIndexString,
-      gridColumn: columnIndexString
-    } = target.dataset;
-    const row = parseInt(rowIndexString);
-    const column = parseInt(columnIndexString);
-    if (row === -1 && column === -1) {
-      onSelection({
-        type: "all"
-      });
-      return;
-    }
-    const shiftKeyPressed = e.shiftKey;
-    if (row === -1) {
-      onSelection({
-        type: shiftKeyPressed ? "shiftColumnSelection" : "columnSelection",
-        column,
-        event: "click"
-      });
-      if (!shiftKeyPressed) {
-        onFocusChange(rowStart, column);
+    ...props
+  }, forwardedRef) => {
+    const [focus, setFocus] = react.useState(
+      focusProp ?? {
+        row: rowStart,
+        column: 0
       }
-      return;
-    }
-    if (column === -1) {
-      onSelection({
-        type: shiftKeyPressed ? "shiftRowSelection" : "rowSelection",
-        row,
-        event: "click"
-      });
-      if (!shiftKeyPressed) {
-        onFocusChange(row, 0);
+    );
+    const [selection, setSelection] = react.useState(
+      selectionProp ?? {
+        type: "empty"
       }
-      return;
-    }
-    onSelection({
-      type: shiftKeyPressed ? "shiftSelection" : "normal",
-      row,
-      column,
-      event: "click"
-    });
-    if (!shiftKeyPressed) {
-      onFocusChange(row, column);
-    }
-  }, [onFocusChange, onMouseDownProp, onSelection, rowStart]);
-  const onPointerDown = react.useCallback((e) => {
-    dragState.current = e.pointerId;
-  }, []);
-  const setPointerCapture = react.useCallback((e) => {
-    if (e.buttons === NO_BUTTONS_PRESSED || dragState.current === false) {
-      return;
-    }
-    containerRef.current?.setPointerCapture(dragState.current);
-  }, []);
-  const onPointerUp = react.useCallback((e) => {
-    if (containerRef.current) {
-      containerRef.current.releasePointerCapture(e.pointerId);
-      if (!contextMenuOpen) {
-        containerRef.current.focus();
+    );
+    const defaultOnCopy = react.useCallback(async () => {
+      try {
+        await copyGridElements.default({
+          cell,
+          selection,
+          focus: focusProp ?? focus,
+          rowCount,
+          columnCount,
+          outerRef
+        });
+        if (onCopyCallback) {
+          onCopyCallback(true);
+        }
+        if (showToast) {
+          toastEmitter.createToast({
+            title: "Copied successfully",
+            description: "Now you can paste the content",
+            type: "success"
+          });
+        }
+      } catch (e) {
+        console.error(e);
+        if (onCopyCallback) {
+          onCopyCallback(false);
+        }
+        if (showToast) {
+          toastEmitter.createToast({
+            title: "Failed to copy",
+            description: "Encountered an error while copying. Try again after sometime",
+            type: "danger"
+          });
+        }
       }
-    }
-    dragState.current = false;
-    const newFocus = focusProp ?? focus;
-    onFocusChange(newFocus.row, newFocus.column);
-  }, [contextMenuOpen, focus, focusProp, onFocusChange]);
-  const onMouseMove = react.useCallback(async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (typeof onMouseMoveProp === "function") {
-      onMouseMoveProp(e);
-    }
-    if (dragState.current === false || e.buttons === NO_BUTTONS_PRESSED || !containerRef.current || !outerRef.current) {
-      return;
-    }
-    containerRef.current.setPointerCapture(dragState.current);
-    let verticalSign = 0, horizontalSign = 0, x = e.clientX, y = e.clientY;
-    if (elementBorderRef.current.left >= e.clientX || e.clientX >= elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth) {
-      const scrollHorizontalDirection = e.clientX <= elementBorderRef.current.left ? "left" : "right";
-      if (scrollHorizontalDirection === "left" && e.movementX < 0 || scrollHorizontalDirection === "right" && e.movementX > 0) {
-        horizontalSign = scrollHorizontalDirection === "left" ? -1 : 1;
+    }, [
+      cell,
+      columnCount,
+      focus,
+      focusProp,
+      rowCount,
+      selection,
+      showToast,
+      onCopyCallback
+    ]);
+    const customOnCopy = react.useMemo(() => {
+      const result = async () => {
+        if (onCopyProp) {
+          await onCopyProp(selection, focus);
+        }
+      };
+      return result;
+    }, [onCopyProp, selection, focus]);
+    const onCopy = typeof onCopyProp === "function" ? customOnCopy : defaultOnCopy;
+    const defaultMenuOptions = [
+      {
+        label: "Copy",
+        onSelect: onCopy
       }
-      x = scrollHorizontalDirection === "left" ? elementBorderRef.current.left + rowNumberWidth + 10 : elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth - 10;
-    }
-    if (elementBorderRef.current.top >= e.clientY || e.clientY >= elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight) {
-      const scrollVerticalDirection = e.clientY <= elementBorderRef.current.top ? "top" : "bottom";
-      if (scrollVerticalDirection === "top" && e.movementY < 0 || scrollVerticalDirection === "bottom" && e.movementY > 0) {
-        verticalSign = scrollVerticalDirection === "top" ? -1 : 1;
+    ];
+    const [menuOptions, setMenuOptions] = react.useState(defaultMenuOptions);
+    const [contextMenuOpen, setContextMenuOpen] = react.useState(false);
+    const [scrolledVertical, setScrolledVertical] = react.useState(false);
+    const [scrolledHorizontal, setScrolledHorizontal] = react.useState(false);
+    const dragState = react.useRef(false);
+    const gridRef = react.useRef(null);
+    const containerRef = react.useRef(null);
+    const outerRef = react.useRef(null);
+    const elementBorderRef = react.useRef({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      scrollBarWidth: 0,
+      scrollBarHeight: 0,
+      width: 0,
+      height: 0
+    });
+    const onCellSelect = react.useCallback(
+      (action, selection2, focus2) => {
+        setSelection(selection2);
+        if (typeof onSelectProp === "function") {
+          onSelectProp(action, selection2, focus2);
+        }
+      },
+      [onSelectProp]
+    );
+    const resizingState = useResizingState.default();
+    const [rowHeights, setRowHeights] = react.useState({});
+    const getRowHeight = react.useCallback(
+      (index) => {
+        if (rowAutoHeight && rowHeights[index] !== void 0) {
+          return rowHeights[index] + rowHeight;
+        }
+        return rowHeight;
+      },
+      [rowHeight, rowAutoHeight, rowHeights]
+    );
+    const updateRowHeight = react.useCallback(
+      (rowIndex, height) => {
+        if (!rowAutoHeight) {
+          return;
+        }
+        setRowHeights((prevRowHeights) => {
+          if (height > (prevRowHeights[rowIndex] || 0) && gridRef.current) {
+            const newRowHeights = { ...prevRowHeights, [rowIndex]: height };
+            gridRef.current.resetAfterRowIndex(rowIndex);
+            return newRowHeights;
+          }
+          return prevRowHeights;
+        });
+      },
+      [rowAutoHeight, gridRef]
+    );
+    const onFocusChange = react.useCallback(
+      (row, column) => {
+        setFocus((focus2) => ({
+          row: row ?? focusProp?.row ?? focus2.row,
+          column: column ?? focusProp?.column ?? focus2.column
+        }));
+        if (typeof onFocusChangeProp === "function") {
+          onFocusChangeProp(row, column);
+        }
+      },
+      [onFocusChangeProp, focusProp]
+    );
+    const rowNumberWidth = ((rowStart + rowCount).toString().length + 2) * 8 + 3;
+    const { getColumnHorizontalPosition, onColumnResize, columnWidth, initColumnSize } = useColumns.default({
+      columnCount,
+      columnWidth: columnWidthProp,
+      outerGridRef: outerRef,
+      gridRef,
+      onColumnResize: onColumnResizeProp
+    });
+    const scrollGridTo = react.useCallback(
+      async ({ row, column }) => {
+        if (!outerRef.current || !gridRef.current) {
+          return;
+        }
+        const rowIndex = row ?? 0;
+        const columnIndex = column ?? 0;
+        let element = outerRef.current?.querySelector(
+          `[data-row="${rowIndex}"][data-column="${columnIndex}"]`
+        );
+        if (!element) {
+          return;
+        }
+        const { scrollTop, scrollLeft } = outerRef.current;
+        if (typeof element?.scrollIntoView === "function") {
+          element?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest"
+          });
+          await new Promise(requestAnimationFrame);
+        }
+        element = outerRef.current?.querySelector(
+          `[data-row="${rowIndex}"][data-column="${columnIndex}"]`
+        );
+        if (!element) {
+          return;
+        }
+        if (scrollLeft > element.offsetLeft || scrollTop > element.offsetTop) {
+          outerRef.current?.scrollBy(
+            scrollLeft > element.offsetLeft ? -rowNumberWidth : 0,
+            scrollTop > element.offsetTop ? -headerHeight : 0
+          );
+        }
+      },
+      [headerHeight, rowNumberWidth]
+    );
+    const getFixedResizerLeftPosition = react.useCallback(
+      (clientX, width, columnIndex) => {
+        const columnPosition = getColumnHorizontalPosition(columnIndex);
+        const columnLeft = columnPosition + width;
+        const { width: containerWidth, left, scrollBarWidth } = elementBorderRef.current;
+        const scrollLeft = outerRef.current?.scrollLeft ?? 0;
+        if (clientX + rowNumberWidth - left > containerWidth + scrollBarWidth) {
+          return scrollLeft + containerWidth - scrollBarWidth - 4;
+        }
+        if (width < 50) {
+          return columnPosition + rowNumberWidth + 50;
+        }
+        return columnLeft + rowNumberWidth - 4;
+      },
+      [getColumnHorizontalPosition, rowNumberWidth]
+    );
+    const getResizerPosition = react.useCallback(
+      (clientX, width, columnIndex) => {
+        const result = {
+          left: `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`
+        };
+        if (outerRef.current) {
+          result.top = `${outerRef.current.scrollTop}px`;
+        }
+        return result;
+      },
+      [getFixedResizerLeftPosition]
+    );
+    const clearSelectionAndFocus = react.useCallback(
+      (force) => {
+        setSelection((selection2) => {
+          if (selection2.type === "columns" && !force) {
+            return selection2;
+          } else {
+            return { type: "empty" };
+          }
+        });
+        const newFocus = focusProp ?? focus;
+        onFocusChange(newFocus.row, newFocus.column);
+        scrollGridTo(newFocus);
+      },
+      [focus, focusProp, onFocusChange, scrollGridTo]
+    );
+    react.useEffect(() => {
+      clearSelectionAndFocus(true);
+    }, [rowStart]);
+    const { getSelectionType, onSelection, mouseMoveCellSelect, moveSelection } = useSelectionActions.useSelectionActions({
+      onCellSelect,
+      focus: focusProp ?? focus,
+      columnCount,
+      rowCount,
+      onFocusChange,
+      scrollGridTo,
+      selection: selectionProp ?? selection,
+      rowStart
+    });
+    const data = {
+      showRowNumber,
+      cell,
+      rowCount,
+      columnCount,
+      showHeader,
+      focus: focusProp ?? focus,
+      getSelectionType,
+      rowHeight,
+      headerHeight,
+      rowNumberWidth,
+      rowStart,
+      rowAutoHeight,
+      updateRowHeight,
+      getRowHeight
+    };
+    const InnerElementType = react.forwardRef(
+      ({ children, ...containerProps }, ref) => {
+        const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ...containerProps,
+            className: cva.cn(
+              Grid_module.default["grid__inner"],
+              `sticky-grid__container grid-outer ${props.className ?? ""}`
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: Grid_module.default["grid__data"],
+                  style: {
+                    "--grid-data-top": `${showHeader ? headerHeight : 0}px`,
+                    "--grid-data-left": `${showRowNumber ? rowNumberWidth : 0}px`
+                  },
+                  ref,
+                  children
+                }
+              ),
+              showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(
+                RowNumberColumn.default,
+                {
+                  scrolledHorizontal,
+                  minRow,
+                  maxRow,
+                  rowHeight,
+                  headerHeight,
+                  rowWidth: rowNumberWidth,
+                  rowCount,
+                  getSelectionType,
+                  rowStart,
+                  showBorder,
+                  rowAutoHeight
+                }
+              ),
+              showHeader && /* @__PURE__ */ jsxRuntime.jsx(
+                Header.default,
+                {
+                  scrolledVertical,
+                  scrolledHorizontal,
+                  showRowNumber,
+                  minColumn,
+                  maxColumn,
+                  height: headerHeight,
+                  getColumnWidth: columnWidth,
+                  cell,
+                  rowNumberWidth,
+                  getSelectionType,
+                  columnCount,
+                  onColumnResize,
+                  getColumnHorizontalPosition,
+                  getResizerPosition,
+                  showBorder,
+                  resizingState
+                }
+              )
+            ]
+          }
+        );
       }
-      y = scrollVerticalDirection === "top" ? elementBorderRef.current.top + headerHeight + 10 : elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight - 10;
-    }
-    await new Promise(requestAnimationFrame);
-    const cell2 = document.elementFromPoint(x, y);
-    if (!cell2) {
-      return;
-    }
-    const {
-      gridRow,
-      gridColumn
-    } = cell2.dataset;
-    if (!gridRow || !gridColumn) {
-      return;
-    }
-    const rowIndex = Number(gridRow) + verticalSign;
-    const columnIndex = Number(gridColumn) + horizontalSign;
-    mouseMoveCellSelect(rowIndex, columnIndex);
-  }, [headerHeight, mouseMoveCellSelect, onMouseMoveProp, rowNumberWidth]);
-  const onScroll = ({
-    scrollLeft,
-    scrollTop
-  }) => {
-    setScrolledVertical(scrollTop > 0);
-    setScrolledHorizontal(scrollLeft > 0);
-  };
-  const onResize = react.useCallback(({
-    height,
-    width
-  }) => {
-    setTimeout(() => {
-      if (!outerRef.current) {
-        return;
+    );
+    react.useEffect(() => {
+      if (autoFocus) {
+        containerRef.current?.focus();
       }
-      const {
-        top,
-        bottom,
-        left,
-        right
-      } = outerRef.current.getBoundingClientRect() ?? {};
-      elementBorderRef.current = {
-        top,
-        bottom,
-        left,
-        right,
-        scrollBarWidth: width - outerRef.current.clientWidth,
-        scrollBarHeight: height - outerRef.current.clientHeight,
-        width,
-        height
-      };
-      initColumnSize(outerRef.current.clientWidth - rowNumberWidth);
-    }, 0);
-  }, [initColumnSize, rowNumberWidth]);
-  const onKeyDown = react.useCallback(async (e) => {
-    if (typeof onKeyDownProp === "function") {
-      onKeyDownProp(e);
-    }
-    if (!e.defaultPrevented) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    const moveAnchor = e.shiftKey;
-    const {
-      row,
-      column
-    } = focusProp ?? focus;
-    const applyAction = (action) => {
-      if (action) {
+    }, [autoFocus]);
+    const onMouseDown = react.useCallback(
+      (e) => {
+        containerRef.current?.focus();
+        if (typeof onMouseDownProp === "function" && e.buttons === LEFT_BUTTON_PRESSED) {
+          onMouseDownProp(e);
+        }
+        const target = e.target.closest(
+          "[data-grid-row][data-grid-column]"
+        );
+        if (!target || target.dataset.gridRow === void 0 || target.dataset.gridColumn === void 0) {
+          return;
+        }
+        if (e.buttons === RIGHT_BUTTON_PRESSED && target.dataset.selected === "true") {
+          return;
+        }
+        const { gridRow: rowIndexString, gridColumn: columnIndexString } = target.dataset;
+        const row = parseInt(rowIndexString);
+        const column = parseInt(columnIndexString);
+        if (row === -1 && column === -1) {
+          onSelection({ type: "all" });
+          return;
+        }
+        const shiftKeyPressed = e.shiftKey;
+        if (row === -1) {
+          onSelection({
+            type: shiftKeyPressed ? "shiftColumnSelection" : "columnSelection",
+            column,
+            event: "click"
+          });
+          if (!shiftKeyPressed) {
+            onFocusChange(rowStart, column);
+          }
+          return;
+        }
+        if (column === -1) {
+          onSelection({
+            type: shiftKeyPressed ? "shiftRowSelection" : "rowSelection",
+            row,
+            event: "click"
+          });
+          if (!shiftKeyPressed) {
+            onFocusChange(row, 0);
+          }
+          return;
+        }
         onSelection({
-          ...action,
-          event: "keypress"
+          type: shiftKeyPressed ? "shiftSelection" : "normal",
+          row,
+          column,
+          event: "click"
         });
+        if (!shiftKeyPressed) {
+          onFocusChange(row, column);
+        }
+      },
+      [onFocusChange, onMouseDownProp, onSelection, rowStart]
+    );
+    const onPointerDown = react.useCallback((e) => {
+      dragState.current = e.pointerId;
+    }, []);
+    const setPointerCapture = react.useCallback((e) => {
+      if (e.buttons === NO_BUTTONS_PRESSED || dragState.current === false) {
+        return;
+      }
+      containerRef.current?.setPointerCapture(dragState.current);
+    }, []);
+    const onPointerUp = react.useCallback(
+      (e) => {
+        if (containerRef.current) {
+          containerRef.current.releasePointerCapture(e.pointerId);
+          if (!contextMenuOpen) {
+            containerRef.current.focus();
+          }
+        }
+        dragState.current = false;
+        const newFocus = focusProp ?? focus;
+        onFocusChange(newFocus.row, newFocus.column);
+      },
+      [contextMenuOpen, focus, focusProp, onFocusChange]
+    );
+    const onMouseMove = react.useCallback(
+      async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (typeof onMouseMoveProp === "function") {
+          onMouseMoveProp(e);
+        }
+        if (dragState.current === false || e.buttons === NO_BUTTONS_PRESSED || !containerRef.current || !outerRef.current) {
+          return;
+        }
+        containerRef.current.setPointerCapture(dragState.current);
+        let verticalSign = 0, horizontalSign = 0, x = e.clientX, y = e.clientY;
+        if (elementBorderRef.current.left >= e.clientX || e.clientX >= elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth) {
+          const scrollHorizontalDirection = e.clientX <= elementBorderRef.current.left ? "left" : "right";
+          if (scrollHorizontalDirection === "left" && e.movementX < 0 || scrollHorizontalDirection === "right" && e.movementX > 0) {
+            horizontalSign = scrollHorizontalDirection === "left" ? -1 : 1;
+          }
+          x = scrollHorizontalDirection === "left" ? elementBorderRef.current.left + rowNumberWidth + 10 : elementBorderRef.current.right - elementBorderRef.current.scrollBarWidth - 10;
+        }
+        if (elementBorderRef.current.top >= e.clientY || e.clientY >= elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight) {
+          const scrollVerticalDirection = e.clientY <= elementBorderRef.current.top ? "top" : "bottom";
+          if (scrollVerticalDirection === "top" && e.movementY < 0 || scrollVerticalDirection === "bottom" && e.movementY > 0) {
+            verticalSign = scrollVerticalDirection === "top" ? -1 : 1;
+          }
+          y = scrollVerticalDirection === "top" ? elementBorderRef.current.top + headerHeight + 10 : elementBorderRef.current.bottom - elementBorderRef.current.scrollBarHeight - 10;
+        }
+        await new Promise(requestAnimationFrame);
+        const cell2 = document.elementFromPoint(x, y);
+        if (!cell2) {
+          return;
+        }
+        const { gridRow, gridColumn } = cell2.dataset;
+        if (!gridRow || !gridColumn) {
+          return;
+        }
+        const rowIndex = Number(gridRow) + verticalSign;
+        const columnIndex = Number(gridColumn) + horizontalSign;
+        mouseMoveCellSelect(rowIndex, columnIndex);
+      },
+      [headerHeight, mouseMoveCellSelect, onMouseMoveProp, rowNumberWidth]
+    );
+    const onScroll = ({ scrollLeft, scrollTop }) => {
+      setScrolledVertical(scrollTop > 0);
+      setScrolledHorizontal(scrollLeft > 0);
+    };
+    const onResize = react.useCallback(
+      ({ height, width }) => {
+        setTimeout(() => {
+          if (!outerRef.current) {
+            return;
+          }
+          const { top, bottom, left, right } = outerRef.current.getBoundingClientRect() ?? {};
+          elementBorderRef.current = {
+            top,
+            bottom,
+            left,
+            right,
+            scrollBarWidth: width - outerRef.current.clientWidth,
+            scrollBarHeight: height - outerRef.current.clientHeight,
+            width,
+            height
+          };
+          initColumnSize(outerRef.current.clientWidth - rowNumberWidth);
+        }, 0);
+      },
+      [initColumnSize, rowNumberWidth]
+    );
+    const onKeyDown = react.useCallback(
+      async (e) => {
+        if (typeof onKeyDownProp === "function") {
+          onKeyDownProp(e);
+        }
+        if (!e.defaultPrevented) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        const moveAnchor = e.shiftKey;
+        const { row, column } = focusProp ?? focus;
+        const applyAction = (action) => {
+          if (action) {
+            onSelection({ ...action, event: "keypress" });
+          }
+          if (action?.type === "normal") {
+            onFocusChange(action.row, action.column);
+          }
+        };
+        if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+          onCopy();
+          return;
+        }
+        switch (e.key) {
+          case "ArrowLeft":
+            applyAction(moveSelection(-1, 0, moveAnchor, "keypress"));
+            break;
+          case "ArrowRight":
+            applyAction(moveSelection(1, 0, moveAnchor, "keypress"));
+            break;
+          case "ArrowUp":
+            applyAction(moveSelection(0, -1, moveAnchor, "keypress"));
+            break;
+          case "ArrowDown":
+            applyAction(moveSelection(0, 1, moveAnchor, "keypress"));
+            break;
+          case "Enter":
+            onSelection({
+              type: "normal",
+              row,
+              column,
+              event: "keypress"
+            });
+            onFocusChange(row, column);
+            break;
+          case "Escape":
+            clearSelectionAndFocus(true);
+            break;
+        }
+        containerRef.current?.focus();
+      },
+      [
+        onKeyDownProp,
+        focusProp,
+        focus,
+        onSelection,
+        onFocusChange,
+        onCopy,
+        moveSelection,
+        clearSelectionAndFocus
+      ]
+    );
+    const onContextMenu = (e) => {
+      onMouseDown(e);
+      if (typeof onContextMenuProp === "function") {
+        onContextMenuProp(e);
       }
-      if (action?.type === "normal") {
-        onFocusChange(action.row, action.column);
+      if (typeof getMenuOptions === "function") {
+        const newOptions = getMenuOptions(selection, focusProp ?? focus);
+        setMenuOptions([...defaultMenuOptions, ...newOptions]);
       }
     };
-    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
-      onCopy();
-      return;
-    }
-    switch (e.key) {
-      case "ArrowLeft":
-        applyAction(moveSelection(-1, 0, moveAnchor, "keypress"));
-        break;
-      case "ArrowRight":
-        applyAction(moveSelection(1, 0, moveAnchor, "keypress"));
-        break;
-      case "ArrowUp":
-        applyAction(moveSelection(0, -1, moveAnchor, "keypress"));
-        break;
-      case "ArrowDown":
-        applyAction(moveSelection(0, 1, moveAnchor, "keypress"));
-        break;
-      case "Enter":
-        onSelection({
-          type: "normal",
-          row,
-          column,
-          event: "keypress"
+    const lastItemsRenderedProps = react.useRef();
+    const lastRowStart = react.useRef(rowStart);
+    const onItemsRendered = react.useCallback(
+      (props2) => {
+        lastItemsRenderedProps.current = props2;
+        return onItemsRenderedProp?.({
+          ...props2,
+          visibleRowStartIndex: props2.visibleRowStartIndex + rowStart,
+          visibleRowStopIndex: props2.visibleRowStopIndex + rowStart,
+          overscanRowStartIndex: props2.overscanRowStartIndex + rowStart,
+          overscanRowStopIndex: props2.overscanRowStopIndex + rowStart
         });
-        onFocusChange(row, column);
-        break;
-      case "Escape":
-        clearSelectionAndFocus(true);
-        break;
-    }
-    containerRef.current?.focus();
-  }, [onKeyDownProp, focusProp, focus, onSelection, onFocusChange, onCopy, moveSelection, clearSelectionAndFocus]);
-  const onContextMenu = (e) => {
-    onMouseDown(e);
-    if (typeof onContextMenuProp === "function") {
-      onContextMenuProp(e);
-    }
-    if (typeof getMenuOptions === "function") {
-      const newOptions = getMenuOptions(selection, focusProp ?? focus);
-      setMenuOptions([...defaultMenuOptions, ...newOptions]);
-    }
-  };
-  const lastItemsRenderedProps = react.useRef();
-  const lastRowStart = react.useRef(rowStart);
-  const onItemsRendered = react.useCallback((props2) => {
-    lastItemsRenderedProps.current = props2;
-    return onItemsRenderedProp?.({
-      ...props2,
-      visibleRowStartIndex: props2.visibleRowStartIndex + rowStart,
-      visibleRowStopIndex: props2.visibleRowStopIndex + rowStart,
-      overscanRowStartIndex: props2.overscanRowStartIndex + rowStart,
-      overscanRowStopIndex: props2.overscanRowStopIndex + rowStart
-    });
-  }, [onItemsRenderedProp, rowStart]);
-  react.useEffect(() => {
-    if (lastItemsRenderedProps.current && rowStart !== lastRowStart.current) {
-      onItemsRendered(lastItemsRenderedProps.current);
-      lastRowStart.current = rowStart;
-    }
-  }, [rowStart, onItemsRendered]);
-  const CellWithWidth = (args) => {
-    const width = columnWidth(args.columnIndex);
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { ...args, width });
-  };
-  react.useEffect(() => {
-    if (gridRef.current) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [rowCount, columnCount]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu.ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { as: ContextMenu.ContextMenu.Trigger, ref: mergeRefs.mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer__default.default, { onResize, children: ({
-      height,
-      width
-    }) => /* @__PURE__ */ jsxRuntime.jsx(reactWindow.VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs.mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Content, { children: menuOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index}`)) })
-  ] });
-});
+      },
+      [onItemsRenderedProp, rowStart]
+    );
+    react.useEffect(() => {
+      if (lastItemsRenderedProps.current && rowStart !== lastRowStart.current) {
+        onItemsRendered(lastItemsRenderedProps.current);
+        lastRowStart.current = rowStart;
+      }
+    }, [rowStart, onItemsRendered]);
+    const CellWithWidth = (args) => {
+      const width = columnWidth(args.columnIndex);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Cell.Cell,
+        {
+          ...args,
+          width
+        }
+      );
+    };
+    react.useEffect(() => {
+      if (gridRef.current) {
+        gridRef.current.resetAfterRowIndex(0);
+      }
+    }, [rowCount, columnCount]);
+    const contextMenuTriggerHeight = autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ContextMenu.ContextMenu,
+      {
+        modal: false,
+        onOpenChange: setContextMenuOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ContextMenu.ContextMenu.Trigger,
+            {
+              className: gridVariants({ bordered: showBorder }),
+              style: {
+                "--grid-radius": roundedRadii[rounded],
+                "--grid-height": contextMenuTriggerHeight ? `${contextMenuTriggerHeight}px` : "100%"
+              },
+              ref: mergeRefs.mergeRefs([forwardedRef, containerRef]),
+              tabIndex: 0,
+              onMouseDown,
+              onMouseMove,
+              onKeyDown,
+              onPointerDown,
+              onPointerUp,
+              onPointerLeave: setPointerCapture,
+              onPointerEnter: setPointerCapture,
+              onContextMenu,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer__default.default, { onResize, children: ({ height, width }) => /* @__PURE__ */ jsxRuntime.jsx(
+                reactWindow.VariableSizeGrid,
+                {
+                  ref: forwardedGridRef ? mergeRefs.mergeRefs([forwardedGridRef, gridRef]) : gridRef,
+                  height,
+                  width,
+                  columnCount,
+                  rowHeight: getRowHeight,
+                  useIsScrolling,
+                  innerElementType: InnerElementType,
+                  itemData: data,
+                  initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight,
+                  initialScrollLeft: getColumnHorizontalPosition(focus.column),
+                  columnWidth,
+                  rowCount,
+                  onScroll,
+                  outerRef,
+                  outerElementType: OuterElementType,
+                  onItemsRendered,
+                  ...props,
+                  children: CellWithWidth
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Content, { children: menuOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            ContextMenu.ContextMenu.Item,
+            {
+              onSelect: option.onSelect,
+              children: option.label
+            },
+            `grid-${index}`
+          )) })
+        ]
+      }
+    );
+  }
+);
 
 exports.Grid = Grid;
 //# sourceMappingURL=index.cjs.map