yet-another-react-lightbox 3.5.4 → 3.6.0

package/dist/plugins/fullscreen/FullscreenContext.js

@@ -1,93 +0,0 @@
-import * as React from "react";
-import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN, useEventCallback, useLayoutEffect, } from "../../core/index.js";
-import { resolveFullscreenProps } from "./props.js";
-export const FullscreenContext = React.createContext(null);
-export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-export function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
-    const { auto, ref } = resolveFullscreenProps(fullscreenProps);
-    const containerRef = React.useRef(null);
-    const [fullscreen, setFullscreen] = React.useState(false);
-    const [disabled, setDisabled] = React.useState();
-    useLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        setDisabled(!((_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));
-    }, []);
-    const getFullscreenElement = React.useCallback(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.webkitFullscreenElement) !== null && _b !== void 0 ? _b : document.mozFullScreenElement) !== null && _c !== void 0 ? _c : document.msFullscreenElement;
-    }, []);
-    const enter = React.useCallback(() => {
-        const container = containerRef.current;
-        if (container) {
-            try {
-                if (container.requestFullscreen) {
-                    container.requestFullscreen().catch(() => { });
-                }
-                else if (container.webkitRequestFullscreen) {
-                    container.webkitRequestFullscreen();
-                }
-                else if (container.mozRequestFullScreen) {
-                    container.mozRequestFullScreen();
-                }
-                else if (container.msRequestFullscreen) {
-                    container.msRequestFullscreen();
-                }
-            }
-            catch (err) {
-            }
-        }
-    }, []);
-    const exit = React.useCallback(() => {
-        if (getFullscreenElement()) {
-            try {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen().catch(() => { });
-                }
-                else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                }
-                else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                }
-                else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
-            }
-            catch (err) {
-            }
-        }
-    }, [getFullscreenElement]);
-    const fullscreenChangeListener = React.useCallback(() => {
-        if (getFullscreenElement() === containerRef.current) {
-            setFullscreen(true);
-        }
-        else {
-            setFullscreen(false);
-        }
-    }, [getFullscreenElement]);
-    React.useEffect(() => {
-        const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
-        events.forEach((event) => {
-            document.addEventListener(event, fullscreenChangeListener);
-        });
-        return () => {
-            events.forEach((event) => {
-                document.removeEventListener(event, fullscreenChangeListener);
-            });
-        };
-    }, [fullscreenChangeListener]);
-    const handleAutoFullscreen = useEventCallback(() => { var _a; return (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a(); });
-    React.useEffect(() => {
-        handleAutoFullscreen();
-        return () => exit();
-    }, [handleAutoFullscreen, exit]);
-    const context = React.useMemo(() => ({
-        fullscreen,
-        disabled,
-        enter,
-        exit,
-    }), [fullscreen, disabled, enter, exit]);
-    React.useImperativeHandle(ref, () => context, [context]);
-    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
-        React.createElement(FullscreenContext.Provider, { value: context }, children)));
-}

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

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { LightboxProps } from "../../types.js";
-export declare const defaultFullscreenProps: {
-    auto: boolean;
-    ref: null;
-};
-export declare const resolveFullscreenProps: (fullscreen: LightboxProps["fullscreen"]) => {
-    ref: import("react").ForwardedRef<import("../../types.js").FullscreenRef>;
-    auto: boolean;
-};

package/dist/plugins/fullscreen/props.js

@@ -1,8 +0,0 @@
-export const defaultFullscreenProps = {
-    auto: false,
-    ref: null,
-};
-export const resolveFullscreenProps = (fullscreen) => ({
-    ...defaultFullscreenProps,
-    ...fullscreen,
-});

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

@@ -1,3 +0,0 @@
-import { PluginProps } from "../../types.js";
-/** Inline plugin */
-export declare function Inline({ augment, replace, remove }: PluginProps): void;

package/dist/plugins/inline/Inline.js

@@ -1,18 +0,0 @@
-import { ACTION_CLOSE, createModule, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from "../../core/index.js";
-import { InlineContainer } from "./InlineContainer.js";
-export function 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 !== ACTION_CLOSE),
-            ...restToolbar,
-        },
-        inline: { style: { width: "100%", height: "100%" }, className },
-        controller: { focus: false, aria: true, touchAction: "pan-y", ...restController },
-        className,
-        ...restProps,
-    }));
-    remove(MODULE_NO_SCROLL);
-    replace(MODULE_PORTAL, createModule(PLUGIN_INLINE, InlineContainer));
-}

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

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { ComponentProps } from "../../types.js";
-/** Inline plugin container */
-export declare function InlineContainer({ inline: { className, ...rest }, children }: ComponentProps): React.JSX.Element;

