Carousel: Ensure buttons are disabled if not enough content to loop (#34427)

Author: Mitch-At-Work

change/@fluentui-react-carousel-d08a816f-8021-43fa-b405-b5d9ab780ca4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Ensure buttons are disabled when not enough content for circular",
+  "packageName": "@fluentui/react-carousel",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/Carousel/Carousel.types.ts

@@ -121,4 +121,8 @@ export interface CarouselUpdateData {
    * An array of the card DOM elements after render
    */
   slideNodes: HTMLElement[];
+  /**
+   * Whether the carousel has enough cards present to enable looping without issues.
+   */
+  canLoop?: boolean;
 }

packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx

@@ -37,13 +37,14 @@ export const useCarouselButton_unstable = (
   const { dir } = useFluent();
   const buttonRef = React.useRef<HTMLButtonElement>();
   const circular = useCarouselContext(ctx => ctx.circular);
+  const [canLoop, setCanLoop] = React.useState(circular);
   const containerRef = useCarouselContext(ctx => ctx.containerRef);
   const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);
   const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);
   const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);
 
   const isTrailing = useCarouselContext(ctx => {
-    if (circular) {
+    if (circular && canLoop) {
       return false;
     }
 
@@ -85,6 +86,10 @@ export const useCarouselButton_unstable = (
 
   useIsomorphicLayoutEffect(() => {
     return subscribeForValues((data: CarouselUpdateData) => {
+      if (data.canLoop !== undefined) {
+        // Only update canLoop if it has been defined by the carousel engine
+        setCanLoop(data.canLoop);
+      }
       setTotalSlides(data.navItemsCount);
     });
   }, [subscribeForValues]);

packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts

@@ -172,11 +172,14 @@ export function useEmblaCarousel(
     const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];
     const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];
     const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;
+    const canLoop = emblaApi.current?.internalEngine().slideLooper.canLoop();
+
     const data: CarouselUpdateData = {
       navItemsCount,
       activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,
       groupIndexList,
       slideNodes: nodes,
+      canLoop,
     };
 
     updateIndex();