From 3b8fec6e890fc0b8dc9754495c1022d898740b3e Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Mon, 27 Jul 2020 15:55:24 -0400
Subject: [PATCH] feat(examples): add new sample to showcase queued editing
 (#28)

* feat(examples): add new sample to showcase queued editing
---
 .github/ISSUE_TEMPLATE/bug_report.md          |  10 +-
 .vscode/launch.json                           |   5 +-
 README.md                                     |   5 +-
 .../webpack-demo-vanilla-bundle/package.json  |  10 +-
 .../src/app-routing.ts                        |   1 +
 .../webpack-demo-vanilla-bundle/src/app.html  |   7 +-
 .../src/examples/example02.ts                 |   3 +-
 .../src/examples/example03.html               |   7 +-
 .../src/examples/example03.ts                 |  51 +-
 .../src/examples/example05.ts                 |   2 -
 .../src/examples/example06.ts                 |   1 -
 .../src/examples/example09.ts                 |   2 +-
 .../src/examples/example10.ts                 |   1 -
 .../src/examples/example11.html               |  34 ++
 .../src/examples/example11.scss               |   4 +
 .../src/examples/example11.ts                 | 381 +++++++++++++++
 package.json                                  |  14 +-
 packages/common/package.json                  |   2 +-
 packages/common/src/editors/dateEditor.ts     |   2 +-
 .../common/src/enums/slickControlList.enum.ts |   2 +-
 .../common/src/enums/slickPluginList.enum.ts  |   2 +-
 .../groupItemMetaProviderExtension.spec.ts    |   2 +-
 .../extensions/draggableGroupingExtension.ts  |   2 +-
 packages/common/src/interfaces/index.ts       |   1 -
 .../__tests__/extension.service.spec.ts       |   3 +-
 packages/common/src/styles/extra-styling.scss |  14 +-
 .../common/src/styles/material-svg-icons.scss |  84 ++++
 .../common/src/styles/slick-bootstrap.scss    |   4 +-
 packages/common/src/styles/slick-plugins.scss |  15 +-
 .../styles/slickgrid-theme-salesforce.scss    |  30 +-
 packages/vanilla-bundle/package.json          |  13 +-
 .../slick-vanilla-grid-constructor.spec.ts    |  98 +---
 .../components/slick-vanilla-grid-bundle.ts   | 112 +----
 packages/vanilla-bundle/src/index.ts          |   2 +
 .../vanilla-bundle/src/interfaces/index.ts    |   1 +
 .../slickerGridInstance.interface.ts          |  16 +-
 .../__tests__/resizer.service.spec.ts         | 244 ++++++++++
 packages/vanilla-bundle/src/services/index.ts |   1 +
 .../src/services/resizer.service.ts           | 166 +++++++
 test/cypress/integration/example07.spec.js    |   7 -
 test/cypress/integration/example11.spec.js    | 189 ++++++++
 yarn.lock                                     | 447 ++++++++++--------
 42 files changed, 1525 insertions(+), 472 deletions(-)
 create mode 100644 examples/webpack-demo-vanilla-bundle/src/examples/example11.html
 create mode 100644 examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
 create mode 100644 examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
 create mode 100644 packages/vanilla-bundle/src/interfaces/index.ts
 rename packages/{common => vanilla-bundle}/src/interfaces/slickerGridInstance.interface.ts (86%)
 create mode 100644 packages/vanilla-bundle/src/services/__tests__/resizer.service.spec.ts
 create mode 100644 packages/vanilla-bundle/src/services/resizer.service.ts
 create mode 100644 test/cypress/integration/example11.spec.js

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 820cec8fa..52d9fa1b0 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -20,11 +20,11 @@ Thanks for filing a Feature Request! However, before you submit, please read the
 
 ### Your Environment
 <!--- Include as many relevant details as possible about the library versions -->
-| Software             | Version(s) |
-| -------------------- | ---------- |
+| Software               | Version(s) |
+| --------------------- | ---------- |
 | Slickgrid-Universal  | x.y        |
-| TypeScript           | x.y        |
-| Package Name         | x.y        |
+| TypeScript               | x.y        |
+| Package Name        | x.y        |
 
 ### Describe the Bug
 <!-- REQUIRED - could you explain a bit what the Bug is -->
@@ -43,4 +43,4 @@ Thanks for filing a Feature Request! However, before you submit, please read the
 <!--- Not obligatory, but suggest a fix/reason for the bug -->
 
 ### Code Sample
-<!-- Please provide Stackblitz, Gist or Code Sample to reproduce the issue -->
\ No newline at end of file
+<!-- Please provide Stackblitz, Gist or Code Sample to reproduce the issue -->
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 731bdd5a6..647e291f2 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -14,10 +14,7 @@
       "userDataDir": "${workspaceRoot}/.chrome",
       "trace": true,
       "sourceMapPathOverrides": {
-        "webpack:///../../packages/common/*": "${webRoot}/packages/common/*",
-        "webpack:///../../packages/excel-export/*": "${webRoot}/packages/excel-export/*",
-        "webpack:///../../packages/file-export/*": "${webRoot}/packages/file-export/*",
-        "webpack:///../../packages/vanilla-bundle/*": "${webRoot}/packages/vanilla-bundle/*",
+        "webpack:///${workspaceRoot}/packages/*": "${webRoot}/packages/*",
         "webpack:///./src/*": "${webRoot}/examples/webpack-demo-vanilla-bundle/src/*"
       }
     },
diff --git a/README.md b/README.md
index aea969afa..eccb6dd7a 100644
--- a/README.md
+++ b/README.md
@@ -114,7 +114,7 @@ yarn run test:watch
   - [x] Grid Menu
   - [x] Header Button
   - [x] Header Menu
-  - [ ] Resizer
+  - [x] Resizer
   - [ ] Row Detail
   - [x] Row Move Manager
   - [x] Row Selection
@@ -157,5 +157,6 @@ yarn run test:watch
 - [x] Copy cell text (context menu) doesn't work in SF
 - [x] Remove all Services init method 2nd argument (we can get DataView directly from the Grid object)
 - [x] The Pagination/Footer width is a little off sometime compare to the width of the grid container
-- [ ] See if we can make all vanilla-grid-bundle services as readonly
 - [ ] Check why `DOM Purify` doesn't work in SF
