Merge branch 'master' into feat/internal-controls-and-plugins

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.2](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.1...v0.16.2) (2021-07-23)
+
+
+### Bug Fixes
+
+* **formatters:** Complex Object Formatter shouldn't throw with null data ([3421465](https://github.com/ghiscoding/slickgrid-universal/commit/342146557c16b560b5b8ef0f0e47f971179bc765))
+* **tree:** exclude the correct type from interface argument ([af51784](https://github.com/ghiscoding/slickgrid-universal/commit/af51784aa3471dcc88c567f4c3762ab7590184f6))
+
+
+
+
+
 ## [0.16.1](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.0...v0.16.1) (2021-07-16)
 
 

README.md

@@ -14,9 +14,9 @@ This is a monorepo project (using Lerna) which is regrouping a few packages unde
 
 ### Demo page
 The GitHub [demo page](https://ghiscoding.github.io/slickgrid-universal) uses 2 different themes (Material Design / Salesforce) but you could also use Bootstrap theme which is demoed in other frameworks.
-- [Webpack-Demo-Vanilla-Bundle](https://ghiscoding.github.io/slickgrid-universal) with Material Design theme & Salesforce themes
-- [Angular-Slickgrid](https://ghiscoding.github.io/Angular-Slickgrid/)
-- [Aurelia-Slickgrid](https://ghiscoding.github.io/aurelia-slickgrid/)
+- [Angular-Slickgrid](https://ghiscoding.github.io/Angular-Slickgrid/) - External Library
+- [Aurelia-Slickgrid](https://ghiscoding.github.io/aurelia-slickgrid/) - External Library
+- [Webpack-Demo-Vanilla-Bundle](https://ghiscoding.github.io/slickgrid-universal) - internal with Material Design theme & Salesforce themes
 
 ### Why create this monorepo?
 You might be wondering why was this monorepo created? Here are a few of the reasons:
@@ -29,8 +29,8 @@ You might be wondering why was this monorepo created? Here are a few of the reas
 
 ### Frameworks using this monorepo
   - [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) `3.x` now uses Slickgrid-Universal
-  - [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) `3.x` new major version is currently in progress
-  - [Vanilla bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) if you want to use it with plain JavaScript or TypeScript without targeting any framework.
+  - [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) `3.x` now uses Slickgrid-Universal
+  - [Vanilla bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) is to use it with plain JavaScript or TypeScript without targeting any particular framework.
 
 The Vanilla Implementation (not associated to any framework) is built with [WebPack](https://webpack.js.org/) and is also used to test all the UI functionalities [Cypress](https://www.cypress.io/) (E2E tests). This [Vanilla bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) package is also what we use in our SalesForce implementation (with Lightning Web Component), hence the creation of this monorepo library.
 
@@ -41,9 +41,9 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +13,00
 
 | Package or Lib Name | Description |
 | --------| ----------- |
-| [slickgrid-universal/webpack-demo-vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/examples/webpack-demo-vanilla-bundle) | standalone package written in plain TypeScript for demo & UI testing (**do not use in production**, this is only for testing). |
-| [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) | Angular-Slickgrid (framework) implementation |
-| [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) | Aurelia-Slickgrid (framework) implementation |
+| [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) | Angular-Slickgrid for Angular framework |
+| [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) | Aurelia-Slickgrid for Aurelia framework |
+| [slickgrid-universal/webpack-demo-vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/examples/webpack-demo-vanilla-bundle) | standalone package written in plain TypeScript for demo and UI testing (**do not use in production**, this is only for demo/testing purpose). |
 
 ### Available Public Packages
 
@@ -64,7 +64,7 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +13,00
 | [@slickgrid-universal/vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-bundle.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-bundle) | Vanilla TypeScript/ES6 implementation | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/vanilla-bundle/CHANGELOG.md) 
 
 ## Installation
-To get going with this monorepo, you will need to clone the repo and then follow the steps below
+To get going and do development with this monorepo, you will need to clone the repo and then follow the steps below
 
 1. Install npm packages with Yarn classic (`1.x` version) since this lib uses Yarn Workspaces and so you need to use Yarn to install all packages
 ```bash
@@ -98,6 +98,8 @@ yarn run dev:watch
 ```
 
 ### Tests
+You must go through Installation Steps 1-3 prior to run the unit tests OR Steps 1-4 when running E2E tests.
+
 #### Jest Unit Tests
 To run all unit tests (with Jest), you can run these commands
 ```bash

examples/webpack-demo-vanilla-bundle/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.2](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.1...v0.16.2) (2021-07-23)
+
+**Note:** Version bump only for package webpack-demo-vanilla-bundle
+
+
+
+
+
 ## [0.16.1](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.0...v0.16.1) (2021-07-16)
 
 **Note:** Version bump only for package webpack-demo-vanilla-bundle

examples/webpack-demo-vanilla-bundle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-demo-vanilla-bundle",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "private": true,
   "description": "SlickGrid-Universal demo",
   "directories": {
@@ -24,35 +24,35 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "^0.16.1",
-    "@slickgrid-universal/excel-export": "^0.16.1",
-    "@slickgrid-universal/text-export": "^0.16.1",
-    "@slickgrid-universal/vanilla-bundle": "^0.16.1",
+    "@slickgrid-universal/common": "^0.16.2",
+    "@slickgrid-universal/excel-export": "^0.16.2",
+    "@slickgrid-universal/text-export": "^0.16.2",
+    "@slickgrid-universal/vanilla-bundle": "^0.16.2",
     "bulma": "^0.9.3",
     "moment-mini": "^2.24.0",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "^16.4.0",
+    "@types/node": "^16.4.14",
     "@types/webpack": "^5.28.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "4.0.0-alpha.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.2.12",
+    "fork-ts-checker-webpack-plugin": "^6.3.2",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "5.3.2",
-    "mini-css-extract-plugin": "^2.1.0",
-    "rxjs": "^7.2.0",
-    "sass": "^1.35.2",
+    "mini-css-extract-plugin": "^2.2.0",
+    "rxjs": "^7.3.0",
+    "sass": "^1.37.5",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.2.1",
-    "ts-loader": "^9.2.3",
-    "ts-node": "^10.1.0",
+    "ts-loader": "^9.2.5",
+    "ts-node": "^10.2.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.45.1",
+    "webpack": "^5.50.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"
   }

examples/webpack-demo-vanilla-bundle/src/examples/example05.html

@@ -31,6 +31,10 @@ <h6 class="title is-6 italic">
         <span class="icon mdi mdi-arrow-collapse"></span>
         <span>Collapse All (without triggering event)</span>
       </button>
+      <button onclick.delegate="dynamicallyToggledFirstParent()" data-test="dynamically-toggle-first-parent-btn"
+              class="button is-small">
+        <span>Dynamically Toggle First Parent</span>
+      </button>
       <button onclick.delegate="reapplyToggledItems()" data-test="reapply-toggled-items-btn" class="button is-small"
               disabled.bind="hasNoExpandCollapseChanged">
         <span class="icon mdi mdi-history"></span>

examples/webpack-demo-vanilla-bundle/src/examples/example05.ts

@@ -305,6 +305,20 @@ export class Example5 {
     console.log(this.sgb.treeDataService.getToggledItems());
   }
 
+  dynamicallyToggledFirstParent() {
+    const parentPropName = 'parentId';
+    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
+    const newTreeLevel = 1;
+
+    // find first parent object and toggle it
+    const childItemFound = this.sgb.dataset.find((item) => item[treeLevelPropName] === newTreeLevel);
+    const parentItemFound = this.sgb.dataView.getItemByIdx(childItemFound[parentPropName]);
+
+    if (childItemFound && parentItemFound) {
+      this.sgb.treeDataService.dynamicallyToggleItemState([{ itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed }]);
+    }
+  }
+
   reapplyToggledItems() {
     this.sgb.treeDataService.applyToggledItemStateChanges(this.treeToggleItems);
   }

examples/webpack-demo-vanilla-bundle/webpack.config.js

@@ -52,14 +52,9 @@ module.exports = ({ production } = {}) => ({
   },
   module: {
     rules: [
-      {
-        test: /\.css$/i,
-        use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader']
-      },
+      { test: /\.css$/i, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'] },
       { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'], issuer: /\.[tj]s$/i },
       { test: /\.(sass|scss)$/, use: ['css-loader', 'sass-loader'], issuer: /\.html?$/i },
-      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', type: 'asset/resource', options: { limit: 8192 } },
-      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, type: 'asset/resource' },
       { test: /\.html$/i, loader: 'html-loader', options: { esModule: false } },
       { test: /\.ts?$/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }
     ],

lerna.json

@@ -4,7 +4,7 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "0.16.1",
+  "version": "0.16.2",
   "command": {
     "publish": {
       "conventionalCommits": true

package.json

@@ -50,25 +50,25 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "cypress": "^8.0.0",
-    "eslint": "^7.31.0",
-    "eslint-plugin-import": "^2.23.4",
+    "@types/jest": "^27.0.0",
+    "@types/node": "^16.4.14",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "cypress": "^8.2.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-environment-jsdom": "^27.0.6",
     "jest-extended": "^0.11.5",
-    "jsdom": "^16.6.0",
+    "jsdom": "^16.7.0",
     "jsdom-global": "^3.0.2",
     "lerna": "^3.22.1",
-    "mocha": "^9.0.2",
+    "mocha": "^9.0.3",
     "mochawesome": "^6.2.2",
     "npm-run-all": "^4.1.5",
-    "rxjs": "^7.2.0",
+    "rxjs": "^7.3.0",
     "serve": "^12.0.0",
     "ts-jest": "^27.0.4",
     "typescript": "^4.3.5"

packages/common/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.2](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.1...v0.16.2) (2021-07-23)
+
+
+### Bug Fixes
+
+* **formatters:** Complex Object Formatter shouldn't throw with null data ([3421465](https://github.com/ghiscoding/slickgrid-universal/commit/342146557c16b560b5b8ef0f0e47f971179bc765))
+* **tree:** exclude the correct type from interface argument ([af51784](https://github.com/ghiscoding/slickgrid-universal/commit/af51784aa3471dcc88c567f4c3762ab7590184f6))
+
+
+
+
+
 ## [0.16.1](https://github.com/ghiscoding/slickgrid-universal/compare/v0.16.0...v0.16.1) (2021-07-16)
 
 

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slickgrid-universal/common",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "SlickGrid-Universal Common Code",
   "main": "dist/commonjs/index.js",
   "browser": "src/index.ts",
@@ -80,16 +80,16 @@
     "autoprefixer": "^10.3.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "mini-css-extract-plugin": "^2.1.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "nodemon": "^2.0.12",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.5",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.35.2"
+    "sass": "^1.37.5"
   },
   "engines": {
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
   }
-}
+}

packages/common/src/filter-conditions/__tests__/filterUtilities.spec.ts

@@ -188,8 +188,11 @@ describe('filterUtilities', () => {
     });
 
     it('should return True when value1 is "IN_CONTAINS" value2 collection even if there is extra spaces in the string', () => {
-      const output = testFilterCondition('IN_CONTAINS', 'Task2,  Task3 ', ['Task2', 'Task3']);
-      expect(output).toBeTruthy();
+      const output1 = testFilterCondition('IN_CONTAINS', 'Task2,  Task3 , Task4', ['Task3']);
+      const output2 = testFilterCondition('IN_CONTAINS', 'Task2,  Task3 , Task4', ['Task4']);
+
+      expect(output1).toBeTruthy();
+      expect(output2).toBeTruthy();
     });
 
     it('should return False when value1 is not "IN_CONTAINS" value2 collection', () => {

packages/common/src/filter-conditions/filterUtilities.ts

@@ -75,13 +75,13 @@ export const testFilterCondition = (operator: OperatorString, value1: any, value
       return ((value2 && Array.isArray(value2 as string[])) ? (!value2.includes(value1)) : false);
     case 'IN_CONTAINS':
       if (value2 && Array.isArray(value2) && typeof value1 === 'string') {
-        return value2.some(item => value1.split(/[\s,]+/).map(val => (val.trim())).includes(item));
+        return value2.some(item => value1.split(/[,]+/).map(val => (val.trim())).includes(item));
       }
       return false;
     case 'NIN_CONTAINS':
     case 'NOT_IN_CONTAINS':
       if (value2 && Array.isArray(value2) && typeof value1 === 'string') {
-        return !value2.some(item => value1.split(/[\s,]+/).map(val => (val.trim())).includes(item));
+        return !value2.some(item => value1.split(/[,]+/).map(val => (val.trim())).includes(item));
       }
       return false;
     case 'IN_COLLECTION':

packages/common/src/formatters/arrayObjectToCsvFormatter.ts

@@ -9,6 +9,7 @@ import { Formatter } from './../interfaces/index';
 export const arrayObjectToCsvFormatter: Formatter = (_row, _cell, value, columnDef, dataContext) => {
   const columnParams = columnDef && columnDef.params || {};
   const propertyNames = columnParams.propertyNames;
+  const isIncludingTitle = columnParams?.includeTitle ?? true;
   let parentObjectKeyName: string = columnParams.dataContextProperty;
   if (!parentObjectKeyName) {
     parentObjectKeyName = columnDef && columnDef.field && columnDef.field.split('.')[0]; // e.g. "users.roles" would be "users"
@@ -39,7 +40,7 @@ export const arrayObjectToCsvFormatter: Formatter = (_row, _cell, value, columnD
 
       // finally join all the output strings by CSV (e.g.: 'John Doe, Jane Doe')
       const output = outputStrings.join(', ');
-      return `<span title="${output}">${output}</span>`;
+      return isIncludingTitle ? `<span title="${output}">${output}</span>` : output;
     }
   }
   return value;

packages/common/src/interfaces/slickGrid.interface.ts

@@ -234,7 +234,7 @@ export interface SlickGrid {
   getPreHeaderPanelRight(): HTMLElement;
 
   /** Get rendered range */
-  getRenderedRange(viewportTop: number, viewportLeft: number): { top: number; bottom: number; leftPx: number; rightPx: number; };
+  getRenderedRange(viewportTop?: number, viewportLeft?: number): { top: number; bottom: number; leftPx: number; rightPx: number; };
 
   /** Get scrollbar dimensions */
   getScrollbarDimensions(): { height: number; width: number; };

packages/common/src/services/__tests__/resizer.service.spec.ts

@@ -31,6 +31,7 @@ const mockDataView = {
   init: jest.fn(),
   destroy: jest.fn(),
   getItemMetadata: jest.fn(),
+  getItemCount: jest.fn(),
   getItems: jest.fn(),
 };
 
@@ -40,6 +41,7 @@ const gridStub = {
   getColumnIndex: jest.fn(),
   getColumns: jest.fn(),
   getOptions: jest.fn(),
+  getRenderedRange: jest.fn(),
   getViewports: jest.fn(),
   getData: () => mockDataView,
   getUID: () => GRID_UID,
@@ -636,6 +638,38 @@ describe('Resizer Service', () => {
         }, 15);
       });
 
+      it('should try to resize grid when its UI is deemed broken by the 2nd condition check of "getRenderedRange"', (done) => {
+        const resizeSpy = jest.spyOn(service, 'resizeGrid').mockReturnValue(Promise.resolve({ height: 150, width: 350 }));
+        Object.defineProperty(document.querySelector(`.${GRID_UID}`), 'offsetParent', { writable: true, configurable: true, value: 55 });
+        jest.spyOn(mockDataView, 'getItemCount').mockReturnValue(99);
+        jest.spyOn(gridStub, 'getRenderedRange').mockReturnValue({ top: 0, bottom: 0, leftPx: 0, rightPx: 0 });
+
+        mockGridOptions.autoFixResizeTimeout = 10;
+        mockGridOptions.autoFixResizeRequiredGoodCount = 5;
+        mockGridOptions.autoFixResizeWhenBrokenStyleDetected = true;
+        service.intervalRetryDelay = 1;
+
+        const divHeaderElm = divContainer.querySelector('.slick-header') as HTMLDivElement;
+        const divViewportElm = divContainer.querySelector('.slick-viewport') as HTMLDivElement;
+        jest.spyOn(divContainer, 'getBoundingClientRect').mockReturnValue({ top: 10, left: 20 } as unknown as DOMRect);
+        jest.spyOn(divHeaderElm, 'getBoundingClientRect').mockReturnValue({ top: 5, left: 25 } as unknown as DOMRect);
+        jest.spyOn(divViewportElm, 'getBoundingClientRect').mockReturnValue({ top: 98, left: 25 } as unknown as DOMRect);
+        divHeaderElm.style.top = '5px';
+        divHeaderElm.style.left = '25px';
+        divContainer.style.top = '10px';
+        divContainer.style.left = '20px';
+        service.init(gridStub, divContainer);
+
+        setTimeout(() => {
+          expect(divContainer.outerHTML).toBeTruthy();
+          expect(resizeSpy).toHaveBeenCalled();
+          expect(resizeSpy).toHaveBeenNthCalledWith(2);
+          expect(resizeSpy).toHaveBeenNthCalledWith(3);
+          done();
+          service.requestStopOfAutoFixResizeGrid();
+        }, 20);
+      });
+
       it('should try to resize grid when its UI is deemed broken but expect an error shown in the console when "resizeGrid" throws an error', (done) => {
         const consoleSpy = jest.spyOn(global.console, 'log').mockReturnValue();
         const promise = new Promise((_resolve, reject) => setTimeout(() => reject('some error'), 0));