@zeedhi/teknisa-components-common 1.93.0 → 1.93.1

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

@@ -2295,12 +2295,12 @@ class TekGrid extends GridEditable {
         if (!this.toolbarSlotProps)
             this.toolbarSlot = this.gridBase.createToolbarProps();
         this.navigationKeyMapping.left = {
-            event: this.navigateLeft.bind(this),
+            event: this.directionalLeft.bind(this),
             stop: true,
             active: true,
         };
         this.navigationKeyMapping.right = {
-            event: this.navigateRight.bind(this),
+            event: this.directionalRight.bind(this),
             stop: true,
             active: true,
         };
@@ -2700,73 +2700,82 @@ class TekGrid extends GridEditable {
     navigateDown(params) {
         if (!this.isGrouped()) {
             super.navigateDown();
+            return;
         }
-        else {
-            const { index } = params;
-            if (!this.groupedData.length || index === this.groupedData.length)
-                return;
-            const { uniqueKey, currentRow } = this.datasource;
-            const rowIndex = index !== undefined
-                ? index
-                : this.groupedData.findIndex((row) => {
-                    if (currentRow.group) {
-                        return row.group && row.groupValue === currentRow.groupValue;
-                    }
-                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                });
-            const newRow = this.groupedData[rowIndex + 1];
-            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                this.datasource.currentRow = newRow;
-            }
-            else {
-                this.navigateDown({ index: rowIndex + 1 });
-            }
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('down');
+            return;
         }
+        const { index } = params;
+        if (!this.groupedData.length || index === this.groupedData.length)
+            return;
+        const { uniqueKey, currentRow } = this.datasource;
+        const rowIndex = index !== undefined
+            ? index
+            : this.groupedData.findIndex((row) => {
+                if (currentRow.group) {
+                    return row.group && row.groupValue === currentRow.groupValue;
+                }
+                return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+            });
+        const newRow = this.groupedData[rowIndex + 1];
+        if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+            this.navigateDown({ index: rowIndex + 1 });
+            return;
+        }
+        this.datasource.currentRow = newRow;
     }
     navigateUp(params) {
         if (!this.isGrouped()) {
             super.navigateUp();
+            return;
         }
-        else {
-            const { index } = params;
-            if (!this.groupedData.length || index === -1)
-                return;
-            const { uniqueKey, currentRow } = this.datasource;
-            let rowIndex;
-            rowIndex = index !== undefined
-                ? index
-                : this.groupedData.findIndex((row) => {
-                    if (currentRow.group) {
-                        return row.group && row.groupValue === currentRow.groupValue;
-                    }
-                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                });
-            if (rowIndex === -1)
-                rowIndex = this.groupedData.length;
-            const newRow = this.groupedData[rowIndex - 1];
-            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                this.datasource.currentRow = newRow;
-            }
-            else {
-                this.navigateUp({ index: rowIndex - 1 });
-            }
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('up');
+            return;
+        }
+        const { index } = params;
+        if (!this.groupedData.length || index === -1)
+            return;
+        const { uniqueKey, currentRow } = this.datasource;
+        let rowIndex;
+        rowIndex = index !== undefined
+            ? index
+            : this.groupedData.findIndex((row) => {
+                if (currentRow.group) {
+                    return row.group && row.groupValue === currentRow.groupValue;
+                }
+                return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+            });
+        if (rowIndex === -1)
+            rowIndex = this.groupedData.length;
+        const newRow = this.groupedData[rowIndex - 1];
+        if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+            this.navigateUp({ index: rowIndex - 1 });
+            return;
         }
+        this.datasource.currentRow = newRow;
     }
-    navigateLeft() {
+    directionalLeft() {
         var _a;
         const { currentRow } = this.datasource;
         if (currentRow.group && currentRow.groupOpened) {
             currentRow.groupOpened = false;
+            return;
         }
-        else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
+        if (!this.cellSelection && ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length)) {
             this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
+            return;
         }
+        this.navigateLeft();
     }
