From a08b0f8f80ec1ce994dd71a3fde20fb85fdb2541 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Fri, 27 Oct 2023 11:05:57 -0400
Subject: [PATCH 1/3] fix: dynamically create CSS rules via JS instead of
 innerHTML (#883)

* fix: dynamically create CSS rules via JS instead of innerHTML
- potentially fixes #878, not sure

* chore: apply nonce property on dynamic style
---
 src/slick.grid.ts | 45 ++++++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 833c61e0..fd0727d9 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -350,7 +350,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected _topPanels!: HTMLDivElement[];
   protected _viewport!: HTMLDivElement[];
   protected _canvas!: HTMLDivElement[];
-  protected _style: any;
+  protected _style?: HTMLStyleElement;
   protected _boundAncestors: HTMLElement[] = [];
   protected stylesheet?: { cssRules: Array<{ selectorText: string; }>; rules: Array<{ selectorText: string; }>; } | null;
   protected columnCssRulesL?: Array<{ selectorText: string; }>;
@@ -2299,33 +2299,28 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected createCssRules() {
-    const template = Utils.createDomElement('template', { innerHTML: '<style type="text/css" rel="stylesheet" />' });
-    this._style = template.content.firstChild;
+    this._style = document.createElement('style');
+    this._style.nonce = 'random-string';
     document.head.appendChild(this._style);
 
-    const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
-    const rules = [
-      `.${this.uid} .slick-group-header-column { left: 1000px; }`,
-      `.${this.uid} .slick-header-column { left: 1000px; }`,
-      `.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`,
-      `.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`,
-      `.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`,
-      `.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`,
-      `.${this.uid} .slick-cell { height: ${rowHeight}px; }`,
-      `.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`
-    ];
+    const sheet = this._style.sheet;
+    if (sheet) {
+      const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
+      sheet.insertRule(`.${this.uid} .slick-group-header-column { left: 1000px; }`);
+      sheet.insertRule(`.${this.uid} .slick-header-column { left: 1000px; }`);
+      sheet.insertRule(`.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-cell { height: ${rowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`);
 
-    for (let i = 0; i < this.columns.length; i++) {
-      if (!this.columns[i] || this.columns[i].hidden) { continue; }
-
-      rules.push(`.${this.uid} .l${i} { }`);
-      rules.push(`.${this.uid} .r${i} { }`);
-    }
+      for (let i = 0; i < this.columns.length; i++) {
+        if (!this.columns[i] || this.columns[i].hidden) { continue; }
 
-    if (this._style.styleSheet) { // IE
-      this._style.styleSheet.cssText = rules.join(' ');
-    } else {
-      this._style.appendChild(document.createTextNode(rules.join(' ')));
+        sheet.insertRule(`.${this.uid} .l${i} { }`);
+        sheet.insertRule(`.${this.uid} .r${i} { }`);
+      }
     }
   }
 
@@ -2369,7 +2364,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected removeCssRules() {
-    this._style.remove();
+    this._style?.remove();
     this.stylesheet = null;
   }
 

From 53ab293e6fc862a2c4fa3729cb11f0b916b66bc2 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Fri, 27 Oct 2023 16:25:10 -0400
Subject: [PATCH 2/3] fix: replace a few innerHTML by more secure alternatives
 (#885)

---
 src/controls/slick.columnmenu.ts   | 2 +-
 src/controls/slick.columnpicker.ts | 2 +-
 src/controls/slick.gridmenu.ts     | 2 +-
 src/controls/slick.pager.ts        | 2 +-
 src/plugins/slick.contextmenu.ts   | 2 +-
 src/slick.grid.ts                  | 6 +++---
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/controls/slick.columnmenu.ts b/src/controls/slick.columnmenu.ts
index 048418ba..b8994595 100644
--- a/src/controls/slick.columnmenu.ts
+++ b/src/controls/slick.columnmenu.ts
@@ -81,7 +81,7 @@ export class SlickColumnMenu {
     const spanCloseElm = document.createElement('span');
     spanCloseElm.className = 'close';
     spanCloseElm.ariaHidden = 'true';
-    spanCloseElm.innerHTML = '&times;';
+    spanCloseElm.textContent = '×';
     buttonElm.appendChild(spanCloseElm);
     this._menuElm.appendChild(buttonElm);
 
diff --git a/src/controls/slick.columnpicker.ts b/src/controls/slick.columnpicker.ts
index 8763a7c5..fc9627df 100644
--- a/src/controls/slick.columnpicker.ts
+++ b/src/controls/slick.columnpicker.ts
@@ -82,7 +82,7 @@ export class SlickColumnPicker {
     const spanCloseElm = document.createElement('span');
     spanCloseElm.className = 'close';
     spanCloseElm.ariaHidden = 'true';
-    spanCloseElm.innerHTML = '&times;';
+    spanCloseElm.textContent = '×';
     buttonElm.appendChild(spanCloseElm);
     this._menuElm.appendChild(buttonElm);
 
diff --git a/src/controls/slick.gridmenu.ts b/src/controls/slick.gridmenu.ts
index b40ce27f..b961b4d1 100644
--- a/src/controls/slick.gridmenu.ts
+++ b/src/controls/slick.gridmenu.ts
@@ -315,7 +315,7 @@ export class SlickGridMenu {
       const spanCloseElm = document.createElement('span');
       spanCloseElm.className = 'close';
       spanCloseElm.ariaHidden = 'true';
-      spanCloseElm.innerHTML = '&times;';
+      spanCloseElm.textContent = '×';
       closeButtonElm.appendChild(spanCloseElm);
       menuElm.appendChild(closeButtonElm);
     }
diff --git a/src/controls/slick.pager.ts b/src/controls/slick.pager.ts
index 6249371e..18db4757 100644
--- a/src/controls/slick.pager.ts
+++ b/src/controls/slick.pager.ts
@@ -61,7 +61,7 @@ export class SlickGridPager {
   destroy() {
     this.setPageSize(0);
     this._bindingEventService.unbindAll();
-    this._container.innerHTML = '';
+    Utils.emptyElement(this._container);
   }
 
   protected getNavState() {
diff --git a/src/plugins/slick.contextmenu.ts b/src/plugins/slick.contextmenu.ts
index 492d6760..26bcb995 100644
--- a/src/plugins/slick.contextmenu.ts
+++ b/src/plugins/slick.contextmenu.ts
@@ -348,7 +348,7 @@ export class SlickContextMenu implements SlickPlugin {
       const spanCloseElm = document.createElement('span');
       spanCloseElm.className = 'close';
       spanCloseElm.ariaHidden = 'true';
-      spanCloseElm.innerHTML = '&times;';
+      spanCloseElm.textContent = '×';
       closeButtonElm.appendChild(spanCloseElm);
     }
 
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index fd0727d9..85abecfe 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -2971,7 +2971,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         }
       }
 
-      cellEl.innerHTML = maxText;
+      cellEl.textContent = maxText;
       len = cellEl.offsetWidth;
 
       rowEl.remove();
@@ -4085,7 +4085,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         formatterResult = this.getFormatter(row, m)(row, columnIdx, this.getDataItemValueForColumn(d, m), m, d, this as unknown as SlickGridModel);
         this.applyFormatResultToCellNode(formatterResult, node as HTMLDivElement);
       } else {
-        node.innerHTML = '';
+        Utils.emptyElement(node);
       }
     }
 
@@ -5766,7 +5766,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     // don't clear the cell if a custom editor is passed through
     if (!editor && !useEditor.suppressClearOnEdit) {
-      this.activeCellNode.innerHTML = '';
+      Utils.emptyElement(this.activeCellNode);
     }
 
     let metadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(this.activeRow);

From 338ea2aa62337cba37e2e19cf9c6cac5fd884ccd Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Fri, 27 Oct 2023 17:03:34 -0400
Subject: [PATCH 3/3] fix: sub-menu event listeners leaking when closing
 sub-menus (#888)

- when a sub-menu is closed, we remove it from the DOM but we also need to remove any click event listeners attached to all list items
---
 src/controls/slick.gridmenu.ts   |  9 ++++++---
 src/models/core.interface.ts     |  1 +
 src/plugins/slick.cellmenu.ts    | 12 +++++++++---
 src/plugins/slick.contextmenu.ts | 12 +++++++++---
 src/plugins/slick.headermenu.ts  |  7 ++++++-
 src/slick.core.ts                | 33 +++++++++++++++++++++++++-------
 6 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/controls/slick.gridmenu.ts b/src/controls/slick.gridmenu.ts
index b961b4d1..741f4260 100644
--- a/src/controls/slick.gridmenu.ts
+++ b/src/controls/slick.gridmenu.ts
@@ -380,6 +380,7 @@ export class SlickGridMenu {
 
   /** Close and destroy all previously opened sub-menus */
   destroySubMenus() {
+    this._bindingEventService.unbindAll('sub-menu');
     document.querySelectorAll(`.slick-gridmenu.slick-submenu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
@@ -387,7 +388,8 @@ export class SlickGridMenu {
   /** Construct the custom command menu items. */
   protected populateCommandsMenu(commandItems: Array<GridMenuItem | MenuCommandItem | 'divider'>, commandListElm: HTMLElement, args: { grid: SlickGrid, level: number }) {
     // user could pass a title on top of the custom section
-    const isSubMenu = args.level > 0;
+    const level = args?.level || 0;
+    const isSubMenu = level > 0;
     if (!isSubMenu && (this._gridMenuOptions?.commandTitle || this._gridMenuOptions?.customTitle)) {
       this._commandTitleElm = document.createElement('div');
       this._commandTitleElm.className = 'title';
@@ -470,14 +472,15 @@ export class SlickGridMenu {
       commandListElm.appendChild(liElm);
 
       if (addClickListener) {
-        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, args.level) as EventListener);
+        const eventGroup = isSubMenu ? 'sub-menu' : 'parent-menu';
+        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, level) as EventListener, undefined, eventGroup);
       }
 
       // optionally open sub-menu(s) by mouseover
       if (this._gridMenuOptions?.subMenuOpenByEvent === 'mouseover') {
         this._bindingEventService.bind(liElm, 'mouseover', ((e: DOMMouseOrTouchEvent<HTMLDivElement>) => {
           if ((item as GridMenuItem).commandItems || (item as GridMenuItem).customItems) {
-            this.repositionSubMenu(item, args.level, e);
+            this.repositionSubMenu(item, level, e);
           } else if (!isSubMenu) {
             this.destroySubMenus();
           }
diff --git a/src/models/core.interface.ts b/src/models/core.interface.ts
index 3aeb7473..d3360e30 100644
--- a/src/models/core.interface.ts
+++ b/src/models/core.interface.ts
@@ -4,6 +4,7 @@ export interface ElementEventListener {
   element: Element | Window;
   eventName: string;
   listener: EventListenerOrEventListenerObject;
+  groupName?: string;
 }
 
 export interface EditController {
diff --git a/src/plugins/slick.cellmenu.ts b/src/plugins/slick.cellmenu.ts
index 789d9c61..3ff6b73b 100644
--- a/src/plugins/slick.cellmenu.ts
+++ b/src/plugins/slick.cellmenu.ts
@@ -434,12 +434,16 @@ export class SlickCellMenu implements SlickPlugin {
   /** Destroy all parent menus and any sub-menus */
   destroyAllMenus() {
     this.destroySubMenus();
+
+    // remove all parent menu listeners before removing them from the DOM
+    this._bindingEventService.unbindAll('parent-menu');
     document.querySelectorAll(`.slick-cell-menu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
 
   /** Close and destroy all previously opened sub-menus */
   destroySubMenus() {
+    this._bindingEventService.unbindAll('sub-menu');
     document.querySelectorAll(`.slick-cell-menu.slick-submenu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
@@ -623,7 +627,8 @@ export class SlickCellMenu implements SlickPlugin {
     }
 
     // user could pass a title on top of the Commands/Options section
-    const isSubMenu = args.level > 0;
+    const level = args?.level || 0;
+    const isSubMenu = level > 0;
     if (cellMenu?.[`${itemType}Title`] && !isSubMenu) {
       this[`_${itemType}TitleElm`] = document.createElement('div');
       this[`_${itemType}TitleElm`]!.className = 'slick-menu-title';
@@ -703,14 +708,15 @@ export class SlickCellMenu implements SlickPlugin {
       commandOrOptionMenuElm.appendChild(liElm);
 
       if (addClickListener) {
-        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, itemType, args.level) as EventListener);
+        const eventGroup = isSubMenu ? 'sub-menu' : 'parent-menu';
+        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, itemType, level) as EventListener, undefined, eventGroup);
       }
 
       // optionally open sub-menu(s) by mouseover
       if (this._cellMenuProperties.subMenuOpenByEvent === 'mouseover') {
         this._bindingEventService.bind(liElm, 'mouseover', ((e: DOMMouseOrTouchEvent<HTMLDivElement>) => {
           if ((item as MenuCommandItem).commandItems || (item as MenuOptionItem).optionItems) {
-            this.repositionSubMenu(item, itemType, args.level, e);
+            this.repositionSubMenu(item, itemType, level, e);
             this._lastMenuTypeClicked = itemType;
           } else if (!isSubMenu) {
             this.destroySubMenus();
diff --git a/src/plugins/slick.contextmenu.ts b/src/plugins/slick.contextmenu.ts
index 26bcb995..952092bd 100644
--- a/src/plugins/slick.contextmenu.ts
+++ b/src/plugins/slick.contextmenu.ts
@@ -450,12 +450,16 @@ export class SlickContextMenu implements SlickPlugin {
   /** Destroy all parent menus and any sub-menus */
   destroyAllMenus() {
     this.destroySubMenus();
+
+    // remove all parent menu listeners before removing them from the DOM
+    this._bindingEventService.unbindAll('parent-menu');
     document.querySelectorAll(`.slick-context-menu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
 
   /** Close and destroy all previously opened sub-menus */
   destroySubMenus() {
+    this._bindingEventService.unbindAll('sub-menu');
     document.querySelectorAll(`.slick-context-menu.slick-submenu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
@@ -551,7 +555,8 @@ export class SlickContextMenu implements SlickPlugin {
     }
 
     // user could pass a title on top of the Commands/Options section
-    const isSubMenu = args.level > 0;
+    const level = args?.level || 0;
+    const isSubMenu = level > 0;
     if (contextMenu?.[`${itemType}Title`] && !isSubMenu) {
       this[`_${itemType}TitleElm`] = document.createElement('div');
       this[`_${itemType}TitleElm`]!.className = 'slick-menu-title';
@@ -631,14 +636,15 @@ export class SlickContextMenu implements SlickPlugin {
       commandOrOptionMenuElm.appendChild(liElm);
 
       if (addClickListener) {
-        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, itemType, args.level) as EventListener);
+        const eventGroup = isSubMenu ? 'sub-menu' : 'parent-menu';
+        this._bindingEventService.bind(liElm, 'click', this.handleMenuItemClick.bind(this, item, itemType, level) as EventListener, undefined, eventGroup);
       }
 
       // optionally open sub-menu(s) by mouseover
       if (this._contextMenuProperties.subMenuOpenByEvent === 'mouseover') {
         this._bindingEventService.bind(liElm, 'mouseover', ((e: DOMMouseOrTouchEvent<HTMLDivElement>) => {
           if ((item as MenuCommandItem).commandItems || (item as MenuOptionItem).optionItems) {
-            this.repositionSubMenu(item, itemType, args.level, e);
+            this.repositionSubMenu(item, itemType, level, e);
             this._lastMenuTypeClicked = itemType;
           } else if (!isSubMenu) {
             this.destroySubMenus();
diff --git a/src/plugins/slick.headermenu.ts b/src/plugins/slick.headermenu.ts
index 08e1c6c6..7e1a061f 100644
--- a/src/plugins/slick.headermenu.ts
+++ b/src/plugins/slick.headermenu.ts
@@ -171,12 +171,16 @@ export class SlickHeaderMenu implements SlickPlugin {
 
   destroyAllMenus() {
     this.destroySubMenus();
+
+    // remove all parent menu listeners before removing them from the DOM
+    this._bindingEventService.unbindAll('parent-menu');
     document.querySelectorAll(`.slick-header-menu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
 
   /** Close and destroy all previously opened sub-menus */
   destroySubMenus() {
+    this._bindingEventService.unbindAll('sub-menu');
     document.querySelectorAll(`.slick-header-menu.slick-submenu${this.getGridUidSelector()}`)
       .forEach(subElm => subElm.remove());
   }
@@ -425,7 +429,8 @@ export class SlickHeaderMenu implements SlickPlugin {
       menuElm.appendChild(menuItemElm);
 
       if (addClickListener) {
-        this._bindingEventService.bind(menuItemElm, 'click', this.handleMenuItemClick.bind(this, item, columnDef, level) as EventListener);
+        const eventGroup = isSubMenu ? 'sub-menu' : 'parent-menu';
+        this._bindingEventService.bind(menuItemElm, 'click', this.handleMenuItemClick.bind(this, item, columnDef, level) as EventListener, undefined, eventGroup);
       }
 
       // optionally open sub-menu(s) by mouseover
diff --git a/src/slick.core.ts b/src/slick.core.ts
index f538d7bd..6de33430 100644
--- a/src/slick.core.ts
+++ b/src/slick.core.ts
@@ -552,9 +552,9 @@ export class BindingEventService {
   }
 
   /** Bind an event listener to any element */
-  bind(element: Element | Window, eventName: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
+  bind(element: Element | Window, eventName: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions, groupName = '') {
     element.addEventListener(eventName, listener, options);
-    this._boundedEvents.push({ element, eventName, listener });
+    this._boundedEvents.push({ element, eventName, listener, groupName });
   }
 
   /** Unbind all will remove every every event handlers that were bounded earlier */
@@ -571,11 +571,30 @@ export class BindingEventService {
     }
   }
 
-  /** Unbind all will remove every every event handlers that were bounded earlier */
-  unbindAll() {
-    while (this._boundedEvents.length > 0) {
-      const boundedEvent = this._boundedEvents.pop() as ElementEventListener;
-      this.unbind(boundedEvent.element, boundedEvent.eventName, boundedEvent.listener);
+  /**
+   * Unbind all event listeners that were bounded, optionally provide a group name to unbind all listeners assigned to that specific group only.
+   */
+  unbindAll(groupName?: string | string[]) {
+    if (groupName) {
+      const groupNames = Array.isArray(groupName) ? groupName : [groupName];
+
+      // unbind only the bounded event with a specific group
+      // Note: we need to loop in reverse order to avoid array reindexing (causing index offset) after a splice is called
+      for (let i = this._boundedEvents.length - 1; i >= 0; --i) {
+        const boundedEvent = this._boundedEvents[i];
+        if (groupNames.some(g => g === boundedEvent.groupName)) {
+          const { element, eventName, listener } = boundedEvent;
+          this.unbind(element, eventName, listener);
+          this._boundedEvents.splice(i, 1);
+        }
+      }
+    } else {
+      // unbind everything
+      while (this._boundedEvents.length > 0) {
+        const boundedEvent = this._boundedEvents.pop() as ElementEventListener;
+        const { element, eventName, listener } = boundedEvent;
+        this.unbind(element, eventName, listener);
+      }
     }
   }
 }