@fluentui/react-carousel 0.0.0-nightly-20241211-0405.1 → 0.0.0-nightly-20241212-0406.1

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 (10) hide show
  1. package/CHANGELOG.md +14 -14
  2. package/lib/components/CarouselNav/useCarouselNav.js +8 -3
  3. package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
  4. package/lib/components/useEmblaCarousel.js +16 -9
  5. package/lib/components/useEmblaCarousel.js.map +1 -1
  6. package/lib-commonjs/components/CarouselNav/useCarouselNav.js +7 -3
  7. package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map +1 -1
  8. package/lib-commonjs/components/useEmblaCarousel.js +16 -9
  9. package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
  10. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,27 +1,27 @@
1
1
  # Change Log - @fluentui/react-carousel
2
2
 
3
- This log was last generated on Wed, 11 Dec 2024 04:09:59 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 12 Dec 2024 04:10:30 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20241211-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241211-0405.1)
7
+ ## [0.0.0-nightly-20241212-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241212-0406.1)
8
8
 
9
- Wed, 11 Dec 2024 04:09:59 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.2..@fluentui/react-carousel_v0.0.0-nightly-20241211-0405.1)
9
+ Thu, 12 Dec 2024 04:10:30 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.2..@fluentui/react-carousel_v0.0.0-nightly-20241212-0406.1)
11
11
 
12
12
  ### Changes
13
13
 
14
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-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
16
- - Bump @fluentui/react-button to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
18
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
22
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
23
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
24
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
15
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
16
+ - Bump @fluentui/react-button to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
18
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
20
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
21
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
22
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
23
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
24
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
25
25
 
26
26
  ## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.2)
27
27
 