package/dist/plugins/inline/InlineContainer.js

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { clsx, cssClass } from "../../core/index.js";
-export function InlineContainer({ inline: { className, ...rest } = {}, children }) {
-    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
-}

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

@@ -1,3 +0,0 @@
-import { PluginProps } from "../../types.js";
-/** Slideshow plugin */
-export declare function Slideshow({ augment, addModule }: PluginProps): void;

package/dist/plugins/slideshow/Slideshow.js

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { addToolbarButton, createModule, PLUGIN_SLIDESHOW } from "../../core/index.js";
-import { resolveSlideshowProps } from "./props.js";
-import { SlideshowContextProvider } from "./SlideshowContext.js";
-import { SlideshowButton } from "./SlideshowButton.js";
-export function Slideshow({ augment, addModule }) {
-    augment(({ slideshow, toolbar, ...restProps }) => ({
-        toolbar: addToolbarButton(toolbar, PLUGIN_SLIDESHOW, React.createElement(SlideshowButton, null)),
-        slideshow: resolveSlideshowProps(slideshow),
-        ...restProps,
-    }));
-    addModule(createModule(PLUGIN_SLIDESHOW, SlideshowContextProvider));
-}

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

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function SlideshowButton(): React.JSX.Element;

package/dist/plugins/slideshow/SlideshowButton.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { createIcon, IconButton, useLightboxProps, useLoseFocus } from "../../core/index.js";
-import { useSlideshow } from "./SlideshowContext.js";
-const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
-const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
-export function SlideshowButton() {
-    const { playing, disabled, play, pause } = useSlideshow();
-    const { render } = useLightboxProps();
-    const focusListeners = useLoseFocus(disabled);
-    if (render.buttonSlideshow) {
-        return React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, disabled, play, pause }));
-    }
-    return (React.createElement(IconButton, { label: playing ? "Pause" : "Play", icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners }));
-}

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

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { ComponentProps, SlideshowRef } from "../../types.js";
-export declare const SlideshowContext: React.Context<SlideshowRef | null>;
-export declare const useSlideshow: () => SlideshowRef;
-export declare function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }: ComponentProps): React.JSX.Element;

package/dist/plugins/slideshow/SlideshowContext.js

