yet-another-react-lightbox 3.17.5 → 3.19.0

package/README.md

@@ -76,11 +76,12 @@ export default function App() {
 
 ## Recommended Setup
 
-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.
 
 ```jsx

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 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';
 
 /** Lightbox component */
@@ -46,9 +46,9 @@ declare function stopNavigationEventsPropagation(): {
 declare function calculatePreload(carousel: CarouselSettings, slides: Slide[], minimum?: number): number;
 
 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;
 };
 
@@ -107,6 +107,17 @@ declare function useSensors<T extends Element>(): UseSensors<T>;
 
 declare function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;
 
+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;
 type Event<T extends Topic> = EventTypes[T];
 type EventCallback<T extends Topic> = (...args: Event<T> extends void ? [] : [event: Event<T>]) => void;
@@ -197,6 +208,8 @@ type ImageSlideProps = Partial<Pick<CarouselSettings, "imageFit" | "imageProps">
 };
 declare function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, style, }: ImageSlideProps): React.JSX.Element;
 
+declare const LightboxRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 declare function Carousel({ carousel }: ComponentProps): React.JSX.Element;
 declare const CarouselModule: Module;
 
@@ -266,4 +279,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, 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 };

package/dist/index.js

@@ -254,6 +254,17 @@ function withPlugins(root, plugins = [], augmentations = []) {
     };
 }
 
+const DocumentContext = React.createContext(null);
+const useDocumentContext = makeUseContext("useDocument", "DocumentContext", DocumentContext);
+function DocumentContextProvider({ nodeRef, children }) {
+    const context = React.useMemo(() => {
+        const getOwnerDocument = (node) => { var _a; return ((_a = (node || nodeRef.current)) === null || _a === void 0 ? void 0 : _a.ownerDocument) || document; };
+        const getOwnerWindow = (node) => { var _a; return ((_a = getOwnerDocument(node)) === null || _a === void 0 ? void 0 : _a.defaultView) || window; };
+        return { getOwnerDocument, getOwnerWindow };
+    }, [nodeRef]);
+    return React.createElement(DocumentContext.Provider, { value: context }, children);
+}
+
 const EventsContext = React.createContext(null);
 const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
 function EventsProvider({ children }) {
@@ -674,6 +685,12 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
                 ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
 }
 
+const LightboxRoot = React.forwardRef(function LightboxRoot({ className, children, ...rest }, ref) {
+    const nodeRef = React.useRef(null);
+    return (React.createElement(DocumentContextProvider, { nodeRef: nodeRef },
+        React.createElement("div", { ref: useForkRef(ref, nodeRef), className: clsx(cssClass("root"), className), ...rest }, children)));
+});
+
 var SwipeState;
 (function (SwipeState) {
     SwipeState[SwipeState["NONE"] = 0] = "NONE";
@@ -921,6 +938,7 @@ function Controller({ children, ...props }) {
     const handleContainerRef = useForkRef(usePreventWheelDefaults({ preventDefaultWheelX, preventDefaultWheelY }), setContainerRef);
     const carouselRef = React.useRef(null);
     const setCarouselRef = useForkRef(carouselRef, undefined);
+    const { getOwnerDocument } = useDocumentContext();
     const isRTL = useRTL();
     const rtl = (value) => (isRTL ? -1 : 1) * (typeof value === "number" ? value : 1);
     const focus = useEventCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
@@ -1111,10 +1129,9 @@ function Controller({ children, ...props }) {
     usePointerSwipe(...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
-        if (controller.focus) {
-            if (document.querySelector(`.${cssClass(MODULE_PORTAL)} .${cssClass(cssContainerPrefix())}`)) {
-                focus();
-            }
+        if (controller.focus &&
+            getOwnerDocument().querySelector(`.${cssClass(MODULE_PORTAL)} .${cssClass(cssContainerPrefix())}`)) {
+            focus();
         }
     });
     React.useEffect(focusOnMount, [focusOnMount]);
@@ -1317,19 +1334,21 @@ function padScrollbar(element, padding, rtl) {
 }
 function NoScroll({ noScroll: { disabled }, children }) {
     const rtl = useRTL();
-    useLayoutEffect(() => {
+    const { getOwnerDocument, getOwnerWindow } = useDocumentContext();
+    React.useEffect(() => {
         if (disabled)
             return () => { };
         const cleanup = [];
-        const { body, documentElement } = document;
-        const scrollbar = Math.round(window.innerWidth - documentElement.clientWidth);
+        const ownerWindow = getOwnerWindow();
+        const { body, documentElement } = getOwnerDocument();
+        const scrollbar = Math.round(ownerWindow.innerWidth - documentElement.clientWidth);
         if (scrollbar > 0) {
             cleanup.push(padScrollbar(body, scrollbar, rtl));
             const elements = body.getElementsByTagName("*");
             for (let i = 0; i < elements.length; i += 1) {
                 const element = elements[i];
                 if (isHTMLElement(element) &&
-                    window.getComputedStyle(element).getPropertyValue("position") === "fixed" &&
+                    ownerWindow.getComputedStyle(element).getPropertyValue("position") === "fixed" &&
                     !element.classList.contains(noScrollPadding)) {
                     cleanup.push(padScrollbar(element, scrollbar, rtl));
                 }
@@ -1340,7 +1359,7 @@ function NoScroll({ noScroll: { disabled }, children }) {
             body.classList.remove(noScroll);
             cleanup.forEach((clean) => clean());
         };
-    }, [rtl, disabled]);
+    }, [rtl, disabled, getOwnerDocument, getOwnerWindow]);
     return React.createElement(React.Fragment, null, children);
 }
 const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);
@@ -1423,7 +1442,7 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
         }
     }, [handleEnter, handleCleanup]);
     return mounted
-        ? createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), role: "presentation", "aria-live": "polite", style: {
+        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), role: "presentation", "aria-live": "polite", style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
@@ -1508,4 +1527,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, 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 };
+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, DocumentContext, DocumentContextProvider, 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, LightboxRoot, 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, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/plugins/fullscreen/index.js

@@ -1,4 +1,4 @@
-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';
 import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
 
@@ -19,69 +19,71 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }
     const [disabled, setDisabled] = React.useState();
     const [fullscreen, setFullscreen] = React.useState(false);
     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(() => { });
+            }
+            else if (container.webkitRequestFullscreen) {
+                container.webkitRequestFullscreen();
             }
-            catch (err) {
+            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();
+            }
+        }
+        catch (err) {
         }
-    }, [getFullscreenElement]);
+    }, [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); });
     const onExitFullscreen = useEventCallback(() => { var _a; return (_a = on.exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(on); });
     React.useEffect(() => {
@@ -92,17 +94,13 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }
             (fullscreen ? onEnterFullscreen : onExitFullscreen)();
         }
     }, [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]);
     return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
         React.createElement(FullscreenContext.Provider, { value: context }, children)));

package/dist/plugins/inline/index.js

@@ -1,9 +1,9 @@
-import { clsx, cssClass, cssVar, createModule } from '../../index.js';
+import { LightboxRoot, clsx, cssClass, cssVar, createModule } from '../../index.js';
 import * as React from 'react';
 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));
 }
 
 function Inline({ augment, replace, remove }) {

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

@@ -1,10 +1,14 @@
 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';
 
 /** Thumbnails plugin */
 declare function Thumbnails({ augment, contains, append, addParent }: PluginProps): void;
 
 declare module "yet-another-react-lightbox" {
+    interface GenericSlide {
+        /** thumbnail image */
+        thumbnail?: string;
+    }
     interface LightboxProps {
         /** Thumbnails plugin settings */
         thumbnails?: {

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, 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';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
@@ -34,13 +34,17 @@ function renderThumbnail({ slide, render, rect, imageFit }) {
     if (customThumbnail) {
         return customThumbnail;
     }
-    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 })));
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
@@ -54,14 +58,15 @@ const DURATION = "duration";
 function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder, onLoseFocus }) {
     const ref = React.useRef(null);
     const { render, styles } = useLightboxProps();
+    const { getOwnerDocument } = useDocumentContext();
     const { width, height, imageFit } = useThumbnailsProps();
     const rect = { width, height };
     const onLoseFocusCallback = useEventCallback(onLoseFocus);
     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: {
             ...(fadeIn
                 ? {
@@ -85,6 +90,13 @@ function isHorizontal(position) {
 function boxSize(thumbnails, dimension) {
     return dimension + 2 * (thumbnails.border + thumbnails.padding) + thumbnails.gap;
 }
+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 }) {
     const track = React.useRef(null);
     const isRTL = useRTL();
@@ -134,7 +146,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
                 (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("|");
+            const key = [`${index}`, getThumbnailKey(slide)].filter(Boolean).join("|");
             items.push({ key, index, slide });
         }
     }

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 }) => (React.createElement("source", { key: [src, type].join("|"), 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) {

package/dist/plugins/zoom/index.js

@@ -1,4 +1,4 @@
-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';
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
 
@@ -120,17 +120,18 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
     const lastPointerDown = React.useRef(0);
     const pinchZoomDistance = React.useRef();
     const { globalIndex } = useLightboxState();
+    const { getOwnerWindow } = useDocumentContext();
     const { containerRef, subscribeSensors } = useController();
     const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
     const translateCoordinates = React.useCallback((event) => {
         if (containerRef.current) {
             const { pageX, pageY } = event;
-            const { scrollX, scrollY } = window;
+            const { scrollX, scrollY } = getOwnerWindow();
             const { left, top, width, height } = containerRef.current.getBoundingClientRect();
             return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
         }
         return [];
-    }, [containerRef]);
+    }, [containerRef, getOwnerWindow]);
     const onKeyDown = useEventCallback((event) => {
         const preventDefault = () => {
             event.preventDefault();

package/package.json

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