Carousel: Ensure safe indexing of carousel on resize edge case (#33732)

Author: Mitch-At-Work

change/@fluentui-react-carousel-6f17b80c-0ebc-4bca-969c-2776de76fc80.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Ensure carousel handles indexing when window size is larger then combined card size",
+  "packageName": "@fluentui/react-carousel",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts

@@ -70,7 +70,7 @@ export const useCarouselNavButton_unstable = (
 
   useIsomorphicLayoutEffect(() => {
     return subscribeForValues(data => {
-      const controlList = data.groupIndexList[index];
+      const controlList = data.groupIndexList?.[index] ?? [];
       const _controlledSlideIds = controlList
         .map((slideIndex: number) => {
           return data.slideNodes[slideIndex].id;

packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts

@@ -63,7 +63,7 @@ export const useCarouselNavImageButton_unstable = (
 
   useIsomorphicLayoutEffect(() => {
     return subscribeForValues(data => {
-      const controlList = data.groupIndexList[index];
+      const controlList = data.groupIndexList?.[index] ?? [];
       const _controlledSlideIds = controlList
         .map((slideIndex: number) => {
           return data.slideNodes[slideIndex].id;

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

@@ -150,7 +150,9 @@ export function useEmblaCarousel(
   const updateIndex = () => {
     const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;
     const slides = emblaApi.current?.slideNodes();
-    const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;
+    const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;
+    const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;
+
     // We set the first card in the current group as the default tabster index for focus capture
     slides?.forEach((slide, slideIndex) => {
       setTabsterDefault(slide, slideIndex === actualIndex);