From f10e34b6679271726bd59e49f0e1fdb61a589f45 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sat, 15 Jul 2023 15:41:44 -0400
Subject: [PATCH] feat: migrate all Decorator & Selection Plugins to TypeScript

---
 examples/example-grouping-esm.html            |   8 +-
 examples/example4-model-esm.html              |   8 +-
 src/controls/slick.columnmenu.ts              |  11 +-
 src/controls/slick.columnpicker.ts            |   9 +-
 src/controls/slick.gridmenu.ts                |  31 +-
 src/controls/slick.pager.ts                   |  24 +-
 src/global.d.ts                               |  38 +-
 src/models/cellRange.interface.ts             |   4 +-
 src/models/columnPicker.interface.ts          |   9 +
 src/models/gridOption.interface.ts            |   4 +-
 src/models/index.ts                           |   2 +
 src/models/mouseOffsetViewport.interface.ts   |  25 ++
 .../rowSelectionModelOption.interface.ts      |  15 +
 src/plugins/slick.autotooltips.ts             |   4 +-
 src/plugins/slick.cellcopymanager.ts          |   4 +-
 src/plugins/slick.cellexternalcopymanager.ts  |  11 +-
 src/plugins/slick.cellmenu.ts                 |   7 +-
 src/plugins/slick.cellrangedecorator.js       |  83 ----
 src/plugins/slick.cellrangedecorator.ts       |  87 ++++
 src/plugins/slick.cellrangeselector.js        | 401 ------------------
 src/plugins/slick.cellrangeselector.ts        | 400 +++++++++++++++++
 src/plugins/slick.cellselectionmodel.js       | 212 ---------
 src/plugins/slick.cellselectionmodel.ts       | 207 +++++++++
 src/plugins/slick.rowselectionmodel.js        | 276 ------------
 src/plugins/slick.rowselectionmodel.ts        | 268 ++++++++++++
 src/slick.core.ts                             | 107 ++---
 src/slick.grid.ts                             | 140 +++---
 27 files changed, 1229 insertions(+), 1166 deletions(-)
 create mode 100644 src/models/mouseOffsetViewport.interface.ts
 create mode 100644 src/models/rowSelectionModelOption.interface.ts
 delete mode 100644 src/plugins/slick.cellrangedecorator.js
 create mode 100644 src/plugins/slick.cellrangedecorator.ts
 delete mode 100644 src/plugins/slick.cellrangeselector.js
 create mode 100644 src/plugins/slick.cellrangeselector.ts
 delete mode 100644 src/plugins/slick.cellselectionmodel.js
 create mode 100644 src/plugins/slick.cellselectionmodel.ts
 delete mode 100644 src/plugins/slick.rowselectionmodel.js
 create mode 100644 src/plugins/slick.rowselectionmodel.ts

diff --git a/examples/example-grouping-esm.html b/examples/example-grouping-esm.html
index 92401348..607bc92d 100644
--- a/examples/example-grouping-esm.html
+++ b/examples/example-grouping-esm.html
@@ -97,16 +97,16 @@ <h2>View Source:</h2>
 <script type="module">
   import {
     Aggregators,
-    CellSelectionModel,
     Editors,
     Formatters,
-    GlobalEditorLock,
-    RowSelectionModel,
+    SlickGlobalEditorLock,
+    SlickCellSelectionModel,
     SlickColumnPicker,
     SlickDataView,
     SlickGrid,
     SlickGroup,
     SlickGroupItemMetadataProvider,
+    SlickRowSelectionModel,
     Utils,
   } from '../dist/esm/index.js';
 
@@ -322,7 +322,7 @@ <h2>View Source:</h2>
 
   // register the group item metadata provider to add expand/collapse group handlers
   grid.registerPlugin(groupItemMetadataProvider);
-  grid.setSelectionModel(new CellSelectionModel());
+  grid.setSelectionModel(new SlickCellSelectionModel());
 
   var columnpicker = new SlickColumnPicker(columns, grid, options);
 
