yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -1,13 +1,16 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useController } from "../../core/index.js";
+import { createIcon, IconButton, label, useLightboxProps } 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 function FullscreenButton() {
     var _a;
-    const { labels, render } = useController().getLightboxProps();
-    const { fullscreen, fullscreenEnabled, toggleFullscreen } = useFullscreen();
-    if (!fullscreenEnabled)
+    const { fullscreen, disabled, enter, exit } = useFullscreen();
+    const { labels, render } = useLightboxProps();
+    if (disabled)
         return null;
-    return render.buttonFullscreen ? (React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, fullscreenEnabled, toggleFullscreen }))) : (React.createElement(IconButton, { disabled: !fullscreenEnabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
+    if (render.buttonFullscreen) {
+        return React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, disabled, enter, exit }));
+    }
+    return (React.createElement(IconButton, { disabled: disabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: () => (fullscreen ? exit : enter)() }));
 }

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

@@ -1,9 +1,5 @@
-/// <reference types="react" />
-import { ComponentProps } from "../../types.js";
-export type FullscreenContextType = {
-    fullscreen: boolean;
-    fullscreenEnabled?: boolean;
-    toggleFullscreen: () => void;
-};
-export declare const useFullscreen: () => FullscreenContextType;
-export declare function FullscreenContextProvider({ fullscreen: auto, children }: ComponentProps): JSX.Element;
+import * as React from "react";
+import { ComponentProps, FullscreenRef } from "../../types.js";
+export declare const FullscreenContext: React.Context<FullscreenRef | null>;
+export declare const useFullscreen: () => FullscreenRef;
+export declare function FullscreenContextProvider({ fullscreen: fullscreenProps, children }: ComponentProps): JSX.Element;

package/dist/plugins/fullscreen/FullscreenContext.js

@@ -1,20 +1,22 @@
 import * as React from "react";
 import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN, useEventCallback, useLayoutEffect, } from "../../core/index.js";
