Hook to enable swipe-down functionality for closing modals on mobile devices.

Author: Kubit

src/hooks/useSwipeDown/__test__/useSwipeDown.test.ts

@@ -0,0 +1,100 @@
+import { act, fireEvent } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import * as useMediaDevice from '@/hooks/useMediaDevice/useMediaDevice';
+import { windowMatchMedia } from '@/tests/windowMatchMedia';
+import { DeviceBreakpointsType } from '@/types';
+
+import { useSwipeDown } from '../useSwipeDown';
+
+let containerRefMock;
+let dragRefMock;
+let onCloseMock;
+let animationExitDurationMock;
+let containerRoot;
+
+describe('useSwipeDown hook', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+  beforeEach(() => {
+    window.matchMedia = windowMatchMedia('onlyMobile');
+    jest
+      .spyOn(useMediaDevice, 'useMediaDevice')
+      .mockImplementation(() => DeviceBreakpointsType.MOBILE);
+    const container = document.createElement('div');
+    const content = document.createElement('div');
+
+    containerRoot?.remove();
+
+    containerRoot = document.createElement('div');
+
+    container.appendChild(content);
+
+    containerRoot.appendChild(container);
+    containerRefMock = {
+      current: container,
+    };
+    dragRefMock = {
+      current: content,
+    };
+    onCloseMock = jest.fn();
+    animationExitDurationMock = 300;
+
+    document.body.appendChild(containerRoot);
+    const { result } = renderHook(() => useSwipeDown(onCloseMock));
+
+    act(() => {
+      result.current.setPopoverRef?.(containerRefMock.current);
+      result.current.setDragIconRef?.(dragRefMock.current);
+    });
+  });
+  describe('useSwipeDown hook', () => {
+    it('should set popover and drag icon refs', () => {
+      const { result } = renderHook(() => useSwipeDown());
+
+      act(() => {
+        result.current.setPopoverRef?.(containerRefMock.current);
+        result.current.setDragIconRef?.(dragRefMock.current);
+      });
+
+      expect(result.current.setPopoverRef).toBeDefined();
+      expect(result.current.setDragIconRef).toBeDefined();
+    });
+    it('Should swipeDown', () => {
+      // Simulate down swipe
+      fireEvent.mouseDown(dragRefMock.current, { clientY: 100 }); // Start swipe
+      fireEvent.mouseMove(dragRefMock.current, { clientY: 50 }); // Swipe down
+      fireEvent.mouseUp(dragRefMock.current, { clientY: 0 }); // End swipe
+      expect(containerRefMock.current.style.bottom).toBe('0px');
+    });
+    it('Should not swipeDown on desktop', () => {
+      window.matchMedia = windowMatchMedia('onlyDesktop');
+      jest
+        .spyOn(useMediaDevice, 'useMediaDevice')
+        .mockImplementation(() => DeviceBreakpointsType.DESKTOP);
+      expect(containerRefMock.current.style.bottom).toBe('');
+    });
+    it('Should not swipeDown if the ref is not ready', () => {
+      containerRefMock.current = null;
+      renderHook(() => useSwipeDown(onCloseMock));
+      // Simulate down swipe
+      fireEvent.mouseDown(dragRefMock.current, { clientY: 100 }); // Start swipe
+      fireEvent.mouseMove(dragRefMock.current, { clientY: 50 }); // Swipe down
+      fireEvent.mouseUp(dragRefMock.current, { clientY: 0 }); // End swipe
+      expect(containerRefMock.current).toBe(null);
+    });
+    it('If event type is touchstart, should set the yStart.current with the first touch clientY', () => {
+      fireEvent.touchStart(dragRefMock.current, { touches: [{ clientY: 100 }] });
+      expect(containerRefMock.current.style.bottom).toBe('');
+    });
+    it('If event type is touchmove, should set the yEnd.current with the last touch clientY and swipe down', () => {
+      fireEvent.touchStart(dragRefMock.current, { touches: [{ clientY: 100 }] });
+      fireEvent.touchMove(dragRefMock.current, { touches: [{ clientY: 50 }] });
+      fireEvent.touchEnd(dragRefMock.current, { touches: [{ clientY: 0 }] });
+      expect(containerRefMock.current.style.bottom).toBe('0px');
+    });
+  });
+});

