feat(controls): add minHeight option to ColumnPicker/GridMenu

packages/common/src/controls/slickColumnPicker.ts

@@ -12,7 +12,7 @@ import { ExtensionUtility } from '../extensions/extensionUtility';
 import { BindingEventService } from '../services/bindingEvent.service';
 import { PubSubService } from '../services/pubSub.service';
 import { SharedService } from '../services/shared.service';
-import { emptyElement } from '../services';
+import { emptyElement, findWidthOrDefault } from '../services/domUtilities';
 import { addColumnTitleElementWhenDefined, addCloseButtomElement, handleColumnPickerItemClick, populateColumnPicker, updateColumnPickerOrder } from '../extensions/extensionCommonUtils';
 
 // using external SlickGrid JS libraries
@@ -47,6 +47,7 @@ export class SlickColumnPicker {
     hideForceFitButton: false,
     hideSyncResizeButton: false,
     forceFitTitle: 'Force fit columns',
+    minHeight: 200,
     syncResizeTitle: 'Synchronous resize',
     headerColumnValueExtractor: (columnDef: Column) => columnDef.name
   } as ColumnPickerOption;
@@ -195,7 +196,8 @@ export class SlickColumnPicker {
   protected repositionMenu(event: DOMMouseEvent<HTMLDivElement>) {
     this._menuElm.style.top = `${event.pageY - 10}px`;
     this._menuElm.style.left = `${event.pageX - 10}px`;
-    this._menuElm.style.maxHeight = `${document.body.clientHeight - event.pageY - 10}px`;
+    this._menuElm.style.minHeight = findWidthOrDefault(this.addonOptions.minHeight, '');
+    this._menuElm.style.maxHeight = findWidthOrDefault(this.addonOptions.maxHeight, `${window.innerHeight - event.clientY}px`);
     this._menuElm.style.display = 'block';
     this._menuElm.appendChild(this._listElm);
   }

packages/common/src/controls/slickGridMenu.ts

@@ -13,7 +13,7 @@ import {
 } from '../interfaces/index';
 import { DelimiterType, FileType } from '../enums';
 import { ExtensionUtility } from '../extensions/extensionUtility';
-import { emptyElement, getHtmlElementOffset, getTranslationPrefix, } from '../services';
+import { emptyElement, findWidthOrDefault, getHtmlElementOffset, getTranslationPrefix, } from '../services/index';
 import { ExcelExportService } from '../services/excelExport.service';
 import { FilterService } from '../services/filter.service';
 import { PubSubService } from '../services/pubSub.service';
@@ -63,6 +63,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
     forceFitTitle: 'Force fit columns',
     marginBottom: 15,
     menuWidth: 18,
+    minHeight: 250,
     contentMinWidth: 0,
     resizeOnShowHeaderRow: false,
     syncResizeTitle: 'Synchronous resize',
@@ -345,10 +346,12 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
       }
 
       // set 'height' when defined OR ELSE use the 'max-height' with available window size and optional margin bottom
+      this._menuElm.style.minHeight = findWidthOrDefault(addonOptions.minHeight, '');
+
       if (addonOptions?.height !== undefined) {
-        this._menuElm.style.height = `${addonOptions.height}px`;
+        this._menuElm.style.height = findWidthOrDefault(addonOptions.height, '');
       } else {
-        this._menuElm.style.maxHeight = `${window.innerHeight - e.clientY - menuMarginBottom}px`;
+        this._menuElm.style.maxHeight = findWidthOrDefault(addonOptions.maxHeight, `${window.innerHeight - e.clientY - menuMarginBottom}px`);
       }
 
       this._menuElm.style.display = 'block';

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

@@ -26,6 +26,18 @@ export interface ColumnPickerOption {
   /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */
   hideSyncResizeButton?: boolean;
 
+  /**
+   * Defaults to available space at the bottom, Grid Menu minimum height.
+   * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  maxHeight?: number | string;
+
+  /**
+   * Defaults to 200(px), Grid Menu minimum height.
+   * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  minHeight?: number | string;
+
   /** Defaults to "Synchronous resize" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   syncResizeTitle?: string;
 

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

@@ -40,8 +40,11 @@ export interface GridMenuOption {
   /** Same as "forceFitTitle", except that it's a translation key which can be used on page load and/or when switching locale */
   forceFitTitleKey?: string;
 
-  /** Defaults to undefined, fixed height of the Grid Menu content, when provided it will be used instead of the max-height */
-  height?: number;
+  /**
+   * Defaults to undefined, fixed height of the Grid Menu content, when provided it will be used instead of the max-height.
+   * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  height?: number | string;
 
   /** Defaults to false, which will hide the "Clear all Filters" command in the Grid Menu (Grid Option "enableFiltering: true" has to be enabled) */
   hideClearAllFiltersCommand?: boolean;
@@ -121,12 +124,21 @@ export interface GridMenuOption {
   /** Defaults to 15, margin to use at the bottom of the grid menu to deduce from the max-height, only in effect when height is undefined */
   marginBottom?: number;
 
-  /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
+  /**
+   * Defaults to available space at the bottom, Grid Menu minimum height.
+   * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
   maxHeight?: number | string;
 
   /** Defaults to 16 pixels (only the number), which is the width in pixels of the Grid Menu icon container */
   menuWidth?: number;
 
+  /**
+   * Defaults to 200(px), Grid Menu minimum height.
+   * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  minHeight?: number | string;
+
   /** Defaults to False, which will resize the Header Row and remove the width of the Grid Menu icon from it's total width. */
   resizeOnShowHeaderRow?: boolean;
 

packages/common/src/styles/_variables.scss

@@ -345,6 +345,7 @@ $grid-menu-item-padding:                              2px 4px !default;
 $grid-menu-item-font-size:                            $font-size-base !default;
 $grid-menu-item-hover-border:                         1px solid #BFBDBD !default;
 $grid-menu-item-hover-color:                          #fafafa !default;
+$grid-menu-min-height:                                250px !default;
 $grid-menu-min-width:                                 220px !default;
 $grid-menu-divider-height:                            1px !default;
 $grid-menu-divider-margin:                            8px 5px !default;

packages/common/src/styles/slick-controls.scss

@@ -152,6 +152,7 @@
   border-radius: var(--slick-grid-menu-border-radius, $grid-menu-border-radius);
   padding: 6px;
   box-shadow: var(--slick-grid-menu-box-shadow, $grid-menu-box-shadow);
+  min-height: var(--slick-grid-menu-min-height, $grid-menu-min-height);
   min-width: var(--slick-grid-menu-min-width, $grid-menu-min-width);
   cursor: default;
   position:absolute;