fix: use setTimeout/setInterval from window object with correct TS ty…

…pe (#1054)

examples/example-plugin-custom-tooltip.html

@@ -216,7 +216,7 @@ <h2>View Source:</h2>
           // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves
           formatter: () => `<div>loading...</div>`,
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), serverApiDelay);
+            window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), serverApiDelay);
           }),
           asyncPostFormatter: this.tooltipTaskFormatter.bind(this),
 

examples/example-row-detail-selection-and-move.html

@@ -203,7 +203,7 @@ <h3>Selected Titles:</h3>
 
     // fill the template with a delay to simulate a server call
     function simulateServerCall(item) {
-      setTimeout(function () {
+      window.setTimeout(function () {
         // let's add some property to our item for a better simulation
         var itemDetail = item;
         itemDetail.assignee = fakeNames[randomNumber(0, 9)];

examples/example-trading-esm.html

@@ -335,11 +335,11 @@ <h2>View Source:</h2>
       // but the cell highlight actually does that for us so we can skip it
     }
 
-    timer = setTimeout(startSimulation.bind(this), refreshRate || 0);
+    timer = window.setTimeout(startSimulation.bind(this), refreshRate || 0);
   }
 
   function stopSimulation() {
-    clearTimeout(timer);
+    window.clearTimeout(timer);
   }
 
   function findColumnById(columnName) {
@@ -354,7 +354,7 @@ <h2>View Source:</h2>
         grid.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
 
         // remove highlight after x amount of time
-        setTimeout(() => removeCellStyling(item, column, row), highlightDuration);
+        window.setTimeout(() => removeCellStyling(item, column, row), highlightDuration);
       }
     }
   }
@@ -373,7 +373,7 @@ <h2>View Source:</h2>
   // prepare the data
   data = getData(200);
 
-  setTimeout(() => {
+  window.setTimeout(() => {
     startSimulation();
   }, refreshRate);
 

examples/example14-highlighting.html

@@ -159,14 +159,14 @@ <h2>View Source:</h2>
     grid.setCellCssStyles("highlight", changes);
     grid.render();
 
-    timer = setTimeout(simulateRealTimeUpdates, 500);
+    timer = window.setTimeout(simulateRealTimeUpdates, 500);
   }
 
   function stopSimulation() {
     changes = {}; // clear changes
     grid.setCellCssStyles("highlight", changes);
     grid.render();
-    clearTimeout(timer);
+    window.clearTimeout(timer);
   }
 
   function findCurrentServer() {

examples/example16-row-detail.html

@@ -289,7 +289,7 @@ <h2>View Source:</h2>
 
     // fill the template with a delay to simulate a server call
     function simulateServerCall(item) {
-      setTimeout(function() {
+      window.setTimeout(function() {
         // let's add some property to our item for a better simulation
         var itemDetail = item;
         itemDetail.assignee = fakeNames[randomNumber(0, 9)];

examples/example17-row-detail-many-columns.html

@@ -288,7 +288,7 @@ <h2>View Source:</h2>
 
     // fill the template with a delay to simulate a server call
     function simulateServerCall(item) {
-      setTimeout(function() {
+      window.setTimeout(function() {
         // let's add some property to our item for a better simulation
         var itemDetail = item;
         itemDetail.assignee = fakeNames[randomNumber(0, 9)];

src/plugins/slick.cellexternalcopymanager.ts

@@ -45,7 +45,7 @@ export class SlickCellExternalCopyManager implements SlickPlugin {
   protected _grid!: SlickGrid;
   protected _bodyElement: HTMLElement;
   protected _copiedRanges: SlickRange_[] | null = null;
-  protected _clearCopyTI?: NodeJS.Timeout;
+  protected _clearCopyTI?: number;
   protected _copiedCellStyle: string;
   protected _copiedCellStyleLayerKey: string;
   protected _onCopyInit?: () => void;
@@ -431,7 +431,7 @@ export class SlickCellExternalCopyManager implements SlickPlugin {
             const ta = this._createTextBox(clipText);
             ta.focus();
 
-            setTimeout(() => {
+            window.setTimeout(() => {
               this._bodyElement.removeChild(ta);
               // restore focus when possible
               focusEl
@@ -461,7 +461,7 @@ export class SlickCellExternalCopyManager implements SlickPlugin {
       )) {    // CTRL+V or Shift+INS
         const focusEl = document.activeElement as HTMLElement;
         const ta = this._createTextBox('');
-        setTimeout(() => {
+        window.setTimeout(() => {
           this._decodeTabularData(this._grid, ta);
           // restore focus when possible
           focusEl?.focus();
@@ -485,8 +485,8 @@ export class SlickCellExternalCopyManager implements SlickPlugin {
       }
     }
     this._grid.setCellCssStyles(this._copiedCellStyleLayerKey, hash);
-    clearTimeout(this._clearCopyTI as NodeJS.Timeout);
-    this._clearCopyTI = setTimeout(() => {
+    window.clearTimeout(this._clearCopyTI);
+    this._clearCopyTI = window.setTimeout(() => {
       this.clearCopySelection();
     }, this._options?.clearCopySelectionDelay || CLEAR_COPY_SELECTION_DELAY);
   }

src/plugins/slick.cellrangeselector.ts

@@ -49,7 +49,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
 
   // autoScroll related constiables
   protected _activeViewport!: HTMLElement;
-  protected _autoScrollTimerId?: NodeJS.Timeout;
+  protected _autoScrollTimerId?: number;
   protected _draggingMouseOffset!: MouseOffsetViewport;
   protected _moveDistanceForOneCell!: { x: number; y: number; };
   protected _xDelayForNextCell = 0;
@@ -252,7 +252,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
     if (!this._autoScrollTimerId) {
       let xTotalDelay = 0;
       let yTotalDelay = 0;
-      this._autoScrollTimerId = setInterval(() => {
+      this._autoScrollTimerId = window.setInterval(() => {
         let xNeedUpdate = false;
         let yNeedUpdate = false;
         // ... horizontal
@@ -309,7 +309,7 @@ export class SlickCellRangeSelector implements SlickPlugin {
 
   protected stopIntervalTimer() {
     if (this._autoScrollTimerId) {
-      clearInterval(this._autoScrollTimerId);
+      window.clearInterval(this._autoScrollTimerId);
       this._autoScrollTimerId = undefined;
     }
   }

src/plugins/slick.resizer.ts

@@ -80,7 +80,7 @@ export class SlickResizer {
   protected _gridUid = '';
   protected _lastDimensions?: GridSize;
   protected _resizePaused = false;
-  protected _timer!: NodeJS.Timeout;
+  protected _timer?: number;
   protected _options: ResizerOption;
   protected _defaults: ResizerOption = {
     bottomPadding: 20,
@@ -247,8 +247,8 @@ export class SlickResizer {
     if (typeof Promise === 'function') {
       return new Promise((resolve) => {
         if (resizeDelay > 0) {
-          clearTimeout(this._timer);
-          this._timer = setTimeout(() => {
+          window.clearTimeout(this._timer);
+          this._timer = window.setTimeout(() => {
             resolve(this.resizeGridCallback(newSizes, event));
           }, resizeDelay);
         } else {
@@ -258,8 +258,8 @@ export class SlickResizer {
     } else {
       // OR no return when Promise isn't supported
       if (resizeDelay > 0) {
-        clearTimeout(this._timer);
-        this._timer = setTimeout(() => {
+        window.clearTimeout(this._timer);
+        this._timer = window.setTimeout(() => {
           this.resizeGridCallback(newSizes, event);
         }, resizeDelay);
       } else {

src/plugins/slick.rowdetailview.ts

@@ -405,7 +405,7 @@ export class SlickRowDetailView {
   protected notifyBackToViewportWhenDomExist(item: any, rowId: number | string) {
     const rowIndex = (item.rowIndex || this._dataView.getRowById(item[this._dataViewIdProperty])) as number;
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       // make sure View Row DOM Element really exist before notifying that it's a row that is visible again
       if (document.querySelector(`.${this._gridUid} .cellDetailView_${item[this._dataViewIdProperty]}`)) {
         this.onRowBackToViewportRange.notify({

src/slick.compositeeditor.ts

@@ -96,7 +96,7 @@ export function SlickCompositeEditor(columns: Column[], containers: Array<HTMLDi
       }
 
       // focus on first input
-      setTimeout(function () {
+      window.setTimeout(() => {
         if (Array.isArray(editors) && editors.length > 0 && typeof editors[0].focus === 'function') {
           editors[0].focus();
         }

src/slick.editors.ts

@@ -374,7 +374,7 @@ export class FlatpickrEditor<TData = any, C extends Column<TData> = Column<TData
     });
 
     if (!this.args.compositeEditorOptions) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.show();
         this.focus();
       }, 50);

src/slick.grid.ts

@@ -335,10 +335,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     colDataTypeOf: undefined
   };
 
-  protected _columnResizeTimer?: any;
-  protected _executionBlockTimer?: any;
-  protected _flashCellTimer?: any;
-  protected _highlightRowTimer?: any;
+  protected _columnResizeTimer?: number;
+  protected _executionBlockTimer?: number;
+  protected _flashCellTimer?: number;
+  protected _highlightRowTimer?: number;
 
   // scroller
   protected th!: number;   // virtual height
@@ -450,10 +450,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected scrollThrottle!: { enqueue: () => void; dequeue: () => void; };
 
   // async call handles
-  protected h_editorLoader: any = null;
+  protected h_editorLoader?: number;
   protected h_render = null;
-  protected h_postrender: any = null;
-  protected h_postrenderCleanup: any = null;
+  protected h_postrender?: number;
+  protected h_postrenderCleanup?: number;
   protected postProcessedRows: any = {};
   protected postProcessToRow: number = null as any;
   protected postProcessFromRow: number = null as any;
@@ -1896,19 +1896,19 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
         if (canDragScroll && e.originalEvent.pageX > this._container.clientWidth) {
           if (!(columnScrollTimer)) {
-            columnScrollTimer = setInterval(scrollColumnsRight, 100);
+            columnScrollTimer = window.setInterval(scrollColumnsRight, 100);
           }
         } else if (canDragScroll && e.originalEvent.pageX < Utils.offset(this._viewportScrollContainerX)!.left) {
           if (!(columnScrollTimer)) {
-            columnScrollTimer = setInterval(scrollColumnsLeft, 100);
+            columnScrollTimer = window.setInterval(scrollColumnsLeft, 100);
           }
         } else {
-          clearInterval(columnScrollTimer);
+          window.clearInterval(columnScrollTimer);
           columnScrollTimer = null;
         }
       },
       onEnd: (e: MouseEvent & { item: any; originalEvent: MouseEvent; }) => {
-        clearInterval(columnScrollTimer);
+        window.clearInterval(columnScrollTimer);
         columnScrollTimer = null;
 
         if (!this.getEditorLock()?.commitCurrentEdit()) {
@@ -2270,8 +2270,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
             this.updateCanvasWidth(true);
             this.render();
             this.trigger(this.onColumnsResized, { triggeredByColumn });
-            clearTimeout(this._columnResizeTimer);
-            this._columnResizeTimer = setTimeout(() => { this.columnResizeDragging = false; }, 300);
+            window.clearTimeout(this._columnResizeTimer);
+            this._columnResizeTimer = window.setTimeout(() => { this.columnResizeDragging = false; }, 300);
           }
         })
       );
@@ -2522,11 +2522,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
   /** Clear all highlight timers that might have been left opened */
   protected clearAllTimers() {
-    clearTimeout(this._columnResizeTimer);
-    clearTimeout(this._executionBlockTimer);
-    clearTimeout(this._flashCellTimer);
-    clearTimeout(this._highlightRowTimer);
-    clearTimeout(this.h_editorLoader);
+    window.clearTimeout(this._columnResizeTimer);
+    window.clearTimeout(this._executionBlockTimer);
+    window.clearTimeout(this._flashCellTimer);
+    window.clearTimeout(this._highlightRowTimer);
+    window.clearTimeout(this.h_editorLoader);
   }
 
   /**
@@ -4884,16 +4884,16 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     if (!this._options.enableAsyncPostRender) {
       return;
     }
-    clearTimeout(this.h_postrender);
-    this.h_postrender = setTimeout(this.asyncPostProcessRows.bind(this), this._options.asyncPostRenderDelay);
+    window.clearTimeout(this.h_postrender);
+    this.h_postrender = window.setTimeout(this.asyncPostProcessRows.bind(this), this._options.asyncPostRenderDelay);
   }
 
   protected startPostProcessingCleanup() {
     if (!this._options.enableAsyncPostRenderCleanup) {
       return;
     }
-    clearTimeout(this.h_postrenderCleanup);
-    this.h_postrenderCleanup = setTimeout(this.asyncPostProcessCleanupRows.bind(this), this._options.asyncPostRenderCleanupDelay);
+    window.clearTimeout(this.h_postrenderCleanup);
+    this.h_postrenderCleanup = window.setTimeout(this.asyncPostProcessCleanupRows.bind(this), this._options.asyncPostRenderCleanupDelay);
   }
 
   protected invalidatePostProcessingResults(row: number) {
@@ -5156,8 +5156,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     const blockAndExecute = () => {
       blocked = true;
-      clearTimeout(this._executionBlockTimer);
-      this._executionBlockTimer = setTimeout(unblock, minPeriod_ms);
+      window.clearTimeout(this._executionBlockTimer);
+      this._executionBlockTimer = window.setTimeout(unblock, minPeriod_ms);
       action.call(this);
     };
 
@@ -5205,7 +5205,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         }
       });
 
-      this.h_postrender = setTimeout(this.asyncPostProcessRows.bind(this), this._options.asyncPostRenderDelay);
+      this.h_postrender = window.setTimeout(this.asyncPostProcessRows.bind(this), this._options.asyncPostRenderDelay);
       return;
     }
   }
@@ -5232,7 +5232,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       // call this function again after the specified delay
-      this.h_postrenderCleanup = setTimeout(this.asyncPostProcessCleanupRows.bind(this), this._options.asyncPostRenderCleanupDelay);
+      this.h_postrenderCleanup = window.setTimeout(this.asyncPostProcessCleanupRows.bind(this), this._options.asyncPostRenderCleanupDelay);
     }
   }
 
@@ -5342,8 +5342,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         return;
       }
 
-      clearTimeout(this._flashCellTimer);
-      this._flashCellTimer = setTimeout(() => {
+      window.clearTimeout(this._flashCellTimer);
+      this._flashCellTimer = window.setTimeout(() => {
         if (times % 2 === 0) {
           cellNode.classList.add(this._options.cellFlashingCssClass || '');
         } else {
@@ -5372,8 +5372,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     if (Array.isArray(rowCache?.rowNode) && this._options.rowHighlightCssClass) {
       rowCache.rowNode.forEach(node => node.classList.add(...Utils.classNameToList(this._options.rowHighlightCssClass)));
-      clearTimeout(this._highlightRowTimer);
-      this._highlightRowTimer = setTimeout(() => {
+      window.clearTimeout(this._highlightRowTimer);
+      this._highlightRowTimer = window.setTimeout(() => {
         rowCache.rowNode?.forEach(node => node.classList.remove(...Utils.classNameToList(this._options.rowHighlightCssClass)));
       }, duration);
     }
@@ -5918,10 +5918,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       if (this._options.editable && opt_editMode && this.isCellPotentiallyEditable(this.activeRow, this.activeCell)) {
-        clearTimeout(this.h_editorLoader);
+        window.clearTimeout(this.h_editorLoader);
 
         if (this._options.asyncEditorLoading) {
-          this.h_editorLoader = setTimeout(() => {
+          this.h_editorLoader = window.setTimeout(() => {
             this.makeActiveCellEditable(undefined, preClickModeOn, e);
           }, this._options.asyncEditorLoadDelay);
         } else {
@@ -6027,7 +6027,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
 
     // cancel pending async call if there is one
-    clearTimeout(this.h_editorLoader);
+    window.clearTimeout(this.h_editorLoader);
 
     if (!this.isCellPotentiallyEditable(this.activeRow, this.activeCell)) {
       return;