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

package.json

@@ -48,7 +48,7 @@
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^3.8.0",
     "@lerna-lite/publish": "^3.8.0",
-    "@slickgrid-universal/common": "^5.5.1",
+    "@slickgrid-universal/common": "^5.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.4.0",
     "conventional-changelog-conventionalcommits": "^7.0.2",

packages/aurelia-slickgrid/package.json

@@ -53,12 +53,12 @@
     "@aurelia/runtime": "^2.0.0-beta.21",
     "@aurelia/runtime-html": "^2.0.0-beta.21",
     "@formkit/tempo": "^0.1.2",
-    "@slickgrid-universal/common": "~5.5.1",
-    "@slickgrid-universal/custom-footer-component": "~5.5.1",
-    "@slickgrid-universal/empty-warning-component": "~5.5.1",
-    "@slickgrid-universal/event-pub-sub": "~5.5.1",
-    "@slickgrid-universal/pagination-component": "~5.5.1",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.5.1",
+    "@slickgrid-universal/common": "~5.5.2",
+    "@slickgrid-universal/custom-footer-component": "~5.5.2",
+    "@slickgrid-universal/empty-warning-component": "~5.5.2",
+    "@slickgrid-universal/event-pub-sub": "~5.5.2",
+    "@slickgrid-universal/pagination-component": "~5.5.2",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.5.2",
     "@slickgrid-universal/utils": "~5.5.1",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.2"

packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts

@@ -208,8 +208,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           // on filter changed, we need to re-render all Views
           this._subscriptions.push(
             this.eventPubSubService?.subscribe('onFilterChanged', this.redrawAllViewSlots.bind(this)),
-            this.eventPubSubService?.subscribe('onGridMenuClearAllFilters', () => setTimeout(() => this.redrawAllViewSlots())),
-            this.eventPubSubService?.subscribe('onGridMenuClearAllSorting', () => setTimeout(() => this.redrawAllViewSlots())),
+            this.eventPubSubService?.subscribe('onGridMenuClearAllFilters', () => window.setTimeout(() => this.redrawAllViewSlots())),
+            this.eventPubSubService?.subscribe('onGridMenuClearAllSorting', () => window.setTimeout(() => this.redrawAllViewSlots())),
           );
         }
       }

packages/demo/package.json

@@ -43,19 +43,19 @@
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^5.5.1",
-    "@slickgrid-universal/composite-editor-component": "^5.5.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.5.1",
-    "@slickgrid-universal/excel-export": "^5.5.1",
-    "@slickgrid-universal/graphql": "^5.5.1",
-    "@slickgrid-universal/odata": "^5.5.1",
-    "@slickgrid-universal/row-detail-view-plugin": "^5.5.1",
-    "@slickgrid-universal/rxjs-observable": "^5.5.1",
-    "@slickgrid-universal/text-export": "^5.5.1",
+    "@slickgrid-universal/common": "^5.5.2",
+    "@slickgrid-universal/composite-editor-component": "^5.5.2",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.5.2",
+    "@slickgrid-universal/excel-export": "^5.5.2",
+    "@slickgrid-universal/graphql": "^5.5.2",
+    "@slickgrid-universal/odata": "^5.5.2",
+    "@slickgrid-universal/row-detail-view-plugin": "^5.5.2",
+    "@slickgrid-universal/rxjs-observable": "^5.5.2",
+    "@slickgrid-universal/text-export": "^5.5.2",
     "aurelia": "^2.0.0-beta.21",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",
-    "i18next": "^23.12.2",
+    "i18next": "^23.13.0",
     "i18next-fetch-backend": "^6.0.0",
     "rxjs": "^7.8.1"
   },

packages/demo/src/examples/slickgrid/custom-aureliaViewModelEditor.ts

