yet-another-react-lightbox 1.13.4 → 2.0.0-rc.1

package/dist/plugins/{Fullscreen.js → fullscreen/FullscreenButton.js}

@@ -1,20 +1,12 @@
 import * as React from "react";
-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)));
-};
+import { createIcon, IconButton, label, useEventCallback } from "../../core/index.js";
+import { useFullscreen } from "./FullscreenContext.js";
 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 } = useFullscreen();
+    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;
@@ -80,7 +72,10 @@ export const FullscreenButton = ({ auto, labels, render }) => {
             setFullscreen(false);
         }
     }, [containerRef, getFullscreenElement]);
-    React.useEffect(() => setMounted(true), []);
+    React.useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     React.useEffect(() => {
         const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
         events.forEach((event) => {
@@ -92,27 +87,18 @@ export const FullscreenButton = ({ auto, labels, render }) => {
             });
         };
     }, [fullscreenChangeListener]);
-    React.useEffect(() => () => exitFullscreen(), [exitFullscreen]);
-    React.useEffect(() => {
-        if (latestAuto.current) {
+    const handleAutoFullscreen = useEventCallback(() => {
+        if (auto) {
             requestFullscreen();
         }
-    }, [latestAuto, requestFullscreen]);
+    });
+    React.useEffect(() => {
+        handleAutoFullscreen();
+        return () => {
+            exitFullscreen();
+        };
+    }, [handleAutoFullscreen, exitFullscreen]);
     if (!mounted || !isFullscreenEnabled())
         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, contains, addParent }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: {
-            buttons: [
-                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
-                ...buttons,
-            ],
-            ...restToolbar,
-        },
-        ...restProps,
-    }));
-    addParent(contains("thumbnails") ? "thumbnails" : "controller", createModule("fullscreen", FullscreenContainer));
-};
-export default Fullscreen;

package/dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare type FullscreenContextType = React.RefObject<HTMLDivElement>;
+export declare const useFullscreen: () => FullscreenContextType;
+export declare const FullscreenContextProvider: React.FC<React.PropsWithChildren>;
+export {};

package/dist/plugins/fullscreen/FullscreenContext.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN } from "../../core/index.js";
+const FullscreenContext = React.createContext(null);
+export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
+export const FullscreenContextProvider = ({ children }) => {
+    const containerRef = React.useRef(null);
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
+        React.createElement(FullscreenContext.Provider, { value: containerRef }, children)));
+};

package/dist/plugins/{Fullscreen.d.ts → fullscreen/index.d.ts}

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

package/dist/plugins/fullscreen/index.js

@@ -0,0 +1,2 @@
+import { Fullscreen } from "./Fullscreen.js";
+export default Fullscreen;

package/dist/plugins/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./Captions.js";
-export * from "./Fullscreen.js";
-export * from "./Inline.js";
-export * from "./Slideshow.js";
-export * from "./Thumbnails.js";
-export * from "./Video.js";
-export * from "./Zoom.js";
+export { default as Captions } from "./captions/index.js";
+export { default as Fullscreen } from "./fullscreen/index.js";
+export { default as Inline } from "./inline/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";
+export { default as Zoom } from "./zoom/index.js";

package/dist/plugins/index.js

@@ -1,7 +1,7 @@
-export * from "./Captions.js";
-export * from "./Fullscreen.js";
-export * from "./Inline.js";
-export * from "./Slideshow.js";
-export * from "./Thumbnails.js";
-export * from "./Video.js";
-export * from "./Zoom.js";
+export { default as Captions } from "./captions/index.js";
+export { default as Fullscreen } from "./fullscreen/index.js";
+export { default as Inline } from "./inline/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";
+export { default as Zoom } from "./zoom/index.js";

package/dist/plugins/inline/Inline.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from "../../types.js";
+/** Inline plugin */
+export declare const Inline: Plugin;

package/dist/plugins/{Inline.js → inline/Inline.js}

@@ -1,13 +1,12 @@
 import * as React from "react";