package/lib/components/CarouselNav/useCarouselNav.js CHANGED
@@ -2,6 +2,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
2
2
  import { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
3
3
  import * as React from 'react';
4
4
  import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
5
+ import { useControllableState } from '@fluentui/react-utilities';
5
6
  /**
6
7
  * Create the state required to render CarouselNav.
7
8
  *
@@ -19,15 +20,19 @@ import { useCarouselContext_unstable as useCarouselContext } from '../CarouselCo
19
20
  // eslint-disable-next-line @typescript-eslint/naming-convention
20
21
  unstable_hasDefault: true
21
22
  });
22
- var _props_totalSlides;
23
- const [totalSlides, setTotalSlides] = React.useState((_props_totalSlides = props.totalSlides) !== null && _props_totalSlides !== void 0 ? _props_totalSlides : 0);
23
+ // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
24
+ const [totalSlides, setTotalSlides] = useControllableState({
25
+ state: props.totalSlides,
26
+ initialState: 0
27
+ });
24
28
  const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
25
29
  useIsomorphicLayoutEffect(()=>{
26
30
  return subscribeForValues((data)=>{
27
31
  setTotalSlides(data.navItemsCount);
28
32
  });
29
33
  }, [
30
- subscribeForValues
34
+ subscribeForValues,
35
+ setTotalSlides
31
36
  ]);
32
37
  return {
33
38
  totalSlides,
package/lib/components/CarouselNav/useCarouselNav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const [totalSlides, setTotalSlides] = React.useState(props.totalSlides ?? 0);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","useState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,yBAAyB,QAAQ,4BAA4B;AACtG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBX,wBAAwB;QACjDY,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;QAEqDP;IAArD,MAAM,CAACQ,aAAaC,eAAe,GAAGb,MAAMc,QAAQ,CAACV,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqB;IAC1E,MAAMW,qBAAqBb,mBAAmBc,CAAAA,MAAOA,IAAID,kBAAkB;IAE3EhB,0BAA0B;QACxB,OAAOgB,mBAAmBE,CAAAA;YACxBJ,eAAeI,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;KAAmB;IAEvB,OAAO;QACLH;QACAN;QACAa,iBAAiBf,MAAMgB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9BQ;YACAmB,MAAM;YACN,GAAGpB,KAAK;YACR,GAAGG,kBAAkB;YACrBa,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,yBAAyB,QAAQ,4BAA4B;AACtG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBZ,wBAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,GAAGX,qBAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,qBAAqBf,mBAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,0BAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,KAAK2B,MAAM,CACf5B,yBAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
package/lib/components/useEmblaCarousel.js CHANGED
@@ -106,6 +106,19 @@ export function useEmblaCarousel(options) {
106
106
  listeners.current.delete(listener);
107
107
  };
108
108
  }, []);
109
+ const updateIndex = ()=>{
110
+ var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
111
+ var _emblaApi_current_selectedScrollSnap;
112
+ const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
113
+ const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
114
+ var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
115
+ const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
116
+ // We set the first card in the current group as the default tabster index for focus capture
117
+ slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
118
+ setTabsterDefault(slide, slideIndex === actualIndex);
119
+ });
120
+ setActiveIndex(newIndex);
121
+ };
109
122
  const handleReinit = useEventCallback(()=>{
110
123
  var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
111
124
  var _emblaApi_current_slideNodes;
@@ -120,23 +133,17 @@ export function useEmblaCarousel(options) {
120
133
  groupIndexList,
121
134
  slideNodes: nodes
122
135
  };
136
+ updateIndex();
123
137
  (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.scrollTo(activeIndex, false);
124
138
  for (const listener of listeners.current){
125
139
  listener(data);
126
140
  }
127
141
  });
128
142
  const handleIndexChange = useEventCallback((_, eventType)=>{
129
- var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
143
+ var _emblaApi_current;
130
144
  var _emblaApi_current_selectedScrollSnap;
131
145
  const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
132
- const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
133
- var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
134
- const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
135
- // We set the active or first index of group on-screen as the selected tabster index
136
- slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
137
- setTabsterDefault(slide, slideIndex === actualIndex);
138
- });
139
- setActiveIndex(newIndex);
146
+ updateIndex();
140
147
  if (eventType === 'autoplay:select') {
141
148
  const noopEvent = new Event('autoplay');
142
149
  onAutoplayIndexChange === null || onAutoplayIndexChange === void 0 ? void 0 : onAutoplayIndexChange(noopEvent, {
package/lib/components/useEmblaCarousel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n defaultActiveIndex: number | undefined;\n activeIndex: number | undefined;\n motion?: CarouselMotion;\n onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n },\n) {\n const {\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motion, onDragEvent, watchDrag]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n };\n\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","handleReinit","nodes","slideNodes","groupIndexList","internalEngine","slideRegistry","navItemsCount","length","data","selectedScrollSnap","scrollTo","handleIndexChange","_","eventType","newIndex","actualIndex","forEach","slide","slideIndex","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n defaultActiveIndex: number | undefined;\n activeIndex: number | undefined;\n motion?: CarouselMotion;\n onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n },\n) {\n const {\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motion, onDragEvent, watchDrag]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n };\n\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/CarouselNav/useCarouselNav.js CHANGED
@@ -22,15 +22,19 @@ const useCarouselNav_unstable = (props, ref)=>{
22
22
  // eslint-disable-next-line @typescript-eslint/naming-convention
23
23
  unstable_hasDefault: true
24
24
  });
25
- var _props_totalSlides;
26
- const [totalSlides, setTotalSlides] = _react.useState((_props_totalSlides = props.totalSlides) !== null && _props_totalSlides !== void 0 ? _props_totalSlides : 0);
25
+ // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
26
+ const [totalSlides, setTotalSlides] = (0, _reactutilities.useControllableState)({
27
+ state: props.totalSlides,
28
+ initialState: 0
29
+ });
27
30
  const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
28
31
  (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
29
32
  return subscribeForValues((data)=>{
30
33
  setTotalSlides(data.navItemsCount);
31
34
  });
32
35
  }, [
33
- subscribeForValues
36
+ subscribeForValues,
37
+ setTotalSlides
34
38
  ]);
35
39
  return {
36
40
  totalSlides,
package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const [totalSlides, setTotalSlides] = React.useState(props.totalSlides ?? 0);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","React","useState","subscribeForValues","useCarouselContext","ctx","useIsomorphicLayoutEffect","data","navItemsCount","renderNavButton","children","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;8BAhB2B;gCACkC;iEACnD;iCAE2C;AAY3D,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;QAEqDR;IAArD,MAAM,CAACS,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACZ,CAAAA,qBAAAA,MAAMS,WAAW,AAAXA,MAAW,QAAjBT,uBAAAA,KAAAA,IAAAA,qBAAqB;IAC1E,MAAMa,qBAAqBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,kBAAkB;IAE3EG,IAAAA,yCAAAA,EAA0B;QACxB,OAAOH,mBAAmBI,CAAAA;YACxBP,eAAeO,KAAKC,aAAa;QACnC;IACF,GAAG;QAACL;KAAmB;IAEvB,OAAO;QACLJ;QACAP;QACAiB,iBAAiBnB,MAAMoB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BxB;YACAyB,MAAM;YACN,GAAG1B,KAAK;YACR,GAAGG,kBAAkB;YACrBiB,UAAU;QACZ,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["import { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","useArrowNavigationGroup","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","useControllableState","state","initialState","subscribeForValues","useCarouselContext","ctx","useIsomorphicLayoutEffect","data","navItemsCount","renderNavButton","children","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;8BAjB2B;gCACkC;iEACnD;iCAE2C;AAa3D,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,qBAAqBC,IAAAA,qCAAAA,EAAwB;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,GAAGC,IAAAA,oCAAAA,EAAqB;QACzDC,OAAOZ,MAAMS,WAAW;QACxBI,cAAc;IAChB;IAEA,MAAMC,qBAAqBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,kBAAkB;IAE3EG,IAAAA,yCAAAA,EAA0B;QACxB,OAAOH,mBAAmBI,CAAAA;YACxBR,eAAeQ,KAAKC,aAAa;QACnC;IACF,GAAG;QAACL;QAAoBJ;KAAe;IAEvC,OAAO;QACLD;QACAP;QACAkB,iBAAiBpB,MAAMqB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BzB;YACA0B,MAAM;YACN,GAAG3B,KAAK;YACR,GAAGG,kBAAkB;YACrBkB,UAAU;QACZ,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
package/lib-commonjs/components/useEmblaCarousel.js CHANGED
@@ -128,6 +128,19 @@ function useEmblaCarousel(options) {
128
128
  listeners.current.delete(listener);
129
129
  };
130
130
  }, []);
131
+ const updateIndex = ()=>{
132
+ var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
133
+ var _emblaApi_current_selectedScrollSnap;
134
+ const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
135
+ const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
136
+ var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
137
+ const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
138
+ // We set the first card in the current group as the default tabster index for focus capture
139
+ slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
140
+ setTabsterDefault(slide, slideIndex === actualIndex);
141
+ });
142
+ setActiveIndex(newIndex);
143
+ };
131
144
  const handleReinit = (0, _reactutilities.useEventCallback)(()=>{
132
145
  var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
133
146
  var _emblaApi_current_slideNodes;
@@ -142,23 +155,17 @@ function useEmblaCarousel(options) {
142
155
  groupIndexList,
143
156
  slideNodes: nodes
144
157
  };
158
+ updateIndex();
145
159
  (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.scrollTo(activeIndex, false);
146
160
  for (const listener of listeners.current){
147
161
  listener(data);
148
162
  }
149
163
  });
150
164
  const handleIndexChange = (0, _reactutilities.useEventCallback)((_, eventType)=>{
151
- var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
165
+ var _emblaApi_current;
152
166
  var _emblaApi_current_selectedScrollSnap;
153
167
  const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
154
- const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
155
- var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
156
- const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
157
- // We set the active or first index of group on-screen as the selected tabster index
158
- slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
159
- setTabsterDefault(slide, slideIndex === actualIndex);
160
- });
161
- setActiveIndex(newIndex);
168
+ updateIndex();
162
169
  if (eventType === 'autoplay:select') {
163
170
  const noopEvent = new Event('autoplay');
164
171
  onAutoplayIndexChange === null || onAutoplayIndexChange === void 0 ? void 0 : onAutoplayIndexChange(noopEvent, {
package/lib-commonjs/components/useEmblaCarousel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n defaultActiveIndex: number | undefined;\n activeIndex: number | undefined;\n motion?: CarouselMotion;\n onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n },\n) {\n const {\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motion, onDragEvent, watchDrag]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n };\n\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","handleReinit","nodes","slideNodes","groupIndexList","internalEngine","slideRegistry","navItemsCount","length","data","selectedScrollSnap","scrollTo","handleIndexChange","_","eventType","newIndex","actualIndex","forEach","slide","slideIndex","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' | 'direction' | 'loop' | 'slidesToScroll' | 'watchDrag' | 'containScroll'> & {\n defaultActiveIndex: number | undefined;\n activeIndex: number | undefined;\n motion?: CarouselMotion;\n onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n },\n) {\n const {\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motion, onDragEvent, watchDrag]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n };\n\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-carousel",
3
- "version": "0.0.0-nightly-20241211-0405.1",
3
+ "version": "0.0.0-nightly-20241212-0406.1",
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",
@@ -19,21 +19,21 @@
19
19
  "license": "MIT",
20
20
  "devDependencies": {
21
21
  "@fluentui/eslint-plugin": "*",
22
- "@fluentui/react-conformance": "0.0.0-nightly-20241211-0405.1",
23
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241211-0405.1",
22
+ "@fluentui/react-conformance": "0.0.0-nightly-20241212-0406.1",
23
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241212-0406.1",
24
24
  "@fluentui/scripts-api-extractor": "*",
25
25
  "@fluentui/scripts-cypress": "*"
26
26
  },
27
27
  "dependencies": {
28
- "@fluentui/react-aria": "0.0.0-nightly-20241211-0405.1",
29
- "@fluentui/react-button": "0.0.0-nightly-20241211-0405.1",
30
- "@fluentui/react-context-selector": "0.0.0-nightly-20241211-0405.1",
28
+ "@fluentui/react-aria": "0.0.0-nightly-20241212-0406.1",
29
+ "@fluentui/react-button": "0.0.0-nightly-20241212-0406.1",
30
+ "@fluentui/react-context-selector": "0.0.0-nightly-20241212-0406.1",
31
31
  "@fluentui/react-icons": "^2.0.245",
32
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241211-0405.1",
33
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20241211-0405.1",
34
- "@fluentui/react-tabster": "0.0.0-nightly-20241211-0405.1",
35
- "@fluentui/react-theme": "0.0.0-nightly-20241211-0405.1",
36
- "@fluentui/react-utilities": "0.0.0-nightly-20241211-0405.1",
32
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241212-0406.1",
33
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20241212-0406.1",
34
+ "@fluentui/react-tabster": "0.0.0-nightly-20241212-0406.1",
35
+ "@fluentui/react-theme": "0.0.0-nightly-20241212-0406.1",
36
+ "@fluentui/react-utilities": "0.0.0-nightly-20241212-0406.1",
37
37
  "@griffel/react": "^1.5.22",
38
38
  "@swc/helpers": "^0.5.1",
39
39
  "embla-carousel": "^8.5.1",