Allow mobile pinch to zoom of website on carousel.

packages/nuka/src/carousel.test.tsx

@@ -254,6 +254,127 @@ describe('Carousel', () => {
     fireEvent.touchEnd(carouselFrame, { touches: [{ pageX: 100 }] });
     expect(onUserNavigation).toHaveBeenCalledTimes(9);
 
+    // Simulating multi-touch to not navigate
+    fireEvent.touchStart(carouselFrame, { touches: [{ pageX: 700 }] });
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 700 }],
+    });
+    jest.advanceTimersByTime(100);
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 700 }, { pageX: 701 }],
+    });
+    jest.advanceTimersByTime(100);
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 100 }, { pageX: 101 }],
+    });
+    fireEvent.touchEnd(carouselFrame, { touches: [{ pageX: 100 }] });
+    expect(onUserNavigation).toHaveBeenCalledTimes(9);
+
+    // Simulating mixed multi-touch to navigate
+    fireEvent.touchStart(carouselFrame, { touches: [{ pageX: 700 }] });
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 700 }],
+    });
+    jest.advanceTimersByTime(100);
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 650 }, { pageX: 2000 }],
+    });
+    jest.advanceTimersByTime(100);
+    fireEvent.touchMove(carouselFrame, {
+      touches: [{ pageX: 100 }],
+    });
+    fireEvent.touchEnd(carouselFrame, { touches: [{ pageX: 100 }] });
+    expect(onUserNavigation).toHaveBeenCalledTimes(10);
+
+    // Should not be triggering navigation callback when dragging didn't trigger navigation
+    fireEvent.mouseDown(carouselFrame, { clientX: 100 });
+    fireEvent.mouseMove(carouselFrame, { clientX: 100 });
+    jest.advanceTimersByTime(10);
+    fireEvent.mouseMove(carouselFrame, { clientX: 105 });
+    fireEvent.mouseUp(carouselFrame, { clientX: 105 });
+    expect(onUserNavigation).toHaveBeenCalledTimes(10);
+  });
+
+  it('detects user-triggered navigation with pinch zoom disabled', () => {
+    const beforeSlide = jest.fn();
+    const onUserNavigation = jest.fn();
+    const keyCodeConfig = {
+      nextSlide: [39],
+      previousSlide: [37],
+      firstSlide: [81],
+      lastSlide: [69],
+      pause: [32],
+    };
+    const autoplayInterval = 3000;
+    const slideCount = 8;
+    renderCarousel({
+      allowPinchZoom: false,
+      enableKeyboardControls: true,
+      autoplay: true,
+      autoplayInterval,
+      keyCodeConfig,
+      ref: createCarouselRefWithMockedDimensions().ref,
+      slideCount,
+      beforeSlide,
+      onUserNavigation,
+    });
+
+    expect(onUserNavigation).toHaveBeenCalledTimes(0);
+
+    // Let enough time pass that autoplay triggers navigation
+    act(() => {
+      jest.advanceTimersByTime(autoplayInterval);
+    });
+
+    // Make sure the navigation happened, but did not trigger the
+    // `onUserNavigation` callback (because it wasn't user-initiated)
+    expect(onUserNavigation).toHaveBeenCalledTimes(0);
+    expect(beforeSlide).toHaveBeenLastCalledWith(0, 1);
+
+    const carouselFrame = screen.getByRole('region');
+
+    // Simulating keyboard shortcut use to navigate
+    fireEvent.keyDown(carouselFrame, { keyCode: keyCodeConfig.nextSlide[0] });
+    expect(beforeSlide).toHaveBeenLastCalledWith(1, 2);
+    expect(onUserNavigation).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(carouselFrame, {
+      keyCode: keyCodeConfig.previousSlide[0],
+    });
+    expect(onUserNavigation).toHaveBeenCalledTimes(2);
+
+    fireEvent.keyDown(carouselFrame, { keyCode: keyCodeConfig.lastSlide[0] });
+    expect(onUserNavigation).toHaveBeenCalledTimes(3);
+
+    fireEvent.keyDown(carouselFrame, { keyCode: keyCodeConfig.firstSlide[0] });
+    expect(onUserNavigation).toHaveBeenCalledTimes(4);
+
+    // Simulating clicks on default controls to navigate
+    fireEvent.click(screen.getByRole('button', { name: /next/ }));
+    expect(onUserNavigation).toHaveBeenCalledTimes(5);
+
+    fireEvent.click(screen.getByRole('button', { name: /prev/ }));
+    expect(onUserNavigation).toHaveBeenCalledTimes(6);
+
+    fireEvent.click(screen.getByRole('button', { name: /slide 2/ }));
+    expect(onUserNavigation).toHaveBeenCalledTimes(7);
+
+    // Simulating drag to navigate
+    fireEvent.mouseDown(carouselFrame, { clientX: 100 });
+    fireEvent.mouseMove(carouselFrame, { clientX: 100 });
+    jest.advanceTimersByTime(100);
+    fireEvent.mouseMove(carouselFrame, { clientX: 700 });
+    fireEvent.mouseUp(carouselFrame, { clientX: 700 });
+    expect(onUserNavigation).toHaveBeenCalledTimes(8);
+
+    // Simulating swipe to navigate
+    fireEvent.touchStart(carouselFrame, { touches: [{ pageX: 700 }] });
+    fireEvent.touchMove(carouselFrame, { touches: [{ pageX: 700 }] });
+    jest.advanceTimersByTime(100);
+    fireEvent.touchMove(carouselFrame, { touches: [{ pageX: 100 }] });
+    fireEvent.touchEnd(carouselFrame, { touches: [{ pageX: 100 }] });
+    expect(onUserNavigation).toHaveBeenCalledTimes(9);
+
     // Should not be triggering navigation callback when dragging didn't trigger navigation
     fireEvent.mouseDown(carouselFrame, { clientX: 100 });
     fireEvent.mouseMove(carouselFrame, { clientX: 100 });

packages/nuka/src/carousel.tsx

@@ -39,6 +39,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       adaptiveHeight,
       adaptiveHeightAnimation,
       afterSlide,
+      allowPinchZoom,
       animation,
       autoplay,
       autoplayInterval,
@@ -419,6 +420,25 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
 
     const dragPositions = useRef<{ pos: number; time: number }[]>([]);
 
+    // Proxy the handleDragEnd function to make decisions based on TouchEvent only properties.
+    const handleTouchDragEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+      if (!allowPinchZoom || e.touches.length === 0) return handleDragEnd(e);
+
+      // If the user releases the touch on the carousel with a touch still active
+      // outisde of it, we will not recieve any more touchend events, even though
+      // touches.length > 0. Check to see if any touches are still inside of the slider.
+      let anyTouchInTarget = false;
+      for (let i = 0; i < e.touches.length; i++) {
+        const isContained = !!carouselRef.current?.contains(
+          // The Touch specification directly states this is Element, no clue why the TS definitions say it is something else.
+          e.touches[i].target as Element
+        );
+        anyTouchInTarget ||= isContained;
+      }
+
+      if (!anyTouchInTarget) return handleDragEnd(e);
+    };
+
     const handleDragEnd = (
       e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
     ) => {
@@ -516,7 +536,8 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         if (
           !mobileDraggingEnabled ||
           !sliderListRef.current ||
-          !carouselRef.current
+          !carouselRef.current ||
+          (allowPinchZoom && e.touches.length > 1)
         ) {
           return;
         }
@@ -527,7 +548,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
 
         onDragStart(e);
       },
-      [carouselRef, onDragStart, mobileDraggingEnabled]
+      [mobileDraggingEnabled, carouselRef, allowPinchZoom, onDragStart]
     );
 
     const handlePointerMove = useCallback(
@@ -564,15 +585,20 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
 
     const onTouchMove = useCallback(
       (e: React.TouchEvent<HTMLDivElement>) => {
-        if (!isDragging || !carouselRef.current) return;
+        if (
+          !isDragging ||
+          !carouselRef.current ||
+          (allowPinchZoom && e.touches.length > 1)
+        )
+          return;
 
         onDragStart(e);
 
         const moveValue = carouselRef.current.offsetWidth - e.touches[0].pageX;
 
         handlePointerMove(moveValue);
       },
-      [isDragging, carouselRef, handlePointerMove, onDragStart]
+      [isDragging, carouselRef, allowPinchZoom, onDragStart, handlePointerMove]
     );
 
     const onMouseDown = useCallback(
@@ -697,7 +723,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
             width: '100%',
             position: 'relative',
             outline: 'none',
-            touchAction: 'pan-y',
+            touchAction: allowPinchZoom ? 'pan-y pinch-zoom' : 'pan-y',
             height: frameHeight,
             transition: adaptiveHeightAnimation
               ? 'height 300ms ease-in-out'
@@ -716,7 +742,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           onMouseMove={onMouseMove}
           onMouseLeave={onMouseUp}
           onTouchStart={onTouchStart}
-          onTouchEnd={handleDragEnd}
+          onTouchEnd={handleTouchDragEnd}
           onTouchMove={onTouchMove}
         >
           <SliderList

packages/nuka/src/default-carousel-props.tsx

@@ -11,6 +11,7 @@ const defaultProps: InternalCarouselProps = {
   afterSlide: () => {
     // do nothing
   },
+  allowPinchZoom: true,
   autoplay: false,
   autoplayInterval: 3000,
   autoplayReverse: false,

packages/nuka/src/types.ts

@@ -192,6 +192,13 @@ export interface InternalCarouselProps {
    */
   afterSlide: (index: number) => void;
 
+  /**
+   * Allow document pinch to zoom when touches originate within the carousel.
+   * This also causes the carousel to ignore multiple touch interactions.
+   * @default true;
+   */
+  allowPinchZoom?: boolean;
+
   /**
    * Adds a zoom or fade effect on the currently visible slide.
    */