-    navigateRight() {
+    directionalRight() {
         const { currentRow } = this.datasource;
         if (currentRow.group && !currentRow.groupOpened) {
             currentRow.groupOpened = true;
+            return;
         }
+        this.navigateRight();
     }
     /**
      * Dispatches row click event

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

@@ -2299,12 +2299,12 @@
           if (!this.toolbarSlotProps)
               this.toolbarSlot = this.gridBase.createToolbarProps();
           this.navigationKeyMapping.left = {
-              event: this.navigateLeft.bind(this),
+              event: this.directionalLeft.bind(this),
               stop: true,
               active: true,
           };
           this.navigationKeyMapping.right = {
-              event: this.navigateRight.bind(this),
+              event: this.directionalRight.bind(this),
               stop: true,
               active: true,
           };
@@ -2704,73 +2704,82 @@
       navigateDown(params) {
           if (!this.isGrouped()) {
               super.navigateDown();
+              return;
           }
-          else {
-              const { index } = params;
-              if (!this.groupedData.length || index === this.groupedData.length)
-                  return;
-              const { uniqueKey, currentRow } = this.datasource;
-              const rowIndex = index !== undefined
-                  ? index
-                  : this.groupedData.findIndex((row) => {
-                      if (currentRow.group) {
-                          return row.group && row.groupValue === currentRow.groupValue;
-                      }
-                      return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                  });
-              const newRow = this.groupedData[rowIndex + 1];
-              if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                  this.datasource.currentRow = newRow;
-              }
-              else {
-                  this.navigateDown({ index: rowIndex + 1 });
-              }
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('down');
+              return;
           }
+          const { index } = params;
+          if (!this.groupedData.length || index === this.groupedData.length)
+              return;
+          const { uniqueKey, currentRow } = this.datasource;
+          const rowIndex = index !== undefined
+              ? index
+              : this.groupedData.findIndex((row) => {
+                  if (currentRow.group) {
+                      return row.group && row.groupValue === currentRow.groupValue;
+                  }
+                  return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+              });
+          const newRow = this.groupedData[rowIndex + 1];
+          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+              this.navigateDown({ index: rowIndex + 1 });
+              return;
+          }
+          this.datasource.currentRow = newRow;
       }
       navigateUp(params) {
           if (!this.isGrouped()) {
               super.navigateUp();
+              return;
           }
-          else {
-              const { index } = params;
-              if (!this.groupedData.length || index === -1)
-                  return;
-              const { uniqueKey, currentRow } = this.datasource;
-              let rowIndex;
-              rowIndex = index !== undefined
-                  ? index
-                  : this.groupedData.findIndex((row) => {
-                      if (currentRow.group) {
-                          return row.group && row.groupValue === currentRow.groupValue;
-                      }
-                      return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-                  });
-              if (rowIndex === -1)
-                  rowIndex = this.groupedData.length;
-              const newRow = this.groupedData[rowIndex - 1];
-              if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                  this.datasource.currentRow = newRow;
-              }
-              else {
-                  this.navigateUp({ index: rowIndex - 1 });
-              }
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('up');
+              return;
+          }
+          const { index } = params;
+          if (!this.groupedData.length || index === -1)
+              return;
+          const { uniqueKey, currentRow } = this.datasource;
+          let rowIndex;
+          rowIndex = index !== undefined
+              ? index
+              : this.groupedData.findIndex((row) => {
+                  if (currentRow.group) {
+                      return row.group && row.groupValue === currentRow.groupValue;
+                  }
+                  return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+              });
+          if (rowIndex === -1)
+              rowIndex = this.groupedData.length;
+          const newRow = this.groupedData[rowIndex - 1];
+          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
+              this.navigateUp({ index: rowIndex - 1 });
+              return;
           }
+          this.datasource.currentRow = newRow;
       }
-      navigateLeft() {
+      directionalLeft() {
           var _a;
           const { currentRow } = this.datasource;
           if (currentRow.group && currentRow.groupOpened) {
               currentRow.groupOpened = false;
+              return;
           }
-          else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
+          if (!this.cellSelection && ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length)) {
               this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
+              return;
           }
+          this.navigateLeft();
       }
-      navigateRight() {
+      directionalRight() {
           const { currentRow } = this.datasource;
           if (currentRow.group && !currentRow.groupOpened) {
               currentRow.groupOpened = true;
+              return;
           }
+          this.navigateRight();
       }
       /**
        * Dispatches row click event

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.93.0",
+  "version": "1.93.1",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "f994901c45e87971a66097fa7c70542402eeb7b1"
+  "gitHead": "20420a9274a19f72fbea80d245bf6a517b02a96b"
 }

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

@@ -938,6 +938,37 @@ describe('TekGrid', () => {
       spySetFocus.mockReset();
       spyMetadata.mockReset();
     });
+
+    it('when using cellSelection, should use viewNavigate', async () => {
+      const instance = new TekGrid({
+        name: 'grid_navigation_1',
+        component: 'TekGrid',
+        cellSelection: true,
+        columns: [
+          {
+            name: 'name',
+            grouped: true,
+          },
+        ],
+      });
+
+      const elem = document.createElement('DIV');
+      (KeyMap as any).isElementActive = () => true;
+      instance.onCreated();
+      instance.onMounted(elem);
+
+      await flushPromises();
+      const spy = jest.fn();
+      instance.setViewNavigate(spy);
+
+      instance.navigateUp();
+
+      expect(spy).toHaveBeenLastCalledWith('up');
+
+      instance.navigateDown();
+
+      expect(spy).toHaveBeenLastCalledWith('down');
+    });
   });
 
   describe('reloadClick()', () => {

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

@@ -133,10 +133,10 @@ export declare class TekGrid extends GridEditable implements ITekGrid {
     }[];
     setSearch(search: string): Promise<any>;
     isGrouped(): number | false;
-    protected navigateDown(params?: any): void;
-    protected navigateUp(params?: any): void;
-    protected navigateLeft(): void;
-    protected navigateRight(): void;
+    navigateDown(params?: any): void;
+    navigateUp(params?: any): void;
+    directionalLeft(): void;
+    directionalRight(): void;
     /**
      * Dispatches row click event
      * @param row Grid row