@fluentui/react-carousel 0.0.0-nightly-20241015-1519.1 → 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 (13) hide show
  1. package/CHANGELOG.md +15 -16
  2. package/dist/index.d.ts +10 -0
  3. package/lib/components/Carousel/Carousel.types.js.map +1 -1
  4. package/lib/components/Carousel/useCarousel.js +3 -2
  5. package/lib/components/Carousel/useCarousel.js.map +1 -1
  6. package/lib/components/useEmblaCarousel.js +30 -26
  7. package/lib/components/useEmblaCarousel.js.map +1 -1
  8. package/lib-commonjs/components/Carousel/Carousel.types.js.map +1 -1
  9. package/lib-commonjs/components/Carousel/useCarousel.js +3 -2
  10. package/lib-commonjs/components/Carousel/useCarousel.js.map +1 -1
  11. package/lib-commonjs/components/useEmblaCarousel.js +30 -26
  12. package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
  13. package/package.json +19 -13
package/CHANGELOG.md CHANGED
@@ -1,27 +1,26 @@
1
1
  # Change Log - @fluentui/react-carousel
2
2
 
3
- This log was last generated on Tue, 15 Oct 2024 15:24:15 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 15 Oct 2024 17:13:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20241015-1519.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241015-1519.1)
7
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.2.0)
8
8
 
9
- Tue, 15 Oct 2024 15:24:15 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.1.0..@fluentui/react-carousel_v0.0.0-nightly-20241015-1519.1)
9
+ Tue, 15 Oct 2024 17:13:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.1.0..@fluentui/react-carousel_v9.2.0)
11
11
 
12
- ### Changes
12
+ ### Minor changes
13
13
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-aria to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
16
- - Bump @fluentui/react-button to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
18
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
22
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
23
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
24
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
14
+ - feat: Add fade motion to carousel as an optional prop ([PR #33000](https://github.com/microsoft/fluentui/pull/33000) by mifraser@microsoft.com)
15
+ - 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)
16
+ - Bump @fluentui/react-aria to v9.13.8 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
17
+ - Bump @fluentui/react-button to v9.3.94 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
18
+ - Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
19
+ - Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
20
+ - Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
21
+ - Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
22
+ - Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
23
+ - Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
25
24
 
26
25
  ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.1.0)
27
26
 
package/dist/index.d.ts CHANGED
@@ -158,6 +158,11 @@ export declare type CarouselIndexChangeData = EventData<'click' | 'focus', React
158
158
  index: number;
159
159
  };
160
160
 
161
+ /**
162
+ * List of integrated motion types
163
+ */
164
+ declare type CarouselMotion = 'slide' | 'fade';
165
+
161
166
  /**
162
167
  * Used to jump to a card based on index, using arrow navigation via Tabster.
163
168
  *
@@ -346,6 +351,11 @@ export declare type CarouselProps = ComponentProps<CarouselSlots> & {
346
351
  * Defaults to: False
347
352
  */
348
353
  whitespace?: boolean;
354
+ /**
355
+ * Sets motion to fade in/out style with minimal movement
356
+ * Defaults: false
357
+ */
358
+ motion?: CarouselMotion;
349
359
  /**
350
360
  * Localizes the string used to announce carousel page changes
351
361
  * Defaults to: undefined
package/lib/components/Carousel/Carousel.types.js.map CHANGED
@@ -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
@@ -13,7 +13,7 @@ import { useAnnounce } from '@fluentui/react-shared-contexts';
13
13
  * @param ref - reference to root HTMLDivElement of Carousel
14
14
  */ export function useCarousel_unstable(props, ref) {
15
15
  'use no memo';
16
- const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement } = props;
16
+ const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
17
17
  const { dir } = useFluent();
18
18
  const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = useEmblaCarousel({
19
19
  align,
@@ -23,7 +23,8 @@ import { useAnnounce } from '@fluentui/react-shared-contexts';
23
23
  defaultActiveIndex: props.defaultActiveIndex,
24
24
  activeIndex: props.activeIndex,
25
25
  watchDrag: draggable,
26
- containScroll: whitespace ? false : 'keepSnaps'
26
+ containScroll: whitespace ? false : 'keepSnaps',
27
+ motion
27
28
  });
