@zeedhi/teknisa-components-common 1.74.1 → 1.76.0

package/dist/tek-components-common.esm.js

@@ -896,6 +896,7 @@ class GridBase {
             {
                 name: `${this.grid.name}_gridSearch`,
                 component: 'ZdSearch',
+                cssClass: 'zd-grid-search',
                 isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
             },
             {
@@ -973,6 +974,7 @@ class GridBase {
                 fullscreen: mergeModalFilterProps.fullscreen,
                 light: mergeModalFilterProps.light,
                 dark: mergeModalFilterProps.dark,
+                escKeydownStop: false,
                 children: [
                     {
                         name: `${this.grid.name}-filter-header-container`,
@@ -1049,6 +1051,13 @@ class GridBase {
                                         name: `${this.grid.name}-filter-cancelButton`,
                                         component: 'ZdButton',
                                         label: 'CANCEL',
+                                        keyMap: {
+                                            esc: {
+                                                event: this.hideFilterModal.bind(this),
+                                                focus: true,
+                                                input: true,
+                                            },
+                                        },
                                         outline: true,
                                         events: {
                                             click: this.hideFilterModal.bind(this),
@@ -1061,6 +1070,14 @@ class GridBase {
                                         events: {
                                             click: this.applyFilter.bind(this),
                                         },
+                                        keyMap: {
+                                            'mod+enter': {
+                                                event: this.applyFilter.bind(this),
+                                                focus: true,
+                                                input: true,
+                                                stop: true,
+                                            },
+                                        },
                                     },
                                 ],
                             },
@@ -1075,8 +1092,17 @@ class GridBase {
         }
         this.filterModal.show();
     }
-    hideFilterModal() {
-        this.filterModal.hide();
+    hideFilterModal(params) {
+        var _a, _b;
+        const event = params === null || params === void 0 ? void 0 : params.event;
+        if (event && (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.id) === `${this.grid.name}-filter-cancelButton`
+            || ((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.id) === `${this.grid.name}-filter-okButton`)) {
+            this.filterModal.hide();
+            event.stopPropagation();
+        }
+        else {
+            this.filterModal.hide();
+        }
     }
     sortFilterIndex(col1, col2) {
         const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
@@ -1226,7 +1252,7 @@ class GridBase {
         if (event.defaultPrevented)
             return;
         filterFn(filter);
-        this.filterModal.hide();
+        this.hideFilterModal({ event });
     }
     clearFilter() {
         const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
@@ -2238,7 +2264,7 @@ class TekGrid extends GridEditable {
         /* Show Columns button */
         this.columnsButton = false;
         /* Defines if the grid is the unique grid on screen */
-        this.mainGrid = false;
+        this.mainGrid = true;
         /* Columns to be ignored on columns button */
         this.columnsButtonIgnore = [];
         /**
@@ -3196,6 +3222,10 @@ class TekTreeGrid extends TreeGridEditable {
          * @public
          */
         this.dragColumns = true;
+        /**
+         * Defines if the grid is the unique grid on screen
+         */
+        this.mainGrid = true;
         /**
          * Enables column resizing
          * @public
@@ -3252,17 +3282,58 @@ class TekTreeGrid extends TreeGridEditable {
         if (this.deleteButton === 'selection') {
             this.selectable = true;
         }
+        this.keyShortcutKeyMapping = {
+            'mod+f': {
+                event: this.focusSearchInput.bind(this),
+                stop: true,
+                active: !this.mainGrid,
+                input: true,
+            },
+            'mod+l': {
+                event: ({ event, element }) => {
+                    if (this.filterButton) {
+                        const instance = Metadata.getInstance(`${this.name}_filterButton`);
+                        instance.click(event, element);
+                    }
+                },
+                stop: true,
+                active: !this.mainGrid,
+                input: true,
+            },
+            'mod+enter': {
+                event: () => {
+                    const instance = Metadata.getInstance(`${this.name}_actions_dropdown`);
+                    instance.setFocus();
+                    instance.value = !instance.value;
+                },
+                stop: true,
+                active: !this.mainGrid,
+                input: true,
+            },
+        };
         this.gridBase = new GridBase(this);
         this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
         this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
         this.createAccessors();
     }
+    onMounted(element) {
+        super.onMounted(element);
+        KeyMap.bind(this.keyShortcutKeyMapping, this, element);
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        KeyMap.unbind(this.keyShortcutKeyMapping, this);
+    }
     onCreated() {
         super.onCreated();
         Loader.addController(`GridController_${this.componentId}`, new GridController(this));
         if (!this.toolbarSlotProps)
             this.toolbarSlot = this.gridBase.createToolbarProps();
     }
+    focusSearchInput() {
+        const searchInput = Metadata.getInstance(`${this.name}_gridSearch`);
+        searchInput.setFocus();
+    }
     get layoutOptions() {
         if (!this.showLayoutOptions)
             return undefined;

package/dist/tek-components-common.umd.js

@@ -901,6 +901,7 @@
               {
                   name: `${this.grid.name}_gridSearch`,
                   component: 'ZdSearch',
+                  cssClass: 'zd-grid-search',
                   isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
               },
               {
@@ -978,6 +979,7 @@
                   fullscreen: mergeModalFilterProps.fullscreen,
                   light: mergeModalFilterProps.light,
                   dark: mergeModalFilterProps.dark,
+                  escKeydownStop: false,
                   children: [
                       {
                           name: `${this.grid.name}-filter-header-container`,
@@ -1054,6 +1056,13 @@
                                           name: `${this.grid.name}-filter-cancelButton`,
                                           component: 'ZdButton',
                                           label: 'CANCEL',
+                                          keyMap: {
+                                              esc: {
+                                                  event: this.hideFilterModal.bind(this),
+                                                  focus: true,
+                                                  input: true,
+                                              },
+                                          },
                                           outline: true,
                                           events: {
                                               click: this.hideFilterModal.bind(this),
@@ -1066,6 +1075,14 @@
                                           events: {
                                               click: this.applyFilter.bind(this),
                                           },
+                                          keyMap: {
+                                              'mod+enter': {
+                                                  event: this.applyFilter.bind(this),
+                                                  focus: true,
+                                                  input: true,
+                                                  stop: true,
+                                              },
+                                          },
                                       },
                                   ],
                               },
@@ -1080,8 +1097,17 @@
           }
           this.filterModal.show();
       }
-      hideFilterModal() {
-          this.filterModal.hide();
+      hideFilterModal(params) {
+          var _a, _b;
+          const event = params === null || params === void 0 ? void 0 : params.event;
+          if (event && (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.id) === `${this.grid.name}-filter-cancelButton`
+              || ((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.id) === `${this.grid.name}-filter-okButton`)) {
+              this.filterModal.hide();
+              event.stopPropagation();
+          }
+          else {
+              this.filterModal.hide();
+          }
       }
       sortFilterIndex(col1, col2) {
           const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
@@ -1231,7 +1257,7 @@
           if (event.defaultPrevented)
               return;
           filterFn(filter);
-          this.filterModal.hide();
+          this.hideFilterModal({ event });
       }
       clearFilter() {
           const filterForm = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
@@ -2243,7 +2269,7 @@
           /* Show Columns button */
           this.columnsButton = false;
           /* Defines if the grid is the unique grid on screen */
-          this.mainGrid = false;
+          this.mainGrid = true;
           /* Columns to be ignored on columns button */
           this.columnsButtonIgnore = [];
           /**
@@ -3201,6 +3227,10 @@
            * @public
            */
           this.dragColumns = true;
+          /**
+           * Defines if the grid is the unique grid on screen
+           */
+          this.mainGrid = true;
           /**
            * Enables column resizing
            * @public
@@ -3257,17 +3287,58 @@
           if (this.deleteButton === 'selection') {
               this.selectable = true;
           }
+          this.keyShortcutKeyMapping = {
+              'mod+f': {
+                  event: this.focusSearchInput.bind(this),
+                  stop: true,
+                  active: !this.mainGrid,
+                  input: true,
+              },
+              'mod+l': {
+                  event: ({ event, element }) => {
+                      if (this.filterButton) {
+                          const instance = core.Metadata.getInstance(`${this.name}_filterButton`);
+                          instance.click(event, element);
+                      }
+                  },
+                  stop: true,
+                  active: !this.mainGrid,
+                  input: true,
+              },
+              'mod+enter': {
+                  event: () => {
+                      const instance = core.Metadata.getInstance(`${this.name}_actions_dropdown`);
+                      instance.setFocus();
+                      instance.value = !instance.value;
+                  },
+                  stop: true,
+                  active: !this.mainGrid,
+                  input: true,
+              },
+          };
           this.gridBase = new GridBase(this);
           this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
           this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
           this.createAccessors();
       }
+      onMounted(element) {
+          super.onMounted(element);
+          core.KeyMap.bind(this.keyShortcutKeyMapping, this, element);
+      }
+      onBeforeDestroy() {
+          super.onBeforeDestroy();
+          core.KeyMap.unbind(this.keyShortcutKeyMapping, this);
+      }
       onCreated() {
           super.onCreated();
           core.Loader.addController(`GridController_${this.componentId}`, new GridController(this));
           if (!this.toolbarSlotProps)
               this.toolbarSlot = this.gridBase.createToolbarProps();
       }
+      focusSearchInput() {
+          const searchInput = core.Metadata.getInstance(`${this.name}_gridSearch`);
+          searchInput.setFocus();
+      }
       get layoutOptions() {
           if (!this.showLayoutOptions)
               return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.74.1",
+  "version": "1.76.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -18,18 +18,18 @@
     "watch": "npm run build -- -w"
   },
   "dependencies": {
-    "@zeedhi/zd-user-info-common": "^1.0.2",
-    "lodash.debounce": "^4.0.8",
-    "lodash.get": "^4.4.2",
-    "lodash.merge": "^4.6.2"
+    "@zeedhi/zd-user-info-common": "*",
+    "lodash.debounce": "4.0.*",
+    "lodash.get": "4.4.*",
+    "lodash.merge": "4.6.*"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.get": "^4.4.6",
-    "@types/lodash.merge": "^4.6.6"
+    "@types/lodash.debounce": "4.0.*",
+    "@types/lodash.get": "4.4.*",
+    "@types/lodash.merge": "4.6.*"
   },
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "371e90750bf8c1703398f18838062e67a2993a8d"
+  "gitHead": "16a404b1342b88f2f01d2faf1c40216c3e1d6144"
 }

package/tests/unit/components/tek-grid/grid.spec.ts

@@ -1684,6 +1684,17 @@ describe('TekGrid', () => {
       expect(button.isVisible).toBeFalsy();
       (instance as any).gridBase.hideFilterModal();
 
+      const element = document.createElement('div');
+      element.id = `${instance.name}-filter-cancelButton`;
+
+      Object.defineProperty(document, 'activeElement', { value: element, writable: true });
+      let event = new Event('keydown');
+      (instance as any).gridBase.hideFilterModal({ event });
+
+      (document as any).activeElement = undefined;
+      event = new Event('keydown');
+      (instance as any).gridBase.hideFilterModal({ event });
+
       spy.mockReset();
       spyMetadata.mockReset();
     });

package/tests/unit/components/tree-grid/tree-grid.spec.ts

@@ -1,7 +1,9 @@
 import {
-  Button, Form, IButton, IForm, IModal, Modal, ModalService, Report, Text, TextInput,
+  Button, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Report, Search, Text, TextInput,
 } from '@zeedhi/common';
-import { Http, IDictionary, Metadata } from '@zeedhi/core';
+import {
+  Http, IDictionary, KeyMap, Metadata,
+} from '@zeedhi/core';
 import {
   ITekTreeGrid, TekGridColumn, TekRestDatasource, TekTreeGrid,
 } from '../../../../src';
@@ -111,6 +113,121 @@ describe('TekTreeGrid', () => {
     });
   });
 
+  describe('navigation', () => {
+    const dispatchEvent = (key: string, modifiers: any) => {
+      const event = new KeyboardEvent('keydown', modifiers);
+      delete (event as any).key;
+      Object.defineProperty(event, 'key', { value: key });
+      delete (event as any).code;
+      Object.defineProperty(event, 'code', { value: key });
+      document.dispatchEvent(event);
+    };
+
+    it('should open filter modal input with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_2',
+        component: 'TekGrid',
+        filterButton: true,
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const method = jest.fn();
+
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => new Button({
+        name: 'grid_navigation_2_filterButton',
+        component: 'ZdButton',
+        events: {
+          click: method,
+        },
+      }));
+
+      dispatchEvent('l', { ctrlKey: true }); // ctrl+l keydown
+      await flushPromises();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      expect(method).toHaveBeenCalled();
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockReset();
+    });
+
+    it('should open action dropdown with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_2',
+        component: 'TekTreeGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const instanceDropDown = new Dropdown({
+        name: 'grid_navigation_2_actions_dropdown',
+        component: 'ZdDropdown',
+        activator: {
+          name: 'grid_navigation_2_actionsButton',
+          component: 'ZdButton',
+        },
+        children: [],
+      });
+      const instanceDropDownSpy = jest.spyOn(instanceDropDown, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => instanceDropDown);
+
+      dispatchEvent('enter', { ctrlKey: true, enterKey: true }); // ctrl + enter keydown
+      await flushPromises();
+
+      expect(spyMetadata).toHaveBeenCalled();
+      expect(instanceDropDownSpy).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockReset();
+      instanceDropDownSpy.mockReset();
+    });
+
+    it('should focus in searchInput with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_3',
+        component: 'TekTreeGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const searchInput = new Search({
+        name: 'grid_navigation_3_gridSearch',
+        component: 'ZdSearch',
+        parent: instance,
+      });
+
+      const spySetFocus = jest.spyOn(searchInput, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => searchInput);
+
+      dispatchEvent('f', { ctrlKey: true }); // ctrl+f keydown
+      await flushPromises();
+
+      expect(spySetFocus).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spySetFocus.mockReset();
+      spyMetadata.mockReset();
+    });
+  });
   describe('filterClick()', () => {
     it('should apply filter from form to tekdatasource', () => {
       const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({

package/types/components/tek-tree-grid/interfaces.d.ts

@@ -10,6 +10,7 @@ export interface ITekTreeGrid extends ITreeGridEditable {
     deleteButton?: 'none' | 'currentRow' | 'selection';
     events?: ITekGridEvents;
     filterButton?: boolean;
+    mainGrid?: boolean;
     modalFilterProps?: IModalFilterProps;
     showSearch?: boolean;
     showLayoutOptions?: boolean;

package/types/components/tek-tree-grid/tree-grid.d.ts

@@ -22,6 +22,10 @@ export declare class TekTreeGrid extends TreeGridEditable implements ITekTreeGri
      * @public
      */
     dragColumns: boolean;
+    /**
+     * Defines if the grid is the unique grid on screen
+     */
+    mainGrid: boolean;
     /**
      * Enables column resizing
      * @public
@@ -44,6 +48,7 @@ export declare class TekTreeGrid extends TreeGridEditable implements ITekTreeGri
      * Show refresh button
      */
     showReload: boolean;
+    protected keyShortcutKeyMapping: any;
     /**
      * Export config
      */
@@ -61,7 +66,10 @@ export declare class TekTreeGrid extends TreeGridEditable implements ITekTreeGri
      * @param props TekTreeGrid properties
      */
     constructor(props: ITekTreeGrid);
+    onMounted(element: HTMLElement): void;
+    onBeforeDestroy(): void;
     onCreated(): void;
+    protected focusSearchInput(): void;
     get layoutOptions(): TekGridLayoutOptions | undefined;
     /**
      * Get Grid columns objects

package/types/utils/grid-base/grid-base.d.ts

@@ -204,8 +204,8 @@ export declare class GridBase {
     } | {
         name: string;
         component: string;
+        cssClass: string;
         isVisible: string;
-        cssClass?: undefined;
         tag?: undefined;
         text?: undefined;
         title?: undefined;
@@ -249,7 +249,9 @@ export declare class GridBase {
     filterClick({ event }: any): void;
     private filterModal?;
     private createFilterFromColumns;
-    hideFilterModal(): void;
+    hideFilterModal(params?: {
+        event?: Event;
+    }): void;
     private sortFilterIndex;
     private getFilterModalComponents;
     private changeHelperEvent;