@fluentui/react-carousel - npm Package Compare versions

Comparing version 0.0.0-nightly-20241211-0405.1 to 0.0.0-nightly-20241212-0406.1

CHANGELOG.md

 # Change Log - @fluentui/react-carousel
 
-This log was last generated on Wed, 11 Dec 2024 04:09:59 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Dec 2024 04:10:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20241211-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241211-0405.1)
+## [0.0.0-nightly-20241212-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241212-0406.1)
 
-Wed, 11 Dec 2024 04:09:59 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.2..@fluentui/react-carousel_v0.0.0-nightly-20241211-0405.1)
+Thu, 12 Dec 2024 04:10:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.2..@fluentui/react-carousel_v0.0.0-nightly-20241212-0406.1)
 
@@ -15,12 +15,12 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-aria to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241211-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e245ddb739b1a3bb81f3414148f4a05e17ce5603) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241212-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c6f47bc0e594b1dd9e7ef5d4cf1598bf47b0788a) by beachball)
 
@@ -27,0 +27,0 @@ ## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.2)

lib-commonjs/components/CarouselNav/useCarouselNav.js

@@ -25,4 +25,7 @@ "use strict";
     });
-    var _props_totalSlides;
-    const [totalSlides, setTotalSlides] = _react.useState((_props_totalSlides = props.totalSlides) !== null && _props_totalSlides !== void 0 ? _props_totalSlides : 0);
+    // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
+    const [totalSlides, setTotalSlides] = (0, _reactutilities.useControllableState)({
+        state: props.totalSlides,
+        initialState: 0
+    });
     const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
@@ -34,3 +37,4 @@ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
     }, [
-        subscribeForValues
+        subscribeForValues,
+        setTotalSlides
     ]);
@@ -37,0 +41,0 @@ return {

lib-commonjs/components/useEmblaCarousel.js

@@ -131,2 +131,15 @@ "use strict";
     }, []);
