@fluentui/react-carousel 9.6.6 → 9.6.7
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.
- package/CHANGELOG.md +16 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/Carousel/Carousel.types.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButton.js +6 -1
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +12 -9
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib/components/useEmblaCarousel.js +6 -4
- package/lib/components/useEmblaCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/Carousel.types.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js +6 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +13 -11
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/useEmblaCarousel.js +6 -4
- package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-carousel
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 14 May 2025 18:45:44 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.6.7)
|
|
8
|
+
|
|
9
|
+
Wed, 14 May 2025 18:45:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.6.6..@fluentui/react-carousel_v9.6.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- bug: Fix branded carousel nav button colors to be WCAG contrast compliant ([PR #34397](https://github.com/microsoft/fluentui/pull/34397) by mifraser@microsoft.com)
|
|
15
|
+
- fix: Ensure buttons are disabled when not enough content for circular ([PR #34427](https://github.com/microsoft/fluentui/pull/34427) by mifraser@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-aria to v9.14.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
|
|
17
|
+
- Bump @fluentui/react-button to v9.4.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tooltip to v9.6.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.24.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.6.6)
|
|
8
22
|
|
|
9
|
-
Thu, 24 Apr 2025 09:
|
|
23
|
+
Thu, 24 Apr 2025 09:59:45 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.6.5..@fluentui/react-carousel_v9.6.6)
|
|
11
25
|
|
|
12
26
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -459,6 +459,10 @@ declare interface CarouselUpdateData {
|
|
|
459
459
|
* An array of the card DOM elements after render
|
|
460
460
|
*/
|
|
461
461
|
slideNodes: HTMLElement[];
|
|
462
|
+
/**
|
|
463
|
+
* Whether the carousel has enough cards present to enable looping without issues.
|
|
464
|
+
*/
|
|
465
|
+
canLoop?: boolean;
|
|
462
466
|
}
|
|
463
467
|
|
|
464
468
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultActiveIndex?: number;\n\n /**\n * The alignment of the carousel.\n */\n align?: 'center' | 'start' | 'end';\n\n /**\n * The value of the currently active page.\n */\n activeIndex?: number;\n\n /**\n * Callback to notify a page change.\n */\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /**\n * Circular enables the carousel to loop back around on navigation past trailing index.\n */\n circular?: boolean;\n\n /**\n * Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n */\n groupSize?: number | 'auto';\n\n /**\n * Enables drag to scroll on carousel items.\n * Defaults to: False\n */\n draggable?: boolean;\n\n /**\n * Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n */\n whitespace?: boolean;\n\n /**\n * Sets motion type as either 'slide' or 'fade'\n * Defaults: 'slide'\n *\n * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * Note: Duration is not in milliseconds because Carousel uses an\n * attraction physics simulation when scrolling instead of easings.\n * Only values between 20-60 are recommended, 25 is the default.\n */\n motion?: CarouselMotion;\n\n /**\n * Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n */\n announcement?: CarouselAnnouncerFunction;\n\n /**\n * Choose a delay between autoplay transitions in milliseconds.\n * Only active if Autoplay is enabled via CarouselAutoplayButton\n *\n * Defaults: 4000\n */\n autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n /**\n * The current carousel index, a change in index will not trigger the callback (use context index instead).\n */\n activeIndex: number;\n /**\n * The total number of slides to be navigated, accounts for grouping.\n */\n navItemsCount: number;\n /**\n * A breakdown of the card indexes contained within each slide index.\n */\n groupIndexList: number[][];\n /**\n * An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAuGA;;CAEC,GACD,
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultActiveIndex?: number;\n\n /**\n * The alignment of the carousel.\n */\n align?: 'center' | 'start' | 'end';\n\n /**\n * The value of the currently active page.\n */\n activeIndex?: number;\n\n /**\n * Callback to notify a page change.\n */\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /**\n * Circular enables the carousel to loop back around on navigation past trailing index.\n */\n circular?: boolean;\n\n /**\n * Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n */\n groupSize?: number | 'auto';\n\n /**\n * Enables drag to scroll on carousel items.\n * Defaults to: False\n */\n draggable?: boolean;\n\n /**\n * Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n */\n whitespace?: boolean;\n\n /**\n * Sets motion type as either 'slide' or 'fade'\n * Defaults: 'slide'\n *\n * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * Note: Duration is not in milliseconds because Carousel uses an\n * attraction physics simulation when scrolling instead of easings.\n * Only values between 20-60 are recommended, 25 is the default.\n */\n motion?: CarouselMotion;\n\n /**\n * Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n */\n announcement?: CarouselAnnouncerFunction;\n\n /**\n * Choose a delay between autoplay transitions in milliseconds.\n * Only active if Autoplay is enabled via CarouselAutoplayButton\n *\n * Defaults: 4000\n */\n autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n /**\n * The current carousel index, a change in index will not trigger the callback (use context index instead).\n */\n activeIndex: number;\n /**\n * The total number of slides to be navigated, accounts for grouping.\n */\n navItemsCount: number;\n /**\n * A breakdown of the card indexes contained within each slide index.\n */\n groupIndexList: number[][];\n /**\n * An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n /**\n * Whether the carousel has enough cards present to enable looping without issues.\n */\n canLoop?: boolean;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAuGA;;CAEC,GACD,WAqBC"}
|
|
@@ -20,12 +20,13 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
20
20
|
const { dir } = useFluent();
|
|
21
21
|
const buttonRef = React.useRef();
|
|
22
22
|
const circular = useCarouselContext((ctx)=>ctx.circular);
|
|
23
|
+
const [canLoop, setCanLoop] = React.useState(circular);
|
|
23
24
|
const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
|
|
24
25
|
const selectPageByDirection = useCarouselContext((ctx)=>ctx.selectPageByDirection);
|
|
25
26
|
const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
|
|
26
27
|
const resetAutoplay = useCarouselContext((ctx)=>ctx.resetAutoplay);
|
|
27
28
|
const isTrailing = useCarouselContext((ctx)=>{
|
|
28
|
-
if (circular) {
|
|
29
|
+
if (circular && canLoop) {
|
|
29
30
|
return false;
|
|
30
31
|
}
|
|
31
32
|
if (navType === 'prev') {
|
|
@@ -57,6 +58,10 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
57
58
|
};
|
|
58
59
|
useIsomorphicLayoutEffect(()=>{
|
|
59
60
|
return subscribeForValues((data)=>{
|
|
61
|
+
if (data.canLoop !== undefined) {
|
|
62
|
+
// Only update canLoop if it has been defined by the carousel engine
|
|
63
|
+
setCanLoop(data.canLoop);
|
|
64
|
+
}
|
|
60
65
|
setTotalSlides(data.navItemsCount);
|
|
61
66
|
});
|
|
62
67
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["import { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next' } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>();\n const circular = useCarouselContext(ctx => ctx.circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...props,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","circular","ctx","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["import { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next' } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>();\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...props,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","circular","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","undefined","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -89,7 +89,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
89
89
|
dm238s: 0,
|
|
90
90
|
B6xbmo0: 0,
|
|
91
91
|
B3whbx2: "f2krc9w",
|
|
92
|
-
Bp15pi3: "
|
|
92
|
+
Bp15pi3: "f7x02et",
|
|
93
93
|
Bay5ve9: "f1ry2q4s",
|
|
94
94
|
Bni0232: "f1e9f9ku"
|
|
95
95
|
},
|
|
@@ -141,15 +141,18 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
141
141
|
Bni0232: "f1gxfet"
|
|
142
142
|
},
|
|
143
143
|
brand: {
|
|
144
|
-
Bjyk6c5: "
|
|
144
|
+
Bjyk6c5: "fnrv5e1",
|
|
145
145
|
Bp15pi3: "fjsqi2x",
|
|
146
|
-
Glksuk: "
|
|
146
|
+
Glksuk: "frrwqtn",
|
|
147
147
|
Bay5ve9: "f9atwx8",
|
|
148
|
-
Blzl0y7: "
|
|
148
|
+
Blzl0y7: "fmmpig5",
|
|
149
149
|
Bni0232: "f1e9f9ku"
|
|
150
150
|
},
|
|
151
151
|
unselectedBrand: {
|
|
152
|
-
Bp15pi3: "f7x02et"
|
|
152
|
+
Bp15pi3: "f7x02et",
|
|
153
|
+
Bjyk6c5: "f1w4p7kh",
|
|
154
|
+
Bay5ve9: "f1ry2q4s",
|
|
155
|
+
Bni0232: "f1e9f9ku"
|
|
153
156
|
}
|
|
154
157
|
}, {
|
|
155
158
|
d: [".f1k6fduh{cursor:pointer;}", ".fc5wo7j{pointer-events:all;}", ".f1van5z7{width:var(--spacingHorizontalS);}", ".f1fkmctz{height:var(--spacingVerticalS);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
@@ -166,7 +169,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
166
169
|
p: -1
|
|
167
170
|
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
168
171
|
p: -1
|
|
169
|
-
}], ".
|
|
172
|
+
}], ".f7x02et::after{opacity:0.6;}", ".f1eh74fx{width:var(--spacingHorizontalL);}", [".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}", {
|
|
170
173
|
p: -1
|
|
171
174
|
}], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
|
|
172
175
|
p: -1
|
|
@@ -178,7 +181,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
178
181
|
p: -1
|
|
179
182
|
}], ".f1v6lwa2::after{width:var(--spacingHorizontalL);}", [".fgm6wgx::after{border-radius:4px;}", {
|
|
180
183
|
p: -1
|
|
181
|
-
}], ".
|
|
184
|
+
}], ".fnrv5e1::after{background-color:var(--colorCompoundBrandBackground);}", ".fjsqi2x::after{opacity:1;}"],
|
|
182
185
|
m: [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
|
|
183
186
|
m: "(forced-colors: active)"
|
|
184
187
|
}], ["@media (forced-colors: active){.f1agqfpv::after{background-color:white;}}", {
|
|
@@ -186,8 +189,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
186
189
|
}], ["@media (forced-colors: active){.f6pnf7h::after{mix-blend-mode:difference;}}", {
|
|
187
190
|
m: "(forced-colors: active)"
|
|
188
191
|
}]],
|
|
189
|
-
h: [".f1ry2q4s:hover::after{opacity:0.75;}", ".
|
|
190
|
-
a: [".f1e9f9ku:active::after{opacity:1;}", ".f1gxfet:active::after{opacity:0.65;}", ".
|
|
192
|
+
h: [".f1ry2q4s:hover::after{opacity:0.75;}", ".frrwqtn:hover::after{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f9atwx8:hover::after{opacity:1;}"],
|
|
193
|
+
a: [".f1e9f9ku:active::after{opacity:1;}", ".f1gxfet:active::after{opacity:0.65;}", ".fmmpig5:active::after{background-color:var(--colorCompoundBrandBackgroundPressed);}"]
|
|
191
194
|
});
|
|
192
195
|
/**
|
|
193
196
|
* Apply styling to the CarouselNavButton slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -128,21 +128,23 @@ export function useEmblaCarousel(options) {
|
|
|
128
128
|
setActiveIndex(newIndex);
|
|
129
129
|
};
|
|
130
130
|
const handleReinit = useEventCallback(()=>{
|
|
131
|
-
var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
|
|
131
|
+
var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3, _emblaApi_current4;
|
|
132
132
|
var _emblaApi_current_slideNodes;
|
|
133
133
|
const nodes = (_emblaApi_current_slideNodes = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.slideNodes()) !== null && _emblaApi_current_slideNodes !== void 0 ? _emblaApi_current_slideNodes : [];
|
|
134
134
|
var _emblaApi_current_internalEngine_slideRegistry;
|
|
135
135
|
const groupIndexList = (_emblaApi_current_internalEngine_slideRegistry = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.internalEngine().slideRegistry) !== null && _emblaApi_current_internalEngine_slideRegistry !== void 0 ? _emblaApi_current_internalEngine_slideRegistry : [];
|
|
136
136
|
const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;
|
|
137
|
+
const canLoop = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideLooper.canLoop();
|
|
137
138
|
var _emblaApi_current_selectedScrollSnap;
|
|
138
139
|
const data = {
|
|
139
140
|
navItemsCount,
|
|
140
|
-
activeIndex: (_emblaApi_current_selectedScrollSnap = (
|
|
141
|
+
activeIndex: (_emblaApi_current_selectedScrollSnap = (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0,
|
|
141
142
|
groupIndexList,
|
|
142
|
-
slideNodes: nodes
|
|
143
|
+
slideNodes: nodes,
|
|
144
|
+
canLoop
|
|
143
145
|
};
|
|
144
146
|
updateIndex();
|
|
145
|
-
(
|
|
147
|
+
(_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.scrollTo(activeIndex, false);
|
|
146
148
|
for (const listener of listeners.current){
|
|
147
149
|
listener(data);
|
|
148
150
|
}
|
|
@@ -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 autoplayInterval?: number;\n },\n) {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n duration: motionDuration,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
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 autoplayInterval?: number;\n },\n) {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n duration: motionDuration,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const canLoop = emblaApi.current?.internalEngine().slideLooper.canLoop();\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n canLoop,\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 // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","canLoop","slideLooper","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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultActiveIndex?: number;\n\n /**\n * The alignment of the carousel.\n */\n align?: 'center' | 'start' | 'end';\n\n /**\n * The value of the currently active page.\n */\n activeIndex?: number;\n\n /**\n * Callback to notify a page change.\n */\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /**\n * Circular enables the carousel to loop back around on navigation past trailing index.\n */\n circular?: boolean;\n\n /**\n * Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n */\n groupSize?: number | 'auto';\n\n /**\n * Enables drag to scroll on carousel items.\n * Defaults to: False\n */\n draggable?: boolean;\n\n /**\n * Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n */\n whitespace?: boolean;\n\n /**\n * Sets motion type as either 'slide' or 'fade'\n * Defaults: 'slide'\n *\n * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * Note: Duration is not in milliseconds because Carousel uses an\n * attraction physics simulation when scrolling instead of easings.\n * Only values between 20-60 are recommended, 25 is the default.\n */\n motion?: CarouselMotion;\n\n /**\n * Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n */\n announcement?: CarouselAnnouncerFunction;\n\n /**\n * Choose a delay between autoplay transitions in milliseconds.\n * Only active if Autoplay is enabled via CarouselAutoplayButton\n *\n * Defaults: 4000\n */\n autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n /**\n * The current carousel index, a change in index will not trigger the callback (use context index instead).\n */\n activeIndex: number;\n /**\n * The total number of slides to be navigated, accounts for grouping.\n */\n navItemsCount: number;\n /**\n * A breakdown of the card indexes contained within each slide index.\n */\n groupIndexList: number[][];\n /**\n * An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAuGA;;CAEC"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultActiveIndex?: number;\n\n /**\n * The alignment of the carousel.\n */\n align?: 'center' | 'start' | 'end';\n\n /**\n * The value of the currently active page.\n */\n activeIndex?: number;\n\n /**\n * Callback to notify a page change.\n */\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /**\n * Circular enables the carousel to loop back around on navigation past trailing index.\n */\n circular?: boolean;\n\n /**\n * Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n */\n groupSize?: number | 'auto';\n\n /**\n * Enables drag to scroll on carousel items.\n * Defaults to: False\n */\n draggable?: boolean;\n\n /**\n * Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n */\n whitespace?: boolean;\n\n /**\n * Sets motion type as either 'slide' or 'fade'\n * Defaults: 'slide'\n *\n * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * Note: Duration is not in milliseconds because Carousel uses an\n * attraction physics simulation when scrolling instead of easings.\n * Only values between 20-60 are recommended, 25 is the default.\n */\n motion?: CarouselMotion;\n\n /**\n * Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n */\n announcement?: CarouselAnnouncerFunction;\n\n /**\n * Choose a delay between autoplay transitions in milliseconds.\n * Only active if Autoplay is enabled via CarouselAutoplayButton\n *\n * Defaults: 4000\n */\n autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n /**\n * The current carousel index, a change in index will not trigger the callback (use context index instead).\n */\n activeIndex: number;\n /**\n * The total number of slides to be navigated, accounts for grouping.\n */\n navItemsCount: number;\n /**\n * A breakdown of the card indexes contained within each slide index.\n */\n groupIndexList: number[][];\n /**\n * An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n /**\n * Whether the carousel has enough cards present to enable looping without issues.\n */\n canLoop?: boolean;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAuGA;;CAEC"}
|
|
@@ -23,12 +23,13 @@ const useCarouselButton_unstable = (props, ref)=>{
|
|
|
23
23
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
24
24
|
const buttonRef = _react.useRef();
|
|
25
25
|
const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
|
|
26
|
+
const [canLoop, setCanLoop] = _react.useState(circular);
|
|
26
27
|
const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
|
|
27
28
|
const selectPageByDirection = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByDirection);
|
|
28
29
|
const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
|
|
29
30
|
const resetAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.resetAutoplay);
|
|
30
31
|
const isTrailing = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>{
|
|
31
|
-
if (circular) {
|
|
32
|
+
if (circular && canLoop) {
|
|
32
33
|
return false;
|
|
33
34
|
}
|
|
34
35
|
if (navType === 'prev') {
|
|
@@ -60,6 +61,10 @@ const useCarouselButton_unstable = (props, ref)=>{
|
|
|
60
61
|
};
|
|
61
62
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
62
63
|
return subscribeForValues((data)=>{
|
|
64
|
+
if (data.canLoop !== undefined) {
|
|
65
|
+
// Only update canLoop if it has been defined by the carousel engine
|
|
66
|
+
setCanLoop(data.canLoop);
|
|
67
|
+
}
|
|
63
68
|
setTotalSlides(data.navItemsCount);
|
|
64
69
|
});
|
|
65
70
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["import { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next' } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>();\n const circular = useCarouselContext(ctx => ctx.circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...props,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","React","useState","dir","useFluent","buttonRef","useRef","circular","useCarouselContext","ctx","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","carouselButtonClassNames","root","forEach","_buttonRef","focus","useIsomorphicLayoutEffect","data","navItemsCount","nextArrowIcon","createElement","ChevronRightRegular","ChevronLeftRegular","prevArrowIcon","useButton_unstable","icon","slot","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick","useEventCallback","mergeCallbacks","useMergedRefs"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["import { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next' } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>();\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...props,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useCarouselButton_unstable","props","ref","navType","totalSlides","setTotalSlides","React","useState","dir","useFluent","buttonRef","useRef","circular","useCarouselContext","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","carouselButtonClassNames","root","forEach","_buttonRef","focus","useIsomorphicLayoutEffect","data","undefined","navItemsCount","nextArrowIcon","createElement","ChevronRightRegular","ChevronLeftRegular","prevArrowIcon","useButton_unstable","icon","slot","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick","useEventCallback","mergeCallbacks","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -110,7 +110,7 @@ const carouselNavButtonClassNames = {
|
|
|
110
110
|
dm238s: 0,
|
|
111
111
|
B6xbmo0: 0,
|
|
112
112
|
B3whbx2: "f2krc9w",
|
|
113
|
-
Bp15pi3: "
|
|
113
|
+
Bp15pi3: "f7x02et",
|
|
114
114
|
Bay5ve9: "f1ry2q4s",
|
|
115
115
|
Bni0232: "f1e9f9ku"
|
|
116
116
|
},
|
|
@@ -162,15 +162,18 @@ const carouselNavButtonClassNames = {
|
|
|
162
162
|
Bni0232: "f1gxfet"
|
|
163
163
|
},
|
|
164
164
|
brand: {
|
|
165
|
-
Bjyk6c5: "
|
|
165
|
+
Bjyk6c5: "fnrv5e1",
|
|
166
166
|
Bp15pi3: "fjsqi2x",
|
|
167
|
-
Glksuk: "
|
|
167
|
+
Glksuk: "frrwqtn",
|
|
168
168
|
Bay5ve9: "f9atwx8",
|
|
169
|
-
Blzl0y7: "
|
|
169
|
+
Blzl0y7: "fmmpig5",
|
|
170
170
|
Bni0232: "f1e9f9ku"
|
|
171
171
|
},
|
|
172
172
|
unselectedBrand: {
|
|
173
|
-
Bp15pi3: "f7x02et"
|
|
173
|
+
Bp15pi3: "f7x02et",
|
|
174
|
+
Bjyk6c5: "f1w4p7kh",
|
|
175
|
+
Bay5ve9: "f1ry2q4s",
|
|
176
|
+
Bni0232: "f1e9f9ku"
|
|
174
177
|
}
|
|
175
178
|
}, {
|
|
176
179
|
d: [
|
|
@@ -233,7 +236,7 @@ const carouselNavButtonClassNames = {
|
|
|
233
236
|
p: -1
|
|
234
237
|
}
|
|
235
238
|
],
|
|
236
|
-
".
|
|
239
|
+
".f7x02et::after{opacity:0.6;}",
|
|
237
240
|
".f1eh74fx{width:var(--spacingHorizontalL);}",
|
|
238
241
|
[
|
|
239
242
|
".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}",
|
|
@@ -272,9 +275,8 @@ const carouselNavButtonClassNames = {
|
|
|
272
275
|
p: -1
|
|
273
276
|
}
|
|
274
277
|
],
|
|
275
|
-
".
|
|
276
|
-
".fjsqi2x::after{opacity:1;}"
|
|
277
|
-
".f7x02et::after{opacity:0.6;}"
|
|
278
|
+
".fnrv5e1::after{background-color:var(--colorCompoundBrandBackground);}",
|
|
279
|
+
".fjsqi2x::after{opacity:1;}"
|
|
278
280
|
],
|
|
279
281
|
m: [
|
|
280
282
|
[
|
|
@@ -298,13 +300,13 @@ const carouselNavButtonClassNames = {
|
|
|
298
300
|
],
|
|
299
301
|
h: [
|
|
300
302
|
".f1ry2q4s:hover::after{opacity:0.75;}",
|
|
301
|
-
".
|
|
303
|
+
".frrwqtn:hover::after{background-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
302
304
|
".f9atwx8:hover::after{opacity:1;}"
|
|
303
305
|
],
|
|
304
306
|
a: [
|
|
305
307
|
".f1e9f9ku:active::after{opacity:1;}",
|
|
306
308
|
".f1gxfet:active::after{opacity:0.65;}",
|
|
307
|
-
".
|
|
309
|
+
".fmmpig5:active::after{background-color:var(--colorCompoundBrandBackgroundPressed);}"
|
|
308
310
|
]
|
|
309
311
|
});
|
|
310
312
|
const useCarouselNavButtonStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.
|
|
1
|
+
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["carouselNavButtonClassNames","useCarouselNavButtonStyles_unstable","root","useStyles","__styles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","state","styles","selected","appearance","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,2BAA2B;eAA3BA;;IAmHIC,mCAAmC;eAAnCA;;;uBAtHoC;AAG9C,MAAMD,8BAA8B;IACvCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,OAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,gBAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,cAAA;QAAAhF,QAAA;QAAAE,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAwC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAArC,QAAA;QAAAvB,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAA0D,SAAA;QAAAC,SAAA;IAAA;IAAAE,OAAA;QAAAzC,SAAA;QAAAqC,SAAA;QAAAK,QAAA;QAAAJ,SAAA;QAAAK,SAAA;QAAAJ,SAAA;IAAA;IAAAK,iBAAA;QAAAP,SAAA;QAAArC,SAAA;QAAAsC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAM,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA8GX,MAAM/F,sCAAuCgG,CAAAA;IACpD;IACA,MAAMC,SAAS/F;IACf,MAAM,EAAEgG,QAAQ,EAAEC,UAAAA,EAAY,GAAGH;IACjCA,MAAM/F,IAAI,CAACmG,SAAS,GAAGC,IAAAA,mBAAY,EAACtG,4BAA4BE,IAAI,EAAEgG,OAAOhG,IAAI,EAAEiG,WAAWD,OAAOX,YAAY,GAAGW,OAAO9C,cAAc,EAAEgD,eAAe,WAAWF,OAAOV,KAAK,EAAE,CAACW,YAAYC,eAAe,WAAWF,OAAOP,eAAe,EAAEM,MAAM/F,IAAI,CAACmG,SAAS;IACtQ,OAAOJ;AACX"}
|
|
@@ -150,21 +150,23 @@ function useEmblaCarousel(options) {
|
|
|
150
150
|
setActiveIndex(newIndex);
|
|
151
151
|
};
|
|
152
152
|
const handleReinit = (0, _reactutilities.useEventCallback)(()=>{
|
|
153
|
-
var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
|
|
153
|
+
var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3, _emblaApi_current4;
|
|
154
154
|
var _emblaApi_current_slideNodes;
|
|
155
155
|
const nodes = (_emblaApi_current_slideNodes = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.slideNodes()) !== null && _emblaApi_current_slideNodes !== void 0 ? _emblaApi_current_slideNodes : [];
|
|
156
156
|
var _emblaApi_current_internalEngine_slideRegistry;
|
|
157
157
|
const groupIndexList = (_emblaApi_current_internalEngine_slideRegistry = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.internalEngine().slideRegistry) !== null && _emblaApi_current_internalEngine_slideRegistry !== void 0 ? _emblaApi_current_internalEngine_slideRegistry : [];
|
|
158
158
|
const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;
|
|
159
|
+
const canLoop = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideLooper.canLoop();
|
|
159
160
|
var _emblaApi_current_selectedScrollSnap;
|
|
160
161
|
const data = {
|
|
161
162
|
navItemsCount,
|
|
162
|
-
activeIndex: (_emblaApi_current_selectedScrollSnap = (
|
|
163
|
+
activeIndex: (_emblaApi_current_selectedScrollSnap = (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0,
|
|
163
164
|
groupIndexList,
|
|
164
|
-
slideNodes: nodes
|
|
165
|
+
slideNodes: nodes,
|
|
166
|
+
canLoop
|
|
165
167
|
};
|
|
166
168
|
updateIndex();
|
|
167
|
-
(
|
|
169
|
+
(_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.scrollTo(activeIndex, false);
|
|
168
170
|
for (const listener of listeners.current){
|
|
169
171
|
listener(data);
|
|
170
172
|
}
|
|
@@ -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 autoplayInterval?: number;\n },\n) {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n duration: motionDuration,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement | null = null;\n\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.off('autoplay:select', handleIndexChange);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n currentElement = viewportRef.current ?? newElement;\n if (currentElement) {\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","currentElement","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","EmblaCarousel","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
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 autoplayInterval?: number;\n },\n) {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent | MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n duration: motionDuration,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType | null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay?.reset();\n }, []);\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\n emblaApi.current?.plugins().autoplay?.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n const canLoop = emblaApi.current?.internalEngine().slideLooper.canLoop();\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n canLoop,\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 // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current = EmblaCarousel(\n currentElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n emblaApi.current?.on('autoplay:select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' | 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["EMBLA_VISIBILITY_EVENT","setTabsterDefault","useEmblaCarousel","sliderClassname","carouselSliderClassNames","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","carouselCardClassNames","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","options","align","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","useControllableState","defaultState","defaultActiveIndex","state","initialState","onDragEvent","useEventCallback","event","index","type","emblaOptions","React","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","Autoplay","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","Fade","pointerEventPlugin","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","canLoop","slideLooper","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": "9.6.
|
|
3
|
+
"version": "9.6.7",
|
|
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",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"@fluentui/scripts-cypress": "*"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@fluentui/react-aria": "^9.14.
|
|
29
|
-
"@fluentui/react-button": "^9.4.
|
|
28
|
+
"@fluentui/react-aria": "^9.14.7",
|
|
29
|
+
"@fluentui/react-button": "^9.4.7",
|
|
30
30
|
"@fluentui/react-context-selector": "^9.1.76",
|
|
31
31
|
"@fluentui/react-icons": "^2.0.245",
|
|
32
|
-
"@fluentui/react-tooltip": "^9.6.
|
|
32
|
+
"@fluentui/react-tooltip": "^9.6.7",
|
|
33
33
|
"@fluentui/react-jsx-runtime": "^9.0.54",
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.23.1",
|
|
35
|
-
"@fluentui/react-tabster": "^9.24.
|
|
35
|
+
"@fluentui/react-tabster": "^9.24.7",
|
|
36
36
|
"@fluentui/react-theme": "^9.1.24",
|
|
37
37
|
"@fluentui/react-utilities": "^9.19.0",
|
|
38
38
|
"@griffel/react": "^1.5.22",
|