yet-another-react-lightbox 3.6.0 → 3.8.0

package/README.md

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

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ImageFit, 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, CarouselSettings, ClickCallbackProps, ControllerSettings, DeepNonNullable, 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, 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_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, CarouselSettings, ClickCallbackProps, ControllerSettings, DeepNonNullable, 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, 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';
 
 /** Lightbox component */
 declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
@@ -79,7 +79,7 @@ declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | n
 
 declare const useLayoutEffect: typeof React.useEffect;
 
-declare function useLoseFocus(disabled?: boolean): {
+declare function useLoseFocus(focus: () => void, disabled?: boolean): {
     onFocus: () => void;
     onBlur: () => void;
 };

package/dist/index.js

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

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

@@ -4,10 +4,24 @@ declare function Download({ augment }: PluginProps): void;
 
 declare module "../../types.js" {
     interface GenericSlide {
-        /** download url */
+        /** @deprecated - use `download` instead */
         downloadUrl?: string;
-        /** download filename override */
+        /** @deprecated - use `download` instead */
         downloadFilename?: string;
+        /** download url or download props */
+        download?: boolean | string | {
+            /** download url */
+            url: string;
+            /** download filename override */
+            filename: string;
+        };
+    }
+    interface LightboxProps {
+        /** Download plugin settings */
+        download?: {
+            /** Custom download function */
+            download?: ({ slide, saveAs }: DownloadFunctionProps) => void;
+        };
     }
     interface Render {
         /** render custom Download button */
@@ -19,11 +33,15 @@ declare module "../../types.js" {
         /** a callback called on slide download */
         download?: Callback<DownloadCallbackProps>;
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_DOWNLOAD]: null;
+    }
     interface DownloadCallbackProps {
         index: number;
     }
-    interface ToolbarButtonKeys {
-        [PLUGIN_DOWNLOAD]: null;
+    interface DownloadFunctionProps {
+        slide: Slide;
+        saveAs: (source: string | Blob, name?: string) => void;
     }
 }
 

package/dist/plugins/download/index.js

@@ -2,6 +2,14 @@ import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButto
 import * as React from 'react';
 import { PLUGIN_DOWNLOAD } from '../../types.js';
 
+const defaultDownloadProps = {
+    download: undefined,
+};
+const resolveDownloadProps = (download) => ({
+    ...defaultDownloadProps,
+    ...download,
+});
+
 function download(url, name) {
     const xhr = new XMLHttpRequest();
     xhr.open("GET", url);
@@ -65,24 +73,41 @@ function saveAs(source, name) {
 
 const DownloadIcon = createIcon("DownloadIcon", React.createElement("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5z" }));
 function DownloadButton() {
-    const { render, on } = useLightboxProps();
+    const { render, on, download: downloadProps } = useLightboxProps();
+    const { download: customDownload } = resolveDownloadProps(downloadProps);
     const { currentSlide, currentIndex } = useLightboxState();
     if (render.buttonDownload) {
         return React.createElement(React.Fragment, null, render.buttonDownload());
     }
-    const downloadUrl = (currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadUrl) || (currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined);
-    return (React.createElement(IconButton, { label: "Download", icon: DownloadIcon, renderIcon: render.iconDownload, disabled: !downloadUrl, onClick: () => {
-            var _a;
-            if (downloadUrl) {
-                saveAs(downloadUrl, currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadFilename);
-                (_a = on.download) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex });
-            }
-        } }));
+    const downloadUrl = (currentSlide &&
+        (currentSlide.downloadUrl ||
+            (typeof currentSlide.download === "string" && currentSlide.download) ||
+            (typeof currentSlide.download === "object" && currentSlide.download.url) ||
+            (isImageSlide(currentSlide) && currentSlide.src))) ||
+        undefined;
+    const canDownload = customDownload ? Boolean(currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.download) : Boolean(downloadUrl);
+    const defaultDownload = () => {
+        if (currentSlide && downloadUrl) {
+            const downloadFilename = currentSlide.downloadFilename ||
+                (typeof currentSlide.download === "object" && currentSlide.download.filename) ||
+                undefined;
+            saveAs(downloadUrl, downloadFilename);
+        }
+    };
+    const handleDownload = () => {
+        var _a;
+        if (currentSlide) {
+            (customDownload || defaultDownload)({ slide: currentSlide, saveAs });
+            (_a = on.download) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex });
+        }
+    };
+    return (React.createElement(IconButton, { label: "Download", icon: DownloadIcon, renderIcon: render.iconDownload, disabled: !canDownload, onClick: handleDownload }));
 }
 
 function Download({ augment }) {
-    augment(({ toolbar, ...restProps }) => ({
+    augment(({ toolbar, download, ...restProps }) => ({
         toolbar: addToolbarButton(toolbar, PLUGIN_DOWNLOAD, React.createElement(DownloadButton, null)),
+        download: resolveDownloadProps(download),
         ...restProps,
     }));
 }

package/dist/plugins/index.d.ts

@@ -3,6 +3,7 @@ export { default as Counter } from './counter/index.js';
 export { default as Download } from './download/index.js';
 export { default as Fullscreen } from './fullscreen/index.js';
 export { default as Inline } from './inline/index.js';
+export { default as Share } from './share/index.js';
 export { default as Slideshow } from './slideshow/index.js';
 export { default as Thumbnails } from './thumbnails/index.js';
 export { default as Video } from './video/index.js';

package/dist/plugins/index.js

@@ -3,6 +3,7 @@ export { default as Counter } from './counter/index.js';
 export { default as Download } from './download/index.js';
 export { default as Fullscreen } from './fullscreen/index.js';
 export { default as Inline } from './inline/index.js';
+export { default as Share } from './share/index.js';
 export { default as Slideshow } from './slideshow/index.js';
 export { default as Thumbnails } from './thumbnails/index.js';
 export { default as Video } from './video/index.js';

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

@@ -0,0 +1,47 @@
+import { PluginProps, PLUGIN_SHARE } from '../../types.js';
+
+declare function Share({ augment }: PluginProps): void;
+
+declare function isShareSupported(): boolean;
+
+declare module "../../types.js" {
+    interface GenericSlide {
+        /** share url or share props */
+        share?: boolean | string | {
+            /** share url  */
+            url?: string;
+            /** share text  */
+            text?: string;
+            /** share title  */
+            title?: string;
+        };
+    }
+    interface LightboxProps {
+        /** Share plugin settings */
+        share?: {
+            /** custom share function */
+            share?: ({ slide }: ShareFunctionProps) => void;
+        };
+    }
+    interface Render {
+        /** render custom Share button */
+        buttonShare?: RenderFunction;
+        /** render custom Share icon */
+        iconShare?: RenderFunction;
+    }
+    interface Callbacks {
+        /** a callback called on slide share */
+        share?: Callback<ShareCallbackProps>;
+    }
+    interface ToolbarButtonKeys {
+        [PLUGIN_SHARE]: null;
+    }
+    interface ShareCallbackProps {
+        index: number;
+    }
+    interface ShareFunctionProps {
+        slide: Slide;
+    }
+}
+
+export { Share as default, isShareSupported };

package/dist/plugins/share/index.js

@@ -0,0 +1,55 @@
+import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
+import * as React from 'react';
+
+const defaultShareProps = {
+    share: undefined,
+};
+const resolveShareProps = (share) => ({
+    ...defaultShareProps,
+    ...share,
+});
+
+function isShareSupported() {
+    return Boolean(navigator.canShare);
+}
+
+const ShareIcon = createIcon("ShareIcon", React.createElement("path", { d: "m16 5-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z" }));
+function ShareButton() {
+    const { render, on, share: shareProps } = useLightboxProps();
+    const { share: customShare } = resolveShareProps(shareProps);
+    const { currentSlide, currentIndex } = useLightboxState();
+    if (!isShareSupported())
+        return null;
+    if (render.buttonShare) {
+        return React.createElement(React.Fragment, null, render.buttonShare());
+    }
+    const share = (currentSlide &&
+        ((typeof currentSlide.share === "object" && currentSlide.share) ||
+            (typeof currentSlide.share === "string" && { url: currentSlide.share }) ||
+            (isImageSlide(currentSlide) && { url: currentSlide.src }))) ||
+        undefined;
+    const canShare = customShare ? Boolean(currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.share) : share && navigator.canShare(share);
+    const defaultShare = () => {
+        if (share) {
+            navigator.share(share).catch(() => { });
+        }
+    };
+    const handleShare = () => {
+        var _a;
+        if (currentSlide) {
+            (customShare || defaultShare)({ slide: currentSlide });
+            (_a = on.share) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex });
+        }
+    };
+    return (React.createElement(IconButton, { label: "Share", icon: ShareIcon, renderIcon: render.iconShare, disabled: !canShare, onClick: handleShare }));
+}
+
+function Share({ augment }) {
+    augment(({ toolbar, share, ...rest }) => ({
+        toolbar: addToolbarButton(toolbar, "share", React.createElement(ShareButton, null)),
+        share: resolveShareProps(share),
+        ...rest,
+    }));
+}
+
+export { Share as default, isShareSupported };

package/dist/plugins/slideshow/index.js

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

package/dist/plugins/thumbnails/index.js

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

package/dist/plugins/zoom/index.js

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

package/dist/types.d.ts

@@ -12,6 +12,7 @@ declare const PLUGIN_COUNTER = "counter";
 declare const PLUGIN_DOWNLOAD = "download";
 declare const PLUGIN_FULLSCREEN = "fullscreen";
 declare const PLUGIN_INLINE = "inline";
+declare const PLUGIN_SHARE = "share";
 declare const PLUGIN_SLIDESHOW = "slideshow";
 declare const PLUGIN_THUMBNAILS = "thumbnails";
 declare const PLUGIN_ZOOM = "zoom";
@@ -213,6 +214,8 @@ interface ControllerSettings {
     touchAction: "none" | "pan-y";
     /** if `true`, set ARIA attributes on the controller div */
     aria: boolean;
+    /** if `true`, close the lightbox on pull-down gesture */
+    closeOnPullDown: boolean;
     /** if `true`, close the lightbox when the backdrop is clicked */
     closeOnBackdropClick: boolean;
 }
@@ -403,4 +406,4 @@ type DeepNonNullable<T> = T extends {} ? {
     [K in keyof T]-?: NonNullable<T[K]>;
 } : never;
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepNonNullable, 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, EventTypes, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Module, NavigationAction, Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepNonNullable, 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, EventTypes, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Module, NavigationAction, Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus };

package/dist/types.js

@@ -10,6 +10,7 @@ const PLUGIN_COUNTER = "counter";
 const PLUGIN_DOWNLOAD = "download";
 const PLUGIN_FULLSCREEN = "fullscreen";
 const PLUGIN_INLINE = "inline";
+const PLUGIN_SHARE = "share";
 const PLUGIN_SLIDESHOW = "slideshow";
 const PLUGIN_THUMBNAILS = "thumbnails";
 const PLUGIN_ZOOM = "zoom";
@@ -48,4 +49,4 @@ const IMAGE_FIT_CONTAIN = "contain";
 const IMAGE_FIT_COVER = "cover";
 const UNKNOWN_ACTION_TYPE = "Unknown action type";
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.6.0",
+    "version": "3.8.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -52,6 +52,10 @@
             "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"
@@ -108,6 +112,9 @@
             "plugins/inline": [
                 "dist/plugins/inline/index.d.ts"
             ],
+            "plugins/share": [
+                "dist/plugins/share/index.d.ts"
+            ],
             "plugins/slideshow": [
                 "dist/plugins/slideshow/index.d.ts"
             ],