+    const updateIndex = ()=>{
+        var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
+        var _emblaApi_current_selectedScrollSnap;
+        const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
+        const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
+        var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
+        const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
+        // We set the first card in the current group as the default tabster index for focus capture
+        slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
+            setTabsterDefault(slide, slideIndex === actualIndex);
+        });
+        setActiveIndex(newIndex);
+    };
     const handleReinit = (0, _reactutilities.useEventCallback)(()=>{
@@ -146,2 +159,3 @@ var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
         };
+        updateIndex();
         (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.scrollTo(activeIndex, false);
@@ -153,13 +167,6 @@ for (const listener of listeners.current){
     const handleIndexChange = (0, _reactutilities.useEventCallback)((_, eventType)=>{
-        var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
+        var _emblaApi_current;
         var _emblaApi_current_selectedScrollSnap;
         const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
-        const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
-        var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
-        const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
-        // We set the active or first index of group on-screen as the selected tabster index
-        slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
-            setTabsterDefault(slide, slideIndex === actualIndex);
-        });
-        setActiveIndex(newIndex);
+        updateIndex();
         if (eventType === 'autoplay:select') {
@@ -166,0 +173,0 @@ const noopEvent = new Event('autoplay');

lib/components/CarouselNav/useCarouselNav.js

@@ -5,2 +5,3 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { useControllableState } from '@fluentui/react-utilities';
 /**
@@ -23,4 +24,7 @@ * Create the state required to render CarouselNav.
     });
-    var _props_totalSlides;
-    const [totalSlides, setTotalSlides] = React.useState((_props_totalSlides = props.totalSlides) !== null && _props_totalSlides !== void 0 ? _props_totalSlides : 0);
+    // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
+    const [totalSlides, setTotalSlides] = useControllableState({
+        state: props.totalSlides,
+        initialState: 0
+    });
     const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
@@ -32,3 +36,4 @@ useIsomorphicLayoutEffect(()=>{
     }, [
-        subscribeForValues
+        subscribeForValues,
+        setTotalSlides
     ]);
@@ -35,0 +40,0 @@ return {

lib/components/useEmblaCarousel.js

@@ -109,2 +109,15 @@ import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
     }, []);
+    const updateIndex = ()=>{
+        var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
+        var _emblaApi_current_selectedScrollSnap;
+        const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
+        const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
+        var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
+        const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
+        // We set the first card in the current group as the default tabster index for focus capture
+        slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
+            setTabsterDefault(slide, slideIndex === actualIndex);
+        });
+        setActiveIndex(newIndex);
+    };
     const handleReinit = useEventCallback(()=>{
@@ -124,2 +137,3 @@ var _emblaApi_current, _emblaApi_current1, _emblaApi_current2, _emblaApi_current3;
         };
+        updateIndex();
         (_emblaApi_current3 = emblaApi.current) === null || _emblaApi_current3 === void 0 ? void 0 : _emblaApi_current3.scrollTo(activeIndex, false);
@@ -131,13 +145,6 @@ for (const listener of listeners.current){
     const handleIndexChange = useEventCallback((_, eventType)=>{
-        var _emblaApi_current, _emblaApi_current1, _emblaApi_current2;
+        var _emblaApi_current;
         var _emblaApi_current_selectedScrollSnap;
         const newIndex = (_emblaApi_current_selectedScrollSnap = (_emblaApi_current = emblaApi.current) === null || _emblaApi_current === void 0 ? void 0 : _emblaApi_current.selectedScrollSnap()) !== null && _emblaApi_current_selectedScrollSnap !== void 0 ? _emblaApi_current_selectedScrollSnap : 0;
-        const slides = (_emblaApi_current1 = emblaApi.current) === null || _emblaApi_current1 === void 0 ? void 0 : _emblaApi_current1.slideNodes();
-        var _emblaApi_current_internalEngine_slideRegistry_newIndex_;
-        const actualIndex = (_emblaApi_current_internalEngine_slideRegistry_newIndex_ = (_emblaApi_current2 = emblaApi.current) === null || _emblaApi_current2 === void 0 ? void 0 : _emblaApi_current2.internalEngine().slideRegistry[newIndex][0]) !== null && _emblaApi_current_internalEngine_slideRegistry_newIndex_ !== void 0 ? _emblaApi_current_internalEngine_slideRegistry_newIndex_ : 0;
-        // We set the active or first index of group on-screen as the selected tabster index
-        slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex)=>{
-            setTabsterDefault(slide, slideIndex === actualIndex);
-        });
-        setActiveIndex(newIndex);
+        updateIndex();
         if (eventType === 'autoplay:select') {
@@ -144,0 +151,0 @@ const noopEvent = new Event('autoplay');

package.json

 {
   "name": "@fluentui/react-carousel",
-  "version": "0.0.0-nightly-20241211-0405.1",
+  "version": "0.0.0-nightly-20241212-0406.1",
   "description": "A composable carousel component that enables pagination with minimal rerenders",
@@ -22,4 +22,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241211-0405.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241212-0406.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -29,11 +29,11 @@ "@fluentui/scripts-cypress": "*"
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-button": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20241211-0405.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-button": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20241212-0406.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20241211-0405.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20241211-0405.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20241212-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20241212-0406.1",
     "@griffel/react": "^1.5.22",
@@ -40,0 +40,0 @@ "@swc/helpers": "^0.5.1",

No alert changes

Improved metrics

Total package byte prevSize

617452

increased by0.4%

Lines of code

6031

increased by0.42%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-aria@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-button@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-jsx-runtime@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-tabster@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20241212-0406.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20241212-0406.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-aria@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-button@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-jsx-runtime@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-tabster@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20241211-0405.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20241211-0405.1(transitive)

• Updated@fluentui/react-aria@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-button@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-context-selector@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-jsx-runtime@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-tabster@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-theme@0.0.0-nightly-20241212-0406.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20241212-0406.1