Introduce reusable Interaction, PointerInteraction event types for mouse, pointer, touch, and keyboard native events (DevExpress#31240)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/core/widget/widget.ts

@@ -17,7 +17,10 @@ import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import { compare as compareVersions } from '@js/core/utils/version';
-import type { DxEvent } from '@js/events';
+import type {
+  DxEvent,
+  PointerInteractionEvent,
+} from '@js/events';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import { focusable as focusableSelector } from '@ts/core/utils/m_selectors';
 import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
@@ -525,7 +528,7 @@ class Widget<
     $element: dxElementWrapper,
     value: boolean,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    event?: DxEvent<PointerEvent | MouseEvent | TouchEvent>,
+    event?: DxEvent<PointerInteractionEvent>,
   ): void {
     this.option('isActive', value);
     $element.toggleClass(ACTIVE_STATE_CLASS, value);

packages/devextreme/js/__internal/ui/chat/messagebox.ts

@@ -2,6 +2,7 @@ import type { NativeEventInfo } from '@js/common/core/events';
 import messageLocalization from '@js/common/core/localization/message';
 import devices from '@js/core/devices';
 import $, { type dxElementWrapper } from '@js/core/renderer';
+import type { InteractionEvent } from '@js/events';
 import type { ClickEvent, Properties as ButtonProperties } from '@js/ui/button';
 import Button from '@js/ui/button';
 import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
@@ -21,7 +22,7 @@ export const TYPING_END_DELAY = 2000;
 const ESCAPE_KEY = 'escape';
 
 export type MessageEnteredEvent =
-  NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
+  NativeEventInfo<MessageBox, InteractionEvent> &
   { text?: string };
 
 export type TypingStartEvent = NativeEventInfo<MessageBox, UIEvent & { target: HTMLInputElement }>;

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -28,6 +28,7 @@ import { isDefined, isFunction, isPlainObject } from '@js/core/utils/type';
 import type { DataSourceOptions } from '@js/data/data_source';
 import type {
   Cancelable, DxEvent,
+  PointerInteractionEvent,
 } from '@js/events';
 import type {
   CollectionWidgetItem as CollectionWidgetItemProperties,
@@ -116,7 +117,7 @@ export interface PostprocessRenderItemInfo<TItem> {
   itemIndex: number;
 }
 
-export type InkRippleEvent = DxEvent<PointerEvent | MouseEvent | TouchEvent>;
+export type InkRippleEvent = DxEvent<PointerInteractionEvent>;
 export type Constructor<T> = new (...args: unknown[]) => T;
 
 export interface CollectionWidgetBaseProperties<

packages/devextreme/js/__internal/ui/context_menu/menu_base.ts

@@ -6,7 +6,9 @@ import { asyncNoop, noop } from '@js/core/utils/common';
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { each } from '@js/core/utils/iterator';
 import { isDefined, isObject, isPlainObject } from '@js/core/utils/type';
-import type { DxEvent, ItemInfo, NativeEventInfo } from '@js/events';
+import type {
+  DxEvent, ItemInfo, NativeEventInfo, PointerInteractionEvent,
+} from '@js/events';
 import type { dxMenuBaseOptions } from '@js/ui/context_menu/ui.menu_base';
 import type dxMenuBase from '@js/ui/context_menu/ui.menu_base';
 import type {
@@ -51,10 +53,10 @@ const ITEM_URL_CLASS = 'dx-item-url';
 const DX_MENU_ITEM_DATA_KEY = 'dxMenuItemDataKey';
 
 type ItemClickEvent<TComponent, TItem> =
-  NativeEventInfo<TComponent, MouseEvent | PointerEvent | TouchEvent>
+  NativeEventInfo<TComponent, PointerInteractionEvent>
   & ItemInfo<TItem>;
 export type HoverEvent = DxEvent<MouseEvent | PointerEvent>;
-export type ClickEvent = DxEvent<MouseEvent | PointerEvent | TouchEvent>;
+export type ClickEvent = DxEvent<PointerInteractionEvent>;
 export type ItemClickActionArguments<
   TComponent extends dxMenuBase<MenuBaseProperties> = dxMenuBase<MenuBaseProperties>,
   TItem extends dxMenuBaseItem = dxMenuBaseItem,

packages/devextreme/js/__internal/ui/drawer/drawer.ts

@@ -12,7 +12,10 @@ import { Deferred, when } from '@js/core/utils/deferred';
 import { getBoundingRect } from '@js/core/utils/position';
 import { isDefined, isFunction } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
-import type { DxEvent } from '@js/events';
+import type {
+  DxEvent,
+  PointerInteractionEvent,
+} from '@js/events';
 import type { PanelLocation, Properties } from '@js/ui/drawer';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -138,7 +141,7 @@ class Drawer extends Widget<DrawerProperties> {
     super._initTemplates();
   }
 
-  _viewContentWrapperClickHandler(e: DxEvent<MouseEvent | PointerEvent | TouchEvent>): void {
+  _viewContentWrapperClickHandler(e: DxEvent<PointerInteractionEvent>): void {
     const { opened, shading } = this.option();
     let { closeOnOutsideClick } = this.option();
 

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -24,7 +24,11 @@ import { each } from '@js/core/utils/iterator';
 import { getDefaultAlignment } from '@js/core/utils/position';
 import { isDefined } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
-import type { DxEvent, EventInfo } from '@js/events';
+import type {
+  DxEvent,
+  EventInfo,
+  PointerInteractionEvent,
+} from '@js/events';
 import type { Options as Properties } from '@js/ui/drop_down_editor/ui.drop_down_editor';
 import type { Properties as PopupProperties } from '@js/ui/popup';
 import Popup from '@js/ui/popup/ui.popup';
@@ -54,8 +58,6 @@ const OVERLAY_CONTENT_LABEL = 'Dropdown';
 
 const isIOs = devices.current().platform === 'ios';
 
-type HideOnOutsideClickEvent = DxEvent<MouseEvent | PointerEvent | TouchEvent>;
-
 export const DROP_DOWN_EDITOR_DEPRECATED_OPTIONS = {
   fieldTemplate: {
     since: '25.2',
@@ -863,7 +865,7 @@ class DropDownEditor<
       shading: false,
       hideOnParentScroll: true,
       hideOnOutsideClick: (
-        e: DxEvent<MouseEvent | PointerEvent | TouchEvent>,
+        e: DxEvent<PointerInteractionEvent>,
       ): boolean => this._closeOutsideDropDownHandler(e),
       animation: {
         show: {
@@ -987,7 +989,7 @@ class DropDownEditor<
     return positionSide;
   }
 
-  _closeOutsideDropDownHandler(event: HideOnOutsideClickEvent): boolean {
+  _closeOutsideDropDownHandler(event: DxEvent<PointerInteractionEvent>): boolean {
     const { target } = event;
 
     const $target = $(target);

packages/devextreme/js/__internal/ui/form/form.layout_manager.utils.ts

@@ -8,7 +8,10 @@ import type { FunctionTemplate } from '@js/core/templates/function_template';
 import { extend } from '@js/core/utils/extend';
 import { captionize } from '@js/core/utils/inflector';
 import { isDefined, isFunction } from '@js/core/utils/type';
-import type { DxEvent } from '@js/events';
+import type {
+  DxEvent,
+  PointerInteractionEvent,
+} from '@js/events';
 import type {
   FormItemComponent, FormLabelMode, LabelLocation, SimpleItem,
 } from '@js/ui/form';
@@ -253,7 +256,7 @@ function getDropDownEditorOptions(
       // Do not overwrite boolean hideOnOutsideClick
       if (openOnFieldClick && isFunction(initialHideOnOutsideClick)) {
         const hideOnOutsideClick = (
-          e: DxEvent<MouseEvent | PointerEvent | TouchEvent>,
+          e: DxEvent<PointerInteractionEvent>,
         ): boolean => {
           const $target = $(e.target);
           const $label = $parent.find(`label[for="${editorInputId}"]`);

packages/devextreme/js/__internal/ui/list/list.base.ts

@@ -23,7 +23,12 @@ import { getHeight, getOuterHeight, setHeight } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
 import type { DataSourceLike } from '@js/data/data_source';
-import type { DxEvent, NativeEventInfo } from '@js/events';
+import type {
+  DxEvent,
+  InteractionEvent,
+  NativeEventInfo,
+  PointerInteractionEvent,
+} from '@js/events';
 import type { Properties as ButtonProperties } from '@js/ui/button';
 import Button from '@js/ui/button';
 import type {
@@ -869,16 +874,16 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
         $element,
         eventNameClick,
         headerSelector,
-        (e: DxEvent<MouseEvent | PointerEvent | TouchEvent>): void => {
+        (e: DxEvent<PointerInteractionEvent>): void => {
           this._processGroupCollapse(e);
         },
       );
     }
   }
 
-  _processGroupCollapse(e: DxEvent<MouseEvent | PointerEvent | TouchEvent | KeyboardEvent>): void {
+  _processGroupCollapse(e: DxEvent<InteractionEvent>): void {
     const actionCallback = (
-      evt: NativeEventInfo<MouseEvent | PointerEvent | TouchEvent | KeyboardEvent>,
+      evt: NativeEventInfo<InteractionEvent>,
     ): void => {
       const { focusStateEnabled } = this.option();
       const $group = $(evt.event?.currentTarget).parent();

packages/devextreme/js/__internal/ui/list/list.edit.decorator.context.ts

@@ -3,7 +3,10 @@ import messageLocalization from '@js/common/core/localization/message';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
-import type { DxEvent } from '@js/events';
+import type {
+  DxEvent,
+  PointerInteractionEvent,
+} from '@js/events';
 import type { ItemClickEvent } from '@js/ui/list';
 import type dxOverlay from '@js/ui/overlay';
 import { ListBase } from '@ts/ui/list/list.base';
@@ -34,7 +37,7 @@ class EditDecoratorContext extends EditDecorator {
       shading: false,
       deferRendering: true,
       hideOnParentScroll: true,
-      hideOnOutsideClick: (e: DxEvent<MouseEvent | PointerEvent | TouchEvent>): boolean => !$(e.target).closest(`.${CONTEXTMENU_CLASS}`).length,
+      hideOnOutsideClick: (e: DxEvent<PointerInteractionEvent>): boolean => !$(e.target).closest(`.${CONTEXTMENU_CLASS}`).length,
       animation: {
         show: {
           type: 'slide',

packages/devextreme/js/__internal/ui/list/list.edit.decorator.reorder.ts

@@ -5,7 +5,11 @@ import { isMouseEvent } from '@js/common/core/events/utils';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { getWidth, setWidth } from '@js/core/utils/size';
-import type { Cancelable, DxEvent } from '@js/events';
+import type {
+  Cancelable,
+  DxEvent,
+  PointerInteractionEvent,
+} from '@js/events';
 import type {
   DragChangeEvent,
   DragStartEvent,
@@ -114,15 +118,15 @@ class EditDecoratorReorder extends EditDecorator {
     eventsEngine.on(
       $handle,
       pointerEvents.down,
-      (e: DxEvent<PointerEvent | MouseEvent | TouchEvent>): void => {
+      (e: DxEvent<PointerInteractionEvent>): void => {
         this._lockedDrag = !isMouseEvent(e);
       },
     );
     eventsEngine.on(
       $handle,
       holdEvent.name,
       { timeout: 30 },
-      (e: DxEvent<PointerEvent | MouseEvent | TouchEvent> & Cancelable): void => {
+      (e: DxEvent<PointerInteractionEvent> & Cancelable): void => {
         e.cancel = true;
         this._lockedDrag = false;
       },