yet-another-react-lightbox 3.15.6 → 3.17.0

package/README.md

@@ -34,6 +34,10 @@ extendable.
 
 [https://yet-another-react-lightbox.com/examples](https://yet-another-react-lightbox.com/examples)
 
+## Changelog
+
+[https://github.com/igordanchenko/yet-another-react-lightbox/releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)
+
 ## Installation
 
 ```shell

package/dist/index.d.ts

@@ -202,11 +202,11 @@ declare const CarouselModule: Module;
 declare enum SwipeState {
     NONE = 0,
     SWIPE = 1,
-    PULL_DOWN = 2,
+    PULL = 2,
     ANIMATION = 3
 }
 
-declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, pullDownEnabled: boolean, onPullDownStart: () => void, onPullDownProgress: (offset: number) => void, onPullDownFinish: (offset: number, duration: number) => void, onPullDownCancel: (offset: number) => void): void;
+declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, pullUpEnabled: boolean, pullDownEnabled: boolean, onPullStart: () => void, onPullProgress: (offset: number) => void, onPullFinish: (offset: number, duration: number) => void, onPullCancel: (offset: number) => void): void;
 
 /** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
  * this has to be done via non-passive native event handler */

package/dist/index.js

@@ -110,6 +110,7 @@ const LightboxDefaultProps = {
         focus: true,
         aria: false,
         touchAction: "none",
+        closeOnPullUp: false,
         closeOnPullDown: false,
         closeOnBackdropClick: false,
     },
@@ -639,7 +640,7 @@ var SwipeState;
 (function (SwipeState) {
     SwipeState[SwipeState["NONE"] = 0] = "NONE";
     SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
-    SwipeState[SwipeState["PULL_DOWN"] = 2] = "PULL_DOWN";
+    SwipeState[SwipeState["PULL"] = 2] = "PULL";
     SwipeState[SwipeState["ANIMATION"] = 3] = "ANIMATION";
 })(SwipeState || (SwipeState = {}));
 
@@ -653,10 +654,10 @@ var Gesture;
 (function (Gesture) {
     Gesture[Gesture["NONE"] = 0] = "NONE";
     Gesture[Gesture["SWIPE"] = 1] = "SWIPE";
-    Gesture[Gesture["PULL_DOWN"] = 2] = "PULL_DOWN";
+    Gesture[Gesture["PULL"] = 2] = "PULL";
 })(Gesture || (Gesture = {}));
 const SWIPE_THRESHOLD = 30;
-function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, pullDownEnabled, onPullDownStart, onPullDownProgress, onPullDownFinish, onPullDownCancel) {
+function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, pullUpEnabled, pullDownEnabled, onPullStart, onPullProgress, onPullFinish, onPullCancel) {
     const offset = React.useRef(0);
     const pointers = React.useRef([]);
     const activePointer = React.useRef();
@@ -678,6 +679,7 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
     const onPointerDown = useEventCallback((event) => {
         addPointer(event);
     });
+    const exceedsPullThreshold = (value, threshold) => (pullDownEnabled && value > threshold) || (pullUpEnabled && value < -threshold);
     const onPointerUp = useEventCallback((event) => {
         if (pointers.current.find((x) => x.pointerId === event.pointerId) && activePointer.current === event.pointerId) {
             const duration = Date.now() - startTime.current;
@@ -691,12 +693,12 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
                     onSwipeCancel(currentOffset);
                 }
             }
-            else if (gesture.current === Gesture.PULL_DOWN) {
-                if (currentOffset > 2 * SWIPE_THRESHOLD) {
-                    onPullDownFinish(currentOffset, duration);
+            else if (gesture.current === Gesture.PULL) {
+                if (exceedsPullThreshold(currentOffset, 2 * SWIPE_THRESHOLD)) {
+                    onPullFinish(currentOffset, duration);
                 }
                 else {
-                    onPullDownCancel(currentOffset);
+                    onPullCancel(currentOffset);
                 }
             }
             offset.current = 0;
@@ -730,9 +732,9 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
                     startGesture(Gesture.SWIPE);
                     onSwipeStart();
                 }
-                else if (pullDownEnabled && Math.abs(deltaY) > Math.abs(deltaX) && deltaY > SWIPE_THRESHOLD) {
-                    startGesture(Gesture.PULL_DOWN);
-                    onPullDownStart();
+                else if (Math.abs(deltaY) > Math.abs(deltaX) && exceedsPullThreshold(deltaY, SWIPE_THRESHOLD)) {
+                    startGesture(Gesture.PULL);
+                    onPullStart();
                 }
             }
             else if (isCurrentPointer) {
@@ -740,9 +742,9 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
                     offset.current = deltaX;
                     onSwipeProgress(deltaX);
                 }
-                else if (gesture.current === Gesture.PULL_DOWN) {
+                else if (gesture.current === Gesture.PULL) {
                     offset.current = deltaY;
-                    onPullDownProgress(deltaY);
+                    onPullProgress(deltaY);
                 }
             }
         }
@@ -869,13 +871,13 @@ function Controller({ children, ...props }) {
     const dispatch = useLightboxDispatch();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
     const swipeOffset = React.useRef(0);
-    const pullDownOffset = React.useRef(0);
-    const pullDownOpacity = React.useRef(1);
+    const pullOffset = React.useRef(0);
+    const pullOpacity = React.useRef(1);
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
     const cleanupAnimationIncrement = useDelay();
     const cleanupSwipeOffset = useDelay();
-    const cleanupPullDownOffset = useDelay();
+    const cleanupPullOffset = useDelay();
     const { containerRef, setContainerRef, containerRect } = useContainerRect();
     const handleContainerRef = useForkRef(usePreventSwipeNavigation(), setContainerRef);
     const carouselRef = React.useRef(null);
@@ -896,19 +898,26 @@ function Controller({ children, ...props }) {
         swipeOffset.current = offset;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
     };
-    const { closeOnPullDown } = controller;
-    const setPullDownOffset = (offset) => {
+    const { closeOnPullUp, closeOnPullDown } = controller;
+    const setPullOffset = (offset) => {
         var _a, _b;
-        pullDownOffset.current = offset;
-        pullDownOpacity.current = (() => {
+        pullOffset.current = offset;
+        pullOpacity.current = (() => {
             const threshold = 60;
             const minOpacity = 0.5;
-            return Math.min(Math.max(round(1 - (offset / threshold) * (1 - minOpacity), 2), minOpacity), 1);
+            const offsetValue = (() => {
+                if (closeOnPullDown && offset > 0)
+                    return offset;
+                if (closeOnPullUp && offset < 0)
+                    return -offset;
+                return 0;
+            })();
+            return Math.min(Math.max(round(1 - (offsetValue / threshold) * (1 - minOpacity), 2), minOpacity), 1);
         })();
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("pull_down_offset"), `${Math.round(offset)}px`);
-        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty(cssVar("pull_down_opacity"), `${pullDownOpacity.current}`);
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("pull_offset"), `${Math.round(offset)}px`);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty(cssVar("pull_opacity"), `${pullOpacity.current}`);
     };
-    const { prepareAnimation: preparePullDownAnimation } = useAnimation(carouselRef, (snapshot, rect, translate) => {
+    const { prepareAnimation: preparePullAnimation } = useAnimation(carouselRef, (snapshot, rect, translate) => {
         if (carouselRef.current && containerRect) {
             return {
                 keyframes: [
@@ -924,20 +933,20 @@ function Controller({ children, ...props }) {
         }
         return undefined;
     });
-    const pullDown = (offset, cancel) => {
-        if (closeOnPullDown) {
-            setPullDownOffset(offset);
+    const pull = (offset, cancel) => {
+        if (closeOnPullUp || closeOnPullDown) {
+            setPullOffset(offset);
             let duration = 0;
             if (carouselRef.current) {
                 duration = animation.fade * (cancel ? 2 : 1);
-                preparePullDownAnimation({
+                preparePullAnimation({
                     rect: carouselRef.current.getBoundingClientRect(),
-                    opacity: pullDownOpacity.current,
+                    opacity: pullOpacity.current,
                     duration,
                 });
             }
-            cleanupPullDownOffset(() => {
-                setPullDownOffset(0);
+            cleanupPullOffset(() => {
+                setPullOffset(0);
                 setSwipeState(SwipeState.NONE);
             }, duration);
             setSwipeState(SwipeState.ANIMATION);
@@ -1051,17 +1060,17 @@ function Controller({ children, ...props }) {
         (offset, duration) => swipe({ offset, duration, count: 1 }),
         (offset) => swipe({ offset, count: 0 }),
     ];
-    const pullDownParams = [
+    const pullParams = [
         () => {
             if (closeOnPullDown) {
-                setSwipeState(SwipeState.PULL_DOWN);
+                setSwipeState(SwipeState.PULL);
             }
         },
-        (offset) => setPullDownOffset(offset),
-        (offset) => pullDown(offset),
-        (offset) => pullDown(offset, true),
+        (offset) => setPullOffset(offset),
+        (offset) => pull(offset),
+        (offset) => pull(offset, true),
     ];
-    usePointerSwipe(...swipeParams, closeOnPullDown, ...pullDownParams);
+    usePointerSwipe(...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         if (controller.focus) {
@@ -1114,10 +1123,10 @@ function Controller({ children, ...props }) {
             ...(swipeState === SwipeState.SWIPE
                 ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset.current)}px` }
                 : null),