28
29
  const selectPageByElement = useEventCallback((event, element, jump)=>{
29
30
  const foundIndex = carouselApi.scrollToElement(element, jump);
package/lib/components/Carousel/useCarousel.js.map CHANGED
@@ -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":"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"}
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/useEmblaCarousel.js CHANGED
@@ -4,6 +4,7 @@ import * as React from 'react';
4
4
  import { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';
5
5
  import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';
6
6
  import Autoplay from 'embla-carousel-autoplay';
7
+ import Fade from 'embla-carousel-fade';
7
8
  const sliderClassname = `.${carouselSliderClassNames.root}`;
8
9
  const DEFAULT_EMBLA_OPTIONS = {
9
10
  containScroll: 'trimSnaps',
@@ -26,7 +27,7 @@ export function setTabsterDefault(element, isDefault) {
26
27
  }
27
28
  }
28
29
  export function useEmblaCarousel(options) {
29
- const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
30
+ const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
30
31
  const [activeIndex, setActiveIndex] = useControllableState({
31
32
  defaultState: options.defaultActiveIndex,
32
33
  state: options.activeIndex,
@@ -61,6 +62,27 @@ export function useEmblaCarousel(options) {
61
62
  }, [
62
63
  resetAutoplay
63
64
  ]);
65
+ const getPlugins = React.useCallback(()=>{
66
+ const plugins = [
67
+ Autoplay({
68
+ playOnInit: autoplayRef.current,
69
+ stopOnInteraction: !autoplayRef.current,
70
+ stopOnMouseEnter: true,
71
+ stopOnFocusIn: true,
72
+ rootNode: (emblaRoot)=>{
73
+ var _emblaRoot_querySelector;
74
+ return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
75
+ }
76
+ })
77
+ ];
78
+ // Optionally add Fade plugin
79
+ if (motion === 'fade') {
80
+ plugins.push(Fade());
81
+ }
82
+ return plugins;
83
+ }, [
84
+ motion
85
+ ]);
64
86
  // Listeners contains callbacks for UI elements that may require state update based on embla changes
65
87
  const listeners = React.useRef(new Set());
66
88
  const subscribeForValues = React.useCallback((listener)=>{
@@ -116,6 +138,7 @@ export function useEmblaCarousel(options) {
116
138
  }));
117
139
  });
118
140
  };
141
+ const plugins = getPlugins();
119
142
  return {
120
143
  set current (newElement){
121
144
  if (currentElement) {
@@ -131,18 +154,7 @@ export function useEmblaCarousel(options) {
131
154
  emblaApi.current = EmblaCarousel(newElement, {
132
155
  ...DEFAULT_EMBLA_OPTIONS,
133
156
  ...emblaOptions.current
134
- }, [
135
- Autoplay({
136
- playOnInit: autoplayRef.current,
137
- stopOnInteraction: !autoplayRef.current,
138
- stopOnMouseEnter: true,
139
- stopOnFocusIn: true,
140
- rootNode: (emblaRoot)=>{
141
- var _emblaRoot_querySelector;
142
- return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
143
- }
144
- })
145
- ]);
157
+ }, plugins);
146
158
  (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
147
159
  (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
148
160
  (_emblaApi_current6 = emblaApi.current) === null || _emblaApi_current6 === void 0 ? void 0 : _emblaApi_current6.on('select', handleIndexChange);
@@ -150,6 +162,7 @@ export function useEmblaCarousel(options) {
150
162
  }
151
163
  };
152
164
  }, [
165
+ getPlugins,
153
166
  setActiveIndex
154
167
  ]);
155
168
  const carouselApi = React.useMemo(()=>({
@@ -197,6 +210,7 @@ export function useEmblaCarousel(options) {
197
210
  ]);
198
211
  React.useEffect(()=>{
199
212
  var _emblaApi_current;
213
+ const plugins = getPlugins();
200
214
  emblaOptions.current = {
201
215
  align,
202
216
  direction,
@@ -208,25 +222,15 @@ export function useEmblaCarousel(options) {
208
222
  (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
209
223
  ...DEFAULT_EMBLA_OPTIONS,
210
224
  ...emblaOptions.current
211
- }, [
212
- Autoplay({
213
- playOnInit: autoplayRef.current,
214
- stopOnInteraction: !autoplayRef.current,
215
- stopOnMouseEnter: true,
216
- stopOnFocusIn: true,
217
- rootNode: (emblaRoot)=>{
218
- var _emblaRoot_querySelector;
219
- return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
220
- }
221
- })
222
- ]);
225
+ }, plugins);
223
226
  }, [
224
227
  align,
225
228
  direction,
226
229
  loop,
227
230
  slidesToScroll,
228
231
  watchDrag,
229
- containScroll
232
+ containScroll,
233
+ getPlugins
230
234
  ]);
231
235
  return {
232
236
  activeIndex,
package/lib/components/useEmblaCarousel.js.map CHANGED
@@ -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":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,OAAOC,mBAAsE,iBAAiB;AAC9F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,8CAA8C;AACrF,SAASC,wBAAwB,QAAQ,kDAAkD;AAE3F,OAAOC,cAAc,0BAA0B;AAE/C,MAAMC,kBAAkB,CAAC,CAAC,EAAEF,yBAAyBG,IAAI,CAAC,CAAC;AAE3D,MAAMC,wBAA0C;IAC9CC,eAAe;IACfC,iBAAiB;IACjBC,WAAW;IACXC,WAAW;IAEXC,WAAWP;IACXQ,QAAQ,CAAC,CAAC,EAAEX,uBAAuBI,IAAI,CAAC,CAAC;AAC3C;AAEA,OAAO,MAAMQ,yBAAyB,yBAAyB;AAE/D,OAAO,SAASC,kBAAkBC,OAAgB,EAAEC,SAAkB;IACpE,MAAMC,cAAcF,QAAQG,YAAY,CAAC;IAEzC,IAAID,aAAa;QACf,MAAME,oBAAoBC,KAAKC,KAAK,CAACJ;QACrC,IAAIE,kBAAkBG,SAAS,EAAE;YAC/B,sDAAsD;YACtDH,kBAAkBG,SAAS,CAACN,SAAS,GAAGA;YACxCD,QAAQQ,YAAY,CAAC,gBAAgBH,KAAKI,SAAS,CAACL;QACtD;IACF;AACF;AAEA,OAAO,SAASM,iBACdC,OAGC;IAED,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,IAAI,EAAEC,cAAc,EAAErB,SAAS,EAAEF,aAAa,EAAE,GAAGmB;IAC7E,MAAM,CAACK,aAAaC,eAAe,GAAGlC,qBAAqB;QACzDmC,cAAcP,QAAQQ,kBAAkB;QACxCC,OAAOT,QAAQK,WAAW;QAC1BK,cAAc;IAChB;IAEA,MAAMC,eAAerC,MAAMsC,MAAM,CAAmB;QAClDX;QACAC;QACAC;QACAC;QACAS,YAAYR;QACZtB;QACAF;IACF;IAEA,MAAMiC,WAAWxC,MAAMsC,MAAM,CAA2B;IACxD,MAAMG,cAAczC,MAAMsC,MAAM,CAAU;IAE1C,MAAMI,gBAAgB1C,MAAM2C,WAAW,CAAC;YACtCH;SAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,CAACC,KAAK;IAC5C,GAAG,EAAE;IAEL,gHAAgH,GAChH,MAAMC,iBAAiBhD,MAAM2C,WAAW,CACtC,CAACG;QACCL,YAAYG,OAAO,GAAGE;QACtB,IAAIA,UAAU;gBACZN;aAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,OAAO,GAAGC,QAAQ,CAACG,IAAI;YACzC,8EAA8E;YAC9EP;QACF,OAAO;gBACLF;aAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBK,OAAO,GAAGC,QAAQ,CAACI,IAAI;QAC3C;IACF,GACA;QAACR;KAAc;IAGjB,oGAAoG;IACpG,MAAMS,YAAYnD,MAAMsC,MAAM,CAAC,IAAIc;IACnC,MAAMC,qBAAqBrD,MAAM2C,WAAW,CAAC,CAACW;QAC5CH,UAAUP,OAAO,CAACW,GAAG,CAACD;QAEtB,OAAO;YACLH,UAAUP,OAAO,CAACY,MAAM,CAACF;QAC3B;IACF,GAAG,EAAE;IAEL,MAAMG,eAAgDzD,MAAM0D,OAAO,CAAC;QAClE,IAAIC,iBAAwC;QAE5C,MAAMC,oBAAoB;gBACPpB,mBACFA,oBACKA;gBAFHA;YAAjB,MAAMqB,WAAWrB,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBsB,kBAAkB,gBAApCtB,kDAAAA,uCAA0C;YAC3D,MAAM5B,UAAS4B,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBuB,UAAU;gBACvBvB;YAApB,MAAMwB,cAAcxB,CAAAA,4DAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByB,cAAc,GAAGC,aAAa,CAACL,SAAS,CAAC,EAAE,cAA7DrB,sEAAAA,2DAAiE;YACrF,oFAAoF;YACpF5B,mBAAAA,6BAAAA,OAAQuD,OAAO,CAAC,CAACC,OAAOC;gBACtBvD,kBAAkBsD,OAAOC,eAAeL;YAC1C;YACAhC,eAAe6B;QACjB;QACA,MAAMS,eAAe;gBACU9B,mBACMA,oBAKpBA;gBANcA;YAA7B,MAAM+B,QAAuB/B,CAAAA,gCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBuB,UAAU,gBAA5BvB,0CAAAA,+BAAkC,EAAE;gBAC9BA;YAAnC,MAAMgC,iBAA6BhC,CAAAA,kDAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByB,cAAc,GAAGC,aAAa,cAAhD1B,4DAAAA,iDAAoD,EAAE;YACzF,MAAMiC,gBAAgBD,eAAeE,MAAM,GAAG,IAAIF,eAAeE,MAAM,GAAGH,MAAMG,MAAM;gBAIvElC;YAFf,MAAMmC,OAA2B;gBAC/BF;gBACA1C,aAAaS,CAAAA,wCAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBsB,kBAAkB,gBAApCtB,kDAAAA,uCAA0C;gBACvDgC;gBACAT,YAAYQ;YACd;YAEA,KAAK,MAAMjB,YAAYH,UAAUP,OAAO,CAAE;gBACxCU,SAASqB;YACX;QACF;QACA,MAAMC,yBAAyB;gBACRpC,mBACEA;YADvB,MAAMqC,gBAAerC,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBuB,UAAU;gBAC1BvB;YAAvB,MAAMsC,iBAAiBtC,CAAAA,kCAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBuC,YAAY,gBAA9BvC,4CAAAA,iCAAoC,EAAE;YAE7DqC,yBAAAA,mCAAAA,aAAcV,OAAO,CAAC,CAACa,aAAaC;gBAClCD,YAAYE,aAAa,CACvB,IAAIC,YAA2CtE,wBAAwB;oBACrEuE,SAAS;oBACTC,QAAQ;wBAAEC,WAAWR,eAAeS,QAAQ,CAACN;oBAAO;gBACtD;YAEJ;QACF;QAEA,OAAO;YACL,IAAIrC,SAAQ4C,WAAmC;gBAC7C,IAAI7B,gBAAgB;wBAClBnB,mBACAA,oBACAA,oBACAA;qBAHAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBiD,GAAG,CAAC,gBAAgBb;qBACtCpC,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBiD,GAAG,CAAC,UAAU7B;qBAChCpB,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBiD,GAAG,CAAC,UAAUnB;qBAChC9B,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBkD,OAAO;gBAC3B;gBAEA,IAAIF,YAAY;wBAqBdhD,oBACAA,oBACAA;oBAtBAmB,iBAAiB6B;oBACjBhD,SAASI,OAAO,GAAG7C,cACjByF,YACA;wBACE,GAAGlF,qBAAqB;wBACxB,GAAG+B,aAAaO,OAAO;oBACzB,GACA;wBACEzC,SAAS;4BACPwF,YAAYlD,YAAYG,OAAO;4BAC/BgD,mBAAmB,CAACnD,YAAYG,OAAO;4BACvCiD,kBAAkB;4BAClBC,eAAe;4BACfC,UAAU,CAACC;oCACFA;gCAAP,OAAOA,CAAAA,2BAAAA,UAAUC,aAAa,CAAC7F,8BAAxB4F,sCAAAA,2BAA4CA;4BACrD;wBACF;qBACD;qBAGHxD,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB0D,EAAE,CAAC,UAAU5B;qBAC/B9B,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB0D,EAAE,CAAC,gBAAgBtB;qBACrCpC,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkB0D,EAAE,CAAC,UAAUtC;gBACjC;YACF;QACF;IACF,GAAG;QAAC5B;KAAe;IAEnB,MAAMmE,cAAcnG,MAAM0D,OAAO,CAC/B,IAAO,CAAA;YACL0C,iBAAiB,CAACrF,SAAsBsF;oBACjB7D,mBACEA,oBAMvBA;gBAPA,MAAMqC,gBAAerC,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBuB,UAAU;oBAC1BvB;gBAAvB,MAAMgC,iBAAiBhC,CAAAA,kDAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByB,cAAc,GAAGC,aAAa,cAAhD1B,4DAAAA,iDAAoD,EAAE;oBAC3DqC;gBAAlB,MAAMyB,YAAYzB,CAAAA,wBAAAA,yBAAAA,mCAAAA,aAAc0B,OAAO,CAACxF,sBAAtB8D,mCAAAA,wBAAkC;gBACpD,MAAM2B,aAAahC,eAAeiC,SAAS,CAACC,CAAAA;oBAC1C,OAAOA,MAAMnB,QAAQ,CAACe;gBACxB;gBACA,MAAMK,aAAaH,uBAAAA,wBAAAA,aAAcF;iBACjC9D,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBoE,QAAQ,CAACD,YAAYN;gBAEvC,OAAOM;YACT;YACAE,eAAe,CAAC5B,OAAeoB;oBAC7B7D;iBAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBoE,QAAQ,CAAC3B,OAAOoB;YACpC;YACAS,mBAAmB,CAACC;oBAOXvE;gBANP,IAAIuE,QAAQ,QAAQ;wBAClBvE;qBAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBwE,UAAU;gBAC9B,OAAO;wBACLxE;qBAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkByE,UAAU;gBAC9B;oBAEOzE;gBAAP,OAAOA,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBsB,kBAAkB,gBAApCtB,kDAAAA,uCAA0C;YACnD;QACF,CAAA,GACA,EAAE;IAGJxC,MAAMkH,SAAS,CAAC;YACa1E;YAAAA;QAA3B,MAAM2E,qBAAqB3E,CAAAA,wCAAAA,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBsB,kBAAkB,gBAApCtB,kDAAAA,uCAA0C;QAErE,IAAIT,gBAAgBoF,oBAAoB;gBACtC3E;aAAAA,qBAAAA,SAASI,OAAO,cAAhBJ,yCAAAA,mBAAkBoE,QAAQ,CAAC7E;QAC7B;IACF,GAAG;QAACA;KAAY;IAEhB/B,MAAMkH,SAAS,CAAC;YAEd1E;QADAH,aAAaO,OAAO,GAAG;YAAEjB;YAAOC;YAAWC;YAAMC;YAAgBrB;YAAWF;QAAc;SAC1FiC,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkB4E,MAAM,CACtB;YACE,GAAG9G,qBAAqB;YACxB,GAAG+B,aAAaO,OAAO;QACzB,GACA;YACEzC,SAAS;gBACPwF,YAAYlD,YAAYG,OAAO;gBAC/BgD,mBAAmB,CAACnD,YAAYG,OAAO;gBACvCiD,kBAAkB;gBAClBC,eAAe;gBACfC,UAAU,CAACC;wBACFA;oBAAP,OAAOA,CAAAA,2BAAAA,UAAUC,aAAa,CAAC7F,8BAAxB4F,sCAAAA,2BAA4CA;gBACrD;YACF;SACD;IAEL,GAAG;QAACrE;QAAOC;QAAWC;QAAMC;QAAgBrB;QAAWF;KAAc;IAErE,OAAO;QACLwB;QACAoE;QACA1C;QACAJ;QACAL;QACAN;IACF;AACF"}
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
@@ -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
@@ -15,7 +15,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
15
15
  const _useEmblaCarousel = require("../useEmblaCarousel");
16
16
  function useCarousel_unstable(props, ref) {
17
17
  'use no memo';
18
- const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement } = props;
18
+ const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
19
19
  const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
20
20
  const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
21
21
  align,
@@ -25,7 +25,8 @@ function useCarousel_unstable(props, ref) {
25
25
  defaultActiveIndex: props.defaultActiveIndex,
26
26
  activeIndex: props.activeIndex,
27
27
  watchDrag: draggable,
28
- containScroll: whitespace ? false : 'keepSnaps'
28
+ containScroll: whitespace ? false : 'keepSnaps',
29
+ motion
29
30
  });
30
31
  const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{
31
32
  const foundIndex = carouselApi.scrollToElement(element, jump);
package/lib-commonjs/components/Carousel/useCarousel.js.map CHANGED
@@ -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":"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"}
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/useEmblaCarousel.js CHANGED
@@ -27,6 +27,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
27
27
  const _useCarouselCardStylesstyles = require("./CarouselCard/useCarouselCardStyles.styles");
28
28
  const _useCarouselSliderStylesstyles = require("./CarouselSlider/useCarouselSliderStyles.styles");
29
29
  const _emblacarouselautoplay = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-autoplay"));
30
+ const _emblacarouselfade = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-fade"));
30
31
  const sliderClassname = `.${_useCarouselSliderStylesstyles.carouselSliderClassNames.root}`;
31
32
  const DEFAULT_EMBLA_OPTIONS = {
32
33
  containScroll: 'trimSnaps',
@@ -49,7 +50,7 @@ function setTabsterDefault(element, isDefault) {
49
50
  }
50
51
  }
51
52
  function useEmblaCarousel(options) {
52
- const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
53
+ const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
53
54
  const [activeIndex, setActiveIndex] = (0, _reactutilities.useControllableState)({
54
55
  defaultState: options.defaultActiveIndex,
55
56
  state: options.activeIndex,
@@ -84,6 +85,27 @@ function useEmblaCarousel(options) {
84
85
  }, [
85
86
  resetAutoplay
86
87
  ]);
88
+ const getPlugins = _react.useCallback(()=>{
89
+ const plugins = [
90
+ (0, _emblacarouselautoplay.default)({
91
+ playOnInit: autoplayRef.current,
92
+ stopOnInteraction: !autoplayRef.current,
93
+ stopOnMouseEnter: true,
94
+ stopOnFocusIn: true,
95
+ rootNode: (emblaRoot)=>{
96
+ var _emblaRoot_querySelector;
97
+ return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
98
+ }
99
+ })
100
+ ];
101
+ // Optionally add Fade plugin
102
+ if (motion === 'fade') {
103
+ plugins.push((0, _emblacarouselfade.default)());
104
+ }
105
+ return plugins;
106
+ }, [
107
+ motion
108
+ ]);
87
109
  // Listeners contains callbacks for UI elements that may require state update based on embla changes
88
110
  const listeners = _react.useRef(new Set());
89
111
  const subscribeForValues = _react.useCallback((listener)=>{
@@ -139,6 +161,7 @@ function useEmblaCarousel(options) {
139
161
  }));
140
162
  });
141
163
  };
164
+ const plugins = getPlugins();
142
165
  return {
143
166
  set current (newElement){
144
167
  if (currentElement) {
@@ -154,18 +177,7 @@ function useEmblaCarousel(options) {
154
177
  emblaApi.current = (0, _emblacarousel.default)(newElement, {
155
178
  ...DEFAULT_EMBLA_OPTIONS,
156
179
  ...emblaOptions.current
157
- }, [
158
- (0, _emblacarouselautoplay.default)({
159
- playOnInit: autoplayRef.current,
160
- stopOnInteraction: !autoplayRef.current,
161
- stopOnMouseEnter: true,
162
- stopOnFocusIn: true,
163
- rootNode: (emblaRoot)=>{
164
- var _emblaRoot_querySelector;
165
- return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
166
- }
167
- })
168
- ]);
180
+ }, plugins);
169
181
  (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
170
182
  (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
171
183
  (_emblaApi_current6 = emblaApi.current) === null || _emblaApi_current6 === void 0 ? void 0 : _emblaApi_current6.on('select', handleIndexChange);
@@ -173,6 +185,7 @@ function useEmblaCarousel(options) {
173
185
  }
174
186
  };
175
187
  }, [
188
+ getPlugins,
176
189
  setActiveIndex
177
190
  ]);
178
191
  const carouselApi = _react.useMemo(()=>({
@@ -220,6 +233,7 @@ function useEmblaCarousel(options) {
220
233
  ]);
221
234
  _react.useEffect(()=>{
222
235
  var _emblaApi_current;
236
+ const plugins = getPlugins();
223
237
  emblaOptions.current = {
224
238
  align,
225
239
  direction,
@@ -231,25 +245,15 @@ function useEmblaCarousel(options) {
231
245
  (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.reInit({
232
246
  ...DEFAULT_EMBLA_OPTIONS,
233
247
  ...emblaOptions.current
234
- }, [
235
- (0, _emblacarouselautoplay.default)({
236
- playOnInit: autoplayRef.current,
237
- stopOnInteraction: !autoplayRef.current,
238
- stopOnMouseEnter: true,
239
- stopOnFocusIn: true,
240
- rootNode: (emblaRoot)=>{
241
- var _emblaRoot_querySelector;
242
- return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
243
- }
244
- })
245
- ]);
248
+ }, plugins);
246
249
  }, [
247
250
  align,
248
251
  direction,
249
252
  loop,
250
253
  slidesToScroll,
251
254
  watchDrag,
252
- containScroll
255
+ containScroll,
256
+ getPlugins
253
257
  ]);
254
258
  return {
255
259
  activeIndex,
package/lib-commonjs/components/useEmblaCarousel.js.map CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-carousel",
3
- "version": "0.0.0-nightly-20241015-1519.1",
3
+ "version": "9.2.0",
4
4
  "description": "A composable carousel component that enables pagination with minimal rerenders",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -29,25 +29,26 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@fluentui/eslint-plugin": "*",
32
- "@fluentui/react-conformance": "0.0.0-nightly-20241015-1519.1",
33
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241015-1519.1",
32
+ "@fluentui/react-conformance": "*",
33
+ "@fluentui/react-conformance-griffel": "*",
34
34
  "@fluentui/scripts-api-extractor": "*",
35
35
  "@fluentui/scripts-tasks": "*"
36
36
  },
37
37
  "dependencies": {
38
- "@fluentui/react-aria": "0.0.0-nightly-20241015-1519.1",
39
- "@fluentui/react-button": "0.0.0-nightly-20241015-1519.1",
40
- "@fluentui/react-context-selector": "0.0.0-nightly-20241015-1519.1",
38
+ "@fluentui/react-aria": "^9.13.8",
39
+ "@fluentui/react-button": "^9.3.94",
40
+ "@fluentui/react-context-selector": "^9.1.68",
41
41
  "@fluentui/react-icons": "^2.0.245",
42
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241015-1519.1",
43
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20241015-1519.1",
44
- "@fluentui/react-tabster": "0.0.0-nightly-20241015-1519.1",
45
- "@fluentui/react-theme": "0.0.0-nightly-20241015-1519.1",
46
- "@fluentui/react-utilities": "0.0.0-nightly-20241015-1519.1",
42
+ "@fluentui/react-jsx-runtime": "^9.0.45",
43
+ "@fluentui/react-shared-contexts": "^9.20.2",
44
+ "@fluentui/react-tabster": "^9.22.9",
45
+ "@fluentui/react-theme": "^9.1.21",
46
+ "@fluentui/react-utilities": "^9.18.16",
47
47
  "@griffel/react": "^1.5.22",
48
48
  "@swc/helpers": "^0.5.1",
49
49
  "embla-carousel": "^8.3.0",
50
- "embla-carousel-autoplay": "^8.3.0"
50
+ "embla-carousel-autoplay": "^8.3.0",
51
+ "embla-carousel-fade": "^8.3.0"
51
52
  },
52
53
  "peerDependencies": {
53
54
  "@types/react": ">=16.14.0 <19.0.0",
@@ -64,5 +65,10 @@
64
65
  },
65
66
  "./package.json": "./package.json"
66
67
  },
67
- "beachball": {}
68
+ "beachball": {
69
+ "disallowedChangeTypes": [
70
+ "major",
71
+ "prerelease"
72
+ ]
73
+ }
68
74
  }