@fluentui/react-carousel 9.4.7 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-carousel
 
-This log was last generated on Fri, 07 Feb 2025 10:40:53 GMT and should not be manually modified.
+This log was last generated on Fri, 21 Feb 2025 14:30:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.6.0)
+
+Fri, 21 Feb 2025 14:30:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.5.0..@fluentui/react-carousel_v9.6.0)
+
+### Minor changes
+
+- feat: Implement props to control animation duration and autoplay interval ([PR #33820](https://github.com/microsoft/fluentui/pull/33820) by mifraser@microsoft.com)
+- Bump @fluentui/react-aria to v9.14.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-button to v9.4.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-tooltip to v9.6.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.5.0)
+
+Tue, 18 Feb 2025 11:26:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.7..@fluentui/react-carousel_v9.5.0)
+
+### Minor changes
+
+- feat: Add tooltip wrappers for icon buttons in nav container ([PR #33821](https://github.com/microsoft/fluentui/pull/33821) by mifraser@microsoft.com)
+
 ## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.7)
 
-Fri, 07 Feb 2025 10:40:53 GMT 
+Fri, 07 Feb 2025 10:42:12 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.6..@fluentui/react-carousel_v9.4.7)
 
 ### Patches

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
+import { TooltipProps } from '@fluentui/react-tooltip';
 
 /**
  * Carousel is the context wrapper and container for all carousel content/controls,
@@ -162,7 +163,10 @@ export declare type CarouselIndexChangeData = (EventData<'click', React_2.MouseE
 /**
  * List of integrated motion types
  */
-declare type CarouselMotion = 'slide' | 'fade';
+declare type CarouselMotion = 'slide' | {
+    kind: 'slide';
+    duration?: number;
+} | 'fade';
 
 /**
  * Used to jump to a card based on index, using arrow navigation via Tabster.
@@ -234,8 +238,11 @@ export declare type CarouselNavContainerProps = ComponentProps<CarouselNavContai
 export declare type CarouselNavContainerSlots = {
     root: Slot<'div'>;
     next?: Slot<CarouselButtonProps>;
+    nextTooltip?: Slot<TooltipProps>;
     prev?: Slot<CarouselButtonProps>;
+    prevTooltip?: Slot<TooltipProps>;
     autoplay?: Slot<typeof CarouselAutoplayButton>;
+    autoplayTooltip?: Slot<TooltipProps>;
 };
 
 /**
@@ -353,8 +360,15 @@ export declare type CarouselProps = ComponentProps<CarouselSlots> & {
      */
     whitespace?: boolean;
     /**
-     * Sets motion to fade in/out style with minimal movement
-     * Defaults: false
+     * Sets motion type as either 'slide' or 'fade'
+     * Defaults: 'slide'
+     *
+     * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.
+     * Drag interactions are not affected because duration is then determined by the drag force.
+     *
+     * Note: Duration is not in milliseconds because Carousel uses an
+     * attraction physics simulation when scrolling instead of easings.
+     * Only values between 20-60 are recommended, 25 is the default.
      */
     motion?: CarouselMotion;
     /**
@@ -362,6 +376,13 @@ export declare type CarouselProps = ComponentProps<CarouselSlots> & {
      * Defaults to: undefined
      */
     announcement?: CarouselAnnouncerFunction;
+    /**
+     * Choose a delay between autoplay transitions in milliseconds.
+     * Only active if Autoplay is enabled via CarouselAutoplayButton
+     *
+     * Defaults: 4000
+     */
+    autoplayInterval?: number;
 };
 
 export declare const CarouselProvider: Provider<CarouselContextValue | undefined> & FC<ProviderProps<CarouselContextValue | undefined>>;

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

@@ -1 +1 @@
-{"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,GACD,WAiBC"}
+{"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' | { kind: 'slide'; duration?: number } | '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 type as either 'slide' or 'fade'\n   * Defaults: 'slide'\n   *\n   * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * Note: Duration is not in milliseconds because Carousel uses an\n   * attraction physics simulation when scrolling instead of easings.\n   * Only values between 20-60 are recommended, 25 is the default.\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   * Choose a delay between autoplay transitions in milliseconds.\n   * Only active if Autoplay is enabled via CarouselAutoplayButton\n   *\n   * Defaults: 4000\n   */\n  autoplayInterval?: number;\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":"AAuGA;;CAEC,GACD,WAiBC"}

package/lib/components/Carousel/useCarousel.js

