Issue with DragEventHandler<keyof HTMLElementTagNameMap> Type

[in-ch]

Hello. 😀

When using the Panel component with event handlers such as onDragLeave, onDragEnter, onDrop, and onDragOver typed as DragEventHandler<keyof HTMLElementTagNameMap>, a type error occurs when trying to use the contains method, which is a method of HTMLElement.

Here's an example where the issue occurs:

const handleDragLeave: DragEventHandler<keyof HTMLElementTagNameMap> = (
  e: DragEvent<keyof HTMLElementTagNameMap>,
): void => {
  if (e.currentTarget.contains(e.relatedTarget)) return;
  setIsDragActive(false);
};

The issue is that the keyof HTMLElementTagNameMap type represents string keys for tag names, so it cannot infer the types of methods (e.g., contains) that the event object has.

Therefore, the DragEventHandler<keyof HTMLElementTagNameMap> type is limited in using methods of HTMLElement.

How about using a union type or something similar to make it compatible with both keyof HTMLElementTagNameMap and HTMLElement types?