my-animated-components 1.5.1 → 1.5.2

package/dist/index.js

@@ -2821,12 +2821,13 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                 !isMobile && React.createElement("span", { style: { marginLeft: 6 } }, tab.label)))))))), document.body);
 };
 
-const Carousel = ({ images, navigationStyle = 'both', size = 'lg', autoPlay = 0, autoPlayDirection = 'forward', showPlayPause = true, loop = true, enableSwipe = true, swipeThreshold = 10000, direction = 'horizontal', motionVariant = 'fadeIn', customVariants, transitionDuration = 0.5, customTransition, customClasses = {}, customSizeClasses, aspectRatio = '16/9', showOverlay = true, overlayPosition = 'bottom', onSlideChange, initialSlide = 0, baseClassName, unstyled = false, className = '', lazyLoad = true, preloadImages = 2, customIcons, thumbnailSize = 'md', arrowPosition = 'inside', dotStyle = 'line', pauseOnHover = true, keyboard = true, slidesPerView = 1, spaceBetween = 0, centeredSlides = false, }) => {
+const Carousel = ({ images, navigationStyle = 'both', size = 'lg', autoPlay = 0, autoPlayDirection = 'forward', showPlayPause = true, loop = true, enableSwipe = true, swipeThreshold = 10000, direction = 'horizontal', motionVariant = 'fadeIn', customVariants, transitionDuration = 0.5, customTransition, customClasses = {}, customSizeClasses, aspectRatio = '16/9', showOverlay = true, overlayPosition = 'bottom', onSlideChange, initialSlide = 0, baseClassName, unstyled = false, className = '', lazyLoad = false, preloadImages = 2, customIcons, thumbnailSize = 'md', arrowPosition = 'inside', dotStyle = 'line', pauseOnHover = true, keyboard = true, slidesPerView = 1, spaceBetween = 0, centeredSlides = false, }) => {
     const [currentIndex, setCurrentIndex] = React.useState(initialSlide);
     const [isPlaying, setIsPlaying] = React.useState(autoPlay > 0);
     const [dir, setDir] = React.useState(0);
     const [loadedImages, setLoadedImages] = React.useState(new Set([initialSlide]));
     const containerRef = React.useRef(null);
+    const autoPlayRef = React.useRef(null);
     const defaultSizeClasses = {
         xs: 'max-w-sm h-48',
         sm: 'max-w-md h-64',
@@ -2869,14 +2870,24 @@ const Carousel = ({ images, navigationStyle = 'both', size = 'lg', autoPlay = 0,
             }
             setLoadedImages(imagesToLoad);
         }
-    }, [currentIndex, lazyLoad, preloadImages, images.length, loop, loadedImages]);
+        else {
+            setLoadedImages(new Set(images.map((_, i) => i)));
+        }
+    }, [currentIndex, lazyLoad, preloadImages, images.length, loop]);
     React.useEffect(() => {
+        if (autoPlayRef.current) {
+            clearInterval(autoPlayRef.current);
+        }
         if (autoPlay > 0 && isPlaying) {
-            const interval = setInterval(() => {
+            autoPlayRef.current = setInterval(() => {
                 paginate(autoPlayDirection === 'forward' ? 1 : -1);
             }, autoPlay);
-            return () => clearInterval(interval);
         }
+        return () => {
+            if (autoPlayRef.current) {
+                clearInterval(autoPlayRef.current);
+            }
+        };
     }, [autoPlay, isPlaying, paginate, autoPlayDirection]);
     React.useEffect(() => {
         onSlideChange?.(currentIndex);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "description": "",
   "main": "dist/index.js",