@@ -13,7 +13,7 @@ import { useAnnounce } from '@fluentui/react-shared-contexts';
  * @param ref - reference to root HTMLDivElement of Carousel
  */ export function useCarousel_unstable(props, ref) {
     'use no memo';
-    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide', autoplayInterval = 4000 } = props;
     const { dir } = useFluent();
     const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = useEmblaCarousel({
         align,
@@ -26,7 +26,8 @@ import { useAnnounce } from '@fluentui/react-shared-contexts';
         containScroll: whitespace ? false : 'keepSnaps',
         motion,
         onDragIndexChange: onActiveIndexChange,
-        onAutoplayIndexChange: onActiveIndexChange
+        onAutoplayIndexChange: onActiveIndexChange,
+        autoplayInterval
     });
     const selectPageByElement = useEventCallback((event, element, jump)=>{
         const foundIndex = carouselApi.scrollToElement(element, jump);

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

@@ -1 +1 @@
-{"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      onAutoplayIndexChange: 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":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","dir","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","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    autoplayInterval = 4000,\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      onAutoplayIndexChange: onActiveIndexChange,\n      autoplayInterval,\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":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","autoplayInterval","dir","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  prev?: Slot<CarouselButtonProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgCA;;CAEC,GACD,WAC4C"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  nextTooltip?: Slot<TooltipProps>;\n  prev?: Slot<CarouselButtonProps>;\n  prevTooltip?: Slot<TooltipProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n  autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC,GACD,WAC4C"}

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js

@@ -6,10 +6,19 @@ import { assertSlots } from '@fluentui/react-utilities';
     assertSlots(state);
     return /*#__PURE__*/ _jsxs(state.root, {
         children: [
-            state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
-            state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplayTooltip, {
+                children: /*#__PURE__*/ _jsx(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prevTooltip, {
+                children: /*#__PURE__*/ _jsx(state.prev, {})
+            }),
             state.root.children,
-            state.next && /*#__PURE__*/ _jsx(state.next, {})
+            !state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.nextTooltip, {
+                children: /*#__PURE__*/ _jsx(state.next, {})
+            })
         ]
     });
 };

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {state.autoplay && <state.autoplay />}\n      {state.prev && <state.prev />}\n      {state.root.children}\n      {state.next && <state.next />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplay","prev","children","next"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;;;AAGhC,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n      {state.autoplayTooltip && state.autoplay && (\n        <state.autoplayTooltip>\n          <state.autoplay />\n        </state.autoplayTooltip>\n      )}\n      {!state.prevTooltip && state.prev && <state.prev />}\n      {state.prevTooltip && state.prev && (\n        <state.prevTooltip>\n          <state.prev />\n        </state.prevTooltip>\n      )}\n      {state.root.children}\n      {!state.nextTooltip && state.next && <state.next />}\n      {state.nextTooltip && state.next && (\n        <state.nextTooltip>\n          <state.next />\n        </state.nextTooltip>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplayTooltip","autoplay","prevTooltip","prev","children","nextTooltip","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACR,CAACD,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YAC3DH,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBACtC,KAACH,MAAME,eAAe;0BACpB,cAAA,KAACF,MAAMG,QAAQ;;YAGlB,CAACH,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;YAC/CL,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAC9B,KAACL,MAAMI,WAAW;0BAChB,cAAA,KAACJ,MAAMK,IAAI;;YAGdL,MAAMC,IAAI,CAACK,QAAQ;YACnB,CAACN,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAC9B,KAACR,MAAMO,WAAW;0BAChB,cAAA,KAACP,MAAMQ,IAAI;;;;AAKrB,EAAE"}

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
 import { CarouselButton } from '../CarouselButton/CarouselButton';
+import { Tooltip } from '@fluentui/react-tooltip';
 /**
  * Create the state required to render CarouselNavContainer.
  *
@@ -27,8 +28,23 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
         renderByDefault: true
     });
     const autoplay = slot.optional(props.autoplay, {
-        renderByDefault: false,
-        elementType: CarouselAutoplayButton
+        elementType: CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
     });
     return {
         layout,
@@ -36,7 +52,10 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
             root: 'div',
             next: CarouselButton,
             prev: CarouselButton,
-            autoplay: CarouselAutoplayButton
+            autoplay: CarouselAutoplayButton,
+            nextTooltip: Tooltip,
+            prevTooltip: Tooltip,
+            autoplayTooltip: Tooltip
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref,
@@ -46,6 +65,9 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
         }),
         next,
         prev,
-        autoplay
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
     };
 };

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    renderByDefault: false,\n    elementType: CarouselAutoplayButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CP,KAAKQ,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cb,KAAKQ,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAME,WAAkDd,KAAKQ,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFF,iBAAiB;QACjBD,aAAaV;IACf;IAEA,OAAO;QACLK;QACAS,YAAY;YACVC,MAAM;YACNT,MAAML;YACNW,MAAMX;YACNY,UAAUb;QACZ;QACAe,MAAMhB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    elementType: CarouselAutoplayButton,\n    renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n  });\n\n  const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n      nextTooltip: Tooltip,\n      prevTooltip: Tooltip,\n      autoplayTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n    nextTooltip,\n    prevTooltip,\n    autoplayTooltip,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,KAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,KAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,KAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,KAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,KAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,KAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN;YACNY,MAAMZ;YACNa,UAAUd;YACVgB,aAAad;YACbe,aAAaf;YACba,iBAAiBb;QACnB;QACAiB,MAAMpB,KAAKqB,MAAM,CACftB,yBAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

@@ -4,7 +4,13 @@ export const carouselNavContainerClassNames = {
   root: 'fui-CarouselNavContainer',
   next: 'fui-CarouselNavContainer__next',
   prev: 'fui-CarouselNavContainer__prev',
-  autoplay: 'fui-CarouselNavContainer__autoplay'
+  autoplay: 'fui-CarouselNavContainer__autoplay',
+  /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+  * Use 'content' slot to style Tooltip content instead
+  */
+  nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+  prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+  autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
 };
 /**
  * Styles for the root slot

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay',\n    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/useEmblaCarousel.js

@@ -28,7 +28,11 @@ export function setTabsterDefault(element, isDefault) {
     }
 }
 export function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange, onAutoplayIndexChange } = options;
+    const { align, autoplayInterval, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange, onAutoplayIndexChange } = options;
+    var _motion_kind;
+    const motionType = typeof motion === 'string' ? motion : (_motion_kind = motion === null || motion === void 0 ? void 0 : motion.kind) !== null && _motion_kind !== void 0 ? _motion_kind : 'slide';
+    var _motion_duration;
+    const motionDuration = typeof motion === 'string' ? 25 : (_motion_duration = motion === null || motion === void 0 ? void 0 : motion.duration) !== null && _motion_duration !== void 0 ? _motion_duration : 25;
     const [activeIndex, setActiveIndex] = useControllableState({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
@@ -48,7 +52,8 @@ export function useEmblaCarousel(options) {
         slidesToScroll,
         startIndex: activeIndex,
         watchDrag,
-        containScroll
+        containScroll,
+        duration: motionDuration
     });
     const emblaApi = React.useRef(null);
     const autoplayRef = React.useRef(false);
@@ -60,12 +65,13 @@ export function useEmblaCarousel(options) {
         const plugins = [];
         plugins.push(Autoplay({
             playOnInit: autoplayRef.current,
+            delay: autoplayInterval,
             /* stopOnInteraction: false causes autoplay to restart on interaction end*/ /* we'll handle this logic to ensure autoplay state is respected */ stopOnInteraction: true,
             stopOnFocusIn: false,
             stopOnMouseEnter: false
         }));
         // Optionally add Fade plugin
