yet-another-react-lightbox 3.17.4 → 3.18.0

package/dist/index.d.ts

@@ -36,6 +36,7 @@ declare function getSlideIndex(index: number, slidesCount: number): number;
 declare function hasSlides(slides: Slide[]): slides is [Slide, ...Slide[]];
 declare function getSlide(slides: [Slide, ...Slide[]], index: number): SlideImage;
 declare function getSlideIfPresent(slides: Slide[], index: number): SlideImage | undefined;
+declare function getSlideKey(slide: Slide): string | undefined;
 declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
 declare function stopNavigationEventsPropagation(): {
     onPointerDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
@@ -265,4 +266,4 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/index.js

@@ -89,6 +89,9 @@ function getSlide(slides, index) {
 function getSlideIfPresent(slides, index) {
     return hasSlides(slides) ? getSlide(slides, index) : undefined;
 }
+function getSlideKey(slide) {
+    return isImageSlide(slide) ? slide.src : undefined;
+}
 function addToolbarButton(toolbar, key, button) {
     if (!button)
         return toolbar;
@@ -1217,17 +1220,20 @@ function Carousel({ carousel }) {
     const { setCarouselRef } = useController();
     const spacingValue = parseLengthPercentage(carousel.spacing);
     const paddingValue = parseLengthPercentage(carousel.padding);
-    const items = [];
     const preload = calculatePreload(carousel, slides, 1);
+    const items = [];
     if (hasSlides(slides)) {
-        for (let i = currentIndex - preload; i < currentIndex; i += 1) {
-            const key = globalIndex + i - currentIndex;
-            items.push(!carousel.finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
-        }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
-        for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
-            const key = globalIndex + i - currentIndex;
-            items.push(!carousel.finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+        for (let index = currentIndex - preload; index <= currentIndex + preload; index += 1) {
+            const slide = getSlide(slides, index);
+            const key = globalIndex - currentIndex + index;
+            const placeholder = carousel.finite && (index < 0 || index > slides.length - 1);
+            items.push(!placeholder
+                ? {
+                    key: [`${key}`, getSlideKey(slide)].filter(Boolean).join("|"),
+                    offset: index - currentIndex,
+                    slide,
+                }
+                : { key });
         }
     }
     return (React.createElement("div", { ref: setCarouselRef, className: clsx(cssClass(cssPrefix$2()), items.length > 0 && cssClass(cssPrefix$2("with_slides"))), style: {
@@ -1236,7 +1242,7 @@ function Carousel({ carousel }) {
             [`${cssVar(cssPrefix$2("spacing_percent"))}`]: spacingValue.percent || 0,
             [`${cssVar(cssPrefix$2("padding_px"))}`]: paddingValue.pixel || 0,
             [`${cssVar(cssPrefix$2("padding_percent"))}`]: paddingValue.percent || 0,
-        } }, items));
+        } }, items.map(({ key, slide, offset }) => slide ? React.createElement(CarouselSlide, { key: key, slide: slide, offset: offset }) : React.createElement(Placeholder, { key: key }))));
 }
 const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);
 
@@ -1502,4 +1508,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, noScroll,
                 React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
 }
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/plugins/thumbnails/index.js