-const FullscreenContext = React.createContext(null);
+import { resolveFullscreenProps } from "./props.js";
+export const FullscreenContext = React.createContext(null);
 export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-export function FullscreenContextProvider({ fullscreen: auto, children }) {
+export function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
+    const { auto, ref } = resolveFullscreenProps(fullscreenProps);
     const containerRef = React.useRef(null);
     const [fullscreen, setFullscreen] = React.useState(false);
-    const [fullscreenEnabled, setFullscreenEnabled] = React.useState();
+    const [disabled, setDisabled] = React.useState();
     useLayoutEffect(() => {
         var _a, _b, _c, _d;
-        setFullscreenEnabled((_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);
+        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 requestFullscreen = React.useCallback(() => {
+    const enter = React.useCallback(() => {
         const container = containerRef.current;
         if (container) {
             try {
@@ -35,7 +37,7 @@ export function FullscreenContextProvider({ fullscreen: auto, children }) {
             }
         }
     }, []);
-    const exitFullscreen = React.useCallback(() => {
+    const exit = React.useCallback(() => {
         if (getFullscreenElement()) {
             try {
                 if (document.exitFullscreen) {
@@ -55,14 +57,6 @@ export function FullscreenContextProvider({ fullscreen: auto, children }) {
             }
         }
     }, [getFullscreenElement]);
-    const toggleFullscreen = React.useCallback(() => {
-        if (fullscreen) {
-            exitFullscreen();
-        }
-        else {
-            requestFullscreen();
-        }
-    }, [fullscreen, requestFullscreen, exitFullscreen]);
     const fullscreenChangeListener = React.useCallback(() => {
         if (getFullscreenElement() === containerRef.current) {
             setFullscreen(true);
@@ -82,22 +76,18 @@ export function FullscreenContextProvider({ fullscreen: auto, children }) {
             });
         };
     }, [fullscreenChangeListener]);
-    const handleAutoFullscreen = useEventCallback(() => {
-        if (auto) {
-            requestFullscreen();
-        }
-    });
+    const handleAutoFullscreen = useEventCallback(() => { var _a; return (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a(); });
     React.useEffect(() => {
         handleAutoFullscreen();
-        return () => {
-            exitFullscreen();
-        };
-    }, [handleAutoFullscreen, exitFullscreen]);
+        return () => exit();
+    }, [handleAutoFullscreen, exit]);
     const context = React.useMemo(() => ({
         fullscreen,
-        fullscreenEnabled,
-        toggleFullscreen,
-    }), [fullscreen, fullscreenEnabled, toggleFullscreen]);
+        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/index.d.ts

@@ -1,23 +1,34 @@
+import * as React from "react";
 import { Fullscreen } from "./Fullscreen.js";
-declare module "../../types" {
+declare module "../../types.js" {
     interface LightboxProps {
-        /** if `true`, enter fullscreen mode automatically when the lightbox opens */
-        fullscreen?: boolean;
+        /** Fullscreen plugin settings */
+        fullscreen?: {
+            /** Fullscreen plugin ref */
+            ref?: React.ForwardedRef<FullscreenRef>;
+            /** if `true`, enter fullscreen mode automatically when the lightbox opens */
+            auto?: boolean;
+        };
     }
-    /** `render.buttonFullscreen` render function props */
-    type RenderFullscreenButtonProps = {
-        fullscreen: boolean;
-        fullscreenEnabled: boolean | undefined;
-        toggleFullscreen: () => void;
-    };
     interface Render {
         /** render custom Enter/Exit Fullscreen button */
-        buttonFullscreen?: RenderFunction<RenderFullscreenButtonProps>;
+        buttonFullscreen?: RenderFunction<FullscreenRef>;
         /** render custom Enter Fullscreen icon */
         iconEnterFullscreen?: RenderFunction;
         /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: RenderFunction;
     }
+    /** Fullscreen plugin ref */
+    interface FullscreenRef {
+        /** current fullscreen status */
+        fullscreen: boolean;
+        /** if `true`, fullscreen features are not available */
+        disabled: boolean | undefined;
+        /** enter fullscreen mode */
+        enter: Callback;
+        /** exit fullscreen mode */
+        exit: Callback;
+    }
 }
 declare global {
     interface Document {

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

@@ -0,0 +1,10 @@
+/// <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

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

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

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

package/dist/plugins/inline/Inline.js

@@ -1,9 +1,6 @@
-import * as React from "react";
-import { ACTION_CLOSE, clsx, createModule, cssClass, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE, } from "../../core/index.js";
-function InlineContainer({ inline: { className, ...rest } = {}, children }) {
-    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
-}
-export const Inline = ({ augment, replace, remove }) => {
+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: () => { },
@@ -18,4 +15,4 @@ export const Inline = ({ augment, replace, remove }) => {
     }));
     remove(MODULE_NO_SCROLL);
     replace(MODULE_PORTAL, createModule(PLUGIN_INLINE, InlineContainer));
-};
+}

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

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

package/dist/plugins/inline/InlineContainer.js

@@ -0,0 +1,5 @@
+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/inline/index.d.ts

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

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

@@ -1,7 +1,3 @@
-import { Plugin } from "../../types.js";
-export declare const defaultSlideshowProps: {
-    autoplay: boolean;
-    delay: number;
-};
+import { PluginProps } from "../../types.js";
 /** Slideshow plugin */
-export declare const Slideshow: Plugin;
+export declare function Slideshow({ augment, addModule }: PluginProps): void;

package/dist/plugins/slideshow/Slideshow.js

@@ -1,16 +1,13 @@
 import * as React from "react";
-import { createModule, MODULE_CONTROLLER, PLUGIN_SLIDESHOW } from "../../core/index.js";
+import { createModule, PLUGIN_SLIDESHOW } from "../../core/index.js";
+import { resolveSlideshowProps } from "./props.js";
 import { SlideshowContextProvider } from "./SlideshowContext.js";
 import { SlideshowButton } from "./SlideshowButton.js";
-export const defaultSlideshowProps = {
-    autoplay: false,
-    delay: 3000,
-};
-export const Slideshow = ({ augment, append }) => {
-    augment(({ slideshow: slideshowProps, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+export function Slideshow({ augment, addModule }) {
+    augment(({ slideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: { buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons], ...restToolbar },
-        slideshow: { ...defaultSlideshowProps, ...slideshowProps },
+        slideshow: resolveSlideshowProps(slideshow),
         ...restProps,
     }));
-    append(MODULE_CONTROLLER, createModule(PLUGIN_SLIDESHOW, SlideshowContextProvider));
-};
+    addModule(createModule(PLUGIN_SLIDESHOW, SlideshowContextProvider));
+}

package/dist/plugins/slideshow/SlideshowButton.js

@@ -1,12 +1,14 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useController, useLoseFocus } from "../../core/index.js";
+import { createIcon, IconButton, label, 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, togglePlaying } = useSlideshow();
-    const { getLightboxProps } = useController();
-    const { render, labels } = getLightboxProps();
+    const { playing, disabled, play, pause } = useSlideshow();
+    const { render, labels } = useLightboxProps();
     const focusListeners = useLoseFocus(disabled);
-    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, ...focusListeners }));
+    if (render.buttonSlideshow) {
+        return React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, disabled, play, pause }));
+    }
+    return (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "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,9 +1,5 @@
-/// <reference types="react" />
-import { ComponentProps } from "../../types.js";
-export type SlideshowContextType = {
-    playing: boolean;
-    disabled: boolean;
-    togglePlaying: () => void;
-};
-export declare const useSlideshow: () => SlideshowContextType;
-export declare function SlideshowContextProvider({ slides, slideshow, carousel: { finite }, children }: ComponentProps): JSX.Element;
+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 }, children }: ComponentProps): JSX.Element;

package/dist/plugins/slideshow/SlideshowContext.js

@@ -1,20 +1,28 @@
 import * as React from "react";
-import { ACTION_NEXT, 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, useEventCallback, useEvents, useLightboxState, useTimeouts, } from "../../core/index.js";
-import { defaultSlideshowProps } from "./Slideshow.js";
-const SlideshowContext = React.createContext(null);
+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({ slides, slideshow, carousel: { finite }, children }) {
-    const { autoplay, delay } = { ...defaultSlideshowProps, ...slideshow };
+export function SlideshowContextProvider({ slideshow, carousel: { finite }, children }) {
+    const { autoplay, delay, ref } = resolveSlideshowProps(slideshow);
     const [playing, setPlaying] = React.useState(autoplay);
     const scheduler = React.useRef();
     const slideStatus = React.useRef();
-    const { currentIndex } = useLightboxState().state;
+    const { slides, currentIndex } = useLightboxState().state;
     const { setTimeout, clearTimeout } = useTimeouts();
-    const { publish, subscribe } = useEvents();
+    const { subscribe } = useEvents();
+    const { next } = useController();
     const disabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
-    const togglePlaying = React.useCallback(() => {
-        setPlaying((prev) => !prev);
-    }, []);
+    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;
@@ -30,7 +38,7 @@ export function SlideshowContextProvider({ slides, slideshow, carousel: { finite
         scheduler.current = setTimeout(() => {
             if (playing) {
                 slideStatus.current = undefined;
-                publish(ACTION_NEXT);
+                next();
             }
         }, delay);
     });
@@ -53,6 +61,7 @@ export function SlideshowContextProvider({ slides, slideshow, carousel: { finite
         slideStatus.current = SLIDE_STATUS_COMPLETE;
         scheduleNextSlide();
     })), [subscribe, cancelScheduler, scheduleNextSlide]);
-    const context = React.useMemo(() => ({ playing, disabled, togglePlaying }), [playing, disabled, togglePlaying]);
+    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/index.d.ts

@@ -1,30 +1,35 @@
+/// <reference types="react" />
 import { Slideshow } from "./Slideshow.js";
-declare module "../../types" {
+declare module "../../types.js" {
     interface LightboxProps {
         /** Slideshow plugin settings */
         slideshow?: {
+            /** Slideshow plugin ref */
+            ref?: React.ForwardedRef<SlideshowRef>;
             /** if `true`, slideshow is turned on automatically when the lightbox opens */
             autoplay?: boolean;
             /** slideshow delay in milliseconds */
             delay?: number;
         };
     }
-    /** `render.buttonSlideshow` render function props */
-    type RenderSlideshowButtonProps = {
-        /** current slideshow autoplay status */
-        playing: boolean;
-        /** toggle slideshow autoplay status */
-        togglePlaying: () => void;
-        /** if `true`, the button is disabled */
-        disabled: boolean;
-    };
     interface Render {
         /** render custom Slideshow Play icon */
         iconSlideshowPlay?: RenderFunction;
         /** render custom Slideshow Pause icon */
         iconSlideshowPause?: RenderFunction;
         /** render custom Slideshow button */
-        buttonSlideshow?: RenderFunction<RenderSlideshowButtonProps>;
+        buttonSlideshow?: RenderFunction<SlideshowRef>;
+    }
+    /** Slideshow plugin ref */
+    interface SlideshowRef {
+        /** current slideshow playback status */
+        playing: boolean;
+        /** if `true`, the slideshow playback is disabled */
+        disabled: boolean;
+        /** start the slideshow playback */
+        play: Callback;
+        /** pause the slideshow playback */
+        pause: Callback;
     }
 }
 export default Slideshow;

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

@@ -0,0 +1,12 @@
+/// <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

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

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

@@ -1,19 +1,15 @@
-import * as React from "react";
-import { ContainerRect, ImageFit, LightboxProps, Slide } from "../../types.js";
+/// <reference types="react" />
+import { Slide } from "../../types.js";
 export type FadeSettings = {
     duration: number;
     delay: number;
 };
 export 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 function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }: ThumbnailProps): JSX.Element;
+export declare function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }: ThumbnailProps): JSX.Element;

package/dist/plugins/thumbnails/Thumbnail.js

@@ -1,6 +1,7 @@
 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 { 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 }) {
@@ -28,7 +29,10 @@ const fadeOutPrefix = makeComposePrefix("fadeout");
 const placeholderPrefix = makeComposePrefix("placeholder");
 const DELAY = "delay";
 const DURATION = "duration";
-export function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) {
+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
                 ? {
@@ -42,6 +46,6 @@ export function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, place
                     [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
                 }
                 : null),
-            ...style,
+            ...styles.thumbnail,
         }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
 }

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