-        if (motion === 'fade') {
+        if (motionType === 'fade') {
             plugins.push(Fade());
         }
         if (watchDrag) {
@@ -75,9 +81,10 @@ export function useEmblaCarousel(options) {
         }
         return plugins;
     }, [
-        motion,
+        motionType,
         onDragEvent,
-        watchDrag
+        watchDrag,
+        autoplayInterval
     ]);
     /* This function enables autoplay to pause/play without affecting underlying state
    * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off
@@ -246,7 +253,8 @@ export function useEmblaCarousel(options) {
             loop,
             slidesToScroll,
             watchDrag,
-            containScroll
+            containScroll,
+            duration: motionDuration
         };
         (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
             ...DEFAULT_EMBLA_OPTIONS,
@@ -259,7 +267,8 @@ export function useEmblaCarousel(options) {
         getPlugins,
         loop,
         slidesToScroll,
-        watchDrag
+        watchDrag,
+        motionDuration
     ]);
     React.useEffect(()=>{
         var _emblaApi_current, _emblaApi_current_slideNodes, _emblaApi_current1;

package/lib/components/useEmblaCarousel.js.map

@@ -1 +1 @@
-{"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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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    onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n  },\n) {\n  const {\n    align,\n    direction,\n    loop,\n    slidesToScroll,\n    watchDrag,\n    containScroll,\n    motion,\n    onDragIndexChange,\n    onAutoplayIndexChange,\n  } = 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  const getPlugins = React.useCallback(() => {\n    const plugins: EmblaPluginType[] = [];\n\n    plugins.push(\n      Autoplay({\n        playOnInit: autoplayRef.current,\n        /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n        /* we'll handle this logic to ensure autoplay state is respected */\n        stopOnInteraction: true,\n        stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n        stopOnMouseEnter: false, // We will handle this manually to align functionality\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  /* This function enables autoplay to pause/play without affecting underlying state\n   * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n   */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean, temporary?: boolean) => {\n      if (!temporary) {\n        autoplayRef.current = autoplay;\n      }\n\n      if (autoplay && autoplayRef.current) {\n        // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\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 updateIndex = () => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slides = emblaApi.current?.slideNodes();\n    const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n    const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n    // We set the first card in the current group as the default tabster index for focus capture\n    slides?.forEach((slide, slideIndex) => {\n      setTabsterDefault(slide, slideIndex === actualIndex);\n    });\n    setActiveIndex(newIndex);\n  };\n\n  const handleReinit = useEventCallback(() => {\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    const data: CarouselUpdateData = {\n      navItemsCount,\n      activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n      groupIndexList,\n      slideNodes: nodes,\n    };\n\n    updateIndex();\n    emblaApi.current?.scrollTo(activeIndex, false);\n    for (const listener of listeners.current) {\n      listener(data);\n    }\n  });\n\n  const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    updateIndex();\n    if (eventType === 'autoplay:select') {\n      const noopEvent = new Event('autoplay');\n      onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\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 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    // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\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?.off('autoplay:select', handleIndexChange);\n          emblaApi.current?.destroy();\n        }\n\n        // Use direct viewport if available, else fallback to container (includes Carousel controls).\n        currentElement = viewportRef.current ?? newElement;\n        if (currentElement) {\n          emblaApi.current = EmblaCarousel(\n            currentElement,\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          emblaApi.current?.on('autoplay:select', handleIndexChange);\n        }\n      },\n    };\n  }, [getPlugins, handleIndexChange, handleReinit]);\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 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\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      plugins,\n    );\n  }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n  React.useEffect(() => {\n    // Scroll to controlled values on update\n    // If active index is out of bounds, re-init will handle instead\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n    emblaOptions.current.startIndex = activeIndex;\n    if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\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","onAutoplayIndexChange","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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    onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n    autoplayInterval?: number;\n  },\n) {\n  const {\n    align,\n    autoplayInterval,\n    direction,\n    loop,\n    slidesToScroll,\n    watchDrag,\n    containScroll,\n    motion,\n    onDragIndexChange,\n    onAutoplayIndexChange,\n  } = options;\n\n  const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n  const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\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    duration: motionDuration,\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  const getPlugins = React.useCallback(() => {\n    const plugins: EmblaPluginType[] = [];\n\n    plugins.push(\n      Autoplay({\n        playOnInit: autoplayRef.current,\n        delay: autoplayInterval,\n        /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n        /* we'll handle this logic to ensure autoplay state is respected */\n        stopOnInteraction: true,\n        stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n        stopOnMouseEnter: false, // We will handle this manually to align functionality\n      }),\n    );\n\n    // Optionally add Fade plugin\n    if (motionType === '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  }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n  /* This function enables autoplay to pause/play without affecting underlying state\n   * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n   */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean, temporary?: boolean) => {\n      if (!temporary) {\n        autoplayRef.current = autoplay;\n      }\n\n      if (autoplay && autoplayRef.current) {\n        // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\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 updateIndex = () => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slides = emblaApi.current?.slideNodes();\n    const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n    const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n    // We set the first card in the current group as the default tabster index for focus capture\n    slides?.forEach((slide, slideIndex) => {\n      setTabsterDefault(slide, slideIndex === actualIndex);\n    });\n    setActiveIndex(newIndex);\n  };\n\n  const handleReinit = useEventCallback(() => {\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    const data: CarouselUpdateData = {\n      navItemsCount,\n      activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n      groupIndexList,\n      slideNodes: nodes,\n    };\n\n    updateIndex();\n    emblaApi.current?.scrollTo(activeIndex, false);\n    for (const listener of listeners.current) {\n      listener(data);\n    }\n  });\n\n  const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    updateIndex();\n    if (eventType === 'autoplay:select') {\n      const noopEvent = new Event('autoplay');\n      onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\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 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    // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\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?.off('autoplay:select', handleIndexChange);\n          emblaApi.current?.destroy();\n        }\n\n        // Use direct viewport if available, else fallback to container (includes Carousel controls).\n        currentElement = viewportRef.current ?? newElement;\n        if (currentElement) {\n          emblaApi.current = EmblaCarousel(\n            currentElement,\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          emblaApi.current?.on('autoplay:select', handleIndexChange);\n        }\n      },\n    };\n  }, [getPlugins, handleIndexChange, handleReinit]);\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 plugins = getPlugins();\n\n    emblaOptions.current = {\n      startIndex: emblaOptions.current.startIndex,\n      align,\n      direction,\n      loop,\n      slidesToScroll,\n      watchDrag,\n      containScroll,\n      duration: motionDuration,\n    };\n\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      plugins,\n    );\n  }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n  React.useEffect(() => {\n    // Scroll to controlled values on update\n    // If active index is out of bounds, re-init will handle instead\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n    emblaOptions.current.startIndex = activeIndex;\n    if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\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","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"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"}
+{"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' | { kind: 'slide'; duration?: number } | '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 type as either 'slide' or 'fade'\n   * Defaults: 'slide'\n   *\n   * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * Note: Duration is not in milliseconds because Carousel uses an\n   * attraction physics simulation when scrolling instead of easings.\n   * Only values between 20-60 are recommended, 25 is the default.\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   * Choose a delay between autoplay transitions in milliseconds.\n   * Only active if Autoplay is enabled via CarouselAutoplayButton\n   *\n   * Defaults: 4000\n   */\n  autoplayInterval?: number;\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":"AAuGA;;CAEC"}

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

@@ -15,7 +15,7 @@ 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, motion = 'slide' } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide', autoplayInterval = 4000 } = props;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
         align,
@@ -28,7 +28,8 @@ function useCarousel_unstable(props, ref) {
         containScroll: whitespace ? false : 'keepSnaps',
         motion,
         onDragIndexChange: onActiveIndexChange,
-        onAutoplayIndexChange: onActiveIndexChange
+        onAutoplayIndexChange: onActiveIndexChange,
+        autoplayInterval
     });
     const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{
         const foundIndex = carouselApi.scrollToElement(element, jump);

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

@@ -1 +1 @@
-{"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      onAutoplayIndexChange: 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","onAutoplayIndexChange","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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"}
+{"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    autoplayInterval = 4000,\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      onAutoplayIndexChange: onActiveIndexChange,\n      autoplayInterval,\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","autoplayInterval","dir","useFluent","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","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/CarouselNavContainer/CarouselNavContainer.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  prev?: Slot<CarouselButtonProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgCA;;CAEC"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  nextTooltip?: Slot<TooltipProps>;\n  prev?: Slot<CarouselButtonProps>;\n  prevTooltip?: Slot<TooltipProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n  autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC"}

package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js

@@ -14,10 +14,19 @@ const renderCarouselNavContainer_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [
-            state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
-            state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplayTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prevTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {})
+            }),
             state.root.children,
-            state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
+            !state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.nextTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
+            })
         ]
     });
 };

