yet-another-react-lightbox 3.13.1 → 3.15.0

package/README.md

@@ -5,9 +5,9 @@ extendable.
 
 ## Overview
 
-[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
-[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
+[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
 
 - **Built for React:** works with React 18, 17 and 16.8.0+
 - **UX:** supports keyboard, mouse, touchpad and touchscreen navigation

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 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, 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, Callbacks, ClickCallbackProps, ControllerSettings, 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, 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';
+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, Callbacks, ClickCallbackProps, ControllerSettings, 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 */
-declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
+declare function Lightbox({ carousel, animation, render, toolbar, controller, noScroll, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
 
 declare const LightboxDefaultProps: LightboxProps;
 
@@ -248,7 +248,7 @@ declare function useNavigationState(): {
     nextDisabled: boolean;
 };
 
-declare function NoScroll({ children }: ComponentProps): React.JSX.Element;
+declare function NoScroll({ noScroll: { disabled }, children }: ComponentProps): React.JSX.Element;
 declare const NoScrollModule: Module;
 
 declare function Portal({ children, animation, styles, className, on, portal, close }: ComponentProps): React.ReactPortal | null;

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_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, CLASS_FLEX_CENTER, MODULE_CAROUSEL, CLASS_FULLSIZE, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, 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, MODULE_PORTAL, CLASS_FLEX_CENTER, MODULE_CAROUSEL, CLASS_FULLSIZE, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, 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_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
 
@@ -39,6 +39,9 @@ const LightboxDefaultProps = {
         closeOnBackdropClick: false,
     },
     portal: {},
+    noScroll: {
+        disabled: false,
+    },
     on: {},
     styles: {},
     className: "",
@@ -424,9 +427,9 @@ function useAnimation(nodeRef, computeAnimation) {
 }
 
 function useContainerRect() {
-    const [containerRect, setContainerRect] = React.useState();
     const containerRef = React.useRef(null);
     const observerRef = React.useRef();
+    const [containerRect, setContainerRect] = React.useState();
     const setContainerRef = React.useCallback((node) => {
         containerRef.current = node;
         if (observerRef.current) {
@@ -452,11 +455,7 @@ function useContainerRect() {
             observerRef.current.observe(node);
         }
     }, []);
-    return React.useMemo(() => ({
-        setContainerRef,
-        containerRef,
-        containerRect,
-    }), [setContainerRef, containerRef, containerRect]);
+    return { setContainerRef, containerRef, containerRect };
 }
 
 function useDelay() {
@@ -520,39 +519,36 @@ function useRTL() {
 
 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));
-                    }
-                };
-            },
+    const notifySubscribers = React.useCallback((type, event) => {
+        var _a;
+        (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => {
+            if (!event.isPropagationStopped())
+                listener(event);
+        });
+    }, [subscribers]);
+    const registerSensors = React.useMemo(() => ({
+        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),
+    }), [notifySubscribers]);
+    const subscribeSensors = React.useCallback((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]);
+    return { registerSensors, subscribeSensors };
 }
 
 function useThrottle(callback, delay) {
@@ -642,11 +638,9 @@ var SwipeState;
 })(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]);
