yet-another-react-lightbox 3.13.0 → 3.14.0

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;
 
@@ -94,10 +94,10 @@ type KeyboardEventType = "onKeyDown" | "onKeyUp";
 type WheelEventType = "onWheel";
 type SupportedEventType = PointerEventType | KeyboardEventType | WheelEventType;
 type ReactEventType<T, K> = K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
-type SensorCallback<T, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
-type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: SensorCallback<T, ReactEventType<T, ET>>) => () => void;
-type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
-type UseSensors<T> = {
+type SensorCallback<T extends Element, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
+type SubscribeSensors<T extends Element> = <ET extends SupportedEventType>(type: ET, callback: SensorCallback<T, ReactEventType<T, ET>>) => () => void;
+type RegisterSensors<T extends Element> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
+type UseSensors<T extends Element> = {
     registerSensors: RegisterSensors<T>;
     subscribeSensors: SubscribeSensors<T>;
 };
@@ -238,10 +238,17 @@ type NavigationButtonProps = {
     style?: React.CSSProperties;
 };
 declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled, style }: NavigationButtonProps): React.JSX.Element;
-declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, styles, }: ComponentProps): React.JSX.Element;
+declare function Navigation({ render: { buttonPrev, buttonNext, iconPrev, iconNext }, styles }: ComponentProps): React.JSX.Element;
 declare const NavigationModule: Module;
 
