Menu: improve types (#30908)

Author: anna-shakhova

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

@@ -19,6 +19,7 @@ import type dxContextMenu from '@js/ui/context_menu';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
+import type { ClickableCollectionWidgetItem } from '@ts/ui/collection/item';
 import ContextMenu from '@ts/ui/context_menu/context_menu';
 import type {
   ScrollView as ScrollViewType,
@@ -283,13 +284,14 @@ class MessageList extends Widget<Properties> {
     const editText = messageLocalization.format('dxChat-editingEditMessage');
     const deleteText = messageLocalization.format('dxChat-editingDeleteMessage');
 
-    const buttons: ContextMenuItem[] = [];
+    const buttons: ClickableCollectionWidgetItem<ContextMenuItem>[] = [];
 
     if (allowUpdating(message) && message.type !== 'image') {
       buttons.push({
         icon: 'edit',
         text: editText,
         disabled: isEditActionDisabled(message),
+        // @ts-expect-error itemElement
         onClick: (e: ItemClick): void => {
           const onMessageEditStarted = onMessageEditingStart?.({
             event: e.event, message: message as TextMessage,
@@ -309,6 +311,7 @@ class MessageList extends Widget<Properties> {
       buttons.push({
         icon: 'trash',
         text: deleteText,
+        // @ts-expect-error itemElement
         onClick(e: ItemClick): void {
           onMessageDeleting?.({ event: e.event, message });
         },

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

@@ -37,6 +37,7 @@ import type { ActionConfig } from '@ts/core/widget/component';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys, WidgetProperties } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
+import type { ClickableCollectionWidgetItem, ItemClickEvent } from '@ts/ui/collection/item';
 import type CollectionItem from '@ts/ui/collection/item';
 import CollectionWidgetItem from '@ts/ui/collection/item';
 
@@ -117,8 +118,7 @@ export type Constructor<T> = new (...args: unknown[]) => T;
 export interface CollectionWidgetBaseProperties<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TComponent extends CollectionWidget<any, TItem, TKey> | any,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TItem extends ItemLike = any,
+    TItem extends ItemLike = CollectionWidgetItemProperties,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TKey extends CollectionItemKey = any,
 > extends CollectionWidgetOptions<TComponent, TItem, TKey>, Omit<
@@ -145,8 +145,7 @@ export interface CollectionWidgetBaseProperties<
 class CollectionWidget<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TProperties extends CollectionWidgetBaseProperties<any, TItem, TKey>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TItem extends ItemLike = any,
+  TItem extends ItemLike = CollectionWidgetItemProperties,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TKey extends CollectionItemKey = any,
 > extends Widget<TProperties> {
@@ -231,12 +230,10 @@ class CollectionWidget<
     }
 
     const itemData = this._getItemData($itemElement);
-    // @ts-expect-error ts-error
-    if (itemData?.onClick) {
+    if (CollectionWidgetItem.isClickableItem(itemData)) {
       const actionArgs: ActionArgs<TItem> = {
         event: e,
       };
-      // @ts-expect-error
       this._itemEventHandlerByHandler($itemElement, itemData.onClick, actionArgs);
     }
     // @ts-expect-error ts-error
@@ -1240,8 +1237,7 @@ class CollectionWidget<
   }
 
   _attachItemClickEvent(itemData: TItem, $itemElement: dxElementWrapper): void {
-    // @ts-expect-error ts-error
-    if (!itemData || !itemData.onClick) {
+    if (!itemData || !CollectionWidgetItem.isClickableItem(itemData)) {
       return;
     }
 
@@ -1252,7 +1248,6 @@ class CollectionWidget<
         const actionArgs = {
           event: e,
         };
-        // @ts-expect-error ts-error
         this._itemEventHandlerByHandler($itemElement, itemData.onClick, actionArgs);
       },
     );
@@ -1487,7 +1482,7 @@ class CollectionWidget<
 
   _itemEventHandlerByHandler(
     initiator: dxElementWrapper | Element,
-    handler: () => void,
+    handler: (e: ItemClickEvent<ClickableCollectionWidgetItem>) => void,
     actionArgs: ActionArgs<TItem>,
     actionConfig?: ActionConfig,
   ): void {

packages/devextreme/js/__internal/ui/collection/item.ts

@@ -1,8 +1,10 @@
+import type { ItemInfo, NativeEventInfo } from '@js/common/core/events';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { each } from '@js/core/utils/iterator';
 import { attachInstanceToElement, getInstanceByElement } from '@js/core/utils/public_component';
-import type { CollectionWidgetItem } from '@js/ui/collection/ui.collection_widget.base';
+import { isObject } from '@js/core/utils/type';
+import type { CollectionWidgetItem, ItemLike } from '@js/ui/collection/ui.collection_widget.base';
 
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
@@ -51,6 +53,17 @@ export interface ItemExtraOption<TProperties> {
   ) => () => void;
 }
 
+export type ItemClickEvent<TProperties> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  NativeEventInfo<any, KeyboardEvent | MouseEvent | PointerEvent>
+  & ItemInfo<TProperties>;
+
+export type ClickableCollectionWidgetItem<
+  TProperties extends CollectionWidgetItem = CollectionWidgetItem,
+> = TProperties & {
+  onClick: (e: ItemClickEvent<TProperties>) => void;
+};
+
 class CollectionItem<
   TProperties extends CollectionWidgetItem = CollectionWidgetItem,
 > {
@@ -159,9 +172,14 @@ class CollectionItem<
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static getInstance<T = CollectionItem<any>>($element: dxElementWrapper): T {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return getInstanceByElement($element, this);
   }
+
+  static isClickableItem(
+    item: ItemLike,
+  ): item is ClickableCollectionWidgetItem {
+    return isObject(item) && 'onClick' in item;
+  }
 }
 
 export default CollectionItem;

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

@@ -29,13 +29,12 @@ import type {
   HiddenEvent,
   HidingEvent,
   Item,
-  ItemClickEvent,
   PositioningEvent,
   Properties,
   ShowingEvent,
   ShownEvent,
 } from '@js/ui/context_menu';
-import type dxContextMenu from '@js/ui/context_menu';
+import type dxMenuBase from '@js/ui/context_menu/ui.menu_base';
 import type {
   dxMenuBaseItem,
   SubmenuHiddenEvent,
@@ -45,10 +44,11 @@ import type {
 } from '@js/ui/menu';
 import type { Properties as OverlayProperties } from '@js/ui/overlay';
 import { current as currentTheme, isGeneric } from '@js/ui/themes';
-import type { ActionArguments } from '@ts/core/m_action';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
-import type { ClickEvent, HoverEvent, MenuBaseProperties } from '@ts/ui/context_menu/menu_base';
+import type {
+  ClickEvent, HoverEvent, ItemClickActionArguments, MenuBaseProperties,
+} from '@ts/ui/context_menu/menu_base';
 import MenuBase from '@ts/ui/context_menu/menu_base';
 import type { InternalNode } from '@ts/ui/hierarchical_collection/data_converter';
 import Overlay from '@ts/ui/overlay/overlay';
@@ -109,8 +109,6 @@ interface SubmenuCreatedEvent<TItem extends dxMenuBaseItem = dxMenuBaseItem> {
   submenuElement: Element;
   itemData: TItem;
 }
-type ItemClickActionArguments =
-  ActionArguments<dxContextMenu<ContextMenuProperties>, ItemClickEvent>;
 
 interface ContextMenuActions {
   onShowing?: ((e: ShowingEvent | SubmenuShowingEvent | ChatMenuShowingEvent) => void);
@@ -127,20 +125,18 @@ interface ContextMenuActions {
 
 type ContextMenuPropertiesKeys = Exclude<keyof Properties, keyof MenuBaseProperties>;
 
-export interface ContextMenuProperties<
-  TItem extends dxMenuBaseItem = Item,
-> extends
+export interface ContextMenuProperties<TItem extends Item = Item> extends
   MenuBaseProperties<TItem>,
   Pick<Properties, ContextMenuPropertiesKeys> {
   hideOnParentScroll?: boolean;
   visualContainer?: string | Element | Window | null;
   overlayContainer?: string | Element | null;
   boundaryOffset?: PositionConfig['boundaryOffset'];
-  onSubmenuCreated?: ((e) => void) | null;
-  onLeftFirstItem?: ((e) => void) | null;
-  onLeftLastItem?: ((e) => void) | null;
-  onCloseRootSubmenu?: ((e) => void) | null;
-  onExpandLastSubmenu?: ((e) => void) | null;
+  onSubmenuCreated?: ((e: SubmenuCreatedEvent) => void) | null;
+  onLeftFirstItem?: (($item?: dxElementWrapper) => void) | null;
+  onLeftLastItem?: (($item?: dxElementWrapper) => void) | null;
+  onCloseRootSubmenu?: (($item?: dxElementWrapper) => void) | null;
+  onExpandLastSubmenu?: (($item?: dxElementWrapper) => void) | null;
 }
 
 class ContextMenu<
@@ -973,8 +969,9 @@ class ContextMenu<
   }
 
   // TODO: try to simplify it
-  // @ts-expect-error ts-error
-  _updateSubmenuVisibilityOnClick(actionArgs: ItemClickActionArguments): void {
+  _updateSubmenuVisibilityOnClick(
+    actionArgs: ItemClickActionArguments<dxMenuBase<ContextMenuProperties>, Item>,
+  ): void {
     if (!actionArgs.args?.length) {
       return;
     }
@@ -1005,7 +1002,6 @@ class ContextMenu<
       return;
     }
 
-    // @ts-expect-error ts-error
     this._updateSelectedItemOnClick(actionArgs);
 
     // T238943. Give the workaround with e.cancel and remove this hack

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

@@ -46,19 +46,22 @@ const DX_ICON_WITH_URL_CLASS = 'dx-icon-with-url';
 const ITEM_URL_CLASS = 'dx-item-url';
 const DX_MENU_ITEM_DATA_KEY = 'dxMenuItemDataKey';
 
-type ItemClickEvent =
-  NativeEventInfo<dxMenuBase<MenuBaseProperties>, MouseEvent | PointerEvent | TouchEvent>
-  & ItemInfo<dxMenuBaseItem>;
+type ItemClickEvent<TComponent, TItem> =
+  NativeEventInfo<TComponent, MouseEvent | PointerEvent | TouchEvent>
+  & ItemInfo<TItem>;
 export type HoverEvent = DxEvent<MouseEvent | PointerEvent>;
 export type ClickEvent = DxEvent<MouseEvent | PointerEvent | TouchEvent>;
-export type ItemClickActionArguments = ActionArguments<
-  dxMenuBase<MenuBaseProperties>,
-  ItemClickEvent
+export type ItemClickActionArguments<
+  TComponent extends dxMenuBase<MenuBaseProperties> = dxMenuBase<MenuBaseProperties>,
+  TItem extends dxMenuBaseItem = dxMenuBaseItem,
+> = ActionArguments<
+  TComponent,
+  ItemClickEvent<TComponent, TItem>
 >;
 type MenuBaseNode = InternalNode & dxMenuBaseItem;
 
 export interface MenuBaseProperties<
-  TItem extends dxMenuBaseItem = Item,
+  TItem extends dxMenuBaseItem = dxMenuBaseItem,
   // @ts-expect-error ts-error
 > extends dxMenuBaseOptions<MenuBase, TItem> {
   focusedElement?: Element | null;
@@ -272,7 +275,7 @@ class MenuBase<
       return;
     }
 
-    const node: Item | null = this._dataAdapter.getNodeByKey(selectedKey);
+    const node: MenuBaseNode | null = this._dataAdapter.getNodeByKey(selectedKey);
 
     if (!node || node.selectable === false) {
       return;
@@ -412,9 +415,8 @@ class MenuBase<
     return delay;
   }
 
-  // TODO: try to simplify
   _getItemElementByEventArgs(
-    eventArgs: HoverEvent | ClickEvent,
+    eventArgs: DxEvent,
   ): dxElementWrapper | null {
     let $target = $(eventArgs.target);
 
@@ -631,6 +633,10 @@ class MenuBase<
     e._skipHandling = true;
   }
 
+  _isUrlItem(item: Item | dxMenuBaseItem | undefined): item is Item {
+    return !!item && 'url' in item && !!item.url;
+  }
+
   _itemClick(actionArgs: ItemClickActionArguments): void {
     const { event, itemData } = actionArgs.args?.[0] ?? {};
 
@@ -641,7 +647,7 @@ class MenuBase<
     const $itemElement = this._getItemElementByEventArgs(event);
     const link = $itemElement?.find(`.${ITEM_URL_CLASS}`)[0];
 
-    if (!itemData?.url || !link) {
+    if (!this._isUrlItem(itemData) || !link) {
       return;
     }
 
@@ -667,7 +673,7 @@ class MenuBase<
   }
 
   _updateSelectedItemOnClick(actionArgs: ItemClickActionArguments): void {
-    const args: ItemClickEvent = actionArgs.args ? actionArgs.args[0] : actionArgs;
+    const args = actionArgs.args ? actionArgs.args[0] : actionArgs;
 
     const { itemData } = args;
 
@@ -793,7 +799,9 @@ class MenuBase<
   }
 
   selectItem(itemElement: Element | dxMenuBaseItem): void {
-    const itemData = itemElement.nodeType ? this._getItemData(itemElement as Element) : itemElement;
+    const isElement = (item: Element | dxMenuBaseItem): item is Element => typeof item === 'object' && 'nodeType' in item && !!item.nodeType;
+
+    const itemData = isElement(itemElement) ? this._getItemData(itemElement) : itemElement;
     const selectedKey = this._dataAdapter.getSelectedNodesKeys()[0];
     const selectedItem = this.option('selectedItem');
     const node = this._dataAdapter.getNodeByItem(itemData);