@@ -1,79 +0,0 @@
-import * as React from "react";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, cleanup, makeUseContext, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, useController, useEventCallback, useEvents, useLightboxState, useTimeouts, } from "../../core/index.js";
-import { resolveSlideshowProps } from "./props.js";
-export const SlideshowContext = React.createContext(null);
-export const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
-export function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }) {
-    const { autoplay, delay, ref } = resolveSlideshowProps(slideshow);
-    const wasPlaying = React.useRef(autoplay);
-    const [playing, setPlaying] = React.useState(autoplay);
-    const scheduler = React.useRef();
-    const slideStatus = React.useRef();
-    const { slides, currentIndex } = useLightboxState();
-    const { setTimeout, clearTimeout } = useTimeouts();
-    const { subscribe } = useEvents();
-    const { next } = useController();
-    const disabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
-    const play = React.useCallback(() => {
-        if (!playing && !disabled) {
-            setPlaying(true);
-        }
-    }, [playing, disabled]);
-    const pause = React.useCallback(() => {
-        if (playing) {
-            setPlaying(false);
-        }
-    }, [playing]);
-    const cancelScheduler = React.useCallback(() => {
-        clearTimeout(scheduler.current);
-        scheduler.current = undefined;
-    }, [clearTimeout]);
-    const scheduleNextSlide = useEventCallback(() => {
-        cancelScheduler();
-        if (!playing ||
-            disabled ||
-            slideStatus.current === SLIDE_STATUS_LOADING ||
-            slideStatus.current === SLIDE_STATUS_PLAYING) {
-            return;
-        }
-        scheduler.current = setTimeout(() => {
-            if (playing) {
-                slideStatus.current = undefined;
-                next();
-            }
-        }, delay);
-    });
-    React.useEffect(scheduleNextSlide, [currentIndex, playing, scheduleNextSlide]);
-    React.useEffect(() => {
-        if (playing && disabled) {
-            setPlaying(false);
-        }
-    }, [currentIndex, playing, disabled]);
-    const onSlideshowStart = useEventCallback(() => { var _a; return (_a = on.slideshowStart) === null || _a === void 0 ? void 0 : _a.call(on); });
-    const onSlideshowStop = useEventCallback(() => { var _a; return (_a = on.slideshowStop) === null || _a === void 0 ? void 0 : _a.call(on); });
-    React.useEffect(() => {
-        if (playing) {
-            onSlideshowStart();
-        }
-        else if (wasPlaying.current) {
-            onSlideshowStop();
-        }
-        wasPlaying.current = playing;
-    }, [playing, onSlideshowStart, onSlideshowStop]);
-    React.useEffect(() => cleanup(cancelScheduler, subscribe(ACTIVE_SLIDE_LOADING, () => {
-        slideStatus.current = SLIDE_STATUS_LOADING;
-        cancelScheduler();
-    }), subscribe(ACTIVE_SLIDE_PLAYING, () => {
-        slideStatus.current = SLIDE_STATUS_PLAYING;
-        cancelScheduler();
-    }), subscribe(ACTIVE_SLIDE_ERROR, () => {
-        slideStatus.current = SLIDE_STATUS_ERROR;
-        scheduleNextSlide();
-    }), subscribe(ACTIVE_SLIDE_COMPLETE, () => {
-        slideStatus.current = SLIDE_STATUS_COMPLETE;
-        scheduleNextSlide();
-    })), [subscribe, cancelScheduler, scheduleNextSlide]);
-    const context = React.useMemo(() => ({ playing, disabled, play, pause }), [playing, disabled, play, pause]);
-    React.useImperativeHandle(ref, () => context, [context]);
-    return React.createElement(SlideshowContext.Provider, { value: context }, children);
-}

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { LightboxProps } from "../../types.js";
-export declare const defaultSlideshowProps: {
-    autoplay: boolean;
-    delay: number;
-    ref: null;
-};
-export declare const resolveSlideshowProps: (slideshow: LightboxProps["slideshow"]) => {
-    ref: import("react").ForwardedRef<import("../../types.js").SlideshowRef>;
-    autoplay: boolean;
-    delay: number;
-};

package/dist/plugins/slideshow/props.js

@@ -1,9 +0,0 @@
-export const defaultSlideshowProps = {
-    autoplay: false,
-    delay: 3000,
-    ref: null,
-};
-export const resolveSlideshowProps = (slideshow) => ({
-    ...defaultSlideshowProps,
-    ...slideshow,
-});

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

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { Slide } from "../../types.js";
-export type FadeSettings = {
-    duration: number;
-    delay: number;
-};
-export type ThumbnailProps = {
-    slide: Slide | null;
-    onClick: () => void;
-    active: boolean;
-    fadeIn?: FadeSettings;
-    fadeOut?: FadeSettings;
-    placeholder: boolean;
-};
-export declare function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }: ThumbnailProps): React.JSX.Element;

package/dist/plugins/thumbnails/Thumbnail.js

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, clsx, createIcon, cssClass, cssVar, ELEMENT_ICON, ImageSlide, isImageSlide, makeComposePrefix, useLightboxProps, } from "../../core/index.js";
-import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
-import { useThumbnailsProps } from "./props.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" }));
-function 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 function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }) {
-    const { render, styles } = useLightboxProps();
-    const { width, height, imageFit } = useThumbnailsProps();
-    const rect = { width, height };
-    return (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
-            ...(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),
-            ...styles.thumbnail,
-        }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
-}

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

@@ -1,3 +0,0 @@
-import { PluginProps } from "../../types.js";
-/** Thumbnails plugin */
-export declare function Thumbnails({ augment, contains, append, addParent }: PluginProps): void;

