@rowsncolumns/grid - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1

dist/Cell.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/CellOverlay.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -32,5 +32,6 @@ return result;
  */
-exports.getOffsetFromWidth = (width) => {
+const getOffsetFromWidth = (width) => {
     return width / 2 - 0.5;
 };
+exports.getOffsetFromWidth = getOffsetFromWidth;
 /**
@@ -37,0 +38,0 @@ * Only used for strokes

dist/FillHandle.js

@@ -20,2 +20,4 @@ "use strict";
             border: `${strokeWidth}px ${borderColor} solid`,
+            borderRightWidth: 0,
+            borderBottomWidth: 0,
             background: stroke,
@@ -22,0 +24,0 @@ cursor: "crosshair",

dist/Grid.d.ts

@@ -227,5 +227,5 @@ import React, { Key } from "react";
 export declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export interface SelectionProps extends ShapeConfig, Omit<React.HTMLAttributes<HTMLDivElement>, 'draggable'> {
+export interface SelectionProps extends AreaMeta, ShapeConfig, Omit<React.HTMLAttributes<HTMLDivElement>, "draggable"> {
     fillHandleProps?: Record<string, (e: any) => void>;
-    type: "fill" | "activeCell" | "selection" | 'border';
+    type: "fill" | "activeCell" | "selection" | "border";
     isDragging?: boolean;
@@ -237,2 +237,3 @@ inProgress?: boolean;
     draggable?: boolean;
+    bounds?: AreaProps;
     borderCoverWidth?: number;
@@ -342,2 +343,3 @@ }
     scrollToTop: () => void;
+    scrollToBottom: () => void;
     getDimensions: () => {
@@ -352,7 +354,11 @@ containerWidth: number;
 export declare type StylingProps = AreaStyle[];
-export interface AreaStyle {
+export interface AreaStyle extends AreaMeta {
     bounds: AreaProps;
     style?: Style;
-    strokeStyle?: 'dashed' | 'solid' | 'dotted';
+    strokeStyle?: "dashed" | "solid" | "dotted";
 }
+export interface AreaMeta {
+    title?: string;
+    [key: string]: any;
+}
 export interface Style {
@@ -359,0 +365,0 @@ stroke?: string;

dist/helpers.d.ts

@@ -67,4 +67,6 @@ /// <reference types="react" />
     frozenOffset: number;
+    estimatedTotalHeight: number;
+    estimatedTotalWidth: number;
 }
-export declare const getOffsetForIndexAndAlignment: ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align, scrollOffset, instanceProps, scrollbarSize, frozenOffset, scale, }: AlignmentProps) => number;
+export declare const getOffsetForIndexAndAlignment: ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align, scrollOffset, instanceProps, scrollbarSize, frozenOffset, scale, estimatedTotalHeight, estimatedTotalWidth, }: AlignmentProps) => number;
 export declare const getOffsetForColumnAndAlignment: (props: Omit<AlignmentProps, "itemType">) => number;
@@ -143,3 +145,3 @@ export declare const getOffsetForRowAndAlignment: (props: Omit<AlignmentProps, "itemType">) => number;
  */
-export declare const isAreasEqual: (area1: AreaProps, area2: AreaProps) => boolean;
+export declare const isAreasEqual: (area1: AreaProps | undefined, area2: AreaProps | undefined) => boolean;
 /**
@@ -194,2 +196,8 @@ * Get maximum bound of an area, caters to merged cells
 /**
+ * Simple utility function to check if cell is within bounds
+ * @param cell
+ * @param bounds
+ */
+export declare const isCellWithinBounds: (cell: CellInterface, bounds: AreaProps) => boolean;
+/**
  * Find next row Index
@@ -196,0 +204,0 @@ * @param rowIndex

dist/helpers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArrowKey = exports.castToString = exports.focusableNodeNames = exports.findNextCellInDataRegion = exports.findLastContentfulCell = exports.findNextContentfulCell = exports.clampIndex = exports.isEqualCells = exports.isNull = exports.autoSizerCanvas = exports.AutoSizerCanvas = exports.canUseDOM = exports.extendAreaToMergedCells = exports.isAreasEqual = exports.areaInsideArea = exports.areaIntersects = exports.findNextCellWithinBounds = exports.prepareClipboardData = exports.numberToAlphabet = exports.clampCellCoords = exports.newSelectionFromDrag = exports.selectionSpansCells = exports.selectionFromActiveCell = exports.requestTimeout = exports.cancelTimeout = exports.getOffsetForRowAndAlignment = exports.getOffsetForColumnAndAlignment = exports.getOffsetForIndexAndAlignment = exports.rafThrottle = exports.debounce = exports.throttle = exports.cellIdentifier = exports.getEstimatedTotalWidth = exports.getEstimatedTotalHeight = exports.getItemMetadata = exports.getColumnWidth = exports.getRowHeight = exports.getColumnOffset = exports.getRowOffset = exports.itemKey = exports.getBoundedCells = exports.getColumnStopIndexForStartIndex = exports.getColumnStartIndexForOffset = exports.getRowStopIndexForStartIndex = exports.getRowStartIndexForOffset = exports.ItemType = exports.Align = void 0;
+exports.isArrowKey = exports.castToString = exports.focusableNodeNames = exports.findNextCellInDataRegion = exports.findLastContentfulCell = exports.findNextContentfulCell = exports.clampIndex = exports.isCellWithinBounds = exports.isEqualCells = exports.isNull = exports.autoSizerCanvas = exports.AutoSizerCanvas = exports.canUseDOM = exports.extendAreaToMergedCells = exports.isAreasEqual = exports.areaInsideArea = exports.areaIntersects = exports.findNextCellWithinBounds = exports.prepareClipboardData = exports.numberToAlphabet = exports.clampCellCoords = exports.newSelectionFromDrag = exports.selectionSpansCells = exports.selectionFromActiveCell = exports.requestTimeout = exports.cancelTimeout = exports.getOffsetForRowAndAlignment = exports.getOffsetForColumnAndAlignment = exports.getOffsetForIndexAndAlignment = exports.rafThrottle = exports.debounce = exports.throttle = exports.cellIdentifier = exports.getEstimatedTotalWidth = exports.getEstimatedTotalHeight = exports.getItemMetadata = exports.getColumnWidth = exports.getRowHeight = exports.getColumnOffset = exports.getRowOffset = exports.itemKey = exports.getBoundedCells = exports.getColumnStopIndexForStartIndex = exports.getColumnStartIndexForOffset = exports.getRowStopIndexForStartIndex = exports.getRowStartIndexForOffset = exports.ItemType = exports.Align = void 0;
 const types_1 = require("./types");
@@ -18,3 +18,3 @@ var Align;
 })(ItemType = exports.ItemType || (exports.ItemType = {}));
-exports.getRowStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
+const getRowStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
     return findNearestItem({
@@ -31,3 +31,4 @@ itemType: ItemType.row,
 };
-exports.getRowStopIndexForStartIndex = ({ startIndex, rowCount, rowHeight, columnWidth, scrollTop, containerHeight, instanceProps, scale, }) => {
+exports.getRowStartIndexForOffset = getRowStartIndexForOffset;
+const getRowStopIndexForStartIndex = ({ startIndex, rowCount, rowHeight, columnWidth, scrollTop, containerHeight, instanceProps, scale, }) => {
     const itemMetadata = exports.getItemMetadata({
@@ -57,3 +58,4 @@ itemType: ItemType.row,
 };
-exports.getColumnStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
+exports.getRowStopIndexForStartIndex = getRowStopIndexForStartIndex;
+const getColumnStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
     return findNearestItem({
@@ -70,3 +72,4 @@ itemType: ItemType.column,
 };
-exports.getColumnStopIndexForStartIndex = ({ startIndex, rowHeight, columnWidth, instanceProps, containerWidth, scrollLeft, columnCount, scale, }) => {
+exports.getColumnStartIndexForOffset = getColumnStartIndexForOffset;
+const getColumnStopIndexForStartIndex = ({ startIndex, rowHeight, columnWidth, instanceProps, containerWidth, scrollLeft, columnCount, scale, }) => {
     const itemMetadata = exports.getItemMetadata({
@@ -96,3 +99,4 @@ itemType: ItemType.column,
 };
-exports.getBoundedCells = (area) => {
+exports.getColumnStopIndexForStartIndex = getColumnStopIndexForStartIndex;
+const getBoundedCells = (area) => {
     const cells = new Set();
@@ -109,4 +113,6 @@ if (!area)
 };
-exports.itemKey = ({ rowIndex, columnIndex }) => `${rowIndex}:${columnIndex}`;
-exports.getRowOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, }) => {
+exports.getBoundedCells = getBoundedCells;
+const itemKey = ({ rowIndex, columnIndex }) => `${rowIndex}:${columnIndex}`;
+exports.itemKey = itemKey;
+const getRowOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, }) => {
     return exports.getItemMetadata({
@@ -121,3 +127,4 @@ itemType: ItemType.row,
 };
-exports.getColumnOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, }) => {
+exports.getRowOffset = getRowOffset;
+const getColumnOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, }) => {
     return exports.getItemMetadata({
@@ -132,9 +139,12 @@ itemType: ItemType.column,
 };
-exports.getRowHeight = (index, instanceProps) => {
+exports.getColumnOffset = getColumnOffset;
+const getRowHeight = (index, instanceProps) => {
     return instanceProps.rowMetadataMap[index].size;
 };
-exports.getColumnWidth = (index, instanceProps) => {
+exports.getRowHeight = getRowHeight;
+const getColumnWidth = (index, instanceProps) => {
     return instanceProps.columnMetadataMap[index].size;
 };
-exports.getItemMetadata = ({ itemType, index, rowHeight, columnWidth, instanceProps, scale = 2, }) => {
+exports.getColumnWidth = getColumnWidth;
+const getItemMetadata = ({ itemType, index, rowHeight, columnWidth, instanceProps, scale = 2, }) => {
     var _a;
@@ -183,2 +193,3 @@ let itemMetadataMap, itemSize, lastMeasuredIndex, recalcIndices;
 };
+exports.getItemMetadata = getItemMetadata;
 const findNearestItem = ({ itemType, rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
@@ -279,3 +290,3 @@ let itemMetadataMap, lastMeasuredIndex;
 };
-exports.getEstimatedTotalHeight = (rowCount, instanceProps) => {
+const getEstimatedTotalHeight = (rowCount, instanceProps) => {
     const { estimatedRowHeight } = instanceProps;
@@ -297,3 +308,4 @@ let totalSizeOfMeasuredRows = 0;
 };
-exports.getEstimatedTotalWidth = (columnCount, instanceProps) => {
+exports.getEstimatedTotalHeight = getEstimatedTotalHeight;
+const getEstimatedTotalWidth = (columnCount, instanceProps) => {
     const { estimatedColumnWidth } = instanceProps;
@@ -315,4 +327,6 @@ let totalSizeOfMeasuredRows = 0;
 };
+exports.getEstimatedTotalWidth = getEstimatedTotalWidth;
 /* Create a stringified cell identifier */
-exports.cellIdentifier = (rowIndex, columnIndex) => `${rowIndex},${columnIndex}`;
+const cellIdentifier = (rowIndex, columnIndex) => `${rowIndex},${columnIndex}`;
+exports.cellIdentifier = cellIdentifier;
 /**
@@ -364,3 +378,3 @@ * @desc Throttle fn
 exports.rafThrottle = rafThrottle;
-exports.getOffsetForIndexAndAlignment = ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align = Align.smart, scrollOffset, instanceProps, scrollbarSize, frozenOffset = 0, scale, }) => {
+const getOffsetForIndexAndAlignment = ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align = Align.smart, scrollOffset, instanceProps, scrollbarSize, frozenOffset = 0, scale, estimatedTotalHeight, estimatedTotalWidth, }) => {
     const size = itemType === "column" ? containerWidth : containerHeight;
@@ -377,5 +391,3 @@ const itemMetadata = exports.getItemMetadata({
     // To ensure it reflects actual measurements instead of just estimates.
-    const estimatedTotalSize = itemType === "column"
-        ? exports.getEstimatedTotalWidth(columnCount, instanceProps)
-        : exports.getEstimatedTotalHeight(rowCount, instanceProps);
+    const estimatedTotalSize = itemType === "column" ? estimatedTotalWidth : estimatedTotalHeight;
     const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset - frozenOffset));
@@ -416,3 +428,4 @@ const minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
 };
-exports.getOffsetForColumnAndAlignment = (props) => {
+exports.getOffsetForIndexAndAlignment = getOffsetForIndexAndAlignment;
+const getOffsetForColumnAndAlignment = (props) => {
     return exports.getOffsetForIndexAndAlignment({
@@ -423,3 +436,4 @@ itemType: ItemType.column,
 };
-exports.getOffsetForRowAndAlignment = (props) => {
+exports.getOffsetForColumnAndAlignment = getOffsetForColumnAndAlignment;
+const getOffsetForRowAndAlignment = (props) => {
     return exports.getOffsetForIndexAndAlignment({
@@ -430,2 +444,3 @@ itemType: ItemType.row,
 };
+exports.getOffsetForRowAndAlignment = getOffsetForRowAndAlignment;
 // Animation frame based implementation of setTimeout.
@@ -462,3 +477,3 @@ // Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
 exports.requestTimeout = requestTimeout;
-exports.selectionFromActiveCell = (activeCell) => {
+const selectionFromActiveCell = (activeCell) => {
     if (!activeCell)
@@ -477,2 +492,3 @@ return [];
 };
+exports.selectionFromActiveCell = selectionFromActiveCell;
 /**
@@ -482,3 +498,3 @@ * Check if a selection are spans multiple cells
  */
-exports.selectionSpansCells = (sel) => {
+const selectionSpansCells = (sel) => {
     if (!sel)
@@ -488,2 +504,3 @@ return false;
 };
+exports.selectionSpansCells = selectionSpansCells;
 /**
@@ -495,3 +512,3 @@ * When user tries to drag a selection
  */
-exports.newSelectionFromDrag = (initialSelection, from, to, topBound = 0, leftBound = 0, rowCount, columnCount) => {
+const newSelectionFromDrag = (initialSelection, from, to, topBound = 0, leftBound = 0, rowCount, columnCount) => {
     const currentBounds = initialSelection.bounds;
@@ -505,6 +522,7 @@ const top = Math.max(topBound, Math.min(rowCount, to.rowIndex + currentBounds.top - from.rowIndex));
             bottom: top + (currentBounds.bottom - currentBounds.top),
-            right: left + (currentBounds.right - currentBounds.left)
-        }
+            right: left + (currentBounds.right - currentBounds.left),
+        },
     };
 };
