@fluentui/react-carousel 9.1.0 → 9.3.0

package/lib/components/useEmblaCarousel.js

@@ -1,9 +1,11 @@
-import { useControllableState } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import EmblaCarousel from 'embla-carousel';
 import * as React from 'react';
 import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
 import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';
 import Autoplay from 'embla-carousel-autoplay';
+import Fade from 'embla-carousel-fade';
+import { pointerEventPlugin } from './pointerEvents';
 const sliderClassname = `.${carouselSliderClassNames.root}`;
 const DEFAULT_EMBLA_OPTIONS = {
     containScroll: 'trimSnaps',
@@ -26,12 +28,19 @@ export function setTabsterDefault(element, isDefault) {
     }
 }
 export function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange } = options;
     const [activeIndex, setActiveIndex] = useControllableState({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
         initialState: 0
     });
+    const onDragEvent = useEventCallback((event, index)=>{
+        onDragIndexChange === null || onDragIndexChange === void 0 ? void 0 : onDragIndexChange(event, {
+            event,
+            type: 'drag',
+            index
+        });
+    });
     const emblaOptions = React.useRef({
         align,
         direction,
@@ -61,6 +70,30 @@ export function useEmblaCarousel(options) {
     }, [
         resetAutoplay
     ]);
+    const getPlugins = React.useCallback(()=>{
+        const plugins = [
+            Autoplay({
+                playOnInit: autoplayRef.current,
+                stopOnInteraction: !autoplayRef.current,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true
+            })
+        ];
+        // Optionally add Fade plugin
+        if (motion === 'fade') {
+            plugins.push(Fade());
+        }
+        if (watchDrag) {
+            plugins.push(pointerEventPlugin({
+                onSelectViaDrag: onDragEvent
+            }));
+        }
+        return plugins;
+    }, [
+        motion,
+        onDragEvent,
+        watchDrag
+    ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
     const listeners = React.useRef(new Set());
     const subscribeForValues = React.useCallback((listener)=>{
@@ -69,6 +102,7 @@ export function useEmblaCarousel(options) {
             listeners.current.delete(listener);
         };
     }, []);
+    const viewportRef = React.useRef(null);
     const containerRef = React.useMemo(()=>{
         let currentElement = null;
         const handleIndexChange = ()=>{
@@ -116,6 +150,7 @@ export function useEmblaCarousel(options) {
                 }));
             });
         };
+        const plugins = getPlugins();
         return {
             set current (newElement){
                 if (currentElement) {
@@ -125,24 +160,16 @@ export function useEmblaCarousel(options) {
                     (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.off('reInit', handleReinit);
                     (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.destroy();
                 }
-                if (newElement) {
+                var _viewportRef_current;
+                // Use direct viewport if available, else fallback to container (includes Carousel controls).
+                const wrapperElement = (_viewportRef_current = viewportRef.current) !== null && _viewportRef_current !== void 0 ? _viewportRef_current : newElement;
+                if (wrapperElement) {
                     var _emblaApi_current4, _emblaApi_current5, _emblaApi_current6;
-                    currentElement = newElement;
-                    emblaApi.current = EmblaCarousel(newElement, {
+                    currentElement = wrapperElement;
+                    emblaApi.current = EmblaCarousel(wrapperElement, {
                         ...DEFAULT_EMBLA_OPTIONS,
                         ...emblaOptions.current
-                    }, [
-                        Autoplay({
-                            playOnInit: autoplayRef.current,
-                            stopOnInteraction: !autoplayRef.current,
-                            stopOnMouseEnter: true,
-                            stopOnFocusIn: true,
-                            rootNode: (emblaRoot)=>{
-                                var _emblaRoot_querySelector;
-                                return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                            }
-                        })
-                    ]);
+                    }, plugins);
                     (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
                     (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
                     (_emblaApi_current6 = emblaApi.current) === null || _emblaApi_current6 === void 0 ? void 0 : _emblaApi_current6.on('select', handleIndexChange);
@@ -150,6 +177,7 @@ export function useEmblaCarousel(options) {
             }
         };
     }, [
+        getPlugins,
         setActiveIndex
     ]);
     const carouselApi = React.useMemo(()=>({
@@ -187,7 +215,9 @@ export function useEmblaCarousel(options) {
     React.useEffect(()=>{
         var _emblaApi_current;
         var _emblaApi_current_selectedScrollSnap;
+        // Scroll to controlled values on update
         const currentActiveIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
+        emblaOptions.current.startIndex = activeIndex;
         if (activeIndex !== currentActiveIndex) {
             var _emblaApi_current1;
             (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.scrollTo(activeIndex);
@@ -197,7 +227,9 @@ export function useEmblaCarousel(options) {
     ]);
     React.useEffect(()=>{
         var _emblaApi_current;
+        const plugins = getPlugins();
         emblaOptions.current = {
+            startIndex: emblaOptions.current.startIndex,
             align,
             direction,
             loop,
@@ -208,29 +240,20 @@ export function useEmblaCarousel(options) {
         (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
             ...DEFAULT_EMBLA_OPTIONS,
             ...emblaOptions.current
-        }, [
-            Autoplay({
-                playOnInit: autoplayRef.current,
-                stopOnInteraction: !autoplayRef.current,
-                stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
-            })
-        ]);
+        }, plugins);
     }, [
         align,
         direction,
         loop,
         slidesToScroll,
         watchDrag,
-        containScroll
+        containScroll,
+        getPlugins
     ]);
     return {
         activeIndex,
         carouselApi,
+        viewportRef,
         containerRef,
         subscribeForValues,
         enableAutoplay,

package/lib/components/useEmblaCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n  containScroll: 'trimSnaps',\n  inViewThreshold: 0.99,\n  watchDrag: false,\n  skipSnaps: true,\n\n  container: sliderClassname,\n  slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n  const tabsterAttr = element.getAttribute('data-tabster');\n\n  if (tabsterAttr) {\n    const tabsterAttributes = JSON.parse(tabsterAttr);\n    if (tabsterAttributes.focusable) {\n      // If tabster.focusable isn't present, we will ignore.\n      tabsterAttributes.focusable.isDefault = isDefault;\n      element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n    }\n  }\n}\n\nexport function useEmblaCarousel(\n  options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n    defaultActiveIndex: number | undefined;\n    activeIndex: number | undefined;\n  },\n) {\n  const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;\n  const [activeIndex, setActiveIndex] = useControllableState({\n    defaultState: options.defaultActiveIndex,\n    state: options.activeIndex,\n    initialState: 0,\n  });\n\n  const emblaOptions = React.useRef<EmblaOptionsType>({\n    align,\n    direction,\n    loop,\n    slidesToScroll,\n    startIndex: activeIndex,\n    watchDrag,\n    containScroll,\n  });\n\n  const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n  const autoplayRef = React.useRef<boolean>(false);\n\n  const resetAutoplay = React.useCallback(() => {\n    emblaApi.current?.plugins().autoplay.reset();\n  }, []);\n\n  /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean) => {\n      autoplayRef.current = autoplay;\n      if (autoplay) {\n        emblaApi.current?.plugins().autoplay.play();\n        // Reset after play to ensure timing and any focus/mouse pause state is reset.\n        resetAutoplay();\n      } else {\n        emblaApi.current?.plugins().autoplay.stop();\n      }\n    },\n    [resetAutoplay],\n  );\n\n  // Listeners contains callbacks for UI elements that may require state update based on embla changes\n  const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n  const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n    listeners.current.add(listener);\n\n    return () => {\n      listeners.current.delete(listener);\n    };\n  }, []);\n\n  const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n    let currentElement: HTMLDivElement | null = null;\n\n    const handleIndexChange = () => {\n      const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n      const slides = emblaApi.current?.slideNodes();\n      const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n      // We set the active or first index of group on-screen as the selected tabster index\n      slides?.forEach((slide, slideIndex) => {\n        setTabsterDefault(slide, slideIndex === actualIndex);\n      });\n      setActiveIndex(newIndex);\n    };\n    const handleReinit = () => {\n      const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n      const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n      const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n      const data: CarouselUpdateData = {\n        navItemsCount,\n        activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n        groupIndexList,\n        slideNodes: nodes,\n      };\n\n      for (const listener of listeners.current) {\n        listener(data);\n      }\n    };\n    const handleVisibilityChange = () => {\n      const cardElements = emblaApi.current?.slideNodes();\n      const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n      cardElements?.forEach((cardElement, index) => {\n        cardElement.dispatchEvent(\n          new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n            bubbles: false,\n            detail: { isVisible: visibleIndexes.includes(index) },\n          }),\n        );\n      });\n    };\n\n    return {\n      set current(newElement: HTMLDivElement | null) {\n        if (currentElement) {\n          emblaApi.current?.off('slidesInView', handleVisibilityChange);\n          emblaApi.current?.off('select', handleIndexChange);\n          emblaApi.current?.off('reInit', handleReinit);\n          emblaApi.current?.destroy();\n        }\n\n        if (newElement) {\n          currentElement = newElement;\n          emblaApi.current = EmblaCarousel(\n            newElement,\n            {\n              ...DEFAULT_EMBLA_OPTIONS,\n              ...emblaOptions.current,\n            },\n            [\n              Autoplay({\n                playOnInit: autoplayRef.current,\n                stopOnInteraction: !autoplayRef.current,\n                stopOnMouseEnter: true,\n                stopOnFocusIn: true,\n                rootNode: (emblaRoot: HTMLElement) => {\n                  return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n                },\n              }),\n            ],\n          );\n\n          emblaApi.current?.on('reInit', handleReinit);\n          emblaApi.current?.on('slidesInView', handleVisibilityChange);\n          emblaApi.current?.on('select', handleIndexChange);\n        }\n      },\n    };\n  }, [setActiveIndex]);\n\n  const carouselApi = React.useMemo(\n    () => ({\n      scrollToElement: (element: HTMLElement, jump?: boolean) => {\n        const cardElements = emblaApi.current?.slideNodes();\n        const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n        const cardIndex = cardElements?.indexOf(element) ?? 0;\n        const groupIndex = groupIndexList.findIndex(group => {\n          return group.includes(cardIndex);\n        });\n        const indexFocus = groupIndex ?? cardIndex;\n        emblaApi.current?.scrollTo(indexFocus, jump);\n\n        return indexFocus;\n      },\n      scrollToIndex: (index: number, jump?: boolean) => {\n        emblaApi.current?.scrollTo(index, jump);\n      },\n      scrollInDirection: (dir: 'prev' | 'next') => {\n        if (dir === 'prev') {\n          emblaApi.current?.scrollPrev();\n        } else {\n          emblaApi.current?.scrollNext();\n        }\n\n        return emblaApi.current?.selectedScrollSnap() ?? 0;\n      },\n    }),\n    [],\n  );\n\n  React.useEffect(() => {\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n    if (activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\n\n  React.useEffect(() => {\n    emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      [\n        Autoplay({\n          playOnInit: autoplayRef.current,\n          stopOnInteraction: !autoplayRef.current,\n          stopOnMouseEnter: true,\n          stopOnFocusIn: true,\n          rootNode: (emblaRoot: HTMLElement) => {\n            return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n          },\n        }),\n      ],\n    );\n  }, [align, direction, loop, slidesToScroll, watchDrag, containScroll]);\n\n  return {\n    activeIndex,\n    carouselApi,\n    containerRef,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["useControllableState","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n  containScroll: 'trimSnaps',\n  inViewThreshold: 0.99,\n  watchDrag: false,\n  skipSnaps: true,\n\n  container: sliderClassname,\n  slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n  const tabsterAttr = element.getAttribute('data-tabster');\n\n  if (tabsterAttr) {\n    const tabsterAttributes = JSON.parse(tabsterAttr);\n    if (tabsterAttributes.focusable) {\n      // If tabster.focusable isn't present, we will ignore.\n      tabsterAttributes.focusable.isDefault = isDefault;\n      element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n    }\n  }\n}\n\nexport function useEmblaCarousel(\n  options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n    defaultActiveIndex: number | undefined;\n    activeIndex: number | undefined;\n    motion?: CarouselMotion;\n    onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n  },\n) {\n  const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange } = options;\n  const [activeIndex, setActiveIndex] = useControllableState({\n    defaultState: options.defaultActiveIndex,\n    state: options.activeIndex,\n    initialState: 0,\n  });\n\n  const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n    onDragIndexChange?.(event, { event, type: 'drag', index });\n  });\n\n  const emblaOptions = React.useRef<EmblaOptionsType>({\n    align,\n    direction,\n    loop,\n    slidesToScroll,\n    startIndex: activeIndex,\n    watchDrag,\n    containScroll,\n  });\n\n  const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n  const autoplayRef = React.useRef<boolean>(false);\n\n  const resetAutoplay = React.useCallback(() => {\n    emblaApi.current?.plugins().autoplay.reset();\n  }, []);\n\n  /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean) => {\n      autoplayRef.current = autoplay;\n      if (autoplay) {\n        emblaApi.current?.plugins().autoplay.play();\n        // Reset after play to ensure timing and any focus/mouse pause state is reset.\n        resetAutoplay();\n      } else {\n        emblaApi.current?.plugins().autoplay.stop();\n      }\n    },\n    [resetAutoplay],\n  );\n\n  const getPlugins = React.useCallback(() => {\n    const plugins: EmblaPluginType[] = [\n      Autoplay({\n        playOnInit: autoplayRef.current,\n        stopOnInteraction: !autoplayRef.current,\n        stopOnMouseEnter: true,\n        stopOnFocusIn: true,\n      }),\n    ];\n\n    // Optionally add Fade plugin\n    if (motion === 'fade') {\n      plugins.push(Fade());\n    }\n\n    if (watchDrag) {\n      plugins.push(\n        pointerEventPlugin({\n          onSelectViaDrag: onDragEvent,\n        }),\n      );\n    }\n\n    return plugins;\n  }, [motion, onDragEvent, watchDrag]);\n\n  // Listeners contains callbacks for UI elements that may require state update based on embla changes\n  const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n  const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n    listeners.current.add(listener);\n\n    return () => {\n      listeners.current.delete(listener);\n    };\n  }, []);\n\n  const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n  const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n    let currentElement: HTMLDivElement | null = null;\n\n    const handleIndexChange = () => {\n      const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n      const slides = emblaApi.current?.slideNodes();\n      const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n\n      // We set the active or first index of group on-screen as the selected tabster index\n      slides?.forEach((slide, slideIndex) => {\n        setTabsterDefault(slide, slideIndex === actualIndex);\n      });\n      setActiveIndex(newIndex);\n    };\n    const handleReinit = () => {\n      const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n      const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n      const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n      const data: CarouselUpdateData = {\n        navItemsCount,\n        activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n        groupIndexList,\n        slideNodes: nodes,\n      };\n\n      for (const listener of listeners.current) {\n        listener(data);\n      }\n    };\n    const handleVisibilityChange = () => {\n      const cardElements = emblaApi.current?.slideNodes();\n      const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n      cardElements?.forEach((cardElement, index) => {\n        cardElement.dispatchEvent(\n          new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n            bubbles: false,\n            detail: { isVisible: visibleIndexes.includes(index) },\n          }),\n        );\n      });\n    };\n\n    const plugins = getPlugins();\n\n    return {\n      set current(newElement: HTMLDivElement | null) {\n        if (currentElement) {\n          emblaApi.current?.off('slidesInView', handleVisibilityChange);\n          emblaApi.current?.off('select', handleIndexChange);\n          emblaApi.current?.off('reInit', handleReinit);\n          emblaApi.current?.destroy();\n        }\n\n        // Use direct viewport if available, else fallback to container (includes Carousel controls).\n        const wrapperElement = viewportRef.current ?? newElement;\n        if (wrapperElement) {\n          currentElement = wrapperElement;\n          emblaApi.current = EmblaCarousel(\n            wrapperElement,\n            {\n              ...DEFAULT_EMBLA_OPTIONS,\n              ...emblaOptions.current,\n            },\n            plugins,\n          );\n\n          emblaApi.current?.on('reInit', handleReinit);\n          emblaApi.current?.on('slidesInView', handleVisibilityChange);\n          emblaApi.current?.on('select', handleIndexChange);\n        }\n      },\n    };\n  }, [getPlugins, setActiveIndex]);\n\n  const carouselApi = React.useMemo(\n    () => ({\n      scrollToElement: (element: HTMLElement, jump?: boolean) => {\n        const cardElements = emblaApi.current?.slideNodes();\n        const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n        const cardIndex = cardElements?.indexOf(element) ?? 0;\n        const groupIndex = groupIndexList.findIndex(group => {\n          return group.includes(cardIndex);\n        });\n        const indexFocus = groupIndex ?? cardIndex;\n        emblaApi.current?.scrollTo(indexFocus, jump);\n\n        return indexFocus;\n      },\n      scrollToIndex: (index: number, jump?: boolean) => {\n        emblaApi.current?.scrollTo(index, jump);\n      },\n      scrollInDirection: (dir: 'prev' | 'next') => {\n        if (dir === 'prev') {\n          emblaApi.current?.scrollPrev();\n        } else {\n          emblaApi.current?.scrollNext();\n        }\n\n        return emblaApi.current?.selectedScrollSnap() ?? 0;\n      },\n    }),\n    [],\n  );\n\n  React.useEffect(() => {\n    // Scroll to controlled values on update\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    emblaOptions.current.startIndex = activeIndex;\n    if (activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\n\n  React.useEffect(() => {\n    const plugins = getPlugins();\n\n    emblaOptions.current = {\n      startIndex: emblaOptions.current.startIndex,\n      align,\n      direction,\n      loop,\n      slidesToScroll,\n      watchDrag,\n      containScroll,\n    };\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      plugins,\n    );\n  }, [align, direction, loop, slidesToScroll, watchDrag, containScroll, getPlugins]);\n\n  return {\n    activeIndex,\n    carouselApi,\n    viewportRef,\n    containerRef,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","getPlugins","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","push","onSelectViaDrag","listeners","Set","subscribeForValues","listener","add","delete","viewportRef","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","wrapperElement","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA4BA,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACtG,OAAOC,mBAAuF,iBAAiB;AAC/G,YAAYC,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,8CAA8C;AACrF,SAASC,wBAAwB,QAAQ,kDAAkD;AAE3F,OAAOC,cAAc,0BAA0B;AAC/C,OAAOC,UAAU,sBAAsB;AACvC,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD,MAAMC,kBAAkB,CAAC,CAAC,EAAEJ,yBAAyBK,IAAI,CAAC,CAAC;AAE3D,MAAMC,wBAA0C;IAC9CC,eAAe;IACfC,iBAAiB;IACjBC,WAAW;IACXC,WAAW;IAEXC,WAAWP;IACXQ,QAAQ,CAAC,CAAC,EAAEb,uBAAuBM,IAAI,CAAC,CAAC;AAC3C;AAEA,OAAO,MAAMQ,yBAAyB,yBAAyB;AAE/D,OAAO,SAASC,kBAAkBC,OAAgB,EAAEC,SAAkB;IACpE,MAAMC,cAAcF,QAAQG,YAAY,CAAC;IAEzC,IAAID,aAAa;QACf,MAAME,oBAAoBC,KAAKC,KAAK,CAACJ;QACrC,IAAIE,kBAAkBG,SAAS,EAAE;YAC/B,sDAAsD;YACtDH,kBAAkBG,SAAS,CAACN,SAAS,GAAGA;YACxCD,QAAQQ,YAAY,CAAC,gBAAgBH,KAAKI,SAAS,CAACL;QACtD;IACF;AACF;AAEA,OAAO,SAASM,iBACdC,OAKC;IAED,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,IAAI,EAAEC,cAAc,EAAErB,SAAS,EAAEF,aAAa,EAAEwB,MAAM,EAAEC,iBAAiB,EAAE,GAAGN;IACxG,MAAM,CAACO,aAAaC,eAAe,GAAGvC,qBAAqB;QACzDwC,cAAcT,QAAQU,kBAAkB;QACxCC,OAAOX,QAAQO,WAAW;QAC1BK,cAAc;IAChB;IAEA,MAAMC,cAAc3C,iBAAiB,CAAC4C,OAAkCC;QACtET,8BAAAA,wCAAAA,kBAAoBQ,OAAO;YAAEA;YAAOE,MAAM;YAAQD;QAAM;IAC1D;IAEA,MAAME,eAAe7C,MAAM8C,MAAM,CAAmB;QAClDjB;QACAC;QACAC;QACAC;QACAe,YAAYZ;QACZxB;QACAF;IACF;IAEA,MAAMuC,WAAWhD,MAAM8C,MAAM,CAA2B;IACxD,MAAMG,cAAcjD,MAAM8C,MAAM,CAAU;IAE1C,MAAMI,gBAAgBlD,MAAMmD,WAAW,CAAC;YACtCH;SAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,CAACC,KAAK;IAC5C,GAAG,EAAE;IAEL,gHAAgH,GAChH,MAAMC,iBAAiBxD,MAAMmD,WAAW,CACtC,CAACG;QACCL,YAAYG,OAAO,GAAGE;QACtB,IAAIA,UAAU;gBACZN;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,CAACG,IAAI;YACzC,8EAA8E;YAC9EP;QACF,OAAO;gBACLF;aAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBK,OAAO,GAAGC,QAAQ,CAACI,IAAI;QAC3C;IACF,GACA;QAACR;KAAc;IAGjB,MAAMS,aAAa3D,MAAMmD,WAAW,CAAC;QACnC,MAAME,UAA6B;YACjClD,SAAS;gBACPyD,YAAYX,YAAYG,OAAO;gBAC/BS,mBAAmB,CAACZ,YAAYG,OAAO;gBACvCU,kBAAkB;gBAClBC,eAAe;YACjB;SACD;QAED,6BAA6B;QAC7B,IAAI9B,WAAW,QAAQ;YACrBoB,QAAQW,IAAI,CAAC5D;QACf;QAEA,IAAIO,WAAW;YACb0C,QAAQW,IAAI,CACV3D,mBAAmB;gBACjB4D,iBAAiBxB;YACnB;QAEJ;QAEA,OAAOY;IACT,GAAG;QAACpB;QAAQQ;QAAa9B;KAAU;IAEnC,oGAAoG;IACpG,MAAMuD,YAAYlE,MAAM8C,MAAM,CAAC,IAAIqB;IACnC,MAAMC,qBAAqBpE,MAAMmD,WAAW,CAAC,CAACkB;QAC5CH,UAAUd,OAAO,CAACkB,GAAG,CAACD;QAEtB,OAAO;YACLH,UAAUd,OAAO,CAACmB,MAAM,CAACF;QAC3B;IACF,GAAG,EAAE;IAEL,MAAMG,cAA+CxE,MAAM8C,MAAM,CAAC;IAClE,MAAM2B,eAAgDzE,MAAM0E,OAAO,CAAC;QAClE,IAAIC,iBAAwC;QAE5C,MAAMC,oBAAoB;gBACP5B,mBACFA,oBACKA;gBAFHA;YAAjB,MAAM6B,WAAW7B,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB8B,kBAAkB,gBAApC9B,kDAAAA,uCAA0C;YAC3D,MAAMlC,UAASkC,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB+B,UAAU;gBACvB/B;YAApB,MAAMgC,cAAchC,CAAAA,4DAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBiC,cAAc,GAAGC,aAAa,CAACL,SAAS,CAAC,EAAE,cAA7D7B,sEAAAA,2DAAiE;YAErF,oFAAoF;YACpFlC,mBAAAA,6BAAAA,OAAQqE,OAAO,CAAC,CAACC,OAAOC;gBACtBrE,kBAAkBoE,OAAOC,eAAeL;YAC1C;YACA5C,eAAeyC;QACjB;QACA,MAAMS,eAAe;gBACUtC,mBACMA,oBAKpBA;gBANcA;YAA7B,MAAMuC,QAAuBvC,CAAAA,gCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB+B,UAAU,gBAA5B/B,0CAAAA,+BAAkC,EAAE;gBAC9BA;YAAnC,MAAMwC,iBAA6BxC,CAAAA,kDAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBiC,cAAc,GAAGC,aAAa,cAAhDlC,4DAAAA,iDAAoD,EAAE;YACzF,MAAMyC,gBAAgBD,eAAeE,MAAM,GAAG,IAAIF,eAAeE,MAAM,GAAGH,MAAMG,MAAM;gBAIvE1C;YAFf,MAAM2C,OAA2B;gBAC/BF;gBACAtD,aAAaa,CAAAA,wCAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB8B,kBAAkB,gBAApC9B,kDAAAA,uCAA0C;gBACvDwC;gBACAT,YAAYQ;YACd;YAEA,KAAK,MAAMlB,YAAYH,UAAUd,OAAO,CAAE;gBACxCiB,SAASsB;YACX;QACF;QACA,MAAMC,yBAAyB;gBACR5C,mBACEA;YADvB,MAAM6C,gBAAe7C,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB+B,UAAU;gBAC1B/B;YAAvB,MAAM8C,iBAAiB9C,CAAAA,kCAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB+C,YAAY,gBAA9B/C,4CAAAA,iCAAoC,EAAE;YAE7D6C,yBAAAA,mCAAAA,aAAcV,OAAO,CAAC,CAACa,aAAarD;gBAClCqD,YAAYC,aAAa,CACvB,IAAIC,YAA2CnF,wBAAwB;oBACrEoF,SAAS;oBACTC,QAAQ;wBAAEC,WAAWP,eAAeQ,QAAQ,CAAC3D;oBAAO;gBACtD;YAEJ;QACF;QAEA,MAAMU,UAAUM;QAEhB,OAAO;YACL,IAAIP,SAAQmD,WAAmC;gBAC7C,IAAI5B,gBAAgB;wBAClB3B,mBACAA,oBACAA,oBACAA;qBAHAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBwD,GAAG,CAAC,gBAAgBZ;qBACtC5C,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBwD,GAAG,CAAC,UAAU5B;qBAChC5B,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBwD,GAAG,CAAC,UAAUlB;qBAChCtC,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByD,OAAO;gBAC3B;oBAGuBjC;gBADvB,6FAA6F;gBAC7F,MAAMkC,iBAAiBlC,CAAAA,uBAAAA,YAAYpB,OAAO,cAAnBoB,kCAAAA,uBAAuB+B;gBAC9C,IAAIG,gBAAgB;wBAWlB1D,oBACAA,oBACAA;oBAZA2B,iBAAiB+B;oBACjB1D,SAASI,OAAO,GAAGrD,cACjB2G,gBACA;wBACE,GAAGlG,qBAAqB;wBACxB,GAAGqC,aAAaO,OAAO;oBACzB,GACAC;qBAGFL,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB2D,EAAE,CAAC,UAAUrB;qBAC/BtC,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB2D,EAAE,CAAC,gBAAgBf;qBACrC5C,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB2D,EAAE,CAAC,UAAU/B;gBACjC;YACF;QACF;IACF,GAAG;QAACjB;QAAYvB;KAAe;IAE/B,MAAMwE,cAAc5G,MAAM0E,OAAO,CAC/B,IAAO,CAAA;YACLmC,iBAAiB,CAAC5F,SAAsB6F;oBACjB9D,mBACEA,oBAMvBA;gBAPA,MAAM6C,gBAAe7C,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB+B,UAAU;oBAC1B/B;gBAAvB,MAAMwC,iBAAiBxC,CAAAA,kDAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBiC,cAAc,GAAGC,aAAa,cAAhDlC,4DAAAA,iDAAoD,EAAE;oBAC3D6C;gBAAlB,MAAMkB,YAAYlB,CAAAA,wBAAAA,yBAAAA,mCAAAA,aAAcmB,OAAO,CAAC/F,sBAAtB4E,mCAAAA,wBAAkC;gBACpD,MAAMoB,aAAazB,eAAe0B,SAAS,CAACC,CAAAA;oBAC1C,OAAOA,MAAMb,QAAQ,CAACS;gBACxB;gBACA,MAAMK,aAAaH,uBAAAA,wBAAAA,aAAcF;iBACjC/D,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBqE,QAAQ,CAACD,YAAYN;gBAEvC,OAAOM;YACT;YACAE,eAAe,CAAC3E,OAAemE;oBAC7B9D;iBAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBqE,QAAQ,CAAC1E,OAAOmE;YACpC;YACAS,mBAAmB,CAACC;oBAOXxE;gBANP,IAAIwE,QAAQ,QAAQ;wBAClBxE;qBAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByE,UAAU;gBAC9B,OAAO;wBACLzE;qBAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB0E,UAAU;gBAC9B;oBAEO1E;gBAAP,OAAOA,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB8B,kBAAkB,gBAApC9B,kDAAAA,uCAA0C;YACnD;QACF,CAAA,GACA,EAAE;IAGJhD,MAAM2H,SAAS,CAAC;YAEa3E;YAAAA;QAD3B,wCAAwC;QACxC,MAAM4E,qBAAqB5E,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB8B,kBAAkB,gBAApC9B,kDAAAA,uCAA0C;QACrEH,aAAaO,OAAO,CAACL,UAAU,GAAGZ;QAClC,IAAIA,gBAAgByF,oBAAoB;gBACtC5E;aAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBqE,QAAQ,CAAClF;QAC7B;IACF,GAAG;QAACA;KAAY;IAEhBnC,MAAM2H,SAAS,CAAC;YAYd3E;QAXA,MAAMK,UAAUM;QAEhBd,aAAaO,OAAO,GAAG;YACrBL,YAAYF,aAAaO,OAAO,CAACL,UAAU;YAC3ClB;YACAC;YACAC;YACAC;YACArB;YACAF;QACF;SACAuC,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB6E,MAAM,CACtB;YACE,GAAGrH,qBAAqB;YACxB,GAAGqC,aAAaO,OAAO;QACzB,GACAC;IAEJ,GAAG;QAACxB;QAAOC;QAAWC;QAAMC;QAAgBrB;QAAWF;QAAekD;KAAW;IAEjF,OAAO;QACLxB;QACAyE;QACApC;QACAC;QACAL;QACAZ;QACAN;IACF;AACF"}

package/lib/index.js

@@ -8,3 +8,4 @@ export { CarouselNavImageButton, carouselNavImageButtonClassNames, renderCarouse
 export { CarouselSlider, carouselSliderClassNames, renderCarouselSlider_unstable, useCarouselSliderStyles_unstable, useCarouselSlider_unstable } from './CarouselSlider';
 export { CarouselNavContainer, carouselNavContainerClassNames, renderCarouselNavContainer_unstable, useCarouselNavContainerStyles_unstable, useCarouselNavContainer_unstable } from './CarouselNavContainer';
 export { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';
+export { CarouselViewport, carouselViewportClassNames, renderCarouselViewport_unstable, useCarouselViewportStyles_unstable, useCarouselViewport_unstable } from './CarouselViewport';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton';\nexport {\n  CarouselButton,\n  carouselButtonClassNames,\n  renderCarouselButton_unstable,\n  useCarouselButtonStyles_unstable,\n  useCarouselButton_unstable,\n} from './CarouselButton';\nexport type { CarouselNavProps, CarouselNavSlots, CarouselNavState, NavButtonRenderFunction } from './CarouselNav';\nexport {\n  CarouselNav,\n  carouselNavClassNames,\n  renderCarouselNav_unstable,\n  useCarouselNavStyles_unstable,\n  useCarouselNav_unstable,\n} from './CarouselNav';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton';\nexport {\n  CarouselNavButton,\n  carouselNavButtonClassNames,\n  renderCarouselNavButton_unstable,\n  useCarouselNavButtonStyles_unstable,\n  useCarouselNavButton_unstable,\n} from './CarouselNavButton';\nexport type { CarouselProps, CarouselSlots, CarouselState, CarouselAnnouncerFunction } from './Carousel';\nexport {\n  Carousel,\n  carouselClassNames,\n  renderCarousel_unstable,\n  useCarouselStyles_unstable,\n  useCarousel_unstable,\n} from './Carousel';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard';\nexport {\n  CarouselCard,\n  carouselCardClassNames,\n  renderCarouselCard_unstable,\n  useCarouselCardStyles_unstable,\n  useCarouselCard_unstable,\n} from './CarouselCard';\nexport type {\n  CarouselAutoplayButtonProps,\n  CarouselAutoplayButtonSlots,\n  CarouselAutoplayButtonState,\n} from './CarouselAutoplayButton';\nexport {\n  CarouselAutoplayButton,\n  carouselAutoplayButtonClassNames,\n  renderCarouselAutoplayButton_unstable,\n  useCarouselAutoplayButtonStyles_unstable,\n  useCarouselAutoplayButton_unstable,\n} from './CarouselAutoplayButton';\nexport type {\n  CarouselNavImageButtonProps,\n  CarouselNavImageButtonSlots,\n  CarouselNavImageButtonState,\n} from './CarouselNavImageButton';\nexport {\n  CarouselNavImageButton,\n  carouselNavImageButtonClassNames,\n  renderCarouselNavImageButton_unstable,\n  useCarouselNavImageButtonStyles_unstable,\n  useCarouselNavImageButton_unstable,\n} from './CarouselNavImageButton';\nexport {\n  CarouselSlider,\n  carouselSliderClassNames,\n  renderCarouselSlider_unstable,\n  useCarouselSliderStyles_unstable,\n  useCarouselSlider_unstable,\n} from './CarouselSlider';\nexport type { CarouselSliderProps, CarouselSliderSlots, CarouselSliderState } from './CarouselSlider';\nexport type {\n  CarouselNavContainerProps,\n  CarouselNavContainerSlots,\n  CarouselNavContainerState,\n} from './CarouselNavContainer';\nexport {\n  CarouselNavContainer,\n  carouselNavContainerClassNames,\n  renderCarouselNavContainer_unstable,\n  useCarouselNavContainerStyles_unstable,\n  useCarouselNavContainer_unstable,\n} from './CarouselNavContainer';\nexport { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';\nexport type { CarouselIndexChangeData, CarouselContextValue, CarouselContextValues } from './CarouselContext';\n"],"names":["CarouselButton","carouselButtonClassNames","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCarouselButton_unstable","CarouselNav","carouselNavClassNames","renderCarouselNav_unstable","useCarouselNavStyles_unstable","useCarouselNav_unstable","CarouselNavButton","carouselNavButtonClassNames","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCarouselNavButton_unstable","Carousel","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable","CarouselCard","carouselCardClassNames","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCarouselCard_unstable","CarouselAutoplayButton","carouselAutoplayButtonClassNames","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCarouselAutoplayButton_unstable","CarouselNavImageButton","carouselNavImageButtonClassNames","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCarouselNavImageButton_unstable","CarouselSlider","carouselSliderClassNames","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSlider_unstable","CarouselNavContainer","carouselNavContainerClassNames","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCarouselNavContainer_unstable","carouselContextDefaultValue","CarouselProvider","useCarouselContext_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAE7B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAMxB,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAMlC,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAClC,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAO1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB;AAChC,SAASC,2BAA2B,EAAEC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton';\nexport {\n  CarouselButton,\n  carouselButtonClassNames,\n  renderCarouselButton_unstable,\n  useCarouselButtonStyles_unstable,\n  useCarouselButton_unstable,\n} from './CarouselButton';\nexport type { CarouselNavProps, CarouselNavSlots, CarouselNavState, NavButtonRenderFunction } from './CarouselNav';\nexport {\n  CarouselNav,\n  carouselNavClassNames,\n  renderCarouselNav_unstable,\n  useCarouselNavStyles_unstable,\n  useCarouselNav_unstable,\n} from './CarouselNav';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton';\nexport {\n  CarouselNavButton,\n  carouselNavButtonClassNames,\n  renderCarouselNavButton_unstable,\n  useCarouselNavButtonStyles_unstable,\n  useCarouselNavButton_unstable,\n} from './CarouselNavButton';\nexport type { CarouselProps, CarouselSlots, CarouselState, CarouselAnnouncerFunction } from './Carousel';\nexport {\n  Carousel,\n  carouselClassNames,\n  renderCarousel_unstable,\n  useCarouselStyles_unstable,\n  useCarousel_unstable,\n} from './Carousel';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard';\nexport {\n  CarouselCard,\n  carouselCardClassNames,\n  renderCarouselCard_unstable,\n  useCarouselCardStyles_unstable,\n  useCarouselCard_unstable,\n} from './CarouselCard';\nexport type {\n  CarouselAutoplayButtonProps,\n  CarouselAutoplayButtonSlots,\n  CarouselAutoplayButtonState,\n} from './CarouselAutoplayButton';\nexport {\n  CarouselAutoplayButton,\n  carouselAutoplayButtonClassNames,\n  renderCarouselAutoplayButton_unstable,\n  useCarouselAutoplayButtonStyles_unstable,\n  useCarouselAutoplayButton_unstable,\n} from './CarouselAutoplayButton';\nexport type {\n  CarouselNavImageButtonProps,\n  CarouselNavImageButtonSlots,\n  CarouselNavImageButtonState,\n} from './CarouselNavImageButton';\nexport {\n  CarouselNavImageButton,\n  carouselNavImageButtonClassNames,\n  renderCarouselNavImageButton_unstable,\n  useCarouselNavImageButtonStyles_unstable,\n  useCarouselNavImageButton_unstable,\n} from './CarouselNavImageButton';\nexport {\n  CarouselSlider,\n  carouselSliderClassNames,\n  renderCarouselSlider_unstable,\n  useCarouselSliderStyles_unstable,\n  useCarouselSlider_unstable,\n} from './CarouselSlider';\nexport type { CarouselSliderProps, CarouselSliderSlots, CarouselSliderState } from './CarouselSlider';\nexport type {\n  CarouselNavContainerProps,\n  CarouselNavContainerSlots,\n  CarouselNavContainerState,\n} from './CarouselNavContainer';\nexport {\n  CarouselNavContainer,\n  carouselNavContainerClassNames,\n  renderCarouselNavContainer_unstable,\n  useCarouselNavContainerStyles_unstable,\n  useCarouselNavContainer_unstable,\n} from './CarouselNavContainer';\nexport { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';\nexport type { CarouselIndexChangeData, CarouselContextValue, CarouselContextValues } from './CarouselContext';\nexport type { CarouselViewportProps, CarouselViewportSlots, CarouselViewportState } from './CarouselViewport';\nexport {\n  CarouselViewport,\n  carouselViewportClassNames,\n  renderCarouselViewport_unstable,\n  useCarouselViewportStyles_unstable,\n  useCarouselViewport_unstable,\n} from './CarouselViewport';\n"],"names":["CarouselButton","carouselButtonClassNames","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCarouselButton_unstable","CarouselNav","carouselNavClassNames","renderCarouselNav_unstable","useCarouselNavStyles_unstable","useCarouselNav_unstable","CarouselNavButton","carouselNavButtonClassNames","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCarouselNavButton_unstable","Carousel","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable","CarouselCard","carouselCardClassNames","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCarouselCard_unstable","CarouselAutoplayButton","carouselAutoplayButtonClassNames","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCarouselAutoplayButton_unstable","CarouselNavImageButton","carouselNavImageButtonClassNames","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCarouselNavImageButton_unstable","CarouselSlider","carouselSliderClassNames","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSlider_unstable","CarouselNavContainer","carouselNavContainerClassNames","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCarouselNavContainer_unstable","carouselContextDefaultValue","CarouselProvider","useCarouselContext_unstable","CarouselViewport","carouselViewportClassNames","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselViewport_unstable"],"rangeMappings":";;;;;;;;;;","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAE7B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAMxB,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAMlC,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAClC,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAO1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB;AAChC,SAASC,2BAA2B,EAAEC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAG/G,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB"}

package/lib-commonjs/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Carousel.ts"],"sourcesContent":["export * from './components/Carousel/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Carousel.ts"],"sourcesContent":["export * from './components/Carousel/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselAutoplayButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselAutoplayButton.ts"],"sourcesContent":["export * from './components/CarouselAutoplayButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselAutoplayButton.ts"],"sourcesContent":["export * from './components/CarouselAutoplayButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselButton.ts"],"sourcesContent":["export * from './components/CarouselButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselButton.ts"],"sourcesContent":["export * from './components/CarouselButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselCard.ts"],"sourcesContent":["export * from './components/CarouselCard/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselCard.ts"],"sourcesContent":["export * from './components/CarouselCard/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselContext.ts"],"sourcesContent":["export * from './components/CarouselContext';\nexport * from './components/CarouselContext.types';\n"],"names":[],"rangeMappings":";;;;;;","mappings":";;;;;uBAAc;uBACA"}
+{"version":3,"sources":["../src/CarouselContext.ts"],"sourcesContent":["export * from './components/CarouselContext';\nexport * from './components/CarouselContext.types';\n"],"names":[],"rangeMappings":";;;;;;","mappings":";;;;;uBAAc;uBACA"}

package/lib-commonjs/CarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNav.ts"],"sourcesContent":["export * from './components/CarouselNav/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselNav.ts"],"sourcesContent":["export * from './components/CarouselNav/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavButton.ts"],"sourcesContent":["export * from './components/CarouselNavButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselNavButton.ts"],"sourcesContent":["export * from './components/CarouselNavButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavContainer.ts"],"sourcesContent":["export * from './components/CarouselNavContainer/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselNavContainer.ts"],"sourcesContent":["export * from './components/CarouselNavContainer/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavImageButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselNavImageButton.ts"],"sourcesContent":["export * from './components/CarouselNavImageButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselNavImageButton.ts"],"sourcesContent":["export * from './components/CarouselNavImageButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselSlider.ts"],"sourcesContent":["export * from './components/CarouselSlider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/CarouselSlider.ts"],"sourcesContent":["export * from './components/CarouselSlider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselViewport.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/CarouselViewport/index"), exports);

package/lib-commonjs/CarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CarouselViewport.ts"],"sourcesContent":["export * from './components/CarouselViewport/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/components/Carousel/Carousel.js

@@ -14,13 +14,12 @@ const _useCarousel = require("./useCarousel");
 const _renderCarousel = require("./renderCarousel");
 const _useCarouselStylesstyles = require("./useCarouselStyles.styles");
 const _useCarouselContextValues = require("./useCarouselContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Carousel = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarousel.useCarousel_unstable)(props, ref);
     (0, _useCarouselStylesstyles.useCarouselStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselStyles_unstable')(state);
     const contextValues = (0, _useCarouselContextValues.useCarouselContextValues_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);
     return (0, _renderCarousel.renderCarousel_unstable)(state, contextValues);
 });
 Carousel.displayName = 'Carousel';

package/lib-commonjs/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\n\n/**\n * Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n *\n * Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n  const state = useCarousel_unstable(props, ref);\n\n  useCarouselStyles_unstable(state);\n\n  const contextValues = useCarouselContextValues_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n  return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["Carousel","React","forwardRef","props","ref","state","useCarousel_unstable","useCarouselStyles_unstable","contextValues","useCarouselContextValues_unstable","renderCarousel_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;6BAEc;gCACG;yCACG;0CAEO;AAQ3C,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAE3B,MAAMG,gBAAgBC,IAAAA,2DAAAA,EAAkCJ;IACxD,8HAA8H;IAC9H,wGAAwG;IACxG,oEAAoE;IACpE,OAAOK,IAAAA,uCAAAA,EAAwBL,OAAOG;AACxC;AAEAR,SAASW,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n *\n * Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n  const state = useCarousel_unstable(props, ref);\n\n  useCarouselStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n\n  const contextValues = useCarouselContextValues_unstable(state);\n\n  return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["Carousel","React","forwardRef","props","ref","state","useCarousel_unstable","useCarouselStyles_unstable","useCustomStyleHook_unstable","contextValues","useCarouselContextValues_unstable","renderCarousel_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BAEc;gCACG;yCACG;0CAEO;qCACN;AAQrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,MAAMI,gBAAgBC,IAAAA,2DAAAA,EAAkCL;IAExD,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOI;AACxC;AAEAT,SAASY,WAAW,GAAG"}

package/lib-commonjs/components/Carousel/Carousel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultActiveIndex?: number;\n\n  /**\n   * The alignment of the carousel.\n   */\n  align?: 'center' | 'start' | 'end';\n\n  /**\n   * The value of the currently active page.\n   */\n  activeIndex?: number;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n  /**\n   * Circular enables the carousel to loop back around on navigation past trailing index.\n   */\n  circular?: boolean;\n\n  /**\n   * Controls the number of carousel cards per navigation element, will default to 'auto'\n   * Recommended to set to '1' when using full page carousel cards.\n   */\n  groupSize?: number | 'auto';\n\n  /**\n   * Enables drag to scroll on carousel items.\n   * Defaults to: False\n   */\n  draggable?: boolean;\n\n  /**\n   * Adds whitespace to start/end so that 'align' prop is always respected for current index\n   * Defaults to: False\n   */\n  whitespace?: boolean;\n\n  /**\n   * Localizes the string used to announce carousel page changes\n   * Defaults to: undefined\n   */\n  announcement?: CarouselAnnouncerFunction;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n  isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n  /**\n   * The current carousel index, a change in index will not trigger the callback (use context index instead).\n   */\n  activeIndex: number;\n  /**\n   * The total number of slides to be navigated, accounts for grouping.\n   */\n  navItemsCount: number;\n  /**\n   * A breakdown of the card indexes contained within each slide index.\n   */\n  groupIndexList: number[][];\n  /**\n   * An array of the card DOM elements after render\n   */\n  slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AA6EA;;CAEC"}
+{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultActiveIndex?: number;\n\n  /**\n   * The alignment of the carousel.\n   */\n  align?: 'center' | 'start' | 'end';\n\n  /**\n   * The value of the currently active page.\n   */\n  activeIndex?: number;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n  /**\n   * Circular enables the carousel to loop back around on navigation past trailing index.\n   */\n  circular?: boolean;\n\n  /**\n   * Controls the number of carousel cards per navigation element, will default to 'auto'\n   * Recommended to set to '1' when using full page carousel cards.\n   */\n  groupSize?: number | 'auto';\n\n  /**\n   * Enables drag to scroll on carousel items.\n   * Defaults to: False\n   */\n  draggable?: boolean;\n\n  /**\n   * Adds whitespace to start/end so that 'align' prop is always respected for current index\n   * Defaults to: False\n   */\n  whitespace?: boolean;\n\n  /**\n   * Sets motion to fade in/out style with minimal movement\n   * Defaults: false\n   */\n  motion?: CarouselMotion;\n\n  /**\n   * Localizes the string used to announce carousel page changes\n   * Defaults to: undefined\n   */\n  announcement?: CarouselAnnouncerFunction;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n  isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n  /**\n   * The current carousel index, a change in index will not trigger the callback (use context index instead).\n   */\n  activeIndex: number;\n  /**\n   * The total number of slides to be navigated, accounts for grouping.\n   */\n  navItemsCount: number;\n  /**\n   * A breakdown of the card indexes contained within each slide index.\n   */\n  groupIndexList: number[][];\n  /**\n   * An array of the card DOM elements after render\n   */\n  slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAwFA;;CAEC"}

package/lib-commonjs/components/Carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Carousel';\nexport * from './Carousel.types';\nexport * from './renderCarousel';\nexport * from './useCarousel';\nexport * from './useCarouselStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export * from './Carousel';\nexport * from './Carousel.types';\nexport * from './renderCarousel';\nexport * from './useCarousel';\nexport * from './useCarouselStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/Carousel/renderCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues) => {\n  assertSlots<CarouselSlots>(state);\n\n  return (\n    <CarouselProvider value={contextValues.carousel}>\n      <state.root />\n    </CarouselProvider>\n  );\n};\n"],"names":["renderCarousel_unstable","state","contextValues","assertSlots","_jsx","CarouselProvider","value","carousel","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;iCAEK;AAM1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,iCAAAA,EAAAA;QAAiBC,OAAOJ,cAAcK,QAAQ;kBAC7C,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
+{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues) => {\n  assertSlots<CarouselSlots>(state);\n\n  return (\n    <CarouselProvider value={contextValues.carousel}>\n      <state.root />\n    </CarouselProvider>\n  );\n};\n"],"names":["renderCarousel_unstable","state","contextValues","assertSlots","_jsx","CarouselProvider","value","carousel","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;iCAEK;AAM1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,iCAAAA,EAAAA;QAAiBC,OAAOJ,cAAcK,QAAQ;kBAC7C,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/components/Carousel/useCarousel.js

@@ -15,9 +15,9 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useEmblaCarousel = require("../useEmblaCarousel");
 function useCarousel_unstable(props, ref) {
     'use no memo';
-    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
+    const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
         align,
         direction: dir,
         loop: circular,
@@ -25,7 +25,9 @@ function useCarousel_unstable(props, ref) {
         defaultActiveIndex: props.defaultActiveIndex,
         activeIndex: props.activeIndex,
         watchDrag: draggable,
-        containScroll: whitespace ? false : 'keepSnaps'
+        containScroll: whitespace ? false : 'keepSnaps',
+        motion,
+        onDragIndexChange: onActiveIndexChange
     });
     const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{
         const foundIndex = carouselApi.scrollToElement(element, jump);
@@ -53,7 +55,7 @@ function useCarousel_unstable(props, ref) {
         });
         return nextPageIndex;
     });
-    const mergedRefs = (0, _reactutilities.useMergedRefs)(ref, containerRef);
+    const mergedContainerRef = (0, _reactutilities.useMergedRefs)(ref, containerRef);
     // Announce carousel updates
     const announcementTextRef = _react.useRef('');
     const totalNavLength = _react.useRef(0);
@@ -100,7 +102,7 @@ function useCarousel_unstable(props, ref) {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref: mergedRefs,
+            ref: mergedContainerRef,
             role: 'region',
             ...props
         }), {
@@ -108,7 +110,8 @@ function useCarousel_unstable(props, ref) {
         }),
         activeIndex,
         circular,
-        containerRef: mergedRefs,
+        containerRef: mergedContainerRef,
+        viewportRef,
         selectPageByElement,
         selectPageByDirection,
         selectPageByIndex,

package/lib-commonjs/components/Carousel/useCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Carousel.\n *\n * The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n *\n * @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n  'use no memo';\n\n  const {\n    align = 'center',\n    circular = false,\n    onActiveIndexChange,\n    groupSize = 'auto',\n    draggable = false,\n    whitespace = false,\n    announcement,\n  } = props;\n\n  const { dir } = useFluent();\n  const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n    useEmblaCarousel({\n      align,\n      direction: dir,\n      loop: circular,\n      slidesToScroll: groupSize,\n      defaultActiveIndex: props.defaultActiveIndex,\n      activeIndex: props.activeIndex,\n      watchDrag: draggable,\n      containScroll: whitespace ? false : 'keepSnaps',\n    });\n\n  const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n    const foundIndex = carouselApi.scrollToElement(element, jump);\n    onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n    return foundIndex;\n  });\n\n  const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n    carouselApi.scrollToIndex(index, jump);\n\n    onActiveIndexChange?.(event, { event, type: 'click', index });\n  });\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const nextPageIndex = carouselApi.scrollInDirection(direction);\n    onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n    return nextPageIndex;\n  });\n\n  const mergedRefs = useMergedRefs(ref, containerRef);\n\n  // Announce carousel updates\n  const announcementTextRef = React.useRef<string>('');\n  const totalNavLength = React.useRef<number>(0);\n  const navGroupRef = React.useRef<number[][]>([]);\n\n  const { announce } = useAnnounce();\n\n  const updateAnnouncement = useEventCallback(() => {\n    if (totalNavLength.current <= 0 || !announcement) {\n      // Ignore announcements until slides discovered\n      return;\n    }\n\n    const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n    if (announcementText !== announcementTextRef.current) {\n      announcementTextRef.current = announcementText;\n      announce(announcementText, { polite: true });\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    // Subscribe to any non-index carousel state changes\n    return subscribeForValues(data => {\n      if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n        const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n        // Initialize our string to prevent updateAnnouncement from reading an initial load\n        announcementTextRef.current = announcementText;\n      }\n      totalNavLength.current = data.navItemsCount;\n      navGroupRef.current = data.groupIndexList;\n      updateAnnouncement();\n    });\n  }, [subscribeForValues, updateAnnouncement, announcement]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateAnnouncement();\n  }, [activeIndex, updateAnnouncement]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: mergedRefs,\n        role: 'region',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    activeIndex,\n    circular,\n    containerRef: mergedRefs,\n    selectPageByElement,\n    selectPageByDirection,\n    selectPageByIndex,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","dir","useFluent","activeIndex","carouselApi","containerRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedRefs","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Carousel.\n *\n * The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n *\n * @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n  'use no memo';\n\n  const {\n    align = 'center',\n    circular = false,\n    onActiveIndexChange,\n    groupSize = 'auto',\n    draggable = false,\n    whitespace = false,\n    announcement,\n    motion = 'slide',\n  } = props;\n\n  const { dir } = useFluent();\n  const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n    useEmblaCarousel({\n      align,\n      direction: dir,\n      loop: circular,\n      slidesToScroll: groupSize,\n      defaultActiveIndex: props.defaultActiveIndex,\n      activeIndex: props.activeIndex,\n      watchDrag: draggable,\n      containScroll: whitespace ? false : 'keepSnaps',\n      motion,\n      onDragIndexChange: onActiveIndexChange,\n    });\n\n  const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n    const foundIndex = carouselApi.scrollToElement(element, jump);\n    onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n    return foundIndex;\n  });\n\n  const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n    carouselApi.scrollToIndex(index, jump);\n\n    onActiveIndexChange?.(event, { event, type: 'click', index });\n  });\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const nextPageIndex = carouselApi.scrollInDirection(direction);\n    onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n    return nextPageIndex;\n  });\n\n  const mergedContainerRef = useMergedRefs(ref, containerRef);\n\n  // Announce carousel updates\n  const announcementTextRef = React.useRef<string>('');\n  const totalNavLength = React.useRef<number>(0);\n  const navGroupRef = React.useRef<number[][]>([]);\n\n  const { announce } = useAnnounce();\n\n  const updateAnnouncement = useEventCallback(() => {\n    if (totalNavLength.current <= 0 || !announcement) {\n      // Ignore announcements until slides discovered\n      return;\n    }\n\n    const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n    if (announcementText !== announcementTextRef.current) {\n      announcementTextRef.current = announcementText;\n      announce(announcementText, { polite: true });\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    // Subscribe to any non-index carousel state changes\n    return subscribeForValues(data => {\n      if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n        const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n        // Initialize our string to prevent updateAnnouncement from reading an initial load\n        announcementTextRef.current = announcementText;\n      }\n      totalNavLength.current = data.navItemsCount;\n      navGroupRef.current = data.groupIndexList;\n      updateAnnouncement();\n    });\n  }, [subscribeForValues, updateAnnouncement, announcement]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateAnnouncement();\n  }, [activeIndex, updateAnnouncement]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: mergedContainerRef,\n        role: 'region',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    activeIndex,\n    circular,\n    containerRef: mergedContainerRef,\n    viewportRef,\n    selectPageByElement,\n    selectPageByDirection,\n    selectPageByIndex,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","dir","useFluent","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Carousel/useCarouselContextValues.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useCarouselContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useCarouselContextValues_unstable(state) {
-    const { activeIndex, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef } = state;
+    const { activeIndex, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef, viewportRef } = state;
     const carousel = _react.useMemo(()=>({
             activeIndex,
             selectPageByElement,
@@ -21,7 +21,8 @@ function useCarouselContextValues_unstable(state) {
             enableAutoplay,
             resetAutoplay,
             circular,
-            containerRef
+            containerRef,
+            viewportRef
         }), [
         activeIndex,
         selectPageByElement,
@@ -31,7 +32,8 @@ function useCarouselContextValues_unstable(state) {
         enableAutoplay,
         resetAutoplay,
         circular,
-        containerRef
+        containerRef,
+        viewportRef
     ]);
     return {
         carousel

package/lib-commonjs/components/Carousel/useCarouselContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n  const {\n    activeIndex,\n    selectPageByElement,\n    selectPageByDirection,\n    selectPageByIndex,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n    circular,\n    containerRef,\n  } = state;\n\n  const carousel = React.useMemo(\n    () => ({\n      activeIndex,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n    }),\n    [\n      activeIndex,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n    ],\n  );\n\n  return { carousel };\n}\n"],"names":["useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","carousel","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;AAKhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACb,GAAGT;IAEJ,MAAMU,WAAWC,OAAMC,OAAO,CAC5B,IAAO,CAAA;YACLX;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACER;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}
+{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n  const {\n    activeIndex,\n    selectPageByElement,\n    selectPageByDirection,\n    selectPageByIndex,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n    circular,\n    containerRef,\n    viewportRef,\n  } = state;\n\n  const carousel = React.useMemo(\n    () => ({\n      activeIndex,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n      viewportRef,\n    }),\n    [\n      activeIndex,\n      selectPageByElement,\n      selectPageByDirection,\n      selectPageByIndex,\n      subscribeForValues,\n      enableAutoplay,\n      resetAutoplay,\n      circular,\n      containerRef,\n      viewportRef,\n    ],\n  );\n\n  return { carousel };\n}\n"],"names":["useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;AAKhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACZ,GAAGV;IAEJ,MAAMW,WAAWC,OAAMC,OAAO,CAC5B,IAAO,CAAA;YACLZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}

package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js

@@ -24,22 +24,13 @@ const carouselClassNames = {
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
-        z8tnut: "fr4fn7s",
-        B68tc82: 0,
-        Bmxbyg5: 0,
-        Bpg54ce: "f1a3p1vp",
+        B68tc82: "f1p9o1ba",
         Eiaeu8: "f1115ve7",
         qhf8xq: "f10pi13n"
     }
 }, {
     d: [
-        ".fr4fn7s{padding-top:var(--strokeWidthThick);}",
-        [
-            ".f1a3p1vp{overflow:hidden;}",
-            {
-                p: -1
-            }
-        ],
+        ".f1p9o1ba{overflow-x:hidden;}",
         ".f1115ve7{overflow-anchor:none;}",
         ".f10pi13n{position:relative;}"
     ]
@@ -49,4 +40,4 @@ const useCarouselStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(carouselClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useCarouselStyles.styles.js.map
+};