package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {state.autoplay && <state.autoplay />}\n      {state.prev && <state.prev />}\n      {state.root.children}\n      {state.next && <state.next />}\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplay","_jsx","prev","children","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,QAAQ,EAAA,CAAA;YACjCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMG,IAAI,CAACI,QAAQ;YACnBP,MAAMQ,IAAI,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,IAAI,EAAA,CAAA;;;AAGhC"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n      {state.autoplayTooltip && state.autoplay && (\n        <state.autoplayTooltip>\n          <state.autoplay />\n        </state.autoplayTooltip>\n      )}\n      {!state.prevTooltip && state.prev && <state.prev />}\n      {state.prevTooltip && state.prev && (\n        <state.prevTooltip>\n          <state.prev />\n        </state.prevTooltip>\n      )}\n      {state.root.children}\n      {!state.nextTooltip && state.next && <state.next />}\n      {state.nextTooltip && state.next && (\n        <state.nextTooltip>\n          <state.next />\n        </state.nextTooltip>\n      )}\n    </state.root>\n  );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplayTooltip","autoplay","_jsx","prevTooltip","prev","children","nextTooltip","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACR,CAACH,MAAMI,eAAe,IAAIJ,MAAMK,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA;YAC3DL,MAAMI,eAAe,IAAIJ,MAAMK,QAAQ,IAAA,WAAA,GACtCC,IAAAA,eAAA,EAACN,MAAMI,eAAe,EAAA;0BACpB,WAAA,GAAAE,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA;;YAGlB,CAACL,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,IAAI,EAAA,CAAA;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,GAC9BF,IAAAA,eAAA,EAACN,MAAMO,WAAW,EAAA;0BAChB,WAAA,GAAAD,IAAAA,eAAA,EAACN,MAAMQ,IAAI,EAAA,CAAA;;YAGdR,MAAMG,IAAI,CAACM,QAAQ;YACnB,CAACT,MAAMU,WAAW,IAAIV,MAAMW,IAAI,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACN,MAAMW,IAAI,EAAA,CAAA;YAC/CX,MAAMU,WAAW,IAAIV,MAAMW,IAAI,IAAA,WAAA,GAC9BL,IAAAA,eAAA,EAACN,MAAMU,WAAW,EAAA;0BAChB,WAAA,GAAAJ,IAAAA,eAAA,EAACN,MAAMW,IAAI,EAAA,CAAA;;;;AAKrB"}

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js

@@ -13,6 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
 const _CarouselButton = require("../CarouselButton/CarouselButton");
+const _reacttooltip = require("@fluentui/react-tooltip");
 const useCarouselNavContainer_unstable = (props, ref)=>{
     const { layout } = props;
     const next = _reactutilities.slot.optional(props.next, {
@@ -30,8 +31,23 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
         renderByDefault: true
     });
     const autoplay = _reactutilities.slot.optional(props.autoplay, {
-        renderByDefault: false,
-        elementType: _CarouselAutoplayButton.CarouselAutoplayButton
+        elementType: _CarouselAutoplayButton.CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = _reactutilities.slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = _reactutilities.slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = _reactutilities.slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
     });
     return {
         layout,
@@ -39,7 +55,10 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
             root: 'div',
             next: _CarouselButton.CarouselButton,
             prev: _CarouselButton.CarouselButton,
-            autoplay: _CarouselAutoplayButton.CarouselAutoplayButton
+            autoplay: _CarouselAutoplayButton.CarouselAutoplayButton,
+            nextTooltip: _reacttooltip.Tooltip,
+            prevTooltip: _reacttooltip.Tooltip,
+            autoplayTooltip: _reacttooltip.Tooltip
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ref,
@@ -49,6 +68,9 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
         }),
         next,
         prev,
-        autoplay
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
     };
 };

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    renderByDefault: false,\n    elementType: CarouselAutoplayButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n  };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACwB;wCAER;gCACR;AAWxB,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;QACpFF,iBAAiB;QACjBF,aAAaK,8CAAAA;IACf;IAEA,OAAO;QACLX;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;QACZ;QACAE,MAAMX,oBAAAA,CAAKY,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BhB;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    elementType: CarouselAutoplayButton,\n    renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n  });\n\n  const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n      nextTooltip: Tooltip,\n      prevTooltip: Tooltip,\n      autoplayTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n    nextTooltip,\n    prevTooltip,\n    autoplayTooltip,\n  };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","autoplayTooltip","nextTooltip","Tooltip","prevTooltip","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACwB;wCAER;gCACR;8BACP;AAWjB,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;QACpFJ,aAAaK,8CAAAA;QACbH,iBAAiB,CAAC,CAACV,MAAMY,QAAQ,IAAI,CAAC,CAACZ,MAAMc,eAAe;IAC9D;IAEA,MAAMC,cAAwDX,oBAAAA,CAAKC,QAAQ,CAACL,MAAMe,WAAW,EAAE;QAC7FT,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,MAAMO,cAAwDb,oBAAAA,CAAKC,QAAQ,CAACL,MAAMiB,WAAW,EAAE;QAC7FX,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,MAAMI,kBAAgEV,oBAAAA,CAAKC,QAAQ,CAACL,MAAMc,eAAe,EAAE;QACzGR,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,OAAO;QACLR;QACAgB,YAAY;YACVC,MAAM;YACNhB,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;YACVE,aAAaC,qBAAAA;YACbC,aAAaD,qBAAAA;YACbF,iBAAiBE,qBAAAA;QACnB;QACAG,MAAMf,oBAAAA,CAAKgB,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BpB;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;QACAG;QACAE;QACAH;IACF;AACF"}

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

