Grids: type keyboard navigation controllers

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_column_keyboard_navigation_mixin.ts

@@ -1,27 +1,34 @@
 import { isCommandKeyPressed } from '@js/common/core/events/utils';
 import { isDefined } from '@js/core/utils/type';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/keyboard_processor';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
-import type { FocusedCellPosition } from '@ts/grids/grid_core/keyboard_navigation/const';
 import { KEY_CODES } from '@ts/grids/grid_core/keyboard_navigation/const';
-import type { ColumnKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core';
-import type { ModuleType } from '@ts/grids/grid_core/types';
+import type { FocusedCellPosition } from '@ts/grids/grid_core/keyboard_navigation/types';
 
-export const ColumnKeyboardNavigationMixin = <T extends ModuleType<ColumnKeyboardNavigationController>>(Base: T) => class ColumnKeyboardNavigationMixin extends Base {
-  private ungroupColumnByPressingKey(e): void {
+import type { MixinBase } from './types';
+
+/* eslint-disable-next-line
+  @typescript-eslint/explicit-module-boundary-types,
+  @typescript-eslint/explicit-function-return-type
+  -- TS can't name the class type of a generic mixin */
+export const ColumnKeyboardNavigationMixin = <T extends MixinBase>(Base: T) => class extends Base {
+  private ungroupColumnByPressingKey(e: KeyboardKeyDownEvent): void {
     const column = this.getColumnFromEvent(e);
     const rowIndex = this.getRowIndexFromEvent(e);
 
     this.ungroupColumn(column, rowIndex);
     e.originalEvent?.preventDefault();
   }
 
-  protected getFocusedCellPositionByColumn(column): FocusedCellPosition | undefined {
+  protected getFocusedCellPositionByColumn(
+    column: Column | undefined,
+  ): FocusedCellPosition | undefined {
     if (!column) {
       return undefined;
     }
 
     const newRowIndex = this._columnsController
-      .getRowIndex(column.index, true);
+      .getRowIndex(column.index ?? -1, true);
 
     return {
       rowIndex: newRowIndex,
@@ -32,20 +39,25 @@ export const ColumnKeyboardNavigationMixin = <T extends ModuleType<ColumnKeyboar
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getRowIndexFromEvent(e): number {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overridable signature
+  protected getRowIndexFromEvent(e: KeyboardKeyDownEvent): number {
     return 0;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getColumnFromEvent(e): any {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overridable signature
+  protected getColumnFromEvent(e: KeyboardKeyDownEvent): Column | undefined {
+    return undefined;
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getNewFocusedColumnBeforeUngrouping(column, rowIndex: number): Column | undefined {
+  protected getNewFocusedColumnBeforeUngrouping(
+    column: Column,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overridable signature
+    rowIndex: number,
+  ): Column | undefined {
     return column;
   }
 
-  protected keyDownHandler(e): boolean {
+  protected keyDownHandler(e: KeyboardKeyDownEvent): boolean {
     let isHandled = super.keyDownHandler(e);
 
     if (isHandled) {
@@ -63,7 +75,11 @@ export const ColumnKeyboardNavigationMixin = <T extends ModuleType<ColumnKeyboar
     return isHandled;
   }
 
-  protected changeGroupColumnIndex(groupIndex: number, column, newFocusedColumn): void {
+  protected changeGroupColumnIndex(
+    groupIndex: number,
+    column: Column,
+    newFocusedColumn: Column | undefined,
+  ): void {
     this._columnsController.beginUpdate();
     this._columnsController.columnOption(column.dataField, 'groupIndex', groupIndex);
 
@@ -73,16 +89,16 @@ export const ColumnKeyboardNavigationMixin = <T extends ModuleType<ColumnKeyboar
     this._columnsController.endUpdate();
   }
 
-  public canUngroupColumnByPressingKey(e): boolean {
+  public canUngroupColumnByPressingKey(e: KeyboardKeyDownEvent): boolean {
     return e.which === KEY_CODES.G && e.shift && isCommandKeyPressed(e.originalEvent);
   }
 
-  public canUngroupAllColumnByPressingKey(e): boolean {
+  public canUngroupAllColumnByPressingKey(e: KeyboardKeyDownEvent): boolean {
     return e.which === KEY_CODES.G && e.shift && e.alt;
   }
 
-  public ungroupColumn(column, rowIndex = 0): void {
-    if (isDefined(column?.groupIndex)) {
+  public ungroupColumn(column: Column | undefined, rowIndex = 0): void {
+    if (column && isDefined(column.groupIndex)) {
       const newFocusedColumn = this.getNewFocusedColumnBeforeUngrouping(
         column,
         rowIndex,

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_group_panel_keyboard_navigation.ts

@@ -3,75 +3,86 @@ import eventsEngine from '@js/common/core/events/core/events_engine';
 import {
   isCommandKeyPressed,
 } from '@js/common/core/events/utils/index';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
 import { hiddenFocus } from '@js/ui/shared/accessibility';
-import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/keyboard_processor';
+import type { Column, GroupColumn } from '@ts/grids/grid_core/columns_controller/types';
 import { Direction } from '@ts/grids/grid_core/keyboard_navigation/const';
 import { ColumnKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core';
+import type { FocusedCellPosition } from '@ts/grids/grid_core/keyboard_navigation/types';
 import type { Views } from '@ts/grids/grid_core/types';
+import type { ViewDataChange } from '@ts/grids/grid_core/views/types';
 
 import gridCore from '../core';
 import { CLASSES as GROUPING_CLASSES } from '../grouping/const';
 import { ColumnKeyboardNavigationMixin } from './m_column_keyboard_navigation_mixin';
 
-export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNavigationMixin(ColumnKeyboardNavigationController) {
+export class GroupPanelKeyboardNavigationController
+  extends ColumnKeyboardNavigationMixin(ColumnKeyboardNavigationController) {
   private isNeedToHiddenFocusAfterClick: boolean | undefined = false;
 
-  private groupItemClickHandlerContext!: (event: any) => void;
+  private groupItemClickHandlerContext!: (event: DxEvent<MouseEvent>) => void;
 
   private headerPanel!: Views['headerPanel'];
 
-  private groupItemClickHandler(e) {
+  private groupItemClickHandler(e: DxEvent<MouseEvent>): void {
     const $groupedColumnElement = $(e.originalEvent.target);
     const groupColumn = this._columnsController.columnOption(`groupIndex:${$groupedColumnElement.index()}`);
 
     this.isNeedToHiddenFocusAfterClick = this._columnsController?.allowColumnSorting(groupColumn);
   }
 
-  private unsubscribeFromGroupItemClick() {
+  private unsubscribeFromGroupItemClick(): void {
     const $focusedView = this.getFocusedViewElement();
 
     if ($focusedView) {
       eventsEngine.off($focusedView, clickEventName, this.groupItemClickHandlerContext);
     }
   }
 
-  private subscribeToGroupItemClick() {
+  private subscribeToGroupItemClick(): void {
     const $focusedView = this.getFocusedViewElement();
 
     if ($focusedView) {
-      eventsEngine.on($focusedView, clickEventName, `.${GROUPING_CLASSES.groupPanelItem}`, this.groupItemClickHandlerContext);
+      eventsEngine.on(
+        $focusedView,
+        clickEventName,
+        `.${GROUPING_CLASSES.groupPanelItem}`,
+        this.groupItemClickHandlerContext,
+      );
     }
   }
 
-  private leftRightKeysHandler(e): void {
+  private leftRightKeysHandler(e: KeyboardKeyDownEvent): void {
     const { originalEvent } = e;
 
     if (isCommandKeyPressed(originalEvent)) {
       const $groupedColumnElement = $(originalEvent.target);
       const column = this._columnsController.columnOption(`groupIndex:${$groupedColumnElement.index()}`);
       const direction = this.getDirectionByKeyName(e.keyName);
 
-      if (this.canReorderColumn(column, direction)) {
+      if (column && this.canReorderColumn(column, direction)) {
         this.moveColumn(column, direction);
       }
 
       originalEvent?.preventDefault();
     }
   }
 
-  protected getVisibleIndex(column) {
-    return column.groupIndex as number;
+  protected getVisibleIndex(column: GroupColumn): number {
+    return column.groupIndex;
   }
 
-  protected getColumnFromEvent(e) {
+  protected getColumnFromEvent(e: KeyboardKeyDownEvent): Column | undefined {
     const $groupedColumnElement = $(e.originalEvent.target);
 
     return this._columnsController
       .columnOption(`groupIndex:${$groupedColumnElement.index()}`);
   }
 
-  protected getNewFocusedColumnBeforeUngrouping(column): Column | undefined {
+  protected getNewFocusedColumnBeforeUngrouping(column: GroupColumn): Column | undefined {
     const visibleColumnIndex: number = column.groupIndex;
     const groupColumns: Column[] = this._columnsController.getGroupColumns();
 
@@ -80,29 +91,29 @@ export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNaviga
       : groupColumns[visibleColumnIndex + 1];
   }
 
-  protected _getCell(cellPosition): any {
+  protected _getCell(cellPosition: FocusedCellPosition): dxElementWrapper | undefined {
     const $groupColumnElements = this.headerPanel?.getColumnElements();
 
     return $groupColumnElements?.eq(cellPosition.columnIndex);
   }
 
-  protected getFocusedView() {
+  protected getFocusedView(): Views['headerPanel'] {
     return this.getView('headerPanel');
   }
 
-  protected getFocusedViewElement() {
+  protected getFocusedViewElement(): dxElementWrapper | undefined {
     return this.headerPanel?.element()?.find(`.${GROUPING_CLASSES.groupPanel}`);
   }
 
   protected getFocusinSelector(): string {
     return `.${GROUPING_CLASSES.groupPanelItem}`;
   }
 
-  protected focusinHandler(e: any): void {
+  protected focusinHandler(e: DxEvent<FocusEvent>): void {
     this.setFocusedCellPosition(0, $(e.target).index());
   }
 
-  protected keyDownHandler(e): boolean {
+  protected keyDownHandler(e: KeyboardKeyDownEvent): boolean {
     let isHandled = super.keyDownHandler(e);
 
     if (isHandled) {
@@ -117,14 +128,12 @@ export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNaviga
     return isHandled;
   }
 
-  protected renderCompleted(e: any) {
-    const { needToRestoreFocus } = this;
-
+  protected renderCompleted(e?: ViewDataChange): void {
     super.renderCompleted(e);
     this.unsubscribeFromGroupItemClick();
     this.subscribeToGroupItemClick();
 
-    if (!needToRestoreFocus && this.isNeedToHiddenFocusAfterClick) {
+    if (!this.needToRestoreFocus && this.isNeedToHiddenFocusAfterClick) {
       const $focusElement = this._getFocusedCell();
 
       if ($focusElement?.length) {
@@ -135,7 +144,7 @@ export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNaviga
     }
   }
 
-  public canUngroupColumnByPressingKey(e) {
+  public canUngroupColumnByPressingKey(e: KeyboardKeyDownEvent): boolean {
     return super.canUngroupColumnByPressingKey(e) || e.keyName === 'backspace' || e.keyName === 'del';
   }
 
@@ -153,7 +162,7 @@ export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNaviga
     super.init();
   }
 
-  public canReorderColumn(groupColumn, direction: Direction): boolean {
+  public canReorderColumn(groupColumn: Column, direction: Direction): boolean {
     const allowDragging = this.headerPanel.allowDragging(groupColumn);
 
     if (!allowDragging) {
@@ -178,3 +187,9 @@ gridCore.registerModule('groupPanelKeyboardNavigation', {
     groupPanelKeyboardNavigation: GroupPanelKeyboardNavigationController,
   },
 });
+
+declare module '@ts/grids/grid_core/types' {
+  interface Controllers {
+    groupPanelKeyboardNavigation: GroupPanelKeyboardNavigationController;
+  }
+}

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/types.ts

@@ -0,0 +1,4 @@
+import type { ColumnKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core';
+import type { ModuleType } from '@ts/grids/grid_core/types';
+
+export type MixinBase = ModuleType<ColumnKeyboardNavigationController>;

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/const.ts

@@ -64,13 +64,3 @@ export enum ViewName {
 export const KEY_CODES = {
   G: 71,
 };
-
-export interface FocusedCellPosition {
-  columnIndex: number;
-  rowIndex: number;
-}
-
-export interface ScrollOffset {
-  left?: number;
-  top?: number;
-}

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core.ts

@@ -1,14 +1,16 @@
 import { isDefined, isEmptyObject } from '@js/core/utils/type';
-import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/keyboard_processor';
+import type { Column, DropLocationNames } from '@ts/grids/grid_core/columns_controller/types';
 
 import type { ColumnFocusDispatcher } from './column_focus_dispatcher';
 import { Direction } from './const';
 import { KeyboardNavigationController as KeyboardNavigationControllerCore } from './m_keyboard_navigation_core';
+import type { FocusedCellPosition } from './types';
 
 export class ColumnKeyboardNavigationController extends KeyboardNavigationControllerCore {
   public columnFocusDispatcher!: ColumnFocusDispatcher;
 
-  protected keyDownHandler(e): boolean {
+  protected keyDownHandler(e: KeyboardKeyDownEvent): boolean {
     return this.processOnKeyDown(e);
   }
 
@@ -57,20 +59,21 @@ export class ColumnKeyboardNavigationController extends KeyboardNavigationContro
     this._focusedCellPosition = {};
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public canReorderColumn(column, direction, rowIndex): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overridable signature
+  public canReorderColumn(column: Column, direction: Direction, rowIndex: number): boolean {
     return false;
   }
 
-  public init() {
+  public init(): void {
     super.init();
 
     this.columnFocusDispatcher = this.getController('columnFocusDispatcher');
     this.columnFocusDispatcher?.registerKeyboardNavigationController(this);
   }
 
-  public moveColumn(column, direction = Direction.Next, rowIndex = 0) {
-    const viewName = this.getFocusedView().getName();
+  public moveColumn(column: Column, direction: Direction = Direction.Next, rowIndex = 0): void {
+    // @ts-expect-error column controllers always have a headers or group panel view
+    const viewName: DropLocationNames = this.getFocusedView().getName();
     const visibleIndex = this.getVisibleIndex(column, rowIndex);
     const newVisibleIndex = this.getNewVisibleIndex(visibleIndex, rowIndex, direction);
     const newFocusedColumnIndex = this.getNewFocusedColumnIndex(newVisibleIndex, direction);
@@ -91,11 +94,11 @@ export class ColumnKeyboardNavigationController extends KeyboardNavigationContro
     return -1;
   }
 
-  public updateViewFocusPosition(cellPosition?: { rowIndex: number; columnIndex: number }) {
+  public updateViewFocusPosition(cellPosition?: FocusedCellPosition): void {
     this.columnFocusDispatcher?.updateFocusPosition(this, cellPosition);
   }
 
-  public updateFocusPosition(cellPosition?: { rowIndex: number; columnIndex: number }) {
+  public updateFocusPosition(cellPosition?: FocusedCellPosition): void {
     this.needToRestoreFocus = true;
 
     if (isDefined(cellPosition)) {
@@ -105,7 +108,7 @@ export class ColumnKeyboardNavigationController extends KeyboardNavigationContro
     }
   }
 
-  public restoreFocus() {
+  public restoreFocus(): void {
     this.needToRestoreFocus = false;
 
     if (isEmptyObject(this._focusedCellPosition)) {