BREAKING CHANGE: migrate to Slickgrid-Universal v4.0 new major version

package.json

@@ -91,15 +91,15 @@
     ]
   },
   "dependencies": {
-    "@slickgrid-universal/common": "~3.7.2",
-    "@slickgrid-universal/custom-footer-component": "~3.7.2",
-    "@slickgrid-universal/empty-warning-component": "~3.7.2",
-    "@slickgrid-universal/event-pub-sub": "~3.7.0",
-    "@slickgrid-universal/pagination-component": "~3.7.2",
+    "@slickgrid-universal/common": "~4.0.2",
+    "@slickgrid-universal/custom-footer-component": "~4.0.2",
+    "@slickgrid-universal/empty-warning-component": "~4.0.2",
+    "@slickgrid-universal/event-pub-sub": "~4.0.2",
+    "@slickgrid-universal/pagination-component": "~4.0.2",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.6",
     "font-awesome": "^4.7.0",
-    "i18next": ">=22.5.0",
+    "i18next": "^23.7.9",
     "moment-mini": "^2.29.4",
     "regenerator-runtime": "^0.14.0",
     "sortablejs": "^1.15.1"
@@ -110,13 +110,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~3.7.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~3.7.2",
-    "@slickgrid-universal/excel-export": "~3.7.2",
-    "@slickgrid-universal/graphql": "~3.7.2",
-    "@slickgrid-universal/odata": "~3.7.2",
-    "@slickgrid-universal/rxjs-observable": "~3.7.2",
-    "@slickgrid-universal/text-export": "~3.7.2",
+    "@slickgrid-universal/composite-editor-component": "~4.0.2",
+    "@slickgrid-universal/custom-tooltip-plugin": "~4.0.2",
+    "@slickgrid-universal/excel-export": "~4.0.2",
+    "@slickgrid-universal/graphql": "~4.0.2",
+    "@slickgrid-universal/odata": "~4.0.2",
+    "@slickgrid-universal/rxjs-observable": "~4.0.2",
+    "@slickgrid-universal/text-export": "~4.0.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -127,13 +127,13 @@
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.4",
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.2.44",
     "@types/react-dom": "^18.2.17",
     "@types/sortablejs": "^1.15.7",
     "@types/text-encoding-utf-8": "^1.0.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "@webpack-cli/serve": "^2.0.5",
     "bootstrap": "^5.3.2",
     "clean-webpack-plugin": "^4.0.0",
@@ -164,7 +164,7 @@
     "promise-polyfill": "^8.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^13.5.0",
     "react-router-dom": "^6.20.1",
     "release-it": "^17.0.1",
     "rimraf": "^5.0.5",
@@ -175,7 +175,7 @@
     "style-loader": "3.3.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"

src/examples/slickgrid/Example11.tsx

@@ -74,7 +74,8 @@ export default class Example11 extends React.Component {
         id: 'delete',
         field: 'id',
         excludeFromHeaderMenu: true,
-        formatter: Formatters.deleteIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-trash pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below

src/examples/slickgrid/Example16.tsx

@@ -156,7 +156,7 @@ export default class Example16 extends React.Component<Props, State> {
     return mockDataset;
   }
 
-  onBeforeMoveRow(e: Event, data: { rows: number[]; insertBefore: number; }) {
+  onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number; }) {
     for (const rowIdx of data.rows) {
       // no point in moving before or after itself
       if (rowIdx === data.insertBefore || (rowIdx === data.insertBefore - 1 && ((data.insertBefore - 1) !== this.reactGrid.dataView.getItemCount()))) {
@@ -167,7 +167,7 @@ export default class Example16 extends React.Component<Props, State> {
     return true;
   }
 
-  onMoveRows(_e: Event, args: any) {
+  onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
     // rows and insertBefore references,
     // note that these references are assuming that the dataset isn't filtered at all
     // which is not always the case so we will recalcualte them and we won't use these reference afterward
@@ -255,7 +255,8 @@ export default class Example16 extends React.Component<Props, State> {
           excludeFromColumnPicker: true,
           excludeFromGridMenu: true,
           excludeFromHeaderMenu: true,
-          formatter: Formatters.editIcon,
+          formatter: Formatters.icon,
+          params: { iconCssClass: 'fa fa-pencil pointer' },
           minWidth: 30,
           maxWidth: 30,
           onCellClick: (clickEvent: Event, args: OnEventArgs) => {
@@ -267,7 +268,8 @@ export default class Example16 extends React.Component<Props, State> {
           excludeFromColumnPicker: true,
           excludeFromGridMenu: true,
           excludeFromHeaderMenu: true,
-          formatter: Formatters.deleteIcon,
+          formatter: Formatters.icon,
+          params: { iconCssClass: 'fa fa-trash pointer' },
           minWidth: 30,
           maxWidth: 30,
           onCellClick: (e: Event, args: OnEventArgs) => {

src/examples/slickgrid/Example17.tsx

@@ -7,16 +7,13 @@ import {
   Column,
   Formatter,
   GridOption,
-  SlickNamespace,
+  SlickEventHandler,
   SlickgridReact
 } from '../../slickgrid-react';
 import React from 'react';
 
 interface Props { }
 
-declare const Slick: SlickNamespace;
-// declare const Slick: any;
-
 const brandFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => {
   return dataContext && dataContext.brand && dataContext.brand.name || '';
 };
@@ -31,7 +28,7 @@ const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) =
 
 export default class Example17 extends React.Component {
   search = '';
-  private _eventHandler: any = new Slick.EventHandler();
+  private _eventHandler = new SlickEventHandler();
 
   title = 'Example 17: Octopart Catalog Search - Remote Model Plugin';
   subTitle = `
@@ -66,8 +63,8 @@ export default class Example17 extends React.Component {
     super(props);
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
-    this.loaderDataView = new Slick.Data.RemoteModel!();
-    this.customDataView = this.loaderDataView && this.loaderDataView.data;
+    // this.loaderDataView = new Slick.Data.RemoteModel!();
+    // this.customDataView = this.loaderDataView && this.loaderDataView.data;
   }
 
   componentDidMount() {

src/examples/slickgrid/Example18.tsx

@@ -543,7 +543,7 @@ export default class Example18 extends React.Component<Props, State> {
                           <option value="''">...</option>
                           {
                             this.state.columnDefinitions.map((column) =>
-                              <option value={column.id} key={column.id}>{column.name}</option>
+                              <option value={column.id} key={column.id}>{column.name as string}</option>
                             )
                           }
                         </select>

src/examples/slickgrid/Example20.tsx

@@ -9,16 +9,13 @@ import {
   Formatters,
   GridOption,
   SlickGrid,
-  SlickNamespace,
+  SlickEventHandler,
   SlickgridReact,
-  DOMEvent
 } from '../../slickgrid-react';
 import React from 'react';
 import './example20.scss'; // provide custom CSS/SASS styling
 import BaseSlickGridState from './state-slick-grid-base';
 
-declare const Slick: SlickNamespace;
-
 interface Props { }
 interface State extends BaseSlickGridState {
   frozenColumnCount: number;
@@ -44,7 +41,7 @@ export default class Example20 extends React.Component<Props, State> {
 
   constructor(public readonly props: Props) {
     super(props);
-    this.slickEventHandler = new Slick.EventHandler();
+    this.slickEventHandler = new SlickEventHandler();
 
     this.state = {
       gridOptions: undefined,

src/examples/slickgrid/Example21.tsx

@@ -227,7 +227,7 @@ export default class Example21 extends React.Component<Props, State> {
               <option value="''">...</option>
               {
                 this.state.columnDefinitions.map((column) =>
-                  <option value={column.id} key={column.id}>{column.name}</option>
+                  <option value={column.id} key={column.id}>{column.name as string}</option>
                 )
               }
             </select>

src/examples/slickgrid/Example28.tsx

@@ -12,6 +12,7 @@ import {
   isNumber,
   // GroupTotalFormatters,
   // italicFormatter,
+  SlickDataView,
   SlickgridReact,
   SlickgridReactInstance,
   TreeToggledItem,
@@ -257,7 +258,7 @@ export default class Example28 extends React.Component<Props, State> {
     if (value === null || value === undefined || dataContext === undefined) {
       return '';
     }
-    const dataView = grid.getData();
+    const dataView = grid.getData<SlickDataView>();
     const data = dataView.getItems();
     const identifierPropName = dataView.getIdPropertyName() || 'id';
     const idx = dataView.getIdxById(dataContext[identifierPropName]) as number;

src/examples/slickgrid/Example3.tsx

@@ -15,18 +15,15 @@ import {
   Formatters,
   OnEventArgs,
   OperatorType,
-  SlickNamespace,
   SortComparers,
+  SlickGlobalEditorLock,
   SlickgridReact,
   GridOption,
 } from '../../slickgrid-react';
 import { CustomInputEditor } from './custom-inputEditor';
 import { CustomInputFilter } from './custom-inputFilter';
 import BaseSlickGridState from './state-slick-grid-base';
 
-// using external non-typed js libraries
-declare const Slick: SlickNamespace;
-
 interface Props { }
 
 const NB_ITEMS = 100;
@@ -132,7 +129,8 @@ export default class Example3 extends React.Component<Props, State> {
         excludeFromColumnPicker: true,
         excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
-        formatter: Formatters.editIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-pencil pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below
@@ -154,7 +152,8 @@ export default class Example3 extends React.Component<Props, State> {
         excludeFromColumnPicker: true,
         excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
-        formatter: Formatters.deleteIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-trash pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below
@@ -749,7 +748,7 @@ export default class Example3 extends React.Component<Props, State> {
 
   undo() {
     const command = this._commandQueue.pop();
-    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (command && SlickGlobalEditorLock.cancelCurrentEdit()) {
       command.undo();
       this.reactGrid.slickGrid.gotoCell(command.row, command.cell, false);
     }

src/examples/slickgrid/Example30.tsx

@@ -1,8 +1,8 @@
-import { SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
+import React from 'react';
 
 import {
-  SlickgridReactInstance,
   AutocompleterOption,
   Column,
   CompositeEditorModalType,
@@ -18,21 +18,18 @@ import {
   GridStateChange,
   LongTextEditorOption,
   OnCompositeEditorChangeEventArgs,
+  SlickGlobalEditorLock,
+  SlickgridReactInstance,
   SlickGrid,
-  SlickNamespace,
-  SortComparers,
   SlickgridReact,
+  SortComparers,
 } from '../../slickgrid-react';
-import React from 'react';
 import './example30.scss'; // provide custom CSS/SASS styling
 import BaseSlickGridState from './state-slick-grid-base';
 
 const NB_ITEMS = 500;
 const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
 
-// using external SlickGrid JS libraries
-declare const Slick: SlickNamespace;
-
 /**
  * Check if the current item (cell) is editable or not
  * @param {*} dataContext - item data context object
@@ -41,12 +38,12 @@ declare const Slick: SlickNamespace;
  * @returns {boolean} isEditable
  */
 function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGrid) {
-  const gridOptions = grid && grid.getOptions && grid.getOptions();
+  const gridOptions = grid?.getOptions();
   const hasEditor = columnDef.editor;
   const isGridEditable = gridOptions.editable;
-  let isEditable = !!(isGridEditable && hasEditor);
+  let isEditable = Boolean(isGridEditable && hasEditor);
 
-  if (dataContext && columnDef && gridOptions && gridOptions.editable) {
+  if (dataContext && columnDef && gridOptions?.editable) {
     switch (columnDef.id) {
       case 'finish':
         // case 'percentComplete':
@@ -64,7 +61,6 @@ function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGri
   return isEditable;
 }
 
-
 const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => {
   const gridOptions = grid && grid.getOptions && grid.getOptions();
   const isEditableLine = gridOptions.editable && columnDef.editor;
@@ -262,7 +258,7 @@ export default class Example30 extends React.Component<Props, State> {
           } as FlatpickrOption,
           massUpdate: true,
           validator: (value, args) => {
-            const dataContext = args && args.item;
+            const dataContext = args?.item;
             if (dataContext && (dataContext.completed && !value)) {
               return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' };
             }
@@ -509,7 +505,7 @@ export default class Example30 extends React.Component<Props, State> {
   handleValidationError(_e: Event, args: any) {
     if (args.validationResults) {
       let errorMsg = args.validationResults.msg || '';
-      if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
+      if (args?.editor instanceof SlickCompositeEditor) {
         if (args.validationResults.errors) {
           errorMsg += '\n';
           for (const error of args.validationResults.errors) {
@@ -746,7 +742,7 @@ export default class Example30 extends React.Component<Props, State> {
   undoLastEdit(showLastEditor = false) {
     const lastEdit = this.editQueue.pop();
     const lastEditCommand = lastEdit?.editCommand;
-    if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (lastEdit && lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
       lastEditCommand.undo();
 
       // remove unsaved css class from that cell
@@ -766,7 +762,7 @@ export default class Example30 extends React.Component<Props, State> {
   undoAllEdits() {
     for (const lastEdit of this.editQueue) {
       const lastEditCommand = lastEdit?.editCommand;
-      if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      if (lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
         lastEditCommand.undo();
 
         // remove unsaved css class from that cell