@@ -21,7 +21,12 @@ const carouselNavContainerClassNames = {
     root: 'fui-CarouselNavContainer',
     next: 'fui-CarouselNavContainer__next',
     prev: 'fui-CarouselNavContainer__prev',
-    autoplay: 'fui-CarouselNavContainer__autoplay'
+    autoplay: 'fui-CarouselNavContainer__autoplay',
+    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+  * Use 'content' slot to style Tooltip content instead
+  */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
 };
 /**
  * Styles for the root slot

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"names":["carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable","root","next","prev","autoplay","useStyles","__styles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","state","layout","isOverlay","isWide","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IA8EIC,sCAAsC;eAAtCA;;;uBAhFwB;AAElC,MAAMD,iCAAiC;IAC1CE,MAAM;IACNC,MAAM;IACNC,MAAM;IACNC,UAAU;AACd;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAL,MAAA;QAAAM,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAT,MAAA,CAAA;IAAAC,MAAA,CAAA;IAAAC,UAAA,CAAA;IAAAQ,QAAA;QAAAC,SAAA;IAAA;IAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,aAAA;QAAAF,SAAA;IAAA;IAAAG,UAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,iBAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAK,qBAAA;QAAAL,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,UAAA;QAAAhB,QAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAnB,SAAA;QAAAO,SAAA;QAAAa,QAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,qBAAA;QAAAjB,QAAA;QAAAkB,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,qBAAA;QAAArB,QAAA;QAAAsB,QAAA;YAAA;YAAA;SAAA;QAAAH,SAAA;QAAAC,SAAA;IAAA;IAAAG,kBAAA;QAAAvB,QAAA;QAAAC,SAAA;QAAAqB,QAAA;YAAA;YAAA;SAAA;QAAAE,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAsEX,MAAMxC,yCAA0CyC,CAAAA;IACvD;IACA,MAAM,EAAEC,MAAAA,EAAQ,GAAGD;IACnB,MAAME,YAAYD,WAAW,aAAaA,WAAW,kBAAkBA,WAAW;IAClF,MAAME,SAASF,WAAW,iBAAiBA,WAAW;IACtD,MAAMG,SAASxC;IACfoC,MAAMxC,IAAI,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,+BAA+BE,IAAI,EAAE4C,OAAO5C,IAAI,EAAE0C,YAAYE,OAAO/B,OAAO,GAAG+B,OAAOjC,MAAM,EAAE+B,aAAaC,UAAUC,OAAO3B,WAAW,EAAEwB,WAAW,sBAAsBG,OAAOnB,QAAQ,EAAEe,MAAMxC,IAAI,CAAC6C,SAAS;IACnP,IAAIL,MAAMvC,IAAI,EAAE;QACZuC,MAAMvC,IAAI,CAAC4C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,+BAA+BG,IAAI,EAAE2C,OAAO3C,IAAI,EAAE0C,UAAUC,OAAO1B,QAAQ,EAAEyB,UAAUD,aAAaE,OAAOtB,eAAe,EAAEmB,WAAW,sBAAsBG,OAAOb,mBAAmB,EAAES,MAAMvC,IAAI,CAAC4C,SAAS;IACrP;IACA,IAAIL,MAAMtC,IAAI,EAAE;QACZsC,MAAMtC,IAAI,CAAC2C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,+BAA+BI,IAAI,EAAE0C,OAAO1C,IAAI,EAAEyC,UAAUC,OAAOxB,QAAQ,EAAE,CAACoB,MAAMrC,QAAQ,IAAIwC,UAAUD,aAAaE,OAAOrB,eAAe,EAAEkB,WAAW,sBAAsBG,OAAOT,mBAAmB,EAAEK,MAAMtC,IAAI,CAAC2C,SAAS;IACxQ;IACA,IAAIL,MAAMrC,QAAQ,EAAE;QAChBqC,MAAMrC,QAAQ,CAAC0C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,+BAA+BK,QAAQ,EAAEyC,OAAOzC,QAAQ,EAAEsC,WAAW,sBAAsBG,OAAOP,gBAAgB,EAAEM,UAAUD,aAAaE,OAAOpB,mBAAmB,EAAEgB,MAAMrC,QAAQ,CAAC0C,SAAS;IAC3O;IACA,OAAOL;AACX"}
+{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n    root: 'fui-CarouselNavContainer',\n    next: 'fui-CarouselNavContainer__next',\n    prev: 'fui-CarouselNavContainer__prev',\n    autoplay: 'fui-CarouselNavContainer__autoplay',\n    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n   * Use 'content' slot to style Tooltip content instead\n   */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        width: '100%',\n        pointerEvents: 'none'\n    },\n    next: {},\n    prev: {},\n    autoplay: {},\n    inline: {\n        marginTop: tokens.spacingVerticalM\n    },\n    overlay: {\n        position: 'absolute',\n        bottom: tokens.spacingVerticalM,\n        boxSizing: 'border-box'\n    },\n    overlayWide: {\n        bottom: tokens.spacingVerticalM\n    },\n    nextWide: {\n        marginLeft: 'auto'\n    },\n    prevWide: {\n        marginRight: 'auto'\n    },\n    nextOverlayWide: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    prevOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    autoplayOverlayWide: {\n        marginLeft: tokens.spacingHorizontalM\n    },\n    expanded: {\n        width: '100%',\n        height: '100%',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        bottom: 0,\n        '> div': {\n            position: 'relative',\n            bottom: tokens.spacingVerticalL,\n            marginBottom: 0\n        }\n    },\n    nextOverlayExpanded: {\n        position: 'absolute',\n        right: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    prevOverlayExpanded: {\n        position: 'absolute',\n        left: tokens.spacingHorizontalM,\n        top: '50%',\n        transform: 'translateY(-50%)'\n    },\n    autoplayExpanded: {\n        position: 'absolute',\n        bottom: `-${tokens.spacingHorizontalXS}`,\n        left: tokens.spacingHorizontalM,\n        marginBottom: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout } = state;\n    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n    if (state.next) {\n        state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n    }\n    if (state.prev) {\n        state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n    }\n    if (state.autoplay) {\n        state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n    }\n    return state;\n};\n"],"names":["carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","__styles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","state","layout","isOverlay","isWide","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/useEmblaCarousel.js

@@ -51,7 +51,11 @@ function setTabsterDefault(element, isDefault) {
     }
 }
 function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange, onAutoplayIndexChange } = options;
