feat: migrate all Menu/Buttons Plugins to TypeScript

package.json

@@ -80,8 +80,8 @@
     "cssnano-preset-lite": "^3.0.0",
     "cypress": "^9.7.0",
     "dotenv": "^16.3.1",
-    "esbuild": "^0.18.12",
-    "eslint": "^8.44.0",
+    "esbuild": "^0.18.13",
+    "eslint": "^8.45.0",
     "eslint-plugin-cypress": "^2.13.3",
     "fs-extra": "^11.1.1",
     "git-url-parse": "^13.1.0",

src/global.d.ts

@@ -4,6 +4,7 @@ import type {
   BindingEventService,
   ColAutosizeMode,
   SlickEvent,
+  SlickEventHandler,
   SlickEventData,
   GlobalEditorLock,
   GridAutosizeColsMode,
@@ -23,6 +24,10 @@ import type { SlickGridPager } from './controls/slick.pager';
 import type { SlickGridMenu } from './controls/slick.gridmenu';
 import type { SlickAutoTooltip } from './plugins/slick.autotooltips';
 import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager';
+import type { SlickCellMenu } from './plugins/slick.cellmenu';
+import type { SlickContextMenu } from './plugins/slick.contextmenu';
+import type { SlickHeaderButtons } from './plugins/slick.headerbuttons';
+import type { SlickHeaderMenu } from './plugins/slick.headermenu';
 import type { SlickCellExternalCopyManager } from './plugins/slick.cellcopymanager';
 import type { SlickGroupItemMetadataProvider } from './slick.cellexternalcopymanager';
 import type { Draggable, MouseWheel, Resizable } from './slick.interactions';
@@ -56,6 +61,7 @@ declare global {
     Editors: typeof Editors,
     Event: typeof SlickEvent,
     EventData: typeof SlickEventData,
+    EventHandler: typeof SlickEventHandler,
     Formatters: typeof Formatters,
     GlobalEditorLock: typeof GlobalEditorLock,
     Grid: typeof SlickGrid,
@@ -64,6 +70,12 @@ declare global {
     GroupTotals: typeof SlickGroupTotals,
     keyCode: typeof keyCode,
     MouseWheel: typeof MouseWheel,
+    Plugins: {
+      CellMenu: SlickCellMenu,
+      ContextMenu: SlickContextMenu,
+      HeaderButtons: SlickHeaderButtons,
+      HeaderMenu: SlickHeaderMenu
+    },
     preClickClassName: typeof preClickClassName,
     Range: typeof SlickRange,
     Resizable: typeof Resizable,

src/models/cellMenuOption.interface.ts

@@ -0,0 +1,67 @@
+import type {
+  MenuCallbackArgs,
+  MenuCommandItem,
+  MenuOptionItem,
+} from './index';
+
+export interface CellMenuOption {
+  /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */
+  autoAdjustDrop?: boolean;
+
+  /** Defaults to 0, Optionally add an offset to the auto-align of the drop menu */
+  autoAdjustDropOffset: number;
+
+  /** Defaults to true, Auto-align drop menu to the left or right depending on grid viewport available space */
+  autoAlignSide?: boolean;
+
+  /** Defaults to 0, Optionally add an offset to the left/right side auto-align */
+  autoAlignSideOffset: number;
+
+  /** Array of Command Items (title, command, disabled, ...) */
+  commandItems?: Array<MenuCommandItem | 'divider'>;
+
+  /** Optional command title that shows up over the commands list, it will be hidden when nothing is provided */
+  commandTitle?: string;
+
+  /** Defaults to "bottom", user can optionally force the Cell Menu drop to be aligned to the top or bottom. */
+  dropDirection?: 'top' | 'bottom';
+
+  /** Defaults to "right", user can optionally force the Cell Menu drop to be aligned to the left or right. */
+  dropSide?: 'left' | 'right';
+
+  /** Defaults to false, Hide the Close button on top right */
+  hideCloseButton?: boolean;
+
+  /** Defaults to false, Hide the Commands section even when the commandItems array is filled */
+  hideCommandSection?: boolean;
+
+  /** Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */
+  hideMenuOnScroll?: boolean;
+
+  /** Defaults to false, Hide the Options section even when the optionItems array is filled */
+  hideOptionSection?: boolean;
+
+  /** Maximum height that the drop menu can have, it could be a number (250) or text ("none") */
+  maxHeight?: number | string;
+
+  /** Maximum width that the drop menu can have, it could be a number (250) or text ("none") */
+  maxWidth?: number | string;
+
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$slick-menu-min-width`
+   */
+  width?: number | string;
+
+  /** Array of Option Items (title, option, disabled, ...) */
+  optionItems?: Array<MenuOptionItem | 'divider'>;
+
+  /** Optional Title of the Option section, it will be hidden when nothing is provided */
+  optionTitle?: string;
+
+  // --
+  // action/override callbacks
+
+  /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
+  menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean;
+}

src/models/column.interface.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/indent */
 
-import type { CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultObject, GroupTotalsFormatter } from './index';
+import type { CellMenuOption, CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultObject, GroupTotalsFormatter, HeaderButtonsOrMenu } from './index';
 import type { SlickGrid } from '../slick.grid';
 
 type PathsToStringProps<T> = T extends string | number | boolean | Date ? [] : {
@@ -55,6 +55,9 @@ export interface Column<T = any> {
   /** cell attributes */
   cellAttrs?: any;
 
+  /** Options that can be provide to the Cell Context Menu Plugin */
+  cellMenu?: CellMenuOption;
+
   /** header cell attributes */
   headerCellAttrs?: any;
 
@@ -130,8 +133,8 @@ export interface Column<T = any> {
   /** Group Totals Formatter function that can be used to add grouping totals in the grid */
   groupTotalsFormatter?: GroupTotalsFormatter;
 
-  // /** Options that can be provided to the Header Menu Plugin */
-  // header?: any;
+  /** Options that can be provided to the Header Menu Plugin */
+  header?: HeaderButtonsOrMenu;
 
   /** CSS class that can be added to the column header */
   headerCssClass?: string | null;

src/models/contextMenuOption.interface.ts

@@ -0,0 +1,73 @@
+import type {
+  MenuCallbackArgs,
+  MenuCommandItem,
+  MenuOptionItem,
+} from '../models/index';
+
+export interface ContextMenuOption {
+  /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */
+  autoAdjustDrop?: boolean;
+
+  /** Defaults to 0, Optionally add an offset to the auto-align of the drop menu */
+  autoAdjustDropOffset: number;
+
+  /** Defaults to true, Auto-align drop menu to the left or right depending on grid viewport available space */
+  autoAlignSide?: boolean;
+
+  /** Defaults to 0, Optionally add an offset to the left/right side auto-align */
+  autoAlignSideOffset: number;
+
+  /** Array of Command Items (title, command, disabled, ...) */
+  commandItems?: Array<MenuCommandItem | 'divider'>;
+
+  /** Defaults to undefined, which column to show the Commands list, when not defined the context menu will be shown over all columns */
+  commandShownOverColumnIds?: string[];
+
+  /** Optional command title that shows up over the commands list, it will be hidden when nothing is provided */
+  commandTitle?: string;
+
+  /** Defaults to "bottom", user can optionally force the Cell Menu drop to be aligned to the top or bottom. */
+  dropDirection?: 'top' | 'bottom';
+
+  /** Defaults to "right", user can optionally force the Cell Menu drop to be aligned to the left or right. */
+  dropSide?: 'left' | 'right';
+
+  /** Defaults to false, hide the Close button on top right */
+  hideCloseButton?: boolean;
+
+  /** Defaults to false, hide the Commands section even when the commandItems array is filled */
+  hideCommandSection?: boolean;
+
+  /** Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */
+  hideMenuOnScroll?: boolean;
+
+  /** Defaults to false, Hide the Options section even when the optionItems array is filled */
+  hideOptionSection?: boolean;
+
+  /** Maximum height that the drop menu can have, it could be a number (250) or text ("none") */
+  maxHeight?: number | string;
+
+  /** Maximum width that the drop menu can have, it could be a number (250) or text ("none") */
+  maxWidth?: number | string;
+
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$slick-menu-min-width`
+   */
+  width?: number | string;
+
+  /** Array of Option Items (title, option, disabled, ...) */
+  optionItems?: Array<MenuOptionItem | 'divider'>;
+
+  /** Defaults to undefined, which column to show the Options list, when not defined the context menu will be shown over all columns */
+  optionShownOverColumnIds?: string[];
+
+  /** Optional Title of the Option section, it will be hidden when nothing is provided */
+  optionTitle?: string;
+
+  // --
+  // action/override callbacks
+
+  /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
+  menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean;
+}

src/models/headerButtonItem.interface.ts

@@ -0,0 +1,42 @@
+import type { Column } from './column.interface';
+import type { SlickGrid } from '../slick.grid';
+
+export interface HeaderButtonItem {
+  /** A command identifier to be passed to the onCommand event handlers. */
+  command?: string;
+
+  /** 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;
+
+  /** Relative button image path. */
+  image?: string;
+
+  /** Only show the button on hover. */
+  showOnHover?: boolean;
+
+  /** Button tooltip. */
+  tooltip?: string;
+
+  // --
+  // action/override callbacks
+
+  /** Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) */
+  action?: (event: Event, callbackArgs: { command: string; button: any; column: Column; grid: SlickGrid; }) => void;
+
+  /** Callback method that user can override the default behavior of showing/hiding an item from the list. */
+  itemVisibilityOverride?: (args: { node: any; column: Column; grid: SlickGrid; }) => boolean;
+
+  /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
+  itemUsabilityOverride?: (args: { node: any; column: Column; grid: SlickGrid; }) => boolean;
+}
+
+export interface HeaderButtonOption {
+  /** an extra CSS class to add to the menu button */
+  buttonCssClass?: string;
+}

src/models/headerButtonOnCommandArgs.interface.ts

@@ -0,0 +1,10 @@
+import type { Column } from './column.interface';
+import type { HeaderButtonItem } from './headerButtonItem.interface';
+import type { SlickGrid } from '../slick.grid';
+
+export interface HeaderButtonOnCommandArgs {
+  grid: SlickGrid;
+  column: Column;
+  command: string;
+  button: HeaderButtonItem;
+}

src/models/headerButtonsOrMenu.interface.ts

@@ -0,0 +1,8 @@
+import type { HeaderButtonItem } from './headerButtonItem.interface';
+import type { HeaderMenuItems } from './headerMenuItems.interface';
+
+export interface HeaderButtonsOrMenu {
+  /** list of Buttons to show in the header */
+  buttons?: Array<HeaderButtonItem>;
+  menu?: HeaderMenuItems;
+}

src/models/headerMenuItems.interface.ts

@@ -0,0 +1,17 @@
+import type { Column, MenuCommandItem } from './index';
+import type { SlickGrid } from '../slick.grid';
+
+export interface HeaderMenuItems {
+  items: Array<MenuCommandItem | 'divider'>;
+}
+
+export interface HeaderMenuCommandItemCallbackArgs {
+  /** Column definition */
+  column: Column;
+
+  /** Slick Grid object */
+  grid: SlickGrid;
+
+  /** html DOM element of the menu */
+  menu: Array<MenuCommandItem | 'divider'>;
+}

src/models/headerMenuOption.interface.ts

@@ -0,0 +1,37 @@
+import type { Column } from './index';
+import type { SlickGrid } from '../slick.grid';
+
+export interface HeaderMenuOption {
+  /** Auto-align drop menu to the left when not enough viewport space to show on the right */
+  autoAlign?: boolean;
+
+  /** When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left) */
+  autoAlignOffset?: number;
+
+  /** an extra CSS class to add to the menu button */
+  buttonCssClass?: string;
+
+  /** a url to the menu button image */
+  buttonImage?: string;
+
+  /** A CSS class to be added to the menu item icon. */
+  iconCssClass?: string;
+
+  /** Header Menu dropdown offset top */
+  menuOffsetTop?: number;
+
+  /** Minimum width that the drop menu will have */
+  minWidth?: number;
+
+  /** Menu item text. */
+  title?: string;
+
+  /** Item tooltip. */
+  tooltip?: string;
+
+  // --
+  // Methods
+
+  /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
+  menuUsabilityOverride?: (args: { grid: SlickGrid, column: Column, menu: HTMLElement }) => boolean;
+}

src/models/index.ts

@@ -1,11 +1,13 @@
 export * from './aggregator.interface';
 export * from './autoTooltipOption.interface';
+export * from './cellMenuOption.interface';
 export * from './cellRange.interface';
 export * from './column.interface';
 export * from './columnPicker.interface';
 export * from './columnReorderFunction.type';
 export * from './columnSort.interface';
 export * from './compositeEditorOption.interface';
+export * from './contextMenuOption.interface';
 export * from './core.interface';
 export * from './customTooltipOption.interface';
 export * from './dataViewEvents.interface';
@@ -33,12 +35,18 @@ export * from './groupingComparerItem.interface';
 export * from './groupingFormatterItem.interface';
 export * from './groupItemMetadataProviderOption.interface';
 export * from './groupTotalsFormatter.interface';
+export * from './headerButtonItem.interface';
+export * from './headerButtonOnCommandArgs.interface';
+export * from './headerButtonsOrMenu.interface';
+export * from './headerMenuItems.interface';
+export * from './headerMenuOption.interface';
 export * from './infer.type';
 export * from './interactions.interface';
 export * from './itemMetadata.interface';
 export * from './menuCallbackArgs.interface';
 export * from './menuCommandItem.interface';
 export * from './menuCommandItemCallbackArgs.interface';
+export * from './menuFromCellCallbackArgs.interface';
 export * from './menuItem.interface';
 export * from './menuOptionItem.interface';
 export * from './menuOptionItemCallbackArgs.interface';

src/models/menuFromCellCallbackArgs.interface.ts

@@ -0,0 +1,18 @@
+import type { Column } from './column.interface';
+import type { SlickGrid } from '../slick.grid';
+
+export interface MenuFromCellCallbackArgs {
+  /** Grid cell/column index */
+  cell: number;
+
+  /** Grid row index */
+  row: number;
+
+  /** Reference to the grid. */
+  grid: SlickGrid;
+}
+
+export interface MenuFromCellWithColumnCallbackArgs<T = any> extends MenuFromCellCallbackArgs {
+  /** Cell Column definition */
+  column?: Column<T>;
+}