refactor: fix lint errors

Author: yordan-st

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -131,6 +131,24 @@ $root: ".widget-datagrid";
                 align-self: center;
             }
 
+            /* Drag handle */
+            .drag-handle {
+                cursor: grab;
+                pointer-events: auto;
+                position: relative;
+                width: 14px;
+                padding: 0;
+                flex-grow: 0;
+                display: flex;
+                justify-content: center;
+                z-index: 1;
+
+                &:hover {
+                    background-color: var(--brand-primary-50, $brand-light);
+                    color: var(--brand-primary, $brand-primary);
+                }
+            }
+
             &:focus:not(:focus-visible) {
                 outline: none;
             }

packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx

@@ -1,5 +1,14 @@
 import classNames from "classnames";
-import { DragEventHandler, HTMLAttributes, KeyboardEvent, ReactElement, ReactNode, useMemo } from "react";
+import {
+    DragEvent,
+    DragEventHandler,
+    HTMLAttributes,
+    KeyboardEvent,
+    MouseEvent,
+    ReactElement,
+    ReactNode,
+    useMemo
+} from "react";
 import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
 import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
@@ -94,25 +103,25 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
 });
 
 function DragHandle({ draggable, onDragStart, onDragEnd }: DragHandleProps): ReactElement {
-    const handleMouseDown = (e: React.MouseEvent) => {
+    const handleMouseDown = (e: MouseEvent<HTMLSpanElement>): void => {
         // Only stop propagation, don't prevent default - we need default for drag to work
         e.stopPropagation();
     };
 
-    const handleClick = (e: React.MouseEvent) => {
+    const handleClick = (e: MouseEvent<HTMLSpanElement>): void => {
         // Stop click events from bubbling to prevent sorting
         e.stopPropagation();
         e.preventDefault();
     };
 
-    const handleDragStart = (e: React.DragEvent<HTMLSpanElement>) => {
+    const handleDragStart = (e: DragEvent<HTMLSpanElement>): void => {
         // Don't stop propagation here - let the drag start properly
         if (onDragStart) {
             onDragStart(e);
         }
     };
 
-    const handleDragEnd = (e: React.DragEvent<HTMLSpanElement>) => {
+    const handleDragEnd = (e: DragEvent<HTMLSpanElement>): void => {
         if (onDragEnd) {
             onDragEnd(e);
         }