-            ...(swipeState === SwipeState.PULL_DOWN
+            ...(swipeState === SwipeState.PULL
                 ? {
-                    [cssVar("pull_down_offset")]: `${Math.round(pullDownOffset.current)}px`,
-                    [cssVar("pull_down_opacity")]: `${pullDownOpacity.current}`,
+                    [cssVar("pull_offset")]: `${Math.round(pullOffset.current)}px`,
+                    [cssVar("pull_opacity")]: `${pullOpacity.current}`,
                 }
                 : null),
             ...(controller.touchAction !== "none" ? { [cssVar("controller_touch_action")]: controller.touchAction } : null),

package/dist/plugins/captions/captions.css

@@ -1 +1 @@
-.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}
+.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}

package/dist/plugins/counter/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxState, cssClass, clsx, createModule } from '../../index.js';
+import { useLightboxState, clsx, cssClass, createModule } from '../../index.js';
 import { MODULE_CONTROLLER, PLUGIN_COUNTER } from '../../types.js';
 
 const defaultCounterProps = {

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

@@ -22,6 +22,12 @@ declare module "yet-another-react-lightbox" {
         /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: RenderFunction;
     }
+    interface Callbacks {
+        /** a callback called when the lightbox enters fullscreen mode */
+        enterFullscreen?: Callback;
+        /** a callback called when the lightbox exits fullscreen mode */
+        exitFullscreen?: Callback;
+    }
     interface ToolbarButtonKeys {
         [PLUGIN_FULLSCREEN]: null;
     }

package/dist/plugins/fullscreen/index.js

@@ -1,4 +1,4 @@
-import { makeUseContext, useLayoutEffect, useEventCallback, cssClass, clsx, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { makeUseContext, useLayoutEffect, 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';
 
@@ -13,11 +13,12 @@ const resolveFullscreenProps = (fullscreen) => ({
 
 const FullscreenContext = React.createContext(null);
 const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
+function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }) {
     const { auto, ref } = resolveFullscreenProps(fullscreenProps);
     const containerRef = React.useRef(null);
-    const [fullscreen, setFullscreen] = React.useState(false);
     const [disabled, setDisabled] = React.useState();
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const wasFullscreen = React.useRef(false);
     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));
@@ -67,16 +68,11 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
             }
         }
     }, [getFullscreenElement]);
