yet-another-react-lightbox 3.13.1 → 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;
 
@@ -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

@@ -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;
@@ -1269,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);
@@ -1292,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);
@@ -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/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.1",
+    "version": "3.14.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",