@fluentui/react-carousel 9.9.0 → 9.9.2
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 +32 -2
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js +2 -2
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButton.js +2 -2
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js +2 -2
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js +2 -2
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/package.json +10 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-carousel
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 12 Feb 2026 10:42:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.2)
|
|
8
|
+
|
|
9
|
+
Thu, 12 Feb 2026 10:42:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.9.1..@fluentui/react-carousel_v9.9.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: prevent custom props from leaking to the DOM ([PR #35689](https://github.com/microsoft/fluentui/pull/35689) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.9 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.8.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tooltip to v9.9.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.1)
|
|
21
|
+
|
|
22
|
+
Thu, 22 Jan 2026 17:07:04 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.9.0..@fluentui/react-carousel_v9.9.1)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-aria to v9.17.8 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
28
|
+
- Bump @fluentui/react-button to v9.8.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tooltip to v9.9.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
34
|
+
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.0)
|
|
8
38
|
|
|
9
|
-
Wed, 17 Dec 2025 18:
|
|
39
|
+
Wed, 17 Dec 2025 18:10:06 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.8.13..@fluentui/react-carousel_v9.9.0)
|
|
11
41
|
|
|
12
42
|
### Minor changes
|
|
@@ -13,7 +13,7 @@ import { useCarouselContext_unstable as useCarouselContext } from '../CarouselCo
|
|
|
13
13
|
* @param props - props from this instance of CarouselAutoplayButton
|
|
14
14
|
* @param ref - reference to root HTMLDivElement of CarouselAutoplayButton
|
|
15
15
|
*/ export const useCarouselAutoplayButton_unstable = (props, ref)=>{
|
|
16
|
-
const { onCheckedChange, checked, defaultChecked } = props;
|
|
16
|
+
const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;
|
|
17
17
|
const [autoplay, setAutoplay] = useControllableState({
|
|
18
18
|
state: checked,
|
|
19
19
|
defaultState: defaultChecked,
|
|
@@ -53,7 +53,7 @@ import { useCarouselContext_unstable as useCarouselContext } from '../CarouselCo
|
|
|
53
53
|
renderByDefault: true,
|
|
54
54
|
elementType: 'span'
|
|
55
55
|
}),
|
|
56
|
-
...
|
|
56
|
+
...buttonProps,
|
|
57
57
|
checked: autoplay,
|
|
58
58
|
onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
|
|
59
59
|
}, ref)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...buttonProps,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAC9E,SAASC,cAAc,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACzG,YAAYC,WAAW,QAAQ;AAG/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGC,aAAa,GAAGL;IAErE,MAAM,CAACM,UAAUC,YAAY,GAAGb,qBAAqB;QACnDc,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBb,mBAAmBc,CAAAA,MAAOA,IAAID,cAAc;IAEnEf,MAAMiB,SAAS,CAAC;QACd,qDAAqD;QACrDF,eAAeL;QAEf,OAAO;YACL,yDAAyD;YACzDK,eAAe;QACjB;IACF,GAAG;QAACL;QAAUK;KAAe;IAE7B,MAAMG,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACX;QAElBC,YAAYU;QACZf,4BAAAA,sCAAAA,gBAAkBa,OAAO;YAAEA;YAAOG,MAAM;YAASf,SAASc;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAG5B,yBACD;YACE8B,MAAM1B,KAAK2B,QAAQ,CAACpB,MAAMmB,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUhB,yBAAW,oBAACf,0CAAwB,oBAACD;gBACjD;gBACAiC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGnB,WAAW;YACdF,SAASG;YACTmB,SAAS9B,iBAAiBH,eAAesB,aAAad,MAAMyB,OAAO;QACrE,GACAxB,IACD;IACH;AACF,EAAE"}
|
|
@@ -15,7 +15,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
15
15
|
* @param props - props from this instance of CarouselButton
|
|
16
16
|
* @param ref - reference to root HTMLDivElement of CarouselButton
|
|
17
17
|
*/ export const useCarouselButton_unstable = (props, ref)=>{
|
|
18
|
-
const { navType = 'next' } = props;
|
|
18
|
+
const { navType = 'next', ...buttonProps } = props;
|
|
19
19
|
// Locally tracks the total number of slides, will only update if this changes.
|
|
20
20
|
const [totalSlides, setTotalSlides] = React.useState(0);
|
|
21
21
|
const { dir } = useFluent();
|
|
@@ -85,7 +85,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
85
85
|
tabIndex: isTrailing ? -1 : 0,
|
|
86
86
|
'aria-disabled': isTrailing,
|
|
87
87
|
appearance: 'subtle',
|
|
88
|
-
...
|
|
88
|
+
...buttonProps,
|
|
89
89
|
onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
|
|
90
90
|
}, useMergedRefs(ref, buttonRef))
|
|
91
91
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { 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>(undefined);\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 ...
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { 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', ...buttonProps } = 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>(undefined);\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 ...buttonProps,\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","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","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"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
16
16
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
17
17
|
const _CarouselContext = require("../CarouselContext");
|
|
18
18
|
const useCarouselAutoplayButton_unstable = (props, ref)=>{
|
|
19
|
-
const { onCheckedChange, checked, defaultChecked } = props;
|
|
19
|
+
const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;
|
|
20
20
|
const [autoplay, setAutoplay] = (0, _reactutilities.useControllableState)({
|
|
21
21
|
state: checked,
|
|
22
22
|
defaultState: defaultChecked,
|
|
@@ -56,7 +56,7 @@ const useCarouselAutoplayButton_unstable = (props, ref)=>{
|
|
|
56
56
|
renderByDefault: true,
|
|
57
57
|
elementType: 'span'
|
|
58
58
|
}),
|
|
59
|
-
...
|
|
59
|
+
...buttonProps,
|
|
60
60
|
checked: autoplay,
|
|
61
61
|
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick))
|
|
62
62
|
}, ref)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...buttonProps,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;;;;;+BAoBaU;;;;;;;6BAjB4B,yBAAyB;4BACZ,wBAAwB;gCACD,4BAA4B;iEAClF,QAAQ;iCAGmC,qBAAqB;AAWhF,2CAA2C,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGC,aAAa,GAAGL;IAErE,MAAM,CAACM,UAAUC,YAAY,OAAGb,oCAAAA,EAAqB;QACnDc,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,qBAAiBb,4CAAAA,EAAmBc,CAAAA,MAAOA,IAAID,cAAc;IAEnEf,OAAMiB,SAAS,CAAC;QACd,qDAAqD;QACrDF,eAAeL;QAEf,OAAO;YACL,yDAAyD;YACzDK,eAAe;QACjB;IACF,GAAG;QAACL;QAAUK;KAAe;IAE7B,MAAMG,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACX;QAElBC,YAAYU;QACZf,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBa,OAAO;YAAEA;YAAOG,MAAM;YAASf,SAASc;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,OAAG5B,qCAAAA,EACD;YACE8B,MAAM1B,oBAAAA,CAAK2B,QAAQ,CAACpB,MAAMmB,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUhB,WAAAA,WAAAA,GAAW,OAAA,aAAA,CAACf,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwB,OAAA,aAAA,CAACD,6BAAAA,EAAAA;gBACjD;gBACAiC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGnB,WAAW;YACdF,SAASG;YACTmB,aAAS9B,gCAAAA,MAAiBH,8BAAAA,EAAesB,aAAad,MAAMyB,OAAO;QACrE,GACAxB,IACD;IACH;AACF,EAAE"}
|
|
@@ -18,7 +18,7 @@ const _CarouselContext = require("../CarouselContext");
|
|
|
18
18
|
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
|
|
19
19
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
20
20
|
const useCarouselButton_unstable = (props, ref)=>{
|
|
21
|
-
const { navType = 'next' } = props;
|
|
21
|
+
const { navType = 'next', ...buttonProps } = props;
|
|
22
22
|
// Locally tracks the total number of slides, will only update if this changes.
|
|
23
23
|
const [totalSlides, setTotalSlides] = _react.useState(0);
|
|
24
24
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
@@ -88,7 +88,7 @@ const useCarouselButton_unstable = (props, ref)=>{
|
|
|
88
88
|
tabIndex: isTrailing ? -1 : 0,
|
|
89
89
|
'aria-disabled': isTrailing,
|
|
90
90
|
appearance: 'subtle',
|
|
91
|
-
...
|
|
91
|
+
...buttonProps,
|
|
92
92
|
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick))
|
|
93
93
|
}, (0, _reactutilities.useMergedRefs)(ref, buttonRef))
|
|
94
94
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { 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>(undefined);\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 ...
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { 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', ...buttonProps } = 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>(undefined);\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 ...buttonProps,\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","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-carousel",
|
|
3
|
-
"version": "9.9.
|
|
3
|
+
"version": "9.9.2",
|
|
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",
|
|
@@ -17,24 +17,17 @@
|
|
|
17
17
|
"url": "https://github.com/microsoft/fluentui"
|
|
18
18
|
},
|
|
19
19
|
"license": "MIT",
|
|
20
|
-
"devDependencies": {
|
|
21
|
-
"@fluentui/eslint-plugin": "*",
|
|
22
|
-
"@fluentui/react-conformance": "*",
|
|
23
|
-
"@fluentui/react-conformance-griffel": "*",
|
|
24
|
-
"@fluentui/scripts-api-extractor": "*",
|
|
25
|
-
"@fluentui/scripts-cypress": "*"
|
|
26
|
-
},
|
|
27
20
|
"dependencies": {
|
|
28
|
-
"@fluentui/react-aria": "^9.17.
|
|
29
|
-
"@fluentui/react-button": "^9.
|
|
30
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
21
|
+
"@fluentui/react-aria": "^9.17.9",
|
|
22
|
+
"@fluentui/react-button": "^9.8.1",
|
|
23
|
+
"@fluentui/react-context-selector": "^9.2.14",
|
|
31
24
|
"@fluentui/react-icons": "^2.0.245",
|
|
32
|
-
"@fluentui/react-tooltip": "^9.
|
|
33
|
-
"@fluentui/react-jsx-runtime": "^9.
|
|
34
|
-
"@fluentui/react-shared-contexts": "^9.26.
|
|
35
|
-
"@fluentui/react-tabster": "^9.26.
|
|
36
|
-
"@fluentui/react-theme": "^9.2.
|
|
37
|
-
"@fluentui/react-utilities": "^9.26.
|
|
25
|
+
"@fluentui/react-tooltip": "^9.9.1",
|
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.4.0",
|
|
27
|
+
"@fluentui/react-shared-contexts": "^9.26.1",
|
|
28
|
+
"@fluentui/react-tabster": "^9.26.12",
|
|
29
|
+
"@fluentui/react-theme": "^9.2.1",
|
|
30
|
+
"@fluentui/react-utilities": "^9.26.1",
|
|
38
31
|
"@griffel/react": "^1.5.32",
|
|
39
32
|
"@swc/helpers": "^0.5.1",
|
|
40
33
|
"embla-carousel": "^8.5.1",
|