diff --git a/examples/example4-model-esm.html b/examples/example4-model-esm.html
index a7b1ab87..07ab7933 100644
--- a/examples/example4-model-esm.html
+++ b/examples/example4-model-esm.html
@@ -138,8 +138,8 @@ <h2>View Source:</h2>
 import {
   Editors,
   Formatters,
-  GlobalEditorLock,
-  RowSelectionModel,
+  SlickGlobalEditorLock,
+  SlickRowSelectionModel,
   SlickColumnPicker,
   SlickDataView,
   SlickGridPager,
@@ -260,7 +260,7 @@ <h2>View Source:</h2>
 
   dataView = new SlickDataView({ inlineFilters: true });
   grid = new SlickGrid("#myGrid", dataView, columns, options);
-  grid.setSelectionModel(new RowSelectionModel());
+  grid.setSelectionModel(new SlickRowSelectionModel());
 
   var pager = new SlickGridPager(dataView, grid, "#pager");
   var columnpicker = new SlickColumnPicker(columns, grid, options);
@@ -337,7 +337,7 @@ <h2>View Source:</h2>
   var slider = document.getElementById("pcSlider");
   var slider2 = document.getElementById("pcSlider2");
   var sliderCallback = function() {
-    GlobalEditorLock.cancelCurrentEdit();
+    SlickGlobalEditorLock.cancelCurrentEdit();
 
     if (percentCompleteThreshold != this.value) {
       window.clearTimeout(h_runfilters);
diff --git a/src/controls/slick.columnmenu.ts b/src/controls/slick.columnmenu.ts
index 66f26758..33fc5f2b 100644
--- a/src/controls/slick.columnmenu.ts
+++ b/src/controls/slick.columnmenu.ts
@@ -1,5 +1,5 @@
 import { BindingEventService as BindingEventService_, Event as SlickEvent_, Utils as Utils_ } from '../slick.core';
-import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption } from '../models/index';
+import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index';
 import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
@@ -33,6 +33,12 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickColumnMenu {
+  // --
+  // public API
+  onColumnsChanged = new SlickEvent<OnColumnsChangedArgs>();
+
+  // --
+  // protected props
   protected _gridUid: string;
   protected _columnTitleElm!: HTMLElement;
   protected _listElm!: HTMLElement;
@@ -51,9 +57,6 @@ export class SlickColumnMenu {
     headerColumnValueExtractor: (columnDef: Column) => columnDef.name || ''
   };
 
-  // public events
-  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
-
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, options: GridOption) {
     this._gridUid = grid.getUID();
     this._options = Utils.extend({}, this._defaults, options);
diff --git a/src/controls/slick.columnpicker.ts b/src/controls/slick.columnpicker.ts
index 4123bf23..2e80116d 100644
--- a/src/controls/slick.columnpicker.ts
+++ b/src/controls/slick.columnpicker.ts
@@ -34,6 +34,12 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickColumnPicker {
+  // --
+  // public API
+  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
+
+  // --
+  // protected props
   protected _gridUid: string;
   protected _columnTitleElm!: HTMLElement;
   protected _listElm!: HTMLElement;
@@ -52,9 +58,6 @@ export class SlickColumnPicker {
     headerColumnValueExtractor: (columnDef: Column) => columnDef.name || ''
   };
 
-  // public events
-  onColumnsChanged = new SlickEvent<{ columnId: number | string; showing: boolean; allColumns: Column[]; columns: Column[]; grid: SlickGrid; }>();
-
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, gridOptions: GridOption) {
     this._gridUid = grid.getUID();
     this._gridOptions = Utils.extend({}, this._defaults, gridOptions);
diff --git a/src/controls/slick.gridmenu.ts b/src/controls/slick.gridmenu.ts
index 7b97a113..a545f2e8 100644
--- a/src/controls/slick.gridmenu.ts
+++ b/src/controls/slick.gridmenu.ts
@@ -117,6 +117,17 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  */
 
 export class SlickGridMenu {
+  // --
+  // public API
+  onAfterMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onBeforeMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onMenuClose = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
+  onCommand = new SlickEvent<GridMenuCommandItemCallbackArgs>();
+  onColumnsChanged = new SlickEvent<onGridMenuColumnsChangedCallbackArgs>();
+
+  // --
+  // protected props
+  protected _bindingEventService: BindingEventService_;
   protected _gridOptions: GridOption;
   protected _gridUid: string;
   protected _isMenuOpen = false;
@@ -128,7 +139,7 @@ export class SlickGridMenu {
   protected _listElm!: HTMLElement;
   protected _buttonElm!: HTMLElement;
   protected _menuElm!: HTMLElement;
-  protected columnCheckboxes: HTMLInputElement[] = [];
+  protected _columnCheckboxes: HTMLInputElement[] = [];
   protected _defaults = {
     showButton: true,
     hideForceFitButton: false,
@@ -140,18 +151,8 @@ export class SlickGridMenu {
     resizeOnShowHeaderRow: false,
     syncResizeTitle: 'Synchronous resize',
     useClickToRepositionMenu: true,
-    headerColumnValueExtractor: function (columnDef) {
-      return columnDef.name;
-    }
+    headerColumnValueExtractor: (columnDef: Column) => columnDef.name,
   };
-  protected _bindingEventService: BindingEventService_;
-
-  // public events
-  onAfterMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onBeforeMenuShow = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onMenuClose = new SlickEvent<GridMenuEventWithElementCallbackArgs>();
-  onCommand = new SlickEvent<GridMenuCommandItemCallbackArgs>();
-  onColumnsChanged = new SlickEvent<onGridMenuColumnsChangedCallbackArgs>();
 
   constructor(protected columns: Column[], protected readonly grid: SlickGrid, gridOptions: GridOption) {
     this._gridUid = grid.getUID();
@@ -415,7 +416,7 @@ export class SlickGridMenu {
 
     this.populateCustomMenus(this._gridMenuOptions || {}, this._customMenuElm);
     this.updateColumnOrder();
-    this.columnCheckboxes = [];
+    this._columnCheckboxes = [];
 
     let callbackArgs = {
       grid: this.grid,
@@ -456,7 +457,7 @@ export class SlickGridMenu {
         checkboxElm.checked = true;
       }
 
-      this.columnCheckboxes.push(checkboxElm);
+      this._columnCheckboxes.push(checkboxElm);
 
       // get the column label from the picker value extractor (user can optionally provide a custom extractor)
       if (this._gridMenuOptions?.headerColumnValueExtractor) {
@@ -676,7 +677,7 @@ export class SlickGridMenu {
       const isChecked = e.target.checked;
       const columnId = e.target.dataset.columnid || '';
       let visibleColumns: Column[] = [];
-      this.columnCheckboxes.forEach((columnCheckbox, idx) => {
+      this._columnCheckboxes.forEach((columnCheckbox, idx) => {
         if (columnCheckbox.checked) {
           if (this.columns[idx].hidden) { this.columns[idx].hidden = false; }
           visibleColumns.push(this.columns[idx]);
diff --git a/src/controls/slick.pager.ts b/src/controls/slick.pager.ts
index aa43d289..bd908b2c 100644
--- a/src/controls/slick.pager.ts
+++ b/src/controls/slick.pager.ts
@@ -1,11 +1,11 @@
-import { PagingInfo } from '../models/index';
-import { BindingEventService as BindingEventService_, GlobalEditorLock as GlobalEditorLock_, Utils as Utils_ } from '../slick.core';
-import { SlickDataView } from '../slick.dataview';
-import { SlickGrid } from '../slick.grid';
+import type { PagingInfo } from '../models/index';
+import { BindingEventService as BindingEventService_, SlickGlobalEditorLock as SlickGlobalEditorLock_, Utils as Utils_ } from '../slick.core';
+import type { SlickDataView } from '../slick.dataview';
+import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;
-const GlobalEditorLock = IIFE_ONLY ? Slick.GlobalEditorLock : GlobalEditorLock_;
+const SlickGlobalEditorLock = IIFE_ONLY ? Slick.GlobalEditorLock : SlickGlobalEditorLock_;
 const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 export interface GridPagerOption {
@@ -18,12 +18,16 @@ export interface GridPagerOption {
 }
 
 export class SlickGridPager {
-  // the container might be a string, a jQuery object or a native element
-  protected _container: HTMLElement;
+  // --
+  // public API
+
+  // --
+  // protected props
+  protected _container: HTMLElement; // the container might be a string, a jQuery object or a native element
   protected _statusElm!: HTMLElement;
   protected _bindingEventService: BindingEventService_;
-  protected _options!: GridPagerOption;
-  protected _defaults = {
+  protected _options: GridPagerOption;
+  protected _defaults: GridPagerOption = {
     showAllText: 'Showing all {rowCount} rows',
     showPageText: 'Showing page {pageNum} of {pageCount}',
     showCountText: 'From {countBegin} to {countEnd} of {rowCount} rows',
@@ -61,7 +65,7 @@ export class SlickGridPager {
   }
 
   protected getNavState() {
-    let cannotLeaveEditMode = !GlobalEditorLock.commitCurrentEdit();
+    let cannotLeaveEditMode = !SlickGlobalEditorLock.commitCurrentEdit();
     let pagingInfo = this.dataView.getPagingInfo();
     let lastPage = pagingInfo.totalPages - 1;
 
diff --git a/src/global.d.ts b/src/global.d.ts
index fbd24410..f48a7577 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -3,33 +3,37 @@ import type { Sortable } from 'sortablejs';
 import type {
   BindingEventService,
   ColAutosizeMode,
-  SlickEvent,
-  SlickEventHandler,
-  SlickEventData,
-  GlobalEditorLock,
   GridAutosizeColsMode,
-  SlickGroup,
-  SlickGroupTotals,
   keyCode,
   preClickClassName,
   RowSelectionMode,
+  SlickEvent,
+  SlickEventData,
+  SlickEventHandler,
+  SlickGlobalEditorLock,
+  SlickGroup,
+  SlickGroupTotals,
   SlickRange,
-  ValueFilterMode,
   Utils,
+  ValueFilterMode,
   WidthEvalMode,
 } from './slick.core';
-import type { SlickColumnPicker } from './controls/slick.columnpicker';
 import type { SlickColumnMenu } from './controls/slick.columnmenu';
-import type { SlickGridPager } from './controls/slick.pager';
+import type { SlickColumnPicker } from './controls/slick.columnpicker';
 import type { SlickGridMenu } from './controls/slick.gridmenu';
+import type { SlickGridPager } from './controls/slick.pager';
 import type { SlickAutoTooltip } from './plugins/slick.autotooltips';
 import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager';
 import type { SlickCellMenu } from './plugins/slick.cellmenu';
 import type { SlickContextMenu } from './plugins/slick.contextmenu';
 import type { SlickHeaderButtons } from './plugins/slick.headerbuttons';
 import type { SlickHeaderMenu } from './plugins/slick.headermenu';
-import type { SlickCellExternalCopyManager } from './plugins/slick.cellcopymanager';
-import type { SlickGroupItemMetadataProvider } from './slick.cellexternalcopymanager';
+import type { SlickCellExternalCopyManager } from './plugins/slick.cellexternalcopymanager';
+import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator';
+import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
+import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
+import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
+import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider';
 import type { Draggable, MouseWheel, Resizable } from './slick.interactions';
 import type { Aggregators } from './slick.dataview';
 import type { Editors } from './slick.editors';
@@ -46,6 +50,9 @@ declare global {
     BindingEventService: typeof BindingEventService,
     CellCopyManager: typeof SlickCellCopyManager,
     CellExternalCopyManager: typeof SlickCellExternalCopyManager,
+    CellRangeDecorator: typeof SlickCellRangeDecorator,
+    CellRangeSelector: typeof SlickCellRangeSelector,
+    CellSelectionModel: typeof SlickCellSelectionModel,
     Draggable: typeof Draggable,
     ColAutosizeMode: typeof ColAutosizeMode,
     Controls: {
@@ -71,15 +78,16 @@ declare global {
     keyCode: typeof keyCode,
     MouseWheel: typeof MouseWheel,
     Plugins: {
-      CellMenu: SlickCellMenu,
-      ContextMenu: SlickContextMenu,
-      HeaderButtons: SlickHeaderButtons,
-      HeaderMenu: SlickHeaderMenu
+      CellMenu: typeof SlickCellMenu,
+      ContextMenu: typeof SlickContextMenu,
+      HeaderButtons: typeof SlickHeaderButtons,
+      HeaderMenu: typeof SlickHeaderMenu
     },
     preClickClassName: typeof preClickClassName,
     Range: typeof SlickRange,
     Resizable: typeof Resizable,
     RowSelectionMode: typeof RowSelectionMode,
+    RowSelectionModel: typeof SlickRowSelectionModel,
     Utils: typeof Utils,
     ValueFilterMode: typeof ValueFilterMode,
     WidthEvalMode: typeof WidthEvalMode,
diff --git a/src/models/cellRange.interface.ts b/src/models/cellRange.interface.ts
index 488a8f9f..3260ee06 100644
--- a/src/models/cellRange.interface.ts
+++ b/src/models/cellRange.interface.ts
@@ -1,5 +1,7 @@
 // import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator';
 
+import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator';
+
 export interface CellRange {
   /** Selection start from which cell? */
   fromCell: number;
@@ -34,7 +36,7 @@ export interface CellRangeSelectorOption {
   accelerateInterval: number;
 
   /** cell decorator service */
-  // cellDecorator: SlickCellRangeDecorator;
+  cellDecorator: SlickCellRangeDecorator;
 
   /** styling (for example blue background on cell) */
   selectionCss: CSSStyleDeclaration;
diff --git a/src/models/columnPicker.interface.ts b/src/models/columnPicker.interface.ts
index 5d5581db..d7e943b0 100644
--- a/src/models/columnPicker.interface.ts
+++ b/src/models/columnPicker.interface.ts
@@ -1,4 +1,13 @@
 import type { Column, GridOption } from './index';
+import type { SlickGrid } from '../slick.grid';
+
+export interface OnColumnsChangedArgs {
+  columnId: number | string;
+  showing: boolean;
+  allColumns: Column[];
+  columns: Column[];
+  grid: SlickGrid;
+}
 
 export interface ColumnPickerOption {
   /** Defaults to "Columns" which is the title that shows up over the columns */
diff --git a/src/models/gridOption.interface.ts b/src/models/gridOption.interface.ts
index 93e6e794..f704b718 100644
--- a/src/models/gridOption.interface.ts
+++ b/src/models/gridOption.interface.ts
@@ -1,5 +1,5 @@
 import type { Column, ColumnPickerOption, ColumnReorderFunction, EditCommand, Editor, Formatter, GridMenuOption, ItemMetadata, } from './index';
-import type { EditorLock } from '../slick.core';
+import type { SlickEditorLock } from '../slick.core';
 
 export interface CellViewportRange {
   bottom: number;
@@ -101,7 +101,7 @@ export interface GridOption {
   editorFactory?: null | { getEditor: (col: Column) => Editor; };
 
   /** a global singleton editor lock. */
-  editorLock: EditorLock;
+  editorLock: SlickEditorLock;
 
   /** Do we want to emulate paging when we are scrolling? */
   emulatePagingWhenScrolling?: boolean;
diff --git a/src/models/index.ts b/src/models/index.ts
index 7afe9ced..08e609fd 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -50,9 +50,11 @@ export * from './menuFromCellCallbackArgs.interface';
 export * from './menuItem.interface';
 export * from './menuOptionItem.interface';
 export * from './menuOptionItemCallbackArgs.interface';
+export * from './mouseOffsetViewport.interface';
 export * from './multiColumnSort.interface';
 export * from './pagingInfo.interface';
 export * from './plugin.interface';
 export * from './positionMethod.type';
+export * from './rowSelectionModelOption.interface';
 export * from './singleColumnSort.interface';
 export * from './sortDirectionNumber.enum';
diff --git a/src/models/mouseOffsetViewport.interface.ts b/src/models/mouseOffsetViewport.interface.ts
new file mode 100644
index 00000000..9487f5f1
--- /dev/null
+++ b/src/models/mouseOffsetViewport.interface.ts
@@ -0,0 +1,25 @@
+import type { DragPosition } from './drag.interface';
+
+export interface MouseOffsetViewport {
+  e: any,
+  dd: DragPosition,
+  viewport: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    offset: {
+      left: number;
+      top: number;
+      right: number;
+      bottom: number;
+    }
+  },
+  // Consider the viewport as the origin, the `offset` is based on the coordinate system:
+  // the cursor is on the viewport's left/bottom when it is less than 0, and on the right/top when greater than 0.
+  offset: {
+    x: number;
+    y: number;
+  },
+  isOutsideViewport?: boolean;
+}
\ No newline at end of file
diff --git a/src/models/rowSelectionModelOption.interface.ts b/src/models/rowSelectionModelOption.interface.ts
new file mode 100644
index 00000000..53be6358
--- /dev/null
+++ b/src/models/rowSelectionModelOption.interface.ts
@@ -0,0 +1,15 @@
+import type { SlickCellRangeSelector } from '../plugins/slick.cellrangeselector';
+
+export type RowSelectionModelOption = {
+  /** Defaults to True, should we auto-scroll when dragging a row */
+  autoScrollWhenDrag?: boolean;
+
+  /** Defaults to False, should we select when dragging? */
+  dragToSelect?: boolean;
+
+  /** cell range selector */
+  cellRangeSelector?: SlickCellRangeSelector;
+
+  /** defaults to True, do we want to select the active row? */
+  selectActiveRow?: boolean;
+};
diff --git a/src/plugins/slick.autotooltips.ts b/src/plugins/slick.autotooltips.ts
index 85fe3dcb..5329cdc3 100644
--- a/src/plugins/slick.autotooltips.ts
+++ b/src/plugins/slick.autotooltips.ts
@@ -1,4 +1,4 @@
-import type { AutoTooltipOption, Column } from '../models/index';
+import type { AutoTooltipOption, Column, Plugin } from '../models/index';
 import { Utils as Utils_ } from '../slick.core';
 import type { SlickGrid } from '../slick.grid';
 
@@ -8,7 +8,7 @@ const Utils = (IIFE_ONLY ? Slick.Utils : Utils_) as typeof Utils_;
 /**
  * AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.
  */
-export class SlickAutoTooltips {
+export class SlickAutoTooltips implements Plugin {
   // --
   // public API
   pluginName = 'AutoTooltips' as const;
diff --git a/src/plugins/slick.cellcopymanager.ts b/src/plugins/slick.cellcopymanager.ts
index 6c0b67ec..04c9cf75 100644
--- a/src/plugins/slick.cellcopymanager.ts
+++ b/src/plugins/slick.cellcopymanager.ts
@@ -1,4 +1,4 @@
-import type { CssStyleHash } from '../models/index';
+import type { CssStyleHash, Plugin } from '../models/index';
 import { SlickEvent as SlickEvent_, keyCode as keyCode_, Utils as Utils_, SlickRange } from '../slick.core';
 import type { SlickGrid } from '../slick.grid';
 
@@ -10,7 +10,7 @@ const Utils = (IIFE_ONLY ? Slick.Utils : Utils_) as typeof Utils_;
 /**
  * This manager enables users to copy/paste cell data
  */
-export class SlickCellCopyManager {
+export class SlickCellCopyManager implements Plugin {
   // --
   // public API
   pluginName = 'CellCopyManager' as const;
diff --git a/src/plugins/slick.cellexternalcopymanager.ts b/src/plugins/slick.cellexternalcopymanager.ts
index 79f0f158..1a6ec960 100644
--- a/src/plugins/slick.cellexternalcopymanager.ts
+++ b/src/plugins/slick.cellexternalcopymanager.ts
@@ -1,4 +1,4 @@
-import type { CellRange, Column, CssStyleHash, ExcelCopyBufferOption, ExternalCopyClipCommand } from '../models/index';
+import type { CellRange, Column, CssStyleHash, ExcelCopyBufferOption, ExternalCopyClipCommand, Plugin } from '../models/index';
 import type { SlickGrid } from '../slick.grid';
 import { SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core';
 
@@ -31,10 +31,13 @@ const CLIPBOARD_PASTE_DELAY = 100;
     readOnlyMode: suppresses paste
     headerColumnValueExtractor : option to specify a custom column header value extractor function
 */
-export class SlickCellExternalCopyManager {
+export class SlickCellExternalCopyManager implements Plugin {
   // --
   // public API
   pluginName = 'CellExternalCopyManager' as const;
+  onCopyCells = new SlickEvent<{ ranges: CellRange[]; }>();
+  onCopyCancelled = new SlickEvent<{ ranges: CellRange[]; }>();
+  onPasteCells = new SlickEvent<{ ranges: CellRange[]; }>();
 
   // --
   // protected props
@@ -56,10 +59,6 @@ export class SlickCellExternalCopyManager {
     'INSERT': 45
   };
 
-  onCopyCells = new SlickEvent();
-  onCopyCancelled = new SlickEvent();
-  onPasteCells = new SlickEvent();
-
   constructor(options: ExcelCopyBufferOption) {
     this._options = options || {};
     this._copiedCellStyleLayerKey = this._options.copiedCellStyleLayerKey || 'copy-manager';
diff --git a/src/plugins/slick.cellmenu.ts b/src/plugins/slick.cellmenu.ts
index 6dcc4aac..2018d85d 100644
--- a/src/plugins/slick.cellmenu.ts
+++ b/src/plugins/slick.cellmenu.ts
@@ -13,7 +13,8 @@ import type {
   MenuCommandItemCallbackArgs,
   MenuFromCellCallbackArgs,
   MenuOptionItem,
-  MenuOptionItemCallbackArgs
+  MenuOptionItemCallbackArgs,
+  Plugin
 } from '../models/index';
 import type { SlickGrid } from '../slick.grid';
 
@@ -144,7 +145,7 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
  * @param options {Object} Cell Menu Options
  * @class Slick.Plugins.CellMenu
  */
-export class SlickCellMenu {
+export class SlickCellMenu implements Plugin {
   // --
   // public API
   pluginName = 'CellMenu' as const;
@@ -181,7 +182,7 @@ export class SlickCellMenu {
     this._cellMenuProperties = Utils.extend({}, this._defaults, optionProperties);
   }
 
-  protected init(grid: SlickGrid) {
+  init(grid: SlickGrid) {
     this._grid = grid;
     this._gridOptions = grid.getOptions();
     this._gridUid = (grid && grid.getUID) ? grid.getUID() : '';
diff --git a/src/plugins/slick.cellrangedecorator.js b/src/plugins/slick.cellrangedecorator.js
deleted file mode 100644
index 2bb50140..00000000
--- a/src/plugins/slick.cellrangedecorator.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Utils as Utils_ } from '../slick.core';
-
-// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
-
-/***
-   * Displays an overlay on top of a given cell range.
-   *
-   * TODO:
-   * Currently, it blocks mouse events to DOM nodes behind it.
-   * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
-   * Could also construct the borders separately using 4 individual DIVs.
-   *
-   * @param {Grid} grid
-   * @param {Object} options
-   */
-export function CellRangeDecorator(grid, options) {
-    var _elem;
-    var _defaults = {
-      selectionCssClass: 'slick-range-decorator',
-      selectionCss: {
-        "zIndex": "9999",
-        "border": "2px dashed red"
-      },
-      offset: { top: -1, left: -1, height: -2, width: -2 }
-    };
-
-  options = Utils.extend(true, {}, _defaults, options);
-
-    function show(range) {
-      if (!_elem) {
-        _elem = document.createElement('div')
-        _elem.className = options.selectionCssClass;
-        Object.keys(options.selectionCss).forEach((cssStyleKey) => {
-          _elem.style[cssStyleKey] = options.selectionCss[cssStyleKey];
-        });
-        _elem.style.position = 'absolute';
-        const canvasNode = grid.getActiveCanvasNode();
-        if (canvasNode) {
-          canvasNode.appendChild(_elem);
-        }
-      }
-
-      var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
-      var to = grid.getCellNodeBox(range.toRow, range.toCell);
-
-      if (from && to && options && options.offset) {
-        _elem.style.top = `${from.top + options.offset.top}px`;
-        _elem.style.left = `${from.left + options.offset.left}px`;
-        _elem.style.height = `${to.bottom - from.top + options.offset.height}px`;
-        _elem.style.width = `${to.right - from.left + options.offset.width}px`;
-      }
-
-      return _elem;
-    }
-
-    function destroy() {
-      hide();
-    }
-
-    function hide() {
-      if (_elem) {
-        _elem.remove();
-        _elem = null;
-      }
-    }
-
-  Utils.extend(this, {
-      "pluginName": "CellRangeDecorator",
-      "show": show,
-      "hide": hide,
-      "destroy": destroy
-    });
-  }
-
-// extend Slick namespace on window object when building as iife
-if (IIFE_ONLY && window.Slick) {
-  Utils.extend(true, window, {
-    Slick: {
-      CellRangeDecorator
-    }
-  });
-}
diff --git a/src/plugins/slick.cellrangedecorator.ts b/src/plugins/slick.cellrangedecorator.ts
new file mode 100644
index 00000000..54e26e31
--- /dev/null
+++ b/src/plugins/slick.cellrangedecorator.ts
@@ -0,0 +1,87 @@
+import type { CSSStyleDeclarationWritable, CellRange, CellRangeDecoratorOption, Plugin } from '../models/index';
+import { Utils as Utils_ } from '../slick.core';
+import type { SlickGrid } from '../slick.grid';
+
+// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+
+/***
+   * Displays an overlay on top of a given cell range.
+   *
+   * TODO:
+   * Currently, it blocks mouse events to DOM nodes behind it.
+   * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
+   * Could also construct the borders separately using 4 individual DIVs.
+   *
+   * @param {Grid} grid
+   * @param {Object} options
+   */
+export class SlickCellRangeDecorator implements Plugin {
+  // --
+  // public API
+  pluginName = 'CellRangeDecorator' as const;
+
+  // --
+  // protected props
+  protected _elem?: HTMLDivElement | null;
+  protected _defaults = {
+    selectionCssClass: 'slick-range-decorator',
+    selectionCss: {
+      zIndex: '9999',
+      border: '2px dashed red'
+    },
+    offset: { top: -1, left: -1, height: -2, width: -2 }
+  } as CellRangeDecoratorOption;
+  protected options: CellRangeDecoratorOption;
+
+  constructor(protected readonly grid: SlickGrid, options?: Partial<CellRangeDecoratorOption>) {
+    this.options = Utils.extend(true, {}, this._defaults, options);
+  }
+
+  destroy() {
+    this.hide();
+  }
+
+  init() { }
+
+  hide() {
+    this._elem?.remove();
+    this._elem = null;
+  }
+
+  show(range: CellRange) {
+    if (!this._elem) {
+      this._elem = document.createElement('div')
+      this._elem.className = this.options.selectionCssClass;
+      Object.keys(this.options.selectionCss as CSSStyleDeclaration).forEach((cssStyleKey) => {
+        this._elem!.style[cssStyleKey as CSSStyleDeclarationWritable] = this.options.selectionCss[cssStyleKey as CSSStyleDeclarationWritable];
+      });
+      this._elem.style.position = 'absolute';
+      const canvasNode = this.grid.getActiveCanvasNode();
+      if (canvasNode) {
+        canvasNode.appendChild(this._elem);
+      }
+    }
+
+    const from = this.grid.getCellNodeBox(range.fromRow, range.fromCell);
+    const to = this.grid.getCellNodeBox(range.toRow, range.toCell);
+
+    if (from && to && this.options && this.options.offset) {
+      this._elem.style.top = `${from.top + this.options.offset.top}px`;
+      this._elem.style.left = `${from.left + this.options.offset.left}px`;
+      this._elem.style.height = `${to.bottom - from.top + this.options.offset.height}px`;
+      this._elem.style.width = `${to.right - from.left + this.options.offset.width}px`;
+    }
+
+    return this._elem;
+  }
+}
+
+// extend Slick namespace on window object when building as iife
+if (IIFE_ONLY && window.Slick) {
+  Utils.extend(true, window, {
+    Slick: {
+      CellRangeDecorator: SlickCellRangeDecorator
+    }
+  });
+}
diff --git a/src/plugins/slick.cellrangeselector.js b/src/plugins/slick.cellrangeselector.js
deleted file mode 100644
index 307ca7d7..00000000
--- a/src/plugins/slick.cellrangeselector.js
+++ /dev/null
@@ -1,401 +0,0 @@
-import { Event as SlickEvent_, EventHandler as EventHandler_, Range as SlickRange_, Utils as Utils_ } from '../slick.core';
-import { Draggable as Draggable_ } from '../slick.interactions';
-import { CellRangeDecorator as CellRangeDecorator_ } from './slick.cellrangedecorator';
-
-// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
-const EventHandler = IIFE_ONLY ? Slick.EventHandler : EventHandler_;
-const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
-const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
-const CellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : CellRangeDecorator_;
-const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
-
-export function CellRangeSelector(options) {
-    var _grid;
-    var _currentlySelectedRange;
-    var _canvas;
-    var _gridOptions;
-    var _activeCanvas;
-    var _dragging;
-    var _decorator;
-    var _self = this;
-  var _handler = new EventHandler();
-    var _defaults = {
-      autoScroll: true,
-      minIntervalToShowNextCell: 30,
-      maxIntervalToShowNextCell: 600, // better to a multiple of minIntervalToShowNextCell
-      accelerateInterval: 5,          // increase 5ms when cursor 1px outside the viewport.
-      selectionCss: {
-        "border": "2px dashed blue"
-      }
-    };
-
-    // Frozen row & column variables
-    var _rowOffset;
-    var _columnOffset;
-    var _isRightCanvas;
-    var _isBottomCanvas;
-
-    // autoScroll related variables
-    var _activeViewport;
-    var _viewportWidth;
-    var _viewportHeight;
-    var _draggingMouseOffset;
-    var _moveDistanceForOneCell;
-    var _autoScrollTimerId;
-    var _xDelayForNextCell;
-    var _yDelayForNextCell;
-    var _isRowMoveRegistered = false;
-
-    // Scrollings
-    var _scrollTop = 0;
-    var _scrollLeft = 0;
-
-    function init(grid) {
-      if (typeof Draggable === "undefined") {
-        throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
-      }
-
-      options = Utils.extend(true, {}, _defaults, options);
-      _decorator = options.cellDecorator || new CellRangeDecorator(grid, options);
-      _grid = grid;
-      _canvas = _grid.getCanvasNode();
-      _gridOptions = _grid.getOptions();
-      _handler
-        .subscribe(_grid.onScroll, handleScroll)
-        .subscribe(_grid.onDragInit, handleDragInit)
-        .subscribe(_grid.onDragStart, handleDragStart)
-        .subscribe(_grid.onDrag, handleDrag)
-        .subscribe(_grid.onDragEnd, handleDragEnd);
-    }
-
-    function destroy() {
-      _handler.unsubscribeAll();
-      _activeCanvas = null;
-      _activeViewport = null;
-      _canvas = null;
-      if (_decorator && _decorator.destroy) {
-        _decorator.destroy();
-      }
-    }
-
-    function getCellDecorator() {
-      return _decorator;
-    }
-
-    function handleScroll(e, args) {
-      _scrollTop = args.scrollTop;
-      _scrollLeft = args.scrollLeft;
-    }
-
-    function handleDragInit(e) {
-      // Set the active canvas node because the decorator needs to append its
-      // box to the correct canvas
-      _activeCanvas = _grid.getActiveCanvasNode(e);
-      _activeViewport = _grid.getActiveViewportNode(e);
-
-      var scrollbarDimensions = _grid.getDisplayedScrollbarDimensions()
-      _viewportWidth = _activeViewport.offsetWidth - scrollbarDimensions.width;
-      _viewportHeight = _activeViewport.offsetHeight - scrollbarDimensions.height;
-
-      _moveDistanceForOneCell = {
-        x: _grid.getAbsoluteColumnMinWidth() / 2,
-        y: _grid.getOptions().rowHeight / 2
-      }
-      _isRowMoveRegistered = hasRowMoveManager();
-
-      _rowOffset = 0;
-      _columnOffset = 0;
-      _isBottomCanvas = _activeCanvas.classList.contains('grid-canvas-bottom');
-
-      if (_gridOptions.frozenRow > -1 && _isBottomCanvas) {
-        const canvasSelector = `.${_grid.getUID()} .grid-canvas-${_gridOptions.frozenBottom ? 'bottom' : 'top'}`;
-        const canvasElm = document.querySelector(canvasSelector);
-        if (canvasElm) {
-          _rowOffset = canvasElm.clientHeight || 0;
-        }
-      }
-
-      _isRightCanvas = _activeCanvas.classList.contains('grid-canvas-right');
-
-      if (_gridOptions.frozenColumn > -1 && _isRightCanvas) {
-        const canvasLeftElm = document.querySelector(`.${_grid.getUID()} .grid-canvas-left`);
-        if (canvasLeftElm) {
-          _columnOffset = canvasLeftElm.clientWidth || 0;
-        }
-      }
-
-      // prevent the grid from cancelling drag'n'drop by default
-      e.stopImmediatePropagation();
-      e.preventDefault();
-    }
-
-    function handleDragStart(e, dd) {
-      var cell = _grid.getCellFromEvent(e);
-      if (_self.onBeforeCellRangeSelected.notify(cell) !== false) {
-        if (_grid.canCellBeSelected(cell.row, cell.cell)) {
-          _dragging = true;
-          e.stopImmediatePropagation();
-        }
-      }
-      if (!_dragging) {
-        return;
-      }
-
-      _grid.focus();
-
-      let canvasOffset = Utils.offset(_canvas);
-
-      let startX = dd.startX - (canvasOffset.left || 0);
-      if (_gridOptions.frozenColumn >= 0 && _isRightCanvas) {
-        startX += _scrollLeft;
-      }
-
-      let startY = dd.startY - (canvasOffset.top || 0);
-      if (_gridOptions.frozenRow >= 0 && _isBottomCanvas) {
-        startY += _scrollTop;
-      }
-
-      var start = _grid.getCellFromPoint(startX, startY);
-
-      dd.range = { start: start, end: {} };
-      _currentlySelectedRange = dd.range;
-      return _decorator.show(new SlickRange(start.row, start.cell));
-    }
-
-    function handleDrag(evt, dd) {
-      if (!_dragging && !_isRowMoveRegistered) {
-        return;
-      }
-      if (!_isRowMoveRegistered) {
-        evt.stopImmediatePropagation();
-      }
-
-      const e = evt.getNativeEvent();
-      if (options.autoScroll) {
-        _draggingMouseOffset = getMouseOffsetViewport(e, dd);
-        if (_draggingMouseOffset.isOutsideViewport) {
-          return handleDragOutsideViewport();
-        }
-      }
-      stopIntervalTimer();
-      handleDragTo(e, dd);
-    }
-
-    function getMouseOffsetViewport(e, dd) {
-      var targetEvent = e.touches ? e.touches[0] : e;
-      var viewportLeft = _activeViewport.scrollLeft;
-      var viewportTop = _activeViewport.scrollTop;
-      var viewportRight = viewportLeft + _viewportWidth;
-      var viewportBottom = viewportTop + _viewportHeight;
-
-      var viewportOffset = Utils.offset(_activeViewport);
-      var viewportOffsetLeft = viewportOffset.left || 0;
-      var viewportOffsetTop = viewportOffset.top || 0;
-      var viewportOffsetRight = viewportOffsetLeft + _viewportWidth;
-      var viewportOffsetBottom = viewportOffsetTop + _viewportHeight;
-
-      var result = {
-        e: e,
-        dd: dd,
-        viewport: {
-          left: viewportLeft,
-          top: viewportTop,
-          right: viewportRight,
-          bottom: viewportBottom,
-          offset: {
-            left: viewportOffsetLeft,
-            top: viewportOffsetTop,
-            right: viewportOffsetRight,
-            bottom: viewportOffsetBottom
-          }
-        },
-        // Consider the viewport as the origin, the `offset` is based on the coordinate system:
-        // the cursor is on the viewport's left/bottom when it is less than 0, and on the right/top when greater than 0.
-        offset: {
-          x: 0,
-          y: 0
-        },
-        isOutsideViewport: false
-      }
-      // ... horizontal
-      if (targetEvent.pageX < viewportOffsetLeft) {
-        result.offset.x = targetEvent.pageX - viewportOffsetLeft;
-      } else if (targetEvent.pageX > viewportOffsetRight) {
-        result.offset.x = targetEvent.pageX - viewportOffsetRight;
-      }
-      // ... vertical
-      if (targetEvent.pageY < viewportOffsetTop) {
-        result.offset.y = viewportOffsetTop - targetEvent.pageY;
-      } else if (targetEvent.pageY > viewportOffsetBottom) {
-        result.offset.y = viewportOffsetBottom - targetEvent.pageY;
-      }
-      result.isOutsideViewport = !!result.offset.x || !!result.offset.y;
-      return result;
-    }
-
-    function handleDragOutsideViewport() {
-      _xDelayForNextCell = options.maxIntervalToShowNextCell - Math.abs(_draggingMouseOffset.offset.x) * options.accelerateInterval;
-      _yDelayForNextCell = options.maxIntervalToShowNextCell - Math.abs(_draggingMouseOffset.offset.y) * options.accelerateInterval;
-      // only one timer is created to handle the case that cursor outside the viewport
-      if (!_autoScrollTimerId) {
-        var xTotalDelay = 0;
-        var yTotalDelay = 0;
-        _autoScrollTimerId = setInterval(function () {
-          var xNeedUpdate = false;
-          var yNeedUpdate = false;
-          // ... horizontal
-          if (_draggingMouseOffset.offset.x) {
-            xTotalDelay += options.minIntervalToShowNextCell;
-            xNeedUpdate = xTotalDelay >= _xDelayForNextCell;
-          } else {
-            xTotalDelay = 0;
-          }
-          // ... vertical
-          if (_draggingMouseOffset.offset.y) {
-            yTotalDelay += options.minIntervalToShowNextCell;
-            yNeedUpdate = yTotalDelay >= _yDelayForNextCell;
-          } else {
-            yTotalDelay = 0;
-          }
-          if (xNeedUpdate || yNeedUpdate) {
-            if (xNeedUpdate) {
-              xTotalDelay = 0;
-            }
-            if (yNeedUpdate) {
-              yTotalDelay = 0;
-            }
-            handleDragToNewPosition(xNeedUpdate, yNeedUpdate);
-          }
-        }, options.minIntervalToShowNextCell);
-      }
-    }
-
-    function handleDragToNewPosition(xNeedUpdate, yNeedUpdate) {
-      var pageX = _draggingMouseOffset.e.pageX;
-      var pageY = _draggingMouseOffset.e.pageY;
-      var mouseOffsetX = _draggingMouseOffset.offset.x;
-      var mouseOffsetY = _draggingMouseOffset.offset.y;
-      var viewportOffset = _draggingMouseOffset.viewport.offset;
-      // ... horizontal
-      if (xNeedUpdate && mouseOffsetX) {
-        if (mouseOffsetX > 0) {
-          pageX = viewportOffset.right + _moveDistanceForOneCell.x;
-        } else {
-          pageX = viewportOffset.left - _moveDistanceForOneCell.x;
-        }
-      }
-      // ... vertical
-      if (yNeedUpdate && mouseOffsetY) {
-        if (mouseOffsetY > 0) {
-          pageY = viewportOffset.top - _moveDistanceForOneCell.y;
-        } else {
-          pageY = viewportOffset.bottom + _moveDistanceForOneCell.y;
-        }
-      }
-      handleDragTo({
-        pageX: pageX,
-        pageY: pageY
-      }, _draggingMouseOffset.dd);
-    }
-
-    function stopIntervalTimer() {
-      clearInterval(_autoScrollTimerId);
-      _autoScrollTimerId = null;
-    }
-
-    function handleDragTo(e, dd) {
-      let targetEvent = e.touches ? e.touches[0] : e;
-      let canvasOffset = Utils.offset(_activeCanvas);
-      let end = _grid.getCellFromPoint(
-        targetEvent.pageX - (canvasOffset && canvasOffset.left || 0) + _columnOffset,
-        targetEvent.pageY - (canvasOffset && canvasOffset.top || 0) + _rowOffset
-      );
-
-      // ... frozen column(s),
-      if ( _gridOptions.frozenColumn >= 0 && (!_isRightCanvas && (end.cell > _gridOptions.frozenColumn)) || (_isRightCanvas && (end.cell <= _gridOptions.frozenColumn)) ) {
-        return;
-      }
-
-      // ... or frozen row(s)
-      if ( _gridOptions.frozenRow >= 0 && (!_isBottomCanvas && (end.row >= _gridOptions.frozenRow)) || (_isBottomCanvas && (end.row < _gridOptions.frozenRow)) ) {
-        return;
-      }
-
-      // scrolling the viewport to display the target `end` cell if it is not fully displayed
-      if (options.autoScroll && _draggingMouseOffset) {
-        var endCellBox = _grid.getCellNodeBox(end.row, end.cell);
-        if (!endCellBox) {
-          return;
-        }
-        var viewport = _draggingMouseOffset.viewport;
-        if (endCellBox.left < viewport.left || endCellBox.right > viewport.right
-          || endCellBox.top < viewport.top || endCellBox.bottom > viewport.bottom) {
-          _grid.scrollCellIntoView(end.row, end.cell);
-        }
-      }
-
-      // ... or regular grid (without any frozen options)
-      if (!_grid.canCellBeSelected(end.row, end.cell)) {
-        return;
-      }
-
-      if (dd && dd.range) {
-        dd.range.end = end;
-
-        var range = new SlickRange(dd.range.start.row, dd.range.start.cell, end.row, end.cell);
-        _decorator.show(range);
-        _self.onCellRangeSelecting.notify({
-          range: range
-        });
-      }
-    }
-
-    function hasRowMoveManager() {
-      return !!(_grid.getPluginByName('RowMoveManager') || _grid.getPluginByName('CrossGridRowMoveManager'));
-    }
-
-    function handleDragEnd(e, dd) {
-      if (!_dragging) {
-        return;
-      }
-
-      _dragging = false;
-      e.stopImmediatePropagation();
-
-      stopIntervalTimer();
-      _decorator.hide();
-      _self.onCellRangeSelected.notify({
-        range: new SlickRange(
-          dd.range.start.row,
-          dd.range.start.cell,
-          dd.range.end.row,
-          dd.range.end.cell
-        )
-      });
-    }
-
-    function getCurrentRange() {
-      return _currentlySelectedRange;
-    }
-
-  Utils.extend(this, {
-      "init": init,
-      "destroy": destroy,
-      "pluginName": "CellRangeSelector",
-
-      "getCellDecorator": getCellDecorator,
-      "getCurrentRange": getCurrentRange,
-
-    "onBeforeCellRangeSelected": new SlickEvent(),
-    "onCellRangeSelected": new SlickEvent(),
-    "onCellRangeSelecting": new SlickEvent()
-    });
-  }
-
-// extend Slick namespace on window object when building as iife
-if (IIFE_ONLY && window.Slick) {
-  Utils.extend(Slick, {
-    CellRangeSelector
-  });
-}
diff --git a/src/plugins/slick.cellrangeselector.ts b/src/plugins/slick.cellrangeselector.ts
new file mode 100644
index 00000000..011cb74e
--- /dev/null
+++ b/src/plugins/slick.cellrangeselector.ts
@@ -0,0 +1,400 @@
+import { SlickEvent as SlickEvent_, SlickEventData, SlickEventHandler as SlickEventHandler_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core';
+import { Draggable as Draggable_ } from '../slick.interactions';
+import { SlickCellRangeDecorator as SlickCellRangeDecorator_ } from './slick.cellrangedecorator';
+import type { CellRangeSelectorOption, DOMMouseOrTouchEvent, DragPosition, DragRange, GridOption, MouseOffsetViewport, OnScrollEventArgs, Plugin } from '../models/index';
+import type { SlickGrid } from '../slick.grid';
+
+// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const SlickEventHandler = IIFE_ONLY ? Slick.EventHandler : SlickEventHandler_;
+const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
+const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
+const SlickCellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : SlickCellRangeDecorator_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+
+export class SlickCellRangeSelector implements Plugin {
+  // --
+  // public API
+  pluginName = 'CellRangeSelector' as const;
+  onBeforeCellRangeSelected = new SlickEvent<{ row: number; cell: number; }>();
+  onCellRangeSelected = new SlickEvent<{ range: SlickRange_; }>();
+  onCellRangeSelecting = new SlickEvent<{ range: SlickRange_; }>();
+
+  // --
+  // protected props
+  protected _grid!: SlickGrid;
+  protected _currentlySelectedRange: DragRange | null = null;
+  protected _canvas!: HTMLElement;
+  protected _decorator!: SlickCellRangeDecorator_;
+  protected _gridOptions!: GridOption;
+  protected _activeCanvas!: HTMLElement;
+  protected _dragging = false;
+  protected _handler = new SlickEventHandler();
+  protected options: CellRangeSelectorOption;
+  protected _defaults = {
+    autoScroll: true,
+    minIntervalToShowNextCell: 30,
+    maxIntervalToShowNextCell: 600, // better to a multiple of minIntervalToShowNextCell
+    accelerateInterval: 5,          // increase 5ms when cursor 1px outside the viewport.
+    selectionCss: {
+      border: '2px dashed blue'
+    }
+  } as CellRangeSelectorOption;
+
+  // Frozen row & column variables
+  protected _rowOffset = 0;
+  protected _columnOffset = 0;
+  protected _isRightCanvas = false;
+  protected _isBottomCanvas = false;
+
+  // autoScroll related constiables
+  protected _activeViewport!: HTMLElement;
+  protected _autoScrollTimerId?: NodeJS.Timeout;
+  protected _draggingMouseOffset!: MouseOffsetViewport;
+  protected _moveDistanceForOneCell!: { x: number; y: number; };
+  protected _xDelayForNextCell = 0;
+  protected _yDelayForNextCell = 0;
+  protected _viewportHeight = 0;
+  protected _viewportWidth = 0;
+  protected _isRowMoveRegistered = false;
+
+  // Scrollings
+  protected _scrollLeft = 0;
+  protected _scrollTop = 0;
+
+  constructor(options?: Partial<CellRangeSelectorOption>) {
+    this.options = Utils.extend(true, {}, this._defaults, options);
+  }
+
+  init(grid: SlickGrid) {
+    if (Draggable === undefined) {
+      throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
+    }
+
+    this._decorator = this.options.cellDecorator || new SlickCellRangeDecorator(grid, this.options);
+    this._grid = grid;
+    this._canvas = this._grid.getCanvasNode();
+    this._gridOptions = this._grid.getOptions();
+    this._handler
+      .subscribe(this._grid.onScroll, this.handleScroll.bind(this))
+      .subscribe(this._grid.onDragInit, this.handleDragInit.bind(this))
+      .subscribe(this._grid.onDragStart, this.handleDragStart.bind(this))
+      .subscribe(this._grid.onDrag, this.handleDrag.bind(this))
+      .subscribe(this._grid.onDragEnd, this.handleDragEnd.bind(this));
+  }
+
+  destroy() {
+    this._handler.unsubscribeAll();
+    this._activeCanvas = null as any;
+    this._activeViewport = null as any;
+    this._canvas = null as any;
+    this._decorator?.destroy();
+  }
+
+  getCellDecorator() {
+    return this._decorator;
+  }
+
+  protected handleScroll(_e: DOMMouseOrTouchEvent<HTMLDivElement>, args: OnScrollEventArgs) {
+    this._scrollTop = args.scrollTop;
+    this._scrollLeft = args.scrollLeft;
+  }
+
+  protected handleDragInit(e: Event) {
+    // Set the active canvas node because the decorator needs to append its
+    // box to the correct canvas
+    this._activeCanvas = this._grid.getActiveCanvasNode(e);
+    this._activeViewport = this._grid.getActiveViewportNode(e);
+
+    let scrollbarDimensions = this._grid.getDisplayedScrollbarDimensions()
+    this._viewportWidth = this._activeViewport.offsetWidth - scrollbarDimensions.width;
+    this._viewportHeight = this._activeViewport.offsetHeight - scrollbarDimensions.height;
+
+    this._moveDistanceForOneCell = {
+      x: this._grid.getAbsoluteColumnMinWidth() / 2,
+      y: this._grid.getOptions().rowHeight / 2
+    }
+    this._isRowMoveRegistered = this.hasRowMoveManager();
+
+    this._rowOffset = 0;
+    this._columnOffset = 0;
+    this._isBottomCanvas = this._activeCanvas.classList.contains('grid-canvas-bottom');
+
+    if (this._gridOptions.frozenRow > -1 && this._isBottomCanvas) {
+      const canvasSelector = `.${this._grid.getUID()} .grid-canvas-${this._gridOptions.frozenBottom ? 'bottom' : 'top'}`;
+      const canvasElm = document.querySelector(canvasSelector);
+      if (canvasElm) {
+        this._rowOffset = canvasElm.clientHeight || 0;
+      }
+    }
+
+    this._isRightCanvas = this._activeCanvas.classList.contains('grid-canvas-right');
+
+    if (this._gridOptions.frozenColumn > -1 && this._isRightCanvas) {
+      const canvasLeftElm = document.querySelector(`.${this._grid.getUID()} .grid-canvas-left`);
+      if (canvasLeftElm) {
+        this._columnOffset = canvasLeftElm.clientWidth || 0;
+      }
+    }
+
+    // prevent the grid from cancelling drag'n'drop by default
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+
+  protected handleDragStart(e: DOMMouseOrTouchEvent<HTMLDivElement>, dd: DragPosition) {
+    const cell = this._grid.getCellFromEvent(e);
+    if (cell && this.onBeforeCellRangeSelected.notify(cell).getReturnValue() !== false && this._grid.canCellBeSelected(cell.row, cell.cell)) {
+      this._dragging = true;
+      e.stopImmediatePropagation();
+    }
+    if (!this._dragging) {
+      return;
+    }
+
+    this._grid.focus();
+
+    let canvasOffset = Utils.offset(this._canvas);
+
+    let startX = dd.startX - (canvasOffset?.left ?? 0);
+    if (this._gridOptions.frozenColumn >= 0 && this._isRightCanvas) {
+      startX += this._scrollLeft;
+    }
+
+    let startY = dd.startY - (canvasOffset?.top ?? 0);
+    if (this._gridOptions.frozenRow >= 0 && this._isBottomCanvas) {
+      startY += this._scrollTop;
+    }
+
+    let start = this._grid.getCellFromPoint(startX, startY);
+
+    dd.range = { start: start, end: {} };
+    this._currentlySelectedRange = dd.range;
+    return this._decorator.show(new SlickRange(start.row, start.cell));
+  }
+
+  protected handleDrag(evt: SlickEventData, dd: DragPosition) {
+    if (!this._dragging && !this._isRowMoveRegistered) {
+      return;
+    }
+    if (!this._isRowMoveRegistered) {
+      evt.stopImmediatePropagation();
+    }
+
+    const e = evt.getNativeEvent();
+    if (this.options.autoScroll) {
+      this._draggingMouseOffset = this.getMouseOffsetViewport(e, dd);
+      if (this._draggingMouseOffset.isOutsideViewport) {
+        return this.handleDragOutsideViewport();
+      }
+    }
+    this.stopIntervalTimer();
+    this.handleDragTo(e, dd);
+  }
+
+  protected getMouseOffsetViewport(e: MouseEvent | TouchEvent, dd: DragPosition): MouseOffsetViewport {
+    const targetEvent: MouseEvent | Touch = (e as TouchEvent)?.touches?.[0] ?? e;
+    const viewportLeft = this._activeViewport.scrollLeft;
+    const viewportTop = this._activeViewport.scrollTop;
+    const viewportRight = viewportLeft + this._viewportWidth;
+    const viewportBottom = viewportTop + this._viewportHeight;
+
+    const viewportOffset = Utils.offset(this._activeViewport);
+    const viewportOffsetLeft = viewportOffset?.left ?? 0;
+    const viewportOffsetTop = viewportOffset?.top ?? 0;
+    const viewportOffsetRight = viewportOffsetLeft + this._viewportWidth;
+    const viewportOffsetBottom = viewportOffsetTop + this._viewportHeight;
+
+    const result = {
+      e: e,
+      dd: dd,
+      viewport: {
+        left: viewportLeft,
+        top: viewportTop,
+        right: viewportRight,
+        bottom: viewportBottom,
+        offset: {
+          left: viewportOffsetLeft,
+          top: viewportOffsetTop,
+          right: viewportOffsetRight,
+          bottom: viewportOffsetBottom
+        }
+      },
+      // Consider the viewport as the origin, the `offset` is based on the coordinate system:
+      // the cursor is on the viewport's left/bottom when it is less than 0, and on the right/top when greater than 0.
+      offset: {
+        x: 0,
+        y: 0
+      },
+      isOutsideViewport: false
+    }
+    // ... horizontal
+    if (targetEvent.pageX < viewportOffsetLeft) {
+      result.offset.x = targetEvent.pageX - viewportOffsetLeft;
+    } else if (targetEvent.pageX > viewportOffsetRight) {
+      result.offset.x = targetEvent.pageX - viewportOffsetRight;
+    }
+    // ... vertical
+    if (targetEvent.pageY < viewportOffsetTop) {
+      result.offset.y = viewportOffsetTop - targetEvent.pageY;
+    } else if (targetEvent.pageY > viewportOffsetBottom) {
+      result.offset.y = viewportOffsetBottom - targetEvent.pageY;
+    }
+    result.isOutsideViewport = !!result.offset.x || !!result.offset.y;
+    return result;
+  }
+
+  protected handleDragOutsideViewport() {
+    this._xDelayForNextCell = this.options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.x) * this.options.accelerateInterval;
+    this._yDelayForNextCell = this.options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.y) * this.options.accelerateInterval;
+    // only one timer is created to handle the case that cursor outside the viewport
+    if (!this._autoScrollTimerId) {
+      let xTotalDelay = 0;
+      let yTotalDelay = 0;
+      this._autoScrollTimerId = setInterval(() => {
+        let xNeedUpdate = false;
+        let yNeedUpdate = false;
+        // ... horizontal
+        if (this._draggingMouseOffset.offset.x) {
+          xTotalDelay += this.options.minIntervalToShowNextCell;
+          xNeedUpdate = xTotalDelay >= this._xDelayForNextCell;
+        } else {
+          xTotalDelay = 0;
+        }
+        // ... vertical
+        if (this._draggingMouseOffset.offset.y) {
+          yTotalDelay += this.options.minIntervalToShowNextCell;
+          yNeedUpdate = yTotalDelay >= this._yDelayForNextCell;
+        } else {
+          yTotalDelay = 0;
+        }
+        if (xNeedUpdate || yNeedUpdate) {
+          if (xNeedUpdate) {
+            xTotalDelay = 0;
+          }
+          if (yNeedUpdate) {
+            yTotalDelay = 0;
+          }
+          this.handleDragToNewPosition(xNeedUpdate, yNeedUpdate);
+        }
+      }, this.options.minIntervalToShowNextCell);
+    }
+  }
+
+  protected handleDragToNewPosition(xNeedUpdate: boolean, yNeedUpdate: boolean) {
+    let pageX = this._draggingMouseOffset.e.pageX;
+    let pageY = this._draggingMouseOffset.e.pageY;
+    let mouseOffsetX = this._draggingMouseOffset.offset.x;
+    let mouseOffsetY = this._draggingMouseOffset.offset.y;
+    let viewportOffset = this._draggingMouseOffset.viewport.offset;
+    // ... horizontal
+    if (xNeedUpdate && mouseOffsetX) {
+      if (mouseOffsetX > 0) {
+        pageX = viewportOffset.right + this._moveDistanceForOneCell.x;
+      } else {
+        pageX = viewportOffset.left - this._moveDistanceForOneCell.x;
+      }
+    }
+    // ... vertical
+    if (yNeedUpdate && mouseOffsetY) {
+      if (mouseOffsetY > 0) {
+        pageY = viewportOffset.top - this._moveDistanceForOneCell.y;
+      } else {
+        pageY = viewportOffset.bottom + this._moveDistanceForOneCell.y;
+      }
+    }
+    this.handleDragTo({
+      pageX: pageX,
+      pageY: pageY
+    }, this._draggingMouseOffset.dd);
+  }
+
+  protected stopIntervalTimer() {
+    if (this._autoScrollTimerId) {
+      clearInterval(this._autoScrollTimerId);
+      this._autoScrollTimerId = undefined;
+    }
+  }
+
+  protected handleDragTo(e: { pageX: number; pageY: number; }, dd: DragPosition) {
+    const targetEvent: MouseEvent | Touch = (e as unknown as TouchEvent)?.touches?.[0] ?? e;
+    let canvasOffset = Utils.offset(this._activeCanvas);
+    let end = this._grid.getCellFromPoint(
+      targetEvent.pageX - (canvasOffset?.left ?? 0) + this._columnOffset,
+      targetEvent.pageY - (canvasOffset?.top ?? 0) + this._rowOffset
+    );
+
+    // ... frozen column(s),
+    if (this._gridOptions.frozenColumn >= 0 && (!this._isRightCanvas && (end.cell > this._gridOptions.frozenColumn)) || (this._isRightCanvas && (end.cell <= this._gridOptions.frozenColumn))) {
+      return;
+    }
+
+    // ... or frozen row(s)
+    if (this._gridOptions.frozenRow >= 0 && (!this._isBottomCanvas && (end.row >= this._gridOptions.frozenRow)) || (this._isBottomCanvas && (end.row < this._gridOptions.frozenRow))) {
+      return;
+    }
+
+    // scrolling the viewport to display the target `end` cell if it is not fully displayed
+    if (this.options.autoScroll && this._draggingMouseOffset) {
+      let endCellBox = this._grid.getCellNodeBox(end.row, end.cell);
+      if (!endCellBox) {
+        return;
+      }
+      let viewport = this._draggingMouseOffset.viewport;
+      if (endCellBox.left < viewport.left || endCellBox.right > viewport.right
+        || endCellBox.top < viewport.top || endCellBox.bottom > viewport.bottom) {
+        this._grid.scrollCellIntoView(end.row, end.cell);
+      }
+    }
+
+    // ... or regular grid (without any frozen options)
+    if (!this._grid.canCellBeSelected(end.row, end.cell)) {
+      return;
+    }
+
+    if (dd?.range) {
+      dd.range.end = end;
+
+      let range = new SlickRange(dd.range.start.row ?? 0, dd.range.start.cell ?? 0, end.row, end.cell);
+      this._decorator.show(range);
+      this.onCellRangeSelecting.notify({
+        range: range
+      });
+    }
+  }
+
+  protected hasRowMoveManager() {
+    return !!(this._grid.getPluginByName('RowMoveManager') || this._grid.getPluginByName('CrossGridRowMoveManager'));
+  }
+
+  protected handleDragEnd(e: Event, dd: DragPosition) {
+    if (!this._dragging) {
+      return;
+    }
+
+    this._dragging = false;
+    e.stopImmediatePropagation();
+
+    this.stopIntervalTimer();
+    this._decorator.hide();
+    this.onCellRangeSelected.notify({
+      range: new SlickRange(
+        dd.range.start.row ?? 0,
+        dd.range.start.cell ?? 0,
+        dd.range.end.row,
+        dd.range.end.cell
+      )
+    });
+  }
+
+  getCurrentRange() {
+    return this._currentlySelectedRange;
+  }
+}
+
+// extend Slick namespace on window object when building as iife
+if (IIFE_ONLY && window.Slick) {
+  Utils.extend(Slick, {
+    CellRangeSelector: SlickCellRangeSelector
+  });
+}
diff --git a/src/plugins/slick.cellselectionmodel.js b/src/plugins/slick.cellselectionmodel.js
deleted file mode 100644
index 5d4f4f58..00000000
--- a/src/plugins/slick.cellselectionmodel.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { Event as SlickEvent_, EventData as EventData_, Range as Range_, Utils as Utils_ } from '../slick.core';
-import { CellRangeSelector as CellRangeSelector_ } from './slick.cellrangeselector';
-
-// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
-const EventData = IIFE_ONLY ? Slick.EventData : EventData_;
-const SlickRange = IIFE_ONLY ? Slick.Range : Range_; // test
-const CellRangeSelector = IIFE_ONLY ? Slick.CellRangeSelector : CellRangeSelector_;
-const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
-
-export function CellSelectionModel(options) {
-    var _grid;
-    var _ranges = [];
-    var _self = this;
-    var _selector;
-
-    if (typeof options === "undefined" || typeof options.cellRangeSelector === "undefined") {
-      _selector = new CellRangeSelector({
-        "selectionCss": {
-          "border": "2px solid black"
-        }
-      });
-    } else {
-      _selector = options.cellRangeSelector;
-    }
-
-    var _options;
-    var _defaults = {
-      selectActiveCell: true
-    };
-
-    function init(grid) {
-      _options = Utils.extend(true, {}, _defaults, options);
-      _grid = grid;
-      _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
-      _grid.onKeyDown.subscribe(handleKeyDown);
-      grid.registerPlugin(_selector);
-      _selector.onCellRangeSelected.subscribe(handleCellRangeSelected);
-      _selector.onBeforeCellRangeSelected.subscribe(handleBeforeCellRangeSelected);
-    }
-
-    function destroy() {
-      _grid.onActiveCellChanged.unsubscribe(handleActiveCellChange);
-      _grid.onKeyDown.unsubscribe(handleKeyDown);
-      _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
-      _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
-      _grid.unregisterPlugin(_selector);
-      if (_selector && _selector.destroy) {
-        _selector.destroy();
-      }
-    }
-
-    function removeInvalidRanges(ranges) {
-      var result = [];
-
-      for (var i = 0; i < ranges.length; i++) {
-        var r = ranges[i];
-        if (_grid.canCellBeSelected(r.fromRow, r.fromCell) && _grid.canCellBeSelected(r.toRow, r.toCell)) {
-          result.push(r);
-        }
-      }
-
-      return result;
-    }
-
-    function rangesAreEqual(range1, range2) {
-      var areDifferent = (range1.length !== range2.length);
-      if (!areDifferent) {
-        for (var i = 0; i < range1.length; i++) {
-          if (
-            range1[i].fromCell !== range2[i].fromCell
-            || range1[i].fromRow !== range2[i].fromRow
-            || range1[i].toCell !== range2[i].toCell
-            || range1[i].toRow !== range2[i].toRow
-          ) {
-            areDifferent = true;
-            break;
-          }
-        }
-      }
-      return !areDifferent;
-    }
-
-    function setSelectedRanges(ranges, caller) {
-      // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
-      if ((!_ranges || _ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
-
-      // if range has not changed, don't fire onSelectedRangesChanged
-      var rangeHasChanged = !rangesAreEqual(_ranges, ranges);
-
-      _ranges = removeInvalidRanges(ranges);
-      if (rangeHasChanged) {
-        // provide extra "caller" argument through SlickEventData to avoid breaking pubsub event that only accepts an array of selected range
-        var eventData = new EventData(null, _ranges);
-        Object.defineProperty(eventData, 'detail', { writable: true, configurable: true, value: { caller: caller || "SlickCellSelectionModel.setSelectedRanges" } });
-        _self.onSelectedRangesChanged.notify(_ranges, eventData);
-      }
-    }
-
-    function getSelectedRanges() {
-      return _ranges;
-    }
-
-    function refreshSelections() {
-      setSelectedRanges(getSelectedRanges());
-    }
-
-    function handleBeforeCellRangeSelected(e) {
-      if (_grid.getEditorLock().isActive()) {
-        e.stopPropagation();
-        return false;
-      }
-    }
-
-    function handleCellRangeSelected(e, args) {
-      _grid.setActiveCell(args.range.fromRow, args.range.fromCell, false, false, true);
-      setSelectedRanges([args.range]);
-    }
-
-    function handleActiveCellChange(e, args) {
-      if (_options.selectActiveCell && args.row != null && args.cell != null) {
-        setSelectedRanges([new SlickRange(args.row, args.cell)]);
-      }
-      else if (!_options.selectActiveCell) {
-        // clear the previous selection once the cell changes
-        setSelectedRanges([]);
-      }
-    }
-
-    function handleKeyDown(e) {
-      /***
-       * Кey codes
-       * 37 left
-       * 38 up
-       * 39 right
-       * 40 down
-       */
-      var ranges, last;
-      var active = _grid.getActiveCell();
-      var metaKey = e.ctrlKey || e.metaKey;
-
-      if (active && e.shiftKey && !metaKey && !e.altKey &&
-        (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40)) {
-
-        ranges = getSelectedRanges().slice();
-        if (!ranges.length)
-          ranges.push(new SlickRange(active.row, active.cell));
-
-        // keyboard can work with last range only
-        last = ranges.pop();
-
-        // can't handle selection out of active cell
-        if (!last.contains(active.row, active.cell))
-          last = new SlickRange(active.row, active.cell);
-
-        var dRow = last.toRow - last.fromRow,
-          dCell = last.toCell - last.fromCell,
-          // walking direction
-          dirRow = active.row == last.fromRow ? 1 : -1,
-          dirCell = active.cell == last.fromCell ? 1 : -1;
-
-        if (e.which == 37) {
-          dCell -= dirCell;
-        } else if (e.which == 39) {
-          dCell += dirCell;
-        } else if (e.which == 38) {
-          dRow -= dirRow;
-        } else if (e.which == 40) {
-          dRow += dirRow;
-        }
-
-        // define new selection range
-        var new_last = new SlickRange(active.row, active.cell, active.row + dirRow * dRow, active.cell + dirCell * dCell);
-        if (removeInvalidRanges([new_last]).length) {
-          ranges.push(new_last);
-          var viewRow = dirRow > 0 ? new_last.toRow : new_last.fromRow;
-          var viewCell = dirCell > 0 ? new_last.toCell : new_last.fromCell;
-          _grid.scrollRowIntoView(viewRow);
-          _grid.scrollCellIntoView(viewRow, viewCell);
-        }
-        else
-          ranges.push(last);
-
-        setSelectedRanges(ranges);
-
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-
-  Utils.extend(this, {
-      "getSelectedRanges": getSelectedRanges,
-      "setSelectedRanges": setSelectedRanges,
-
-      "refreshSelections": refreshSelections,
-
-      "init": init,
-      "destroy": destroy,
-      "pluginName": "CellSelectionModel",
-
-    "onSelectedRangesChanged": new SlickEvent()
-    });
-}
-
-// extend Slick namespace on window object when building as iife
-if (IIFE_ONLY && window.Slick) {
-  Utils.extend(true, window, {
-    Slick: {
-      CellSelectionModel
-    }
-  });
-}
diff --git a/src/plugins/slick.cellselectionmodel.ts b/src/plugins/slick.cellselectionmodel.ts
new file mode 100644
index 00000000..a4782549
--- /dev/null
+++ b/src/plugins/slick.cellselectionmodel.ts
@@ -0,0 +1,207 @@
+import { SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core';
+import { SlickCellRangeSelector as SlickCellRangeSelector_ } from './slick.cellrangeselector';
+import type { CellRange, OnActiveCellChangedEventArgs } from '../models/index';
+import type { SlickGrid } from '../slick.grid';
+
+// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const SlickEventData = IIFE_ONLY ? Slick.EventData : SlickEventData_;
+const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
+const SlickCellRangeSelector = IIFE_ONLY ? Slick.CellRangeSelector : SlickCellRangeSelector_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+
+export interface CellSelectionModelOption {
+  selectActiveCell: boolean;
+  cellRangeSelector?: SlickCellRangeSelector_;
+}
+
+export class SlickCellSelectionModel {
+  // --
+  // public API
+  pluginName = 'CellSelectionModel' as const;
+  onSelectedRangesChanged = new SlickEvent<CellRange[]>();
+
+  // --
+  // protected props
+  protected _grid!: SlickGrid;
+  protected _ranges: CellRange[] = [];
+  protected _selector: SlickCellRangeSelector_;
+  protected _options?: CellSelectionModelOption;
+  protected _defaults: CellSelectionModelOption = {
+    selectActiveCell: true
+  };
+
+  constructor(options?: { selectActiveCell: boolean; cellRangeSelector: SlickCellRangeSelector_; }) {
+    if (options === undefined || options.cellRangeSelector === undefined) {
+      this._selector = new SlickCellRangeSelector({ selectionCss: { border: '2px solid black' } as CSSStyleDeclaration });
+    } else {
+      this._selector = options.cellRangeSelector;
+    }
+  }
+
+  init(grid: SlickGrid) {
+    this._options = Utils.extend(true, {}, this._defaults, this._options);
+    this._grid = grid;
+    this._grid.onActiveCellChanged.subscribe(this.handleActiveCellChange.bind(this));
+    this._grid.onKeyDown.subscribe(this.handleKeyDown.bind(this));
+    grid.registerPlugin(this._selector);
+    this._selector.onCellRangeSelected.subscribe(this.handleCellRangeSelected.bind(this));
+    this._selector.onBeforeCellRangeSelected.subscribe(this.handleBeforeCellRangeSelected.bind(this));
+  }
+
+  destroy() {
+    this._grid.onActiveCellChanged.unsubscribe(this.handleActiveCellChange.bind(this));
+    this._grid.onKeyDown.unsubscribe(this.handleKeyDown.bind(this));
+    this._selector.onCellRangeSelected.unsubscribe(this.handleCellRangeSelected.bind(this));
+    this._selector.onBeforeCellRangeSelected.unsubscribe(this.handleBeforeCellRangeSelected.bind(this));
+    this._grid.unregisterPlugin(this._selector);
+    this._selector?.destroy();
+  }
+
+  protected removeInvalidRanges(ranges: CellRange[]) {
+    let result: CellRange[] = [];
+
+    for (let i = 0; i < ranges.length; i++) {
+      let r = ranges[i];
+      if (this._grid.canCellBeSelected(r.fromRow, r.fromCell) && this._grid.canCellBeSelected(r.toRow, r.toCell)) {
+        result.push(r);
+      }
+    }
+
+    return result;
+  }
+
+  protected rangesAreEqual(range1: CellRange[], range2: CellRange[]) {
+    let areDifferent = (range1.length !== range2.length);
+    if (!areDifferent) {
+      for (let i = 0; i < range1.length; i++) {
+        if (
+          range1[i].fromCell !== range2[i].fromCell
+          || range1[i].fromRow !== range2[i].fromRow
+          || range1[i].toCell !== range2[i].toCell
+          || range1[i].toRow !== range2[i].toRow
+        ) {
+          areDifferent = true;
+          break;
+        }
+      }
+    }
+    return !areDifferent;
+  }
+
+  setSelectedRanges(ranges: CellRange[], caller = 'SlickCellSelectionModel.setSelectedRanges') {
+    // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
+    if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
+
+    // if range has not changed, don't fire onSelectedRangesChanged
+    let rangeHasChanged = !this.rangesAreEqual(this._ranges, ranges);
+
+    this._ranges = this.removeInvalidRanges(ranges);
+    if (rangeHasChanged) {
+      // provide extra "caller" argument through SlickEventData to avoid breaking pubsub event that only accepts an array of selected range
+      let eventData = new SlickEventData(null, this._ranges);
+      Object.defineProperty(eventData, 'detail', { writable: true, configurable: true, value: { caller: caller || "SlickCellSelectionModel.setSelectedRanges" } });
+      this.onSelectedRangesChanged.notify(this._ranges, eventData);
+    }
+  }
+
+  getSelectedRanges() {
+    return this._ranges;
+  }
+
+  refreshSelections() {
+    this.setSelectedRanges(this.getSelectedRanges());
+  }
+
+  protected handleBeforeCellRangeSelected(e): boolean | void {
+    if (this._grid.getEditorLock().isActive()) {
+      e.stopPropagation();
+      return false;
+    }
+  }
+
+  protected handleCellRangeSelected(_e: any, args: { range: CellRange; }) {
+    this._grid.setActiveCell(args.range.fromRow, args.range.fromCell, false, false, true);
+    this.setSelectedRanges([args.range]);
+  }
+
+  protected handleActiveCellChange(_e: Event, args: OnActiveCellChangedEventArgs) {
+    if (this._options?.selectActiveCell && args.row != null && args.cell != null) {
+      this.setSelectedRanges([new SlickRange(args.row, args.cell)]);
+    }
+    else if (!this._options?.selectActiveCell) {
+      // clear the previous selection once the cell changes
+      this.setSelectedRanges([]);
+    }
+  }
+
+  protected handleKeyDown(e: KeyboardEvent) {
+    /***
+     * Кey codes
+     * 37 left
+     * 38 up
+     * 39 right
+     * 40 down
+     */
+    let ranges: CellRange[], last: SlickRange_;
+    let active = this._grid.getActiveCell();
+    let metaKey = e.ctrlKey || e.metaKey;
+
+    if (active && e.shiftKey && !metaKey && !e.altKey &&
+      (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40)) {
+
+      ranges = this.getSelectedRanges().slice();
+      if (!ranges.length)
+        ranges.push(new SlickRange(active.row, active.cell));
+
+      // keyboard can work with last range only
+      last = ranges.pop() as SlickRange_;
+
+      // can't handle selection out of active cell
+      if (!last.contains(active.row, active.cell))
+        last = new SlickRange(active.row, active.cell);
+
+      let dRow = last.toRow - last.fromRow,
+        dCell = last.toCell - last.fromCell,
+        // walking direction
+        dirRow = active.row == last.fromRow ? 1 : -1,
+        dirCell = active.cell == last.fromCell ? 1 : -1;
+
+      if (e.which == 37) {
+        dCell -= dirCell;
+      } else if (e.which == 39) {
+        dCell += dirCell;
+      } else if (e.which == 38) {
+        dRow -= dirRow;
+      } else if (e.which == 40) {
+        dRow += dirRow;
+      }
+
+      // define new selection range
+      let new_last = new SlickRange(active.row, active.cell, active.row + dirRow * dRow, active.cell + dirCell * dCell);
+      if (this.removeInvalidRanges([new_last]).length) {
+        ranges.push(new_last);
+        let viewRow = dirRow > 0 ? new_last.toRow : new_last.fromRow;
+        let viewCell = dirCell > 0 ? new_last.toCell : new_last.fromCell;
+        this._grid.scrollRowIntoView(viewRow);
+        this._grid.scrollCellIntoView(viewRow, viewCell);
+      }
+      else
+        ranges.push(last);
+
+      this.setSelectedRanges(ranges);
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+}
+
+// extend Slick namespace on window object when building as iife
+if (IIFE_ONLY && window.Slick) {
+  Utils.extend(true, window, {
+    Slick: {
+      CellSelectionModel: SlickCellSelectionModel
+    }
+  });
+}
diff --git a/src/plugins/slick.rowselectionmodel.js b/src/plugins/slick.rowselectionmodel.js
deleted file mode 100644
index e8bd9810..00000000
--- a/src/plugins/slick.rowselectionmodel.js
+++ /dev/null
@@ -1,276 +0,0 @@
-import { Event as SlickEvent_, EventData as EventData_, EventHandler as EventHandler_, keyCode as keyCode_, Range as SlickRange_, Utils as Utils_ } from '../slick.core';
-import { Draggable as Draggable_ } from '../slick.interactions';
-import { CellRangeDecorator as CellRangeDecorator_ } from './slick.cellrangedecorator';
-import { CellRangeSelector as CellRangeSelector_ } from './slick.cellrangeselector';
-
-// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const EventData = IIFE_ONLY ? Slick.EventData : EventData_;
-const EventHandler = IIFE_ONLY ? Slick.EventHandler : EventHandler_;
-const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_;
-const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
-const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
-const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
-const CellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : CellRangeDecorator_;
-const CellRangeSelector = IIFE_ONLY ? Slick.CellRangeSelector : CellRangeSelector_;
-const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
-
-export function RowSelectionModel(options) {
-    var _grid;
-    var _ranges = [];
-    var _self = this;
-  var _handler = new EventHandler();
-    var _inHandler;
-    var _options;
-    var _selector;
-    var _isRowMoveManagerHandler;
-    var _defaults = {
-      selectActiveRow: true,
-      dragToSelect: false,
-      autoScrollWhenDrag: true,
-      cellRangeSelector: undefined
-    };
-
-    function init(grid) {
-      if (typeof Draggable === "undefined") {
-        throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
-      }
-
-      _options = Utils.extend(true, {}, _defaults, options);
-      _selector = _options.cellRangeSelector;
-      _grid = grid;
-
-      if (!_selector && _options.dragToSelect) {
-        if (!CellRangeDecorator) {
-            throw new Error("Slick.CellRangeDecorator is required when option dragToSelect set to true");
-        }
-        _selector = new CellRangeSelector({
-          selectionCss: {
-            "border": "none"
-          },
-          autoScroll: _options.autoScrollWhenDrag
-        })
-      }
-
-      _handler.subscribe(_grid.onActiveCellChanged,
-          wrapHandler(handleActiveCellChange));
-      _handler.subscribe(_grid.onKeyDown,
-          wrapHandler(handleKeyDown));
-      _handler.subscribe(_grid.onClick,
-          wrapHandler(handleClick));
-      if (_selector) {
-        grid.registerPlugin(_selector);
-        _selector.onCellRangeSelecting.subscribe(handleCellRangeSelected);
-        _selector.onCellRangeSelected.subscribe(handleCellRangeSelected);
-        _selector.onBeforeCellRangeSelected.subscribe(handleBeforeCellRangeSelected);
-      }
-    }
-
-    function destroy() {
-      _handler.unsubscribeAll();
-      if (_selector) {
-        _selector.onCellRangeSelecting.unsubscribe(handleCellRangeSelected);
-        _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
-        _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
-        _grid.unregisterPlugin(_selector);
-        if (_selector.destroy) {
-          _selector.destroy();
-        }
-      }
-    }
-
-    function wrapHandler(handler) {
-      return function () {
-        if (!_inHandler) {
-          _inHandler = true;
-          handler.apply(this, arguments);
-          _inHandler = false;
-        }
-      };
-    }
-
-    function rangesToRows(ranges) {
-      var rows = [];
-      for (var i = 0; i < ranges.length; i++) {
-        for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
-          rows.push(j);
-        }
-      }
-      return rows;
-    }
-
-    function rowsToRanges(rows) {
-      var ranges = [];
-      var lastCell = _grid.getColumns().length - 1;
-      for (var i = 0; i < rows.length; i++) {
-        ranges.push(new SlickRange(rows[i], 0, rows[i], lastCell));
-      }
-      return ranges;
-    }
-
-    function getRowsRange(from, to) {
-      var i, rows = [];
-      for (i = from; i <= to; i++) {
-        rows.push(i);
-      }
-      for (i = to; i < from; i++) {
-        rows.push(i);
-      }
-      return rows;
-    }
-
-    function getSelectedRows() {
-      return rangesToRows(_ranges);
-    }
-
-    function setSelectedRows(rows) {
-      setSelectedRanges(rowsToRanges(rows), "SlickRowSelectionModel.setSelectedRows");
-    }
-
-    function setSelectedRanges(ranges, caller) {
-      // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
-      if ((!_ranges || _ranges.length === 0) && (!ranges || ranges.length === 0)) {
-        return;
-      }
-      _ranges = ranges;
-
-      // provide extra "caller" argument through SlickEventData to avoid breaking pubsub event that only accepts an array of selected range
-      var eventData = new EventData(null, _ranges);
-      Object.defineProperty(eventData, 'detail', { writable: true, configurable: true, value: { caller: caller || "SlickRowSelectionModel.setSelectedRanges" } });
-      _self.onSelectedRangesChanged.notify(_ranges, eventData);
-    }
-
-    function getSelectedRanges() {
-      return _ranges;
-    }
-
-    function refreshSelections() {
-      setSelectedRows(getSelectedRows());
-    }
-
-    function handleActiveCellChange(e, data) {
-      if (_options.selectActiveRow && data.row != null) {
-        setSelectedRanges([new SlickRange(data.row, 0, data.row, _grid.getColumns().length - 1)]);
-      }
-    }
-
-    function handleKeyDown(e) {
-      var activeRow = _grid.getActiveCell();
-      if (_grid.getOptions().multiSelect && activeRow
-        && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
-        && (e.which == keyCode.UP || e.which == keyCode.DOWN)) {
-        var selectedRows = getSelectedRows();
-        selectedRows.sort(function (x, y) {
-          return x - y;
-        });
-
-        if (!selectedRows.length) {
-          selectedRows = [activeRow.row];
-        }
-
-        var top = selectedRows[0];
-        var bottom = selectedRows[selectedRows.length - 1];
-        var active;
-
-        if (e.which == keyCode.DOWN) {
-          active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
-        } else {
-          active = activeRow.row < bottom ? --bottom : --top;
-        }
-
-        if (active >= 0 && active < _grid.getDataLength()) {
-          _grid.scrollRowIntoView(active);
-          var tempRanges = rowsToRanges(getRowsRange(top, bottom));
-          setSelectedRanges(tempRanges);
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-
-    function handleClick(e) {
-      var cell = _grid.getCellFromEvent(e);
-      if (!cell || !_grid.canCellBeActive(cell.row, cell.cell)) {
-        return false;
-      }
-
-      if (!_grid.getOptions().multiSelect || (
-          !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
-        return false;
-      }
-
-      var selection = rangesToRows(_ranges);
-      var idx = selection.indexOf(cell.row);
-
-      if (idx === -1 && (e.ctrlKey || e.metaKey)) {
-        selection.push(cell.row);
-        _grid.setActiveCell(cell.row, cell.cell);
-      } else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
-        selection = selection.filter((o) => o !== cell.row);
-        _grid.setActiveCell(cell.row, cell.cell);
-      } else if (selection.length && e.shiftKey) {
-        var last = selection.pop();
-        var from = Math.min(cell.row, last);
-        var to = Math.max(cell.row, last);
-        selection = [];
-        for (var i = from; i <= to; i++) {
-          if (i !== last) {
-            selection.push(i);
-          }
-        }
-        selection.push(last);
-        _grid.setActiveCell(cell.row, cell.cell);
-      }
-
-      var tempRanges = rowsToRanges(selection);
-      setSelectedRanges(tempRanges);
-      e.stopImmediatePropagation();
-
-      return true;
-    }
-
-    function handleBeforeCellRangeSelected(e, cell) {
-      if (!_isRowMoveManagerHandler) {
-        var rowMoveManager = _grid.getPluginByName('RowMoveManager') || _grid.getPluginByName('CrossGridRowMoveManager');
-        _isRowMoveManagerHandler = rowMoveManager ? rowMoveManager.isHandlerColumn : Utils.noop;
-      }
-      if (_grid.getEditorLock().isActive() || _isRowMoveManagerHandler(cell.cell)) {
-        e.stopPropagation();
-        return false;
-      }
-      _grid.setActiveCell(cell.row, cell.cell);
-    }
-
-    function handleCellRangeSelected(e, args) {
-      if (!_grid.getOptions().multiSelect || !_options.selectActiveRow) {
-        return false;
-      }
-      setSelectedRanges([new SlickRange(args.range.fromRow, 0, args.range.toRow, _grid.getColumns().length - 1)])
-    }
-
-  Utils.extend(this, {
-      "getSelectedRows": getSelectedRows,
-      "setSelectedRows": setSelectedRows,
-
-      "getSelectedRanges": getSelectedRanges,
-      "setSelectedRanges": setSelectedRanges,
-
-      "refreshSelections": refreshSelections,
-
-      "init": init,
-      "destroy": destroy,
-      "pluginName": "RowSelectionModel",
-
-    "onSelectedRangesChanged": new SlickEvent()
-    });
-  }
-
-// extend Slick namespace on window object when building as iife
-if (IIFE_ONLY && window.Slick) {
-  Utils.extend(true, window, {
-    Slick: {
-      RowSelectionModel
-    }
-  });
-}
-
diff --git a/src/plugins/slick.rowselectionmodel.ts b/src/plugins/slick.rowselectionmodel.ts
new file mode 100644
index 00000000..f472a05b
--- /dev/null
+++ b/src/plugins/slick.rowselectionmodel.ts
@@ -0,0 +1,268 @@
+import { keyCode as keyCode_, SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickEventHandler as SlickEventHandler_, SlickRange as SlickRange_, Utils as Utils_ } from '../slick.core';
+import { Draggable as Draggable_ } from '../slick.interactions';
+import { SlickCellRangeDecorator as SlickCellRangeDecorator_ } from './slick.cellrangedecorator';
+import { SlickCellRangeSelector as SlickCellRangeSelector_ } from './slick.cellrangeselector';
+import type { CrossGridRowMoveManager as CrossGridRowMoveManager_ } from './slick.crossgridrowmovemanager';
+import type { RowMoveManager as RowMoveManager_ } from './slick.rowmovemanager';
+import type { CellRange, OnActiveCellChangedEventArgs, RowSelectionModelOption } from '../models/index';
+import type { SlickGrid } from '../slick.grid';
+
+// for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
+const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_;
+const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_;
+const SlickCellRangeDecorator = IIFE_ONLY ? Slick.CellRangeDecorator : SlickCellRangeDecorator_;
+const SlickCellRangeSelector = IIFE_ONLY ? Slick.CellRangeSelector : SlickCellRangeSelector_;
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const SlickEventData = IIFE_ONLY ? Slick.EventData : SlickEventData_;
+const SlickEventHandler = IIFE_ONLY ? Slick.EventHandler : SlickEventHandler_;
+const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
+
+export class SlickRowSelectionModel {
+  // --
+  // public API
+  pluginName = 'RowSelectionModel' as const;
+  onSelectedRangesChanged = new SlickEvent<CellRange[]>();
+
+  // --
+  // protected props
+  protected _grid!: SlickGrid;
+  protected _ranges: CellRange[] = [];
+  protected _handler = new SlickEventHandler();
+  protected _inHandler = false;
+  protected _options: RowSelectionModelOption;
+  protected _selector?: SlickCellRangeSelector_;
+  protected _isRowMoveManagerHandler: any;
+  protected _defaults: RowSelectionModelOption = {
+    selectActiveRow: true,
+    dragToSelect: false,
+    autoScrollWhenDrag: true,
+    cellRangeSelector: undefined
+  };
+
+  constructor(options?: Partial<RowSelectionModelOption>) {
+    this._options = Utils.extend(true, {}, this._defaults, options);
+  }
+
+  init(grid: SlickGrid) {
+    if (Draggable === undefined) {
+      throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
+    }
+
+    this._selector = this._options.cellRangeSelector;
+    this._grid = grid;
+
+    if (!this._selector && this._options.dragToSelect) {
+      if (!SlickCellRangeDecorator) {
+        throw new Error('Slick.CellRangeDecorator is required when option dragToSelect set to true');
+      }
+      this._selector = new SlickCellRangeSelector({
+        selectionCss: { border: 'none' } as CSSStyleDeclaration,
+        autoScroll: this._options.autoScrollWhenDrag
+      });
+    }
+
+    this._handler.subscribe(this._grid.onActiveCellChanged, this.wrapHandler(this.handleActiveCellChange).bind(this));
+    this._handler.subscribe(this._grid.onKeyDown, this.wrapHandler(this.handleKeyDown).bind(this));
+    this._handler.subscribe(this._grid.onClick, this.wrapHandler(this.handleClick).bind(this));
+    if (this._selector) {
+      grid.registerPlugin(this._selector);
+      this._selector.onCellRangeSelecting.subscribe(this.handleCellRangeSelected.bind(this));
+      this._selector.onCellRangeSelected.subscribe(this.handleCellRangeSelected.bind(this));
+      this._selector.onBeforeCellRangeSelected.subscribe(this.handleBeforeCellRangeSelected.bind(this));
+    }
+  }
+
+  destroy() {
+    this._handler.unsubscribeAll();
+    if (this._selector) {
+      this._selector.onCellRangeSelecting.unsubscribe(this.handleCellRangeSelected.bind(this));
+      this._selector.onCellRangeSelected.unsubscribe(this.handleCellRangeSelected.bind(this));
+      this._selector.onBeforeCellRangeSelected.unsubscribe(this.handleBeforeCellRangeSelected.bind(this));
+      this._grid.unregisterPlugin(this._selector);
+      if (this._selector.destroy) {
+        this._selector.destroy();
+      }
+    }
+  }
+
+  protected wrapHandler(handler: (...args: any) => void) {
+    return (...args: any) => {
+      if (!this._inHandler) {
+        this._inHandler = true;
+        handler.apply(this, args);
+        this._inHandler = false;
+      }
+    };
+  }
+
+  protected rangesToRows(ranges: CellRange[]): number[] {
+    const rows: number[] = [];
+    for (let i = 0; i < ranges.length; i++) {
+      for (let j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
+        rows.push(j);
+      }
+    }
+    return rows;
+  }
+
+  protected rowsToRanges(rows: number[]) {
+    const ranges: SlickRange_[] = [];
+    const lastCell = this._grid.getColumns().length - 1;
+    for (let i = 0; i < rows.length; i++) {
+      ranges.push(new SlickRange(rows[i], 0, rows[i], lastCell));
+    }
+    return ranges;
+  }
+
+  protected getRowsRange(from: number, to: number) {
+    let i, rows: number[] = [];
+    for (i = from; i <= to; i++) {
+      rows.push(i);
+    }
+    for (i = to; i < from; i++) {
+      rows.push(i);
+    }
+    return rows;
+  }
+
+  getSelectedRows() {
+    return this.rangesToRows(this._ranges);
+  }
+
+  setSelectedRows(rows: number[]) {
+    this.setSelectedRanges(this.rowsToRanges(rows), 'SlickRowSelectionModel.setSelectedRows');
+  }
+
+  setSelectedRanges(ranges: CellRange[], caller = 'SlickRowSelectionModel.setSelectedRanges') {
+    // simple check for: empty selection didn't change, prevent firing onSelectedRangesChanged
+    if ((!this._ranges || this._ranges.length === 0) && (!ranges || ranges.length === 0)) {
+      return;
+    }
+    this._ranges = ranges;
+
+    // provide extra "caller" argument through SlickEventData to avoid breaking pubsub event that only accepts an array of selected range
+    const eventData = new SlickEventData(null, this._ranges);
+    Object.defineProperty(eventData, 'detail', { writable: true, configurable: true, value: { caller: caller || "SlickRowSelectionModel.setSelectedRanges" } });
+    this.onSelectedRangesChanged.notify(this._ranges, eventData);
+  }
+
+  getSelectedRanges() {
+    return this._ranges;
+  }
+
+  refreshSelections() {
+    this.setSelectedRows(this.getSelectedRows());
+  }
+
+  protected handleActiveCellChange(_e: SlickEventData_, args: OnActiveCellChangedEventArgs) {
+    if (this._options.selectActiveRow && args.row != null) {
+      this.setSelectedRanges([new SlickRange(args.row, 0, args.row, this._grid.getColumns().length - 1)]);
+    }
+  }
+
+  protected handleKeyDown(e: KeyboardEvent) {
+    const activeRow = this._grid.getActiveCell();
+    if (this._grid.getOptions().multiSelect && activeRow
+      && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
+      && (e.which == keyCode.UP || e.which == keyCode.DOWN)) {
+      let selectedRows = this.getSelectedRows();
+      selectedRows.sort(function (x, y) {
+        return x - y;
+      });
+
+      if (!selectedRows.length) {
+        selectedRows = [activeRow.row];
+      }
+
+      let top = selectedRows[0];
+      let bottom = selectedRows[selectedRows.length - 1];
+      let active: number;
+
+      if (e.which == keyCode.DOWN) {
+        active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
+      } else {
+        active = activeRow.row < bottom ? --bottom : --top;
+      }
+
+      if (active >= 0 && active < this._grid.getDataLength()) {
+        this._grid.scrollRowIntoView(active);
+        const tempRanges = this.rowsToRanges(this.getRowsRange(top, bottom));
+        this.setSelectedRanges(tempRanges);
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  protected handleClick(e: MouseEvent): boolean | void {
+    const cell = this._grid.getCellFromEvent(e);
+    if (!cell || !this._grid.canCellBeActive(cell.row, cell.cell)) {
+      return false;
+    }
+
+    if (!this._grid.getOptions().multiSelect || (
+      !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
+      return false;
+    }
+
+    let selection = this.rangesToRows(this._ranges);
+    const idx = selection.indexOf(cell.row);
+
+    if (idx === -1 && (e.ctrlKey || e.metaKey)) {
+      selection.push(cell.row);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    } else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
+      selection = selection.filter((o) => o !== cell.row);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    } else if (selection.length && e.shiftKey) {
+      const last = selection.pop() as number;
+      const from = Math.min(cell.row, last);
+      const to = Math.max(cell.row, last);
+      selection = [];
+      for (let i = from; i <= to; i++) {
+        if (i !== last) {
+          selection.push(i);
+        }
+      }
+      selection.push(last);
+      this._grid.setActiveCell(cell.row, cell.cell);
+    }
+
+    const tempRanges = this.rowsToRanges(selection);
+    this.setSelectedRanges(tempRanges);
+    e.stopImmediatePropagation();
+
+    return true;
+  }
+
+  protected handleBeforeCellRangeSelected(e: SlickEventData_, cell: { row: number; cell: number; }): boolean | void {
+    if (!this._isRowMoveManagerHandler) {
+      const rowMoveManager: CrossGridRowMoveManager_ | RowMoveManager_ = this._grid.getPluginByName('RowMoveManager') || this._grid.getPluginByName('CrossGridRowMoveManager');
+      this._isRowMoveManagerHandler = rowMoveManager ? rowMoveManager.isHandlerColumn : Utils.noop;
+    }
+    if (this._grid.getEditorLock().isActive() || this._isRowMoveManagerHandler(cell.cell)) {
+      e.stopPropagation();
+      return false;
+    }
+    this._grid.setActiveCell(cell.row, cell.cell);
+  }
+
+  protected handleCellRangeSelected(_e: SlickEventData_, args: { range: CellRange; }): boolean | void {
+    if (!this._grid.getOptions().multiSelect || !this._options.selectActiveRow) {
+      return false;
+    }
+    this.setSelectedRanges([new SlickRange(args.range.fromRow, 0, args.range.toRow, this._grid.getColumns().length - 1)])
+  }
+}
+
+// extend Slick namespace on window object when building as iife
+if (IIFE_ONLY && window.Slick) {
+  Utils.extend(true, window, {
+    Slick: {
+      RowSelectionModel: SlickRowSelectionModel
+    }
+  });
+}
+
diff --git a/src/slick.core.ts b/src/slick.core.ts
index 6bb0c849..9a074546 100644
--- a/src/slick.core.ts
+++ b/src/slick.core.ts
@@ -225,7 +225,7 @@ export class SlickRange {
   toCell: number;
   toRow: number;
 
-  constructor(fromRow: number, fromCell: number, toRow: number, toCell: number) {
+  constructor(fromRow: number, fromCell: number, toRow?: number, toCell?: number) {
     if (toRow === undefined && toCell === undefined) {
       toRow = fromRow;
       toCell = fromCell;
@@ -235,25 +235,25 @@ export class SlickRange {
      * @property fromRow
      * @type {Integer}
      */
-    this.fromRow = Math.min(fromRow, toRow);
+    this.fromRow = Math.min(fromRow, toRow as number);
 
     /**
      * @property fromCell
      * @type {Integer}
      */
-    this.fromCell = Math.min(fromCell, toCell);
+    this.fromCell = Math.min(fromCell, toCell as number);
 
     /**
      * @property toRow
      * @type {Integer}
      */
-    this.toRow = Math.max(fromRow, toRow);
+    this.toRow = Math.max(fromRow, toRow as number);
 
     /**
      * @property toCell
      * @type {Integer}
      */
-    this.toCell = Math.max(fromCell, toCell);
+    this.toCell = Math.max(fromCell, toCell as number);
   }
 
 
@@ -450,7 +450,7 @@ export class SlickGroupTotals extends SlickNonDataItem {
  * @class EditorLock
  * @constructor
  */
-export class EditorLock {
+export class SlickEditorLock {
   activeEditController: any = null;
 
   /**
@@ -475,13 +475,13 @@ export class EditorLock {
       return;
     }
     if (this.activeEditController !== null) {
-      throw new Error("SlickGrid.EditorLock.activate: an editController is still active, can't activate another editController");
+      throw new Error(`Slick.EditorLock.activate: an editController is still active, can't activate another editController`);
     }
     if (!editController.commitCurrentEdit) {
-      throw new Error("SlickGrid.EditorLock.activate: editController must implement .commitCurrentEdit()");
+      throw new Error('Slick.EditorLock.activate: editController must implement .commitCurrentEdit()');
     }
     if (!editController.cancelCurrentEdit) {
-      throw new Error("SlickGrid.EditorLock.activate: editController must implement .cancelCurrentEdit()");
+      throw new Error('Slick.EditorLock.activate: editController must implement .cancelCurrentEdit()');
     }
     this.activeEditController = editController;
   };
@@ -497,7 +497,7 @@ export class EditorLock {
       return;
     }
     if (this.activeEditController !== editController) {
-      throw new Error("SlickGrid.EditorLock.deactivate: specified editController is not the currently active one");
+      throw new Error('Slick.EditorLock.deactivate: specified editController is not the currently active one');
     }
     this.activeEditController = null;
   };
@@ -693,8 +693,8 @@ function isHidden(el: HTMLElement) {
 
 function parents(el: HTMLElement | ParentNode, selector?: string) {
   const parents: Array<HTMLElement | ParentNode> = [];
-  const visible = selector == ":visible";
-  const hidden = selector == ":hidden";
+  const visible = selector == ':visible';
+  const hidden = selector == ':hidden';
 
   while ((el = el.parentNode as ParentNode) && el !== document) {
     if (!el || !el.parentNode) {
@@ -810,7 +810,7 @@ function extend<T = any>(...args: any[]): T {
     if ((options = args[i]) != null) {
       for (name in options) {
         copy = options[name];
-        if (name === "__proto__" || target === copy) {
+        if (name === '__proto__' || target === copy) {
           continue;
         }
         if (deep && copy && (isPlainObject(copy) ||
@@ -876,40 +876,41 @@ export class BindingEventService {
     }
   }
 }
+export const SlickGlobalEditorLock = new SlickEditorLock();
 
 // export Slick namespace on both global & window objects
 const SlickCore = {
-  "Event": SlickEvent,
-  "EventData": SlickEventData,
-  "EventHandler": SlickEventHandler,
-  "Range": SlickRange,
-  "NonDataRow": SlickNonDataItem,
-  "Group": SlickGroup,
-  "GroupTotals": SlickGroupTotals,
-  // "EditorLock": EditorLock,
-  "RegexSanitizer": regexSanitizer,
-  // "BindingEventService": BindingEventService,
-  "Utils": {
-    "extend": extend,
-    "calculateAvailableSpace": calculateAvailableSpace,
-    "createDomElement": createDomElement,
-    "emptyElement": emptyElement,
-    "innerSize": innerSize,
-    "isEmptyObject": isEmptyObject,
-    "noop": noop,
-    "offset": offset,
-    "height": height,
-    "width": width,
-    "setStyleSize": setStyleSize,
-    "contains": contains,
-    "toFloat": toFloat,
-    "parents": parents,
-    "show": show,
-    "hide": hide,
-    "slideUp": slideUp,
-    "slideDown": slideDown,
-    "windowScrollPosition": windowScrollPosition,
-    "storage": {
+  Event: SlickEvent,
+  EventData: SlickEventData,
+  EventHandler: SlickEventHandler,
+  Range: SlickRange,
+  NonDataRow: SlickNonDataItem,
+  Group: SlickGroup,
+  GroupTotals: SlickGroupTotals,
+  // EditorLock: EditorLock,
+  RegexSanitizer: regexSanitizer,
+  // BindingEventService: BindingEventService,
+  Utils: {
+    extend: extend,
+    calculateAvailableSpace: calculateAvailableSpace,
+    createDomElement: createDomElement,
+    emptyElement: emptyElement,
+    innerSize: innerSize,
+    isEmptyObject: isEmptyObject,
+    noop: noop,
+    offset: offset,
+    height: height,
+    width: width,
+    setStyleSize: setStyleSize,
+    contains: contains,
+    toFloat: toFloat,
+    parents: parents,
+    show: show,
+    hide: hide,
+    slideUp: slideUp,
+    slideDown: slideDown,
+    windowScrollPosition: windowScrollPosition,
+    storage: {
       // https://stackoverflow.com/questions/29222027/vanilla-alternative-to-jquery-data-function-any-native-javascript-alternati
       _storage: new WeakMap(),
       put: function (element: any, key: string, obj: any) {
@@ -941,9 +942,9 @@ const SlickCore = {
    * @static
    * @constructor
    */
-  "GlobalEditorLock": new EditorLock(),
+  GlobalEditorLock: SlickGlobalEditorLock,
 
-  "keyCode": {
+  keyCode: {
     SPACE: 8,
     BACKSPACE: 8,
     DELETE: 46,
@@ -961,9 +962,9 @@ const SlickCore = {
     UP: 38,
     A: 65
   },
-  "preClickClassName": "slick-edit-preclick",
+  preClickClassName: 'slick-edit-preclick',
 
-  "GridAutosizeColsMode": {
+  GridAutosizeColsMode: {
     None: 'NOA',
     LegacyOff: 'LOF',
     LegacyForceFit: 'LFF',
@@ -972,7 +973,7 @@ const SlickCore = {
     FitViewportToCols: 'FVC'
   },
 
-  "ColAutosizeMode": {
+  'ColAutosizeMode': {
     Locked: 'LCK',
     Guide: 'GUI',
     Content: 'CON',
@@ -980,14 +981,14 @@ const SlickCore = {
     ContentIntelligent: 'CTI'
   },
 
-  "RowSelectionMode": {
+  'RowSelectionMode': {
     FirstRow: 'FS1',
     FirstNRows: 'FSN',
     AllRows: 'ALL',
     LastRow: 'LS1'
   },
 
-  "ValueFilterMode": {
+  'ValueFilterMode': {
     None: 'NONE',
     DeDuplicate: 'DEDP',
     GetGreatestAndSub: 'GR8T',
@@ -995,7 +996,7 @@ const SlickCore = {
     GetLongestText: 'LNSC'
   },
 
-  "WidthEvalMode": {
+  WidthEvalMode: {
     Auto: 'AUTO',
     TextOnly: 'CANV',
     HTML: 'HTML'
@@ -1010,7 +1011,7 @@ export const {
 
 /*  eslint-disable no-undef */
 // also add to global object when exist
-if (IIFE_ONLY && typeof global !== "undefined" && window.Slick) {
+if (IIFE_ONLY && typeof global !== 'undefined' && window.Slick) {
   global.Slick = window.Slick;
 }
 /*  eslint-enable no-undef */
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 66a151ff..93260db5 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -303,29 +303,29 @@ export class SlickGrid {
   protected initialized = false;
   protected _container!: HTMLElement;
   protected uid = `slickgrid_${Math.round(1000000 * Math.random())}`;
-  protected _focusSink!: HTMLElement;
-  protected _focusSink2!: HTMLElement;
-  protected _groupHeaders: HTMLElement[] = [];
-  protected _headerScroller: HTMLElement[] = [];
-  protected _headers: HTMLElement[] = [];
-  protected _headerRows!: HTMLElement[];
-  protected _headerRowScroller!: HTMLElement[];
-  protected _headerRowSpacerL!: HTMLElement;
-  protected _headerRowSpacerR!: HTMLElement;
-  protected _footerRow!: HTMLElement[];
-  protected _footerRowScroller!: HTMLElement[];
-  protected _footerRowSpacerL!: HTMLElement;
-  protected _footerRowSpacerR!: HTMLElement;
-  protected _preHeaderPanel!: HTMLElement;
-  protected _preHeaderPanelScroller!: HTMLElement;
-  protected _preHeaderPanelSpacer!: HTMLElement;
-  protected _preHeaderPanelR!: HTMLElement;
-  protected _preHeaderPanelScrollerR!: HTMLElement;
-  protected _preHeaderPanelSpacerR!: HTMLElement;
-  protected _topPanelScrollers!: HTMLElement[];
-  protected _topPanels!: HTMLElement[];
-  protected _viewport!: HTMLElement[];
-  protected _canvas!: HTMLElement[];
+  protected _focusSink!: HTMLDivElement;
+  protected _focusSink2!: HTMLDivElement;
+  protected _groupHeaders: HTMLDivElement[] = [];
+  protected _headerScroller: HTMLDivElement[] = [];
+  protected _headers: HTMLDivElement[] = [];
+  protected _headerRows!: HTMLDivElement[];
+  protected _headerRowScroller!: HTMLDivElement[];
+  protected _headerRowSpacerL!: HTMLDivElement;
+  protected _headerRowSpacerR!: HTMLDivElement;
+  protected _footerRow!: HTMLDivElement[];
+  protected _footerRowScroller!: HTMLDivElement[];
+  protected _footerRowSpacerL!: HTMLDivElement;
+  protected _footerRowSpacerR!: HTMLDivElement;
+  protected _preHeaderPanel!: HTMLDivElement;
+  protected _preHeaderPanelScroller!: HTMLDivElement;
+  protected _preHeaderPanelSpacer!: HTMLDivElement;
+  protected _preHeaderPanelR!: HTMLDivElement;
+  protected _preHeaderPanelScrollerR!: HTMLDivElement;
+  protected _preHeaderPanelSpacerR!: HTMLDivElement;
+  protected _topPanelScrollers!: HTMLDivElement[];
+  protected _topPanels!: HTMLDivElement[];
+  protected _viewport!: HTMLDivElement[];
+  protected _canvas!: HTMLDivElement[];
   protected _style;
   protected _boundAncestors: HTMLElement[] = [];
   protected stylesheet;
@@ -358,12 +358,12 @@ export class SlickGrid {
   protected footerRowH = 0;
 
   protected tabbingDirection = 1;
-  protected _activeCanvasNode!: HTMLElement;
-  protected _activeViewportNode!: HTMLElement;
+  protected _activeCanvasNode!: HTMLDivElement;
+  protected _activeViewportNode!: HTMLDivElement;
   protected activePosX!: number;
   protected activeRow!: number;
   protected activeCell!: number;
-  protected activeCellNode: HTMLElement | null = null;
+  protected activeCellNode: HTMLDivElement | null = null;
   protected currentEditor: Editor | null = null;
   protected serializedEditorValue;
   protected editController?: EditController;
@@ -415,43 +415,43 @@ export class SlickGrid {
   protected counter_rows_rendered = 0;
   protected counter_rows_removed = 0;
 
-  protected _paneHeaderL!: HTMLElement;
-  protected _paneHeaderR!: HTMLElement;
-  protected _paneTopL!: HTMLElement;
-  protected _paneTopR!: HTMLElement;
-  protected _paneBottomL!: HTMLElement;
-  protected _paneBottomR!: HTMLElement;
-  protected _headerScrollerL!: HTMLElement;
-  protected _headerScrollerR!: HTMLElement;
-  protected _headerL!: HTMLElement;
-  protected _headerR!: HTMLElement;
-  protected _groupHeadersL!: HTMLElement;
-  protected _groupHeadersR!: HTMLElement;
-  protected _headerRowScrollerL!: HTMLElement;
-  protected _headerRowScrollerR!: HTMLElement;
-  protected _footerRowScrollerL!: HTMLElement;
-  protected _footerRowScrollerR!: HTMLElement;
-  protected _headerRowL!: HTMLElement;
-  protected _headerRowR!: HTMLElement;
-  protected _footerRowL!: HTMLElement;
-  protected _footerRowR!: HTMLElement;
-  protected _topPanelScrollerL!: HTMLElement;
-  protected _topPanelScrollerR!: HTMLElement;
-  protected _topPanelL!: HTMLElement;
-  protected _topPanelR!: HTMLElement;
-  protected _viewportTopL!: HTMLElement;
-  protected _viewportTopR!: HTMLElement;
-  protected _viewportBottomL!: HTMLElement;
-  protected _viewportBottomR!: HTMLElement;
-  protected _canvasTopL!: HTMLElement;
-  protected _canvasTopR!: HTMLElement;
-  protected _canvasBottomL!: HTMLElement;
-  protected _canvasBottomR!: HTMLElement;
-  protected _viewportScrollContainerX!: HTMLElement;
-  protected _viewportScrollContainerY!: HTMLElement;
-  protected _headerScrollContainer!: HTMLElement;
-  protected _headerRowScrollContainer!: HTMLElement;
-  protected _footerRowScrollContainer!: HTMLElement;
+  protected _paneHeaderL!: HTMLDivElement;
+  protected _paneHeaderR!: HTMLDivElement;
+  protected _paneTopL!: HTMLDivElement;
+  protected _paneTopR!: HTMLDivElement;
+  protected _paneBottomL!: HTMLDivElement;
+  protected _paneBottomR!: HTMLDivElement;
+  protected _headerScrollerL!: HTMLDivElement;
+  protected _headerScrollerR!: HTMLDivElement;
+  protected _headerL!: HTMLDivElement;
+  protected _headerR!: HTMLDivElement;
+  protected _groupHeadersL!: HTMLDivElement;
+  protected _groupHeadersR!: HTMLDivElement;
+  protected _headerRowScrollerL!: HTMLDivElement;
+  protected _headerRowScrollerR!: HTMLDivElement;
+  protected _footerRowScrollerL!: HTMLDivElement;
+  protected _footerRowScrollerR!: HTMLDivElement;
+  protected _headerRowL!: HTMLDivElement;
+  protected _headerRowR!: HTMLDivElement;
+  protected _footerRowL!: HTMLDivElement;
+  protected _footerRowR!: HTMLDivElement;
+  protected _topPanelScrollerL!: HTMLDivElement;
+  protected _topPanelScrollerR!: HTMLDivElement;
+  protected _topPanelL!: HTMLDivElement;
+  protected _topPanelR!: HTMLDivElement;
+  protected _viewportTopL!: HTMLDivElement;
+  protected _viewportTopR!: HTMLDivElement;
+  protected _viewportBottomL!: HTMLDivElement;
+  protected _viewportBottomR!: HTMLDivElement;
+  protected _canvasTopL!: HTMLDivElement;
+  protected _canvasTopR!: HTMLDivElement;
+  protected _canvasBottomL!: HTMLDivElement;
+  protected _canvasBottomR!: HTMLDivElement;
+  protected _viewportScrollContainerX!: HTMLDivElement;
+  protected _viewportScrollContainerY!: HTMLDivElement;
+  protected _headerScrollContainer!: HTMLDivElement;
+  protected _headerRowScrollContainer!: HTMLDivElement;
+  protected _footerRowScrollContainer!: HTMLDivElement;
 
   // store css attributes if display:none is active in container or parent
   protected cssShow = { position: 'absolute', visibility: 'hidden', display: 'block' };
@@ -490,7 +490,7 @@ export class SlickGrid {
 
   protected initialize() {
     if (typeof this.container === 'string') {
-      this._container = document.querySelector(this.container) as HTMLElement;
+      this._container = document.querySelector(this.container) as HTMLDivElement;
     } else {
       this._container = this.container;
     }
@@ -884,12 +884,12 @@ export class SlickGrid {
   }
 
   /** Get Grid Canvas Node DOM Element */
-  getCanvasNode(columnIdOrIdx: number | string, rowIndex: number) {
-    return this._getContainerElement(this.getCanvases(), columnIdOrIdx, rowIndex);
+  getCanvasNode(columnIdOrIdx?: number | string, rowIndex?: number) {
+    return this._getContainerElement(this.getCanvases(), columnIdOrIdx, rowIndex) as HTMLDivElement;
   }
 
   /** Get the canvas DOM element */
-  getActiveCanvasNode(e: Event | SlickEventData_) {
+  getActiveCanvasNode(e?: Event | SlickEventData_) {
     if (e === undefined) {
       return this._activeCanvasNode;
     }
@@ -932,7 +932,7 @@ export class SlickGrid {
     return this._activeViewportNode;
   }
 
-  protected _getContainerElement(targetContainers: HTMLElement[], columnIdOrIdx: number | string, rowIndex?: number) {
+  protected _getContainerElement(targetContainers: HTMLElement[], columnIdOrIdx?: number | string, rowIndex?: number) {
     if (!targetContainers) { return; }
     if (!columnIdOrIdx) { columnIdOrIdx = 0; }
     if (!rowIndex) { rowIndex = 0; }
@@ -5470,7 +5470,7 @@ export class SlickGrid {
     this.internalScrollColumnIntoView(this.columnPosLeft[cell], this.columnPosRight[cell]);
   }
 
-  protected setActiveCellInternal(newCell: HTMLElement | null, opt_editMode?: boolean | null, preClickModeOn?: boolean | null, suppressActiveCellChangedEvent?: boolean, e?: Event | SlickEvent_) {
+  protected setActiveCellInternal(newCell: HTMLDivElement | null, opt_editMode?: boolean | null, preClickModeOn?: boolean | null, suppressActiveCellChangedEvent?: boolean, e?: Event | SlickEvent_) {
     if (this.activeCellNode !== null) {
       this.makeActiveCellNormal();
       this.activeCellNode.classList.remove('active');
@@ -6275,7 +6275,7 @@ export class SlickGrid {
    * @param row A row index.
    * @param cell A column index.
    */
-  getCellNode(row: number, cell: number): HTMLElement | null {
+  getCellNode(row: number, cell: number): HTMLDivElement | null {
     if (this.rowsCache[row]) {
       this.ensureCellNodesInRowsCache(row);
       try {