feat: reimplement highlight row, node-extend & fix few issues (#275)

* feat: reimplement highlight row, node-extend & fix few issues

package.json

@@ -96,11 +96,11 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~4.0.3",
-    "@slickgrid-universal/custom-footer-component": "~4.0.3",
-    "@slickgrid-universal/empty-warning-component": "~4.0.3",
-    "@slickgrid-universal/event-pub-sub": "~4.0.2",
-    "@slickgrid-universal/pagination-component": "~4.0.3",
+    "@slickgrid-universal/common": "~4.1.0",
+    "@slickgrid-universal/custom-footer-component": "~4.1.0",
+    "@slickgrid-universal/empty-warning-component": "~4.1.0",
+    "@slickgrid-universal/event-pub-sub": "~4.1.0",
+    "@slickgrid-universal/pagination-component": "~4.1.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.6",
     "font-awesome": "^4.7.0",
@@ -115,13 +115,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~4.0.3",
-    "@slickgrid-universal/custom-tooltip-plugin": "~4.0.3",
-    "@slickgrid-universal/excel-export": "~4.0.3",
-    "@slickgrid-universal/graphql": "~4.0.3",
-    "@slickgrid-universal/odata": "~4.0.3",
-    "@slickgrid-universal/rxjs-observable": "~4.0.3",
-    "@slickgrid-universal/text-export": "~4.0.3",
+    "@slickgrid-universal/composite-editor-component": "~4.1.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~4.1.0",
+    "@slickgrid-universal/excel-export": "~4.1.0",
+    "@slickgrid-universal/graphql": "~4.1.0",
+    "@slickgrid-universal/odata": "~4.1.0",
+    "@slickgrid-universal/rxjs-observable": "~4.1.0",
+    "@slickgrid-universal/text-export": "~4.1.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -131,14 +131,14 @@
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@types/sortablejs": "^1.15.7",
     "@types/text-encoding-utf-8": "^1.0.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "@webpack-cli/serve": "^2.0.5",
     "bootstrap": "^5.3.2",
     "clean-webpack-plugin": "^4.0.0",
@@ -155,7 +155,7 @@
     "fetch-jsonp": "^1.3.0",
     "font-awesome": "^4.7.0",
     "html-loader": "4.2.0",
-    "html-webpack-plugin": "5.5.4",
+    "html-webpack-plugin": "5.6.0",
     "i18next-http-backend": "^2.4.2",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.7.0",

src/slickgrid-react/components/slickgrid-react.tsx

@@ -49,12 +49,12 @@ import {
   // utilities
   autoAddEditorFormatterToColumnsWithEditor,
   emptyElement,
-  Utils as SlickUtils,
 } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
+import { extend } from '@slickgrid-universal/utils';
 
 import { dequal } from 'dequal/lite';
 import { Constants } from '../constants';
@@ -127,7 +127,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     // if we already have grid options, when grid was already initialized, we'll merge with those options
     // else we'll merge with global grid options
     if (this.grid?.getOptions) {
-      mergedOptions = SlickUtils.extend<GridOption>(true, {} as GridOption, this.grid.getOptions() as GridOption, options as GridOption);
+      mergedOptions = extend<GridOption>(true, {} as GridOption, this.grid.getOptions() as GridOption, options as GridOption);
     } else {
       mergedOptions = this.mergeGridOptions(options);
     }
@@ -202,7 +202,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     const prevDatasetLn = this._currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, this.dataset || []);
     const isDeepCopyDataOnPageLoadEnabled = !!(this._gridOptions?.enableDeepCopyDatasetOnPageLoad);
-    let data = isDeepCopyDataOnPageLoadEnabled ? SlickUtils.extend(true, [], newDataset) : newDataset;
+    let data = isDeepCopyDataOnPageLoadEnabled ? extend(true, [], newDataset) : newDataset;
 
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (this.grid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
@@ -1371,7 +1371,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
   protected mergeGridOptions(gridOptions: GridOption): GridOption {
     // use extend to deep merge & copy to avoid immutable properties being changed in GlobalGridOptions after a route change
-    const options = SlickUtils.extend(true, {}, GlobalGridOptions, gridOptions) as GridOption;
+    const options = extend(true, {}, GlobalGridOptions, gridOptions) as GridOption;
 
     options.gridId = this.props.gridId;
     options.gridContainerId = `slickGridContainer-${this.props.gridId}`;

test/cypress/e2e/example11.cy.ts

@@ -1,4 +1,5 @@
 describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => {
+  const GRID_ROW_HEIGHT = 35;
   const fullTitles = ['', 'Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
   it('should display Example title', () => {
@@ -93,8 +94,8 @@ describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => {
   it('should scroll to top and expect certain rows on top', () => {
     cy.get('[data-test="scroll-top-btn"]').click();
 
-    cy.get('#grid11').find('.slick-row:visible:nth(0) .slick-cell:nth(1)').should('contain.text', 'Task 1001');
-    cy.get('#grid11').find('.slick-row:visible:nth(1) .slick-cell:nth(1)').should('contain.text', 'Task 1000');
-    cy.get('#grid11').find('.slick-row:visible:nth(2) .slick-cell:nth(1)').should('contain.text', 'Task 1');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1001');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 100');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
   });
 });