@fluentui/react-carousel - npm Package Compare versions

Comparing version 0.0.0-nightly-20241015-1519.1 to 0.0.0-nightly-20241016-0407.1

CHANGELOG.md

 # Change Log - @fluentui/react-carousel
 
-This log was last generated on Tue, 15 Oct 2024 15:24:15 GMT and should not be manually modified.
+This log was last generated on Wed, 16 Oct 2024 04:12:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20241015-1519.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241015-1519.1)
+## [0.0.0-nightly-20241016-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v0.0.0-nightly-20241016-0407.1)
 
-Tue, 15 Oct 2024 15:24:15 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.1.0..@fluentui/react-carousel_v0.0.0-nightly-20241015-1519.1)
+Wed, 16 Oct 2024 04:12:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.2.0..@fluentui/react-carousel_v0.0.0-nightly-20241016-0407.1)
 
@@ -15,13 +15,31 @@ ### 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-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241015-1519.1 ([commit](https://github.com/microsoft/fluentui/commit/377ac4e0b1e10c8cff8ac214cd01340ffe324a4d) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241016-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1cd61694b6b3846d5e6852c742957be697ef36a1) by beachball)
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.2.0)
+
+Tue, 15 Oct 2024 17:17:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.1.0..@fluentui/react-carousel_v9.2.0)
+
+### Minor changes
+
+- feat: Add fade motion to carousel as an optional prop ([PR #33000](https://github.com/microsoft/fluentui/pull/33000) by [e-mail])
+- feat: Enable circular focus if circular, and enable animations on focus index change ([PR #33015](https://github.com/microsoft/fluentui/pull/33015) by [e-mail])
+- Bump @fluentui/react-aria to v9.13.8 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-button to v9.3.94 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.1.0)
@@ -28,0 +46,0 @@

dist/index.d.ts

@@ -162,2 +162,7 @@ /// <reference types="react" />
 /**
+ * List of integrated motion types
+ */
+declare type CarouselMotion = 'slide' | 'fade';
+
+/**
  * Used to jump to a card based on index, using arrow navigation via Tabster.
@@ -351,2 +356,7 @@ *
     /**
+     * Sets motion to fade in/out style with minimal movement
+     * Defaults: false
+     */
+    motion?: CarouselMotion;
+    /**
      * Localizes the string used to announce carousel page changes
@@ -353,0 +363,0 @@ * Defaults to: undefined

lib-commonjs/components/Carousel/useCarousel.js

@@ -18,3 +18,3 @@ "use strict";
     'use no memo';
-    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
@@ -29,3 +29,4 @@ const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
         watchDrag: draggable,
-        containScroll: whitespace ? false : 'keepSnaps'
+        containScroll: whitespace ? false : 'keepSnaps',
+        motion
     });
@@ -32,0 +33,0 @@ const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{

lib-commonjs/components/useEmblaCarousel.js

@@ -30,2 +30,3 @@ "use strict";
 const _emblacarouselautoplay = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-autoplay"));
+const _emblacarouselfade = /*#__PURE__*/ _interop_require_default._(require("embla-carousel-fade"));
 const sliderClassname = `.${_useCarouselSliderStylesstyles.carouselSliderClassNames.root}`;
@@ -53,3 +54,3 @@ const DEFAULT_EMBLA_OPTIONS = {
 function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
     const [activeIndex, setActiveIndex] = (0, _reactutilities.useControllableState)({
@@ -89,2 +90,23 @@ defaultState: options.defaultActiveIndex,
     ]);
+    const getPlugins = _react.useCallback(()=>{
+        const plugins = [
+            (0, _emblacarouselautoplay.default)({
+                playOnInit: autoplayRef.current,
+                stopOnInteraction: !autoplayRef.current,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+                rootNode: (emblaRoot)=>{
+                    var _emblaRoot_querySelector;
+                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
+                }
+            })
+        ];
+        // Optionally add Fade plugin
+        if (motion === 'fade') {
+            plugins.push((0, _emblacarouselfade.default)());
+        }
+        return plugins;
+    }, [
+        motion
+    ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
@@ -145,2 +167,3 @@ const listeners = _react.useRef(new Set());
         };
+        const plugins = getPlugins();
         return {
@@ -161,14 +184,3 @@ set current (newElement){
                         ...emblaOptions.current
-                    }, [
-                        (0, _emblacarouselautoplay.default)({
-                            playOnInit: autoplayRef.current,
-                            stopOnInteraction: !autoplayRef.current,
-                            stopOnMouseEnter: true,
-                            stopOnFocusIn: true,
-                            rootNode: (emblaRoot)=>{
-                                var _emblaRoot_querySelector;
-                                return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                            }
-                        })
-                    ]);
+                    }, plugins);
                     (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
@@ -181,2 +193,3 @@ (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
     }, [
+        getPlugins,
         setActiveIndex
@@ -229,2 +242,3 @@ ]);
         var _emblaApi_current;
+        const plugins = getPlugins();
         emblaOptions.current = {
@@ -241,14 +255,3 @@ align,
             ...emblaOptions.current
-        }, [
-            (0, _emblacarouselautoplay.default)({
-                playOnInit: autoplayRef.current,
-                stopOnInteraction: !autoplayRef.current,
-                stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
-            })
-        ]);
+        }, plugins);
     }, [
@@ -260,3 +263,4 @@ align,
         watchDrag,
-        containScroll
+        containScroll,
+        getPlugins
     ]);
