npm - @fluentui/react-carousel - Versions diffs - 9.1.0 → 9.2.0 - Mend

@fluentui/react-carousel 9.1.0 → 9.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-carousel
-This log was last generated on Tue, 08 Oct 2024 22:02:29 GMT and should not be manually modified.
+This log was last generated on Tue, 15 Oct 2024 17:13:31 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.2.0)
+Tue, 15 Oct 2024 17:13:31 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.1.0..@fluentui/react-carousel_v9.2.0)
+### Minor changes
+- feat: Add fade motion to carousel as an optional prop ([PR #33000](https://github.com/microsoft/fluentui/pull/33000) by mifraser@microsoft.com)
+- feat: Enable circular focus if circular, and enable animations on focus index change ([PR #33015](https://github.com/microsoft/fluentui/pull/33015) by mifraser@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.8 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-button to v9.3.94 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.1.0)
-Tue, 08 Oct 2024 22:02:29 GMT
+Tue, 08 Oct 2024 22:05:56 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.6.0..@fluentui/react-carousel_v9.1.0)
 ### Minor changes

package/dist/index.d.ts CHANGED Viewed

@@ -158,6 +158,11 @@ export declare type CarouselIndexChangeData = EventData<'click' | 'focus', React
     index: number;
 };
+/**
+ * List of integrated motion types
+ */
+declare type CarouselMotion = 'slide' | 'fade';
 /**
  * Used to jump to a card based on index, using arrow navigation via Tabster.
  *
@@ -346,6 +351,11 @@ export declare type CarouselProps = ComponentProps<CarouselSlots> & {
      * Defaults to: False
      */
     whitespace?: boolean;
+    /**
+     * Sets motion to fade in/out style with minimal movement
+     * Defaults: false
+     */
+    motion?: CarouselMotion;
     /**
      * Localizes the string used to announce carousel page changes
      * Defaults to: undefined
@@ -396,7 +406,7 @@ export declare type CarouselSliderSlots = {
 /**
  * State used in rendering CarouselSlider
  */
-export declare type CarouselSliderState = ComponentState<CarouselSliderSlots> & Pick<CarouselSliderProps, 'cardFocus'>;
+export declare type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;
 export declare type CarouselSlots = {
     root: Slot<'div'>;

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

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

package/lib/components/Carousel/useCarousel.js CHANGED Viewed

@@ -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 } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
     const { dir } = useFluent();
     const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = useEmblaCarousel({
         align,
@@ -23,7 +23,8 @@ import { useAnnounce } from '@fluentui/react-shared-contexts';
         defaultActiveIndex: props.defaultActiveIndex,
         activeIndex: props.activeIndex,
         watchDrag: draggable,
-        containScroll: whitespace ? false : 'keepSnaps'
+        containScroll: whitespace ? false : 'keepSnaps',
+        motion
     });
     const selectPageByElement = useEventCallback((event, element, jump)=>{
         const foundIndex = carouselApi.scrollToElement(element, jump);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Carousel.\n \n The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n \n @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo';\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedRefs = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 \|\| !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedRefs,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: mergedRefs,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","dir","activeIndex","carouselApi","containerRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedRefs","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","role","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,wBAAwB,EACxBC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAI/B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,kCAAkC;AAE9D;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B;IACvF;IAEA,MAAM,EACJC,QAAQ,QAAQ,EAChBC,WAAW,KAAK,EAChBC,mBAAmB,EACnBC,YAAY,MAAM,EAClBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,YAAY,~~EACb~~,~~GAAGR~~;IAEJ,MAAM,~~EAAES~~,GAAG,EAAE,~~GAAGnB~~;IAChB,MAAM,~~EAAEoB~~,WAAW,EAAEC,WAAW,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,aAAa,EAAE,~~GACjGlB~~,iBAAiB;QACfK;~~QACAc~~,WAAWP;QACXQ,~~MAAMd~~;~~QACNe~~,~~gBAAgBb~~;~~QAChBc~~,~~oBAAoBnB~~,~~MAAMmB~~,kBAAkB;QAC5CT,~~aAAaV~~,~~MAAMU~~,WAAW;QAC9BU,~~WAAWd~~;~~QACXe~~,~~eAAed~~,aAAa,QAAQ;~~IACtC~~;IAEF,~~MAAMe~~,~~sBAAmE7B~~,iBAAiB,~~CAAC8B~~,OAAOC,SAASC;QACzG,MAAMC,aAAaf,YAAYgB,eAAe,CAACH,SAASC;~~QACxDrB~~,gCAAAA,0CAAAA,~~oBAAsBmB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOH;QAAW;QAEvE,OAAOA;IACT;IAEA,MAAMI,oBAA+~~DrC~~,iBAAiB,~~CAAC8B~~,OAAOM,OAAOJ;QACnGd,YAAYoB,aAAa,CAACF,OAAOJ;~~QAEjCrB~~,gCAAAA,0CAAAA,~~oBAAsBmB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC;QAAM;IAC7D;IAEA,MAAMG,~~wBAAuEvC~~,iBAAiB,~~CAAC8B~~,OAAOP;QACpG,MAAMiB,gBAAgBtB,YAAYuB,iBAAiB,CAAClB;~~QACpDZ~~,gCAAAA,0CAAAA,~~oBAAsBmB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOI;QAAc;QAE1E,OAAOA;IACT;IAEA,MAAME,~~aAAaxC~~,cAAcM,~~KAAKW~~;IAEtC,4BAA4B;IAC5B,MAAMwB,~~sBAAsBxC~~,~~MAAMyC~~,MAAM,CAAS;IACjD,MAAMC,~~iBAAiB1C~~,~~MAAMyC~~,MAAM,CAAS;IAC5C,MAAME,~~cAAc3C~~,~~MAAMyC~~,MAAM,CAAa,EAAE;IAE/C,MAAM,EAAEG,QAAQ,EAAE,~~GAAG1C~~;IAErB,~~MAAM2C~~,~~qBAAqBhD~~,iBAAiB;QAC1C,~~IAAI6C~~,eAAeI,OAAO,IAAI,KAAK,~~CAAClC~~,cAAc;YAChD,+CAA+C;YAC/C;QACF;QAEA,~~MAAMmC~~,~~mBAAmBnC~~,~~aAAaE~~,aAAa4B,eAAeI,OAAO,EAAEH,YAAYG,OAAO;QAE9F,IAAIC,qBAAqBP,oBAAoBM,OAAO,EAAE;YACpDN,oBAAoBM,OAAO,GAAGC;YAC9BH,SAASG,kBAAkB;gBAAEC,QAAQ;YAAK;QAC5C;IACF;~~IAEAlD~~,0BAA0B;QACxB,oDAAoD;QACpD,~~OAAOmB~~,mBAAmBgC,CAAAA;YACxB,IAAIP,eAAeI,OAAO,IAAI,KAAKG,KAAKC,aAAa,GAAG,~~KAAKtC~~,cAAc;gBACzE,~~MAAMmC~~,~~mBAAmBnC~~,~~aAAaqC~~,KAAKnC,WAAW,EAAEmC,KAAKC,aAAa,EAAED,KAAKE,cAAc;gBAC/F,mFAAmF;gBACnFX,oBAAoBM,OAAO,GAAGC;YAChC;YACAL,eAAeI,OAAO,GAAGG,KAAKC,aAAa;YAC3CP,YAAYG,OAAO,GAAGG,KAAKE,cAAc;YACzCN;QACF;IACF,GAAG;QAAC5B;QAAoB4B;~~QAAoBjC~~;KAAa;IAEzDd,0BAA0B;~~QACxB+C~~;IACF,GAAG;QAAC/B;QAAa+B;KAAmB;IAEpC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,~~MAAMzD~~,~~KAAK0D~~,MAAM,~~CACf3D~~,yBAAyB,OAAO;YAC9BU,~~KAAKkC~~;YACLgB,MAAM;YACN,~~GAAGnD~~,KAAK;QACV,IACA;~~YAAEoD~~,aAAa;QAAM;QAGvB1C;~~QACAP~~;~~QACAS~~,cAAcuB;QACdb;QACAU;QACAF;QACAjB;QACAC;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Carousel.\n \n The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n \n @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo';\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n motion = 'slide',\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n motion,\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedRefs = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 \|\| !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedRefs,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: mergedRefs,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["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","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedRefs","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/CarouselCard/useCarouselCard.js CHANGED Viewed

@@ -18,6 +18,7 @@ import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContex
     const elementRef = React.useRef(null);
     const isMouseEvent = React.useRef(false);
     const selectPageByElement = useCarouselContext((ctx)=>ctx.selectPageByElement);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
     const { cardFocus } = useCarouselSliderContext();
     const focusAttr = useFocusableGroup({
         tabBehavior: 'limited'
@@ -50,10 +51,14 @@ import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContex
     ]);
     const handleFocusCapture = React.useCallback((e)=>{
         if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
-            selectPageByElement(e, e.currentTarget, true);
+            var // We want to prevent any browser scroll intervention for 'offscreen' focus
+            _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
         }
     }, [
-        selectPageByElement
+        selectPageByElement,
+        containerRef
     ]);
     const handleMouseDown = (e)=>{
         if (!e.defaultPrevented) {

package/lib/components/CarouselCard/useCarouselCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselCard.ts"],"sourcesContent":["import { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocusCapture = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n selectPageByElement(e, e.currentTarget, ~~true~~);\n }\n },\n [selectPageByElement],\n );\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);\n const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onMouseDown,\n onMouseUp,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","currentTarget","handleMouseDown","handleMouseUp","onFocusCapture","onMouseUp","onMouseDown","state","components","always","role","undefined","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,iBAAiB,QAAQ,0BAA0B;AAC5D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,aAAa,EACbC,KAAK,QACA,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,SAASC,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IACrB,MAAMG,aAAaV,MAAMW,MAAM,CAAiB;IAChD,MAAMC,eAAeZ,MAAMW,MAAM,CAAU;IAC3C,MAAME,sBAAsBX,mBAAmBY,CAAAA,MAAOA,IAAID,mBAAmB;IAC7E,MAAM,~~EAAEE~~,SAAS,EAAE,~~GAAGV~~;IAEtB,~~MAAMW~~,~~YAAYvB~~,kBAAkB;~~QAClCwB~~,aAAa;IACf;IACA,MAAMC,iBAAiBH,YAAY;QAAE,GAAGC,SAAS;QAAEG,UAAU;IAAE,IAAI,CAAC;IAEpE,sDAAsD;IACtD,MAAMC,~~KAAKrB~~,MAAMK,~~uBAAuBiB~~,IAAI,~~EAAEd~~,~~MAAMa~~,EAAE;~~IAEtDpB~~,~~MAAMsB~~,SAAS,CAAC;QACd,MAAMC,~~UAAUb~~,~~WAAWc~~,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,WAAW,CAACC;gBAChB,MAAMC,QAAQD;gBACd,4FAA4F;gBAC5F,IAAI,CAACX,WAAW;oBACd,MAAMa,SAAS,CAACD,MAAME,MAAM,CAACC,SAAS;oBACtCP,QAAQQ,UAAU,GAAGH,OAAOI,QAAQ;oBACpCT,QAAQU,KAAK,GAAGL;gBAClB;YACF;YAEAL,QAAQW,gBAAgB,~~CAAC/B~~,~~wBAAwBsB~~;YAEjD,OAAO;gBACLF,QAAQY,mBAAmB,~~CAAChC~~,~~wBAAwBsB~~;YACtD;QACF;IACF,GAAG;QAACV;KAAU;IAEd,MAAMqB,~~qBAAqBpC~~,~~MAAMqC~~,WAAW,CAC1C,CAACC;QACC,IAAI,CAACA,EAAEC,gBAAgB,~~IAAI5C~~,~~cAAc2C~~,EAAEE,aAAa,KAAK,~~CAAC5B~~,~~aAAaY~~,OAAO,EAAE;~~YAClFX~~,~~oBAAoByB~~,GAAGA,EAAEE,aAAa,EAAE;QAC1C;IACF,GACA;~~QAAC3B~~;~~KAAoB~~;~~IAGvB~~,MAAM4B,kBAAkB,~~CAACH~~;QACvB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;~~YACvB3B~~,~~aAAaY~~,OAAO,GAAG;QACzB;IACF;IACA,~~MAAMkB~~,gBAAgB,~~CAACJ~~;QACrB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;~~YACvB3B~~,~~aAAaY~~,OAAO,GAAG;QACzB;IACF;IAEA,~~MAAMmB~~,~~iBAAiB/C~~,eAAeW,~~MAAMoC~~,cAAc,~~EAAEP~~;IAC5D,~~MAAMQ~~,~~YAAYhD~~,eAAeW,~~MAAMqC~~,SAAS,EAAEF;IAClD,MAAMG,~~cAAcjD~~,eAAeW,~~MAAMsC~~,WAAW,EAAEJ;IACtD,MAAMK,QAA2B;QAC/~~BrC~~;~~QACAsC~~,YAAY;~~YACV1B~~,MAAM;QACR;QACAA,~~MAAMxB~~,~~KAAKmD~~,MAAM,~~CACftD~~,yBAAyB,OAAO;YAC9Bc,KAAKV,cAAcY,YAAYF;YAC/~~ByC~~,MAAM;~~YACN9B~~,UAAUJ,YAAY,~~IAAImC~~;YAC1B,~~GAAG3C~~,KAAK;~~YACRa~~;~~YACAuB~~;YACAE;YACAD;YACA,~~GAAG1B~~,cAAc;QACnB,IACA;~~YAAEiC~~,aAAa;QAAM;IAEzB;IAEA,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["useCarouselCard.ts"],"sourcesContent":["import { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocusCapture = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n },\n [selectPageByElement, containerRef],\n );\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);\n const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onMouseDown,\n onMouseUp,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","containerRef","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","currentTarget","scrollTo","handleMouseDown","handleMouseUp","onFocusCapture","onMouseUp","onMouseDown","state","components","always","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/CarouselSlider/CarouselSlider.types.js CHANGED Viewed

@@ -1 +1,3 @@
-export { };
+/**
+ * State used in rendering CarouselSlider
+ */ export { };

package/lib/components/CarouselSlider/CarouselSlider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /*\n The root viewport/window of the carousel\n /\n root: Slot<'div'>;\n};\n\n/\n CarouselSlider Props\n /\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /\n cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n \n This will also be passed into CarouselCards via context and set the appropriate focus attributes\n \n Defaults: false\n /\n cardFocus?: boolean;\n};\n\n/\n State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & ~~Pick<CarouselSliderProps, 'cardFocus'>;\n\nexport type~~ CarouselSliderContextValue ~~= Pick<CarouselSliderProps, 'cardFocus'>;\~~n"],"names":[],"rangeMappings":"","mappings":"~~AA6BA~~,~~WAAgF~~"}
1	+ {"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /*\n The root viewport/window of the carousel\n /\n root: Slot<'div'>;\n};\n\n/\n CarouselSlider Props\n /\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /\n cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n \n This will also be passed into CarouselCards via context and set the appropriate focus attributes\n \n Defaults: false\n /\n cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/\n State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAAmG"}

package/lib/components/CarouselSlider/CarouselSliderContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue \| undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/*\n Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;~~IAEtB~~,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}
1	+ {"version":3,"sources":["CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue \| undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/*\n Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

package/lib/components/CarouselSlider/useCarouselSlider.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
 /**
  * Create the state required to render CarouselSlider.
  *
@@ -11,8 +12,9 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param ref - reference to root HTMLDivElement of CarouselSlider
  */ export const useCarouselSlider_unstable = (props, ref)=>{
     const { cardFocus = false } = props;
+    const circular = useCarouselContext((ctx)=>ctx.circular);
     const focusableGroupAttr = useArrowNavigationGroup({
-        circular: false,
+        circular,
         axis: 'horizontal',
         memorizeCurrent: false,
         // eslint-disable-next-line @typescript-eslint/naming-convention

package/lib/components/CarouselSlider/useCarouselSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render CarouselSlider.\n \n The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n \n @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const focusableGroupAttr = useArrowNavigationGroup({\n circular~~: false, // We don't want circular focus here, it's confusing in carousel.\~~n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselSlider_unstable","props","ref","cardFocus","~~focusableGroupAttr~~","~~circular~~","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;~~AAElE~~;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,~~qBAAqBL~~,~~wBAAwB~~;~~QACjDM~~,~~UAAU~~;~~QACVC~~,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,~~aAAaN~~,~~YAAYC~~,qBAAqB,CAAC;IAErD,OAAO;~~QACLD~~;~~QACAO~~,YAAY;YACVC,MAAM;QACR;QACAA,~~MAAMd~~,~~KAAKe~~,MAAM,~~CACfhB~~,yBAAyB,OAAO;~~YAC9BM~~;~~YACAW~~,MAAM;YACN,~~GAAGZ~~,KAAK;YACR,~~GAAGQ~~,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
1	+ {"version":3,"sources":["useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/*\n Create the state required to render CarouselSlider.\n \n The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n \n @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const circular = useCarouselContext(ctx => ctx.circular);\n const focusableGroupAttr = useArrowNavigationGroup({\n circular,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/useEmblaCarousel.js CHANGED Viewed

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
 import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';
 import Autoplay from 'embla-carousel-autoplay';
+import Fade from 'embla-carousel-fade';
 const sliderClassname = `.${carouselSliderClassNames.root}`;
 const DEFAULT_EMBLA_OPTIONS = {
     containScroll: 'trimSnaps',
@@ -26,7 +27,7 @@ export function setTabsterDefault(element, isDefault) {
     }
 }
 export function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
     const [activeIndex, setActiveIndex] = useControllableState({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
@@ -61,6 +62,27 @@ export function useEmblaCarousel(options) {
     }, [
         resetAutoplay
     ]);
+    const getPlugins = React.useCallback(()=>{
+        const plugins = [
+            Autoplay({
+                playOnInit: autoplayRef.current,
+                stopOnInteraction: !autoplayRef.current,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+                rootNode: (emblaRoot)=>{
+                    var _emblaRoot_querySelector;
+                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
+                }
+            })
+        ];
+        // Optionally add Fade plugin
+        if (motion === 'fade') {
+            plugins.push(Fade());
+        }
+        return plugins;
+    }, [
+        motion
+    ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
     const listeners = React.useRef(new Set());
     const subscribeForValues = React.useCallback((listener)=>{
@@ -116,6 +138,7 @@ export function useEmblaCarousel(options) {
                 }));
             });
         };
+        const plugins = getPlugins();
         return {
             set current (newElement){
                 if (currentElement) {
@@ -131,18 +154,7 @@ export function useEmblaCarousel(options) {
                     emblaApi.current = EmblaCarousel(newElement, {
                         ...DEFAULT_EMBLA_OPTIONS,
                         ...emblaOptions.current
-                    }, [
-                        Autoplay({
-                            playOnInit: autoplayRef.current,
-                            stopOnInteraction: !autoplayRef.current,
-                            stopOnMouseEnter: true,
-                            stopOnFocusIn: true,
-                            rootNode: (emblaRoot)=>{
-                                var _emblaRoot_querySelector;
-                                return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                            }
-                        })
-                    ]);
+                    }, plugins);
                     (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
                     (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
                     (_emblaApi_current6 = emblaApi.current) === null || _emblaApi_current6 === void 0 ? void 0 : _emblaApi_current6.on('select', handleIndexChange);
@@ -150,6 +162,7 @@ export function useEmblaCarousel(options) {
             }
         };
     }, [
+        getPlugins,
         setActiveIndex
     ]);
     const carouselApi = React.useMemo(()=>({
@@ -197,6 +210,7 @@ export function useEmblaCarousel(options) {
     ]);
     React.useEffect(()=>{
         var _emblaApi_current;
+        const plugins = getPlugins();
         emblaOptions.current = {
             align,
             direction,
@@ -208,25 +222,15 @@ export function useEmblaCarousel(options) {
         (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
             ...DEFAULT_EMBLA_OPTIONS,
             ...emblaOptions.current
-        }, [
-            Autoplay({
-                playOnInit: autoplayRef.current,
-                stopOnInteraction: !autoplayRef.current,
-                stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
-            })
-        ]);
+        }, plugins);
     }, [
         align,
         direction,
         loop,
         slidesToScroll,
         watchDrag,
-        containScroll
+        containScroll,
+        getPlugins
     ]);
     return {
         activeIndex,

package/lib/components/useEmblaCarousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' \| 'direction' \| 'loop' \| 'slidesToScroll' \| 'watchDrag' \| 'containScroll'> & {\n defaultActiveIndex: number \| undefined;\n activeIndex: number \| undefined;\n },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n if (newElement) {\n currentElement = newElement;\n emblaApi.current = EmblaCarousel(\n newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ],\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ],\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll]);\n\n return {\n activeIndex,\n carouselApi,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } 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';\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 },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ];\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n return plugins;\n }, [motion]);\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n if (newElement) {\n currentElement = newElement;\n emblaApi.current = EmblaCarousel(\n newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll, getPlugins]);\n\n return {\n activeIndex,\n carouselApi,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","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","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","getPlugins","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","push","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Carousel.\n \n The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n \n @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo';\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedRefs = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 \|\| !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedRefs,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: mergedRefs,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","dir","useFluent","activeIndex","carouselApi","containerRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedRefs","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAwBgBA;;;eAAAA;;;;qCAxBgC;gCAOzC;iEACgB;kCAIU;AAY1B,SAASA,qBAAqBC,KAAoB,EAAEC,GAA8B;IACvF;IAEA,MAAM,EACJC,QAAQ,QAAQ,EAChBC,WAAW,KAAK,EAChBC,mBAAmB,EACnBC,YAAY,MAAM,EAClBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,YAAY,~~EACb~~,~~GAAGR~~;IAEJ,MAAM,~~EAAES~~,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,aAAa,EAAE,GACjGC,IAAAA,kCAAAA,EAAiB;~~QACff~~;~~QACAgB~~,WAAWT;QACXU,~~MAAMhB~~;~~QACNiB~~,~~gBAAgBf~~;~~QAChBgB~~,~~oBAAoBrB~~,~~MAAMqB~~,kBAAkB;QAC5CV,~~aAAaX~~,~~MAAMW~~,WAAW;QAC9BW,~~WAAWhB~~;~~QACXiB~~,~~eAAehB~~,aAAa,QAAQ;~~IACtC~~;IAEF,~~MAAMiB~~,sBAAmEC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC,SAASC;QACzG,MAAMC,aAAajB,YAAYkB,eAAe,CAACH,SAASC;~~QACxDxB~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBsB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOH;QAAW;QAEvE,OAAOA;IACT;IAEA,MAAMI,oBAA+DR,IAAAA,gCAAAA,EAAiB,CAACC,OAAOM,OAAOJ;QACnGhB,YAAYsB,aAAa,CAACF,OAAOJ;~~QAEjCxB~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBsB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC;QAAM;IAC7D;IAEA,MAAMG,wBAAuEV,IAAAA,gCAAAA,EAAiB,CAACC,OAAOR;QACpG,MAAMkB,gBAAgBxB,YAAYyB,iBAAiB,CAACnB;~~QACpDd~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBsB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOI;QAAc;QAE1E,OAAOA;IACT;IAEA,MAAME,aAAaC,IAAAA,6BAAAA,~~EAActC~~,~~KAAKY~~;IAEtC,4BAA4B;IAC5B,MAAM2B,sBAAsBC,OAAMC,MAAM,CAAS;IACjD,MAAMC,iBAAiBF,OAAMC,MAAM,CAAS;IAC5C,MAAME,cAAcH,OAAMC,MAAM,CAAa,EAAE;IAE/C,MAAM,EAAEG,QAAQ,EAAE,GAAGC,IAAAA,gCAAAA;IAErB,MAAMC,qBAAqBtB,IAAAA,gCAAAA,EAAiB;QAC1C,IAAIkB,eAAeK,OAAO,IAAI,KAAK,~~CAACxC~~,cAAc;YAChD,+CAA+C;YAC/C;QACF;QAEA,~~MAAMyC~~,~~mBAAmBzC~~,~~aAAaG~~,aAAagC,eAAeK,OAAO,EAAEJ,YAAYI,OAAO;QAE9F,IAAIC,qBAAqBT,oBAAoBQ,OAAO,EAAE;YACpDR,oBAAoBQ,OAAO,GAAGC;YAC9BJ,SAASI,kBAAkB;gBAAEC,QAAQ;YAAK;QAC5C;IACF;IAEAC,IAAAA,yCAAAA,EAA0B;QACxB,oDAAoD;QACpD,OAAOrC,mBAAmBsC,CAAAA;YACxB,IAAIT,eAAeK,OAAO,IAAI,KAAKI,KAAKC,aAAa,GAAG,~~KAAK7C~~,cAAc;gBACzE,~~MAAMyC~~,~~mBAAmBzC~~,~~aAAa4C~~,KAAKzC,WAAW,EAAEyC,KAAKC,aAAa,EAAED,KAAKE,cAAc;gBAC/F,mFAAmF;gBACnFd,oBAAoBQ,OAAO,GAAGC;YAChC;YACAN,eAAeK,OAAO,GAAGI,KAAKC,aAAa;YAC3CT,YAAYI,OAAO,GAAGI,KAAKE,cAAc;YACzCP;QACF;IACF,GAAG;QAACjC;QAAoBiC;~~QAAoBvC~~;KAAa;~~IAEzD2C~~,IAAAA,yCAAAA,EAA0B;QACxBJ;IACF,GAAG;QAACpC;QAAaoC;KAAmB;IAEpC,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;~~YAC9B1D~~,~~KAAKqC~~;YACLsB,MAAM;YACN,~~GAAG5D~~,KAAK;QACV,IACA;~~YAAE6D~~,aAAa;QAAM;QAGvBlD;~~QACAR~~;~~QACAU~~,cAAcyB;QACdd;QACAW;QACAF;QACAnB;QACAC;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Carousel.\n \n The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n \n @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo';\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n motion = 'slide',\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n motion,\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedRefs = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 \|\| !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedRefs,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: mergedRefs,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","dir","useFluent","activeIndex","carouselApi","containerRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedRefs","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CarouselCard/useCarouselCard.js CHANGED Viewed

@@ -21,6 +21,7 @@ const useCarouselCard_unstable = (props, ref)=>{
     const elementRef = _react.useRef(null);
     const isMouseEvent = _react.useRef(false);
     const selectPageByElement = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByElement);
+    const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
     const { cardFocus } = (0, _CarouselSliderContext.useCarouselSliderContext)();
     const focusAttr = (0, _reacttabster.useFocusableGroup)({
         tabBehavior: 'limited'
@@ -53,10 +54,13 @@ const useCarouselCard_unstable = (props, ref)=>{
     ]);
     const handleFocusCapture = _react.useCallback((e)=>{
         if (!e.defaultPrevented && (0, _reactutilities.isHTMLElement)(e.currentTarget) && !isMouseEvent.current) {
-            selectPageByElement(e, e.currentTarget, true);
+            var _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
         }
     }, [
-        selectPageByElement
+        selectPageByElement,
+        containerRef
     ]);
     const handleMouseDown = (e)=>{
         if (!e.defaultPrevented) {

package/lib-commonjs/components/CarouselCard/useCarouselCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselCard.ts"],"sourcesContent":["import { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocusCapture = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n selectPageByElement(e, e.currentTarget, ~~true~~);\n }\n },\n [selectPageByElement],\n );\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);\n const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onMouseDown,\n onMouseUp,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useCarouselCard_unstable","props","ref","autoSize","elementRef","React","useRef","isMouseEvent","selectPageByElement","useCarouselContext","ctx","cardFocus","useCarouselSliderContext","focusAttr","useFocusableGroup","tabBehavior","focusAttrProps","tabIndex","id","useId","carouselCardClassNames","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","EMBLA_VISIBILITY_EVENT","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","isHTMLElement","currentTarget","handleMouseDown","handleMouseUp","onFocusCapture","mergeCallbacks","onMouseUp","onMouseDown","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","undefined","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BA2BaA;;;eAAAA;;;;8BA3BqB;gCAQ3B;iEACgB;iCAE2C;kCAE3B;6CAEA;uCACE;AAWlC,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IACrB,MAAMG,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAMC,eAAeF,OAAMC,MAAM,CAAU;IAC3C,MAAME,sBAAsBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,mBAAmB;IAC7E,MAAM,~~EAAEG~~,SAAS,EAAE,GAAGC,IAAAA,+CAAAA;IAEtB,MAAMC,YAAYC,IAAAA,+BAAAA,EAAkB;QAClCC,aAAa;IACf;IACA,MAAMC,iBAAiBL,YAAY;QAAE,GAAGE,SAAS;QAAEI,UAAU;IAAE,IAAI,CAAC;IAEpE,sDAAsD;IACtD,MAAMC,KAAKC,IAAAA,qBAAAA,EAAMC,mDAAAA,CAAuBC,IAAI,~~EAAEpB~~,~~MAAMiB~~,EAAE;~~IAEtDb~~,~~OAAMiB~~,SAAS,CAAC;QACd,MAAMC,~~UAAUnB~~,~~WAAWoB~~,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,WAAW,CAACC;gBAChB,MAAMC,QAAQD;gBACd,4FAA4F;gBAC5F,IAAI,CAACf,WAAW;oBACd,MAAMiB,SAAS,CAACD,MAAME,MAAM,CAACC,SAAS;oBACtCP,QAAQQ,UAAU,GAAGH,OAAOI,QAAQ;oBACpCT,QAAQU,KAAK,GAAGL;gBAClB;YACF;YAEAL,QAAQW,gBAAgB,CAACC,wCAAAA,EAAwBV;YAEjD,OAAO;gBACLF,QAAQa,mBAAmB,CAACD,wCAAAA,EAAwBV;YACtD;QACF;IACF,GAAG;QAACd;KAAU;IAEd,MAAM0B,~~qBAAqBhC~~,~~OAAMiC~~,WAAW,CAC1C,CAACC;QACC,IAAI,CAACA,EAAEC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,EAAEG,aAAa,KAAK,~~CAACnC~~,~~aAAaiB~~,OAAO,EAAE;~~YAClFhB~~,~~oBAAoB+B~~,GAAGA,EAAEG,aAAa,EAAE;QAC1C;IACF,GACA;~~QAAClC~~;~~KAAoB~~;~~IAGvB~~,~~MAAMmC~~,kBAAkB,~~CAACJ~~;QACvB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;~~YACvBjC~~,~~aAAaiB~~,OAAO,GAAG;QACzB;IACF;IACA,~~MAAMoB~~,gBAAgB,~~CAACL~~;QACrB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;~~YACvBjC~~,~~aAAaiB~~,OAAO,GAAG;QACzB;IACF;IAEA,~~MAAMqB~~,iBAAiBC,IAAAA,8BAAAA,~~EAAe7C~~,~~MAAM4C~~,cAAc,~~EAAER~~;IAC5D,~~MAAMU~~,YAAYD,IAAAA,8BAAAA,~~EAAe7C~~,~~MAAM8C~~,SAAS,EAAEH;IAClD,MAAMI,cAAcF,IAAAA,8BAAAA,~~EAAe7C,MAAM+~~C,WAAW,EAAEL;IACtD,MAAMM,QAA2B;QAC/~~B9C~~;~~QACA+C~~,YAAY;~~YACV7B~~,MAAM;QACR;QACAA,~~MAAM8B~~,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;~~YAC9BnD~~,~~KAAKoD~~,IAAAA,6BAAAA,~~EAAclD~~,YAAYF;YAC/~~BqD~~,MAAM;~~YACNtC~~,UAAUN,YAAY,~~IAAI6C~~;YAC1B,~~GAAGvD~~,KAAK;~~YACRiB~~;~~YACA2B~~;YACAG;YACAD;YACA,~~GAAG/B~~,cAAc;QACnB,IACA;~~YAAEyC~~,aAAa;QAAM;IAEzB;IAEA,OAAOR;AACT"}
1	+ {"version":3,"sources":["useCarouselCard.ts"],"sourcesContent":["import { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocusCapture = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n },\n [selectPageByElement, containerRef],\n );\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);\n const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onMouseDown,\n onMouseUp,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useCarouselCard_unstable","props","ref","autoSize","elementRef","React","useRef","isMouseEvent","selectPageByElement","useCarouselContext","ctx","containerRef","cardFocus","useCarouselSliderContext","focusAttr","useFocusableGroup","tabBehavior","focusAttrProps","tabIndex","id","useId","carouselCardClassNames","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","EMBLA_VISIBILITY_EVENT","removeEventListener","handleFocusCapture","useCallback","e","defaultPrevented","isHTMLElement","currentTarget","scrollTo","handleMouseDown","handleMouseUp","onFocusCapture","mergeCallbacks","onMouseUp","onMouseDown","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CarouselSlider/CarouselSlider.types.js CHANGED Viewed

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * State used in rendering CarouselSlider
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/CarouselSlider/CarouselSlider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /*\n The root viewport/window of the carousel\n /\n root: Slot<'div'>;\n};\n\n/\n CarouselSlider Props\n /\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /\n cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n \n This will also be passed into CarouselCards via context and set the appropriate focus attributes\n \n Defaults: false\n /\n cardFocus?: boolean;\n};\n\n/\n State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & ~~Pick<CarouselSliderProps, 'cardFocus'>;\n\nexport type~~ CarouselSliderContextValue ~~= Pick<CarouselSliderProps, 'cardFocus'>;\~~n"],"names":[],"rangeMappings":"","mappings":""}
1	+ {"version":3,"sources":["CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /*\n The root viewport/window of the carousel\n /\n root: Slot<'div'>;\n};\n\n/\n CarouselSlider Props\n /\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /\n cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n \n This will also be passed into CarouselCards via context and set the appropriate focus attributes\n \n Defaults: false\n /\n cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/\n State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC"}

package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue \| undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/*\n Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;~~IAEtB~~,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;IAAe;AAC1B"}
1	+ {"version":3,"sources":["CarouselSliderContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue \| undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = () =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/*\n Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["CarouselSliderContextProvider","carouselSliderContextDefaultValue","useCarouselSliderContext","useCarouselSliderContextValues_unstable","carouselSliderContext","React","createContext","undefined","cardFocus","useContext","Provider","state","carouselSlider","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,6BAAAA;eAAAA;;IAPAC,iCAAAA;eAAAA;;IAIAC,wBAAAA;eAAAA;;IAYGC,uCAAAA;eAAAA;;;;iEArBO;AAGvB,MAAMC,sCAAwBC,OAAMC,aAAa,CAAyCC;AAEnF,MAAMN,oCAAgE;IAC3EO,WAAW;AACb;AAEO,MAAMN,2BAA2B;QACtCG;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,sBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA2CJ;AAAgC;AAEtE,MAAMD,gCAAgCI,sBAAsBM,QAAQ;AASpE,SAASP,wCAAwCQ,KAA0B;IAChF,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,iBAAiBP,OAAMQ,OAAO,CAClC,IAAO,CAAA;YACLL;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEI;IAAe;AAC1B"}

package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js CHANGED Viewed

@@ -12,10 +12,12 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
+const _CarouselContext = require("../CarouselContext");
 const useCarouselSlider_unstable = (props, ref)=>{
     const { cardFocus = false } = props;
+    const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
     const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
-        circular: false,
+        circular,
         axis: 'horizontal',
         memorizeCurrent: false,
         // eslint-disable-next-line @typescript-eslint/naming-convention

package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render CarouselSlider.\n \n The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n \n @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const focusableGroupAttr = useArrowNavigationGroup({\n circular~~: false, // We don't want circular focus here, it's confusing in carousel.\~~n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useCarouselSlider_unstable","props","ref","cardFocus","~~focusableGroupAttr~~","~~useArrowNavigationGroup~~","~~circular~~","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAeaA~~;;;eAAAA;;;;~~gCAfkC~~;iEACxB;8BAGiB;~~AAWjC~~,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;~~QACjDC,UAAU~~;~~QACVC~~,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,~~aAAaP~~,~~YAAYC~~,qBAAqB,CAAC;IAErD,OAAO;~~QACLD~~;~~QACAQ~~,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;~~YAC9Bb~~;~~YACAc~~,MAAM;YACN,~~GAAGf~~,KAAK;YACR,~~GAAGS~~,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
1	+ {"version":3,"sources":["useCarouselSlider.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/*\n Create the state required to render CarouselSlider.\n \n The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n \n @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const circular = useCarouselContext(ctx => ctx.circular);\n const focusableGroupAttr = useArrowNavigationGroup({\n circular,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useCarouselSlider_unstable","props","ref","cardFocus","circular","useCarouselContext","ctx","focusableGroupAttr","useArrowNavigationGroup","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;gCAhBkC;iEACxB;8BAGiB;iCAC0B;AAW3D,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,QAAQ;IACvD,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDJ;QACAK,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaT,YAAYI,qBAAqB,CAAC;IAErD,OAAO;QACLJ;QACAU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9Bf;YACAgB,MAAM;YACN,GAAGjB,KAAK;YACR,GAAGW,UAAU;QACf,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/useEmblaCarousel.js CHANGED Viewed

@@ -27,6 +27,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselCardStylesstyles = require("./CarouselCard/useCarouselCardStyles.styles");
 const _useCarouselSliderStylesstyles = require("./CarouselSlider/useCarouselSliderStyles.styles");
 const _emblacarouselautoplay = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-autoplay"));
+const _emblacarouselfade = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-fade"));
 const sliderClassname = `.${_useCarouselSliderStylesstyles.carouselSliderClassNames.root}`;
 const DEFAULT_EMBLA_OPTIONS = {
     containScroll: 'trimSnaps',
@@ -49,7 +50,7 @@ function setTabsterDefault(element, isDefault) {
     }
 }
 function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
     const [activeIndex, setActiveIndex] = (0, _reactutilities.useControllableState)({
         defaultState: options.defaultActiveIndex,
         state: options.activeIndex,
@@ -84,6 +85,27 @@ function useEmblaCarousel(options) {
     }, [
         resetAutoplay
     ]);
+    const getPlugins = _react.useCallback(()=>{
+        const plugins = [
+            (0, _emblacarouselautoplay.default)({
+                playOnInit: autoplayRef.current,
+                stopOnInteraction: !autoplayRef.current,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+                rootNode: (emblaRoot)=>{
+                    var _emblaRoot_querySelector;
+                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
+                }
+            })
+        ];
+        // Optionally add Fade plugin
+        if (motion === 'fade') {
+            plugins.push((0, _emblacarouselfade.default)());
+        }
+        return plugins;
+    }, [
+        motion
+    ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
     const listeners = _react.useRef(new Set());
     const subscribeForValues = _react.useCallback((listener)=>{
@@ -139,6 +161,7 @@ function useEmblaCarousel(options) {
                 }));
             });
         };
+        const plugins = getPlugins();
         return {
             set current (newElement){
                 if (currentElement) {
@@ -154,18 +177,7 @@ function useEmblaCarousel(options) {
                     emblaApi.current = (0, _emblacarousel.default)(newElement, {
                         ...DEFAULT_EMBLA_OPTIONS,
                         ...emblaOptions.current
-                    }, [
-                        (0, _emblacarouselautoplay.default)({
-                            playOnInit: autoplayRef.current,
-                            stopOnInteraction: !autoplayRef.current,
-                            stopOnMouseEnter: true,
-                            stopOnFocusIn: true,
-                            rootNode: (emblaRoot)=>{
-                                var _emblaRoot_querySelector;
-                                return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                            }
-                        })
-                    ]);
+                    }, plugins);
                     (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
                     (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
                     (_emblaApi_current6 = emblaApi.current) === null || _emblaApi_current6 === void 0 ? void 0 : _emblaApi_current6.on('select', handleIndexChange);
@@ -173,6 +185,7 @@ function useEmblaCarousel(options) {
             }
         };
     }, [
+        getPlugins,
         setActiveIndex
     ]);
     const carouselApi = _react.useMemo(()=>({
@@ -220,6 +233,7 @@ function useEmblaCarousel(options) {
     ]);
     _react.useEffect(()=>{
         var _emblaApi_current;
+        const plugins = getPlugins();
         emblaOptions.current = {
             align,
             direction,
@@ -231,25 +245,15 @@ function useEmblaCarousel(options) {
         (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
             ...DEFAULT_EMBLA_OPTIONS,
             ...emblaOptions.current
-        }, [
-            (0, _emblacarouselautoplay.default)({
-                playOnInit: autoplayRef.current,
-                stopOnInteraction: !autoplayRef.current,
-                stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
-            })
-        ]);
+        }, plugins);
     }, [
         align,
         direction,
         loop,
         slidesToScroll,
         watchDrag,
-        containScroll
+        containScroll,
+        getPlugins
     ]);
     return {
         activeIndex,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' \| 'direction' \| 'loop' \| 'slidesToScroll' \| 'watchDrag' \| 'containScroll'> & {\n defaultActiveIndex: number \| undefined;\n activeIndex: number \| undefined;\n },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n if (newElement) {\n currentElement = newElement;\n emblaApi.current = EmblaCarousel(\n newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ],\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ],\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll]);\n\n return {\n activeIndex,\n carouselApi,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["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","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","Autoplay","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } 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';\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 },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ];\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n return plugins;\n }, [motion]);\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n if (newElement) {\n currentElement = newElement;\n emblaApi.current = EmblaCarousel(\n newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll, getPlugins]);\n\n return {\n activeIndex,\n carouselApi,\n 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","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","getPlugins","Autoplay","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","push","Fade","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-carousel",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "A composable carousel component that enables pagination with minimal rerenders",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,19 +35,20 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.13.7",
-    "@fluentui/react-button": "^9.3.93",
-    "@fluentui/react-context-selector": "^9.1.67",
+    "@fluentui/react-aria": "^9.13.8",
+    "@fluentui/react-button": "^9.3.94",
+    "@fluentui/react-context-selector": "^9.1.68",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.0.44",
-    "@fluentui/react-shared-contexts": "^9.20.1",
-    "@fluentui/react-tabster": "^9.22.8",
-    "@fluentui/react-theme": "^9.1.20",
-    "@fluentui/react-utilities": "^9.18.15",
+    "@fluentui/react-jsx-runtime": "^9.0.45",
+    "@fluentui/react-shared-contexts": "^9.20.2",
+    "@fluentui/react-tabster": "^9.22.9",
+    "@fluentui/react-theme": "^9.1.21",
+    "@fluentui/react-utilities": "^9.18.16",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "embla-carousel": "^8.3.0",
-    "embla-carousel-autoplay": "^8.3.0"
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-fade": "^8.3.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",