package/dist/plugins/thumbnails/Thumbnails.js

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { addToolbarButton, createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS, } from "../../core/index.js";
-import { resolveThumbnailsProps } from "./props.js";
-import { ThumbnailsContextProvider } from "./ThumbnailsContext.js";
-import { ThumbnailsButton } from "./ThumbnailsButton.js";
-export function Thumbnails({ augment, contains, append, addParent }) {
-    augment(({ thumbnails: thumbnailsProps, toolbar, ...restProps }) => {
-        const thumbnails = resolveThumbnailsProps(thumbnailsProps);
-        return {
-            toolbar: addToolbarButton(toolbar, PLUGIN_THUMBNAILS, thumbnails.showToggle ? React.createElement(ThumbnailsButton, null) : null),
-            thumbnails,
-            ...restProps,
-        };
-    });
-    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsContextProvider);
-    if (contains(PLUGIN_FULLSCREEN)) {
-        append(PLUGIN_FULLSCREEN, module);
-    }
-    else {
-        addParent(MODULE_CONTROLLER, module);
-    }
-}

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

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function ThumbnailsButton(): React.JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsButton.js

@@ -1,16 +0,0 @@
-import * as React from "react";
-import { createIcon, createIconDisabled, IconButton, useLightboxProps } from "../../core/index.js";
-import { useThumbnails } from "./ThumbnailsContext.js";
-const thumbnailsIcon = () => (React.createElement(React.Fragment, null,
-    React.createElement("path", { strokeWidth: 2, stroke: "currentColor", strokeLinejoin: "round", fill: "none", d: "M3 5l18 0l0 14l-18 0l0-14z" }),
-    React.createElement("path", { d: "M5 14h4v3h-4zM10 14h4v3h-4zM15 14h4v3h-4z" })));
-const ThumbnailsVisible = createIcon("ThumbnailsVisible", thumbnailsIcon());
-const ThumbnailsHidden = createIconDisabled("ThumbnailsHidden", thumbnailsIcon());
-export function ThumbnailsButton() {
-    const { visible, show, hide } = useThumbnails();
-    const { render } = useLightboxProps();
-    if (render.buttonThumbnails) {
-        return React.createElement(React.Fragment, null, render.buttonThumbnails({ visible, show, hide }));
-    }
-    return (React.createElement(IconButton, { label: visible ? "Hide thumbnails" : "Show thumbnails", icon: visible ? ThumbnailsVisible : ThumbnailsHidden, renderIcon: visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden, onClick: visible ? hide : show }));
-}

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

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { ComponentProps, ThumbnailsRef } from "../../types.js";
-export declare const ThumbnailsContext: React.Context<ThumbnailsRef | null>;
-export declare const useThumbnails: () => ThumbnailsRef;
-/** Thumbnails plugin component */
-export declare function ThumbnailsContextProvider({ children, ...props }: ComponentProps): React.JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsContext.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { clsx, cssClass, LightboxPropsProvider, makeUseContext } from "../../core/index.js";
-import { cssPrefix } from "./utils.js";
-import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
-import { resolveThumbnailsProps } from "./props.js";
-export const ThumbnailsContext = React.createContext(null);
-export const useThumbnails = makeUseContext("useThumbnails", "ThumbnailsContext", ThumbnailsContext);
-export function ThumbnailsContextProvider({ children, ...props }) {
-    const [visible, setVisible] = React.useState(true);
-    const containerRef = React.useRef(null);
-    const { ref, position } = resolveThumbnailsProps(props.thumbnails);
-    const context = React.useMemo(() => ({
-        visible,
-        show: () => setVisible(true),
-        hide: () => setVisible(false),
-    }), [visible]);
-    React.useImperativeHandle(ref, () => context, [context]);
-    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 }),
-                React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
-                ["end", "bottom"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef })))));
-}

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