+- [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members
+- [ ] Draggable Grouping pre-header (dragging) is not working as intended
diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json
index f93db33c2..0b03c0bea 100644
--- a/examples/webpack-demo-vanilla-bundle/package.json
+++ b/examples/webpack-demo-vanilla-bundle/package.json
@@ -35,13 +35,13 @@
   "devDependencies": {
     "@types/jquery": "^3.5.0",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.0.23",
+    "@types/node": "^14.0.26",
     "@types/webpack": "^4.41.21",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^4.0.0",
     "file-loader": "^6.0.0",
-    "fork-ts-checker-webpack-plugin": "^5.0.7",
+    "fork-ts-checker-webpack-plugin": "^5.0.11",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.3.0",
     "json-loader": "^0.5.7",
@@ -52,8 +52,8 @@
     "ts-loader": "^8.0.1",
     "ts-node": "^8.10.2",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/webpack-demo-vanilla-bundle/src/app-routing.ts b/examples/webpack-demo-vanilla-bundle/src/app-routing.ts
index efc1d7efd..687a55188 100644
--- a/examples/webpack-demo-vanilla-bundle/src/app-routing.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/app-routing.ts
@@ -14,6 +14,7 @@ export class AppRouting {
       { route: 'example08', name: 'example08', title: 'Example08', moduleId: './examples/example08' },
       { route: 'example09', name: 'example09', title: 'Example09', moduleId: './examples/example09' },
       { route: 'example10', name: 'example10', title: 'Example10', moduleId: './examples/example10' },
+      { route: 'example11', name: 'example11', title: 'Example11', moduleId: './examples/example11' },
       { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' },
       { route: 'example51', name: 'example51', title: 'Example51', moduleId: './examples/example51' },
       { route: '', redirect: 'example01' },
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
index 877774d8f..306cd99cd 100644
--- a/examples/webpack-demo-vanilla-bundle/src/app.html
+++ b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -9,12 +9,12 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       </span>
       <span style="position: relative; top: 5px; margin-left: 5px;">
         <iframe src="//ghbtns.com/github-btn.html?user=ghiscoding&repo=slickgrid-universal&type=star&count=true"
-          allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
+                allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
       </span>
     </a>
 
     <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-      data-target="navbarBasicExample">
+       data-target="navbarBasicExample">
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
@@ -57,6 +57,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example10')">
             Example10 - Grid with GraphQL Backend Service
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example11')">
+            Example11 - Queued Editing
+          </a>
           <!--
           <hr class="navbar-divider">
           <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Tree Data</a>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts
index e2758cbe4..27e706b61 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts
@@ -10,13 +10,12 @@ import {
   GroupTotalFormatters,
   SlickDataView,
   SlickGrid,
-  SlickerGridInstance,
   SortComparers,
   SortDirectionNumber
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { FileExportService } from '@slickgrid-universal/file-export';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../material-styles.scss';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.html b/examples/webpack-demo-vanilla-bundle/src/examples/example03.html
index 7d3bac802..8395fea9e 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example03.html
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example03.html
@@ -4,7 +4,7 @@ <h3 class="title is-3">
 </h3>
 
 <section>
-  <div class="row" style="margin-bottom: 4px;">
+  <div class="row">
     <button class="button is-small" onclick.delegate="loadData(500)">
       500 rows
     </button>
@@ -26,12 +26,9 @@ <h3 class="title is-3">
     <button class="button is-small" onclick.delegate="toggleDraggableGroupingRow()">
       Toggle Draggable Grouping Row
     </button>
-    <button class="button is-small" onclick.delegate="changeGridToReadOnly()">
-      Change Grid to Readonly
-    </button>
   </div>
 
-  <div class="row">
+  <div class="row" style="margin-top: 4px;">
     <button class="button is-small" onclick.delegate="groupByDurationOrderByCount(false)">
       Group by duration &amp; sort groups by value
     </button>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
index 5c5777c2b..f10ff1213 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -12,33 +12,19 @@ import {
   SlickDataView,
   SlickDraggableGrouping,
   SlickGrid,
-  SlickerGridInstance,
+  SlickNamespace,
   SortComparers,
   SortDirectionNumber,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 import './example03.scss';
 
-// you can create custom validator to pass to an inline editor
-const myCustomTitleValidator = (value, args) => {
-  if (value === null || value === undefined || !value.length) {
-    return { valid: false, msg: 'This is a required field' };
-  } else if (!/^Task\s\d+$/.test(value)) {
-    return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number' };
-  }
-  return { valid: true, msg: '' };
-};
-
-const customEditableInputFormatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const gridOptions = grid && grid.getOptions && grid.getOptions();
-  const isEditableLine = gridOptions.editable && columnDef.editor;
-  value = (value === null || value === undefined) ? '' : value;
-  return isEditableLine ? { text: value, addClasses: 'editable-field', toolTip: 'Click to Edit' } : value;
-};
+// using external SlickGrid JS libraries
+declare const Slick: SlickNamespace;
 
 interface ReportItem {
   title: string;
@@ -56,7 +42,7 @@ export class Example3 {
   dataset: any[];
   dataViewObj: SlickDataView;
   gridObj: SlickGrid;
-  commandQueue = [];
+  editCommandQueue = [];
   sgb: SlickVanillaGridBundle;
   slickerGridInstance: SlickerGridInstance;
   durationOrderByCount = false;
@@ -84,12 +70,10 @@ export class Example3 {
     this.columnDefinitions = [
       {
         id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.longText,
           required: true,
           alwaysSaveOnEnterKey: true,
-          validator: myCustomTitleValidator, // use a custom validator
         },
         filterable: true,
         grouping: {
@@ -102,7 +86,6 @@ export class Example3 {
       },
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.float,
           // required: true,
@@ -131,7 +114,7 @@ export class Example3 {
         filterable: true,
         // filter: { model: Filters.compoundInput },
         // formatter: Formatters.dollar,
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dollar, customEditableInputFormatter,] },
+        formatter: Formatters.dollar,
         groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
         type: FieldType.number,
         grouping: {
@@ -146,7 +129,6 @@ export class Example3 {
       },
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.slider,
           minValue: 0,
@@ -172,7 +154,7 @@ export class Example3 {
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
+        formatter: Formatters.dateIso,
         editor: { model: Editors.date },
         grouping: {
           getter: 'start',
@@ -189,7 +171,7 @@ export class Example3 {
         editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
+        formatter: Formatters.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
         grouping: {
           getter: 'finish',
@@ -325,9 +307,8 @@ export class Example3 {
         hideInFilterHeaderRow: false,
         hideInColumnTitleRow: true,
       },
-      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
       editCommandHandler: (item, column, editCommand) => {
-        this.commandQueue.push(editCommand);
+        this.editCommandQueue.push(editCommand);
         editCommand.execute();
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
@@ -348,12 +329,6 @@ export class Example3 {
     };
   }
 
-  changeGridToReadOnly() {
-    // change a single grid options to make the grid non-editable (readonly)
-    this.sgb.gridOptions = { editable: false };
-    this.gridOptions = this.sgb.gridOptions;
-  }
-
   loadData(count: number) {
     // mock data
     const tmpArray = [];
@@ -531,4 +506,12 @@ export class Example3 {
         break;
     }
   }
+
+  undo() {
+    const command = this.editCommandQueue.pop();
+    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      command.undo();
+      this.gridObj.gotoCell(command.row, command.cell, false);
+    }
+  }
 }
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
index 69e19a3ae..f4795a05c 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
@@ -4,8 +4,6 @@ import {
   Filters,
   Formatters,
   GridOption,
-  SlickDataView,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
index 7a26b2137..6fce99690 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
@@ -7,7 +7,6 @@ import {
   Formatter,
   Formatters,
   SlickDataView,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts
index 1b97dfa97..72b272c4e 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example09.ts
@@ -1,4 +1,4 @@
-import { Column, GridOption, Metrics, FieldType, Filters, OperatorType, GridStateChange, SlickGrid, PaginationService } from '@slickgrid-universal/common';
+import { Column, FieldType, Filters, GridOption, GridStateChange, Metrics, OperatorType, } from '@slickgrid-universal/common';
 import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts
index f8cbfd46a..50bc88631 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts
@@ -9,7 +9,6 @@ import {
   MultipleSelectOption,
   OperatorType,
   SortDirection,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.html b/examples/webpack-demo-vanilla-bundle/src/examples/example11.html
new file mode 100644
index 000000000..63cbefea1
--- /dev/null
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example11.html
@@ -0,0 +1,34 @@
+<h3 class="title is-3">
+  Example 11 - Queued Editing
+  <span class="subtitle">(with Salesforce Theme)</span>
+</h3>
+
+<section>
+  <div class="row">
+    <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
+      <span class="icon mdi mdi-table-edit"></span>
+      <span>Toggle Edit/Readonly Grid</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoLastEdit()" data-test="undo-last-edit-btn">
+      <span class="icon mdi mdi-undo"></span>
+      <span>Undo Last Edit</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoLastEdit(true)" data-test="undo-open-editor-btn">
+      <span class="icon mdi mdi-undo"></span>
+      <span>Undo Last Edit &amp; Open Editor</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoAllEdits()" data-test="undo-all-edits-btn">
+      <span class="icon mdi mdi-history"></span>
+      <span>Undo All Edits</span>
+    </button>
+    <button class="button is-small is-info" onclick.delegate="saveAll()" data-test="save-all-btn"
+            title="Check your console log for the result">
+      <span>Save All</span>
+    </button>
+  </div>
+</section>
+
+<br>
+
+<div class="grid11">
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
new file mode 100644
index 000000000..f28be59f5
--- /dev/null
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
@@ -0,0 +1,4 @@
+$control-height: 2.4em;
+
+@import 'bulma/bulma';
+
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
new file mode 100644
index 000000000..d472e1cb2
--- /dev/null
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -0,0 +1,381 @@
+import {
+  Column,
+  Editors,
+  FieldType,
+  Filters,
+  Formatters,
+  GridOption,
+  SlickNamespace,
+  Formatter,
+} from '@slickgrid-universal/common';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+
+import { ExampleGridOptions } from './example-grid-options';
+import '../salesforce-styles.scss';
+import './example11.scss';
+
+// using external SlickGrid JS libraries
+declare const Slick: SlickNamespace;
+
+// you can create custom validator to pass to an inline editor
+const myCustomTitleValidator = (value, args) => {
+  if (value === null || value === undefined || !value.length) {
+    return { valid: false, msg: 'This is a required field' };
+  } else if (!/^task\s\d+$/i.test(value)) {
+    return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number' };
+  }
+  return { valid: true, msg: '' };
+};
+
+const customEditableInputFormatter = (row, cell, value, columnDef, dataContext, grid) => {
+  const gridOptions = grid && grid.getOptions && grid.getOptions();
+  const isEditableLine = gridOptions.editable && columnDef.editor;
+  value = (value === null || value === undefined) ? '' : value;
+  // const isUnsavedField = dataContext.__unsaved && dataContext.__unsaved[columnDef.field] || false;
+  const isUnsavedField = false;
+  const cssClass = isUnsavedField ? 'unsaved-editable-field' : 'editable-field';
+  return isEditableLine ? { text: value, addClasses: cssClass, toolTip: 'Click to Edit' } : value;
+};
+
+export class Example3 {
+  columnDefinitions: Column[];
+  gridOptions: GridOption;
+  dataset: any[];
+  isGridEditable = true;
+  editQueue = [];
+  editedItems = {};
+  sgb: SlickVanillaGridBundle;
+  durationOrderByCount = false;
+
+  get slickerGridInstance(): SlickerGridInstance {
+    return this.sgb?.instances;
+  }
+
+  attached() {
+    this.initializeGrid();
+    this.dataset = this.loadData(500);
+    const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid11`);
+
+    gridContainerElm.addEventListener('onvalidationerror', this.handleValidationError.bind(this));
+    gridContainerElm.addEventListener('onitemdeleted', this.handleItemDeleted.bind(this));
+    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
+  }
+
+  dispose() {
+    this.sgb?.dispose();
+  }
+
+  initializeGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
+        editor: { model: Editors.text, required: true, alwaysSaveOnEnterKey: true, validator: myCustomTitleValidator, },
+        filterable: true,
+        formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
+      },
+      {
+        id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
+        editor: { model: Editors.float, decimal: 2, valueStep: 1, maxValue: 10000, alwaysSaveOnEnterKey: true, },
+        formatter: (row, cell, value) => value > 1 ? `${value} days` : `${value} day`,
+        params: { unsaved: false },
+        type: FieldType.number,
+      },
+      {
+        id: 'cost', name: 'Cost', field: 'cost',
+        width: 90,
+        sortable: true,
+        filterable: true,
+        filter: { model: Filters.compoundInputNumber },
+        formatter: Formatters.dollar,
+        type: FieldType.number,
+      },
+      {
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
+        editor: { model: Editors.slider, minValue: 0, maxValue: 100, },
+        sortable: true, filterable: true,
+        filter: { model: Filters.slider, operator: '>=' },
+      },
+      {
+        id: 'start', name: 'Start', field: 'start', sortable: true,
+        formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
+        filterable: true, filter: { model: Filters.compoundDate },
+        editor: { model: Editors.date },
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish', sortable: true,
+        editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
+        formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
+        filterable: true, filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 20, maxWidth: 100,
+        sortable: true, filterable: true,
+        editor: { model: Editors.checkbox },
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          model: Filters.singleSelect
+        },
+        exportWithFormatter: false,
+        formatter: Formatters.checkmarkMaterial,
+      },
+      {
+        id: 'action', name: 'Action', field: 'action', width: 100, maxWidth: 100,
+        excludeFromExport: true,
+        formatter: () => {
+          return `<div class="fake-hyperlink">Action <span class="font-12px">&#9660;</span></div>`;
+        },
+        cellMenu: {
+          hideCloseButton: false,
+          width: 200,
+          commandTitle: 'Commands',
+          commandItems: [
+            {
+              command: 'delete-row', title: 'Delete Row', positionOrder: 64,
+              iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold',
+              // only show command to 'Delete Row' when the task is not completed
+              itemVisibilityOverride: (args) => {
+                return !args.dataContext.completed;
+              }
+            },
+            {
+              command: 'help',
+              title: 'Help',
+              iconCssClass: 'mdi mdi-help-circle-outline',
+              positionOrder: 66,
+            },
+            'divider',
+            { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, }
+          ],
+        }
+      },
+    ];
+
+    // automatically add a Custom Formatter with blue background for any Editable Fields
+    this.autoAddCustomEditorFormatter(this.columnDefinitions, customEditableInputFormatter);
+
+    this.gridOptions = {
+      autoEdit: true, // true single click (false for double-click)
+      autoCommitEdit: true,
+      editable: true,
+      autoResize: {
+        container: '.demo-container',
+      },
+      enableAutoSizeColumns: true,
+      enableAutoResize: true,
+      enableCellNavigation: true,
+      showCustomFooter: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true
+      },
+      registerExternalServices: [new ExcelExportService()],
+      enableFiltering: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: false
+      },
+      rowHeight: 33,
+      headerRowHeight: 35,
+      enableCheckboxSelector: true,
+      enableRowSelection: true,
+      checkboxSelector: {
+        hideInFilterHeaderRow: false,
+        hideInColumnTitleRow: true,
+      },
+      editCommandHandler: (item, column, editCommand) => {
+        // keep in an array only the ones that changed, also add an extra "__unsaved" property that we can use for styling these cells
+        if (editCommand.prevSerializedValue !== editCommand.serializedValue) {
+          this.editQueue.push({ item, column, editCommand });
+          this.editedItems[editCommand.row] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
+          // item.__unsaved = { ...item.__unsaved, [column.field]: true };
+          this.sgb.slickGrid.invalidate();
+          editCommand.execute();
+
+          const hash = { [editCommand.row]: { [column.field]: 'unsaved-editable-field' } };
+          this.sgb.slickGrid.setCellCssStyles(`unsaved_highlight_${[column.field]}${editCommand.row}`, hash);
+        }
+      },
+      // when using the cellMenu, you can change some of the default options and all use some of the callback methods
+      enableCellMenu: true,
+      cellMenu: {
+        // all the Cell Menu callback methods (except the action callback)
+        // are available under the grid options as shown below
+        onCommand: (e, args) => this.executeCellMenuCommand(e, args),
+        onOptionSelected: (e, args) => {
+          // change "Completed" property with new option selected from the Cell Menu
+          const dataContext = args && args.dataContext;
+          if (dataContext && dataContext.hasOwnProperty('completed')) {
+            dataContext.completed = args.item.option;
+            this.sgb.gridService.updateItem(dataContext);
+          }
+        },
+      },
+    };
+  }
+
+  toggleGridEditReadonly() {
+    // change a single grid options to make the grid non-editable (readonly)
+    this.isGridEditable = !this.isGridEditable;
+    this.sgb.gridOptions = { editable: this.isGridEditable };
+    this.gridOptions = this.sgb.gridOptions;
+    this.removeAllUnsavedStylingFromCell();
+  }
+
+  loadData(count: number) {
+    // mock data
+    const tmpArray = [];
+    for (let i = 0; i < count; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomFinishYear = (new Date().getFullYear() - 3) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay);
+      const randomPercentComplete = Math.floor(Math.random() * 100) + 15; // make it over 15 for E2E testing purposes
+
+      tmpArray[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.floor(Math.random() * 100) + 10,
+        percentComplete: randomPercentComplete > 100 ? 100 : randomPercentComplete,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: (randomFinish < new Date() || i < 3) ? '' : randomFinish, // make sure the random date is earlier than today and it's index is bigger than 3
+        cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
+        completed: (i % 5 === 0)
+      };
+
+      if (!(i % 8)) {
+        delete tmpArray[i].finish; // also test with undefined properties
+      }
+    }
+    if (this.sgb) {
+      this.sgb.dataset = tmpArray;
+    }
+    return tmpArray;
+  }
+
+  handleValidationError(event) {
+    console.log('handleValidationError', event.detail);
+    const args = event.detail && event.detail.args;
+    if (args.validationResults) {
+      alert(args.validationResults.msg);
+    }
+  }
+
+  handleItemDeleted(event) {
+    const itemId = event && event.detail;
+    console.log('item deleted with id:', itemId);
+  }
+
+  executeCellMenuCommand(e, args) {
+    const command = args.command;
+    const dataContext = args.dataContext;
+
+    switch (command) {
+      case 'help':
+        alert('Please help!');
+        break;
+      case 'delete-row':
+        if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) {
+          this.slickerGridInstance.gridService.deleteItemById(dataContext.id);
+        }
+        break;
+    }
+  }
+
+  /**
+   * Instead of manually adding a Custom Formatter on every column definition that is editable, let's do it in an automated way
+   * We'll loop through all column definitions and add a Formatter (blue background) when necessary
+   * However note that if there's already a Formatter on that column definition, we need to turn it into a Formatters.multiple
+   */
+  autoAddCustomEditorFormatter(columnDefinitions: Column[], customFormatter: Formatter) {
+    if (Array.isArray(columnDefinitions)) {
+      for (const columnDef of columnDefinitions) {
+        if (columnDef.editor) {
+          if (columnDef.formatter && columnDef.formatter !== Formatters.multiple) {
+            const prevFormatter = columnDef.formatter;
+            columnDef.formatter = Formatters.multiple;
+            columnDef.params = { ...columnDef.params, formatters: [prevFormatter, customFormatter] };
+          } else if (columnDef.formatter && columnDef.formatter === Formatters.multiple) {
+            if (!columnDef.params) {
+              columnDef.params = {};
+            }
+            columnDef.params.formatters = [...columnDef.params.formatters, customFormatter];
+          } else {
+            columnDef.formatter = customFormatter;
+          }
+        }
+      }
+    }
+  }
+
+  saveAll() {
+    // Edit Queue (array increases every time a cell is changed, regardless of item object)
+    console.log(this.editQueue);
+
+    // Edit Items only keeps the merged data (an object with row index as the row properties)
+    // if you change 2 different cells on 2 different cells then this editedItems will only contain 1 property
+    // example: editedItems = { 0: { title: task 0, duration: 50, ... }}
+    // ...means that row index 0 got changed and the final merged object is { title: task 0, duration: 50, ... }
+    console.log(this.editedItems);
+
+    // since we saved, we can now remove all the unsaved color styling and reset our array/object
+    this.removeAllUnsavedStylingFromCell();
+    this.editQueue = [];
+    this.editedItems = {};
+  }
+
+  removeUnsavedStylingFromCell(item: any, column: Column, row: number) {
+    // remove unsaved css class from that cell
+    const fieldId = column.field;
+    if (item.__unsaved) {
+      delete item.__unsaved[fieldId];
+    }
+
+    this.sgb.slickGrid.removeCellCssStyles(`unsaved_highlight_${[column.field]}${row}`);
+  }
+
+  removeAllUnsavedStylingFromCell() {
+    for (const lastEdit of this.editQueue) {
+      const lastEditCommand = lastEdit?.editCommand;
+      if (lastEditCommand) {
+        // remove unsaved css class from that cell
+        this.removeUnsavedStylingFromCell(lastEdit.item, lastEdit.column, lastEditCommand.row);
+      }
+    }
+  }
+
+  undoLastEdit(showLastEditor = false) {
+    const lastEdit = this.editQueue.pop();
+    const lastEditCommand = lastEdit?.editCommand;
+    if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      lastEditCommand.undo();
+
+      // remove unsaved css class from that cell
+      this.removeUnsavedStylingFromCell(lastEdit.item, lastEdit.column, lastEditCommand.row);
+      this.sgb.slickGrid.invalidate();
+
+
+      // optionally open the last cell editor associated
+      if (showLastEditor) {
+        this.sgb?.slickGrid.gotoCell(lastEditCommand.row, lastEditCommand.cell, false);
+      }
+    }
+  }
+
+  undoAllEdits() {
+    for (const lastEdit of this.editQueue) {
+      const lastEditCommand = lastEdit?.editCommand;
+      if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+        lastEditCommand.undo();
+
+        // remove unsaved css class from that cell
+        this.removeUnsavedStylingFromCell(lastEdit.item, lastEdit.column, lastEditCommand.row);
+      }
+    }
+    this.sgb.slickGrid.invalidate(); // re-render the grid only after every cells got rolled back
+    this.editQueue = [];
+  }
+}
diff --git a/package.json b/package.json
index 32c131dd7..bf086fef0 100644
--- a/package.json
+++ b/package.json
@@ -37,14 +37,14 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^26.0.4",
-    "@types/node": "^14.0.19",
-    "@typescript-eslint/eslint-plugin": "^3.6.0",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^14.0.26",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
     "cypress": "^4.11.0",
-    "eslint": "^7.4.0",
+    "eslint": "^7.5.0",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prefer-arrow": "^1.2.1",
+    "eslint-plugin-prefer-arrow": "^1.2.2",
     "http-server": "^0.12.3",
     "jest": "^26.1.0",
     "jest-cli": "^26.1.0",
@@ -64,4 +64,4 @@
     "node": ">=12.13.1",
     "npm": ">=6.12.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/common/package.json b/packages/common/package.json
index 8ad21e6b6..b74e97edb 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -63,7 +63,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.24.0",
     "multiple-select-modified": "^1.3.2",
-    "slickgrid": "^2.4.25"
+    "slickgrid": "^2.4.27"
   },
   "devDependencies": {
     "@types/dompurify": "^2.0.2",
diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
index 296fde14d..bfe196072 100644
--- a/packages/common/src/editors/dateEditor.ts
+++ b/packages/common/src/editors/dateEditor.ts
@@ -180,7 +180,7 @@ export class DateEditor implements Editor {
 
       // validate the value before applying it (if not valid we'll set an empty string)
       const validation = this.validate(state);
-      const newValue = (validation && validation.valid) ? moment(state, outputTypeFormat).format(saveTypeFormat) : '';
+      const newValue = (state && validation && validation.valid) ? moment(state, outputTypeFormat).format(saveTypeFormat) : '';
 
       // set the new value to the item datacontext
       if (isComplexObject) {
diff --git a/packages/common/src/enums/slickControlList.enum.ts b/packages/common/src/enums/slickControlList.enum.ts
index 7ac4e72af..2bd26993a 100644
--- a/packages/common/src/enums/slickControlList.enum.ts
+++ b/packages/common/src/enums/slickControlList.enum.ts
@@ -1,3 +1,3 @@
-import { SlickColumnPicker, SlickGridMenu } from '../interfaces';
+import { SlickColumnPicker, SlickGridMenu } from '../interfaces/index';
 
 export type SlickControlList = SlickColumnPicker | SlickGridMenu;
diff --git a/packages/common/src/enums/slickPluginList.enum.ts b/packages/common/src/enums/slickPluginList.enum.ts
index 725393e3e..0438e7812 100644
--- a/packages/common/src/enums/slickPluginList.enum.ts
+++ b/packages/common/src/enums/slickPluginList.enum.ts
@@ -15,7 +15,7 @@ import {
   SlickRowDetailView,
   SlickRowMoveManager,
   SlickRowSelectionModel,
-} from '../interfaces';
+} from '../interfaces/index';
 
 export type SlickPluginList =
   SlickAutoTooltips |
diff --git a/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts b/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
index dc032d421..648321717 100644
--- a/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
+++ b/packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts
@@ -1,7 +1,7 @@
 import { GroupItemMetaProviderExtension } from '../groupItemMetaProviderExtension';
 import { SharedService } from '../../services/shared.service';
 import { SlickGrid } from '../../interfaces/slickGrid.interface';
-import { SlickNamespace } from '../../interfaces';
+import { SlickNamespace } from '../../interfaces/index';
 
 declare const Slick: SlickNamespace;
 
diff --git a/packages/common/src/extensions/draggableGroupingExtension.ts b/packages/common/src/extensions/draggableGroupingExtension.ts
index d56d01624..c808a3e39 100644
--- a/packages/common/src/extensions/draggableGroupingExtension.ts
+++ b/packages/common/src/extensions/draggableGroupingExtension.ts
@@ -36,7 +36,7 @@ export class DraggableGroupingExtension implements Extension {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.draggableGrouping);
 
-      if (!this._addon && gridOptions) {
+      if (!this._addon) {
         this._addon = new Slick.DraggableGrouping(gridOptions.draggableGrouping);
       }
       return this._addon;
diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts
index 7c94d5f09..b9fb19f7e 100644
--- a/packages/common/src/interfaces/index.ts
+++ b/packages/common/src/interfaces/index.ts
@@ -119,7 +119,6 @@ export * from './slickContextMenu.interface';
 export * from './slickDataView.interface';
 export * from './slickDraggableGrouping.interface';
 export * from './slickEditorLock.interface';
-export * from './slickerGridInstance.interface';
 export * from './slickEvent.interface';
 export * from './slickEventData.interface';
 export * from './slickGrid.interface';
diff --git a/packages/common/src/services/__tests__/extension.service.spec.ts b/packages/common/src/services/__tests__/extension.service.spec.ts
index f6362f141..4aac3e64c 100644
--- a/packages/common/src/services/__tests__/extension.service.spec.ts
+++ b/packages/common/src/services/__tests__/extension.service.spec.ts
@@ -1,5 +1,5 @@
 import { ExtensionName } from '../../enums/index';
-import { Column, ExtensionModel, GridOption, SlickGrid, SlickColumnPicker } from '../../interfaces/index';
+import { Column, ExtensionModel, GridOption, SlickGrid, SlickHeaderMenu } from '../../interfaces/index';
 import {
   AutoTooltipExtension,
   CellExternalCopyManagerExtension,
@@ -18,7 +18,6 @@ import {
 } from '../../extensions';
 import { ExtensionService, SharedService } from '..';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
-import { SlickHeaderMenu } from '../../../dist/es2015/interfaces';
 
 jest.mock('flatpickr', () => { });
 
diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss
index 062f2eb4d..eda3ffa13 100644
--- a/packages/common/src/styles/extra-styling.scss
+++ b/packages/common/src/styles/extra-styling.scss
@@ -6,9 +6,21 @@
   text-align: center;
 }
 
+.grid-canvas {
+  .slick-row, .slick-row.odd {
+    .slick-cell.editable-field, .slick-cell.selected.editable-field {
+      background-color: #e3f0fb;
+    }
+  }
+}
+
 .editable-field {
-  background-color: #e3f0fb !important;
+  background-color: #e3f0fb;
 }
+.unsaved-editable-field {
+  background-color: #fbfdd1 !important;
+}
+
 .fake-hyperlink {
   cursor: pointer;
   color: $link-color;
diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss
index 4830d6218..bf99e2038 100644
--- a/packages/common/src/styles/material-svg-icons.scss
+++ b/packages/common/src/styles/material-svg-icons.scss
@@ -8,6 +8,7 @@ $icon-color-mdi-checkbox-marked: $icon-color !default;
 $icon-color-mdi-close: $icon-color !default;
 $icon-color-mdi-close-thick: $icon-color !default;
 $icon-color-mdi-content-copy: $icon-color !default;
+$icon-color-mdi-database-refresh: $icon-color !default;
 $icon-color-mdi-download: $icon-color !default;
 $icon-color-mdi-file-document-outline: $icon-color !default;
 $icon-color-mdi-file-excel-outline: $icon-color !default;
@@ -19,16 +20,27 @@ $icon-color-mdi-folder: $icon-color !default;
 $icon-color-mdi-folder-open: $icon-color !default;
 $icon-color-mdi-help-circle: $icon-color !default;
 $icon-color-mdi-help-circle-outline: $icon-color !default;
+$icon-color-mdi-history: $icon-color !default;
+$icon-color-mdi-link: $icon-color !default;
+$icon-color-mdi-link-variant: $icon-color !default;
 $icon-color-mdi-menu: $icon-color !default;
 $icon-color-mdi-microsoft-excel: $icon-color !default;
 $icon-color-mdi-minus: $icon-color !default;
+$icon-color-mdi-page-first: $icon-color !default;
+$icon-color-mdi-page-last: $icon-color !default;
+$icon-color-mdi-paperclip: $icon-color !default;
 $icon-color-mdi-pin-off-outline: $icon-color !default;
 $icon-color-mdi-pin-outline: $icon-color !default;
 $icon-color-mdi-plus: $icon-color !default;
+$icon-color-mdi-redo: $icon-color !default;
+$icon-color-mdi-refresh: $icon-color !default;
 $icon-color-mdi-sort-ascending: $icon-color !default;
 $icon-color-mdi-sort-descending: $icon-color !default;
 $icon-color-mdi-swap-vertical: $icon-color !default;
 $icon-color-mdi-sync: $icon-color !default;
+$icon-color-mdi-table-edit: $icon-color !default;
+$icon-color-mdi-table-refresh: $icon-color !default;
+$icon-color-mdi-undo: $icon-color !default;
 
 /* icon width */
 $icon-width-mdi-arrow-collapse: $icon-width !default;
@@ -40,6 +52,7 @@ $icon-width-mdi-checkbox-marked: $icon-width !default;
 $icon-width-mdi-close: $icon-width !default;
 $icon-width-mdi-close-thick: $icon-width !default;
 $icon-width-mdi-content-copy: $icon-width !default;
+$icon-width-mdi-database-refresh: $icon-width !default;
 $icon-width-mdi-download: $icon-width !default;
 $icon-width-mdi-file-document-outline: $icon-width !default;
 $icon-width-mdi-file-excel-outline: $icon-width !default;
@@ -51,16 +64,27 @@ $icon-width-mdi-folder: $icon-width !default;
 $icon-width-mdi-folder-open: $icon-width !default;
 $icon-width-mdi-help-circle: $icon-width !default;
 $icon-width-mdi-help-circle-outline: $icon-width !default;
+$icon-width-mdi-history: $icon-width !default;
+$icon-width-mdi-link: $icon-width !default;
+$icon-width-mdi-link-variant: $icon-width !default;
 $icon-width-mdi-menu: $icon-width !default;
 $icon-width-mdi-microsoft-excel: $icon-width !default;
 $icon-width-mdi-minus: $icon-width !default;
+$icon-width-mdi-page-first: $icon-width !default;
+$icon-width-mdi-page-last: $icon-width !default;
+$icon-width-mdi-paperclip: $icon-width !default;
 $icon-width-mdi-pin-off-outline: $icon-width !default;
 $icon-width-mdi-pin-outline: $icon-width !default;
 $icon-width-mdi-plus: $icon-width !default;
+$icon-width-mdi-redo: $icon-width !default;
+$icon-width-mdi-refresh: $icon-width !default;
 $icon-width-mdi-sort-ascending: $icon-width !default;
 $icon-width-mdi-sort-descending: $icon-width !default;
 $icon-width-mdi-swap-vertical: $icon-width !default;
 $icon-width-mdi-sync: $icon-width !default;
+$icon-width-mdi-table-edit: $icon-width !default;
+$icon-width-mdi-table-refresh: $icon-width !default;
+$icon-width-mdi-undo: $icon-width !default;
 
 .mdi {
   &.mdi-flip-h {
@@ -115,6 +139,11 @@ $icon-width-mdi-sync: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-content-copy)}" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>');
   }
+  &.mdi-database-refresh:before {
+    width: $icon-width-mdi-database-refresh;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-database-refresh)}" viewBox="0 0 24 24"><path d="M12 3C16.42 3 20 4.79 20 7C20 9.21 16.42 11 12 11C7.58 11 4 9.21 4 7C4 4.79 7.58 3 12 3M4 9C4 11.21 7.58 13 12 13C13.11 13 14.18 12.89 15.14 12.68C14.19 13.54 13.5 14.67 13.18 15.96L12 16C7.58 16 4 14.21 4 12V9M20 9V11L19.5 11L18.9 11.03C19.6 10.43 20 9.74 20 9M4 14C4 16.21 7.58 18 12 18L13 17.97C13.09 19.03 13.42 20 13.95 20.88L12 21C7.58 21 4 19.21 4 17V14M19 13.5C20.11 13.5 21.11 13.95 21.83 14.67L23 13.5V17.5H19L20.77 15.73C20.32 15.28 19.69 15 19 15C17.62 15 16.5 16.12 16.5 17.5C16.5 18.88 17.62 20 19 20C19.82 20 20.54 19.61 21 19H22.71C22.12 20.47 20.68 21.5 19 21.5C16.79 21.5 15 19.71 15 17.5C15 15.29 16.79 13.5 19 13.5Z"></path></svg>');
+  }
   &.mdi-download:before {
     width: $icon-width-mdi-download;
     display: inline-block;
@@ -170,6 +199,21 @@ $icon-width-mdi-sync: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-help-circle-outline)}" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"></path></svg>');
   }
+  &.mdi-history:before {
+    width: $icon-width-mdi-history;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-history)}" viewBox="0 0 24 24"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3"></path></svg>');
+  }
+  &.mdi-link:before {
+    width: $icon-width-mdi-link;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-link)}" viewBox="0 0 24 24"><path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path></svg>');
+  }
+  &.mdi-link-variant:before {
+    width: $icon-width-mdi-link-variant;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-link-variant)}" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"></path></svg>');
+  }
   &.mdi-menu:before {
     width: $icon-width-mdi-menu;
     display: inline-block;
@@ -185,6 +229,21 @@ $icon-width-mdi-sync: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-minus)}" viewBox="0 0 24 24"><path d="M19,13H5V11H19V13Z"></path></svg>');
   }