@@ -1,4 +1,4 @@
-import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, ImageSlide, makeComposePrefix, useEventCallback, clsx, cssVar, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, ImageSlide, makeComposePrefix, useEventCallback, clsx, cssVar, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, getSlideKey, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
@@ -40,7 +40,7 @@ function renderThumbnail({ slide, render, rect, imageFit }) {
     }
     if (slide.type === "video") {
         return (React.createElement(React.Fragment, null,
-            slide.poster && React.createElement(ImageSlide, { slide: { src: slide.poster }, render: render, rect: rect, imageFit: imageFit }),
+            slide.poster && (React.createElement(ImageSlide, { key: slide.poster, slide: { src: slide.poster }, render: render, rect: rect, imageFit: imageFit })),
             React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
@@ -95,7 +95,6 @@ function ThumbnailsTrack({ visible, containerRef }) {
     useKeyboardNavigation(subscribeSensors);
     const thumbnails = useThumbnailsProps();
     const { position, width, height, border, borderStyle, borderColor, borderRadius, padding, gap, vignette } = thumbnails;
-    const index = globalIndex;
     const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
     const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
     const { prepareAnimation } = useAnimation(track, (snapshot) => ({
@@ -130,40 +129,21 @@ function ThumbnailsTrack({ visible, containerRef }) {
     const preload = calculatePreload(carousel, slides);
     const items = [];
     if (hasSlides(slides)) {
-        if (offset < 0) {
-            for (let i = index - preload + offset; i < index - preload; i += 1) {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        for (let i = index - preload - Math.max(offset, 0); i < index; i += 1) {
-            if (!(carousel.finite && i < 0)) {
-                items.push({ slide: getSlide(slides, i), index: i });
-            }
-            else {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        items.push({ slide: getSlide(slides, index), index });
-        for (let i = index + 1; i <= index + preload - Math.min(offset, 0); i += 1) {
-            if (!carousel.finite || i <= slides.length - 1) {
-                items.push({ slide: getSlide(slides, i), index: i });
-            }
-            else {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
-        }
-        if (offset > 0) {
-            for (let i = index + preload + 1; i <= index + preload + offset; i += 1) {
-                items.push({ slide: null, index: i, placeholder: true });
-            }
+        for (let index = globalIndex - preload - Math.abs(offset); index <= globalIndex + preload + Math.abs(offset); index += 1) {
+            const placeholder = (carousel.finite && (index < 0 || index > slides.length - 1)) ||
+                (offset < 0 && index < globalIndex - preload) ||
+                (offset > 0 && index > globalIndex + preload);
+            const slide = !placeholder ? getSlide(slides, index) : null;
+            const key = [`${index}`, slide ? getSlideKey(slide) : "placeholder"].filter(Boolean).join("|");
+            items.push({ key, index, slide });
         }
     }
     const handleClick = (slideIndex) => () => {
-        if (slideIndex > index) {
-            publish(ACTION_NEXT, { count: slideIndex - index });
+        if (slideIndex > globalIndex) {
+            publish(ACTION_NEXT, { count: slideIndex - globalIndex });
         }
-        else if (slideIndex < index) {
-            publish(ACTION_PREV, { count: index - slideIndex });
+        else if (slideIndex < globalIndex) {
+            publish(ACTION_PREV, { count: globalIndex - slideIndex });
         }
     };
     return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
@@ -186,26 +166,26 @@ function ThumbnailsTrack({ visible, containerRef }) {
             ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
             ...styles.thumbnailsContainer,
         } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ slide, index: slideIndex, placeholder }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ key, index, slide }) => {
             const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
-            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
-                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
+            const fadeIn = (offset > 0 && index > globalIndex + preload - offset && index <= globalIndex + preload) ||
+                (offset < 0 && index < globalIndex - preload - offset && index >= globalIndex - preload)
                 ? {
                     duration: fadeAnimationDuration,
-                    delay: ((offset > 0 ? slideIndex - (index + preload - offset) : index - preload - offset - slideIndex) -
+                    delay: ((offset > 0 ? index - (globalIndex + preload - offset) : globalIndex - preload - offset - index) -
                         1) *
                         fadeAnimationDuration,
                 }
                 : undefined;
-            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
+            const fadeOut = (offset > 0 && index < globalIndex - preload) || (offset < 0 && index > globalIndex + preload)
                 ? {
                     duration: fadeAnimationDuration,
                     delay: (offset > 0
-                        ? offset - (index - preload - slideIndex)
-                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
+                        ? offset - (globalIndex - preload - index)
+                        : -offset - (index - (globalIndex + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: [`${slideIndex}`, placeholder && "placeholder"].filter(Boolean).join("-"), slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
+            return (React.createElement(Thumbnail, { key: key, slide: slide, active: index === globalIndex, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: !slide, onClick: handleClick(index), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
 }

package/dist/plugins/video/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginProps, GenericSlide } from '../../types.js';
+import { PluginProps } from '../../types.js';
 
 /** Video plugin */
 declare function Video({ augment }: PluginProps): void;
@@ -44,6 +44,8 @@ declare module "yet-another-react-lightbox" {
             src: string;
             /** video source type (e.g., `video/mp4`) */
             type: string;
+            /** media query for the resource's intended media (e.g., `(min-width: 800px)`) */
+            media?: string;
         }[];
     }
     interface LightboxProps {

package/dist/plugins/video/index.js

@@ -82,7 +82,7 @@ function VideoSlide({ slide, offset }) {
             publish(ACTIVE_SLIDE_PLAYING);
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);
-        } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
+        } }, sources.map(({ src, type, media }) => (React.createElement("source", { key: [src, type, media].filter(Boolean).join("|"), src: src, type: type, media: media })))))))));
 }
 
 function isVideoSlide(slide) {
@@ -93,10 +93,7 @@ function Video({ augment }) {
         render: {
             slide: ({ slide, offset, rect }) => {
                 var _a;
-                if (isVideoSlide(slide)) {
-                    return (React.createElement(VideoSlide, { key: (_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join(" "), slide: slide, offset: offset }));
-                }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect });
+                return isVideoSlide(slide) ? (React.createElement(VideoSlide, { key: (_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join("|"), slide: slide, offset: offset })) : (renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect }));
             },
             ...restRender,
         },

package/dist/plugins/zoom/index.js

@@ -462,7 +462,7 @@ function ZoomWrapper({ render, slide, offset, rect }) {
             imageProps: carousel.imageProps,
             onClick: offset === 0 ? () => { var _a; return (_a = on.click) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex }); } : undefined,
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { key: slide.src, ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { key: slide.src, onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
     if (!rendered)
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.17.4",
+  "version": "3.18.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",