-    const fullscreenChangeListener = React.useCallback(() => {
-        if (getFullscreenElement() === containerRef.current) {
-            setFullscreen(true);
-        }
-        else {
-            setFullscreen(false);
-        }
-    }, [getFullscreenElement]);
     React.useEffect(() => {
         const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+        const fullscreenChangeListener = () => {
+            setFullscreen(getFullscreenElement() === containerRef.current);
+        };
         events.forEach((event) => {
             document.addEventListener(event, fullscreenChangeListener);
         });
@@ -85,7 +81,17 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
                 document.removeEventListener(event, fullscreenChangeListener);
             });
         };
-    }, [fullscreenChangeListener]);
+    }, [getFullscreenElement]);
+    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(() => {
+        if (fullscreen) {
+            wasFullscreen.current = true;
+        }
+        if (wasFullscreen.current) {
+            (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();

package/dist/plugins/inline/index.js

@@ -1,4 +1,4 @@
-import { cssClass, clsx, createModule } from '../../index.js';
+import { clsx, cssClass, createModule } from '../../index.js';
 import * as React from 'react';
 import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
 

package/dist/plugins/thumbnails/thumbnails.css

@@ -1 +1 @@
-.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{-webkit-touch-callout:none;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:12%;pointer-events:none;position:absolute}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px);outline:none}.yarl__thumbnails_thumbnail{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-width:var(--yarl__thumbnails_thumbnail_border,1px);box-sizing:content-box;cursor:pointer;flex:0 0 auto;height:var(--yarl__thumbnails_thumbnail_height,80px);outline:none;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);position:relative;width:var(--yarl__thumbnails_thumbnail_width,120px)}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;opacity:0}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{cursor:unset;visibility:hidden}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));height:var(--yarl__thumbnails_thumbnail_icon_size,32px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px)}.yarl__thumbnails_contain_image{-o-object-fit:contain;object-fit:contain}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}
+.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{pointer-events:none;position:absolute;--yarl__thumbnails_vignette_size:12%}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px);outline:none}.yarl__thumbnails_thumbnail{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-width:var(--yarl__thumbnails_thumbnail_border,1px);cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;box-sizing:content-box;height:var(--yarl__thumbnails_thumbnail_height,80px);outline:none;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);position:relative;width:var(--yarl__thumbnails_thumbnail_width,120px)}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;opacity:0}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{cursor:unset;visibility:hidden}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));height:var(--yarl__thumbnails_thumbnail_icon_size,32px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px)}.yarl__thumbnails_contain_image{-o-object-fit:contain;object-fit:contain}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}