+    React.useEffect(() => !disabled
+        ? 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;
@@ -679,8 +673,7 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
         addPointer(event);
     });
     const onPointerUp = useEventCallback((event) => {
-        if (pointers.current.find((x) => x.pointerId === event.pointerId) &&
-            activePointer.current === event.pointerId) {
+        if (pointers.current.find((x) => x.pointerId === event.pointerId) && activePointer.current === event.pointerId) {
             const duration = Date.now() - startTime.current;
             const currentOffset = offset.current;
             if (gesture.current === Gesture.SWIPE) {
@@ -951,9 +944,7 @@ function Controller({ children, ...props }) {
         var _a;
         if (carouselRef.current && containerRect && ((_a = state.animation) === null || _a === void 0 ? void 0 : _a.duration)) {
             const parsedSpacing = parseLengthPercentage(carousel.spacing);
-            const spacingValue = (parsedSpacing.percent
-                ? (parsedSpacing.percent * containerRect.width) / 100
-                : parsedSpacing.pixel) || 0;
+            const spacingValue = (parsedSpacing.percent ? (parsedSpacing.percent * containerRect.width) / 100 : parsedSpacing.pixel) || 0;
             return {
                 keyframes: [
                     {
@@ -1067,9 +1058,10 @@ function Controller({ children, ...props }) {
     usePointerSwipe(...swipeParams, closeOnPullDown, ...pullDownParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
-        var _a;
         if (controller.focus) {
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if (document.querySelector(`.${cssClass(MODULE_PORTAL)} .${cssClass(cssContainerPrefix())}`)) {
+                focus();
+            }
         }
     });
     React.useEffect(focusOnMount, [focusOnMount]);
@@ -1122,9 +1114,7 @@ function Controller({ children, ...props }) {
                     [cssVar("pull_down_opacity")]: `${pullDownOpacity.current}`,
                 }
                 : null),
-            ...(controller.touchAction !== "none"
-                ? { [cssVar("controller_touch_action")]: controller.touchAction }
-                : null),
+            ...(controller.touchAction !== "none" ? { [cssVar("controller_touch_action")]: controller.touchAction } : null),
             ...styles.container,
         }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
         children, (_a = render.controls) === null || _a === void 0 ? void 0 :
@@ -1269,9 +1259,11 @@ function padScrollbar(element, padding, rtl) {
         }
     };
 }
-function NoScroll({ children }) {
+function NoScroll({ noScroll: { disabled }, children }) {
     const rtl = useRTL();
     useLayoutEffect(() => {
+        if (disabled)
+            return () => { };
         const cleanup = [];
         const { body, documentElement } = document;
         const scrollbar = Math.round(window.innerWidth - documentElement.clientWidth);
@@ -1292,7 +1284,7 @@ function NoScroll({ children }) {
             body.classList.remove(noScroll);
             cleanup.forEach((clean) => clean());
         };
-    }, [rtl]);
+    }, [rtl, disabled]);
     return React.createElement(React.Fragment, null, children);
 }
 const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);
@@ -1316,6 +1308,7 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
     const [mounted, setMounted] = React.useState(false);
     const [visible, setVisible] = React.useState(false);
     const cleanup = React.useRef([]);
+    const restoreFocus = React.useRef(null);
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
     const reduceMotion = useMotionPreference();
@@ -1330,6 +1323,8 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
     const handleClose = useEventCallback(() => {
         var _a;
         setVisible(false);
+        cleanup.current.forEach((clean) => clean());
+        cleanup.current = [];
         (_a = on.exiting) === null || _a === void 0 ? void 0 : _a.call(on);
         setTimeout(() => {
             var _a;
@@ -1351,23 +1346,20 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
                 cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
             }
         }
+        cleanup.current.push(() => {
+            var _a, _b;
+            (_b = (_a = restoreFocus.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
         setTimeout(() => {
             var _a;
             (_a = on.entered) === null || _a === void 0 ? void 0 : _a.call(on);
         }, animationDuration);
     });
-    const handleExit = useEventCallback(() => {
-        cleanup.current.forEach((clean) => clean());
-        cleanup.current = [];
-    });
     const handleRef = React.useCallback((node) => {
         if (node) {
             handleEnter(node);
         }
-        else {
-            handleExit();
-        }
-    }, [handleEnter, handleExit]);
+    }, [handleEnter]);
     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: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
@@ -1377,6 +1369,10 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
                     ? { [cssVar("fade_animation_timing_function")]: animation.easing.fade }
                     : null),
                 ...styles.root,
+            }, onFocus: (event) => {
+                if (!restoreFocus.current) {
+                    restoreFocus.current = event.relatedTarget;
+                }
             } }, children), portal.root || document.body)
         : null;
 }