-import { clsx, createModule, cssClass } from "../core/index.js";
-export const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), className), ...rest }, children));
-export const InlineModule = createModule("inline", InlineContainer);
+import { ACTION_CLOSE, clsx, createModule, cssClass, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE, } from "../../core/index.js";
+const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), className), ...rest }, children));
 export const Inline = ({ augment, replace, remove }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
         open: true,
         close: () => { },
         toolbar: {
-            buttons: buttons.filter((button) => button !== "close"),
+            buttons: buttons.filter((button) => button !== ACTION_CLOSE),
             ...restToolbar,
         },
         inline: { style: { width: "100%", height: "100%" }, className },
@@ -15,7 +14,6 @@ export const Inline = ({ augment, replace, remove }) => {
         className,
         ...restProps,
     }));
-    remove("no-scroll");
-    replace("portal", InlineModule);
+    remove(MODULE_NO_SCROLL);
+    replace(MODULE_PORTAL, createModule(PLUGIN_INLINE, InlineContainer));
 };
-export default Inline;

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Inline } from "./Inline.js";
+declare module "../../types" {
+    interface LightboxProps {
+        /** HTML div element attributes to be passed to the Inline plugin container */
+        inline?: React.HTMLAttributes<HTMLDivElement>;
+    }
+}
+export default Inline;

package/dist/plugins/inline/index.js

@@ -0,0 +1,2 @@
+import { Inline } from "./Inline.js";
+export default Inline;

package/dist/plugins/slideshow/Slideshow.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from "../../types.js";
+export declare const defaultSlideshowProps: {
+    autoplay: boolean;
+    delay: number;
+};
+/** Slideshow plugin */
+export declare const Slideshow: Plugin;

package/dist/plugins/slideshow/Slideshow.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SlideshowButton } from "./SlideshowButton.js";
+import { PLUGIN_SLIDESHOW } from "../../core/index.js";
+export const defaultSlideshowProps = {
+    autoplay: false,
+    delay: 3000,
+};
+export const Slideshow = ({ augment }) => {
+    augment(({ slideshow: originalSlideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons],
+            ...restToolbar,
+        },
+        slideshow: {
+            ...defaultSlideshowProps,
+            ...originalSlideshow,
+        },
+        ...restProps,
+    }));
+};

package/dist/plugins/slideshow/SlideshowButton.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const SlideshowButton: React.FC;

package/dist/plugins/{Slideshow.js → slideshow/SlideshowButton.js}

@@ -1,55 +1,43 @@
 import * as React from "react";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, cleanup, createIcon, IconButton, label, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, useController, useEvents, useLatest, useTimeouts, } from "../core/index.js";
-const defaultSlideshowProps = {
-    autoplay: false,
-    delay: 3000,
-};
+import { ACTION_NEXT, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, cleanup, createIcon, IconButton, label, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, useController, useEventCallback, useEvents, useLightboxState, useTimeouts, } from "../../core/index.js";
+import { defaultSlideshowProps } from "./Slideshow.js";
 const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
 const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
