PopupDrag: Improve typing and refactor (DevExpress#33832)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

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

@@ -146,8 +146,9 @@ export type PositioningEvent<
 
 interface VisualPositionChangedEvent<
   TPosition = OverlayProperties['position'],
-> extends PositioningEvent<TPosition> {
+> extends Omit<PositioningEvent<TPosition>, 'event'> {
   readonly previousPosition: OverlayProperties['position'];
+  readonly event?: DxEvent<PointerInteractionEvent | KeyboardEvent>;
 }
 
 export interface OverlayActions<

packages/devextreme/js/__internal/ui/overlay/overlay_position_controller.ts

@@ -14,14 +14,13 @@ import type {
   DxEvent,
   PointerInteractionEvent,
 } from '@js/events';
+import windowUtils from '@ts/core/utils/m_window';
 import swatch from '@ts/core/utils/swatch_container';
 import type {
   OverlayActions,
   OverlayProperties,
 } from '@ts/ui/overlay/overlay';
 
-import windowUtils from '../../core/utils/m_window';
-
 export type OverlayPositionAlignment = | 'top center'
   | 'bottom center'
   | 'right center'
@@ -240,7 +239,7 @@ export class OverlayPositionController<
     this.restorePositionOnNextRender(shouldRestorePosition);
   }
 
-  detectVisualPositionChange(event?: DxEvent<PointerInteractionEvent>): void {
+  detectVisualPositionChange(event?: DxEvent<PointerInteractionEvent | KeyboardEvent>): void {
     this._updateVisualPositionValue();
     this._raisePositionedEvents(event);
   }
@@ -313,7 +312,7 @@ export class OverlayPositionController<
     this.detectVisualPositionChange();
   }
 
-  _raisePositionedEvents(event?: DxEvent<PointerInteractionEvent>): void {
+  _raisePositionedEvents(event?: DxEvent<PointerInteractionEvent | KeyboardEvent>): void {
     const previousPosition = this._previousVisualPosition;
     const newPosition = this._visualPosition;
 

packages/devextreme/js/__internal/ui/popup/m_popup.full.ts

@@ -5,6 +5,8 @@ import Popup from '@js/ui/popup/ui.popup';
 
 import type { PopupProperties } from './m_popup';
 
+const TOOLBAR_WIDGET_NAME = 'dxToolbar';
+
 export default class PopupFull extends Popup {
   _getDefaultOptions(): PopupProperties {
     return {
@@ -15,11 +17,12 @@ export default class PopupFull extends Popup {
 
   // eslint-disable-next-line class-methods-use-this
   _getToolbarName(): string {
-    return 'dxToolbar';
+    return TOOLBAR_WIDGET_NAME;
   }
 }
 
-PopupFull.defaultOptions = function (rule) {
+// eslint-disable-next-line func-names
+PopupFull.defaultOptions = function (rule): void {
   Popup.defaultOptions(rule);
 };
 

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -54,16 +54,16 @@ import type {
   ControllerProperties,
 } from '@ts/ui/overlay/overlay_position_controller';
 import * as zIndexPool from '@ts/ui/overlay/z_index';
-import type { ToolbarBaseProperties } from '@ts/ui/toolbar/toolbar.base';
-
-import PopupDrag from './m_popup_drag';
-import type { OverflowManager } from './m_popup_overflow_manager';
-import { createBodyOverflowManager } from './m_popup_overflow_manager';
+import type { PopupDragConfig } from '@ts/ui/popup/m_popup_drag';
+import PopupDrag from '@ts/ui/popup/m_popup_drag';
+import type { OverflowManager } from '@ts/ui/popup/m_popup_overflow_manager';
+import { createBodyOverflowManager } from '@ts/ui/popup/m_popup_overflow_manager';
 import type {
   PopupControllerProperties,
   PopupPositionControllerConstructor,
-} from './popup_position_controller';
-import { PopupPositionController } from './popup_position_controller';
+} from '@ts/ui/popup/popup_position_controller';
+import { PopupPositionController } from '@ts/ui/popup/popup_position_controller';
+import type { ToolbarBaseProperties } from '@ts/ui/toolbar/toolbar.base';
 
 // STYLE popup
 
@@ -97,7 +97,7 @@ const BUTTON_TEXT_MODE = 'text';
 const BUTTON_CONTAINED_MODE = 'contained';
 const BUTTON_OUTLINED_MODE = 'outlined';
 
-const TOOLBAR_NAME_BASE = 'dxToolbarBase';
+const TOOLBAR_BASE_WIDGET_NAME = 'dxToolbarBase';
 
 const HEIGHT_STRATEGIES = {
   static: '',
@@ -208,7 +208,7 @@ class Popup<
 
   _resizable!: Resizable;
 
-  _drag?: PopupDrag;
+  _drag?: PopupDrag<PopupPositionController>;
 
   _renderedDimensions?: {
     width: number;
@@ -959,7 +959,7 @@ class Popup<
 
   // eslint-disable-next-line class-methods-use-this
   _getToolbarName(): string {
-    return TOOLBAR_NAME_BASE;
+    return TOOLBAR_BASE_WIDGET_NAME;
   }
 
   _toggleDisabledState(value: boolean): void {
@@ -1119,7 +1119,7 @@ class Popup<
       return;
     }
 
-    const config = {
+    const config: PopupDragConfig<PopupPositionController> = {
       dragEnabled,
       handle: $dragTarget.get(0),
       draggableElement: this._$content?.get(0),
@@ -1129,7 +1129,7 @@ class Popup<
     if (this._drag) {
       this._drag.init(config);
     } else {
-      this._drag = new PopupDrag(config);
+      this._drag = new PopupDrag<PopupPositionController>(config);
     }
 
     this.$overlayContent().toggleClass(POPUP_DRAGGABLE_CLASS, dragEnabled);