yet-another-react-lightbox - npm Package Compare versions

Comparing version 3.18.0 to 3.19.0

dist/index.d.ts

 import * as React from 'react';
-import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerSettings, ControllerRef, Callback, RenderFunction } from './types.js';
+import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node as Node$1, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerSettings, ControllerRef, Callback, RenderFunction } from './types.js';
 export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, Callbacks, ClickCallbackProps, DeepPartial, DeepPartialValue, 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, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, NoScrollSettings, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
@@ -49,5 +49,5 @@
 declare function createModule(name: string, component: Component): Module;
-declare function createNode(module: Module, children?: Node[]): Node;
-declare function withPlugins(root: Node[], plugins?: Plugin[], augmentations?: Augmentation[]): {
-    config: Node[];
+declare function createNode(module: Module, children?: Node$1[]): Node$1;
+declare function withPlugins(root: Node$1[], plugins?: Plugin[], augmentations?: Augmentation[]): {
+    config: Node$1[];
     augmentation: Augmentation;
@@ -111,2 +111,13 @@ };
 
+type DocumentContextType = {
+    getOwnerDocument: (node?: Node | null) => Document;
+    getOwnerWindow: (node?: Node | null) => Window;
+};
+declare const DocumentContext: React.Context<DocumentContextType | null>;
+declare const useDocumentContext: () => DocumentContextType;
+type DocumentContextProviderProps = React.PropsWithChildren & {
+    nodeRef: React.RefObject<Node>;
+};
+declare function DocumentContextProvider({ nodeRef, children }: DocumentContextProviderProps): React.JSX.Element;
+
 type Topic = keyof EventTypes;
@@ -202,2 +213,4 @@ type Event<T extends Topic> = EventTypes[T];
 
+declare const LightboxRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 declare function Carousel({ carousel }: ComponentProps): React.JSX.Element;
@@ -272,2 +285,2 @@ declare const CarouselModule: 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, 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 };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, type DocumentContextProviderProps, type DocumentContextType, 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, LightboxRoot, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as 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, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

dist/plugins/fullscreen/index.js

@@ -1,2 +0,2 @@
-import { makeUseContext, useLayoutEffect, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { makeUseContext, useDocumentContext, useLayoutEffect, cleanup, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
@@ -22,65 +22,67 @@ import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
     const wasFullscreen = React.useRef(false);
+    const { getOwnerDocument } = useDocumentContext();
     useLayoutEffect(() => {
         var _a, _b, _c, _d;
-        setDisabled(!((_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false));
-    }, []);
+        const ownerDocument = getOwnerDocument();
+        setDisabled(!((_d = (_c = (_b = (_a = ownerDocument.fullscreenEnabled) !== null && _a !== void 0 ? _a : ownerDocument.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : ownerDocument.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : ownerDocument.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false));
+    }, [getOwnerDocument]);
     const getFullscreenElement = React.useCallback(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.webkitFullscreenElement) !== null && _b !== void 0 ? _b : document.mozFullScreenElement) !== null && _c !== void 0 ? _c : document.msFullscreenElement;
-    }, []);
+        var _a;
+        const ownerDocument = getOwnerDocument();
+        const fullscreenElement = ownerDocument.fullscreenElement ||
+            ownerDocument.webkitFullscreenElement ||
+            ownerDocument.mozFullScreenElement ||
+            ownerDocument.msFullscreenElement;
+        return ((_a = fullscreenElement === null || fullscreenElement === void 0 ? void 0 : fullscreenElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || fullscreenElement;
+    }, [getOwnerDocument]);
     const enter = React.useCallback(() => {
         const container = containerRef.current;
-        if (container) {
-            try {
-                if (container.requestFullscreen) {
-                    container.requestFullscreen().catch(() => { });
-                }
-                else if (container.webkitRequestFullscreen) {
-                    container.webkitRequestFullscreen();
-                }
-                else if (container.mozRequestFullScreen) {
-                    container.mozRequestFullScreen();
-                }
-                else if (container.msRequestFullscreen) {
-                    container.msRequestFullscreen();
-                }
+        try {
+            if (container.requestFullscreen) {
+                container.requestFullscreen().catch(() => { });
             }
-            catch (err) {
+            else if (container.webkitRequestFullscreen) {
+                container.webkitRequestFullscreen();
             }
+            else if (container.mozRequestFullScreen) {
+                container.mozRequestFullScreen();
+            }
+            else if (container.msRequestFullscreen) {
+                container.msRequestFullscreen();
+            }
         }
+        catch (err) {
+        }
     }, []);
     const exit = React.useCallback(() => {
-        if (getFullscreenElement()) {
-            try {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen().catch(() => { });
-                }
-                else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                }
-                else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                }
-                else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
+        if (!getFullscreenElement())
+            return;
+        const ownerDocument = getOwnerDocument();
+        try {
+            if (ownerDocument.exitFullscreen) {
+                ownerDocument.exitFullscreen().catch(() => { });
             }
-            catch (err) {
+            else if (ownerDocument.webkitExitFullscreen) {
+                ownerDocument.webkitExitFullscreen();
             }
+            else if (ownerDocument.mozCancelFullScreen) {
+                ownerDocument.mozCancelFullScreen();
+            }
+            else if (ownerDocument.msExitFullscreen) {
+                ownerDocument.msExitFullscreen();
+            }
         }
-    }, [getFullscreenElement]);
+        catch (err) {
+        }
+    }, [getFullscreenElement, getOwnerDocument]);
     React.useEffect(() => {
-        const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
-        const fullscreenChangeListener = () => {
+        const ownerDocument = getOwnerDocument();
+        const listener = () => {
             setFullscreen(getFullscreenElement() === containerRef.current);
         };
-        events.forEach((event) => {
-            document.addEventListener(event, fullscreenChangeListener);
-        });
-        return () => {
-            events.forEach((event) => {
-                document.removeEventListener(event, fullscreenChangeListener);
-            });
-        };
-    }, [getFullscreenElement]);
+        return cleanup(...["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"].map((event) => {
+            ownerDocument.addEventListener(event, listener);
+            return () => ownerDocument.removeEventListener(event, listener);
+        }));
+    }, [getFullscreenElement, getOwnerDocument]);
     const onEnterFullscreen = useEventCallback(() => { var _a; return (_a = on.enterFullscreen) === null || _a === void 0 ? void 0 : _a.call(on); });
@@ -96,13 +98,9 @@ const onExitFullscreen = useEventCallback(() => { var _a; return (_a = on.exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(on); });
     }, [fullscreen, onEnterFullscreen, onExitFullscreen]);