-const SlideshowButton = () => {
-    const { currentIndex, latestProps } = useController();
+export const SlideshowButton = () => {
+    const { state: { currentIndex }, } = useLightboxState();
+    const { getLightboxProps } = useController();
     const { setTimeout, clearTimeout } = useTimeouts();
     const { publish, subscribe } = useEvents();
-    const slideshow = {
-        ...defaultSlideshowProps,
-        ...latestProps.current.slideshow,
-    };
+    const { slideshow: slideshowProps, carousel: { finite }, slides, render, labels, } = getLightboxProps();
+    const slidesCount = slides.length;
+    const slideshow = { ...defaultSlideshowProps, ...slideshowProps };
     const [playing, setPlaying] = React.useState(slideshow.autoplay);
     const scheduler = React.useRef();
-    const refs = useLatest({
-        playing,
-        delay: slideshow.delay,
-        currentIndex,
-        finite: latestProps.current.carousel.finite,
-        slidesCount: latestProps.current.slides.length,
-    });
     const slideStatus = React.useRef();
     const cancelScheduler = React.useCallback(() => {
         clearTimeout(scheduler.current);
         scheduler.current = undefined;
     }, [clearTimeout]);
-    const reachedLastSlide = React.useCallback(() => refs.current.finite && refs.current.currentIndex === refs.current.slidesCount - 1, [refs]);
-    const scheduleNextSlide = React.useCallback(() => {
+    const reachedLastSlide = useEventCallback(() => finite && currentIndex === slidesCount - 1);
+    const scheduleNextSlide = useEventCallback(() => {
         cancelScheduler();
-        if (!refs.current.playing ||
+        if (!playing ||
             reachedLastSlide() ||
             slideStatus.current === SLIDE_STATUS_LOADING ||
             slideStatus.current === SLIDE_STATUS_PLAYING) {
             return;
         }
         scheduler.current = setTimeout(() => {
-            if (refs.current.playing) {
+            if (playing) {
                 slideStatus.current = undefined;
-                publish("next");
+                publish(ACTION_NEXT);
             }
-        }, refs.current.delay);
-    }, [publish, setTimeout, cancelScheduler, refs, reachedLastSlide]);
+        }, slideshow.delay);
+    });
     const togglePlaying = React.useCallback(() => {
         setPlaying((prev) => !prev);
     }, []);
-    React.useEffect(() => {
-        scheduleNextSlide();
-    }, [currentIndex, playing, scheduleNextSlide]);
+    React.useEffect(scheduleNextSlide, [currentIndex, playing, scheduleNextSlide]);
     React.useEffect(() => {
         if (playing && reachedLastSlide()) {
             setPlaying(false);
@@ -67,22 +55,7 @@ const SlideshowButton = () => {
     }), subscribe(ACTIVE_SLIDE_COMPLETE, () => {
         slideStatus.current = SLIDE_STATUS_COMPLETE;
         scheduleNextSlide();
-    })), [subscribe, cancelScheduler, scheduleNextSlide]);
-    const { render, labels } = latestProps.current;
+    }), cancelScheduler), [subscribe, cancelScheduler, scheduleNextSlide]);
     const disabled = reachedLastSlide();
     return render.buttonSlideshow ? (React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, togglePlaying, disabled }))) : (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: togglePlaying, disabled: disabled, "aria-disabled": disabled }));
 };
-export const Slideshow = ({ augment }) => {
-    augment(({ slideshow: originalSlideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: {
-            buttons: [React.createElement(SlideshowButton, { key: "slideshow" }), ...buttons],
-            ...restToolbar,
-        },
-        slideshow: {
-            ...defaultSlideshowProps,
-            ...originalSlideshow,
-        },
-        ...restProps,
-    }));
-};
-export default Slideshow;

