yet-another-react-lightbox 3.6.0 → 3.7.0

package/README.md

@@ -123,16 +123,16 @@ See [examples](https://yet-another-react-lightbox.com/examples) on the documenta
 
 ## Plugins
 
-Yet Another React Lightbox allows you to add optional features based on your requirements via plugins.
+Yet Another React Lightbox allows you to add optional features to your project based on your requirements via plugins.
 
-The following plugins come bundled in the package:
+The following plugins are bundled in the package:
 
 - [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
   description
 - [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds slides counter
 - [Download](https://yet-another-react-lightbox.com/plugins/download) - adds download button
 - [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
-- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - adds support for inline rendering mode
+- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms the lightbox into an image carousel
 - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow autoplay feature
 - [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds thumbnails track
 - [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support for video slides

package/dist/index.d.ts

@@ -79,7 +79,7 @@ declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | n
 
 declare const useLayoutEffect: typeof React.useEffect;
 
-declare function useLoseFocus(disabled?: boolean): {
+declare function useLoseFocus(focus: () => void, disabled?: boolean): {
     onFocus: () => void;
     onBlur: () => void;
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { ACTION_CLOSE, IMAGE_FIT_CONTAIN, MODULE_CONTROLLER, IMAGE_FIT_COVER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_CANCEL, EVENT_ON_WHEEL, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, EVENT_ON_KEY_UP, VK_ESCAPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_DOWN, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, MODULE_CAROUSEL, CLASS_FULLSIZE, VK_ARROW_LEFT, VK_ARROW_RIGHT, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
+import { ACTION_CLOSE, IMAGE_FIT_CONTAIN, MODULE_CONTROLLER, IMAGE_FIT_COVER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_CANCEL, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_WHEEL, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, VK_ESCAPE, CLASS_FLEX_CENTER, MODULE_CAROUSEL, CLASS_FULLSIZE, VK_ARROW_LEFT, VK_ARROW_RIGHT, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
 import { createPortal } from 'react-dom';
 export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
 
@@ -34,6 +34,7 @@ const LightboxDefaultProps = {
         focus: true,
         aria: false,
         touchAction: "none",
+        closeOnPullDown: false,
         closeOnBackdropClick: false,
     },
     portal: {},
@@ -488,14 +489,176 @@ function useForkRef(refA, refB) {
         }, [refA, refB]);
 }
 
-function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
+function useLoseFocus(focus, disabled = false) {
+    const focused = React.useRef(disabled);
+    useLayoutEffect(() => {
+        if (disabled) {
+            focus();
+        }
+    }, [disabled, focus]);
+    const onFocus = React.useCallback(() => {
+        focused.current = true;
+    }, []);
+    const onBlur = React.useCallback(() => {
+        focused.current = false;
+    }, []);
+    return { onFocus, onBlur };
+}
+
+function useRTL() {
+    const [isRTL, setIsRTL] = React.useState(false);
+    useLayoutEffect(() => {
+        setIsRTL(window.getComputedStyle(window.document.documentElement).direction === "rtl");
+    }, []);
+    return isRTL;
+}
+
+function useSensors() {
+    const [subscribers] = React.useState({});
+    return React.useMemo(() => {
+        const notifySubscribers = (type, event) => {
+            var _a;
+            (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => {
+                if (!event.isPropagationStopped())
+                    listener(event);
+            });
+        };
+        return {
+            registerSensors: {
+                onPointerDown: (event) => notifySubscribers(EVENT_ON_POINTER_DOWN, event),
+                onPointerMove: (event) => notifySubscribers(EVENT_ON_POINTER_MOVE, event),
+                onPointerUp: (event) => notifySubscribers(EVENT_ON_POINTER_UP, event),
+                onPointerLeave: (event) => notifySubscribers(EVENT_ON_POINTER_LEAVE, event),
+                onPointerCancel: (event) => notifySubscribers(EVENT_ON_POINTER_CANCEL, event),
+                onKeyDown: (event) => notifySubscribers(EVENT_ON_KEY_DOWN, event),
+                onKeyUp: (event) => notifySubscribers(EVENT_ON_KEY_UP, event),
+                onWheel: (event) => notifySubscribers(EVENT_ON_WHEEL, event),
+            },
+            subscribeSensors: (type, callback) => {
+                if (!subscribers[type]) {
+                    subscribers[type] = [];
+                }
+                subscribers[type].unshift(callback);
+                return () => {
+                    const listeners = subscribers[type];
+                    if (listeners) {
+                        listeners.splice(0, listeners.length, ...listeners.filter((el) => el !== callback));
+                    }
+                };
+            },
+        };
+    }, [subscribers]);
+}
+
+function useThrottle(callback, delay) {
+    const lastCallbackTime = React.useRef(0);
+    const delayCallback = useDelay();
+    const executeCallback = useEventCallback((...args) => {
+        lastCallbackTime.current = Date.now();
+        callback(args);
+    });
+    return React.useCallback((...args) => {
+        delayCallback(() => {
+            executeCallback(args);
+        }, delay - (Date.now() - lastCallbackTime.current));
+    }, [delay, executeCallback, delayCallback]);
+}
+
+const slidePrefix = makeComposePrefix("slide");
+const slideImagePrefix = makeComposePrefix("slide_image");
+function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
+    const { publish } = useEvents();
+    const { setTimeout } = useTimeouts();
+    const imageRef = React.useRef(null);
+    React.useEffect(() => {
+        if (offset === 0) {
+            publish(activeSlideStatus(status));
+        }
+    }, [offset, status, publish]);
+    const handleLoading = useEventCallback((img) => {
+        ("decode" in img ? img.decode() : Promise.resolve())
+            .catch(() => { })
+            .then(() => {
+            if (!img.parentNode) {
+                return;
+            }
+            setStatus(SLIDE_STATUS_COMPLETE);
+            setTimeout(() => {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(img);
+            }, 0);
+        });
+    });
+    const setImageRef = React.useCallback((img) => {
+        imageRef.current = img;
+        if (img === null || img === void 0 ? void 0 : img.complete) {
+            handleLoading(img);
+        }
+    }, [handleLoading]);
+    const handleOnLoad = React.useCallback((event) => {
+        handleLoading(event.currentTarget);
+    }, [handleLoading]);
+    const onError = React.useCallback(() => {
+        setStatus(SLIDE_STATUS_ERROR);
+    }, []);
+    const cover = isImageFitCover(image, imageFit);
+    const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
+    const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
+    const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
+    const defaultStyle = maxWidth && maxHeight
+        ? {
+            maxWidth: `min(${maxWidth}px, 100%)`,
+            maxHeight: `min(${maxHeight}px, 100%)`,
+        }
+        : {
+            maxWidth: "100%",
+            maxHeight: "100%",
+        };
+    const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
+    const estimateActualWidth = () => rect && !cover && image.width && image.height ? (rect.height / image.height) * image.width : Number.MAX_VALUE;
+    const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: onError, onClick: onClick, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))), draggable: false, alt: image.alt, style: { ...defaultStyle, ...style }, sizes: sizes, srcSet: srcSet, src: image.src }),
+        status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
+            status === SLIDE_STATUS_LOADING &&
+                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
+            status === SLIDE_STATUS_ERROR &&
+                ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
+}
+
+var SwipeState;
+(function (SwipeState) {
+    SwipeState[SwipeState["NONE"] = 0] = "NONE";
+    SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
+    SwipeState[SwipeState["ANIMATION"] = 2] = "ANIMATION";
+})(SwipeState || (SwipeState = {}));
+
+function usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled) {
+    React.useEffect(() => {
+        if (disabled)
+            return () => { };
+        return cleanup(subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp));
+    }, [subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled]);
+}
+
+var Gesture;
+(function (Gesture) {
+    Gesture[Gesture["NONE"] = 0] = "NONE";
+    Gesture[Gesture["SWIPE"] = 1] = "SWIPE";
+    Gesture[Gesture["PULL_DOWN"] = 2] = "PULL_DOWN";
+})(Gesture || (Gesture = {}));
+const SWIPE_THRESHOLD = 30;
+function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, onPullDownStart, onPullDownProgress, onPullDownFinish, onPullDownCancel) {
     const offset = React.useRef(0);
     const pointers = React.useRef([]);
     const activePointer = React.useRef();
     const startTime = React.useRef(0);
+    const gesture = React.useRef(Gesture.NONE);
     const clearPointer = React.useCallback((event) => {
         if (activePointer.current === event.pointerId) {
             activePointer.current = undefined;
+            gesture.current = Gesture.NONE;
         }
         const currentPointers = pointers.current;
         currentPointers.splice(0, currentPointers.length, ...currentPointers.filter((p) => p.pointerId !== event.pointerId));
@@ -513,14 +676,25 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
             activePointer.current === event.pointerId) {
             const duration = Date.now() - startTime.current;
             const currentOffset = offset.current;
-            if (Math.abs(currentOffset) > 0.3 * containerWidth ||
-                (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)) {
-                onSwipeFinish(currentOffset, duration);
+            if (gesture.current === Gesture.SWIPE) {
+                if (Math.abs(currentOffset) > 0.3 * containerWidth ||
+                    (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)) {
+                    onSwipeFinish(currentOffset, duration);
+                }
+                else {
+                    onSwipeCancel(currentOffset);
+                }
             }
-            else {
-                onSwipeCancel(currentOffset);
+            else if (gesture.current === Gesture.PULL_DOWN) {
+                if (currentOffset > 2 * SWIPE_THRESHOLD) {
+                    onPullDownFinish(currentOffset, duration);
+                }
+                else {
+                    onPullDownCancel(currentOffset);
+                }
             }
             offset.current = 0;
+            gesture.current = Gesture.NONE;
         }
         clearPointer(event);
     });
@@ -539,22 +713,35 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
             }
             const deltaX = event.clientX - pointer.clientX;
             const deltaY = event.clientY - pointer.clientY;
-            if (activePointer.current === undefined &&
-                isSwipeValid(deltaX) &&
-                Math.abs(deltaX) > Math.abs(deltaY) &&
-                Math.abs(deltaX) > 30) {
-                addPointer(event);
-                activePointer.current = event.pointerId;
-                startTime.current = Date.now();
-                onSwipeStart();
+            if (activePointer.current === undefined) {
+                const startGesture = (newGesture) => {
+                    addPointer(event);
+                    activePointer.current = event.pointerId;
+                    startTime.current = Date.now();
+                    gesture.current = newGesture;
+                };
+                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD && isSwipeValid(deltaX)) {
+                    startGesture(Gesture.SWIPE);
+                    onSwipeStart();
+                }
+                else if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > SWIPE_THRESHOLD) {
+                    startGesture(Gesture.PULL_DOWN);
+                    onPullDownStart();
+                }
             }
             else if (isCurrentPointer) {
-                offset.current = deltaX;
-                onSwipeProgress(deltaX);
+                if (gesture.current === Gesture.SWIPE) {
+                    offset.current = deltaX;
+                    onSwipeProgress(deltaX);
+                }
+                else if (gesture.current === Gesture.PULL_DOWN) {
+                    offset.current = deltaY;
+                    onPullDownProgress(deltaY);
+                }
             }
         }
     });