-declare function NoScroll({ children }: ComponentProps): React.JSX.Element;
+declare function useKeyboardNavigation<T extends Element>(subscribeSensors: UseSensors<T>["subscribeSensors"]): void;
+
+declare function useNavigationState(): {
+    prevDisabled: boolean;
+    nextDisabled: boolean;
+};
+
+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;
@@ -253,4 +260,4 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

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, 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 { 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 { 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;
@@ -897,7 +891,7 @@ 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 pullDownEnabled = controller.closeOnPullDown;
+    const { closeOnPullDown } = controller;
     const setPullDownOffset = (offset) => {
         var _a, _b;
         pullDownOffset.current = offset;
@@ -926,7 +920,7 @@ function Controller({ children, ...props }) {
         return undefined;
     });
     const pullDown = (offset, cancel) => {
-        if (pullDownEnabled) {
+        if (closeOnPullDown) {
             setPullDownOffset(offset);
             let duration = 0;
             if (carouselRef.current) {
@@ -1056,7 +1050,7 @@ function Controller({ children, ...props }) {
     ];
     const pullDownParams = [
         () => {
-            if (pullDownEnabled) {
+            if (closeOnPullDown) {
                 setSwipeState(SwipeState.PULL_DOWN);
             }
         },
@@ -1064,7 +1058,7 @@ function Controller({ children, ...props }) {
         (offset) => pullDown(offset),
         (offset) => pullDown(offset, true),
     ];
-    usePointerSwipe(...swipeParams, pullDownEnabled, ...pullDownParams);
+    usePointerSwipe(...swipeParams, closeOnPullDown, ...pullDownParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         var _a;
@@ -1079,11 +1073,6 @@ function Controller({ children, ...props }) {
     });
     React.useEffect(onViewCallback, [state.globalIndex, onViewCallback]);
     React.useEffect(() => cleanup(subscribe(ACTION_PREV, (action) => swipe({ direction: ACTION_PREV, ...action })), subscribe(ACTION_NEXT, (action) => swipe({ direction: ACTION_NEXT, ...action })), subscribe(ACTION_SWIPE, (action) => dispatch(action))), [subscribe, swipe, dispatch]);
-    React.useEffect(() => subscribeSensors(EVENT_ON_KEY_UP, (event) => {
-        if (event.key === VK_ESCAPE) {
-            close();
-        }
-    }), [subscribeSensors, close]);
     const context = React.useMemo(() => ({
         prev,
         next,
@@ -1205,28 +1194,49 @@ function Carousel({ carousel }) {
 }
 const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);
 
-function NavigationButton({ label, icon, renderIcon, action, onClick, disabled, style }) {
-    return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, style: style, ...useLoseFocus(useController().focus, disabled) }));
+function useNavigationState() {
+    const { carousel } = useLightboxProps();
+    const { slides, currentIndex } = useLightboxState();
+    const prevDisabled = slides.length === 0 || (carousel.finite && currentIndex === 0);
+    const nextDisabled = slides.length === 0 || (carousel.finite && currentIndex === slides.length - 1);
+    return { prevDisabled, nextDisabled };
 }
-function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, styles, }) {
+
+function useKeyboardNavigation(subscribeSensors) {
     var _a;
-    const { slides, currentIndex } = useLightboxState();
-    const { prev, next, subscribeSensors } = useController();
     const isRTL = useRTL();
-    const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);
-    const nextDisabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
+    const { publish } = useEvents();
+    const { animation } = useLightboxProps();
+    const { prevDisabled, nextDisabled } = useNavigationState();
     const throttle = ((_a = animation.navigation) !== null && _a !== void 0 ? _a : animation.swipe) / 2;
-    const prevThrottled = useThrottle(prev, throttle);
-    const nextThrottled = useThrottle(next, throttle);
+    const prev = useThrottle(() => publish(ACTION_PREV), throttle);
+    const next = useThrottle(() => publish(ACTION_NEXT), throttle);
     const handleKeyDown = useEventCallback((event) => {
-        if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
-            (isRTL ? nextThrottled : prevThrottled)();
-        }
-        if (event.key === VK_ARROW_RIGHT && !(isRTL ? prevDisabled : nextDisabled)) {
-            (isRTL ? prevThrottled : nextThrottled)();
+        switch (event.key) {
+            case VK_ESCAPE:
+                publish(ACTION_CLOSE);
+                break;
+            case VK_ARROW_LEFT:
+                if (!(isRTL ? nextDisabled : prevDisabled))
+                    (isRTL ? next : prev)();
+                break;
+            case VK_ARROW_RIGHT:
+                if (!(isRTL ? prevDisabled : nextDisabled))
+                    (isRTL ? prev : next)();
+                break;
+            default:
         }
     });
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
+}
+
+function NavigationButton({ label, icon, renderIcon, action, onClick, disabled, style }) {
+    return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, style: style, ...useLoseFocus(useController().focus, disabled) }));
+}
+function Navigation({ render: { buttonPrev, buttonNext, iconPrev, iconNext }, styles }) {
+    const { prev, next, subscribeSensors } = useController();
+    const { prevDisabled, nextDisabled } = useNavigationState();
+    useKeyboardNavigation(subscribeSensors);
     return (React.createElement(React.Fragment, null,
         buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, style: styles.navigationPrev, disabled: prevDisabled, onClick: prev })),
         buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, style: styles.navigationNext, disabled: nextDisabled, onClick: next }))));