@@ -1401,7 +1397,7 @@ function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, sty
             return buttonClose();
         return React.createElement(IconButton, { key: ACTION_CLOSE, label: "Close", icon: CloseIcon, renderIcon: iconClose, onClick: close });
     };
-    return (React.createElement("div", { ref: setContainerRef, style: styles.toolbar, className: cssClass(cssPrefix()), ...stopNavigationEventsPropagation() }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
+    return (React.createElement("div", { ref: setContainerRef, style: styles.toolbar, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
 }
 const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);
 
@@ -1418,8 +1414,8 @@ function mergeAnimation(defaultAnimation, animation = {}) {
         ...restAnimation,
     };
 }
-function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }) {
-    const { animation: defaultAnimation, carousel: defaultCarousel, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, slides: defaultSlides, index: defaultIndex, plugins: defaultPlugins, ...restDefaultProps } = LightboxDefaultProps;
+function Lightbox({ carousel, animation, render, toolbar, controller, noScroll, on, plugins, slides, index, ...restProps }) {
+    const { animation: defaultAnimation, carousel: defaultCarousel, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, noScroll: defaultNoScroll, on: defaultOn, slides: defaultSlides, index: defaultIndex, plugins: defaultPlugins, ...restDefaultProps } = LightboxDefaultProps;
     const { config, augmentation } = withPlugins([
         createNode(PortalModule, [
             createNode(NoScrollModule, [
@@ -1437,6 +1433,7 @@ function Lightbox({ carousel, animation, render, toolbar, controller, on, plugin
         render: { ...defaultRender, ...render },
         toolbar: { ...defaultToolbar, ...toolbar },
         controller: { ...defaultController, ...controller },
+        noScroll: { ...defaultNoScroll, ...noScroll },
         on: { ...defaultOn, ...on },
         ...restDefaultProps,
         ...restProps,

package/dist/plugins/thumbnails/index.js

@@ -194,9 +194,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
                 (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
                 ? {
                     duration: fadeAnimationDuration,
-                    delay: ((offset > 0
-                        ? slideIndex - (index + preload - offset)
-                        : index - preload - offset - slideIndex) -
+                    delay: ((offset > 0 ? slideIndex - (index + preload - offset) : index - preload - offset - slideIndex) -
                         1) *
                         fadeAnimationDuration,
                 }
@@ -229,9 +227,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, visible: visible })),
+                ["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, visible: visible }))))));
+                ["end", "bottom"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef, visible: visible })))));
 }
 
 const thumbnailsIcon = () => (React.createElement(React.Fragment, null,

package/dist/plugins/video/index.js

@@ -49,9 +49,7 @@ function VideoSlide({ slide, offset }) {
         if (width && height && containerRect) {
             const widthBound = width / height > containerRect.width / containerRect.height;
             const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
-            const elementHeight = !widthBound
-                ? containerRect.height
-                : Math.round((containerRect.width / width) * height);
+            const elementHeight = !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height);
             scalingProps.width = elementWidth;
             scalingProps.height = elementHeight;
             scalingProps.style.width = elementWidth;

package/dist/plugins/zoom/index.js

@@ -315,11 +315,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
             changeOffsets();
         }
     });
-    useLayoutEffect(handleControllerRectChange, [
-        containerRect.width,
-        containerRect.height,
-        handleControllerRectChange,
-    ]);
+    useLayoutEffect(handleControllerRectChange, [containerRect.width, containerRect.height, handleControllerRectChange]);
     const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
     const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
     return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
@@ -438,9 +434,7 @@ function ResponsiveImage(props) {
         WebkitTransform: "translateZ(0)",
     };
     if (!cover) {
-        Object.assign(style, rect.width / rect.height < width / height
-            ? { width: "100%", height: "auto" }
-            : { width: "auto", height: "100%" });
+        Object.assign(style, rect.width / rect.height < width / height ? { width: "100%", height: "auto" } : { width: "auto", height: "100%" });
     }
     return (React.createElement(React.Fragment, null,
         preload && preload !== current && (React.createElement(ImageSlide, { key: "preload", ...props, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
@@ -480,9 +474,7 @@ function ZoomWrapper({ render, slide, offset, rect }) {
     }
     if (!rendered)
         return null;
-    return (React.createElement("div", { ref: zoomWrapperRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), style: offset === 0
-            ? { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` }
-            : undefined }, rendered));
+    return (React.createElement("div", { ref: zoomWrapperRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), style: offset === 0 ? { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } : undefined }, rendered));
 }
 
 const Zoom = ({ augment, addModule }) => {

package/dist/types.d.ts

@@ -53,7 +53,7 @@ declare const IMAGE_FIT_COVER = "cover";
 declare const UNKNOWN_ACTION_TYPE = "Unknown action type";
 
 /** Lightbox external props */
-type LightboxExternalProps = DeepPartial<DeepPartial<DeepPartial<LightboxProps, "animation" | "toolbar">, "carousel", "imageProps">, "controller", "ref">;
+type LightboxExternalProps = DeepPartial<DeepPartial<DeepPartial<LightboxProps, "animation" | "toolbar" | "noScroll">, "carousel", "imageProps">, "controller", "ref">;
 /** Lightbox properties */
 interface LightboxProps {
     /** if `true`, the lightbox is open */
@@ -80,6 +80,8 @@ interface LightboxProps {
     controller: ControllerSettings;
     /** portal settings */
     portal: PortalSettings;
+    /** NoScroll module settings */
+    noScroll: NoScrollSettings;
     /** lifecycle callbacks */
     on: Callbacks;
     /** customization styles */
@@ -220,7 +222,7 @@ interface AnimationSettings {
 interface ControllerSettings {
     /** controller ref */
     ref: React.ForwardedRef<ControllerRef>;
-    /** if true, the lightbox captures focus when it opens */
+    /** @deprecated for internal use only */
     focus: boolean;
     /** controller `touch-action` */
     touchAction: "none" | "pan-y";
@@ -251,6 +253,11 @@ interface PortalSettings {
     /** portal mount point */
     root?: DocumentFragment | Element | null;
 }
+/** NoScroll module settings */
+interface NoScrollSettings {
+    /** if `true`, the NoScroll module functionality is disabled */
+    disabled: boolean;
+}
 /** Lightbox navigation action */
 interface NavigationAction {
     /** navigate through the specified number of slides */
@@ -414,4 +421,4 @@ type DeepPartialValue<T, E extends string = never> = T extends any[] ? T : T ext
     [P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
 } : T;
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type 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, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type 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, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type NoScrollSettings, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };

package/package.json

@@ -1,169 +1,169 @@
 {
-    "name": "yet-another-react-lightbox",
-    "version": "3.13.1",
-    "description": "Modern React lightbox component",
-    "author": "Igor Danchenko",
-    "license": "MIT",
-    "type": "module",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
-        },
-        "./core": {
-            "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
-        },
-        "./styles.css": {
-            "types": "./dist/styles.css.d.ts",
-            "default": "./dist/styles.css"
-        },
-        "./plugins": {
-            "types": "./dist/plugins/index.d.ts",
-            "default": "./dist/plugins/index.js"
-        },
-        "./plugins/captions": {
-            "types": "./dist/plugins/captions/index.d.ts",
-            "default": "./dist/plugins/captions/index.js"
-        },
-        "./plugins/captions.css": {
-            "types": "./dist/plugins/captions/captions.css.d.ts",
-            "default": "./dist/plugins/captions/captions.css"
-        },
-        "./plugins/counter": {
-            "types": "./dist/plugins/counter/index.d.ts",
-            "default": "./dist/plugins/counter/index.js"
-        },
-        "./plugins/counter.css": {
-            "types": "./dist/plugins/counter/counter.css.d.ts",
-            "default": "./dist/plugins/counter/counter.css"
-        },
-        "./plugins/download": {
-            "types": "./dist/plugins/download/index.d.ts",
-            "default": "./dist/plugins/download/index.js"
-        },
-        "./plugins/fullscreen": {
-            "types": "./dist/plugins/fullscreen/index.d.ts",
-            "default": "./dist/plugins/fullscreen/index.js"
-        },
-        "./plugins/inline": {
-            "types": "./dist/plugins/inline/index.d.ts",
-            "default": "./dist/plugins/inline/index.js"
-        },
-        "./plugins/share": {
-            "types": "./dist/plugins/share/index.d.ts",
-            "default": "./dist/plugins/share/index.js"
-        },
-        "./plugins/slideshow": {
-            "types": "./dist/plugins/slideshow/index.d.ts",
-            "default": "./dist/plugins/slideshow/index.js"
-        },
-        "./plugins/thumbnails": {
-            "types": "./dist/plugins/thumbnails/index.d.ts",
-            "default": "./dist/plugins/thumbnails/index.js"
-        },
-        "./plugins/thumbnails.css": {
-            "types": "./dist/plugins/thumbnails/thumbnails.css.d.ts",
-            "default": "./dist/plugins/thumbnails/thumbnails.css"
-        },
-        "./plugins/video": {
-            "types": "./dist/plugins/video/index.d.ts",
-            "default": "./dist/plugins/video/index.js"
-        },
-        "./plugins/zoom": {
-            "types": "./dist/plugins/zoom/index.d.ts",
-            "default": "./dist/plugins/zoom/index.js"
-        }
-    },
-    "typesVersions": {
-        "*": {
-            "*": [
-                "dist/index.d.ts"
-            ],
-            "core": [
-                "dist/index.d.ts"
-            ],
-            "styles.css": [
-                "dist/styles.css.d.ts"
-            ],
-            "plugins": [
-                "dist/plugins/index.d.ts"
-            ],
-            "plugins/captions": [
-                "dist/plugins/captions/index.d.ts"
-            ],
-            "plugins/captions.css": [
-                "dist/plugins/captions/captions.css.d.ts"
-            ],
-            "plugins/counter": [
-                "dist/plugins/counter/index.d.ts"
-            ],
-            "plugins/counter.css": [
-                "dist/plugins/counter/counter.css.d.ts"
-            ],
-            "plugins/download": [
-                "dist/plugins/download/index.d.ts"
-            ],
-            "plugins/fullscreen": [
-                "dist/plugins/fullscreen/index.d.ts"
-            ],
-            "plugins/inline": [
-                "dist/plugins/inline/index.d.ts"
-            ],
-            "plugins/share": [
-                "dist/plugins/share/index.d.ts"
-            ],
-            "plugins/slideshow": [
-                "dist/plugins/slideshow/index.d.ts"
-            ],
-            "plugins/thumbnails": [
-                "dist/plugins/thumbnails/index.d.ts"
-            ],
-            "plugins/thumbnails.css": [
-                "dist/plugins/thumbnails/thumbnails.css.d.ts"
-            ],
-            "plugins/video": [
-                "dist/plugins/video/index.d.ts"
-            ],
-            "plugins/zoom": [
-                "dist/plugins/zoom/index.d.ts"
-            ]
-        }
-    },
-    "files": [
-        "dist"
-    ],
-    "sideEffects": [
-        "*.css"
-    ],
-    "homepage": "https://yet-another-react-lightbox.com",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
-    },
-    "bugs": {
-        "url": "https://github.com/igordanchenko/yet-another-react-lightbox/issues"
-    },
-    "engines": {
-        "node": ">=14"
-    },
-    "publishConfig": {
-        "access": "public",
-        "provenance": true
-    },
-    "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-    },
-    "keywords": [
-        "react",
-        "image",
-        "photo",
-        "lightbox",
-        "react lightbox",
-        "react image lightbox",
-        "react photo lightbox"
-    ]
+  "name": "yet-another-react-lightbox",
+  "version": "3.15.0",
+  "description": "Modern React lightbox component",
+  "author": "Igor Danchenko",
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.css.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "default": "./dist/plugins/index.js"
+    },
+    "./plugins/captions": {
+      "types": "./dist/plugins/captions/index.d.ts",
+      "default": "./dist/plugins/captions/index.js"
+    },
+    "./plugins/captions.css": {
+      "types": "./dist/plugins/captions/captions.css.d.ts",
+      "default": "./dist/plugins/captions/captions.css"
+    },
+    "./plugins/counter": {
+      "types": "./dist/plugins/counter/index.d.ts",
+      "default": "./dist/plugins/counter/index.js"
+    },
+    "./plugins/counter.css": {
+      "types": "./dist/plugins/counter/counter.css.d.ts",
+      "default": "./dist/plugins/counter/counter.css"
+    },
+    "./plugins/download": {
+      "types": "./dist/plugins/download/index.d.ts",
+      "default": "./dist/plugins/download/index.js"
+    },
+    "./plugins/fullscreen": {
+      "types": "./dist/plugins/fullscreen/index.d.ts",
+      "default": "./dist/plugins/fullscreen/index.js"
+    },
+    "./plugins/inline": {
+      "types": "./dist/plugins/inline/index.d.ts",
+      "default": "./dist/plugins/inline/index.js"
+    },
+    "./plugins/share": {
+      "types": "./dist/plugins/share/index.d.ts",
+      "default": "./dist/plugins/share/index.js"
+    },
+    "./plugins/slideshow": {
+      "types": "./dist/plugins/slideshow/index.d.ts",
+      "default": "./dist/plugins/slideshow/index.js"
+    },
+    "./plugins/thumbnails": {
+      "types": "./dist/plugins/thumbnails/index.d.ts",
+      "default": "./dist/plugins/thumbnails/index.js"
+    },
+    "./plugins/thumbnails.css": {
+      "types": "./dist/plugins/thumbnails/thumbnails.css.d.ts",
+      "default": "./dist/plugins/thumbnails/thumbnails.css"
+    },
+    "./plugins/video": {
+      "types": "./dist/plugins/video/index.d.ts",
+      "default": "./dist/plugins/video/index.js"
+    },
+    "./plugins/zoom": {
+      "types": "./dist/plugins/zoom/index.d.ts",
+      "default": "./dist/plugins/zoom/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "core": [
+        "dist/index.d.ts"
+      ],
+      "styles.css": [
+        "dist/styles.css.d.ts"
+      ],
+      "plugins": [
+        "dist/plugins/index.d.ts"
+      ],
+      "plugins/captions": [
+        "dist/plugins/captions/index.d.ts"
+      ],
+      "plugins/captions.css": [
+        "dist/plugins/captions/captions.css.d.ts"
+      ],
+      "plugins/counter": [
+        "dist/plugins/counter/index.d.ts"
+      ],
+      "plugins/counter.css": [
+        "dist/plugins/counter/counter.css.d.ts"
+      ],
+      "plugins/download": [
+        "dist/plugins/download/index.d.ts"
+      ],
+      "plugins/fullscreen": [
+        "dist/plugins/fullscreen/index.d.ts"
+      ],
+      "plugins/inline": [
+        "dist/plugins/inline/index.d.ts"
+      ],
+      "plugins/share": [
+        "dist/plugins/share/index.d.ts"
+      ],
+      "plugins/slideshow": [
+        "dist/plugins/slideshow/index.d.ts"
+      ],
+      "plugins/thumbnails": [
+        "dist/plugins/thumbnails/index.d.ts"
+      ],
+      "plugins/thumbnails.css": [
+        "dist/plugins/thumbnails/thumbnails.css.d.ts"
+      ],
+      "plugins/video": [
+        "dist/plugins/video/index.d.ts"
+      ],
+      "plugins/zoom": [
+        "dist/plugins/zoom/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "homepage": "https://yet-another-react-lightbox.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
+  },
+  "bugs": {
+    "url": "https://github.com/igordanchenko/yet-another-react-lightbox/issues"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "keywords": [
+    "react",
+    "image",
+    "photo",
+    "lightbox",
+    "react lightbox",
+    "react image lightbox",
+    "react photo lightbox"
+  ]
 }