-    const handleAutoFullscreen = useEventCallback(() => { var _a; return (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a(); });
-    React.useEffect(() => {
-        handleAutoFullscreen();
-        return () => exit();
-    }, [handleAutoFullscreen, exit]);
-    const context = React.useMemo(() => ({
-        fullscreen,
-        disabled,
-        enter,
-        exit,
-    }), [fullscreen, disabled, enter, exit]);
+    const handleAutoFullscreen = useEventCallback(() => {
+        var _a;
+        (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a();
+        return exit;
+    });
+    React.useEffect(handleAutoFullscreen, [handleAutoFullscreen]);
+    const context = React.useMemo(() => ({ fullscreen, disabled, enter, exit }), [fullscreen, disabled, enter, exit]);
     React.useImperativeHandle(ref, () => context, [context]);
@@ -109,0 +107,0 @@ return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },

dist/plugins/inline/index.js

@@ -1,2 +0,2 @@
-import { clsx, cssClass, cssVar, createModule } from '../../index.js';
+import { LightboxRoot, clsx, cssClass, cssVar, createModule } from '../../index.js';
 import * as React from 'react';
@@ -6,3 +6,3 @@ import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
 function InlineContainer({ inline: { className, style, ...rest } = {}, styles, children }) {
-    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), style: { [cssVar("controller_overscroll_behavior")]: "contain auto", ...styles.root, ...style }, ...rest }, children));
+    return (React.createElement(LightboxRoot, { className: clsx(cssClass("relative"), className), style: { [cssVar("controller_overscroll_behavior")]: "contain auto", ...styles.root, ...style }, ...rest }, children));
 }
@@ -9,0 +9,0 @@

dist/plugins/thumbnails/index.d.ts

 import * as React from 'react';
-import { PluginProps, PLUGIN_THUMBNAILS, Callback, ContainerRect, ImageFit, RenderFunction, Slide } from '../../types.js';
+import { PluginProps, PLUGIN_THUMBNAILS, Callback, RenderFunction } from '../../types.js';
 
