fix: apply fixes & refactoring after testing in Aurelia-Slickgrid

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

@@ -68,7 +68,7 @@ export class Example1 {
           onColumnsChanged: (e, args) => console.log('onColumnPickerColumnsChanged - visible columns count', args.visibleColumns.length),
         },
         gridMenu: {
-          // customItems: [
+          // commandItems: [
           //   { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) },
           //   { command: '', divider: true, positionOrder: 72 },
           //   { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' },

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

@@ -72,6 +72,9 @@ export class Example6 {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
+      gridMenu: {
+        iconCssClass: 'mdi mdi-dots-grid',
+      },
       registerExternalResources: [new ExcelExportService()],
       enableFiltering: true,
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
@@ -149,12 +152,12 @@ export class Example6 {
     if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) {
       const folderPrefix = `<i class="mdi icon ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></i>`;
       if (dataContext.__collapsed) {
-        return `${spacer} <span class="slick-group-toggle collapsed" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
+        return `${spacer} <span class="slick-group-toggle collapsed" aria-expanded="false" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
       } else {
-        return `${spacer} <span class="slick-group-toggle expanded" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
+        return `${spacer} <span class="slick-group-toggle expanded" aria-expanded="true" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
       }
     } else {
-      return `${spacer} <span class="slick-group-toggle" level="${dataContext[treeLevelPropName]}"></span>${prefix}&nbsp;${value}`;
+      return `${spacer} <span class="slick-group-toggle" aria-expanded="false" level="${dataContext[treeLevelPropName]}"></span>${prefix}&nbsp;${value}`;
     }
   }
 

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

@@ -219,6 +219,9 @@ export class Example7 {
         container: '.demo-container',
         rightPadding: 10
       },
+      gridMenu: {
+        customTitleKey: 'CUSTOM_COMMANDS',
+      },
       autoEdit: true,
       autoCommitEdit: true,
       editable: true,

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

@@ -333,7 +333,7 @@ export class Example11 {
       },
       gridMenu: {
         hideClearFrozenColumnsCommand: false,
-        customItems: [
+        commandItems: [
           {
             command: 'modal',
             title: 'Mass Update',

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

@@ -109,6 +109,7 @@ export class Icons {
       '.mdi.mdi-database-refresh',
       '.mdi.mdi-delete',
       '.mdi.mdi-delete-outline',
+      '.mdi.mdi-dots-grid',
       '.mdi.mdi-dots-vertical',
       '.mdi.mdi-download',
       '.mdi.mdi-drag',

packages/common/src/extensions/extensionUtility.ts

@@ -1,5 +1,5 @@
 import { Constants } from '../constants';
-import { Column, GridOption, Locale, MenuCommandItem, MenuOptionItem, } from '../interfaces/index';
+import { Column, GridMenuItem, GridOption, Locale, MenuCommandItem, MenuOptionItem, } from '../interfaces/index';
 import { BackendUtilityService } from '../services/backendUtility.service';
 import { SharedService } from '../services/shared.service';
 import { TranslaterService } from '../services/translater.service';
@@ -124,7 +124,7 @@ export class ExtensionUtility {
   translateItems<T = any>(items: T[], inputKey: string, outputKey: string) {
     if (Array.isArray(items)) {
       for (const item of items) {
-        if ((item as any)[inputKey]) {
+        if ((item as any).hasOwnProperty(inputKey)) {
           (item as any)[outputKey] = this.translaterService?.translate?.((item as any)[inputKey]);
         }
       }
@@ -136,7 +136,7 @@ export class ExtensionUtility {
    * @param {Array<MenuCommandItem | String>} items - Menu Command Items array
    * @param {Object} gridOptions - Grid Options
    */
-  translateMenuItemsFromTitleKey(items: Array<MenuCommandItem | MenuOptionItem | 'divider'>) {
+  translateMenuItemsFromTitleKey(items: Array<MenuCommandItem | MenuOptionItem | GridMenuItem | 'divider'>) {
     const translationPrefix = getTranslationPrefix(this.sharedService.gridOptions);
     for (const item of items) {
       if (typeof item === 'object' && item.titleKey) {

packages/common/src/formatters/__tests__/treeFormatter.spec.ts

@@ -50,39 +50,39 @@ describe('Tree Formatter', () => {
     const output = treeFormatter(1, 1, dataset[3]['firstName'], {} as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">Barbara</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle" aria-expanded="false"></span><span class="slick-tree-title" level="0">Barbara</span>`
     });
   });
 
   it('should return a span without any toggle icon and have a 15px indentation with tree level 3', () => {
     const output = treeFormatter(1, 1, dataset[6]['firstName'], {} as Column, dataset[6], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-1',
-      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="1">Bobby</span>`
+      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle" aria-expanded="false"></span><span class="slick-tree-title" level="1">Bobby</span>`
     });
   });
 
   it('should return a span without any toggle icon and have a 45px indentation of a tree level 3', () => {
     const output = treeFormatter(1, 1, dataset[5]['firstName'], {} as Column, dataset[5], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-3',
-      text: `<span style="display:inline-block; width:45px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="3">Sponge</span>`
+      text: `<span style="display:inline-block; width:45px;"></span><span class="slick-group-toggle" aria-expanded="false"></span><span class="slick-tree-title" level="3">Sponge</span>`
     });
   });
 
   it('should return a span with expanded icon and 15px indentation when item is a parent and is not collapsed', () => {
     const output = treeFormatter(1, 1, dataset[1]['firstName'], {} as Column, dataset[1], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-1',
-      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle expanded"></span><span class="slick-tree-title" level="1">Jane</span>`
+      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle expanded" aria-expanded="true"></span><span class="slick-tree-title" level="1">Jane</span>`
     });
   });
 
   it('should return a span with collapsed icon and 0px indentation of a tree level 0 when item is a parent and is collapsed', () => {
     const output = treeFormatter(1, 1, dataset[4]['firstName'], {} as Column, dataset[4], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">Anonymous</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed" aria-expanded="false"></span><span class="slick-tree-title" level="0">Anonymous</span>`
     });
   });
 
@@ -98,7 +98,7 @@ describe('Tree Formatter', () => {
     const output = treeFormatter(1, 1, { ...dataset[1]['firstName'], indent: 1 }, { field: 'firstName' } as Column, dataset[1], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-1',
-      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle expanded"></span><span class="slick-tree-title" level="1"><span class="mdi mdi-subdirectory-arrow-right"></span>Jane</span>`
+      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle expanded" aria-expanded="true"></span><span class="slick-tree-title" level="1"><span class="mdi mdi-subdirectory-arrow-right"></span>Jane</span>`
     });
   });
 
@@ -107,7 +107,7 @@ describe('Tree Formatter', () => {
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">Barbara Cane</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle" aria-expanded="false"></span><span class="slick-tree-title" level="0">Barbara Cane</span>`
     });
   });
 
@@ -116,7 +116,7 @@ describe('Tree Formatter', () => {
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[4], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">Anonymous &lt; Doe</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed" aria-expanded="false"></span><span class="slick-tree-title" level="0">Anonymous &lt; Doe</span>`
     });
   });
 
@@ -125,7 +125,7 @@ describe('Tree Formatter', () => {
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">444444</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle" aria-expanded="false"></span><span class="slick-tree-title" level="0">444444</span>`
     });
   });
 });

packages/common/src/formatters/treeFormatter.ts

@@ -39,6 +39,6 @@ export const treeFormatter: Formatter = (row, cell, value, columnDef, dataContex
   }
   const sanitizedOutputValue = sanitizeTextByAvailableSanitizer(gridOptions, outputValue, { ADD_ATTR: ['target'] });
   const spanToggleClass = `slick-group-toggle ${toggleClass}`.trim();
-  const outputHtml = `${indentSpacer}<span class="${spanToggleClass}"></span><span class="slick-tree-title" level="${treeLevel}">${sanitizedOutputValue}</span>`;
+  const outputHtml = `${indentSpacer}<span class="${spanToggleClass}" aria-expanded="${toggleClass === 'expanded'}"></span><span class="slick-tree-title" level="${treeLevel}">${sanitizedOutputValue}</span>`;
   return { addClasses: slickTreeLevelClass, text: outputHtml };
 };

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

@@ -16,10 +16,13 @@ export interface GridMenuOption {
   /** Same as "commandTitle", except that it's a translation key which can be used on page load and/or when switching locale */
   commandTitleKey?: string;
 
+  /** Array of Custom Items (title, command, disabled, ...) */
+  commandItems?: Array<MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> | 'divider'>;
+
   /** Defaults to 0 (auto), minimum width of grid menu content (command, column list) */
   contentMinWidth?: number;
 
-  /** Array of Custom Items (title, command, disabled, ...) */
+  /** @deprecated @use `commandItems` Array of Custom Items (title, command, disabled, ...) */
   customItems?: Array<MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> | 'divider'>;
 
   /** @deprecated @use `commandTitle` Defaults to "Commands" which is the title that shows up over the custom commands list */

packages/common/src/plugins/__tests__/slickContextMenu.spec.ts

@@ -717,7 +717,7 @@ describe('ContextMenu Plugin', () => {
       });
 
       // -- Copy to Clipboard -- //
-      it('should populate menuCustomItems with Copy cell action when "hideCopyCellValueCommand" is disabled', () => {
+      it('should populate menuCommandItems with Copy cell action when "hideCopyCellValueCommand" is disabled', () => {
         const execSpy = jest.spyOn(window.document, 'execCommand');
         gridOptionsMock.contextMenu.hideCopyCellValueCommand = false;
         plugin.dispose();

packages/common/src/plugins/__tests__/slickGroupItemMetadataProvider.spec.ts

@@ -118,19 +118,19 @@ describe('GroupItemMetadataProvider Service', () => {
     it('should return Grouping info formatted with a group level 0 without indentation when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True', () => {
       service.setOptions({ enableExpandCollapse: true });
       const output = service.getOptions().groupFormatter(0, 0, 'test', mockColumns[0], { title: 'Some Title' }, gridStub);
-      expect(output).toBe('<span class="slick-group-toggle expanded" style="margin-left: 0px"></span><span class="slick-group-title" level="0">Some Title</span>');
+      expect(output).toBe('<span class="slick-group-toggle expanded" aria-expanded="true" style="margin-left: 0px"></span><span class="slick-group-title" level="0">Some Title</span>');
     });
 
     it('should return Grouping info formatted with a group level 2 with indentation of 30px when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True and level 2', () => {
       service.setOptions({ enableExpandCollapse: true, toggleCssClass: 'groupy-toggle', toggleExpandedCssClass: 'groupy-expanded' });
       const output = service.getOptions().groupFormatter(0, 0, 'test', mockColumns[0], { level: 2, title: 'Some Title' }, gridStub);
-      expect(output).toBe('<span class="groupy-toggle groupy-expanded" style="margin-left: 30px"></span><span class="slick-group-title" level="2">Some Title</span>');
+      expect(output).toBe('<span class="groupy-toggle groupy-expanded" aria-expanded="true" style="margin-left: 30px"></span><span class="slick-group-title" level="2">Some Title</span>');
     });
 
     it('should return Grouping info formatted with a group level 2 with indentation of 30px when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True and level 2', () => {
       service.setOptions({ enableExpandCollapse: true, toggleCssClass: 'groupy-toggle', toggleCollapsedCssClass: 'groupy-collapsed' });
       const output = service.getOptions().groupFormatter(0, 0, 'test', mockColumns[0], { collapsed: true, level: 3, title: 'Some Title' }, gridStub);
-      expect(output).toBe('<span class="groupy-toggle groupy-collapsed" style="margin-left: 45px"></span><span class="slick-group-title" level="3">Some Title</span>');
+      expect(output).toBe('<span class="groupy-toggle groupy-collapsed" aria-expanded="false" style="margin-left: 45px"></span><span class="slick-group-title" level="3">Some Title</span>');
     });
   });
 

packages/common/src/plugins/__tests__/slickHeaderMenu.spec.ts

@@ -290,6 +290,7 @@ describe('HeaderMenu Plugin', () => {
       plugin.init();
       (columnsMock[0].header.menu.items[1] as MenuCommandItem).itemVisibilityOverride = () => true;
       (columnsMock[0].header.menu.items[1] as MenuCommandItem).itemUsabilityOverride = () => false;
+      const publishSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
       const eventData = { ...new Slick.EventData(), preventDefault: jest.fn() };
       gridStub.onHeaderCellRendered.notify({ column: columnsMock[0], node: headerDiv, grid: gridStub }, eventData, gridStub);
@@ -304,6 +305,9 @@ describe('HeaderMenu Plugin', () => {
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
+
+      commandElm.dispatchEvent(new Event('click'));
+      expect(publishSpy).not.toHaveBeenCalledWith('headerMenu:onCommand');
     });
 
     it('should populate a Header Menu and a 2nd button is "disabled" and expect button to be disabled', () => {

packages/common/src/plugins/menuFromCellBaseClass.ts

@@ -42,11 +42,13 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
 
       const commandItems = this._addonOptions?.commandItems || [];
       const optionItems = this._addonOptions?.optionItems || [];
+      let isColumnOptionAllowed = true;
+      let isColumnCommandAllowed = true;
 
       // make sure there's at least something to show before creating the Menu
       if (this._camelPluginName === 'contextMenu') {
-        const isColumnOptionAllowed = this.checkIsColumnAllowed((this._addonOptions as ContextMenu)?.optionShownOverColumnIds ?? [], columnDef.id);
-        const isColumnCommandAllowed = this.checkIsColumnAllowed((this._addonOptions as ContextMenu)?.commandShownOverColumnIds ?? [], columnDef.id);
+        isColumnOptionAllowed = this.checkIsColumnAllowed((this._addonOptions as ContextMenu)?.optionShownOverColumnIds ?? [], columnDef.id);
+        isColumnCommandAllowed = this.checkIsColumnAllowed((this._addonOptions as ContextMenu)?.commandShownOverColumnIds ?? [], columnDef.id);
         if (!columnDef || ((!isColumnCommandAllowed || !commandItems.length) && (!isColumnOptionAllowed || !optionItems.length))) {
           this.hideMenu();
           return;
@@ -104,7 +106,7 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
       closeButtonElm.appendChild(closeSpanElm);
 
       // -- Option List section
-      if (!(this.addonOptions as CellMenu | ContextMenu).hideOptionSection && optionItems.length > 0) {
+      if (!(this.addonOptions as CellMenu | ContextMenu).hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) {
         const optionMenuElm = document.createElement('div');
         optionMenuElm.className = `${this._menuCssPrefix}-option-list`;
         if (!this.addonOptions.hideCloseButton) {
@@ -123,10 +125,10 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
       }
 
       // -- Command List section
-      if (!(this.addonOptions as CellMenu | ContextMenu).hideCommandSection && commandItems.length > 0) {
+      if (!(this.addonOptions as CellMenu | ContextMenu).hideCommandSection && isColumnCommandAllowed && commandItems.length > 0) {
         const commandMenuElm = document.createElement('div');
         commandMenuElm.className = `${this._menuCssPrefix}-command-list`;
-        if (!this.addonOptions.hideCloseButton && (optionItems.length === 0 || (this.addonOptions as CellMenu | ContextMenu).hideOptionSection)) {
+        if (!this.addonOptions.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || (this.addonOptions as CellMenu | ContextMenu).hideOptionSection)) {
           this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
           this._menuElm.appendChild(closeButtonElm);
         }

packages/common/src/plugins/slickCellMenu.ts

@@ -122,9 +122,7 @@ export class SlickCellMenu extends MenuFromCellBaseClass<CellMenu> {
       this._addonOptions = { ...this._addonOptions, ...columnDef.cellMenu };
 
       // run the override function (when defined), if the result is false it won't go further
-      if (!args) {
-        args = {} as MenuCommandItemCallbackArgs;
-      }
+      args = args || {};
       args.column = columnDef;
       args.dataContext = dataContext;
       args.grid = this.grid;