+  &.mdi-page-first:before {
+    width: $icon-width-mdi-page-first;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-page-first)}" viewBox="0 0 24 24"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z"></path></svg>');
+  }
+  &.mdi-page-last:before {
+    width: $icon-width-mdi-page-last;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-page-last)}" viewBox="0 0 24 24"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z"></path></svg>');
+  }
+  &.mdi-paperclip:before {
+    width: $icon-width-mdi-paperclip;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-paperclip)}" viewBox="0 0 24 24"><path d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z"></path></svg>');
+  }
   &.mdi-pin-off-outline:before {
     width: $icon-width-mdi-pin-off-outline;
     display: inline-block;
@@ -200,6 +259,16 @@ $icon-width-mdi-sync: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-plus)}" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>');
   }
+  &.mdi-redo:before {
+    width: $icon-width-mdi-redo;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-redo)}" viewBox="0 0 24 24"><path d="M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"></path></svg>');
+  }
+  &.mdi-refresh:before {
+    width: $icon-width-mdi-refresh;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-refresh)}" viewBox="0 0 24 24"><path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path></svg>');
+  }
   &.mdi-sort-ascending:before {
     width: $icon-width-mdi-sort-ascending;
     display: inline-block;
@@ -220,4 +289,19 @@ $icon-width-mdi-sync: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-sync)}" viewBox="0 0 24 24"><path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"></path></svg>');
   }
+  &.mdi-table-edit:before {
+    width: $icon-width-mdi-table-edit;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-table-edit)}" viewBox="0 0 24 24"><path d="M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.08 20.21,11.08 20.42,11.3L21.7,12.58C21.92,12.79 21.92,13.14 21.7,13.35M12,18.94L18.07,12.88L20.12,14.93L14.06,21H12V18.94M4,2H18A2,2 0 0,1 20,4V8.17L16.17,12H12V16.17L10.17,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,6V10H10V6H4M12,6V10H18V6H12M4,12V16H10V12H4Z"></path></svg>');
+  }
+  &.mdi-table-refresh:before {
+    width: $icon-width-mdi-table-refresh;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-table-refresh)}" viewBox="0 0 24 24"><path d="M18 14.5C19.11 14.5 20.11 14.95 20.83 15.67L22 14.5V18.5H18L19.77 16.73C19.32 16.28 18.69 16 18 16C16.62 16 15.5 17.12 15.5 18.5C15.5 19.88 16.62 21 18 21C18.82 21 19.55 20.61 20 20H21.71C21.12 21.47 19.68 22.5 18 22.5C15.79 22.5 14 20.71 14 18.5C14 16.29 15.79 14.5 18 14.5M4 3H18C19.11 3 20 3.9 20 5V12.17C19.5 12.06 19 12 18.5 12C17.23 12 16.04 12.37 15.04 13H12V17H12.18C12.06 17.5 12 18 12 18.5L12 19H4C2.9 19 2 18.11 2 17V5C2 3.9 2.9 3 4 3M4 7V11H10V7H4M12 7V11H18V7H12M4 13V17H10V13H4Z"></path></svg>');
+  }
+  &.mdi-undo:before {
+    width: $icon-width-mdi-undo;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-undo)}" viewBox="0 0 24 24"><path d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"></path></svg>');
+  }
 }
diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
index 95c6b7456..2367e14ca 100644
--- a/packages/common/src/styles/slick-bootstrap.scss
+++ b/packages/common/src/styles/slick-bootstrap.scss
@@ -117,7 +117,7 @@
         transition: $copied-cell-transition;
       }
       &.odd {
-        background: $cell-odd-background-color;
+        background-color: $cell-odd-background-color;
         &:hover {
           background-color: $row-mouse-hover-color;
         }
@@ -159,7 +159,7 @@
     }
 
     .even {
-      background: $cell-even-background-color;
+      background-color: $cell-even-background-color;
     }
 
 
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 0a193c342..4aa8f9448 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -42,12 +42,15 @@
     }
   }
 
-  .title {
-    font-size: $cell-menu-title-font-size;
-    font-weight: $cell-menu-title-font-weight;
-    width: $cell-menu-title-width;
-    border-bottom: $cell-menu-title-border-bottom;
-    margin-bottom: $cell-menu-title-margin-bottom;
+  .slick-cell-menu-option-list,
+  .slick-cell-menu-command-list {
+    .title {
+      font-size: $cell-menu-title-font-size;
+      font-weight: $cell-menu-title-font-weight;
+      width: $cell-menu-title-width;
+      border-bottom: $cell-menu-title-border-bottom;
+      margin-bottom: $cell-menu-title-margin-bottom;
+    }
   }
 
   .slick-cell-menu-item {
diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
index 75252e4be..d9e7aeb0a 100644
--- a/packages/common/src/styles/slickgrid-theme-salesforce.scss
+++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -63,6 +63,8 @@ $checkbox-selector-icon-unchecked:      url('data:image/svg+xml,<svg xmlns="http
 $checkbox-selector-opacity:             1 !default;
 $checkbox-selector-opacity-hover:       0.9 !default;
 $cell-menu-icon-margin-right:           6px !default;
+$cell-menu-close-btn-height:            14px !default;
+$cell-menu-close-btn-margin:            -8px 1px 1px 1px !default;
 $column-picker-checkbox-color:          $primary-color !default;
 $column-picker-checkbox-size:           $icon-width !default;
 $column-picker-checkbox-font-weight:    normal !default;
@@ -129,7 +131,7 @@ $editor-focus-box-shadow:               0 0 3px $primary-color !default;
 $slider-editor-height:                  24px !default;
 $slider-filter-thumb-color:             #3C97DD !default;
 $slider-filter-runnable-track-bgcolor:  #ECEBEA !default;
-$row-selected-color:                    darken($cell-odd-background-color, 1%) !default;
+$row-selected-color:                    darken($cell-odd-background-color, 2%) !default;
 $row-mouse-hover-color:                 $cell-odd-background-color !default;
 $row-mouse-hover-box-shadow:            0 0 0 2px #dddbda !default;
 $detail-view-icon-collapse-color:       $primary-color !default;
@@ -172,16 +174,20 @@ $editable-field-hover-icon-margin-right: 2px !default;
 $editable-field-hover-icon-margin-top: 8px !default;
 $editable-field-hover-icon-width: 14px !default;
 
-.editable-field {
-  background-color: $editable-field-bg-color !important;
-  &:hover:after {
-    content: $editable-field-hover-icon;
-    position: absolute;
-    top: $editable-field-hover-icon-margin-top;
-    right: $editable-field-hover-icon-margin-right;
-    width: $editable-field-hover-icon-width;
-  }
-  &.active:hover:after {
-    content: none;
+.grid-canvas {
+  .slick-row, .slick-row.odd {
+    .slick-cell.editable-field, .slick-cell.selected.editable-field {
+      background-color: $editable-field-bg-color;
+      &:hover:after {
+        content: $editable-field-hover-icon;
+        position: absolute;
+        top: $editable-field-hover-icon-margin-top;
+        right: $editable-field-hover-icon-margin-right;
+        width: $editable-field-hover-icon-width;
+      }
+      &.active:hover:after {
+        content: none;
+      }
+    }
   }
 }
diff --git a/packages/vanilla-bundle/package.json b/packages/vanilla-bundle/package.json
index aad638b51..a34eee8f9 100644
--- a/packages/vanilla-bundle/package.json
+++ b/packages/vanilla-bundle/package.json
@@ -9,10 +9,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "src",
-    "dist"
-  ],
+  "directories": {
+    "src": "src"
+  },
   "scripts": {
     "test": "echo testing slickgrid-universal slickgrid-vanilla-bundle code",
     "dev": "webpack --env.development",
@@ -53,13 +52,13 @@
   },
   "devDependencies": {
     "@types/webpack": "^4.41.21",
-    "archiver": "^4.0.2",
+    "archiver": "^5.0.0",
     "cross-env": "^7.0.2",
     "dts-bundle-webpack": "^1.0.2",
     "html-loader": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "ts-loader": "^8.0.1",
-    "webpack": "^4.43.0"
+    "webpack": "^4.44.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid-constructor.spec.ts b/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid-constructor.spec.ts
index e00093c13..d10486132 100644
--- a/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid-constructor.spec.ts
+++ b/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid-constructor.spec.ts
@@ -9,7 +9,6 @@ import {
   ExtensionService,
   ExtensionUtility,
   Filters,
-  FileExportService,
   FilterService,
   GridEventService,
   GridOption,
@@ -34,6 +33,8 @@ import { SlickVanillaGridBundle, SlickVanillaGridBundleInitializer } from '../sl
 import { EventPubSubService } from '../../services/eventPubSub.service';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
 import { HttpStub } from '../../../../../test/httpClientStub';
+import { FileExportService } from '../../services/fileExport.service';
+jest.mock('../../services/fileExport.service');
 
 const mockExecuteBackendProcess = jest.fn();
 const mockRefreshBackendDataset = jest.fn();
@@ -48,16 +49,9 @@ utilities.refreshBackendDataset = mockRefreshBackendDataset;
 // @ts-ignore
 utilities.onBackendError = mockBackendError;
 
-const DATAGRID_FOOTER_HEIGHT = 25;
-const DATAGRID_PAGINATION_HEIGHT = 35;
 declare const Slick: any;
 jest.mock('flatpickr', () => { });
 
-const fileExportServiceStub = {
-  init: jest.fn(),
-  dispose: jest.fn(),
-} as unknown as FileExportService;
-
 const extensionServiceStub = {
   bindDifferentExtensions: jest.fn(),
   createExtensionsBeforeGridCreation: jest.fn(),
@@ -183,6 +177,7 @@ const mockDataView = {
   mapRowsToIds: jest.fn(),
   onSetItemsCalled: jest.fn(),
   onRowsChanged: new Slick.Event(),
+  onRowCountChanged: new Slick.Event(),
   reSort: jest.fn(),
   setItems: jest.fn(),
   syncGridSelection: jest.fn(),
@@ -194,18 +189,6 @@ const mockDraggableGroupingExtension = {
   destroy: jest.fn(),
 };
 
-const mockResizerExtension = {
-  constructor: jest.fn(),
-  init: jest.fn(),
-  destroy: jest.fn(),
-  bindAutoResizeDataGrid: jest.fn(),
-  getLastResizeDimensions: jest.fn(),
-  pauseResizer: jest.fn(),
-  resizeGrid: jest.fn(),
-  onGridAfterResize: new Slick.Event(),
-  onGridBeforeResize: new Slick.Event(),
-};
-
 const mockSlickCore = {
   handlers: [],
   subscribe: jest.fn(),
@@ -248,19 +231,16 @@ const mockDataViewImplementation = jest.fn().mockImplementation(() => mockDataVi
 const mockGroupItemMetaProviderImplementation = jest.fn().mockImplementation(() => mockGroupItemMetaProvider);
 const mockGridImplementation = jest.fn().mockImplementation(() => mockGrid);
 const mockDraggableGroupingImplementation = jest.fn().mockImplementation(() => mockDraggableGroupingExtension);
-const mockResizerImplementation = jest.fn().mockImplementation(() => mockResizerExtension);
 
 
 describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', () => {
   jest.mock('slickgrid/slick.core', () => mockSlickCoreImplementation);
   jest.mock('slickgrid/slick.grid', () => mockGridImplementation);
   jest.mock('slickgrid/plugins/slick.draggablegrouping', () => mockDraggableGroupingImplementation);
-  jest.mock('slickgrid/plugins/slick.resizer', () => mockResizerImplementation);
   Slick.Grid = mockGridImplementation;
   Slick.EventHandler = mockSlickCoreImplementation;
   Slick.Data = { DataView: mockDataViewImplementation, GroupItemMetadataProvider: mockGroupItemMetaProviderImplementation };
   Slick.DraggableGrouping = mockDraggableGroupingImplementation;
-  // Slick.Plugins = { Resizer: mockResizerImplementation };
 
   let component: SlickVanillaGridBundle;
   let divContainer: HTMLDivElement;
@@ -495,33 +475,6 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
       });
     });
 
-    describe('resizer', () => {
-      beforeEach(() => {
-        jest.clearAllMocks();
-        sharedService.grid = mockGrid as unknown as SlickGrid;
-        sharedService.gridOptions = gridOptions;
-      });
-
-      it('should expect autoResize bottom padding to be added to default pagination padding', () => {
-        component.gridOptions = { autoCommitEdit: false, autoResize: { bottomPadding: 50 } };
-        component.initialization(divContainer);
-
-        expect(component.gridOptions.autoResize.bottomPadding).toEqual(50 + DATAGRID_FOOTER_HEIGHT); // calculated by the lib
-      });
-
-      // it('should set a fixed width when provided in the grid options', () => {
-      //   const fixedWidth = 255;
-      //   const resizerSpy = jest.spyOn(mockResizerExtension, 'resizeGrid');
-      //   jest.spyOn(mockGrid, 'getContainerNode').mockReturnValue(divContainer);
-
-      //   component.gridOptions = { autoCommitEdit: false, autoResize: { bottomPadding: 50 }, gridWidth: fixedWidth };
-      //   component.initialization(divContainer);
-
-      //   expect(divContainer.style.width).toEqual(`${fixedWidth}px`);
-      //   // expect(resizerSpy).toHaveBeenCalled();
-      // });
-    });
-
     describe('with editors', () => {
       it('should be able to load async editors with a regular Promise', (done) => {
         const mockCollection = ['male', 'female'];
@@ -748,24 +701,6 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
 
         expect(syncSpy).toHaveBeenCalledWith(component.slickGrid, false);
       });
-
-      it('should bind local filter when "enableFiltering" is set', () => {
-        const bindLocalSpy = jest.spyOn(filterServiceStub, 'bindLocalOnFilter');
-
-        component.gridOptions = { enableFiltering: true } as GridOption;
-        component.initialization(divContainer);
-
-        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
-      });
-
-      it('should bind local sort when "enableSorting" is set', () => {
-        const bindLocalSpy = jest.spyOn(sortServiceStub, 'bindLocalOnSort');
-
-        component.gridOptions = { enableSorting: true } as GridOption;
-        component.initialization(divContainer);
-
-        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
-      });
     });
 
     describe('flag checks', () => {
@@ -811,14 +746,13 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         expect(spy).toHaveBeenCalled();
       });
 
-      xit('should initialize ExportService when "enableExport" is set when using Salesforce', () => {
-        // might need to mock implementation
-        const spy = jest.spyOn(fileExportServiceStub, 'init');
-
+      it('should initialize ExportService when "enableExport" is set when using Salesforce', () => {
         component.gridOptions = { enableExport: true, useSalesforceDefaultGridOptions: true } as GridOption;
         component.initialization(divContainer);
 
-        expect(spy).toHaveBeenCalled();
+        expect(FileExportService).toHaveBeenCalled();
+        expect(component.registeredServices.length).toBe(3); // FileExportService, GridService, GridStateService
+        expect(component.registeredServices[0] instanceof FileExportService).toBeTrue();
       });
 
       it('should destroy customElement and its DOM element when requested', () => {
@@ -830,6 +764,24 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         expect(spy).toHaveBeenCalledWith();
       });
 
+      it('should bind local filter when "enableFiltering" is set', () => {
+        const bindLocalSpy = jest.spyOn(filterServiceStub, 'bindLocalOnFilter');
+
+        component.gridOptions = { enableFiltering: true } as GridOption;
+        component.initialization(divContainer);
+
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
+      });
+
+      it('should bind local sort when "enableSorting" is set', () => {
+        const bindLocalSpy = jest.spyOn(sortServiceStub, 'bindLocalOnSort');
+
+        component.gridOptions = { enableSorting: true } as GridOption;
+        component.initialization(divContainer);
+
+        expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
+      });
+
       it('should refresh a local grid and change pagination options pagination when a preset for it is defined in grid options', (done) => {
         const expectedPageNumber = 2;
         const expectedTotalItems = 2;
diff --git a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
index 9fa538bc7..5b87ef6d6 100644
--- a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
+++ b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
@@ -25,7 +25,6 @@ import {
   onBackendError,
   refreshBackendDataset,
   Pagination,
-  SlickerGridInstance,
   ServicePagination,
   Subscription,
 
@@ -43,7 +42,6 @@ import {
   HeaderMenuExtension,
   HeaderButtonExtension,
   RowSelectionExtension,
-  SlickResizer,
 
   // services
   FilterFactory,
@@ -64,20 +62,19 @@ import {
 
   // utilities
   convertParentChildArrayToHierarchicalView,
-  getHtmlElementOffset,
   GetSlickEventType,
 } from '@slickgrid-universal/common';
 
-import { FileExportService } from '../services/fileExport.service';
 import { EventPubSubService } from '../services/eventPubSub.service';
+import { FileExportService } from '../services/fileExport.service';
+import { ResizerService } from '../services/resizer.service';
+import { SalesforceGlobalGridOptions } from '../salesforce-global-grid-options';
 import { SlickFooterComponent } from './slick-footer';
 import { SlickPaginationComponent } from './slick-pagination';
-import { SalesforceGlobalGridOptions } from '../salesforce-global-grid-options';
+import { SlickerGridInstance } from '../interfaces/slickerGridInstance.interface';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
-const DATAGRID_FOOTER_HEIGHT = 25;
-const DATAGRID_PAGINATION_HEIGHT = 35;
 
 export class SlickVanillaGridBundle {
   protected _eventPubSubService: EventPubSubService;
@@ -93,9 +90,8 @@ export class SlickVanillaGridBundle {
   private _isPaginationInitialized = false;
   private _eventHandler: SlickEventHandler = new Slick.EventHandler();
   private _paginationOptions: Pagination | undefined;
+  private _registeredServices: any[] = [];
   private _slickgridInitialized = false;
-  private _intervalId: NodeJS.Timeout;
-  private _intervalExecutionCounter = 0;
   private _slickerGridInstances: SlickerGridInstance | undefined;
   backendServiceApi: BackendServiceApi | undefined;
   dataView: SlickDataView;
@@ -108,7 +104,7 @@ export class SlickVanillaGridBundle {
   };
   totalItems = 0;
   groupItemMetadataProvider: SlickGroupItemMetadataProvider;
-  resizerService: SlickResizer;
+  resizerService: ResizerService;
   subscriptions: Subscription[] = [];
   showPagination = false;
 
@@ -224,14 +220,14 @@ export class SlickVanillaGridBundle {
     this._isDatasetInitialized = isInitialized;
   }
 
-  get gridUid(): string {
-    return this.slickGrid?.getUID() ?? '';
-  }
-
   get instances(): SlickerGridInstance | undefined {
     return this._slickerGridInstances;
   }
 
+  get registeredServices(): any[] {
+    return this._registeredServices;
+  }
+
   constructor(gridParentContainerElm: HTMLElement, columnDefs?: Column[], options?: GridOption, dataset?: any[], hierarchicalDataset?: any[]) {
     // make sure that the grid container has the "slickgrid-container" css class exist since we use it for slickgrid styling
     gridParentContainerElm.classList.add('grid-pane');
@@ -332,7 +328,7 @@ export class SlickVanillaGridBundle {
     this.gridStateService?.dispose();
     this.groupingService?.dispose();
     this.paginationService?.dispose();
-    // this.resizer?.dispose();
+    this.resizerService?.dispose();
     this.sortService?.dispose();
     this.treeDataService?.dispose();
 
@@ -443,26 +439,9 @@ export class SlickVanillaGridBundle {
       this.slickFooter.renderFooter(this._gridParentContainerElm);
     }
 
-    const fixedGridDimensions = (this._gridOptions?.gridHeight || this._gridOptions?.gridWidth) ? { height: this._gridOptions?.gridHeight, width: this._gridOptions?.gridWidth } : undefined;
-    const autoResizeOptions = this._gridOptions?.autoResize ?? { bottomPadding: 0 };
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined) {
-      const footerHeight: string | number = this._gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
-      autoResizeOptions.bottomPadding += parseInt(`${footerHeight}`, 10);
-    }
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this._gridOptions.enablePagination) {
-      autoResizeOptions.bottomPadding += DATAGRID_PAGINATION_HEIGHT;
-    }
-    if (fixedGridDimensions?.width && this._gridParentContainerElm?.style) {
-      this._gridParentContainerElm.style.width = `${fixedGridDimensions.width}px`;
-    }
-
-    this.resizerService = new Slick.Plugins.Resizer({ ...autoResizeOptions, gridContainer: this._gridParentContainerElm }, fixedGridDimensions);
-    this.slickGrid.registerPlugin<SlickResizer>(this.resizerService);
-    if (this.gridOptions.enableAutoResize) {
-      this.resizerService.resizeGrid()
-        .then(() => this.resizeGridWhenStylingIsBrokenUntilCorrected())
-        .catch((error: any) => console.log('Error:', error));
-    }
+    // load the resizer service
+    this.resizerService = new ResizerService(this._eventPubSubService);
+    this.resizerService.init(this.slickGrid, this._gridParentContainerElm);
 
     // user might want to hide the header row on page load but still have `enableFiltering: true`
     // if that is the case, we need to hide the headerRow ONLY AFTER all filters got created & dataView exist
@@ -477,30 +456,30 @@ export class SlickVanillaGridBundle {
     this.gridEventService.bindOnClick(this.slickGrid);
 
     // get any possible Services that user want to register
-    const registeringServices: any[] = this.gridOptions.registerExternalServices || [];
+    this._registeredServices = this.gridOptions.registerExternalServices || [];
 
     // when using Salesforce, we want the Export to CSV always enabled without registering it
     if (this.gridOptions.enableExport && this.gridOptions.useSalesforceDefaultGridOptions) {
       const fileExportService = new FileExportService();
-      registeringServices.push(fileExportService);
+      this._registeredServices.push(fileExportService);
     }
 
     // at this point, we consider all the registered services as external services, anything else registered afterward aren't external
-    if (Array.isArray(registeringServices)) {
-      this.sharedService.externalRegisteredServices = registeringServices;
+    if (Array.isArray(this._registeredServices)) {
+      this.sharedService.externalRegisteredServices = this._registeredServices;
     }
 
     // push all other Services that we want to be registered
-    registeringServices.push(this.gridService, this.gridStateService);
+    this._registeredServices.push(this.gridService, this.gridStateService);
 
     // when using Grouping/DraggableGrouping/Colspan register its Service
     if (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping) {
-      registeringServices.push(this.groupingService);
+      this._registeredServices.push(this.groupingService);
     }
 
     if (this.gridOptions.enableTreeData) {
       // when using Tree Data View, register its Service
-      registeringServices.push(this.treeDataService);
+      this._registeredServices.push(this.treeDataService);
     }
 
     // when user enables translation, we need to translate Headers on first pass & subsequently in the bindDifferentHooks
@@ -516,8 +495,8 @@ export class SlickVanillaGridBundle {
 
     // bind & initialize all Services that were tagged as enable
     // register all services by executing their init method and providing them with the Grid object
-    if (Array.isArray(registeringServices)) {
-      for (const service of registeringServices) {
+    if (Array.isArray(this._registeredServices)) {
+      for (const service of this._registeredServices) {
         if (typeof service.init === 'function') {
           service.init(this.slickGrid, this.sharedService);
         }
@@ -1101,51 +1080,6 @@ export class SlickVanillaGridBundle {
     }
   }
 
-  /**
-   * Patch for SalesForce, some issues arise when having a grid inside a Tab and user clicks in a different Tab without waiting for the grid to be rendered
-   * in ideal world, we would simply call a resize when user comes back to the Tab with the grid (tab focused) but this is an extra step and we might not always have this event available.
-   * The grid seems broken, the header titles seems to be showing up behind the grid data and the rendering seems broken.
-   * Why it happens? Because SlickGrid can resize problem when the DOM element is hidden and that happens when user doesn't wait for the grid to be fully rendered and go in a different Tab.
-   *
-   * So the patch is to call a grid resize if the following 2 conditions are met
-   *   1- header row is Y coordinate 0 (happens when user is not in current Tab)
-   *   2- header titles are lower than the viewport of dataset (this can happen when user change Tab and DOM is not shown),
-   * for these cases we'll resize until it's no longer true or until we reach a max time limit (70min)
-   */
-  private resizeGridWhenStylingIsBrokenUntilCorrected() {
-    const INTERVAL_MAX_MIN_RETRIES = 70;
-    const headerElm = document.querySelector<HTMLDivElement>(`.${this.gridUid} .slick-header`);
-    const viewportElm = document.querySelector<HTMLDivElement>(`.${this.gridUid} .slick-viewport`);
-
-    if (headerElm && viewportElm) {
-      this._intervalId = setInterval(() => {
-        const headerTitleRowHeight = 44; // this one is set by SASS/CSS so let's hard code it
-        const headerPos = getHtmlElementOffset(headerElm);
-        let headerOffsetTop = headerPos?.top ?? 0;
-        if (this.gridOptions && this.gridOptions.enableFiltering && this.gridOptions.headerRowHeight) {
-          headerOffsetTop += this.gridOptions.headerRowHeight; // filter row height
-        }
-        if (this.gridOptions && this.gridOptions.createPreHeaderPanel && this.gridOptions.showPreHeaderPanel && this.gridOptions.preHeaderPanelHeight) {
-          headerOffsetTop += this.gridOptions.preHeaderPanelHeight; // header grouping titles row height
-        }
-        headerOffsetTop += headerTitleRowHeight; // header title row height
-
-        const viewportPos = getHtmlElementOffset(viewportElm);
-        const viewportOffsetTop = viewportPos?.top ?? 0;
-
-        // if header row is Y coordinate 0 (happens when user is not in current Tab) or when header titles are lower than the viewport of dataset (this can happen when user change Tab and DOM is not shown)
-        // for these cases we'll resize until it's no longer true or until we reach a max time limit (70min)
-        const isResizeRequired = (headerPos?.top === 0 || (headerOffsetTop - viewportOffsetTop) > 40) ? true : false;
-
-        if (isResizeRequired && this.resizerService?.resizeGrid) {
-          this.resizerService.resizeGrid();
-        } else if ((!isResizeRequired && !this.gridOptions.useSalesforceDefaultGridOptions) || (this._intervalExecutionCounter++ > (4 * 60 * INTERVAL_MAX_MIN_RETRIES))) { // interval is 250ms, so 4x is 1sec, so (4 * 60 * intervalMaxTimeInMin) shoud be 70min
-          clearInterval(this._intervalId); // stop the interval if we don't need resize or if we passed let say 70min
-        }
-      }, 250);
-    }
-  }
-
   /**
    * For convenience to the user, we provide the property "editor" as an Slickgrid-Universal editor complex object
    * however "editor" is used internally by SlickGrid for it's own Editor Factory
diff --git a/packages/vanilla-bundle/src/index.ts b/packages/vanilla-bundle/src/index.ts
index ede5766cd..30b70acc9 100644
--- a/packages/vanilla-bundle/src/index.ts
+++ b/packages/vanilla-bundle/src/index.ts
@@ -23,3 +23,5 @@ if (typeof window !== 'undefined') {
 export { BindingService };
 export { Slicker };
 export { SlickVanillaGridBundle }; // just to export the interface
+export * from './interfaces/index';
+export * from './services/index';
diff --git a/packages/vanilla-bundle/src/interfaces/index.ts b/packages/vanilla-bundle/src/interfaces/index.ts
new file mode 100644
index 000000000..7778581f1
--- /dev/null
+++ b/packages/vanilla-bundle/src/interfaces/index.ts
@@ -0,0 +1 @@
+export * from './slickerGridInstance.interface';
diff --git a/packages/common/src/interfaces/slickerGridInstance.interface.ts b/packages/vanilla-bundle/src/interfaces/slickerGridInstance.interface.ts
similarity index 86%
rename from packages/common/src/interfaces/slickerGridInstance.interface.ts
rename to packages/vanilla-bundle/src/interfaces/slickerGridInstance.interface.ts
index 4473ef117..66d4e5b45 100644
--- a/packages/common/src/interfaces/slickerGridInstance.interface.ts
+++ b/packages/vanilla-bundle/src/interfaces/slickerGridInstance.interface.ts
@@ -1,16 +1,20 @@
-import { BackendService, SlickDataView, SlickGrid, SlickResizer, } from './index';
-import { ExtensionUtility } from '../extensions';
 import {
+  BackendService,
   ExtensionService,
+  ExtensionUtility,
   FilterService,
-  GridService,
   GridEventService,
+  GridService,
   GridStateService,
   GroupingAndColspanService,
   PaginationService,
+  SlickDataView,
+  SlickGrid,
   SortService,
-  TreeDataService
-} from '../services';
+  TreeDataService,
+} from '@slickgrid-universal/common';
+import { ResizerService } from '../services/resizer.service';
+
 
 export interface SlickerGridInstance {
   /** Slick DataView object */
@@ -56,7 +60,7 @@ export interface SlickerGridInstance {
   paginationService: PaginationService;
 
   /** Resizer Service (including auto-resize) */
-  resizerService: SlickResizer;
+  resizerService: ResizerService;
 
   /** Sort Service */
   sortService: SortService;
diff --git a/packages/vanilla-bundle/src/services/__tests__/resizer.service.spec.ts b/packages/vanilla-bundle/src/services/__tests__/resizer.service.spec.ts
new file mode 100644
index 000000000..cdf48bc2b
--- /dev/null
+++ b/packages/vanilla-bundle/src/services/__tests__/resizer.service.spec.ts
@@ -0,0 +1,244 @@
+import {
+  GridOption,
+  PubSubService,
+  SlickGrid,
+  SlickNamespace,
+} from '@slickgrid-universal/common';
+import { ResizerService } from '../resizer.service';
+import * as utilities from '@slickgrid-universal/common/dist/commonjs/services/utilities';
+
+const mockGetHtmlElementOffset = jest.fn();
+// @ts-ignore
+// utilities.getHtmlElementOffset = mockGetHtmlElementOffset;
+
+declare const Slick: SlickNamespace;
+const DATAGRID_FOOTER_HEIGHT = 25;
+const DATAGRID_PAGINATION_HEIGHT = 35;
+const GRID_UID = 'slickgrid_12345';
+
+jest.mock('flatpickr', () => { });
+// jest.useFakeTimers();
+
+const mockResizerImplementation = {
+  init: jest.fn(),
+  destroy: jest.fn(),
+  bindAutoResizeDataGrid: jest.fn(),
+  getLastResizeDimensions: jest.fn(),
+  pauseResizer: jest.fn(),
+  resizeGrid: jest.fn(),
+  onGridAfterResize: new Slick.Event(),
+  onGridBeforeResize: new Slick.Event(),
+};
+const mockAddon = jest.fn().mockImplementation(() => mockResizerImplementation);
+
+jest.mock('slickgrid/plugins/slick.resizer', () => mockAddon);
+
+// @ts-ignore
+Slick.Plugins = {
+  Resizer: mockAddon
+};
+
+const pubSubServiceStub = {
+  publish: jest.fn(),
+  subscribe: jest.fn(),
+  unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn(),
+} as PubSubService;
+
+const gridStub = {
+  autosizeColumns: jest.fn(),
+  getColumnIndex: jest.fn(),
+  getColumns: jest.fn(),
+  getOptions: jest.fn(),
+  getUID: () => GRID_UID,
+  registerPlugin: jest.fn(),
+  setColumns: jest.fn(),
+  setHeaderRowVisibility: jest.fn(),
+  setTopPanelVisibility: jest.fn(),
+  setPreHeaderPanelVisibility: jest.fn(),
+  setOptions: jest.fn(),
+  setSortColumns: jest.fn(),
+  onSort: new Slick.Event(),
+} as unknown as SlickGrid;
+
+describe('Resizer Service', () => {
+  let service: ResizerService;
+  let divContainer: HTMLDivElement;
+  let divHeaderElm: HTMLDivElement;
+  let divViewportElm: HTMLDivElement;
+  let mockGridOptions: GridOption;
+
+  beforeEach(() => {
+    divContainer = document.createElement('div');
+    divContainer.className = GRID_UID;
+    divViewportElm = document.createElement('div');
+    divViewportElm.className = `slick-viewport`;
+    divHeaderElm = document.createElement('div');
+    divHeaderElm.className = `slick-header`;
+    divViewportElm.appendChild(divHeaderElm);
+    divContainer.appendChild(divViewportElm);
+    document.body.appendChild(divContainer);
+
+    service = new ResizerService(pubSubServiceStub);
+    mockGridOptions = {
+      enableAutoResize: true,
+      autoResize: {
+        container: '.grid1'
+      }
+    } as GridOption;
+    jest.spyOn(gridStub, 'getOptions').mockReturnValue(mockGridOptions);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    service.dispose();
+  });
+
+  it('should create the service', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('registered addon', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should register the addon', () => {
+      service.init(gridStub, divContainer);
+      const instance = service.getAddonInstance();
+
+      expect(instance).toBeTruthy();
+      expect(mockAddon).toHaveBeenCalledWith({ container: '.grid1', gridContainer: divContainer, }, undefined);
+    });
+
+    it('should call internal event handler subscribe and expect the "onGridBeforeResize" event to be called when addon notify is called', () => {
+      const handlerSpy = jest.spyOn(service.eventHandler, 'subscribe');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+
+      service.init(gridStub, divContainer);
+      const instance = service.getAddonInstance();
+      instance.onGridBeforeResize.notify({ grid: gridStub }, new Slick.EventData(), gridStub);
+
+      expect(handlerSpy).toHaveBeenCalledTimes(2);
+      expect(handlerSpy).toHaveBeenCalledWith(
+        { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+        expect.anything()
+      );
+      expect(pubSubSpy).toHaveBeenCalledWith(`onGridBeforeResize`, { grid: gridStub });
+    });
+
+    it('should call internal event handler subscribe and expect the "onGridAfterResize" event to be called when addon notify is called', () => {
+      const handlerSpy = jest.spyOn(service.eventHandler, 'subscribe');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+
+      service.init(gridStub, divContainer);
+      const instance = service.getAddonInstance();
+      instance.onGridAfterResize.notify({ grid: gridStub, dimensions: { height: 200, width: 800 } }, new Slick.EventData(), gridStub);
+
+      expect(handlerSpy).toHaveBeenCalledTimes(2);
+      expect(handlerSpy).toHaveBeenCalledWith(
+        { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+        expect.anything()
+      );
+      expect(pubSubSpy).toHaveBeenCalledWith(`onGridAfterResize`, { grid: gridStub, dimensions: { height: 200, width: 800 } });
+    });
+
+    it('should dispose of the addon', () => {
+      service.init(gridStub, divContainer);
+
+      const instance = service.getAddonInstance();
+      const destroySpy = jest.spyOn(instance, 'destroy');
+      service.dispose();
+
+      expect(destroySpy).toHaveBeenCalled();
+    });
+
+    it('should call the plugin "getLastResizeDimensions" method and get last dimensions', () => {
+      service.init(gridStub, divContainer);
+      const instance = service.getAddonInstance();
+      const spy = jest.spyOn(instance, 'getLastResizeDimensions').mockReturnValue({ height: 200, width: 800 });
+
+      const dimensions = service.getLastResizeDimensions();
+
+      expect(spy).toHaveBeenCalled();
+      expect(dimensions).toEqual({ height: 200, width: 800 });
+    });
+
+    it('should call the plugin "pauseResizer" method', () => {
+      service.init(gridStub, divContainer);
+      const instance = service.getAddonInstance();
+      const spy = jest.spyOn(instance, 'pauseResizer');
+
+      service.pauseResizer(true);
+
+      expect(spy).toHaveBeenCalledWith(true);
+    });
+
+    it('should expect autoResize bottom padding to be added to default pagination padding', () => {
+      mockGridOptions = { autoResize: { bottomPadding: 50 } };
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue(mockGridOptions);
+
+      service.init(gridStub, divContainer);
+
+      expect(mockGridOptions.autoResize.bottomPadding).toEqual(50); // calculated by the lib
+    });
+
+    it('should expect autoResize bottom padding with custom footer height to be added to default pagination padding when "showCustomFooter" was enabled', () => {
+      mockGridOptions = { autoResize: { bottomPadding: 50 }, showCustomFooter: true };
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue(mockGridOptions);
+
+      service.init(gridStub, divContainer);
+
+      expect(mockGridOptions.autoResize.bottomPadding).toEqual(50 + DATAGRID_FOOTER_HEIGHT); // calculated by the lib
+    });
+
+    it('should expect autoResize bottom padding with pagination height to be added to default pagination padding when "enablePagination" was enabled', () => {
+      mockGridOptions = { autoResize: { bottomPadding: 50 }, enablePagination: true };
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue(mockGridOptions);
+
+      service.init(gridStub, divContainer);
+
+      expect(mockGridOptions.autoResize.bottomPadding).toEqual(50 + DATAGRID_PAGINATION_HEIGHT); // calculated by the lib
+    });
+
+    it('should set a fixed width when provided in the grid options', () => {
+      const fixedWidth = 255;
+      mockGridOptions = { autoCommitEdit: false, autoResize: { bottomPadding: 50 }, gridWidth: fixedWidth };
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue(mockGridOptions);
+
+      service.init(gridStub, divContainer);
+
+      expect(divContainer.style.width).toEqual(`${fixedWidth}px`);
+    });
+
+    // it('should try to resize grid when its UI is deemed broken and expect "resizeGridWhenStylingIsBrokenUntilCorrected" to be called on interval', () => {
+    //   const promise = new Promise((resolve, reject) => setTimeout(() => resolve({ height: 150, width: 350 }), 1));
+    //   const resizeSpy = jest.spyOn(mockResizerImplementation, 'resizeGrid').mockReturnValue(promise);
+    //   service.init(gridStub, divContainer);
+    //   // jest.spyOn(mockGetHtmlElementOffset, 'getHtmlElementOffset').mockReturnValue({ top: 20, left: 0 });
+    //   // @ts-ignore
+    //   jest.spyOn(divHeaderElm, 'getBoundingClientRect').mockReturnValue({ top: 10, left: 25 });
+    //   divHeaderElm.style.top = '10px';
+    //   divHeaderElm.style.left = '25px';
+
+    //   // jest.runAllTimers(); // fast-forward timer
+
+    //   expect(divContainer.outerHTML).toBeTruthy();
+    //   expect(resizeSpy).toHaveBeenCalledTimes(3);
+    //   // expect(mockGetHtmlElementOffset).toHaveBeenCalledWith(divHeaderElm);
+    // });
+
+    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));
+      jest.spyOn(mockResizerImplementation, 'resizeGrid').mockReturnValue(promise);
+
+      service.init(gridStub, divContainer);
+
+      setTimeout(() => {
+        expect(consoleSpy).toHaveBeenCalledWith('Error:', 'some error');
+        done();
+      }, 1);
+    });
+  });
+});
diff --git a/packages/vanilla-bundle/src/services/index.ts b/packages/vanilla-bundle/src/services/index.ts
index 34548df39..cff9c118c 100644
--- a/packages/vanilla-bundle/src/services/index.ts
+++ b/packages/vanilla-bundle/src/services/index.ts
@@ -2,3 +2,4 @@ export * from './binding.service';
 export * from './binding.helper';
 export * from './eventPubSub.service';
 export * from './fileExport.service';
+export * from './resizer.service';
diff --git a/packages/vanilla-bundle/src/services/resizer.service.ts b/packages/vanilla-bundle/src/services/resizer.service.ts
new file mode 100644
index 000000000..9638af9f5
--- /dev/null
+++ b/packages/vanilla-bundle/src/services/resizer.service.ts
@@ -0,0 +1,166 @@
+import {
+  getHtmlElementOffset,
+  GetSlickEventType,
+  GridOption,
+  GridSize,
+  PubSubService,
+  SlickEventData,
+  SlickEventHandler,
+  SlickGrid,
+  SlickNamespace,
+  SlickResizer,
+} from '@slickgrid-universal/common';
+
+// using external non-typed js libraries
+declare const Slick: SlickNamespace;
+const DATAGRID_FOOTER_HEIGHT = 25;
+const DATAGRID_PAGINATION_HEIGHT = 35;
+const INTERVAL_MAX_RETRIES = 70;
+const INTERVAL_RETRY_DELAY = 250;
+
+export class ResizerService {
+  private _grid: SlickGrid;
+  private _addon: SlickResizer;
+  private _eventHandler: SlickEventHandler;
+  private _intervalId: NodeJS.Timeout;
+  private _intervalExecutionCounter = 0;
+
+  get eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
+  }
+
+  /** Getter for the grid uid */
+  get gridUid(): string {
+    return this._grid?.getUID() ?? '';
+  }
+
+  constructor(private eventPubSubService: PubSubService) {
+    this._eventHandler = new Slick.EventHandler();
+  }
+
+  /** Get the instance of the SlickGrid addon (control or plugin). */
+  getAddonInstance(): SlickResizer | null {
+    return this._addon;
+  }
+
+  /** dispose (destroy) the 3rd party plugin */
+  dispose() {
+    this._addon?.destroy();
+  }
+
+  init(grid: SlickGrid, gridParentContainerElm: HTMLElement) {
+    this._grid = grid;
+    const fixedGridDimensions = (this.gridOptions?.gridHeight || this.gridOptions?.gridWidth) ? { height: this.gridOptions?.gridHeight, width: this.gridOptions?.gridWidth } : undefined;
+    const autoResizeOptions = this.gridOptions?.autoResize ?? { bottomPadding: 0 };
+    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.showCustomFooter) {
+      const footerHeight: string | number = this.gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
+      autoResizeOptions.bottomPadding += parseInt(`${footerHeight}`, 10);
+    }
+    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.enablePagination) {
+      autoResizeOptions.bottomPadding += DATAGRID_PAGINATION_HEIGHT;
+    }
+    if (fixedGridDimensions?.width && gridParentContainerElm?.style) {
+      gridParentContainerElm.style.width = `${fixedGridDimensions.width}px`;
+    }
+
+    this._addon = new Slick.Plugins.Resizer({ ...autoResizeOptions, gridContainer: gridParentContainerElm }, fixedGridDimensions);
+    this._grid.registerPlugin<SlickResizer>(this._addon);
+    if (this.gridOptions.enableAutoResize && this._addon?.resizeGrid() instanceof Promise) {
+      this._addon.resizeGrid()
+        .then(() => this.resizeGridWhenStylingIsBrokenUntilCorrected())
+        .catch((error: any) => console.log('Error:', error));
+    }
+
+    // Events
+    if (this.gridOptions.autoResize) {
+      if (this._addon && this._addon.onGridAfterResize) {
+        const onGridAfterResizeHandler = this._addon.onGridAfterResize;
+        (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onGridAfterResizeHandler>>).subscribe(onGridAfterResizeHandler, (e, args) => {
+          this.eventPubSubService.publish('onGridAfterResize', args);
+        });
+      }
+      if (this._addon && this._addon.onGridBeforeResize) {
+        const onGridBeforeResizeHandler = this._addon.onGridBeforeResize;
+        (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onGridBeforeResizeHandler>>).subscribe(onGridBeforeResizeHandler, (e, args) => {
+          this.eventPubSubService.publish('onGridBeforeResize', args);
+        });
+      }
+    }
+  }
+
+  /**
+	 * Return the last resize dimensions used by the service
+	 * @return {object} last dimensions (height: number, width: number)
+	 */
+  getLastResizeDimensions(): GridSize {
+    return this._addon?.getLastResizeDimensions();
+  }
+
+  /**
+   * Provide the possibility to pause the resizer for some time, until user decides to re-enabled it later if he wish to.
+   * @param {boolean} isResizePaused are we pausing the resizer?
+   */
+  pauseResizer(isResizePaused: boolean) {
+    this._addon.pauseResizer(isResizePaused);
+  }
+
+  /**
+   * Resize the datagrid to fit the browser height & width.
+   * @param {number} delay to wait before resizing, defaults to 0 (in milliseconds)
+   * @param {object} newSizes can optionally be passed (height: number, width: number)
+   * @param {object} event that triggered the resize, defaults to null
+   * @return If the browser supports it, we can return a Promise that would resolve with the new dimensions
+   */
+  resizeGrid(delay?: number, newSizes?: GridSize, event?: SlickEventData): Promise<GridSize> | null {
+    return this._addon?.resizeGrid(delay, newSizes, event);
+  }
+
+  /**
+   * Patch for SalesForce, some issues arise when having a grid inside a Tab and user clicks in a different Tab without waiting for the grid to be rendered
+   * in ideal world, we would simply call a resize when user comes back to the Tab with the grid (tab focused) but this is an extra step and we might not always have this event available.
+   * The grid seems broken, the header titles seems to be showing up behind the grid data and the rendering seems broken.
+   * Why it happens? Because SlickGrid can resize problem when the DOM element is hidden and that happens when user doesn't wait for the grid to be fully rendered and go in a different Tab.
+   *
+   * So the patch is to call a grid resize if the following 2 conditions are met
+   *   1- header row is Y coordinate 0 (happens when user is not in current Tab)
+   *   2- header titles are lower than the viewport of dataset (this can happen when user change Tab and DOM is not shown),
+   * for these cases we'll resize until it's no longer true or until we reach a max time limit (70min)
+   */
+  private resizeGridWhenStylingIsBrokenUntilCorrected() {
+    const headerElm = document.querySelector<HTMLDivElement>(`.${this.gridUid} .slick-header`);
+    const viewportElm = document.querySelector<HTMLDivElement>(`.${this.gridUid} .slick-viewport`);
+
+    if (headerElm && viewportElm) {
+      this._intervalId = setInterval(() => {
+        const headerTitleRowHeight = 44; // this one is set by SASS/CSS so let's hard code it
+        const headerPos = getHtmlElementOffset(headerElm);
+        let headerOffsetTop = headerPos?.top ?? 0;
+        if (this.gridOptions && this.gridOptions.enableFiltering && this.gridOptions.headerRowHeight) {
+          headerOffsetTop += this.gridOptions.headerRowHeight; // filter row height
+        }
+        if (this.gridOptions && this.gridOptions.createPreHeaderPanel && this.gridOptions.showPreHeaderPanel && this.gridOptions.preHeaderPanelHeight) {
+          headerOffsetTop += this.gridOptions.preHeaderPanelHeight; // header grouping titles row height
+        }
+        headerOffsetTop += headerTitleRowHeight; // header title row height
+
+        const viewportPos = getHtmlElementOffset(viewportElm);
+        const viewportOffsetTop = viewportPos?.top ?? 0;
+
+        // if header row is Y coordinate 0 (happens when user is not in current Tab) or when header titles are lower than the viewport of dataset (this can happen when user change Tab and DOM is not shown)
+        // for these cases we'll resize until it's no longer true or until we reach a max time limit (70min)
+        const isResizeRequired = (headerPos?.top === 0 || (headerOffsetTop - viewportOffsetTop) > 40) ? true : false;
+
+        if (isResizeRequired && this._addon?.resizeGrid) {
+          this._addon.resizeGrid();
+        } else if ((!isResizeRequired && !this.gridOptions.useSalesforceDefaultGridOptions) || (this._intervalExecutionCounter++ > (4 * 60 * INTERVAL_MAX_RETRIES))) { // interval is 250ms, so 4x is 1sec, so (4 * 60 * intervalMaxTimeInMin) shoud be 70min
+          clearInterval(this._intervalId); // stop the interval if we don't need resize or if we passed let say 70min
+        }
+      }, INTERVAL_RETRY_DELAY);
+    }
+  }
+}
diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js
index 15e51ed30..2fb8bff26 100644
--- a/test/cypress/integration/example07.spec.js
+++ b/test/cypress/integration/example07.spec.js
@@ -4,13 +4,6 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => {
   const GRID_ROW_HEIGHT = 45;
   const fullTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed'];
 
-  beforeEach(() => {
-    // create a console.log spy for later use
-    cy.window().then((win) => {
-      cy.spy(win.console, 'log');
-    });
-  });
-
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/example07`);
     cy.get('h3').should('contain', 'Example 07 - Row Move & Row Selections');
diff --git a/test/cypress/integration/example11.spec.js b/test/cypress/integration/example11.spec.js
new file mode 100644
index 000000000..0fd80d8af
--- /dev/null
+++ b/test/cypress/integration/example11.spec.js
@@ -0,0 +1,189 @@
+/// <reference types="Cypress" />
+
+describe('Example 11 - Queued Editing', () => {
+  const GRID_ROW_HEIGHT = 33;
+  const EDITABLE_CELL_RGB_COLOR = 'rgb(227, 240, 251)';
+  const UNSAVED_RGB_COLOR = 'rgb(251, 253, 209)';
+  const fullTitles = ['', 'Title', 'Duration', 'Cost', '% Complete', 'Start', 'Finish', 'Completed', 'Action'];
+
+  beforeEach(() => {
+    // create a console.log spy for later use
+    cy.window().then((win) => {
+      cy.spy(win.console, 'log');
+    });
+  });
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example11`);
+    cy.get('h3').should('contain', 'Example 11 - Queued Editing');
+  });
+
+
+  it('should have exact Column Titles in the grid', () => {
+    cy.get('.grid11')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have "TASK 0" (uppercase) incremented by 1 after each row', () => {
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 0');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 2');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 3');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 4');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 5');
+  });
+
+  it('should be able to change "Duration" values of first 4 rows', () => {
+    // change duration
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'days').click();
+    cy.get('.editor-duration').type('0').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`)
+      .should('contain', '0 day')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.editor-duration').type('1').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '1 day')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.editor-duration').type('2').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', '2 days')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.editor-duration').type('3').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(2)`).should('contain', '3 days')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+    cy.get('.editor-duration').type('{esc}');
+    cy.get('.editor-duration').should('not.exist');
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top');
+  });
+
+  it('should be able to change "Title" values of row indexes 1-3', () => {
+    // change title
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1').click();
+    cy.get('.editor-title').type('task 1111').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.editor-title').type('task 2222').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 2222')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.editor-title').type('task 3333').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 3333')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+    cy.get('.editor-title').type('{esc}');
+    cy.get('.editor-title').should('not.exist');
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top');
+  });
+
+  it('should be able to change "% Complete" values of row indexes 2-4', () => {
+    // change % complete
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 5).trigger('change').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '5')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 6).trigger('change').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).should('contain', '6')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 7).trigger('change').type('{enter}');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(4)`).should('contain', '7')
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top');
+  });
+
+  it('should be able to change "Finish" values of row row indexes 0-2', () => {
+    const today = new Date();
+    const currentDate = today.getDate();
+    let currentMonth = today.getMonth() + 1; // month is zero based, let's add 1 to it
+    if (currentMonth < 10) {
+      currentMonth = `0${currentMonth}`; // add zero padding
+    }
+    const currentYear = today.getFullYear();
+
+    // change Finish date to today's date
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '').click(); // this date should also always be initially empty
+    cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true });
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', `${currentYear}-${currentMonth}-${currentDate}`)
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(6)`).click();
+    cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true });
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(6)`).should('contain', `${currentYear}-${currentMonth}-${currentDate}`)
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).click();
+    cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true });
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', `${currentYear}-${currentMonth}-${currentDate}`)
+      .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR);
+
+    cy.get('.unsaved-editable-field')
+      .should('have.length', 13);
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top');
+  });
+
+  it('should undo last edit and expect the date editor to be opened as well when clicking the associated last undo with editor button', () => {
+    cy.get('[data-test=undo-open-editor-btn]').click();
+
+    cy.get('.flatpickr-calendar.open')
+      .should('exist');
+
+    cy.get('.unsaved-editable-field')
+      .should('have.length', 12);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '')
+      .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR);
+  });
+
+  it('should undo last edit and expect the date editor to NOT be opened when clicking undo last edit button', () => {
+    cy.get('[data-test=undo-last-edit-btn]').click();
+
+    cy.get('.flatpickr-calendar.open')
+      .should('not.exist');
+
+    cy.get('.unsaved-editable-field')
+      .should('have.length', 11);
+
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '')
+      .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR);
+  });
+
+  it('should click on the "Save" button and expect 2 console log calls with the queued items & also expect no more unsaved cells', () => {
+    cy.get('[data-test=save-all-btn]').click();
+
+    cy.get('.unsaved-editable-field')
+      .should('have.length', 0);
+
+    cy.window().then((win) => {
+      expect(win.console.log).to.have.callCount(2);
+      // expect(win.console.log).to.be.calledWith(Array[11]);
+    });
+  });
+
+  it('should be able to toggle the grid to readonly', () => {
+    cy.get('[data-test=toggle-readonly-btn]').click();
+
+    cy.get('.editable-field')
+      .should('have.length', 0);
+  });
+
+  it('should be able to toggle back the grid to editable', () => {
+    cy.get('[data-test=toggle-readonly-btn]').click();
+
+    cy.get('.editable-field')
+      .should('not.have.length', 0);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 6442728d7..e05d32cf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1610,10 +1610,10 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^26.0.4":
-  version "26.0.4"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.4.tgz#d2e513e85aca16992816f192582b5e67b0b15efb"
-  integrity sha512-4fQNItvelbNA9+sFgU+fhJo8ZFF+AS4Egk3GWwCW2jFtViukXbnztccafAdLhzE/0EiCogljtQQXP8aQ9J7sFg==
+"@types/jest@^26.0.7":
+  version "26.0.7"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.7.tgz#495cb1d1818c1699dbc3b8b046baf1c86ef5e324"
+  integrity sha512-+x0077/LoN6MjqBcVOe1y9dpryWnfDZ+Xfo3EqGeBcfPRJlQp3Lw62RvNlWxuGv7kOEwlHriAa54updi3Jvvwg==
   dependencies:
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
@@ -1630,6 +1630,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
+"@types/json-schema@^7.0.5":
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -1662,15 +1667,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.0.tgz#acaa89247afddc7967e9902fd11761dadea1a555"
   integrity sha512-j2tekvJCO7j22cs+LO6i0kRPhmQ9MXaPZ55TzOc1lzkN5b6BWqq4AFjl04s1oRRQ1v5rSe+KEvnLUSTonuls/A==
 
-"@types/node@^14.0.19":
-  version "14.0.19"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.19.tgz#994d99708822bca643a2364f8aeed04a16e0f5a1"
-  integrity sha512-yf3BP/NIXF37BjrK5klu//asUWitOEoUP5xE1mhSUjazotwJ/eJDgEmMQNlOeWOVv72j24QQ+3bqXHE++CFGag==
-
-"@types/node@^14.0.23":
-  version "14.0.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.23.tgz#676fa0883450ed9da0bb24156213636290892806"
-  integrity sha512-Z4U8yDAl5TFkmYsZdFPdjeMa57NOvnaf1tljHzhouaPEp7LCj2JKkejpI1ODviIAQuW4CcQmxkQ77rnLsOOoKw==
+"@types/node@^14.0.26":
+  version "14.0.26"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
+  integrity sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1781,52 +1781,52 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.6.0.tgz#ba2b6cae478b8fca3f2e58ff1313e4198eea2d8a"
-  integrity sha512-ubHlHVt1lsPQB/CZdEov9XuOFhNG9YRC//kuiS1cMQI6Bs1SsqKrEmZnpgRwthGR09/kEDtr9MywlqXyyYd8GA==
+"@typescript-eslint/eslint-plugin@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.7.0.tgz#0f91aa3c83d019591719e597fbdb73a59595a263"
+  integrity sha512-4OEcPON3QIx0ntsuiuFP/TkldmBGXf0uKxPQlGtS/W2F3ndYm8Vgdpj/woPJkzUc65gd3iR+qi3K8SDQP/obFg==
   dependencies:
-    "@typescript-eslint/experimental-utils" "3.6.0"
+    "@typescript-eslint/experimental-utils" "3.7.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.6.0.tgz#0138152d66e3e53a6340f606793fb257bf2d76a1"
-  integrity sha512-4Vdf2hvYMUnTdkCNZu+yYlFtL2v+N2R7JOynIOkFbPjf9o9wQvRwRkzUdWlFd2YiiUwJLbuuLnl5civNg5ykOQ==
+"@typescript-eslint/experimental-utils@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.7.0.tgz#0ee21f6c48b2b30c63211da23827725078d5169a"
+  integrity sha512-xpfXXAfZqhhqs5RPQBfAFrWDHoNxD5+sVB5A46TF58Bq1hRfVROrWHcQHHUM9aCBdy9+cwATcvCbRg8aIRbaHQ==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/types" "3.6.0"
-    "@typescript-eslint/typescript-estree" "3.6.0"
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/typescript-estree" "3.7.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.6.0.tgz#79b5232e1a2d06f1fc745942b690cd87aca7b60e"
-  integrity sha512-taghDxuLhbDAD1U5Fk8vF+MnR0yiFE9Z3v2/bYScFb0N1I9SK8eKHkdJl1DAD48OGFDMFTeOTX0z7g0W6SYUXw==
+"@typescript-eslint/parser@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.7.0.tgz#3e9cd9df9ea644536feb6e5acdb8279ecff96ce9"
+  integrity sha512-2LZauVUt7jAWkcIW7djUc3kyW+fSarNEuM3RF2JdLHR9BfX/nDEnyA4/uWz0wseoWVZbDXDF7iF9Jc342flNqQ==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "3.6.0"
-    "@typescript-eslint/types" "3.6.0"
-    "@typescript-eslint/typescript-estree" "3.6.0"
+    "@typescript-eslint/experimental-utils" "3.7.0"
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/typescript-estree" "3.7.0"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/types@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.6.0.tgz#4bd6eee55d2f9d35a4b36c4804be1880bf68f7bc"
-  integrity sha512-JwVj74ohUSt0ZPG+LZ7hb95fW8DFOqBuR6gE7qzq55KDI3BepqsCtHfBIoa0+Xi1AI7fq5nCu2VQL8z4eYftqg==
+"@typescript-eslint/types@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.7.0.tgz#09897fab0cb95479c01166b10b2c03c224821077"
+  integrity sha512-reCaK+hyKkKF+itoylAnLzFeNYAEktB0XVfSQvf0gcVgpz1l49Lt6Vo9x4MVCCxiDydA0iLAjTF/ODH0pbfnpg==
 
-"@typescript-eslint/typescript-estree@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.6.0.tgz#9b4cab43f1192b64ff51530815b8919f166ce177"
-  integrity sha512-G57NDSABHjvob7zVV09ehWyD1K6/YUKjz5+AufObFyjNO4DVmKejj47MHjVHHlZZKgmpJD2yyH9lfCXHrPITFg==
+"@typescript-eslint/typescript-estree@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.7.0.tgz#66872e6da120caa4b64e6b4ca5c8702afc74738d"
+  integrity sha512-xr5oobkYRebejlACGr1TJ0Z/r0a2/HUf0SXqPvlgUMwiMqOCu/J+/Dr9U3T0IxpE5oLFSkqMx1FE/dKaZ8KsOQ==
   dependencies:
-    "@typescript-eslint/types" "3.6.0"
-    "@typescript-eslint/visitor-keys" "3.6.0"
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/visitor-keys" "3.7.0"
     debug "^4.1.1"
     glob "^7.1.6"
     is-glob "^4.0.1"
@@ -1834,10 +1834,10 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/visitor-keys@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.6.0.tgz#44185eb0cc47651034faa95c5e2e8b314ecebb26"
-  integrity sha512-p1izllL2Ubwunite0ITjubuMQRBGgjdVYwyG7lXPX8GbrA6qF0uwSRz9MnXZaHMxID4948gX0Ez8v9tUDi/KfQ==
+"@typescript-eslint/visitor-keys@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.7.0.tgz#ac0417d382a136e4571a0b0dcfe52088cb628177"
+  integrity sha512-k5PiZdB4vklUpUX4NBncn5RBKty8G3ihTY+hqJsCdMuD0v4jofI5xuqwnVcWxfv6iTm2P/dfEa2wMUnsUY8ODw==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
@@ -2059,10 +2059,10 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
   integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
 
-acorn@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
-  integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
+acorn@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
+  integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
 
 agent-base@4, agent-base@^4.3.0:
   version "4.3.0"
@@ -2259,18 +2259,18 @@ archiver-utils@^2.1.0:
     normalize-path "^3.0.0"
     readable-stream "^2.0.0"
 
-archiver@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/archiver/-/archiver-4.0.2.tgz#43c72865eadb4ddaaa2fb74852527b6a450d927c"
-  integrity sha512-B9IZjlGwaxF33UN4oPbfBkyA4V1SxNLeIhR1qY8sRXSsbdUkEHrrOvwlYFPx+8uQeCe9M+FG6KgO+imDmQ79CQ==
+archiver@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-5.0.0.tgz#b1e7dc075a4e18e0aa59afdd7c3e5f3d3321cbeb"
+  integrity sha512-AEWhJz6Yi6hWtN1Sqy/H4sZo/lLMJ/NftXxGaDy/TnOMmmjsRaZc/Ts+U4BsPoBQkuunTN6t8hk7iU9A+HBxLw==
   dependencies:
     archiver-utils "^2.1.0"
     async "^3.2.0"
     buffer-crc32 "^0.2.1"
-    glob "^7.1.6"
     readable-stream "^3.6.0"
+    readdir-glob "^1.0.0"
     tar-stream "^2.1.2"
-    zip-stream "^3.0.1"
+    zip-stream "^4.0.0"
 
 are-we-there-yet@~1.1.2:
   version "1.1.5"
@@ -3114,6 +3114,14 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3163,6 +3171,21 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
+  integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.1.1, chownr@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -3409,15 +3432,15 @@ component-emitter@^1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-compress-commons@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-3.0.0.tgz#833944d84596e537224dd91cf92f5246823d4f1d"
-  integrity sha512-FyDqr8TKX5/X0qo+aVfaZ+PVmNJHJeckFBlq8jZGSJOgnynhfifoyl24qaqdUdDIBe0EVTHByN6NAkqYvE/2Xg==
+compress-commons@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-4.0.1.tgz#c5fa908a791a0c71329fba211d73cd2a32005ea8"
+  integrity sha512-xZm9o6iikekkI0GnXCmAl3LQGZj5TBDj0zLowsqi7tJtEa3FMGSEcHcqrSJIrOAk1UG/NBbDn/F1q+MG/p/EsA==
   dependencies:
     buffer-crc32 "^0.2.13"
-    crc32-stream "^3.0.1"
+    crc32-stream "^4.0.0"
     normalize-path "^3.0.0"
-    readable-stream "^2.3.7"
+    readable-stream "^3.6.0"
 
 compressible@~2.0.16:
   version "2.0.18"
@@ -3698,10 +3721,10 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-crc32-stream@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-3.0.1.tgz#cae6eeed003b0e44d739d279de5ae63b171b4e85"
-  integrity sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==
+crc32-stream@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-4.0.0.tgz#05b7ca047d831e98c215538666f372b756d91893"
+  integrity sha512-tyMw2IeUX6t9jhgXI6um0eKfWq4EIDpfv5m7GX4Jzp7eVelQ360xd8EPXJhp2mHwLQIkqlnMLjzqSZI3a+0wRw==
   dependencies:
     crc "^3.4.4"
     readable-stream "^3.4.0"
@@ -3810,24 +3833,24 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-loader@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
-  integrity sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==
+css-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.0.0.tgz#814434d4e1e2d5f430c70e85e78268db7f3cced1"
+  integrity sha512-/7d5slKnmY2S39FNifJ7JQ8MhcMM/rDIjAZ2Sc/Z8lnOWOmc10hijg28ovBtljY364pQaF01O2nj5AIBDnJ9vQ==
   dependencies:
-    camelcase "^5.3.1"
+    camelcase "^6.0.0"
     cssesc "^3.0.0"
     icss-utils "^4.1.1"
-    loader-utils "^1.2.3"
+    loader-utils "^2.0.0"
     normalize-path "^3.0.0"
     postcss "^7.0.32"
     postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-local-by-default "^3.0.3"
     postcss-modules-scope "^2.2.0"
     postcss-modules-values "^3.0.0"
     postcss-value-parser "^4.1.0"
     schema-utils "^2.7.0"
-    semver "^6.3.0"
+    semver "^7.3.2"
 
 css-select@^1.1.0:
   version "1.2.0"
@@ -4494,7 +4517,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
+enhanced-resolve@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
   integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
@@ -4503,10 +4526,10 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz#5d43bda4a0fd447cb0ebbe71bef8deff8805ad0d"
-  integrity sha512-S7eiFb/erugyd1rLb6mQ3Vuq+EXHv5cpCkNqqIkYkBgN2QdFnyCZzFBleqwGEx4lgNGYij81BWnCrFNK7vxvjQ==
+enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
+  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.5.0"
@@ -4698,10 +4721,10 @@ eslint-plugin-import@^2.22.0:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
-eslint-plugin-prefer-arrow@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.1.tgz#9e2943cdae4476e41f94f50dd7a250f267db6865"
-  integrity sha512-CPAvdTGG0YbFAJrUKdRBrOJ0X1I7jTtF5VIM4m2Bw1/A2jrhfUeUAcPy4pAEB5DNaUuDqc59f3pKTeiVeamS1A==
+eslint-plugin-prefer-arrow@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.2.tgz#0c6d25a6b94cb3e0110a23d129760af5860edb6e"
+  integrity sha512-C8YMhL+r8RMeMdYAw/rQtE6xNdMulj+zGWud/qIGnlmomiPRaLDGLMeskZ3alN6uMBojmooRimtdrXebLN4svQ==
 
 eslint-scope@^4.0.3:
   version "4.0.3"
@@ -4734,20 +4757,27 @@ eslint-utils@^2.0.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint-visitor-keys@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz#74415ac884874495f78ec2a97349525344c981fa"
-  integrity sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==
+eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
-eslint@^7.4.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.4.0.tgz#4e35a2697e6c1972f9d6ef2b690ad319f80f206f"
-  integrity sha512-gU+lxhlPHu45H3JkEGgYhWhkR9wLHHEXC9FbWFnTlEkbKyZKWgWRLgf61E8zWmBuI6g5xKBph9ltg3NtZMVF8g==
+eslint@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.5.0.tgz#9ecbfad62216d223b82ac9ffea7ef3444671d135"
+  integrity sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
@@ -4757,9 +4787,9 @@ eslint@^7.4.0:
     doctrine "^3.0.0"
     enquirer "^2.3.5"
     eslint-scope "^5.1.0"
-    eslint-utils "^2.0.0"
-    eslint-visitor-keys "^1.2.0"
-    espree "^7.1.0"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^7.2.0"
     esquery "^1.2.0"
     esutils "^2.0.2"
     file-entry-cache "^5.0.1"
@@ -4773,7 +4803,7 @@ eslint@^7.4.0:
     js-yaml "^3.13.1"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
-    lodash "^4.17.14"
+    lodash "^4.17.19"
     minimatch "^3.0.4"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
@@ -4786,14 +4816,14 @@ eslint@^7.4.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.1.0.tgz#a9c7f18a752056735bf1ba14cb1b70adc3a5ce1c"
-  integrity sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==
+espree@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.2.0.tgz#1c263d5b513dbad0ac30c4991b93ac354e948d69"
+  integrity sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==
   dependencies:
-    acorn "^7.2.0"
+    acorn "^7.3.1"
     acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.2.0"
+    eslint-visitor-keys "^1.3.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
@@ -5336,20 +5366,21 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-fork-ts-checker-webpack-plugin@^5.0.7:
-  version "5.0.7"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.0.7.tgz#a462bd863bbd654bad14a25518006ab99b7b13a0"
-  integrity sha512-X7zHKTx4is5YSKa9bDiXGzv8v5K3bsUrZlZgr3F8DeCVsb3oik/+0Mo+K138Sdjh4mpzoHcuUgsrIgZeLIXovw==
+fork-ts-checker-webpack-plugin@^5.0.11:
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.0.11.tgz#40a49a45403910c118c6ae7f3415dbdb317e4574"
+  integrity sha512-7QFCTfjayFhoX7uxncnHHi3ICWwffUQMoYaHldElA6wYy/9aDTsRIi6QcS8MDAkZa7xdDyv0YKuqcGYjAzboyQ==
   dependencies:
     "@babel/code-frame" "^7.8.3"
-    chalk "^2.4.1"
+    "@types/json-schema" "^7.0.5"
+    chalk "^4.1.0"
     cosmiconfig "^6.0.0"
     deepmerge "^4.2.2"
     fs-extra "^9.0.0"
     memfs "^3.1.2"
     minimatch "^3.0.4"
-    schema-utils "1.0.0"
-    semver "^5.6.0"
+    schema-utils "2.7.0"
+    semver "^7.3.2"
     tapable "^1.0.0"
 
 form-data@~2.3.2:
@@ -6109,10 +6140,10 @@ http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
-"http-parser-js@>=0.4.0 <0.4.11":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
-  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
+http-parser-js@>=0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
+  integrity sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==
 
 http-proxy-agent@^2.1.0:
   version "2.1.0"
@@ -6132,16 +6163,7 @@ http-proxy-middleware@0.19.1:
     lodash "^4.17.11"
     micromatch "^3.1.10"
 
-http-proxy@^1.17.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
-  integrity sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
-http-proxy@^1.18.0:
+http-proxy@^1.17.0, http-proxy@^1.18.0:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
   integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
@@ -6698,20 +6720,20 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
-is-regex@^1.0.4, is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
-  dependencies:
-    has "^1.0.3"
-
-is-regex@^1.1.0:
+is-regex@^1.0.4, is-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
   integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
   dependencies:
     has-symbols "^1.0.1"
 
+is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
+  dependencies:
+    has "^1.0.3"
+
 is-set@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
@@ -7923,7 +7945,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.19:
+lodash@4.17.19, lodash@^4.17.19:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -8243,27 +8265,39 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
+mime-db@1.43.0:
   version "1.43.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
   integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
 
-mime-types@^2.1.12, mime-types@^2.1.26, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-db@1.44.0, "mime-db@>= 1.43.0 < 2":
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
+mime-types@^2.1.12, mime-types@^2.1.26, mime-types@~2.1.19:
   version "2.1.26"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
   integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
   dependencies:
     mime-db "1.43.0"
 
+mime-types@~2.1.17, mime-types@~2.1.24:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+  dependencies:
+    mime-db "1.44.0"
+
 mime@1.6.0, mime@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
 mime@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
-  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
 
 mimic-fn@^1.0.0:
   version "1.2.0"
@@ -9021,9 +9055,12 @@ object-inspect@^1.7.0:
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
 object-is@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
-  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
 
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
@@ -9634,7 +9671,7 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-portfinder@^1.0.25, portfinder@^1.0.26:
+portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
   integrity sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==
@@ -9643,6 +9680,15 @@ portfinder@^1.0.25, portfinder@^1.0.26:
     debug "^3.1.1"
     mkdirp "^0.5.1"
 
+portfinder@^1.0.26:
+  version "1.0.27"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.27.tgz#a41333c116b5e5f3d380f9745ac2f35084c4c758"
+  integrity sha512-bJ3U3MThKnyJ9Dx1Idtm5pQmxXqw08+XOHhi/Lie8OF1OlhVaBFhsntAIhkZYjfDcCzszSr0w1yCbccThhzgxQ==
+  dependencies:
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.1"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -9681,15 +9727,15 @@ postcss-modules-extract-imports@^2.0.0:
   dependencies:
     postcss "^7.0.5"
 
-postcss-modules-local-by-default@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
-  integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
+postcss-modules-local-by-default@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
+  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
   dependencies:
     icss-utils "^4.1.1"
-    postcss "^7.0.16"
+    postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.0"
+    postcss-value-parser "^4.1.0"
 
 postcss-modules-scope@^2.2.0:
   version "2.2.0"
@@ -9726,17 +9772,12 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-value-parser@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
-  integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
-
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
+postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.27"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
   integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
@@ -10207,7 +10248,7 @@ read@1, read@~1.0.1:
   dependencies:
     mute-stream "~0.0.4"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@^2.3.7, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -10239,6 +10280,13 @@ readable-stream@~1.0.31:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readdir-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/readdir-glob/-/readdir-glob-1.0.0.tgz#a495436934bbe57be6a68039d16e8946621eb8c5"
+  integrity sha512-km0DIcwQVZ1ZUhXhMWpF74/Wm5aFEd5/jDiVWF1Hkw2myPQovG8vCQ8+FQO2KXE9npQQvCnAMZhhWuUee4WcCQ==
+  dependencies:
+    minimatch "^3.0.4"
+
 readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -10265,6 +10313,13 @@ readdirp@~3.3.0:
   dependencies:
     picomatch "^2.0.7"
 
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -10594,7 +10649,12 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+safe-buffer@>=5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
@@ -10654,7 +10714,16 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-schema-utils@1.0.0, schema-utils@^1.0.0:
+schema-utils@2.7.0, schema-utils@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
   integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
@@ -10679,15 +10748,6 @@ schema-utils@^2.6.6:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-schema-utils@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
-  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
-  dependencies:
-    "@types/json-schema" "^7.0.4"
-    ajv "^6.12.2"
-    ajv-keywords "^3.4.1"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -10917,10 +10977,10 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-slickgrid@^2.4.25:
-  version "2.4.25"
-  resolved "https://registry.yarnpkg.com/slickgrid/-/slickgrid-2.4.25.tgz#3efc8223cf5d32db8dc8197bd675b75c5f68ff65"
-  integrity sha512-wN4LPby5gCGF59Z+NrD45m2+YgoC3AxCanIyabFAPu7lEr5R8Jn+X3JVHilHOfdlYIN35xwPnF69Q++Mh/R+FQ==
+slickgrid@^2.4.27:
+  version "2.4.27"
+  resolved "https://registry.yarnpkg.com/slickgrid/-/slickgrid-2.4.27.tgz#06f2e4e90f7dab9a5eb3d1864ce45cd4bd1fa739"
+  integrity sha512-YnQXR0oww1ZpUtbsD/IdX+ydsxo8/fSEH5uMewQj2OooCoF/rsN8lrOqHFqqE8/Ob1NqXiVWMrWcO2Oqyyo/Ag==
   dependencies:
     jquery ">=1.8.0"
     jquery-ui ">=1.8.0"
@@ -12297,14 +12357,23 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-watchpack@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
-  integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
+watchpack-chokidar2@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
+  integrity sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==
   dependencies:
     chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.4.tgz#6e9da53b3c80bb2d6508188f5b200410866cd30b"
+  integrity sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg==
+  dependencies:
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.0"
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
@@ -12423,10 +12492,10 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.43.0:
-  version "4.43.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
-  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
+webpack@^4.44.0:
+  version "4.44.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.0.tgz#3b08f88a89470175f036f4a9496b8a0428668802"
+  integrity sha512-wAuJxK123sqAw31SpkPiPW3iKHgFUiKvO7E7UZjtdExcsRe3fgav4mvoMM7vvpjLHVoJ6a0Mtp2fzkoA13e0Zw==
   dependencies:
     "@webassemblyjs/ast" "1.9.0"
     "@webassemblyjs/helper-module-context" "1.9.0"
@@ -12436,7 +12505,7 @@ webpack@^4.43.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.1.0"
+    enhanced-resolve "^4.3.0"
     eslint-scope "^4.0.3"
     json-parse-better-errors "^1.0.2"
     loader-runner "^2.4.0"
@@ -12449,7 +12518,7 @@ webpack@^4.43.0:
     schema-utils "^1.0.0"
     tapable "^1.1.3"
     terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.1"
+    watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
 websocket-driver@0.6.5:
@@ -12460,18 +12529,18 @@ websocket-driver@0.6.5:
     websocket-extensions ">=0.1.1"
 
 websocket-driver@>=0.5.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
-  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
   dependencies:
-    http-parser-js ">=0.4.0 <0.4.11"
+    http-parser-js ">=0.5.1"
     safe-buffer ">=5.1.0"
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 whatwg-encoding@^1.0.5:
   version "1.0.5"
@@ -12824,11 +12893,11 @@ yn@3.1.1:
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
-zip-stream@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-3.0.1.tgz#cb8db9d324a76c09f9b76b31a12a48638b0b9708"
-  integrity sha512-r+JdDipt93ttDjsOVPU5zaq5bAyY+3H19bDrThkvuVxC0xMQzU1PJcS6D+KrP3u96gH9XLomcHPb+2skoDjulQ==
+zip-stream@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.0.2.tgz#3a20f1bd7729c2b59fd4efa04df5eb7a5a217d2e"
+  integrity sha512-TGxB2g+1ur6MHkvM644DuZr8Uzyz0k0OYWtS3YlpfWBEmK4woaC2t3+pozEL3dBfIPmpgmClR5B2QRcMgGt22g==
   dependencies:
     archiver-utils "^2.1.0"
-    compress-commons "^3.0.0"
+    compress-commons "^4.0.0"
     readable-stream "^3.6.0"