@@ -1253,9 +1263,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);
@@ -1276,7 +1288,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);
@@ -1402,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, [
@@ -1421,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,
@@ -1433,4 +1446,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, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, 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, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, 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, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/plugins/counter/index.js

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

package/dist/plugins/fullscreen/index.js

@@ -1,4 +1,4 @@
-import { makeUseContext, useLayoutEffect, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { makeUseContext, useLayoutEffect, useEventCallback, cssClass, clsx, 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';
 

package/dist/plugins/inline/index.js

@@ -1,4 +1,4 @@
-import { clsx, cssClass, createModule } from '../../index.js';
+import { cssClass, clsx, 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/index.js

@@ -1,4 +1,4 @@
-import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, useEventCallback, cssVar, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FULLSIZE, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
@@ -53,11 +53,18 @@ const fadeOutPrefix = makeComposePrefix("fadeout");
 const placeholderPrefix = makeComposePrefix("placeholder");
 const DELAY = "delay";
 const DURATION = "duration";
-function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }) {
+function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder, onLoseFocus }) {
+    const ref = React.useRef(null);
     const { render, styles } = useLightboxProps();
     const { width, height, imageFit } = useThumbnailsProps();
     const rect = { width, height };
-    return (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
+    const onLoseFocusCallback = useEventCallback(onLoseFocus);
+    React.useEffect(() => {
+        if (fadeOut && document.activeElement === ref.current) {
+            onLoseFocusCallback();
+        }
+    }, [fadeOut, onLoseFocusCallback]);
+    return (React.createElement("button", { ref: ref, type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
             ...(fadeIn
                 ? {
                     [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
@@ -82,10 +89,12 @@ function boxSize(thumbnails, dimension, includeGap) {
 }
 function ThumbnailsTrack({ visible, containerRef }) {
     const track = React.useRef(null);
+    const isRTL = useRTL();
+    const { publish, subscribe } = useEvents();
     const { carousel, styles } = useLightboxProps();
     const { slides, globalIndex, animation } = useLightboxState();
-    const { publish, subscribe } = useEvents();
-    const isRTL = useRTL();
+    const { registerSensors, subscribeSensors } = useSensors();
+    useKeyboardNavigation(subscribeSensors);
     const thumbnails = useThumbnailsProps();
     const { position, width, height, border, borderRadius, padding, gap, vignette } = thumbnails;
     const index = globalIndex;
@@ -179,7 +188,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
             ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
             ...styles.thumbnailsContainer,
         } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)), tabIndex: -1, ...registerSensors }, items.map(({ slide, index: slideIndex, placeholder }) => {
             const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
             const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
                 (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
@@ -200,7 +209,7 @@ function ThumbnailsTrack({ visible, containerRef }) {
                         : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: slideIndex, slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+            return (React.createElement(Thumbnail, { key: slideIndex, slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), onLoseFocus: () => { var _a; return (_a = track.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
 }

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)}.yarl__thumbnails_thumbnail{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border:var(--yarl__thumbnails_thumbnail_border,1px solid var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);box-sizing:content-box;cursor:pointer;flex:0 0 auto;height:var(--yarl__thumbnails_thumbnail_height,80px);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{-webkit-animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;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{-webkit-animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;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_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));-webkit-filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.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%;-webkit-transform:translateX(-50%) translateY(-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}@-webkit-keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}@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{-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:var(--yarl__thumbnails_thumbnail_border,1px solid var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);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{-webkit-animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;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{-webkit-animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;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)));-webkit-filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.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%;-webkit-transform:translateX(-50%) translateY(-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}@-webkit-keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}@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, clsx, cssClass } from '../../index.js';
+import { useLightboxProps, useEvents, useContainerRect, useEventCallback, cssClass, clsx } from '../../index.js';
 import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, 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, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
+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 * as React from 'react';
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, PLUGIN_ZOOM } from '../../types.js';
 

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:0;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);-webkit-transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));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{-webkit-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%);-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%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{-webkit-animation:yarl__delayed_fadein 1s linear;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{-webkit-animation:yarl__stroke_opacity 1s linear infinite;animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{-webkit-animation-delay:-1.875s;animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){-webkit-animation-delay:-1.75s;animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){-webkit-animation-delay:-1.625s;animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){-webkit-animation-delay:-1.375s;animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){-webkit-animation-delay:-1.25s;animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){-webkit-animation-delay:-1.125s;animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){-webkit-animation-delay:-1s;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{-webkit-animation:unset;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;-webkit-filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@-webkit-keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}@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_down_opacity,1);-webkit-transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));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{-webkit-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%);-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%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{-webkit-animation:yarl__delayed_fadein 1s linear;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{-webkit-animation:yarl__stroke_opacity 1s linear infinite;animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{-webkit-animation-delay:-1.875s;animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){-webkit-animation-delay:-1.75s;animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){-webkit-animation-delay:-1.625s;animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){-webkit-animation-delay:-1.375s;animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){-webkit-animation-delay:-1.25s;animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){-webkit-animation-delay:-1.125s;animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){-webkit-animation-delay:-1s;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{-webkit-animation:unset;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;-webkit-filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@-webkit-keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}

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 */
@@ -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,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.13.0",
+    "version": "3.14.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",