fix: improve arrow container structure for hover interactions (#1087)

FormidableLabs · Jan 14, 2025 · 64c86a3 · 64c86a3
2 parents 0f6bd41 + f591390
commit 64c86a3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/docs/api/autoplay.mdx b/docs/api/autoplay.mdx
@@ -14,7 +14,7 @@ For accessibility, the carousel will pause when the user is interacting with it.
 | `autoplay`         | boolean | `false`       |
 | `autoplayInterval` | number  | `3000`        |
 
-### Example
+#### Example
 
 <Carousel autoplay={true} autoplayInterval={1000} wrapMode="wrap">
   <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
@@ -31,3 +31,26 @@ For accessibility, the carousel will pause when the user is interacting with it.
   <img src="pexels-03.jpg" />
 </Carousel>
 ```
+
+### Navigation Arrows
+
+| Prop Name          | Type    | Default Value |
+| :----------------- | :------ | :------------ |
+| `autoplay`         | boolean | `false`       |
+| `showArrows`       | boolean \| `always` \| `hover` | `false`       |
+
+<Carousel autoplay={true} autoplayInterval={2000} wrapMode="wrap" showArrows={true}>
+  <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
+</Carousel>
+
+#### Code
+
+```tsx
+<Carousel autoplay={true} showArrows={true}>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```
diff --git a/packages/nuka/src/Carousel/Carousel.tsx b/packages/nuka/src/Carousel/Carousel.tsx
@@ -64,6 +64,7 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
     const carouselRef = useRef<HTMLDivElement | null>(null);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const previousPageRef = useRef<number>(-1);
+    const arrowsContainerRef = useRef<HTMLDivElement | null>(null);
 
     // -- update page count and scroll offset based on scroll distance
     const { totalPages, scrollOffset } = useMeasurement({
@@ -126,8 +127,13 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
 
     // -- autoplay
     const isHovered = useHover({ element: containerRef, enabled: autoplay });
+    const isArrowHovered = useHover({
+      element: arrowsContainerRef,
+      enabled: autoplay && showArrows === true,
+    });
     const prefersReducedMotion = useReducedMotion({ enabled: autoplay });
-    const autoplayEnabled = autoplay && !(isHovered || prefersReducedMotion);
+    const autoplayEnabled =
+      autoplay && !(isHovered || prefersReducedMotion || isArrowHovered);
     useInterval(goForward, autoplayInterval, autoplayEnabled);
 
     // -- scroll container when page index changes
@@ -191,7 +197,7 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
                 {children}
               </div>
             </div>
-            {showArrows && arrows}
+            {showArrows && <div ref={arrowsContainerRef}>{arrows}</div>}
           </div>
         </div>
         {showDots && dots}