-    React.useEffect(() => cleanup(subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
+    usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp);
 }
 
 const WHEEL = "wheel";
@@ -665,13 +852,6 @@ function useWheelSwipe(swipeState, subscribeSensors, isSwipeValid, containerWidt
     React.useEffect(() => subscribeSensors(EVENT_ON_WHEEL, onWheel), [subscribeSensors, onWheel]);
 }
 
-var SwipeState;
-(function (SwipeState) {
-    SwipeState[SwipeState["NONE"] = 0] = "NONE";
-    SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
-    SwipeState[SwipeState["ANIMATION"] = 2] = "ANIMATION";
-})(SwipeState || (SwipeState = {}));
-
 const cssContainerPrefix = makeComposePrefix("container");
 const ControllerContext = React.createContext(null);
 const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
@@ -814,7 +994,17 @@ function Controller({ children, ...props }) {
         (offset, duration) => swipe({ offset, duration, count: 1 }),
         (offset) => swipe({ offset, count: 0 }),
     ];
-    usePointerSwipe(...swipeParams);
+    const pullDownParams = [
+        () => { },
+        () => { },
+        () => {
+            if (controller.closeOnPullDown) {
+                close();
+            }
+        },
+        () => { },
+    ];
+    usePointerSwipe(...swipeParams, ...pullDownParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         var _a;
@@ -881,145 +1071,6 @@ function Controller({ children, ...props }) {
 }
 const ControllerModule = createModule(MODULE_CONTROLLER, Controller);
 
-function useLoseFocus(disabled = false) {
-    const focused = React.useRef(disabled);
-    const { focus } = useController();
-    useLayoutEffect(() => {
-        if (disabled) {
-            focus();
-        }
-    }, [disabled, focus]);
-    const onFocus = React.useCallback(() => {
-        focused.current = true;
-    }, []);
-    const onBlur = React.useCallback(() => {
-        focused.current = false;
-    }, []);
-    return { onFocus, onBlur };
-}
-
-function useRTL() {
-    const [isRTL, setIsRTL] = React.useState(false);
-    useLayoutEffect(() => {
-        setIsRTL(window.getComputedStyle(window.document.documentElement).direction === "rtl");
-    }, []);
-    return isRTL;
-}
-
-function useSensors() {
-    const [subscribers] = React.useState({});
-    return React.useMemo(() => {
-        const notifySubscribers = (type, event) => {
-            var _a;
-            (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => {
-                if (!event.isPropagationStopped())
-                    listener(event);
-            });
-        };
-        return {
-            registerSensors: {
-                onPointerDown: (event) => notifySubscribers(EVENT_ON_POINTER_DOWN, event),
-                onPointerMove: (event) => notifySubscribers(EVENT_ON_POINTER_MOVE, event),
-                onPointerUp: (event) => notifySubscribers(EVENT_ON_POINTER_UP, event),
-                onPointerLeave: (event) => notifySubscribers(EVENT_ON_POINTER_LEAVE, event),
-                onPointerCancel: (event) => notifySubscribers(EVENT_ON_POINTER_CANCEL, event),
-                onKeyDown: (event) => notifySubscribers(EVENT_ON_KEY_DOWN, event),
-                onKeyUp: (event) => notifySubscribers(EVENT_ON_KEY_UP, event),
-                onWheel: (event) => notifySubscribers(EVENT_ON_WHEEL, event),
-            },
-            subscribeSensors: (type, callback) => {
-                if (!subscribers[type]) {
-                    subscribers[type] = [];
-                }
-                subscribers[type].unshift(callback);
-                return () => {
-                    const listeners = subscribers[type];
-                    if (listeners) {
-                        listeners.splice(0, listeners.length, ...listeners.filter((el) => el !== callback));
-                    }
-                };
-            },
-        };
-    }, [subscribers]);
-}
-
-function useThrottle(callback, delay) {
-    const lastCallbackTime = React.useRef(0);
-    const delayCallback = useDelay();
-    const executeCallback = useEventCallback((...args) => {
-        lastCallbackTime.current = Date.now();
-        callback(args);
-    });
-    return React.useCallback((...args) => {
-        delayCallback(() => {
-            executeCallback(args);
-        }, delay - (Date.now() - lastCallbackTime.current));
-    }, [delay, executeCallback, delayCallback]);
-}
-
-const slidePrefix = makeComposePrefix("slide");
-const slideImagePrefix = makeComposePrefix("slide_image");
-function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
-    const { publish } = useEvents();
-    const { setTimeout } = useTimeouts();
-    const imageRef = React.useRef(null);
-    React.useEffect(() => {
-        if (offset === 0) {
-            publish(activeSlideStatus(status));
-        }
-    }, [offset, status, publish]);
-    const handleLoading = useEventCallback((img) => {
-        ("decode" in img ? img.decode() : Promise.resolve())
-            .catch(() => { })
-            .then(() => {
-            if (!img.parentNode) {
-                return;
-            }
-            setStatus(SLIDE_STATUS_COMPLETE);
-            setTimeout(() => {
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad(img);
-            }, 0);
-        });
-    });
-    const setImageRef = React.useCallback((img) => {
-        imageRef.current = img;
-        if (img === null || img === void 0 ? void 0 : img.complete) {
-            handleLoading(img);
-        }
-    }, [handleLoading]);
-    const handleOnLoad = React.useCallback((event) => {
-        handleLoading(event.currentTarget);
-    }, [handleLoading]);
-    const onError = React.useCallback(() => {
-        setStatus(SLIDE_STATUS_ERROR);
-    }, []);
-    const cover = isImageFitCover(image, imageFit);
-    const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
-    const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
-    const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
-    const defaultStyle = maxWidth && maxHeight
-        ? {
-            maxWidth: `min(${maxWidth}px, 100%)`,
-            maxHeight: `min(${maxHeight}px, 100%)`,
-        }
-        : {
-            maxWidth: "100%",
-            maxHeight: "100%",
-        };
-    const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
-    const estimateActualWidth = () => rect && !cover && image.width && image.height ? (rect.height / image.height) * image.width : Number.MAX_VALUE;
-    const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: onError, onClick: onClick, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))), draggable: false, alt: image.alt, style: { ...defaultStyle, ...style }, sizes: sizes, srcSet: srcSet, src: image.src }),
-        status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
-            status === SLIDE_STATUS_LOADING &&
-                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
-            status === SLIDE_STATUS_ERROR &&
-                ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
-}
-
 function cssPrefix$2(value) {
     return composePrefix(MODULE_CAROUSEL, value);
 }
