fix: improve mobile touch support for dnd (#15771)

replaces` PointerSensor` with `MouseSensor` + `TouchSensor` (200ms
press-and-hold delay) in both modular dashboard widget drag and
`DraggableSortable` component, so touch gestures no longer conflict with
scrolling on mobile devices

Author: zubricks

packages/next/src/views/Dashboard/Default/ModularDashboard/utils/sensors.ts

@@ -1,6 +1,13 @@
 import type { KeyboardCoordinateGetter, KeyboardSensorOptions } from '@dnd-kit/core'
 
-import { KeyboardCode, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import {
+  KeyboardCode,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
 
 type DroppablePosition = {
   centerX: number
@@ -307,11 +314,17 @@ class DirectFocusKeyboardSensor extends KeyboardSensor {
 
 export function useDashboardSensors() {
   return useSensors(
-    useSensor(PointerSensor, {
+    useSensor(MouseSensor, {
       activationConstraint: {
         distance: 5,
       },
     }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
+      },
+    }),
     useSensor(DirectFocusKeyboardSensor, {
       coordinateGetter: droppableJumpKeyboardCoordinateGetter,
     }),

packages/ui/src/elements/DraggableSortable/index.tsx

@@ -5,7 +5,8 @@ import {
   closestCenter,
   DndContext,
   KeyboardSensor,
-  PointerSensor,
+  MouseSensor,
+  TouchSensor,
   useDroppable,
   useSensor,
   useSensors,
@@ -28,11 +29,17 @@ export const DraggableSortable: React.FC<Props> = (props) => {
   })
 
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(MouseSensor, {
       activationConstraint: {
         distance: 5,
       },
     }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),