package/dist/plugins/video/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, useEvents, useContainerRect, useEventCallback, cssClass, clsx } from '../../index.js';
+import { useLightboxProps, useEvents, useContainerRect, useEventCallback, clsx, cssClass } from '../../index.js';
 import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_COMPLETE } from '../../types.js';
 
 const defaultVideoProps = {

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, cssClass, clsx, 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, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
 
@@ -76,11 +76,11 @@ function useZoomImageRect(slideRect, imageDimensions) {
     var _a, _b;
     let imageRect = { width: 0, height: 0 };
     let maxImageRect = { width: 0, height: 0 };
-    const { slides, currentIndex } = useLightboxState();
+    const { currentSlide } = useLightboxState();
     const { imageFit } = useLightboxProps().carousel;
     const { maxZoomPixelRatio } = useZoomProps();
-    if (slideRect && currentIndex < slides.length) {
-        const slide = { ...slides[currentIndex], ...imageDimensions };
+    if (slideRect && currentSlide) {
+        const slide = { ...currentSlide, ...imageDimensions };
         if (isImageSlide(slide)) {
             const cover = isImageFitCover(slide, imageFit);
             const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
@@ -265,23 +265,15 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
     }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel]);
 }
 
-function getCurrentSource(slides, currentIndex) {
-    if (currentIndex < slides.length) {
-        const slide = slides[currentIndex];
-        if (isImageSlide(slide))
-            return slide.src;
-    }
-    return undefined;
-}
 function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const [zoom, setZoom] = React.useState(1);
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
-    const { slides, currentIndex, globalIndex } = useLightboxState();
+    const { currentSlide, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
     const { zoomInMultiplier } = useZoomProps();
-    const currentSource = getCurrentSource(slides, currentIndex);
+    const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
     const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
         setZoom(1);

package/dist/styles.css

@@ -1 +1 @@
-.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll-behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_down_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{-webkit-touch-callout:none;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none}@media screen and (min-width:800px){.yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px)}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
+.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll-behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}@media screen and (min-width:800px){.yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}

package/dist/types.d.ts

@@ -229,6 +229,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-up gesture */
+    closeOnPullUp: boolean;
     /** if `true`, close the lightbox on pull-down gesture */
     closeOnPullDown: boolean;
     /** if `true`, close the lightbox when the backdrop is clicked */

package/package.json

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