package/dist/plugins/{Slideshow.d.ts → slideshow/index.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Plugin } from "../types.js";
-declare module "../types.js" {
+import { Slideshow } from "./Slideshow.js";
+declare module "../../types" {
     interface LightboxProps {
         /** Slideshow plugin settings */
         slideshow?: {
@@ -26,6 +26,4 @@ declare module "../types.js" {
         }) => React.ReactNode;
     }
 }
-/** Slideshow plugin */
-export declare const Slideshow: Plugin;
 export default Slideshow;

package/dist/plugins/slideshow/index.js

@@ -0,0 +1,2 @@
+import { Slideshow } from "./Slideshow.js";
+export default Slideshow;

package/dist/plugins/thumbnails/Thumbnail.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { ImageFit, LightboxProps, Slide } from "../../types.js";
+import { ContainerRect } from "../../core/index.js";
+declare type FadeSettings = {
+    duration: number;
+    delay: number;
+};
+declare type ThumbnailProps = {
+    rect: ContainerRect;
+    slide: Slide | null;
+    onClick: () => void;
+    active: boolean;
+    fadeIn?: FadeSettings;
+    fadeOut?: FadeSettings;
+    placeholder: boolean;
+    render: LightboxProps["render"];
+    imageFit: ImageFit;
+    style?: React.CSSProperties;
+};
+export declare const Thumbnail: React.FC<ThumbnailProps>;
+export {};

package/dist/plugins/thumbnails/Thumbnail.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, clsx, createIcon, cssClass, cssVar, ELEMENT_ICON, ImageSlide, isImageSlide, makeComposePrefix, } from "../../core/index.js";
+import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
+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 renderThumbnail = ({ slide, render, rect, imageFit }) => {
+    var _a;
+    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
+    if (customThumbnail) {
+        return customThumbnail;
+    }
+    const thumbnailIconClass = cssClass(cssThumbnailPrefix(ELEMENT_ICON));
+    if (!isImageSlide(slide)) {
+        if (slide.type === "video") {
+            return (React.createElement(React.Fragment, null,
+                "poster" in slide && (React.createElement("img", { alt: "", src: slide.poster, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(cssPrefix("contain_image"))) })),
+                React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
+        }
+    }
+    else {
+        return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
+    }
+    return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
+};
+const activePrefix = makeComposePrefix("active");
+const fadeInPrefix = makeComposePrefix("fadein");
+const fadeOutPrefix = makeComposePrefix("fadeout");
+const placeholderPrefix = makeComposePrefix("placeholder");
+const DELAY = "delay";
+const DURATION = "duration";
+export const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
+        ...(fadeIn
+            ? {
+                [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
+                [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
+            }
+            : null),
+        ...(fadeOut
+            ? {
+                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
+                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
+            }
+            : null),
+        ...style,
+    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));

package/dist/plugins/thumbnails/Thumbnails.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from "../../types.js";
+export declare const defaultThumbnailsProps: {
+    position: "bottom";
+    width: number;
+    height: number;
+    border: number;
+    borderRadius: number;
+    padding: number;
+    gap: number;
+    imageFit: "contain";
+};
+/** Thumbnails plugin */
+export declare const Thumbnails: Plugin;

package/dist/plugins/thumbnails/Thumbnails.js

@@ -0,0 +1,28 @@
+import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
+import { ThumbnailsComponent } from "./ThumbnailsContainer.js";
+export const defaultThumbnailsProps = {
+    position: "bottom",
+    width: 120,
+    height: 80,
+    border: 1,
+    borderRadius: 4,
+    padding: 4,
+    gap: 16,
+    imageFit: "contain",
+};
+export const Thumbnails = ({ augment, contains, append, addParent }) => {
+    augment(({ thumbnails, ...restProps }) => ({
+        thumbnails: {
+            ...defaultThumbnailsProps,
+            ...thumbnails,
+        },
+        ...restProps,
+    }));
+    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsComponent);
+    if (contains(PLUGIN_FULLSCREEN)) {
+        append(PLUGIN_FULLSCREEN, module);
+    }
+    else {
+        addParent(MODULE_CONTROLLER, module);
+    }
+};

package/dist/plugins/thumbnails/ThumbnailsContainer.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+/** Thumbnails plugin component */
+export declare const ThumbnailsComponent: Component;

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { clsx, cssClass } from "../../core/index.js";
+import { cssPrefix } from "./utils.js";
+import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
+import { defaultThumbnailsProps } from "./Thumbnails.js";
+export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, styles, children, }) => {
+    const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
+    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 }, styles: styles }));
+    return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`))) },
+        (thumbnails.position === "start" || thumbnails.position === "top") && track,
+        React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
+        (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
+};

package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ContainerRect } from "../../core/index.js";
+import { DeepNonNullable, LightboxProps } from "../../types.js";
+declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
+declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
+    container: React.RefObject<HTMLDivElement>;
+    thumbnails: ThumbnailsInternal;
+    startingIndex: number;
+    thumbnailRect: ContainerRect;
+};
+export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
+export {};