@@ -147,7 +147,7 @@ export class CustomAureliaViewModelEditor implements Editor {
     this.defaultItem = itemObject;
 
     // add a delay so that the editor has time to be enhanced (created) prior to changing the value
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.focus();
       if (this.elmBindingContext) {
         this.elmBindingContext.selectedItem = itemObject;

packages/demo/src/examples/slickgrid/custom-inputEditor.ts

@@ -44,7 +44,7 @@ export class CustomInputEditor implements Editor {
 
     this.inputElm.addEventListener('keydown', this.handleKeydown.bind(this));
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.inputElm.focus();
       this.inputElm.select();
     }, 50);

packages/demo/src/examples/slickgrid/example15.ts

@@ -70,7 +70,7 @@ export class Example15 {
   clearGridStateFromLocalStorage() {
     this.aureliaGrid.gridService.resetGrid(this.columnDefinitions);
     this.aureliaGrid.paginationService!.changeItemPerPage(DEFAULT_PAGE_SIZE);
-    setTimeout(() => localStorage[LOCAL_STORAGE_KEY] = null);
+    window.setTimeout(() => localStorage[LOCAL_STORAGE_KEY] = null);
   }
 
   /* Define grid Options and Columns */

packages/demo/src/examples/slickgrid/example17.ts

@@ -81,7 +81,7 @@ export class Example17 {
     // this.gridObj.setSortColumn('score', false);
 
     // simulate a delayed search to preload the first page
-    setTimeout(() => this.searchChanged(this.search), 100);
+    window.setTimeout(() => this.searchChanged(this.search), 100);
   }
 
   defineGrid() {

packages/demo/src/examples/slickgrid/example19.ts

@@ -216,7 +216,7 @@ export class Example19 {
 
     // fill the template on async delay
     return new Promise((resolve) => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         const itemDetail = item;
 
         // let's add some extra properties to our item for a better async simulation

packages/demo/src/examples/slickgrid/example2.ts

@@ -167,7 +167,7 @@ export class Example2 {
       item.completed = !item.completed;
 
       // simulate a backend http call and refresh the grid row after delay
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.aureliaGrid.gridService.updateItemById(item.id, item, { highlightRow: false });
       }, 250);
     }

packages/demo/src/examples/slickgrid/example23.ts

@@ -234,7 +234,7 @@ export class Example23 {
 
   refreshMetrics(_e: Event, args: any) {
     if (args && args.current >= 0) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.metrics = {
           startTime: new Date(),
           itemCount: args && args.current || 0,

packages/demo/src/examples/slickgrid/example27.ts

@@ -226,7 +226,7 @@ export class Example27 {
   }
 
   hideSpinner() {
-    setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
+    window.setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
   }
 
   showSpinner() {

packages/demo/src/examples/slickgrid/example28.ts

@@ -273,7 +273,7 @@ export class Example28 {
       this.datasetHierarchical = tmpDatasetHierarchical;
 
       // scroll into the position, after insertion cycle, where the item was added
-      setTimeout(() => {
+      window.setTimeout(() => {
         const rowIndex = this.aureliaGrid.dataView.getRowById(popFolderItem.id) as number;
         this.aureliaGrid.slickGrid.scrollRowIntoView(rowIndex + 3);
       }, 10);

packages/demo/src/examples/slickgrid/example3.ts

@@ -376,7 +376,7 @@ export class Example3 {
 
           // OR 3- use a Promise
           // collectionAsync: new Promise<any>((resolve) => {
-          //   setTimeout(() => {
+          //   window.setTimeout(() => {
           //     resolve(Array.from(Array(NB_ITEMS).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
           //   }, 500);
           // }),
@@ -401,7 +401,7 @@ export class Example3 {
         filter: {
           collectionAsync: this.http.fetch(URL_SAMPLE_COLLECTION_DATA),
           // collectionAsync: new Promise((resolve) => {
-          //   setTimeout(() => {
+          //   window.setTimeout(() => {
           //     resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
           //   });
           // }),
@@ -452,7 +452,7 @@ export class Example3 {
     const newRows = this.mockData(1, lastRowIndex);
 
     // wrap into a timer to simulate a backend async call
-    setTimeout(() => {
+    window.setTimeout(() => {
       // at any time, we can poke the "collection" property and modify it
       const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
       if (requisiteColumnDef) {

packages/demo/src/examples/slickgrid/example30.ts

@@ -649,7 +649,7 @@ export class Example30 {
         // when processing a mass update or mass selection
         if (modalType === 'mass-update' || modalType === 'mass-selection') {
           return new Promise((resolve, reject) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               if (formValues.percentComplete >= 50) {
                 resolve(true);
               } else {
@@ -662,7 +662,7 @@ export class Example30 {
           // we'll just apply the change without any rejection from the server and
           // note that we also have access to the "dataContext" which is only available for these modal
           console.log(`${modalType} item data context`, dataContext);
-          return new Promise(resolve => setTimeout(() => resolve(true), serverResponseDelay));
+          return new Promise(resolve => window.setTimeout(() => resolve(true), serverResponseDelay));
         }
       }
     });

packages/demo/src/examples/slickgrid/example31.ts

@@ -330,7 +330,7 @@ export class Example31 {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top!);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             if (!this.isCountEnabled) {
               backendResult['totalRecordCount'] = countTotalItems;

packages/demo/src/examples/slickgrid/example33.ts

@@ -78,7 +78,7 @@ export class Example33 {
           // 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><span class="mdi mdi-load mdi-spin"></span> loading...</div>`,
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
+            window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
           }),
           asyncPostFormatter: this.tooltipTaskAsyncFormatter as Formatter,
 
@@ -182,7 +182,7 @@ export class Example33 {
 
           // 2- delay the opening by a simple Promise and `setTimeout`
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
+            window.setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
           }),
           asyncPostFormatter: this.tooltipFormatter.bind(this) as Formatter,
         },
@@ -240,7 +240,7 @@ export class Example33 {
 
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
@@ -257,7 +257,7 @@ export class Example33 {
         filter: {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),

packages/demo/src/examples/slickgrid/example34.ts

@@ -97,7 +97,7 @@ export class Example34 {
   minChangePerCycle = 0;
   maxChangePerCycle = 10;
   refreshRate = 75;
-  timer: any;
+  timer: number;
 
   constructor() {
     // define the grid options & columns and then create the grid itself
@@ -107,7 +107,7 @@ export class Example34 {
   attached() {
     // populate the dataset once the grid is ready
     this.getData();
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.startSimulation();
     }, this.refreshRate);
   }
@@ -304,11 +304,11 @@ export class Example34 {
       // but the cell highlight actually does that for us so we can skip it
     }
 
-    this.timer = setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
+    this.timer = window.setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
   }
 
   stopSimulation() {
-    clearTimeout(this.timer);
+    window.clearTimeout(this.timer);
   }
 
   findColumnById(columnName: string): Column {
@@ -323,7 +323,7 @@ export class Example34 {
         this.aureliaGrid.slickGrid.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
 
         // remove highlight after x amount of time
-        setTimeout(() => this.removeUnsavedStylingFromCell(item, column, row), this.highlightDuration);
+        window.setTimeout(() => this.removeUnsavedStylingFromCell(item, column, row), this.highlightDuration);
       }
     }
   }

packages/demo/src/examples/slickgrid/example35.ts

@@ -248,7 +248,7 @@ export class Example35 {
 
 function fakeFetch(_input: string | URL | Request, _init?: RequestInit | undefined): Promise<Response> {
   return new Promise((resolve) => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       resolve(new Response(JSON.stringify({ status: 200, message: 'success' })));
       // reduces the delay for automated Cypress tests
     }, (window as any).Cypress ? 10 : 500);

packages/demo/src/examples/slickgrid/example38.ts

@@ -336,7 +336,7 @@ export class Example38 {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             backendResult['value'] = updatedData;
             backendResult['@odata.count'] = countTotalItems;

packages/demo/src/examples/slickgrid/example39.ts

@@ -299,7 +299,7 @@ export class Example39 {
             },
           };
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
             resolve(mockedResult);
           }, this.serverWaitDelay);

packages/demo/src/examples/slickgrid/example4.ts

@@ -291,7 +291,7 @@ export class Example4 {
 
   refreshMetrics(_e: Event, args: any) {
     if (args && args.current >= 0) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.metrics = {
           startTime: new Date(),
           endTime: new Date(),

packages/demo/src/examples/slickgrid/example5.ts

@@ -373,7 +373,7 @@ export class Example5 {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top!);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             if (!this.isCountEnabled) {
               backendResult['totalRecordCount'] = countTotalItems;

packages/demo/src/examples/slickgrid/example6.ts

@@ -294,7 +294,7 @@ export class Example6 {
     };
 
     return new Promise(resolve => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.graphqlQuery = this.graphqlService.buildQuery();
         // this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
         if (this.isWithCursor) {
@@ -368,7 +368,7 @@ export class Example6 {
       { columnId: 'name', direction: 'asc' },
       { columnId: 'company', direction: SortDirection.DESC }
     ]);
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.aureliaGrid.paginationService?.changeItemPerPage(20);
       this.aureliaGrid.paginationService?.goToPageNumber(2);
     });

packages/demo/src/my-app.ts

@@ -54,7 +54,7 @@ export class MyApp {
     this.addGitHubStarsLogo();
 
     // scroll to active link route, there's probably a better way to do this but couldn't find lifecycle for it
-    setTimeout(() => {
+    window.setTimeout(() => {
       const linkElm = document.querySelector('.nav-link.active');
       if (linkElm) {
         linkElm.scrollIntoView({ block: 'nearest' });