Feat/internal header button

packages/common/src/controls/__tests__/gridMenuControl.spec.ts

@@ -838,7 +838,7 @@ describe('GridMenuControl', () => {
         expect(buttonImageElm.src).toBe('/images/some-gridmenu-image.png');
         expect(helpTextElm.textContent).toBe('Help');
         expect(helpIconElm.style.backgroundImage).toBe('url(/images/some-image.png)')
-        expect(consoleWarnSpy).toHaveBeenCalledWith('[Slickgrid-Universal] The "iconImage" property of a Grid Menu item is no deprecated and will be removed in future version, consider using "iconCssClass" instead.');
+        expect(consoleWarnSpy).toHaveBeenCalledWith('[Slickgrid-Universal] The "iconImage" property of a Grid Menu item is now deprecated and will be removed in future version, consider using "iconCssClass" instead.');
       });
 
       it('should add a custom Grid Menu item with "tooltip" and expect the item title attribute to be part of the item DOM element', () => {

packages/common/src/controls/gridMenu.control.ts

@@ -390,8 +390,8 @@ export class GridMenuControl {
         let isItemVisible = true;
         let isItemUsable = true;
         if (typeof item === 'object') {
-          isItemVisible = this.runOverrideFunctionWhenExists(item.itemVisibilityOverride, callbackArgs);
-          isItemUsable = this.runOverrideFunctionWhenExists(item.itemUsabilityOverride, callbackArgs);
+          isItemVisible = this.runOverrideFunctionWhenExists<typeof callbackArgs>(item.itemVisibilityOverride, callbackArgs);
+          isItemUsable = this.runOverrideFunctionWhenExists<typeof callbackArgs>(item.itemUsabilityOverride, callbackArgs);
         }
 
         // if the result is not visible then there's no need to go further
@@ -440,7 +440,7 @@ export class GridMenuControl {
         }
 
         if (item.iconImage) {
-          console.warn('[Slickgrid-Universal] The "iconImage" property of a Grid Menu item is no deprecated and will be removed in future version, consider using "iconCssClass" instead.');
+          console.warn('[Slickgrid-Universal] The "iconImage" property of a Grid Menu item is now deprecated and will be removed in future version, consider using "iconCssClass" instead.');
           iconElm.style.backgroundImage = `url(${item.iconImage})`;
         }
 
@@ -521,7 +521,7 @@ export class GridMenuControl {
     } as GridMenuEventWithElementCallbackArgs;
 
     // run the override function (when defined), if the result is false then we won't go further
-    if (controlOptions && !this.runOverrideFunctionWhenExists(controlOptions.menuUsabilityOverride, callbackArgs)) {
+    if (controlOptions && !this.runOverrideFunctionWhenExists<typeof callbackArgs>(controlOptions.menuUsabilityOverride, callbackArgs)) {
       return;
     }
 
@@ -874,7 +874,7 @@ export class GridMenuControl {
   }
 
   /** Run the Override function when it exists, if it returns True then it is usable/visible */
-  protected runOverrideFunctionWhenExists(overrideFn: any, args: any): boolean {
+  protected runOverrideFunctionWhenExists<T = any>(overrideFn: any, args: T): boolean {
     if (typeof overrideFn === 'function') {
       return overrideFn.call(this, args);
     }

packages/common/src/extensions/__tests__/extensionUtility.spec.ts

@@ -17,12 +17,10 @@ const mockAddon = jest.fn().mockImplementation(() => ({
 }));
 
 jest.mock('slickgrid/slick.groupitemmetadataprovider', () => mockAddon);
-jest.mock('slickgrid/controls/slick.gridmenu', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.cellmenu', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.cellexternalcopymanager', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.contextmenu', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.draggablegrouping', () => mockAddon);
-jest.mock('slickgrid/plugins/slick.headerbuttons', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.headermenu', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockAddon);
 jest.mock('slickgrid/plugins/slick.rowdetailview', () => mockAddon);

packages/common/src/extensions/index.ts

@@ -5,7 +5,6 @@ export * from './contextMenuExtension';
 export * from './draggableGroupingExtension';
 export * from './extensionUtility';
 export * from './groupItemMetaProviderExtension';
-export * from './headerButtonExtension';
 export * from './headerMenuExtension';
 export * from './rowDetailViewExtension';
 export * from './rowMoveManagerExtension';

packages/common/src/filters/compoundDateFilter.ts

@@ -285,7 +285,7 @@ export class CompoundDateFilter implements Filter {
 
 
     // create the DOM Select dropdown for the Operator
-    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
     this._filterDivInputElm = this.buildDatePickerInput(searchTerm);
     const filterContainerElm = document.createElement('div');
     filterContainerElm.className = `form-group search-filter filter-${columnId}`;

packages/common/src/filters/compoundInputFilter.ts

@@ -228,7 +228,7 @@ export class CompoundInputFilter implements Filter {
     emptyElement(headerElm);
 
     // create the DOM Select dropdown for the Operator
-    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
     this._filterInputElm = this.buildInputElement();
     const emptySpanElm = document.createElement('span');
 

packages/common/src/filters/compoundSliderFilter.ts

@@ -241,7 +241,7 @@ export class CompoundSliderFilter implements Filter {
     */
 
     // create the DOM Select dropdown for the Operator
-    this.selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues());
+    this.selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
 
     const spanPrependElm = document.createElement('span');
     spanPrependElm.className = 'input-group-addon input-group-prepend operator';

packages/common/src/filters/filterUtilities.ts

@@ -1,21 +1,21 @@
 import { OperatorString } from '../enums/operatorString.type';
-import { Column } from '../interfaces/index';
+import { Column, GridOption } from '../interfaces/index';
 import { Observable, RxJsFacade, Subject, Subscription } from '../services/rxjsFacade';
-import { castObservableToPromise, getDescendantProperty, htmlEncodedStringWithPadding } from '../services/utilities';
+import { castObservableToPromise, getDescendantProperty, htmlEncodedStringWithPadding, sanitizeTextByAvailableSanitizer } from '../services/utilities';
 
 /**
  * Create and return a select dropdown HTML element with a list of Operators with descriptions
  * @param {Array<Object>} optionValues - list of operators and their descriptions
  * @returns {Object} selectElm - Select Dropdown HTML Element
  */
-export function buildSelectOperator(optionValues: Array<{ operator: OperatorString, description: string }>): HTMLSelectElement {
+export function buildSelectOperator(optionValues: Array<{ operator: OperatorString, description: string }>, gridOptions: GridOption): HTMLSelectElement {
   const selectElm = document.createElement('select');
   selectElm.className = 'form-control';
 
   for (const option of optionValues) {
     const selectOption = document.createElement('option');
     selectOption.value = option.operator;
-    selectOption.innerHTML = `${htmlEncodedStringWithPadding(option.operator, 3)}${option.description}`;
+    selectOption.innerHTML = sanitizeTextByAvailableSanitizer(gridOptions, `${htmlEncodedStringWithPadding(option.operator, 3)}${option.description}`);
     selectElm.appendChild(selectOption);
   }
 

packages/common/src/filters/sliderRangeFilter.ts

@@ -134,11 +134,11 @@ export class SliderRangeFilter implements Filter {
     const columnId = this.columnDef?.id ?? '';
     const lowerElm = document.querySelector(`.lowest-range-${columnId}`);
     const highestElm = document.querySelector(`.highest-range-${columnId}`);
-    if (lowerElm && lowerElm.innerHTML) {
-      lowerElm.innerHTML = lowestValue.toString();
+    if (lowerElm?.textContent) {
+      lowerElm.textContent = lowestValue.toString();
     }
-    if (highestElm && highestElm.innerHTML) {
-      highestElm.innerHTML = highestValue.toString();
+    if (highestElm?.textContent) {
+      highestElm.textContent = highestValue.toString();
     }
   }
 

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

@@ -145,8 +145,8 @@ export interface Column<T = any> {
   /** Options that can be provided to the Header Menu Plugin */
   header?: {
     /** list of Buttons to show in the header */
-    buttons?: Array<HeaderButtonItem | 'divider'>;
-    menu?: { items: Array<MenuCommandItem | 'divider'> };
+    buttons?: Array<HeaderButtonItem>;
+    menu?: { items: Array<MenuCommandItem> };
   };
 
   /** CSS class that can be added to the column header */

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

@@ -1,14 +1,14 @@
+import { HeaderButtonPlugin } from '../plugins';
 import { HeaderButtonOnCommandArgs } from './headerButtonOnCommandArgs.interface';
 import { SlickEventData } from './slickEventData.interface';
-import { SlickHeaderButtons } from './slickHeaderButtons.interface';
 
 export interface HeaderButton extends HeaderButtonOption {
   // --
   // Events
   // ------------
 
   /** Fired after extension (plugin) is registered by SlickGrid */
-  onExtensionRegistered?: (plugin: SlickHeaderButtons) => void;
+  onExtensionRegistered?: (plugin: HeaderButtonPlugin) => void;
 
   /** Fired when a command is clicked */
   onCommand?: (e: SlickEventData, args: HeaderButtonOnCommandArgs) => void;

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

@@ -8,6 +8,9 @@ export interface HeaderButtonItem {
   /** CSS class to add to the button. */
   cssClass?: string;
 
+  /** Defaults to false, whether the item/command is disabled. */
+  disabled?: boolean;
+
   /** Button click handler. */
   handler?: (e: Event) => void;
 

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

@@ -113,10 +113,10 @@ export interface SlickDataView {
   /** Get Paging Options */
   getPagingInfo(): PagingInfo;
 
-  /** Get row number of an item in the DataView */
+  /** Get row number in the grid by its item object */
   getRowByItem(item: any): number | undefined;
 
-  /** Get row number of an item in the DataView by its Id */
+  /** Get row number in the grid by its Id */
   getRowById(id: string | number): number | undefined;
 
   /**