+    const { align, autoplayInterval, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange, onAutoplayIndexChange } = options;
+    var _motion_kind;
+    const motionType = typeof motion === 'string' ? motion : (_motion_kind = motion === null || motion === void 0 ? void 0 : motion.kind) !== null && _motion_kind !== void 0 ? _motion_kind : 'slide';
+    var _motion_duration;
+    const motionDuration = typeof motion === 'string' ? 25 : (_motion_duration = motion === null || motion === void 0 ? void 0 : motion.duration) !== null && _motion_duration !== void 0 ? _motion_duration : 25;
     const [activeIndex, setActiveIndex] = (0, _reactutilities.useControllableState)({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
@@ -71,7 +75,8 @@ function useEmblaCarousel(options) {
         slidesToScroll,
         startIndex: activeIndex,
         watchDrag,
-        containScroll
+        containScroll,
+        duration: motionDuration
     });
     const emblaApi = _react.useRef(null);
     const autoplayRef = _react.useRef(false);
@@ -83,12 +88,13 @@ function useEmblaCarousel(options) {
         const plugins = [];
         plugins.push((0, _emblacarouselautoplay.default)({
             playOnInit: autoplayRef.current,
+            delay: autoplayInterval,
             /* stopOnInteraction: false causes autoplay to restart on interaction end*/ /* we'll handle this logic to ensure autoplay state is respected */ stopOnInteraction: true,
             stopOnFocusIn: false,
             stopOnMouseEnter: false
         }));
         // Optionally add Fade plugin
-        if (motion === 'fade') {
+        if (motionType === 'fade') {
             plugins.push((0, _emblacarouselfade.default)());
         }
         if (watchDrag) {
@@ -98,9 +104,10 @@ function useEmblaCarousel(options) {
         }
         return plugins;
     }, [
-        motion,
+        motionType,
         onDragEvent,
-        watchDrag
+        watchDrag,
+        autoplayInterval
     ]);
     /* This function enables autoplay to pause/play without affecting underlying state
    * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off
@@ -268,7 +275,8 @@ function useEmblaCarousel(options) {
             loop,
             slidesToScroll,
             watchDrag,
-            containScroll
+            containScroll,
+            duration: motionDuration
         };
         (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
             ...DEFAULT_EMBLA_OPTIONS,
@@ -281,7 +289,8 @@ function useEmblaCarousel(options) {
         getPlugins,
         loop,
         slidesToScroll,
-        watchDrag
+        watchDrag,
+        motionDuration
     ]);
     _react.useEffect(()=>{
         var _emblaApi_current, _emblaApi_current_slideNodes, _emblaApi_current1;

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

@@ -1 +1 @@
-{"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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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    onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n  },\n) {\n  const {\n    align,\n    direction,\n    loop,\n    slidesToScroll,\n    watchDrag,\n    containScroll,\n    motion,\n    onDragIndexChange,\n    onAutoplayIndexChange,\n  } = 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  const getPlugins = React.useCallback(() => {\n    const plugins: EmblaPluginType[] = [];\n\n    plugins.push(\n      Autoplay({\n        playOnInit: autoplayRef.current,\n        /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n        /* we'll handle this logic to ensure autoplay state is respected */\n        stopOnInteraction: true,\n        stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n        stopOnMouseEnter: false, // We will handle this manually to align functionality\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  /* This function enables autoplay to pause/play without affecting underlying state\n   * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n   */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean, temporary?: boolean) => {\n      if (!temporary) {\n        autoplayRef.current = autoplay;\n      }\n\n      if (autoplay && autoplayRef.current) {\n        // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\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 updateIndex = () => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slides = emblaApi.current?.slideNodes();\n    const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n    const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n    // We set the first card in the current group as the default tabster index for focus capture\n    slides?.forEach((slide, slideIndex) => {\n      setTabsterDefault(slide, slideIndex === actualIndex);\n    });\n    setActiveIndex(newIndex);\n  };\n\n  const handleReinit = useEventCallback(() => {\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    const data: CarouselUpdateData = {\n      navItemsCount,\n      activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n      groupIndexList,\n      slideNodes: nodes,\n    };\n\n    updateIndex();\n    emblaApi.current?.scrollTo(activeIndex, false);\n    for (const listener of listeners.current) {\n      listener(data);\n    }\n  });\n\n  const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    updateIndex();\n    if (eventType === 'autoplay:select') {\n      const noopEvent = new Event('autoplay');\n      onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\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 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    // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\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?.off('autoplay:select', handleIndexChange);\n          emblaApi.current?.destroy();\n        }\n\n        // Use direct viewport if available, else fallback to container (includes Carousel controls).\n        currentElement = viewportRef.current ?? newElement;\n        if (currentElement) {\n          emblaApi.current = EmblaCarousel(\n            currentElement,\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          emblaApi.current?.on('autoplay:select', handleIndexChange);\n        }\n      },\n    };\n  }, [getPlugins, handleIndexChange, handleReinit]);\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 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\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      plugins,\n    );\n  }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n  React.useEffect(() => {\n    // Scroll to controlled values on update\n    // If active index is out of bounds, re-init will handle instead\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n    emblaOptions.current.startIndex = activeIndex;\n    if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\n\n  return {\n    activeIndex,\n    carouselApi,\n    viewportRef,\n    containerRef,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0BaA,sBAAAA;eAAAA;;IAEGC,iBAAAA;eAAAA;;IAaAC,gBAAAA;eAAAA;;;;;gCAzC0D;wEACoB;iEACvE;6CAEgB;+CACE;gFAEpB;4EACJ;+BACkB;AAKnC,MAAMC,kBAAkB,CAAC,CAAC,EAAEC,uDAAAA,CAAyBC,IAAI,CAAC,CAAC;AAE3D,MAAMC,wBAA0C;IAC9CC,eAAe;IACfC,iBAAiB;IACjBC,WAAW;IACXC,WAAW;IAEXC,WAAWR;IACXS,QAAQ,CAAC,CAAC,EAAEC,mDAAAA,CAAuBR,IAAI,CAAC,CAAC;AAC3C;AAEO,MAAML,yBAAyB;AAE/B,SAASC,kBAAkBa,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;AAEO,SAAShB,iBACdsB,OAMC;IAED,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,IAAI,EACJC,cAAc,EACdnB,SAAS,EACTF,aAAa,EACbsB,MAAM,EACNC,iBAAiB,EACjBC,qBAAqB,EACtB,GAAGP;IACJ,MAAM,CAACQ,aAAaC,eAAe,GAAGC,IAAAA,oCAAAA,EAAqB;QACzDC,cAAcX,QAAQY,kBAAkB;QACxCC,OAAOb,QAAQQ,WAAW;QAC1BM,cAAc;IAChB;IAEA,MAAMC,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAkCC;QACtEZ,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBW,OAAO;YAAEA;YAAOE,MAAM;YAAQD;QAAM;IAC1D;IAEA,MAAME,eAAeC,OAAMC,MAAM,CAAmB;QAClDrB;QACAC;QACAC;QACAC;QACAmB,YAAYf;QACZvB;QACAF;IACF;IAEA,MAAMyC,WAAWH,OAAMC,MAAM,CAA2B;IACxD,MAAMG,cAAcJ,OAAMC,MAAM,CAAU;IAE1C,MAAMI,gBAAgBL,OAAMM,WAAW,CAAC;YACtCH,oCAAAA;QAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,qCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,AAARA,MAAQ,QAApCN,uCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mCAAsCO,KAAK;IAC7C,GAAG,EAAE;IAEL,MAAMC,aAAaX,OAAMM,WAAW,CAAC;QACnC,MAAME,UAA6B,EAAE;QAErCA,QAAQI,IAAI,CACVC,IAAAA,8BAAAA,EAAS;YACPC,YAAYV,YAAYG,OAAO;YAC/B,yEAAyE,GACzE,iEAAiE,GACjEQ,mBAAmB;YACnBC,eAAe;YACfC,kBAAkB;QACpB;QAGF,6BAA6B;QAC7B,IAAIjC,WAAW,QAAQ;YACrBwB,QAAQI,IAAI,CAACM,IAAAA,0BAAAA;QACf;QAEA,IAAItD,WAAW;YACb4C,QAAQI,IAAI,CACVO,IAAAA,iCAAAA,EAAmB;gBACjBC,iBAAiB1B;YACnB;QAEJ;QAEA,OAAOc;IACT,GAAG;QAACxB;QAAQU;QAAa9B;KAAU;IAEnC;;GAEC,GACD,MAAMyD,iBAAiBrB,OAAMM,WAAW,CACtC,CAACG,UAAmBa;QAClB,IAAI,CAACA,WAAW;YACdlB,YAAYG,OAAO,GAAGE;QACxB;QAEA,IAAIA,YAAYL,YAAYG,OAAO,EAAE;gBAEnCJ,oCAAAA;YAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,qCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,AAARA,MAAQ,QAApCN,uCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mCAAsCoB,IAAI;YAC1C,8EAA8E;YAC9ElB;QACF,OAAO,IAAI,CAACI,UAAU;gBACpBN,qCAAAA;YAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,sCAAAA,mBAAkBK,OAAO,GAAGC,QAAQ,AAARA,MAAQ,QAApCN,wCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oCAAsCqB,IAAI;QAC5C;IACF,GACA;QAACnB;KAAc;IAGjB,oGAAoG;IACpG,MAAMoB,YAAYzB,OAAMC,MAAM,CAAC,IAAIyB;IACnC,MAAMC,qBAAqB3B,OAAMM,WAAW,CAAC,CAACsB;QAC5CH,UAAUlB,OAAO,CAACsB,GAAG,CAACD;QAEtB,OAAO;YACLH,UAAUlB,OAAO,CAACuB,MAAM,CAACF;QAC3B;IACF,GAAG,EAAE;IAEL,MAAMG,cAAc;YACD5B,mBACFA,oBACOA,oBACF6B;YAHH7B;QAAjB,MAAM8B,WAAW9B,CAAAA,uCAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkB+B,kBAAkB,EAAA,MAAA,QAApC/B,yCAAAA,KAAAA,IAAAA,uCAA0C;QAC3D,MAAMpC,SAAAA,AAASoC,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBgC,UAAU;QAC3C,MAAMH,gBAAAA,AAAgB7B,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBiC,cAAc,GAAGJ,aAAa;YAClDA;QAApB,MAAMK,cAAcL,CAAAA,2BAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,0BAAAA,aAAe,CAACC,SAAS,AAATA,MAAS,QAAzBD,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAA2B,CAAC,EAAE,AAAF,MAAE,QAA9BA,6BAAAA,KAAAA,IAAAA,2BAAkC;QAEtD,4FAA4F;QAC5FjE,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQuE,OAAO,CAAC,CAACC,OAAOC;YACtBpF,kBAAkBmF,OAAOC,eAAeH;QAC1C;QACAjD,eAAe6C;IACjB;IAEA,MAAMQ,eAAe9C,IAAAA,gCAAAA,EAAiB;YACPQ,mBACMA,oBAIpBA,oBAMfA;YAX6BA;QAA7B,MAAMuC,QAAuBvC,CAAAA,+BAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBgC,UAAU,EAAA,MAAA,QAA5BhC,iCAAAA,KAAAA,IAAAA,+BAAkC,EAAE;YAC9BA;QAAnC,MAAMwC,iBAA6BxC,CAAAA,iDAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBiC,cAAc,GAAGJ,aAAa,AAAbA,MAAa,QAAhD7B,mDAAAA,KAAAA,IAAAA,iDAAoD,EAAE;QACzF,MAAMyC,gBAAgBD,eAAeE,MAAM,GAAG,IAAIF,eAAeE,MAAM,GAAGH,MAAMG,MAAM;YAGvE1C;QAFf,MAAM2C,OAA2B;YAC/BF;YACAzD,aAAagB,CAAAA,uCAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkB+B,kBAAkB,EAAA,MAAA,QAApC/B,yCAAAA,KAAAA,IAAAA,uCAA0C;YACvDwC;YACAR,YAAYO;QACd;QAEAX;QACA5B,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkB4C,QAAQ,CAAC5D,aAAa;QACxC,KAAK,MAAMyC,YAAYH,UAAUlB,OAAO,CAAE;YACxCqB,SAASkB;QACX;IACF;IAEA,MAAME,oBAAuCrD,IAAAA,gCAAAA,EAAiB,CAACsD,GAAGC;YAC/C/C;YAAAA;QAAjB,MAAM8B,WAAW9B,CAAAA,uCAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkB+B,kBAAkB,EAAA,MAAA,QAApC/B,yCAAAA,KAAAA,IAAAA,uCAA0C;QAC3D4B;QACA,IAAImB,cAAc,mBAAmB;YACnC,MAAMC,YAAY,IAAIC,MAAM;YAC5BlE,0BAAAA,QAAAA,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAwBiE,WAAW;gBAAEvD,OAAOuD;gBAAWrD,MAAM;gBAAYD,OAAOoC;YAAS;QAC3F;IACF;IAEA,MAAMoB,cAA+CrD,OAAMC,MAAM,CAAC;IAClE,MAAMqD,eAAgDtD,OAAMuD,OAAO,CAAC;QAClE,IAAIC,iBAAwC;QAE5C,MAAMC,yBAAyB;gBACRtD,mBACEA;YADvB,MAAMuD,eAAAA,AAAevD,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBgC,UAAU;gBAC1BhC;YAAvB,MAAMwD,iBAAiBxD,CAAAA,iCAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkByD,YAAY,EAAA,MAAA,QAA9BzD,mCAAAA,KAAAA,IAAAA,iCAAoC,EAAE;YAE7DuD,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcpB,OAAO,CAAC,CAACuB,aAAahE;gBAClCgE,YAAYC,aAAa,CACvB,IAAIC,YAA2C5G,wBAAwB;oBACrE6G,SAAS;oBACTC,QAAQ;wBAAEC,WAAWP,eAAeQ,QAAQ,CAACtE;oBAAO;gBACtD;YAEJ;QACF;QAEA,iFAAiF;QACjF,MAAMW,UAAUG;QAEhB,OAAO;YACL,IAAIJ,SAAQ6D,WAAmC;gBAC7C,IAAIZ,gBAAgB;wBAClBrD,mBACAA,oBACAA,oBACAA,oBACAA;oBAJAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBkE,GAAG,CAAC,gBAAgBZ;oBACtCtD,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBkE,GAAG,CAAC,UAAUrB;oBAChC7C,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBkE,GAAG,CAAC,UAAU5B;oBAChCtC,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBkE,GAAG,CAAC,mBAAmBrB;oBACzC7C,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBmE,OAAO;gBAC3B;oBAGiBjB;gBADjB,6FAA6F;gBAC7FG,iBAAiBH,CAAAA,uBAAAA,YAAY9C,OAAO,AAAPA,MAAO,QAAnB8C,yBAAAA,KAAAA,IAAAA,uBAAuBe;gBACxC,IAAIZ,gBAAgB;wBAUlBrD,oBACAA,oBACAA,oBACAA;oBAZAA,SAASI,OAAO,GAAGgE,IAAAA,sBAAAA,EACjBf,gBACA;wBACE,GAAG/F,qBAAqB;wBACxB,GAAGsC,aAAaQ,OAAO;oBACzB,GACAC;oBAGFL,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBqE,EAAE,CAAC,UAAU/B;oBAC/BtC,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBqE,EAAE,CAAC,gBAAgBf;oBACrCtD,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBqE,EAAE,CAAC,UAAUxB;oBAC/B7C,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBqE,EAAE,CAAC,mBAAmBxB;gBAC1C;YACF;QACF;IACF,GAAG;QAACrC;QAAYqC;QAAmBP;KAAa;IAEhD,MAAMgC,cAAczE,OAAMuD,OAAO,CAC/B,IAAO,CAAA;YACLmB,iBAAiB,CAACzG,SAAsB0G;oBACjBxE,mBACEA,oBAMvBA;gBAPA,MAAMuD,eAAAA,AAAevD,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBgC,UAAU;oBAC1BhC;gBAAvB,MAAMwC,iBAAiBxC,CAAAA,iDAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBiC,cAAc,GAAGJ,aAAa,AAAbA,MAAa,QAAhD7B,mDAAAA,KAAAA,IAAAA,iDAAoD,EAAE;oBAC3DuD;gBAAlB,MAAMkB,YAAYlB,CAAAA,wBAAAA,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcmB,OAAO,CAAC5G,QAAAA,MAAAA,QAAtByF,0BAAAA,KAAAA,IAAAA,wBAAkC;gBACpD,MAAMoB,aAAanC,eAAeoC,SAAS,CAACC,CAAAA;oBAC1C,OAAOA,MAAMb,QAAQ,CAACS;gBACxB;gBACA,MAAMK,aAAaH,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcF;gBACjCzE,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkB4C,QAAQ,CAACkC,YAAYN;gBAEvC,OAAOM;YACT;YACAC,eAAe,CAACrF,OAAe8E;oBAC7BxE;gBAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkB4C,QAAQ,CAAClD,OAAO8E;YACpC;YACAQ,mBAAmB,CAACC;oBAOXjF;gBANP,IAAIiF,QAAQ,QAAQ;wBAClBjF;oBAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBkF,UAAU;gBAC9B,OAAO;wBACLlF;oBAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkBmF,UAAU;gBAC9B;oBAEOnF;gBAAP,OAAOA,CAAAA,uCAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkB+B,kBAAkB,EAAA,MAAA,QAApC/B,yCAAAA,KAAAA,IAAAA,uCAA0C;YACnD;QACF,CAAA,GACA,EAAE;IAGJH,OAAMuF,SAAS,CAAC;YAadpF;QAZA,MAAMK,UAAUG;QAEhBZ,aAAaQ,OAAO,GAAG;YACrBL,YAAYH,aAAaQ,OAAO,CAACL,UAAU;YAC3CtB;YACAC;YACAC;YACAC;YACAnB;YACAF;QACF;QAEAyC,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBqF,MAAM,CACtB;YACE,GAAG/H,qBAAqB;YACxB,GAAGsC,aAAaQ,OAAO;QACzB,GACAC;IAEJ,GAAG;QAAC5B;QAAOlB;QAAemB;QAAW8B;QAAY7B;QAAMC;QAAgBnB;KAAU;IAEjFoC,OAAMuF,SAAS,CAAC;YAGapF,mBACPA,8BAAAA;YADOA;QAF3B,wCAAwC;QACxC,gEAAgE;QAChE,MAAMsF,qBAAqBtF,CAAAA,uCAAAA,CAAAA,oBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkB+B,kBAAkB,EAAA,MAAA,QAApC/B,yCAAAA,KAAAA,IAAAA,uCAA0C;YACjDA;QAApB,MAAMuF,cAAcvF,CAAAA,sCAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,+BAAAA,mBAAkBgC,UAAU,EAAA,MAAA,QAA5BhC,iCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,6BAAgC0C,MAAM,AAANA,MAAM,QAAtC1C,wCAAAA,KAAAA,IAAAA,sCAA0C;QAC9DJ,aAAaQ,OAAO,CAACL,UAAU,GAAGf;QAClC,IAAIA,cAAcuG,eAAevG,gBAAgBsG,oBAAoB;gBACnEtF;YAAAA,CAAAA,qBAAAA,SAASI,OAAO,AAAPA,MAAO,QAAhBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAkB4C,QAAQ,CAAC5D;QAC7B;IACF,GAAG;QAACA;KAAY;IAEhB,OAAO;QACLA;QACAsF;QACApB;QACAC;QACA3B;QACAN;QACAhB;IACF;AACF"}
+{"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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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    onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n    autoplayInterval?: number;\n  },\n) {\n  const {\n    align,\n    autoplayInterval,\n    direction,\n    loop,\n    slidesToScroll,\n    watchDrag,\n    containScroll,\n    motion,\n    onDragIndexChange,\n    onAutoplayIndexChange,\n  } = options;\n\n  const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n  const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\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    duration: motionDuration,\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  const getPlugins = React.useCallback(() => {\n    const plugins: EmblaPluginType[] = [];\n\n    plugins.push(\n      Autoplay({\n        playOnInit: autoplayRef.current,\n        delay: autoplayInterval,\n        /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n        /* we'll handle this logic to ensure autoplay state is respected */\n        stopOnInteraction: true,\n        stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n        stopOnMouseEnter: false, // We will handle this manually to align functionality\n      }),\n    );\n\n    // Optionally add Fade plugin\n    if (motionType === '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  }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n  /* This function enables autoplay to pause/play without affecting underlying state\n   * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n   */\n  const enableAutoplay = React.useCallback(\n    (autoplay: boolean, temporary?: boolean) => {\n      if (!temporary) {\n        autoplayRef.current = autoplay;\n      }\n\n      if (autoplay && autoplayRef.current) {\n        // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\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 updateIndex = () => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slides = emblaApi.current?.slideNodes();\n    const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n    const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n    // We set the first card in the current group as the default tabster index for focus capture\n    slides?.forEach((slide, slideIndex) => {\n      setTabsterDefault(slide, slideIndex === actualIndex);\n    });\n    setActiveIndex(newIndex);\n  };\n\n  const handleReinit = useEventCallback(() => {\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    const data: CarouselUpdateData = {\n      navItemsCount,\n      activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n      groupIndexList,\n      slideNodes: nodes,\n    };\n\n    updateIndex();\n    emblaApi.current?.scrollTo(activeIndex, false);\n    for (const listener of listeners.current) {\n      listener(data);\n    }\n  });\n\n  const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n    const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    updateIndex();\n    if (eventType === 'autoplay:select') {\n      const noopEvent = new Event('autoplay');\n      onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\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 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    // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\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?.off('autoplay:select', handleIndexChange);\n          emblaApi.current?.destroy();\n        }\n\n        // Use direct viewport if available, else fallback to container (includes Carousel controls).\n        currentElement = viewportRef.current ?? newElement;\n        if (currentElement) {\n          emblaApi.current = EmblaCarousel(\n            currentElement,\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          emblaApi.current?.on('autoplay:select', handleIndexChange);\n        }\n      },\n    };\n  }, [getPlugins, handleIndexChange, handleReinit]);\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 plugins = getPlugins();\n\n    emblaOptions.current = {\n      startIndex: emblaOptions.current.startIndex,\n      align,\n      direction,\n      loop,\n      slidesToScroll,\n      watchDrag,\n      containScroll,\n      duration: motionDuration,\n    };\n\n    emblaApi.current?.reInit(\n      {\n        ...DEFAULT_EMBLA_OPTIONS,\n        ...emblaOptions.current,\n      },\n      plugins,\n    );\n  }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n  React.useEffect(() => {\n    // Scroll to controlled values on update\n    // If active index is out of bounds, re-init will handle instead\n    const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n    const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n    emblaOptions.current.startIndex = activeIndex;\n    if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n      emblaApi.current?.scrollTo(activeIndex);\n    }\n  }, [activeIndex]);\n\n  return {\n    activeIndex,\n    carouselApi,\n    viewportRef,\n    containerRef,\n    subscribeForValues,\n    enableAutoplay,\n    resetAutoplay,\n  };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-carousel",
-  "version": "9.4.7",
+  "version": "9.6.0",
   "description": "A composable carousel component that enables pagination with minimal rerenders",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,13 +25,14 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.13.14",
-    "@fluentui/react-button": "^9.3.102",
+    "@fluentui/react-aria": "^9.14.0",
+    "@fluentui/react-button": "^9.4.0",
     "@fluentui/react-context-selector": "^9.1.72",
     "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-tooltip": "^9.6.0",
     "@fluentui/react-jsx-runtime": "^9.0.50",
     "@fluentui/react-shared-contexts": "^9.21.2",
-    "@fluentui/react-tabster": "^9.23.3",
+    "@fluentui/react-tabster": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.18.20",
     "@griffel/react": "^1.5.22",