task(HTL-113265): Pointer fix first commit (#1542)

* task(HTL-113265): Pointer fix first commit

* Rush change

common/changes/pcln-design-system/task-htl-113265-duplicate-two-pointer-fix_2024-12-20-15-44.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Differentiate pointer type on scroll vs drag action",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Drawer/hooks/useSnap.spec.ts

@@ -2,17 +2,27 @@ import { useSnap } from './useSnap'
 import { renderHook } from '@testing-library/react'
 
 describe('Drawer snap hook unit test', () => {
+  const snapHeights = ['20%', '0%', '20%']
+  const snapDimensions = ['100%', '100%', '100%']
+  const { result } = renderHook(() => useSnap(snapHeights, snapDimensions))
+  const { snapPosition, handleSnap } = result.current
   test('Snap position initialized correctly', () => {
-    const { result } = renderHook(() => useSnap(['0%', '20%', '30%'], ['100%', '100%', '100%']))
-    const { snapPosition, handleSnap } = result.current
-    expect(snapPosition).toBe('20%')
-
     // Start middle, scroll up and scroll down should be back to initial position
+    expect(snapPosition).toBe('0%')
     // Scroll to top
-    handleSnap('', { offset: { y: 101 } })
+    handleSnap({ pointerType: 'touch', type: 'pointerup' }, { offset: { y: 101 } })
     // Scroll back to middle
-    handleSnap('', { offset: { y: -101 } })
+    handleSnap({ pointerType: 'touch', type: 'pointerup' }, { offset: { y: -101 } })
+    // Expect it to be back in middle
+    expect(snapPosition).toBe('0%')
+  })
 
-    expect(snapPosition).toBe('20%')
+  test('Does not snap on pointer cancel events (e.g. scrolling through drawer content on iphone)', () => {
+    // Start middle, and touch scroll on drawer content should not trigger an action
+    expect(snapPosition).toBe('0%')
+    // Scroll to top
+    handleSnap({ pointerType: 'touch', type: 'pointercancel' }, { offset: { y: 101 } })
+    // Expect no change
+    expect(snapPosition).toBe('0%')
   })
 })

packages/core/src/Drawer/hooks/useSnap.ts

@@ -19,22 +19,43 @@ export function useSnap(snapHeights, snapDimensions) {
   const [snapPosition, setSnapPosition] = useState(MIDDLE)
 
   const handleSnap = (...args) => {
+    const pointerType = args?.[0]?.pointerType // mouse, touch, etc.
+    const type = args?.[0]?.type // click, pointerup (drag), pointercancel (scroll)
     const info = args?.[1]
     const scrollOffset = info.offset.y
 
     const SCROLL_DOWN = scrollOffset > SCROLL_THRESHOLD
     const SCROLL_UP = scrollOffset < -SCROLL_THRESHOLD
 
-    // Scroll down logic
-    if (SCROLL_DOWN) {
-      if (snapPosition === TOP) setSnapPosition(MIDDLE)
-      if (snapPosition === MIDDLE) setSnapPosition(BOTTOM)
-    }
-
-    // Scroll up logic
-    else if (SCROLL_UP) {
-      if (snapPosition === BOTTOM) setSnapPosition(MIDDLE)
-      if (snapPosition === MIDDLE) setSnapPosition(TOP)
+    /**
+     * Differentiating between content scrolling and container dragging on mobile:
+     *
+     * 1. Content scrolling:
+     *    - Triggered by touch events
+     *    - Has a 'pointercancel' event type
+     *
+     * 2. Container dragging:
+     *    - Should not occur accidentally during content scrolling
+     *    - Has a 'pointerup' event type
+     *
+     * To prevent unintended container dragging, we only allow
+     * dragging when the event type is specifically 'pointerup'.
+     * This ensures smooth content scrolling without accidental
+     * container movement.
+     */
+
+    if (pointerType === 'touch' && type === 'pointerup') {
+      // Scroll down logic
+      if (SCROLL_DOWN) {
+        if (snapPosition === TOP) setSnapPosition(MIDDLE)
+        if (snapPosition === MIDDLE) setSnapPosition(BOTTOM)
+      }
+
+      // Scroll up logic
+      else if (SCROLL_UP) {
+        if (snapPosition === BOTTOM) setSnapPosition(MIDDLE)
+        if (snapPosition === MIDDLE) setSnapPosition(TOP)
+      }
     }
   }