@@ -8,2 +8,6 @@ /** Thumbnails plugin */
 declare module "yet-another-react-lightbox" {
+    interface GenericSlide {
+        /** thumbnail image */
+        thumbnail?: string;
+    }
     interface LightboxProps {
@@ -10,0 +14,0 @@ /** Thumbnails plugin settings */

dist/plugins/thumbnails/index.js

@@ -1,2 +0,2 @@
-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 { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useDocumentContext, useEventCallback, clsx, cssVar, getSlideKey, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
@@ -37,9 +37,13 @@ import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
     }
-    const thumbnailIconClass = cssClass(cssThumbnailPrefix(ELEMENT_ICON));
+    const imageSlideProps = { render, rect, imageFit };
+    if (slide.thumbnail) {
+        return React.createElement(ImageSlide, { slide: { src: slide.thumbnail }, ...imageSlideProps });
+    }
     if (isImageSlide(slide)) {
-        return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
+        return React.createElement(ImageSlide, { slide: slide, ...imageSlideProps });
     }
+    const thumbnailIconClass = cssClass(cssThumbnailPrefix(ELEMENT_ICON));
     if (slide.type === "video") {
         return (React.createElement(React.Fragment, null,
-            slide.poster && (React.createElement(ImageSlide, { key: slide.poster, slide: { src: slide.poster }, render: render, rect: rect, imageFit: imageFit })),
+            slide.poster && React.createElement(ImageSlide, { slide: { src: slide.poster }, ...imageSlideProps }),
             React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
@@ -58,2 +62,3 @@ }
     const { render, styles } = useLightboxProps();
+    const { getOwnerDocument } = useDocumentContext();
     const { width, height, imageFit } = useThumbnailsProps();
@@ -63,6 +68,6 @@ const rect = { width, height };
     React.useEffect(() => {
-        if (fadeOut && document.activeElement === ref.current) {
+        if (fadeOut && getOwnerDocument().activeElement === ref.current) {
             onLoseFocusCallback();
         }
-    }, [fadeOut, onLoseFocusCallback]);
+    }, [fadeOut, onLoseFocusCallback, getOwnerDocument]);
     return (React.createElement("button", { ref: ref, type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
@@ -91,2 +96,9 @@ ...(fadeIn
 }
+function getThumbnailKey(slide) {
+    const { thumbnail, poster } = slide || { thumbnail: "placeholder" };
+    return ((typeof thumbnail === "string" && thumbnail) ||
+        (typeof poster === "string" && poster) ||
+        (slide && getSlideKey(slide)) ||
+        undefined);
+}
 function ThumbnailsTrack({ visible, containerRef }) {
@@ -141,3 +153,3 @@ const track = React.useRef(null);
             const slide = !placeholder ? getSlide(slides, index) : null;
-            const key = [`${index}`, slide ? getSlideKey(slide) : "placeholder"].filter(Boolean).join("|");
+            const key = [`${index}`, getThumbnailKey(slide)].filter(Boolean).join("|");
             items.push({ key, index, slide });
@@ -144,0 +156,0 @@ }

dist/plugins/zoom/index.js

@@ -1,2 +0,2 @@
-import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useDocumentContext, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
@@ -123,2 +123,3 @@ import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
     const { globalIndex } = useLightboxState();
+    const { getOwnerWindow } = useDocumentContext();
     const { containerRef, subscribeSensors } = useController();
@@ -129,3 +130,3 @@ const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
             const { pageX, pageY } = event;
-            const { scrollX, scrollY } = window;
+            const { scrollX, scrollY } = getOwnerWindow();
             const { left, top, width, height } = containerRef.current.getBoundingClientRect();
@@ -135,3 +136,3 @@ return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
         return [];
-    }, [containerRef]);
+    }, [containerRef, getOwnerWindow]);
     const onKeyDown = useEventCallback((event) => {
@@ -138,0 +139,0 @@ const preventDefault = () => {

package.json

 {
   "name": "yet-another-react-lightbox",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

README.md

@@ -79,7 +79,8 @@ # Yet Another React Lightbox
 
-Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a
-concept of "thumbnail" or "original" (or "full size") images. We use responsive
-images instead and recommend you provide multiple files of different resolutions
-for each image. Yet Another React Lightbox automatically populates `srcset` /
-`sizes` attributes and lets the browser decide which image is more appropriate
+Unlike many other lightbox libraries, Yet Another React Lightbox is not limited
+to just two images per slide ("thumbnail" and "original" / "full size").
+Instead, we favor responsive images with automatic resolution switching and
+recommend you provide multiple files of different resolutions for each image
+slide. Yet Another React Lightbox automatically populates `srcset` / `sizes`
+attributes and lets the user's browser decide which image is more appropriate
 for its viewport size.
@@ -86,0 +87,0 @@

No alert changes

Improved metrics

Total package byte prevSize

222159

increased by1.44%

Lines of code

4147

increased by1.07%

Number of lines in readme file

162

increased by0.62%

Published versions last two months

3

increased by50%

No dependency changes