@@ -1087,7 +1138,7 @@ function Carousel({ carousel: { finite, preload, padding, spacing } }) {
 const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);
 
 function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }) {
-    return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
+    return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(useController().focus, disabled) }));
 }
 function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
     var _a;
@@ -1314,4 +1365,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, on, plugin
                 React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
 }
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, 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, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useRTL, useSensors, useThrottle, useTimeouts, withPlugins };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, 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, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerEvents, useRTL, useSensors, useThrottle, useTimeouts, withPlugins };

package/dist/plugins/slideshow/index.js

@@ -94,7 +94,7 @@ const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V
 function SlideshowButton() {
     const { playing, disabled, play, pause } = useSlideshow();
     const { render } = useLightboxProps();
-    const focusListeners = useLoseFocus(disabled);
+    const focusListeners = useLoseFocus(useController().focus, disabled);
     if (render.buttonSlideshow) {
         return React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, disabled, play, pause }));
     }

package/dist/plugins/thumbnails/index.js

@@ -80,9 +80,8 @@ function isHorizontal(position) {
 function boxSize(thumbnails, dimension, includeGap) {
     return dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
 }
-function ThumbnailsTrack({ containerRef }) {
+function ThumbnailsTrack({ visible, containerRef }) {
     const track = React.useRef(null);
-    const { visible } = useThumbnails();
     const { carousel, styles } = useLightboxProps();
     const { slides, globalIndex, animation } = useLightboxState();
     const { publish, subscribe } = useEvents();
@@ -222,9 +221,9 @@ function ThumbnailsContextProvider({ children, ...props }) {
     return (React.createElement(LightboxPropsProvider, { ...props },
         React.createElement(ThumbnailsContext.Provider, { value: context },
             React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${position}`))) },
-                ["start", "top"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef }),
+                ["start", "top"].includes(position) && (React.createElement(ThumbnailsTrack, { containerRef: containerRef, visible: visible })),
                 React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
-                ["end", "bottom"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef })))));
+                ["end", "bottom"].includes(position) && (React.createElement(ThumbnailsTrack, { containerRef: containerRef, visible: visible }))))));
 }
 
 const thumbnailsIcon = () => (React.createElement(React.Fragment, null,

package/dist/plugins/zoom/index.js

@@ -1,6 +1,6 @@
-import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useController, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
+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 * as React from 'react';
-import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_CANCEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, PLUGIN_ZOOM } from '../../types.js';
+import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, PLUGIN_ZOOM } from '../../types.js';
 
 const defaultZoomProps = {
     maxZoomPixelRatio: 1,
@@ -255,13 +255,14 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
         lastPointerDown.current = 0;
         pinchZoomDistance.current = undefined;
     }, []);
+    usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled);
     React.useEffect(cleanupSensors, [globalIndex, cleanupSensors]);
     React.useEffect(() => {
         if (!disabled) {
-            return cleanup(cleanupSensors, subscribeSensors(EVENT_ON_KEY_DOWN, onKeyDown), subscribeSensors(EVENT_ON_WHEEL, onWheel), subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp));
+            return cleanup(cleanupSensors, subscribeSensors(EVENT_ON_KEY_DOWN, onKeyDown), subscribeSensors(EVENT_ON_WHEEL, onWheel));
         }
         return () => { };
-    }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel, onPointerDown, onPointerMove, onPointerUp]);
+    }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel]);
 }
 
 function getCurrentSource(slides, currentIndex) {

package/dist/types.d.ts

@@ -213,6 +213,8 @@ interface ControllerSettings {
     touchAction: "none" | "pan-y";
     /** if `true`, set ARIA attributes on the controller div */
     aria: boolean;
+    /** if `true`, close the lightbox on pull-down gesture */
+    closeOnPullDown: boolean;
     /** if `true`, close the lightbox when the backdrop is clicked */
     closeOnBackdropClick: boolean;
 }

package/package.json

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