+exports.newSelectionFromDrag = newSelectionFromDrag;
 /**
@@ -516,3 +534,3 @@ * Clamp cell coordinates to be inside activeCell and selection
  */
-exports.clampCellCoords = (coords, activeCell, selection) => {
+const clampCellCoords = (coords, activeCell, selection) => {
     if (activeCell) {
@@ -528,2 +546,3 @@ coords.rowIndex = Math.max(activeCell.rowIndex, coords.rowIndex);
 };
+exports.clampCellCoords = clampCellCoords;
 /**
@@ -533,6 +552,7 @@ * Converts a number to alphabet
  */
-exports.numberToAlphabet = (i) => {
+const numberToAlphabet = (i) => {
     return ((i >= 26 ? exports.numberToAlphabet(((i / 26) >> 0) - 1) : "") +
         "abcdefghijklmnopqrstuvwxyz"[i % 26 >> 0]).toUpperCase();
 };
+exports.numberToAlphabet = numberToAlphabet;
 /**
@@ -542,3 +562,3 @@ * Convert selections to html and csv data
  */
-exports.prepareClipboardData = (rows) => {
+const prepareClipboardData = (rows) => {
     const html = ["<table>"];
@@ -548,3 +568,3 @@ const csv = [];
         if (exports.isNull(value))
-            return '';
+            return "";
         return value;
@@ -566,2 +586,3 @@ };
 };
+exports.prepareClipboardData = prepareClipboardData;
 /**
@@ -573,3 +594,3 @@ * Cycles active cell within selecton bounds
  */
-exports.findNextCellWithinBounds = (activeCellBounds, selectionBounds, direction = types_1.Direction.Right) => {
+const findNextCellWithinBounds = (activeCellBounds, selectionBounds, direction = types_1.Direction.Right) => {
     const intersects = exports.areaIntersects(activeCellBounds, selectionBounds);
@@ -630,2 +651,3 @@ if (!intersects)
 };
+exports.findNextCellWithinBounds = findNextCellWithinBounds;
 /**
@@ -636,3 +658,3 @@ * Check if 2 areas overlap
  */
-exports.areaIntersects = (area1, area2) => {
+const areaIntersects = (area1, area2) => {
     if (area1.left > area2.right || area2.left > area1.right) {
@@ -646,2 +668,3 @@ return false;
 };
+exports.areaIntersects = areaIntersects;
 /**
@@ -652,5 +675,9 @@ * Check if area is inside another area
  */
-exports.areaInsideArea = (needle, haystack) => {
-    return needle.top >= haystack.top && needle.bottom <= haystack.bottom && needle.left >= haystack.left && needle.right <= haystack.right;
+const areaInsideArea = (needle, haystack) => {
+    return (needle.top >= haystack.top &&
+        needle.bottom <= haystack.bottom &&
+        needle.left >= haystack.left &&
+        needle.right <= haystack.right);
 };
+exports.areaInsideArea = areaInsideArea;
 /**
@@ -661,3 +688,6 @@ * Check if two areas are equal
  */
-exports.isAreasEqual = (area1, area2) => {
+const isAreasEqual = (area1, area2) => {
+    if (area1 === void 0 || area2 === void 0) {
+        return false;
+    }
     return (area1.bottom === area2.bottom &&
@@ -668,2 +698,3 @@ area1.top === area2.top &&
 };
+exports.isAreasEqual = isAreasEqual;
 /**
@@ -674,3 +705,3 @@ * Get maximum bound of an area, caters to merged cells
  */
-exports.extendAreaToMergedCells = (_area, mergedCells) => {
+const extendAreaToMergedCells = (_area, mergedCells) => {
     const area = { ..._area };
@@ -687,6 +718,7 @@ for (const bounds of mergedCells) {
 };
+exports.extendAreaToMergedCells = extendAreaToMergedCells;
 exports.canUseDOM = !!(typeof window !== "undefined" &&
     window.document &&
     window.document.createElement);
-exports.AutoSizerCanvas = (defaults = {}) => {
+const AutoSizerCanvas = (defaults = {}) => {
     const { fontFamily = "Arial", fontSize = 12, fontWeight = "", fontStyle = "", lineHeight = 16, scale = 1, } = defaults;
@@ -738,7 +770,9 @@ var o = {
 };
+exports.AutoSizerCanvas = AutoSizerCanvas;
 /* Export a singleton */
 exports.autoSizerCanvas = exports.AutoSizerCanvas();
 /* Check if a value is null */
-exports.isNull = (value) => value === void 0 || value === null || value === "";
-exports.isEqualCells = (a, b) => {
+const isNull = (value) => value === void 0 || value === null || value === "";
+exports.isNull = isNull;
+const isEqualCells = (a, b) => {
     if (exports.isNull(a) || exports.isNull(b) || a === null || b === null)
@@ -748,3 +782,19 @@ return false;
 };
-exports.clampIndex = (index, isHidden, direction) => {
+exports.isEqualCells = isEqualCells;
+/**
+ * Simple utility function to check if cell is within bounds
+ * @param cell
+ * @param bounds
+ */
+const isCellWithinBounds = (cell, bounds) => {
+    if (cell.rowIndex < bounds.top || cell.rowIndex > bounds.bottom) {
+        return false;
+    }
+    if (cell.columnIndex < bounds.left || cell.columnIndex > bounds.right) {
+        return false;
+    }
+    return true;
+};
+exports.isCellWithinBounds = isCellWithinBounds;
+const clampIndex = (index, isHidden, direction) => {
     switch (direction) {
@@ -769,2 +819,3 @@ case types_1.Direction.Right:
 };
+exports.clampIndex = clampIndex;
 /**
@@ -787,3 +838,3 @@ * Find a cell with content if the current cell is out of the current dataregion
  */
-exports.findNextContentfulCell = (activeCell, getValue, isHidden, direction, limit) => {
+const findNextContentfulCell = (activeCell, getValue, isHidden, direction, limit) => {
     var { rowIndex, columnIndex } = activeCell;
@@ -831,2 +882,3 @@ switch (direction) {
 };
+exports.findNextContentfulCell = findNextContentfulCell;
 /**
@@ -840,3 +892,3 @@ * Find the next cell
  */
-exports.findLastContentfulCell = (activeCell, getValue, isHidden, direction, limit) => {
+const findLastContentfulCell = (activeCell, getValue, isHidden, direction, limit) => {
     var { rowIndex, columnIndex } = activeCell;
@@ -904,6 +956,7 @@ switch (direction) {
 };
+exports.findLastContentfulCell = findLastContentfulCell;
 /**
  * Ex
  */
-exports.findNextCellInDataRegion = (activeCell, getValue, isHidden, direction, limit) => {
+const findNextCellInDataRegion = (activeCell, getValue, isHidden, direction, limit) => {
     var { rowIndex, columnIndex } = activeCell;
@@ -959,2 +1012,3 @@ const isCurrentCellEmpty = exports.isNull(getValue(activeCell));
 };
+exports.findNextCellInDataRegion = findNextCellInDataRegion;
 /* Focusable node names */
@@ -966,3 +1020,3 @@ exports.focusableNodeNames = new Set(["INPUT", "TEXTAREA", "SELECT"]);
  */
-exports.castToString = (value) => {
+const castToString = (value) => {
     if (value === null || value === void 0)
@@ -972,5 +1026,7 @@ return void 0;
 };
-exports.isArrowKey = (keyCode) => {
+exports.castToString = castToString;
+const isArrowKey = (keyCode) => {
     return [types_1.KeyCodes.Up, types_1.KeyCodes.Down, types_1.KeyCodes.Left, types_1.KeyCodes.Right].includes(keyCode);
 };
+exports.isArrowKey = isArrowKey;
 //# sourceMappingURL=helpers.js.map

dist/hooks/useEditable.d.ts

@@ -201,2 +201,6 @@ import React from "react";
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>) => void;
+    /**
+     * Max editor width
+     */
+    maxWidth?: string | number;
 }
@@ -203,0 +207,0 @@ /**

dist/hooks/useEditable.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -112,2 +112,3 @@ return result;
 const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections = [], activeCell, canEdit = defaultCanEdit, frozenRows = 0, frozenColumns = 0, hideOnBlur = true, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, rowCount, columnCount, selectionTopBound = 0, selectionBottomBound = rowCount - 1, selectionLeftBound = 0, selectionRightBound = columnCount - 1, editorProps, onBeforeEdit, onKeyDown, }) => {
+    var _a, _b;
     const [isEditorShown, setShowEditor] = react_1.useState(false);
@@ -131,2 +132,3 @@ const [value, setValue] = react_1.useState("");
     const initialValueRef = react_1.useRef();
+    const maxEditorDimensionsRef = react_1.useRef();
     /* To prevent stale closures data */
@@ -176,3 +178,12 @@ const getValueRef = react_1.useRef(getValue);
             const value = initialValue || cellValue || "";
+            const cellPosition = getCellPosition(pos, scrollPosition);
             /**
+             * Set max editor ref based on grid container
+             */
+            const { containerWidth, containerHeight, } = gridRef.current.getDimensions();
+            maxEditorDimensionsRef.current = {
+                height: containerHeight - cellPosition.y,
+                width: containerWidth - cellPosition.x,
+            };
+            /**
              * If the user has entered a value in the cell, mark it as dirty
@@ -187,3 +198,3 @@ * So that during mousedown, onSubmit gets called
             setAutoFocus(autoFocus);
-            setPosition(getCellPosition(pos, scrollPosition));
+            setPosition(cellPosition);
             showEditor();
@@ -416,3 +427,3 @@ }
         /* This is the cell that is currently being edited */
-        cell: editingCell, activeCell: activeCell, autoFocus: autoFocus, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleCancel, position: position, scrollPosition: scrollPosition, nextFocusableCell: nextFocusableCell, onBlur: handleBlur, onKeyDown: onKeyDown }))) : null;
+        cell: editingCell, activeCell: activeCell, autoFocus: autoFocus, value: value, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleCancel, position: position, scrollPosition: scrollPosition, nextFocusableCell: nextFocusableCell, onBlur: handleBlur, onKeyDown: onKeyDown, maxWidth: (_a = maxEditorDimensionsRef.current) === null || _a === void 0 ? void 0 : _a.width, maxHeight: (_b = maxEditorDimensionsRef.current) === null || _b === void 0 ? void 0 : _b.height }))) : null;
     return {
@@ -419,0 +430,0 @@ editorComponent,

dist/hooks/useFilter.d.ts

@@ -7,12 +7,18 @@ import React from "react";
     style?: AreaStyle;
+    title?: string;
 }
 export declare type Filter = Record<string, FilterDefinition>;
-export declare type FilterDefinition = {
-    operator?: ContainsTextOperators | DataValidationOperator;
-    values?: React.ReactText[];
+export declare type FilterDefinition<T = React.ReactText> = {
+    condition?: FilterConditionDefinition<T>;
+    equals?: T[];
     sort?: SortDirection;
 };
+export declare type FilterOperators = ContainsTextOperators | DataValidationOperator;
+export declare type FilterConditionDefinition<T = React.ReactText> = {
+    operator?: FilterOperators;
+    values?: T[];
+};
 export declare type SortDirection = "asc" | "desc";
-export declare type DataValidationOperator = "between" | "notBetween" | "equal" | "notEqual" | "greaterThan" | "lessThan" | "greaterThanOrEqual" | "lessThanOrEqual";
-export declare type ContainsTextOperators = "containsText" | "notContainsText" | "containsBlanks" | "notContainsBlanks" | "containsErrors" | "notContainsErrors";
+export declare type DataValidationOperator = "isEmpty" | "notIsEmpty" | "between" | "notBetween" | "equal" | "notEqual" | "greaterThan" | "lessThan" | "greaterThanOrEqual" | "lessThanOrEqual";
+export declare type ContainsTextOperators = "containsText" | "notContainsText" | "containsBlanks" | "notContainsBlanks" | "containsErrors" | "notContainsErrors" | "startsWithText" | "endsWithText" | "equalText";
 export interface FilterProps {
@@ -19,0 +25,0 @@ /**

dist/hooks/useFilter.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -106,3 +106,3 @@ return result;
     }, [filterCell, currentFilter]);
-    const filterComponent = isFilterVisible && FilterComponent ? (react_1.default.createElement(FilterComponent, { position: position, width: width, values: values, index: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.index, filterView: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filterView, filter: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filter, columnIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.columnIndex })) : null;
+    const filterComponent = isFilterVisible && FilterComponent ? (react_1.default.createElement(FilterComponent, { position: position, width: width, values: values, index: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.index, filterView: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filterView, filter: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filter, columnIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.columnIndex, rowIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.rowIndex, onRequestClose: hideFilter, onRequestShow: handleShowFilter })) : null;
     return {
@@ -109,0 +109,0 @@ filterComponent,

dist/hooks/usePagination.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/hooks/useSelection.d.ts

@@ -155,3 +155,3 @@ import React from "react";
      */
-    onSelectionMouseDown?: (e: React.MouseEvent<HTMLDivElement>, cell: CellInterface | undefined, selection: SelectionArea | undefined, index: number | undefined) => void;
+    onSelectionMouseDown?: (e: React.MouseEvent<HTMLDivElement>, cell: CellInterface | undefined, selection: SelectionArea | undefined, index: number | undefined, shouldClamp?: boolean) => void;
     /**
@@ -165,2 +165,7 @@ * Boolean to indicate if a selection is being dragged
     draggedSelection?: SelectionArea;
+    /**
+     * The selection that user selected before beginning
+     * the drag
+     */
+    initialDraggedSelection?: SelectionArea;
 }
@@ -167,0 +172,0 @@ /**

dist/hooks/useSelection.js

@@ -25,2 +25,3 @@ "use strict";
     const isDragging = react_1.useRef(false);
+    const hasUserMovedSelection = react_1.useRef(false);
     const initialDraggedSelection = react_1.useRef();
@@ -799,2 +800,5 @@ const initialDraggedCell = react_1.useRef();
     }, []);
+    /**
+     * When user releases mouse on the fill handle
+     */
     const handleFillHandleMouseUp = react_1.useCallback((e) => {
@@ -858,3 +862,3 @@ var _a, _b;
      */
-    const handleSelectionMouseDown = react_1.useCallback((e, activeCell, selection, index) => {
+    const handleSelectionMouseDown = react_1.useCallback((e, activeCell, selection, index, shouldClamp = true) => {
         if (!gridRef.current) {
@@ -867,6 +871,8 @@ return;
         }
-        /* Make sure the coords do not extend selection bounds */
-        coords = helpers_1.clampCellCoords(coords, activeCell, selection);
         /* Initial cell that is selected by user */
         initialDraggedCell.current = coords;
+        /* Make sure the coords do not extend selection bounds */
+        if (shouldClamp) {
+            coords = helpers_1.clampCellCoords(coords, activeCell, selection);
+        }
         /* Set selection */
@@ -904,2 +910,10 @@ if (activeCell) {
         }
+        /**
+         * Skip if user is moving the selection
+         * to the same starting position
+         */
+        if (!hasUserMovedSelection.current &&
+            helpers_1.isEqualCells(initialDraggedCell.current, coords)) {
+            return;
+        }
         let sel = helpers_1.newSelectionFromDrag(initialDraggedSelection.current, initialDraggedCell.current, coords, selectionTopBound, selectionLeftBound, rowCount, columnCount);
@@ -909,2 +923,4 @@ // Not required
         draggedSelection.current = sel;
+        // User has now moved the selection,
+        hasUserMovedSelection.current = true;
         /* Scroll to the cell */
@@ -952,2 +968,3 @@ (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(coords);
         draggedSelectionIndex.current = void 0;
+        hasUserMovedSelection.current = false;
         /* Remove event handlers */
@@ -964,2 +981,3 @@ document.removeEventListener("mouseup", handleSelectionMouseUp);
         draggedSelection: draggedSelection.current,
+        initialDraggedSelection: initialDraggedSelection.current,
         onSelectionMouseDown: handleSelectionMouseDown,
@@ -966,0 +984,0 @@ onMouseDown: handleMouseDown,

dist/hooks/useTooltip.d.ts

@@ -21,7 +21,7 @@ import React from "react";
      */
-    onMouseMove: ((e: React.MouseEvent<HTMLInputElement>) => void) | undefined;
+    onMouseMove: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     /**
      * Mouse leave listener to hide tooltip
      */
-    onMouseLeave: ((e: React.MouseEvent<HTMLInputElement>) => void) | undefined;
+    onMouseLeave: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
 }
@@ -28,0 +28,0 @@ export interface DefaultTooltipProps {

dist/hooks/useTooltip.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/Image.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -20,0 +20,0 @@ return result;

dist/index.js

@@ -10,3 +10,3 @@ "use strict";
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
@@ -13,0 +13,0 @@ var __importDefault = (this && this.__importDefault) || function (mod) {

dist/utils.d.ts

@@ -8,2 +8,2 @@ import { ShapeConfig } from "konva/types/Shape";
 export declare const createCanvasBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, dash, dashEnabled, lineCap, key, }: ShapeConfig) => JSX.Element;
-export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, type, ...props }: SelectionProps) => JSX.Element;
+export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, type, bounds, ...props }: SelectionProps) => JSX.Element;

dist/utils.js

@@ -13,3 +13,3 @@ "use strict";
  */
-exports.createCanvasBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, dash, dashEnabled, lineCap = "square", key, }) => {
+const createCanvasBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, dash, dashEnabled, lineCap = "square", key, }) => {
     const commonProps = {
@@ -32,7 +32,8 @@ perfectDrawEnabled: false,
 };
-exports.createHTMLBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, strokeStyle = "solid", fillOpacity = 1, draggable, isDragging, borderCoverWidth = 5, type, ...props }) => {
+exports.createCanvasBox = createCanvasBox;
+const createHTMLBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, strokeStyle = "solid", fillOpacity = 1, draggable, isDragging, borderCoverWidth = 5, type, bounds, ...props }) => {
     const lineStyles = {
         borderWidth: 0,
-        position: 'absolute',
-        pointerEvents: 'none'
+        position: "absolute",
+        pointerEvents: "none",
     };
@@ -46,11 +47,5 @@ /**
     const borderCoverStyle = {
-        position: 'absolute',
-        pointerEvents: draggable
-            ? 'auto'
-            : 'none',
-        cursor: draggable
-            ? isDragging
-                ? 'grabbing'
-                : 'grab'
-            : 'initial'
+        position: "absolute",
+        pointerEvents: draggable ? "auto" : "none",
+        cursor: draggable ? (isDragging ? "grabbing" : "grab") : "initial",
     };
@@ -132,2 +127,15 @@ width = width - Math.floor(strokeWidth / 2);
     ];
+    /**
+     * Display title component
+     * Only if title is not null
+     */
+    const titleProps = {
+        isDragging,
+        x,
+        y,
+        stroke: strokeTopColor,
+        width,
+        bounds,
+        strokeWidth,
+    };
     return (react_1.default.createElement(react_1.default.Fragment, { key: key },
@@ -143,3 +151,3 @@ fill && (react_1.default.createElement("div", { style: {
                 userSelect: "none",
-                pointerEvents: 'none',
+                pointerEvents: "none",
             } })),
@@ -149,2 +157,3 @@ lines,
 };
+exports.createHTMLBox = createHTMLBox;
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@rowsncolumns/grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "main": "dist/index.js",
@@ -33,3 +33,3 @@ "license": "MIT",
     "@types/scroller": "^0.1.1",
-    "konva": "^7.2.2",
+    "konva": "^7.2.5",
     "react-konva": "^17.0.1-3",
@@ -47,3 +47,3 @@ "scroller": "^0.0.3",
   },
-  "gitHead": "e8015b814e450fc427f194d59b0eeec1ef9942fc"
+  "gitHead": "843c7971d550d11bfda09edc3a34de64d0cc9d8f"
 }

src/helpers.ts

@@ -534,2 +534,4 @@ // Utilities extracted from https://github.com/bvaughn/react-window
   frozenOffset: number;
+  estimatedTotalHeight: number;
+  estimatedTotalWidth: number;
 }
@@ -552,2 +554,4 @@
   scale,
+  estimatedTotalHeight,
+  estimatedTotalWidth,
 }: AlignmentProps): number => {
@@ -567,5 +571,3 @@ const size = itemType === "column" ? containerWidth : containerHeight;
   const estimatedTotalSize =
-    itemType === "column"
-      ? getEstimatedTotalWidth(columnCount, instanceProps)
-      : getEstimatedTotalHeight(rowCount, instanceProps);
+    itemType === "column" ? estimatedTotalWidth : estimatedTotalHeight;
 
@@ -689,19 +691,36 @@ const maxOffset = Math.max(
  * Check if a selection are spans multiple cells
- * @param sel 
+ * @param sel
  */
 export const selectionSpansCells = (sel: AreaProps | undefined) => {
-  if (!sel) return false
-  return sel.bottom !== sel.top || sel.left !== sel.right
-}
+  if (!sel) return false;
+  return sel.bottom !== sel.top || sel.left !== sel.right;
+};
 
 /**
  * When user tries to drag a selection
- * @param initialSelection 
- * @param from 
- * @param to 
+ * @param initialSelection
+ * @param from
+ * @param to
  */
-export const newSelectionFromDrag = (initialSelection: SelectionArea, from: CellInterface, to: CellInterface, topBound: number = 0, leftBound: number = 0, rowCount: number, columnCount: number) => {
-  const currentBounds = initialSelection.bounds
-  const top = Math.max(topBound, Math.min(rowCount, to.rowIndex + currentBounds.top - from.rowIndex))
-  const left = Math.max(leftBound, Math.min(columnCount, to.columnIndex + currentBounds.left - from.columnIndex))
+export const newSelectionFromDrag = (
+  initialSelection: SelectionArea,
+  from: CellInterface,
+  to: CellInterface,
+  topBound: number = 0,
+  leftBound: number = 0,
+  rowCount: number,
+  columnCount: number
+) => {
+  const currentBounds = initialSelection.bounds;
+  const top = Math.max(
+    topBound,
+    Math.min(rowCount, to.rowIndex + currentBounds.top - from.rowIndex)
+  );
+  const left = Math.max(
+    leftBound,
+    Math.min(
+      columnCount,
+      to.columnIndex + currentBounds.left - from.columnIndex
+    )
+  );
   return {
@@ -712,24 +731,34 @@ bounds: {
       bottom: top + (currentBounds.bottom - currentBounds.top),
-      right: left + (currentBounds.right - currentBounds.left)
-    }
-  }
-}
+      right: left + (currentBounds.right - currentBounds.left),
+    },
+  };
+};
 
 /**
  * Clamp cell coordinates to be inside activeCell and selection
- * @param coords 
- * @param activeCell 
- * @param selection 
+ * @param coords
+ * @param activeCell
+ * @param selection
  */
-export const clampCellCoords = (coords: CellInterface, activeCell: CellInterface | undefined, selection: SelectionArea | undefined) => {
+export const clampCellCoords = (
+  coords: CellInterface,
+  activeCell: CellInterface | undefined,
+  selection: SelectionArea | undefined
+) => {
   if (activeCell) {
-    coords.rowIndex = Math.max(activeCell.rowIndex, coords.rowIndex)
-    coords.columnIndex = Math.min(activeCell.columnIndex, coords.columnIndex)
+    coords.rowIndex = Math.max(activeCell.rowIndex, coords.rowIndex);
+    coords.columnIndex = Math.min(activeCell.columnIndex, coords.columnIndex);
   }
   if (selection) {
-    coords.rowIndex = Math.min(selection.bounds.bottom, Math.max(selection.bounds.top, coords.rowIndex))
-    coords.columnIndex = Math.min(selection.bounds.right, Math.max(selection.bounds.left, coords.columnIndex))
+    coords.rowIndex = Math.min(
+      selection.bounds.bottom,
+      Math.max(selection.bounds.top, coords.rowIndex)
+    );
+    coords.columnIndex = Math.min(
+      selection.bounds.right,
+      Math.max(selection.bounds.left, coords.columnIndex)
+    );
   }
-  return coords
-}
+  return coords;
+};
 
@@ -757,5 +786,5 @@ /**
   const sanitizeCell = (value: any) => {
-    if (isNull(value)) return ''
-    return value
-  }
+    if (isNull(value)) return "";
+    return value;
+  };
   rows.forEach((row) => {
@@ -861,15 +890,26 @@ html.push("<tr>");
  * Check if area is inside another area
- * @param needle 
- * @param haystack 
+ * @param needle
+ * @param haystack
  */
 export const areaInsideArea = (needle: AreaProps, haystack: AreaProps) => {
-  return needle.top >= haystack.top && needle.bottom <= haystack.bottom && needle.left >= haystack.left && needle.right <= haystack.right
-}
+  return (
+    needle.top >= haystack.top &&
+    needle.bottom <= haystack.bottom &&
+    needle.left >= haystack.left &&
+    needle.right <= haystack.right
+  );
+};
 
 /**
  * Check if two areas are equal
- * @param area1 
- * @param area2 
+ * @param area1
+ * @param area2
  */
-export const isAreasEqual = (area1: AreaProps, area2: AreaProps) => {
+export const isAreasEqual = (
+  area1: AreaProps | undefined,
+  area2: AreaProps | undefined
+) => {
+  if (area1 === void 0 || area2 === void 0) {
+    return false;
+  }
   return (
@@ -880,4 +920,4 @@ area1.bottom === area2.bottom &&
     area1.right === area2.right
-  )
-}
+  );
+};
 
@@ -1008,2 +1048,17 @@ /**
 /**
+ * Simple utility function to check if cell is within bounds
+ * @param cell
+ * @param bounds
+ */
+export const isCellWithinBounds = (cell: CellInterface, bounds: AreaProps) => {
+  if (cell.rowIndex < bounds.top || cell.rowIndex > bounds.bottom) {
+    return false;
+  }
+  if (cell.columnIndex < bounds.left || cell.columnIndex > bounds.right) {
+    return false;
+  }
+  return true;
+};
+
+/**
  * Find next row Index
@@ -1010,0 +1065,0 @@ * @param rowIndex

src/hooks/useSelection.ts

@@ -209,3 +209,4 @@ import React, {
     selection: SelectionArea | undefined,
-    index: number | undefined
+    index: number | undefined,
+    shouldClamp?: boolean
   ) => void;
@@ -220,2 +221,7 @@ /**
   draggedSelection?: SelectionArea;
+  /**
+   * The selection that user selected before beginning
+   * the drag
+   */
+  initialDraggedSelection?: SelectionArea;
 }
@@ -272,2 +278,3 @@
   const isDragging = useRef<boolean>(false);
+  const hasUserMovedSelection = useRef<boolean>(false);
   const initialDraggedSelection = useRef<SelectionArea>();
@@ -1211,2 +1218,5 @@ const initialDraggedCell = useRef<CellInterface>();
 
+  /**
+   * When user releases mouse on the fill handle
+   */
   const handleFillHandleMouseUp = useCallback((e: globalThis.MouseEvent) => {
@@ -1283,3 +1293,4 @@ isFilling.current = false;
       selection: SelectionArea | undefined,
-      index: number | undefined
+      index: number | undefined,
+      shouldClamp: boolean = true
     ) => {
@@ -1296,7 +1307,10 @@ if (!gridRef.current) {
       }
+      /* Initial cell that is selected by user */
+      initialDraggedCell.current = coords;
+
       /* Make sure the coords do not extend selection bounds */
-      coords = clampCellCoords(coords, activeCell, selection);
+      if (shouldClamp) {
+        coords = clampCellCoords(coords, activeCell, selection);
+      }
 
-      /* Initial cell that is selected by user */
-      initialDraggedCell.current = coords;
       /* Set selection */
@@ -1342,2 +1356,12 @@ if (activeCell) {
     }
+    /**
+     * Skip if user is moving the selection
+     * to the same starting position
+     */
+    if (
+      !hasUserMovedSelection.current &&
+      isEqualCells(initialDraggedCell.current, coords)
+    ) {
+      return;
+    }
     let sel = newSelectionFromDrag(
@@ -1356,2 +1380,5 @@ initialDraggedSelection.current,
 
+    // User has now moved the selection,
+    hasUserMovedSelection.current = true;
+
     /* Scroll to the cell */
@@ -1405,2 +1432,3 @@ gridRef.current?.scrollToItem(coords);
     draggedSelectionIndex.current = void 0;
+    hasUserMovedSelection.current = false;
 
@@ -1420,2 +1448,3 @@ /* Remove event handlers */
     draggedSelection: draggedSelection.current,
+    initialDraggedSelection: initialDraggedSelection.current,
     onSelectionMouseDown: handleSelectionMouseDown,
@@ -1422,0 +1451,0 @@ onMouseDown: handleMouseDown,

No alert changes

Improved metrics

Total package byte prevSize

738508

increased by1.74%

Lines of code

16402

increased by1.96%

Dependency changes

• Updatedkonva@^7.2.5