src/hooks/useSwipeDown/useSwipeDown.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useRef } from 'react';
+
+import { ICssAnimationOptions } from '@/components/cssAnimation';
+import { convertDurationToNumber } from '@/utils/stringUtility/string.utility';
+
+const distanceToTriggerClose = 30;
+
+type ReturnType = {
+  setPopoverRef?: (node: HTMLElement) => void;
+  setDragIconRef?: (node: HTMLElement) => void;
+};
+
+export const useSwipeDown = (
+  animationOptions?: ICssAnimationOptions,
+  handleClose?: () => void
+): ReturnType => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<HTMLDivElement | null>(null);
+
+  const setPopoverRef = useCallback(node => {
+    if (node) {
+      containerRef.current = node;
+    } else {
+      containerRef.current = null;
+    }
+  }, []);
+
+  const setDragIconRef = useCallback(node => {
+    if (node) {
+      dragRef.current = node;
+      dragRef?.current?.addEventListener('mousedown', startMove);
+      dragRef?.current?.addEventListener('mousemove', currentMove);
+      dragRef?.current?.addEventListener('mouseup', endMove);
+
+      dragRef?.current?.addEventListener('touchstart', startMove);
+      dragRef?.current?.addEventListener('touchmove', currentMove);
+      dragRef?.current?.addEventListener('touchend', endMove);
+    } else {
+      dragRef?.current?.removeEventListener('mousedown', startMove);
+      dragRef?.current?.removeEventListener('mousemove', currentMove);
+      dragRef?.current?.removeEventListener('mouseup', endMove);
+
+      dragRef?.current?.removeEventListener('touchstart', startMove);
+      dragRef?.current?.removeEventListener('touchmove', currentMove);
+      dragRef?.current?.removeEventListener('touchend', endMove);
+      dragRef.current = null;
+    }
+  }, []);
+
+  const animationExitDuration =
+    ((convertDurationToNumber(animationOptions?.exitDuration) ||
+      convertDurationToNumber(animationOptions?.duration) ||
+      0) +
+      (convertDurationToNumber(animationOptions?.delay) || 0)) *
+    1000;
+
+  const currentBottom = useRef(0);
+  const yStart = useRef(0);
+  const yEnd = useRef<number | null>(0);
+  const dragMove = useRef(false);
+
+  const startMove = e => {
+    const swiperContent = containerRef?.current;
+    if (!swiperContent) {
+      return;
+    }
+    e.preventDefault?.();
+    swiperContent.style.removeProperty('transition');
+
+    if (e.type === 'touchstart') {
+      yStart.current = e.touches[0].clientY;
+    } else {
+      yStart.current = e.clientY;
+    }
+    dragMove.current = true;
+    yEnd.current = null;
+  };
+
+  const currentMove = e => {
+    const swiperContent = containerRef?.current;
+    if (!dragMove.current || !swiperContent) {
+      return;
+    }
+    if (e.type === 'touchmove' && yEnd !== null) {
+      yEnd.current = e.touches[0].clientY as number;
+    } else {
+      yEnd.current = e.clientY as number;
+    }
+    const currentMove = yStart.current - yEnd.current;
+    if (yEnd.current < yStart.current) {
+      return;
+    }
+    swiperContent.style.bottom = `${currentBottom.current + currentMove}px`;
+  };
+
+  const endMove = () => {
+    const swiperContent = containerRef?.current;
+    if (!swiperContent || !yEnd.current) {
+      return;
+    }
+    dragMove.current = false;
+    swiperContent.style.setProperty('transition', `bottom ${animationExitDuration}ms linear`);
+
+    if (yEnd.current < yStart.current + distanceToTriggerClose) {
+      swiperContent.style.bottom = '0px';
+      return;
+    }
+    // Move modal
+    const distance = currentBottom.current + swiperContent.scrollHeight;
+    swiperContent.style.bottom = `-${distance}px`;
+    setTimeout(() => {
+      handleClose?.();
+    }, animationExitDuration);
+  };
+
+  return { setPopoverRef, setDragIconRef };
+};

src/utils/focusHandlers/focusHandlers.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 const FOCUSABLE_QUERY_SELECTOR =
-  'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+  'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]):not([tabindex="-1"]), summary, [tabindex]:not([tabindex="-1"])';
 
 export const getFocusableDescendants = (element: HTMLElement): HTMLElement[] | boolean => {
   const focusableNodes = Array.from(