@@ -263,0 +267,0 @@ return {

lib/components/Carousel/useCarousel.js

@@ -16,3 +16,3 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
     'use no memo';
-    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement } = props;
+    const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
     const { dir } = useFluent();
@@ -27,3 +27,4 @@ const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = useEmblaCarousel({
         watchDrag: draggable,
-        containScroll: whitespace ? false : 'keepSnaps'
+        containScroll: whitespace ? false : 'keepSnaps',
+        motion
     });
@@ -30,0 +31,0 @@ const selectPageByElement = useEventCallback((event, element, jump)=>{

lib/components/useEmblaCarousel.js

@@ -7,2 +7,3 @@ import { useControllableState } from '@fluentui/react-utilities';
 import Autoplay from 'embla-carousel-autoplay';
+import Fade from 'embla-carousel-fade';
 const sliderClassname = `.${carouselSliderClassNames.root}`;
@@ -30,3 +31,3 @@ const DEFAULT_EMBLA_OPTIONS = {
 export function useEmblaCarousel(options) {
-    const { align, direction, loop, slidesToScroll, watchDrag, containScroll } = options;
+    const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;
     const [activeIndex, setActiveIndex] = useControllableState({
@@ -66,2 +67,23 @@ defaultState: options.defaultActiveIndex,
     ]);
+    const getPlugins = React.useCallback(()=>{
+        const plugins = [
+            Autoplay({
+                playOnInit: autoplayRef.current,
+                stopOnInteraction: !autoplayRef.current,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+                rootNode: (emblaRoot)=>{
+                    var _emblaRoot_querySelector;
+                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
+                }
+            })
+        ];
+        // Optionally add Fade plugin
+        if (motion === 'fade') {
+            plugins.push(Fade());
+        }
+        return plugins;
+    }, [
+        motion
+    ]);
     // Listeners contains callbacks for UI elements that may require state update based on embla changes
@@ -122,2 +144,3 @@ const listeners = React.useRef(new Set());
         };
+        const plugins = getPlugins();
         return {
@@ -138,14 +161,3 @@ set current (newElement){
                         ...emblaOptions.current
-                    }, [
-                        Autoplay({
-                            playOnInit: autoplayRef.current,
-                            stopOnInteraction: !autoplayRef.current,
-                            stopOnMouseEnter: true,
-                            stopOnFocusIn: true,
-                            rootNode: (emblaRoot)=>{
-                                var _emblaRoot_querySelector;
-                                return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                            }
-                        })
-                    ]);
+                    }, plugins);
                     (_emblaApi_current4 = emblaApi.current) === null || _emblaApi_current4 === void 0 ? void 0 : _emblaApi_current4.on('reInit', handleReinit);
@@ -158,2 +170,3 @@ (_emblaApi_current5 = emblaApi.current) === null || _emblaApi_current5 === void 0 ? void 0 : _emblaApi_current5.on('slidesInView', handleVisibilityChange);
     }, [
+        getPlugins,
         setActiveIndex
@@ -206,2 +219,3 @@ ]);
         var _emblaApi_current;
+        const plugins = getPlugins();
         emblaOptions.current = {
@@ -218,14 +232,3 @@ align,
             ...emblaOptions.current
-        }, [
-            Autoplay({
-                playOnInit: autoplayRef.current,
-                stopOnInteraction: !autoplayRef.current,
-                stopOnMouseEnter: true,
-                stopOnFocusIn: true,
-                rootNode: (emblaRoot)=>{
-                    var _emblaRoot_querySelector;
-                    return (_emblaRoot_querySelector = emblaRoot.querySelector(sliderClassname)) !== null && _emblaRoot_querySelector !== void 0 ? _emblaRoot_querySelector : emblaRoot;
-                }
-            })
-        ]);
+        }, plugins);
     }, [
@@ -237,3 +240,4 @@ align,
         watchDrag,
-        containScroll
+        containScroll,
+        getPlugins
     ]);
@@ -240,0 +244,0 @@ return {

package.json

 {
   "name": "@fluentui/react-carousel",
-  "version": "0.0.0-nightly-20241015-1519.1",
+  "version": "0.0.0-nightly-20241016-0407.1",
   "description": "A composable carousel component that enables pagination with minimal rerenders",
@@ -32,4 +32,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241015-1519.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241016-0407.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -39,15 +39,16 @@ "@fluentui/scripts-tasks": "*"
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-button": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20241015-1519.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-button": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20241016-0407.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20241015-1519.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20241015-1519.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20241016-0407.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20241016-0407.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "embla-carousel": "^8.3.0",
-    "embla-carousel-autoplay": "^8.3.0"
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-fade": "^8.3.0"
   },
@@ -54,0 +55,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

544683

increased by0.41%

Lines of code

5447

increased by0.35%

Number of versions

45

increased by2.27%

Published versions last months

25

increased by4.17%

Published versions last two months

45

increased by2.27%

Published versions last year

45

increased by2.27%

Worsened metrics

Dependency count

18

increased by5.88%

Dependency changes

• + Addedembla-carousel-fade@^8.3.0

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-aria@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-button@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-jsx-runtime@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-tabster@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20241016-0407.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20241016-0407.1(transitive)

• + Addedembla-carousel-fade@8.5.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-aria@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-button@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-jsx-runtime@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-tabster@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20241015-1519.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20241015-1519.1(transitive)

• Updated@fluentui/react-aria@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-button@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-context-selector@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-jsx-runtime@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-tabster@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-theme@0.0.0-nightly-20241016-0407.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20241016-0407.1