@@ -1,14 +1,3 @@
-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";
-    vignette: boolean;
-};
+import { PluginProps } from "../../types.js";
 /** Thumbnails plugin */
-export declare const Thumbnails: Plugin;
+export declare function Thumbnails({ augment, contains, append, addParent }: PluginProps): void;

package/dist/plugins/thumbnails/Thumbnails.js

@@ -1,29 +1,16 @@
 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",
-    vignette: true,
-};
-export const Thumbnails = ({ augment, contains, append, addParent }) => {
+import { resolveThumbnailsProps } from "./props.js";
+import { ThumbnailsContainer } from "./ThumbnailsContainer.js";
+export function Thumbnails({ augment, contains, append, addParent }) {
     augment(({ thumbnails, ...restProps }) => ({
-        thumbnails: {
-            ...defaultThumbnailsProps,
-            ...thumbnails,
-        },
+        thumbnails: resolveThumbnailsProps(thumbnails),
         ...restProps,
     }));
-    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsComponent);
+    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsContainer);
     if (contains(PLUGIN_FULLSCREEN)) {
         append(PLUGIN_FULLSCREEN, module);
     }
     else {
         addParent(MODULE_CONTROLLER, module);
     }
-};
+}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../types.js";
 /** Thumbnails plugin component */
-export declare function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }: ComponentProps): JSX.Element;
+export declare function ThumbnailsContainer({ children, ...props }: ComponentProps): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { clsx, cssClass } from "../../core/index.js";
+import { clsx, cssClass, LightboxPropsProvider } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
 import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
-import { defaultThumbnailsProps } from "./Thumbnails.js";
-export function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, 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, 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));
+import { resolveThumbnailsProps } from "./props.js";
+export function ThumbnailsContainer({ children, ...props }) {
+    const containerRef = React.useRef(null);
+    const { position } = resolveThumbnailsProps(props.thumbnails);
+    return (React.createElement(LightboxPropsProvider, { ...props },
+        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,9 +1,7 @@
 import * as React from "react";
-import { ContainerRect, DeepNonNullable, LightboxProps } from "../../types.js";
+import { DeepNonNullable, LightboxProps } from "../../types.js";
 export type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-export type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
-    container: React.RefObject<HTMLDivElement>;
-    thumbnails: ThumbnailsInternal;
-    thumbnailRect: ContainerRect;
+export type ThumbnailsTrackProps = {
+    containerRef: React.RefObject<HTMLDivElement>;
 };
-export declare function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }: ThumbnailsTrackProps): JSX.Element;
+export declare function ThumbnailsTrack({ containerRef }: ThumbnailsTrackProps): JSX.Element;