@@ -1,5 +0,0 @@
-import * as React from "react";
-export type ThumbnailsTrackProps = {
-    containerRef: React.RefObject<HTMLDivElement>;
-};
-export declare function ThumbnailsTrack({ containerRef }: ThumbnailsTrackProps): React.JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -1,141 +0,0 @@
-import * as React from "react";
-import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, clsx, cssClass, cssVar, getSlide, hasSlides, useAnimation, useEventCallback, useEvents, useLightboxProps, useLightboxState, useRTL, } from "../../core/index.js";
-import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
-import { Thumbnail } from "./Thumbnail.js";
-import { defaultThumbnailsProps, useThumbnailsProps } from "./props.js";
-import { useThumbnails } from "./ThumbnailsContext.js";
-function isHorizontal(position) {
-    return ["top", "bottom"].includes(position);
-}
-function boxSize(thumbnails, dimension, includeGap) {
-    return dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-}
-export function ThumbnailsTrack({ containerRef }) {
-    const track = React.useRef(null);
-    const { visible } = useThumbnails();
-    const { carousel, styles } = useLightboxProps();
-    const { slides, globalIndex, animation } = useLightboxState();
-    const { publish, subscribe } = useEvents();
-    const isRTL = useRTL();
-    const thumbnails = useThumbnailsProps();
-    const { position, width, height, border, borderRadius, padding, gap, vignette } = thumbnails;
-    const index = globalIndex;
-    const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
-    const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
-    const { prepareAnimation } = useAnimation(track, (snapshot) => ({
-        keyframes: isHorizontal(position)
-            ? [
-                {
-                    transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, width, true) * offset + snapshot}px)`,
-                },
-                { transform: "translateX(0)" },
-            ]
-            : [
-                {
-                    transform: `translateY(${boxSize(thumbnails, height, true) * offset + snapshot}px)`,
-                },
-                { transform: "translateY(0)" },
-            ],
-        duration: animationDuration,
-        easing: animation === null || animation === void 0 ? void 0 : animation.easing,
-    }));
-    const handleControllerSwipe = useEventCallback(() => {
-        let animationOffset;
-        if (containerRef.current && track.current) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const trackRect = track.current.getBoundingClientRect();
-            animationOffset = isHorizontal(position)
-                ? trackRect.left - containerRect.left - (containerRect.width - trackRect.width) / 2
-                : trackRect.top - containerRect.top - (containerRect.height - trackRect.height) / 2;
-        }
-        else {
-            animationOffset = 0;
-        }
-        prepareAnimation(animationOffset);
-    });
-    React.useEffect(() => cleanup(subscribe(ACTION_SWIPE, handleControllerSwipe)), [subscribe, handleControllerSwipe]);
-    const { finite } = carousel;
-    const preload = Math.max(Math.min(carousel.preload, slides.length - 1), 0);
-    const items = [];
-    if (hasSlides(slides)) {
-        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(ACTION_NEXT, { count: slideIndex - index });
-        }
-        else if (slideIndex < index) {
-            publish(ACTION_PREV, { count: index - slideIndex });
-        }
-    };
-    return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
-            ...(!visible ? { display: "none" } : null),
-            ...(width !== defaultThumbnailsProps.width
-                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
-                : null),
-            ...(height !== defaultThumbnailsProps.height
-                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, height)}px` }
-                : null),
-            ...(border !== defaultThumbnailsProps.border
-                ? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
-                : null),
-            ...(borderRadius !== defaultThumbnailsProps.borderRadius
-                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
-                : null),
-            ...(padding !== defaultThumbnailsProps.padding
-                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
-                : null),
-            ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
-            ...styles.thumbnailsContainer,
-        } },
-        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)) }, items.map(({ slide, index: slideIndex, placeholder }) => {
-            const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
-            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
-                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
-                ? {
-                    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, slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
-        })),
-        vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
-}

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

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-import { LightboxProps } from "../../types.js";
-export declare const defaultThumbnailsProps: {
-    ref: null;
-    position: "bottom";
-    width: number;
-    height: number;
-    border: number;
-    borderRadius: number;
-    padding: number;
-    gap: number;
-    imageFit: "contain";
-    vignette: boolean;
-};
-export declare const resolveThumbnailsProps: (thumbnails: LightboxProps["thumbnails"]) => {
-    ref: import("react").ForwardedRef<import("../../types.js").ThumbnailsRef>;
-    position: "end" | "start" | "bottom" | "top";
-    width: number;
-    height: number;
-    border: number;
-    borderRadius: number;
-    padding: number;
-    gap: number;
-    imageFit: import("../../types.js").ImageFit;
-    vignette: boolean;
-    showToggle?: boolean | undefined;
-};
-export declare function useThumbnailsProps(): {
-    ref: import("react").ForwardedRef<import("../../types.js").ThumbnailsRef>;
-    position: "end" | "start" | "bottom" | "top";
-    width: number;
-    height: number;
-    border: number;
-    borderRadius: number;
-    padding: number;
-    gap: number;
-    imageFit: import("../../types.js").ImageFit;
-    vignette: boolean;
-    showToggle?: boolean | undefined;
-};