yet-another-react-lightbox 1.7.1 → 1.8.0

package/README.md

@@ -132,6 +132,7 @@ The following plugins come bundled in the package:
 - [Fullscreen](https://yet-another-react-lightbox.vercel.app/plugins/fullscreen) - adds support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.vercel.app/plugins/inline) - adds support for inline rendering mode
 - [Slideshow](https://yet-another-react-lightbox.vercel.app/plugins/slideshow) - adds slideshow autoplay feature
+- [Thumbnails](https://yet-another-react-lightbox.vercel.app/plugins/thumbnails) - adds thumbnails track
 - [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
 
 ## License

package/dist/core/components/ImageSlide.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { Render, SlideImage } from "../../types.js";
+import { ImageFit, Render, SlideImage } from "../../types.js";
 import { ContainerRect } from "../hooks/index.js";
 export declare type ImageSlideProps = {
     slide: SlideImage;
-    offset: number;
+    offset?: number;
     render?: Render;
     rect?: ContainerRect;
+    imageFit?: ImageFit;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -4,12 +4,10 @@ import { useLatest } from "../hooks/index.js";
 import { useEvents } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
 import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING } from "../consts.js";
-import { useController } from "../modules/Controller.js";
-export const ImageSlide = ({ slide: image, offset, render, rect }) => {
+export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) => {
     var _a;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
-    const { latestProps } = useController();
     const { publish } = useEvents();
     const imageRef = React.useRef(null);
     React.useEffect(() => {
@@ -43,8 +41,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect }) => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), (image.imageFit === "cover" ||
-                (image.imageFit !== "contain" && latestProps.current.carousel.imageFit === "cover")) &&
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), cssClass("fullsize"), (image.imageFit === "cover" || (image.imageFit !== "contain" && imageFit === "cover")) &&
                 cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
                 ? {
                     ...(rect && hasWindow()

package/dist/core/config.js

@@ -21,6 +21,17 @@ const traverse = (nodes, target, apply) => nodes.flatMap((node) => { var _a; ret
 export const withPlugins = (root, plugins) => {
     let config = root;
     const augmentations = [];
+    const contains = (target) => {
+        const nodes = [...config];
+        while (nodes.length > 0) {
+            const node = nodes.pop();
+            if ((node === null || node === void 0 ? void 0 : node.module.name) === target)
+                return true;
+            if (node === null || node === void 0 ? void 0 : node.children)
+                nodes.push(...node.children);
+        }
+        return false;
+    };
     const addParent = (target, module) => {
         if (target === "") {
             config = [createNode(module, config)];
@@ -28,6 +39,9 @@ export const withPlugins = (root, plugins) => {
         }
         config = traverse(config, target, (node) => [createNode(module, [node])]);
     };
+    const append = (target, module) => {
+        config = traverse(config, target, (node) => [createNode(node.module, [createNode(module, node.children)])]);
+    };
     const addChild = (target, module, precede) => {
         config = traverse(config, target, (node) => {
             var _a;
@@ -58,7 +72,9 @@ export const withPlugins = (root, plugins) => {
     };
     plugins === null || plugins === void 0 ? void 0 : plugins.forEach((plugin) => {
         plugin({
+            contains,
             addParent,
+            append,
             addChild,
             addSibling,
             replace,

package/dist/core/modules/Carousel.js

@@ -13,7 +13,7 @@ const CarouselSlide = ({ slide, offset }) => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
         if (!rendered && "src" in slide) {
-            rendered = React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect });
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, slide),

package/dist/core/modules/Controller.d.ts

@@ -8,7 +8,6 @@ declare type ControllerState = {
 };
 export declare type ControllerContextType = ControllerState & {
     latestProps: React.MutableRefObject<ComponentProps>;
-    containerRef: React.RefObject<HTMLDivElement>;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
 };
 export declare const useController: () => ControllerContextType;

package/dist/core/modules/Controller.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
-import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
+import { cleanup, clsx, cssClass, cssVar, isRTL, makeUseContext } from "../utils.js";
 import { createModule } from "../config.js";
 import { useContainerRect, useEnhancedEffect, useLatest, useSensors } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
@@ -48,7 +48,7 @@ export const Controller = ({ children, ...props }) => {
     useEnhancedEffect(() => {
         const node = containerRef.current;
         if (node) {
-            setState((prev) => ({ ...prev, isRTL: window.getComputedStyle(node).direction === "rtl" }));
+            setState((prev) => ({ ...prev, isRTL: isRTL(node) }));
         }
     }, [containerRef]);
     React.useEffect(() => {
@@ -93,7 +93,7 @@ export const Controller = ({ children, ...props }) => {
         return !(carousel.finite &&
             ((rtl(offset) > 0 && currentIndex === 0) || (rtl(offset) < 0 && currentIndex === slides.length - 1)));
     }, [rtl]);
-    const swipe = React.useCallback((direction) => {
+    const swipe = React.useCallback((direction, count = 1) => {
         var _a;
         const { current } = refs;
         const slidesCount = current.props.slides.length;
@@ -101,7 +101,7 @@ export const Controller = ({ children, ...props }) => {
         const { currentIndex, globalIndex } = current.state;
         const { swipeOffset } = current;
         let newSwipeState = "swipe-animation";
-        let newSwipeAnimationDuration = swipeAnimationDuration;
+        let newSwipeAnimationDuration = swipeAnimationDuration * count;
         if (!direction) {
             const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
@@ -126,8 +126,8 @@ export const Controller = ({ children, ...props }) => {
         const newState = {};
         if (direction === "prev") {
             if (isSwipeValid(rtl(1))) {
-                newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
-                newState.globalIndex = globalIndex - 1;
+                newState.currentIndex = (currentIndex - count + slidesCount) % slidesCount;
+                newState.globalIndex = globalIndex - count;
             }
             else {
                 newSwipeState = undefined;
@@ -136,14 +136,15 @@ export const Controller = ({ children, ...props }) => {
         }
         else if (direction === "next") {
             if (isSwipeValid(rtl(-1))) {
-                newState.currentIndex = (currentIndex + 1) % slidesCount;
-                newState.globalIndex = globalIndex + 1;
+                newState.currentIndex = (currentIndex + count) % slidesCount;
+                newState.globalIndex = globalIndex + count;
             }
             else {
                 newSwipeState = undefined;
                 newSwipeAnimationDuration = swipeAnimationDuration;
             }
         }
+        newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
         resetSwipe();
         current.swipeState = newSwipeState;
         current.swipeAnimationDuration = newSwipeAnimationDuration;
@@ -154,9 +155,10 @@ export const Controller = ({ children, ...props }) => {
                 rerender();
             }, newSwipeAnimationDuration);
         }
+        publish("controller-swipe", { ...newState, animationDuration: current.swipeAnimationDuration });
         setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl]);
-    React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl, publish]);
+    React.useEffect(() => cleanup(subscribe("prev", (_, count) => swipe("prev", typeof count === "number" ? count : undefined)), subscribe("next", (_, count) => swipe("next", typeof count === "number" ? count : undefined))), [subscribe, swipe]);
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "Escape") {
             publish("close");
@@ -275,13 +277,12 @@ export const Controller = ({ children, ...props }) => {
     React.useEffect(() => subscribeSensors("onWheel", onWheel), [subscribeSensors, onWheel]);
     const context = React.useMemo(() => ({
         latestProps,
-        containerRef,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
         isRTL: state.isRTL,
         subscribeSensors,
-    }), [latestProps, containerRef, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
+    }), [latestProps, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), cssClass("fullsize"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
             ...(refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
                 ? {
                     [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,

package/dist/core/utils.d.ts

@@ -8,3 +8,4 @@ export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
 export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
 export declare const hasWindow: () => boolean;
 export declare const adjustDevicePixelRatio: (value: number) => number;
+export declare const isRTL: (node: HTMLElement) => boolean;

package/dist/core/utils.js

@@ -18,3 +18,4 @@ export const makeUseContext = (name, contextName, context) => () => {
 };
 export const hasWindow = () => typeof window !== "undefined";
 export const adjustDevicePixelRatio = (value) => hasWindow() ? Math.round(value / (window.devicePixelRatio || 1)) : value;
+export const isRTL = (node) => window.getComputedStyle(node).direction === "rtl";

package/dist/plugins/Fullscreen.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LightboxProps, Plugin, Render } from "../types.js";
+import { Component, LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
         /** if `true`, enter fullscreen mode automatically when the lightbox opens */
@@ -35,13 +35,14 @@ declare global {
         msRequestFullscreen?: () => void;
     }
 }
+export declare const FullscreenContainer: Component;
 /** Fullscreen button props */
 export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
     auto: boolean;
     render: Render;
 };
 /** Fullscreen button */
-export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
+export declare const FullscreenButton: React.FC<FullscreenButtonProps>;
 /** Fullscreen plugin */
 export declare const Fullscreen: Plugin;
 export default Fullscreen;

package/dist/plugins/Fullscreen.js

@@ -1,12 +1,20 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useController, useLatest } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, IconButton, label, makeUseContext, useLatest, } from "../core/index.js";
+const FullscreenContext = React.createContext(null);
+const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
+export const FullscreenContainer = ({ children }) => {
+    const containerRef = React.useRef(null);
+    const context = React.useMemo(() => ({ containerRef }), []);
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass("fullscreen"), cssClass("fullsize")) },
+        React.createElement(FullscreenContext.Provider, { value: context }, children)));
+};
 const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
 export const FullscreenButton = ({ auto, labels, render }) => {
     const [mounted, setMounted] = React.useState(false);
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
-    const { containerRef } = useController();
+    const { containerRef } = useFullscreen();
     const isFullscreenEnabled = () => {
         var _a, _b, _c, _d;
         return (_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false;
@@ -94,7 +102,7 @@ export const FullscreenButton = ({ auto, labels, render }) => {
         return null;
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
 };
-export const Fullscreen = ({ augment }) => {
+export const Fullscreen = ({ augment, contains, addParent }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {
             buttons: [
@@ -105,5 +113,6 @@ export const Fullscreen = ({ augment }) => {
         },
         ...restProps,
     }));
+    addParent(contains("thumbnails") ? "thumbnails" : "controller", createModule("fullscreen", FullscreenContainer));
 };
 export default Fullscreen;

package/dist/plugins/Thumbnails.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Component, LightboxProps, Plugin } from "../types.js";
+import { ContainerRect } from "../core/index.js";
+declare type Position = "top" | "bottom" | "start" | "end";
+declare module "../types.js" {
+    interface LightboxProps {
+        /** Thumbnails plugin settings */
+        thumbnails?: {
+            /** thumbnails position */
+            position?: Position;
+            /** thumbnail width */
+            width?: number;
+            /** thumbnail height */
+            height?: number;
+            /** thumbnail border width */
+            border?: number;
+            /** thumbnail border radius */
+            borderRadius?: number;
+            /** thumbnail inner padding */
+            padding?: number;
+            /** gap between thumbnails */
+            gap?: number;
+        };
+    }
+    interface Render {
+        thumbnail: ({ slide, rect }: {
+            slide: Slide;
+            rect: ContainerRect;
+        }) => React.ReactNode;
+    }
+}
+declare type DeepNonNullable<T> = NonNullable<{
+    [K in keyof T]-?: NonNullable<T[K]>;
+}>;
+declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
+declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render"> & {
+    container: React.RefObject<HTMLDivElement>;
+    thumbnails: ThumbnailsInternal;
+    startingIndex: number;
+    thumbnailRect: ContainerRect;
+};
+export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
+/** Thumbnails plugin component */
+export declare const ThumbnailsComponent: Component;
+/** Thumbnails plugin */
+export declare const Thumbnails: Plugin;
+export default Thumbnails;

package/dist/plugins/Thumbnails.js

@@ -0,0 +1,244 @@
+import * as React from "react";
+import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, isRTL, useEnhancedEffect, useEvents, } from "../core/index.js";
+const defaultThumbnailsProps = {
+    position: "bottom",
+    width: 120,
+    height: 80,
+    border: 1,
+    borderRadius: 4,
+    padding: 4,
+    gap: 16,
+};
+const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
+const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
+const cssPrefix = (value) => `thumbnails${value ? `_${value}` : ""}`;
+const cssThumbnailPrefix = (value) => cssPrefix(`thumbnail${value ? `_${value}` : ""}`);
+const getSlide = (slides, index) => slides[((index % slides.length) + slides.length) % slides.length];
+const isHorizontal = (position) => ["top", "bottom"].includes(position);
+const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
+const renderThumbnail = ({ slide, render, rect }) => {
+    var _a;
+    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, rect });
+    if (customThumbnail) {
+        return customThumbnail;
+    }
+    const thumbnailIconClass = cssClass(cssThumbnailPrefix("icon"));
+    if ("type" in slide) {
+        if (slide.type === "video") {
+            return (React.createElement(React.Fragment, null,
+                "poster" in slide && (React.createElement("img", { alt: "", src: slide.poster, className: clsx(cssClass("fullsize"), cssClass(cssPrefix("contain_image"))) })),
+                React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
+        }
+    }
+    else if ("src" in slide) {
+        return React.createElement(ImageSlide, { slide: slide, rect: rect });
+    }
+    return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
+};
+const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
+        ...(fadeIn
+            ? {
+                [cssVar(cssThumbnailPrefix("fadein_duration"))]: `${fadeIn.duration}ms`,
+                [cssVar(cssThumbnailPrefix("fadein_delay"))]: `${fadeIn.delay}ms`,
+            }
+            : null),
+        ...(fadeOut
+            ? {
+                [cssVar(cssThumbnailPrefix("fadeout_duration"))]: `${fadeOut.duration}ms`,
+                [cssVar(cssThumbnailPrefix("fadeout_delay"))]: `${fadeOut.delay}ms`,
+            }
+            : null),
+    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect })));
+export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, }) => {
+    const track = React.useRef(null);
+    const [state, setState] = React.useState({
+        index: startingIndex,
+        offset: 0,
+    });
+    const refs = React.useRef({
+        state,
+        thumbnails,
+        carousel,
+        animation,
+        animationOffset: 0,
+    });
+    refs.current.state = state;
+    refs.current.thumbnails = thumbnails;
+    refs.current.carousel = carousel;
+    refs.current.animation = animation;
+    const animationRef = React.useRef();
+    const { publish, subscribe } = useEvents();
+    React.useEffect(() => {
+        if (track.current) {
+            refs.current.isRTL = isRTL(track.current);
+        }
+    }, []);
+    React.useEffect(() => subscribe("controller-swipe", (_, event) => {
+        if (event && typeof event === "object" && "globalIndex" in event) {
+            const { current } = refs;
+            if (container.current && track.current) {
+                const containerRect = container.current.getBoundingClientRect();
+                const trackRect = track.current.getBoundingClientRect();
+                current.animationOffset = isHorizontal(refs.current.thumbnails.position)
+                    ? trackRect.left - (containerRect.width - trackRect.width) / 2
+                    : trackRect.top - (containerRect.height - trackRect.height) / 2;
+            }
+            else {
+                current.animationOffset = 0;
+            }
+            current.animationOverride =
+                "animationDuration" in event
+                    ? event.animationDuration
+                    : undefined;
+            const newIndex = event.globalIndex;
+            setState({
+                index: newIndex,
+                offset: newIndex - current.state.index,
+            });
+        }
+    }), [container, subscribe]);
+    useEnhancedEffect(() => {
+        var _a, _b, _c, _d;
+        if (track.current && state.offset) {
+            const { current } = refs;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+            const animationDuration = (_b = current.animationOverride) !== null && _b !== void 0 ? _b : current.animation.swipe;
+            animationRef.current = (_d = (_c = track.current).animate) === null || _d === void 0 ? void 0 : _d.call(_c, isHorizontal(current.thumbnails.position)
+                ? [
+                    {
+                        transform: `translate3d(${(current.isRTL ? -1 : 1) *
+                            boxSize(current.thumbnails, current.thumbnails.width, true) *
+                            state.offset +
+                            current.animationOffset}px, 0, 0)`,
+                    },
+                    { transform: "translate3d(0, 0, 0)" },
+                ]
+                : [
+                    {
+                        transform: `translate3d(0, ${boxSize(current.thumbnails, current.thumbnails.height, true) * state.offset +
+                            current.animationOffset}px, 0)`,
+                    },
+                    { transform: "translate3d(0, 0, 0)" },
+                ], animationDuration);
+            if (animationRef.current) {
+                animationRef.current.onfinish = () => {
+                    animationRef.current = undefined;
+                    if (refs.current.state.index === state.index) {
+                        setState({ index: state.index, offset: 0 });
+                    }
+                };
+            }
+            current.animationOffset = 0;
+        }
+    }, [state.index, state.offset]);
+    const { index, offset } = state;
+    const { finite, preload } = carousel;
+    const items = [];
+    if (slides.length > 0) {
+        if (offset < 0) {
+            for (let i = index - preload + offset; i < index - preload; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        for (let i = index - preload - (offset > 0 ? offset : 0); i < index; i += 1) {
+            if (!(finite && i < 0)) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        items.push({ slide: getSlide(slides, index), index });
+        for (let i = index + 1; i <= index + preload - (offset < 0 ? offset : 0); i += 1) {
+            if (!finite || i <= slides.length - 1) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        if (offset > 0) {
+            for (let i = index + preload + 1; i <= index + preload + offset; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+    }
+    const handleClick = (slideIndex) => () => {
+        if (slideIndex > index) {
+            publish("next", slideIndex - index);
+        }
+        else if (slideIndex < index) {
+            publish("prev", index - slideIndex);
+        }
+    };
+    return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass("flex_center")), style: {
+            ...(thumbnails.width !== defaultThumbnailsProps.width
+                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, thumbnails.width)}px` }
+                : null),
+            ...(thumbnails.height !== defaultThumbnailsProps.height
+                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, thumbnails.height)}px` }
+                : null),
+            ...(thumbnails.border !== defaultThumbnailsProps.border
+                ? { [cssVar(cssThumbnailPrefix("border"))]: `${thumbnails.border}px` }
+                : null),
+            ...(thumbnails.borderRadius !== defaultThumbnailsProps.borderRadius
+                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${thumbnails.borderRadius}px` }
+                : null),
+            ...(thumbnails.padding !== defaultThumbnailsProps.padding
+                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${thumbnails.padding}px` }
+                : null),
+            ...(thumbnails.gap !== defaultThumbnailsProps.gap
+                ? { [cssVar(cssThumbnailPrefix("gap"))]: `${thumbnails.gap}px` }
+                : null),
+        } },
+        React.createElement("nav", { ref: track, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+            var _a;
+            const fadeAnimationDuration = ((_a = refs.current.animationOverride) !== null && _a !== void 0 ? _a : animation.swipe) / Math.abs(offset || 1);
+            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
+                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: ((offset > 0
+                        ? slideIndex - (index + preload - offset)
+                        : index - preload - offset - slideIndex) -
+                        1) *
+                        fadeAnimationDuration,
+                }
+                : undefined;
+            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: (offset > 0
+                        ? offset - (index - preload - slideIndex)
+                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
+                }
+                : undefined;
+            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+        }))));
+};
+export const ThumbnailsComponent = ({ thumbnails: originalThumbnails, slides, index, carousel, animation, render, children, }) => {
+    const thumbnails = { ...defaultThumbnailsProps, ...originalThumbnails };
+    const ref = React.useRef(null);
+    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height } }));
+    return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`)), cssClass("fullsize")) },
+        (thumbnails.position === "start" || thumbnails.position === "top") && track,
+        React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
+        (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
+};
+export const Thumbnails = ({ augment, contains, append, addParent }) => {
+    augment(({ thumbnails: originalThumbnails, ...restProps }) => ({
+        thumbnails: {
+            ...defaultThumbnailsProps,
+            ...originalThumbnails,
+        },
+        ...restProps,
+    }));
+    const module = createModule("thumbnails", ThumbnailsComponent);
+    if (contains("fullscreen")) {
+        append("fullscreen", module);
+    }
+    else {
+        addParent("controller", module);
+    }
+};
+export default Thumbnails;

package/dist/plugins/index.d.ts

@@ -2,4 +2,5 @@ export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Slideshow.js";
+export * from "./Thumbnails.js";
 export * from "./Video.js";

package/dist/plugins/index.js

@@ -2,4 +2,5 @@ export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Slideshow.js";
+export * from "./Thumbnails.js";
 export * from "./Video.js";

package/dist/plugins/thumbnails.css

@@ -0,0 +1,151 @@
+.yarl__thumbnails {
+  display: flex;
+}
+.yarl__thumbnails_top, .yarl__thumbnails_bottom {
+  flex-flow: column nowrap;
+}
+.yarl__thumbnails_top .yarl__thumbnails_track, .yarl__thumbnails_bottom .yarl__thumbnails_track {
+  flex-flow: row nowrap;
+}
+.yarl__thumbnails_start, .yarl__thumbnails_end {
+  flex-flow: row nowrap;
+}
+.yarl__thumbnails_start .yarl__thumbnails_track, .yarl__thumbnails_end .yarl__thumbnails_track {
+  flex-flow: column nowrap;
+}
+.yarl__thumbnails_wrapper {
+  flex-grow: 1;
+  position: relative;
+}
+.yarl__thumbnails_container {
+  color: #fff;
+  background-color: #000;
+  overflow: hidden;
+  padding: 16px;
+  position: relative;
+  z-index: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+}
+.yarl__thumbnails_container::before, .yarl__thumbnails_container::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
+  left: 0;
+  background: linear-gradient(to left, transparent, #000);
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
+  right: 0;
+  background: linear-gradient(to right, transparent, #000);
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
+  top: 0;
+  bottom: 0;
+  width: 60px;
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
+  top: 0;
+  background: linear-gradient(to top, transparent, #000);
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent, #000);
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::after {
+  left: 0;
+  right: 0;
+  height: 60px;
+}
+.yarl__thumbnails_track {
+  display: flex;
+  gap: var(--yarl__thumbnails_thumbnail_gap, 16px);
+}
+.yarl__thumbnails_thumbnail {
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: var(--yarl__thumbnails_thumbnail_border, 1px) solid rgba(255, 255, 255, 0.8);
+  border-radius: var(--yarl__thumbnails_thumbnail_border_radius, 4px);
+  -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  padding: var(--yarl__thumbnails_thumbnail_padding, 4px);
+  width: var(--yarl__thumbnails_thumbnail_width, 120px);
+  height: var(--yarl__thumbnails_thumbnail_height, 80px);
+  box-sizing: content-box;
+}
+.yarl__thumbnails_thumbnail_active {
+  border-color: #fff;
+}
+.yarl__thumbnails_thumbnail_fadein {
+  opacity: 0;
+  -webkit-animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay, 0s) forwards;
+          animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay, 0s) forwards;
+}
+.yarl__thumbnails_thumbnail_fadeout {
+  -webkit-animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay, 0s) forwards;
+          animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay, 0s) forwards;
+  cursor: unset;
+}
+.yarl__thumbnails_thumbnail_placeholder {
+  visibility: hidden;
+  cursor: unset;
+}
+.yarl__thumbnails_thumbnail_icon {
+  color: rgba(255, 255, 255, 0.8);
+  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+  width: 32px;
+  height: 32px;
+}
+.yarl__thumbnails_contain_image {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@-webkit-keyframes yarl__thumbnails_thumbnail_fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes yarl__thumbnails_thumbnail_fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes yarl__thumbnails_thumbnail_fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes yarl__thumbnails_thumbnail_fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/styles.css

@@ -1,3 +1,7 @@
+.yarl__fullsize {
+  width: 100%;
+  height: 100%;
+}
 .yarl__portal {
   position: fixed;
   inset: 0;
@@ -17,8 +21,6 @@
   touch-action: var(--yarl__controller_touch_action, none);
 }
 .yarl__container {
-  width: 100%;
-  height: 100%;
   position: relative;
   overflow: hidden;
   color: #fff;
@@ -56,8 +58,6 @@
   transition: unset;
 }
 .yarl__slide_image {
-  width: 100%;
-  height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
   -moz-user-select: none;

package/dist/types.d.ts

@@ -175,21 +175,25 @@ export declare type Node = {
 export declare type Augmentation = (props: LightboxProps) => LightboxProps;
 /** Plugin methods */
 export declare type PluginMethods = {
-    /** add module as parent */
+    /** test if a target module is present */
+    contains: (target: string) => boolean;
+    /** add module as a parent */
     addParent: (target: string, module: Module) => void;
-    /** add module as child */
+    /** add module as a child */
     addChild: (target: string, module: Module, precede?: boolean) => void;
-    /** add module as sibling */
+    /** add module as a sibling */
     addSibling: (target: string, module: Module, precede?: boolean) => void;
     /** replace module */
     replace: (target: string, module: Module) => void;
+    /** add module as a child and inherit all existing children */
+    append: (target: string, module: Module) => void;
     /** remove module */
     remove: (target: string) => void;
     /** augment lightbox props */
     augment: (augmentation: Augmentation) => void;
 };
 /** Lightbox plugin */
-export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, augment }: PluginMethods) => void;
+export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, append, augment }: PluginMethods) => void;
 /** Deep partial utility type */
 export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
     [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.7.1",
+    "version": "1.8.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -15,6 +15,8 @@
         "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
         "./plugins/inline": "./dist/plugins/Inline.js",
         "./plugins/slideshow": "./dist/plugins/Slideshow.js",
+        "./plugins/thumbnails": "./dist/plugins/Thumbnails.js",
+        "./plugins/thumbnails.css": "./dist/plugins/thumbnails.css",
         "./plugins/video": "./dist/plugins/Video.js",
         "./styles.css": "./dist/styles.css"
     },
@@ -42,6 +44,9 @@
             "plugins/slideshow": [
                 "dist/plugins/Slideshow.d.ts"
             ],
+            "plugins/thumbnails": [
+                "dist/plugins/Thumbnails.d.ts"
+            ],
             "plugins/video": [
                 "dist/plugins/Video.d.ts"
             ]
@@ -85,14 +90,14 @@
         "@semantic-release/github": "^8.0.4",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.0",
-        "@types/jest": "^28.1.1",
-        "@types/react": "^18.0.13",
+        "@testing-library/user-event": "^14.2.1",
+        "@types/jest": "^28.1.2",
+        "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.28.0",
         "@typescript-eslint/parser": "^5.28.0",
         "autoprefixer": "^10.4.7",
-        "eslint": "^8.17.0",
+        "eslint": "^8.18.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
@@ -114,7 +119,7 @@
         "rimraf": "^3.0.2",
         "sass": "^1.52.3",
         "ts-jest": "^28.0.5",
-        "typescript": "^4.7.3"
+        "typescript": "^4.7.4"
     },
     "keywords": [
         "react",