yet-another-react-lightbox 3.2.0 → 3.4.0

package/dist/core/components/IconButton.js

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { clsx, cssClass } from "../utils.js";
+import { clsx, cssClass, label as translateLabel } from "../utils.js";
 import { useLightboxProps } from "../contexts/index.js";
 import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.js";
-export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) => {
-    const { styles } = useLightboxProps();
-    return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon })));
+export const IconButton = React.forwardRef(function IconButton({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) {
+    const { styles, labels } = useLightboxProps();
+    return (React.createElement("button", { ref: ref, type: "button", "aria-label": translateLabel(labels, label), className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon })));
 });
-IconButton.displayName = "IconButton";

package/dist/core/consts.d.ts

@@ -7,6 +7,7 @@ export declare const MODULE_ROOT = "root";
 export declare const MODULE_TOOLBAR = "toolbar";
 export declare const PLUGIN_CAPTIONS = "captions";
 export declare const PLUGIN_COUNTER = "counter";
+export declare const PLUGIN_DOWNLOAD = "download";
 export declare const PLUGIN_FULLSCREEN = "fullscreen";
 export declare const PLUGIN_INLINE = "inline";
 export declare const PLUGIN_SLIDESHOW = "slideshow";

package/dist/core/consts.js

@@ -7,6 +7,7 @@ export const MODULE_ROOT = "root";
 export const MODULE_TOOLBAR = "toolbar";
 export const PLUGIN_CAPTIONS = "captions";
 export const PLUGIN_COUNTER = "counter";
+export const PLUGIN_DOWNLOAD = "download";
 export const PLUGIN_FULLSCREEN = "fullscreen";
 export const PLUGIN_INLINE = "inline";
 export const PLUGIN_SLIDESHOW = "slideshow";

package/dist/core/contexts/LightboxState.d.ts

@@ -12,11 +12,16 @@ export type LightboxStateUpdateAction = {
     index: number;
 };
 export type LightboxStateAction = LightboxStateSwipeAction | LightboxStateUpdateAction;
-export type LightboxStateContextType = {
+export type LightboxStateContextType = LightboxState & {
+    /** @deprecated - use `useLightboxState` props directly */
     state: LightboxState;
+    /** @deprecated - use `useLightboxDispatch` instead */
     dispatch: React.Dispatch<LightboxStateAction>;
 };
 export declare const LightboxStateContext: React.Context<LightboxStateContextType | null>;
-export declare const useLightboxState: () => LightboxStateContextType;
+export declare const useLightboxState: () => NonNullable<LightboxStateContextType>;
+export type LightboxDispatchContextType = React.Dispatch<LightboxStateAction>;
+export declare const LightboxDispatchContext: React.Context<LightboxDispatchContextType | null>;
+export declare const useLightboxDispatch: () => LightboxDispatchContextType;
 export type LightboxStateProviderProps = React.PropsWithChildren<Pick<LightboxProps, "slides" | "index">>;
 export declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): JSX.Element;

package/dist/core/contexts/LightboxState.js

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { getSlideIndex, makeUseContext } from "../utils.js";
+import { getSlideIfPresent, getSlideIndex, makeUseContext } from "../utils.js";
 import { UNKNOWN_ACTION_TYPE } from "../consts.js";
 export const LightboxStateContext = React.createContext(null);
 export const useLightboxState = makeUseContext("useLightboxState", "LightboxStateContext", LightboxStateContext);
+export const LightboxDispatchContext = React.createContext(null);
+export const useLightboxDispatch = makeUseContext("useLightboxDispatch", "LightboxDispatchContext", LightboxDispatchContext);
 function reducer(state, action) {
     switch (action.type) {
         case "swipe": {
@@ -10,6 +12,7 @@ function reducer(state, action) {
             const increment = (action === null || action === void 0 ? void 0 : action.increment) || 0;
             const globalIndex = state.globalIndex + increment;
             const currentIndex = getSlideIndex(globalIndex, slides.length);
+            const currentSlide = getSlideIfPresent(slides, currentIndex);
             const animation = increment || action.duration
                 ? {
                     increment,
@@ -17,23 +20,30 @@ function reducer(state, action) {
                     easing: action.easing,
                 }
                 : undefined;
-            return { slides, currentIndex, globalIndex, animation };
+            return { slides, currentIndex, globalIndex, currentSlide, animation };
         }
         case "update":
             return {
                 slides: action.slides,
                 currentIndex: action.index,
                 globalIndex: action.index,
+                currentSlide: getSlideIfPresent(action.slides, action.index),
             };
         default:
             throw new Error(UNKNOWN_ACTION_TYPE);
     }
 }
 export function LightboxStateProvider({ slides, index, children }) {
-    const [state, dispatch] = React.useReducer(reducer, { slides, currentIndex: index, globalIndex: index });
+    const [state, dispatch] = React.useReducer(reducer, {
+        slides,
+        currentIndex: index,
+        globalIndex: index,
+        currentSlide: getSlideIfPresent(slides, index),
+    });
     React.useEffect(() => {
         dispatch({ type: "update", slides, index });
     }, [slides, index]);
-    const context = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
-    return React.createElement(LightboxStateContext.Provider, { value: context }, children);
+    const context = React.useMemo(() => ({ ...state, state, dispatch }), [state, dispatch]);
+    return (React.createElement(LightboxDispatchContext.Provider, { value: dispatch },
+        React.createElement(LightboxStateContext.Provider, { value: context }, children)));
 }

package/dist/core/modules/Carousel.js

@@ -13,7 +13,7 @@ function cssSlidePrefix(value) {
 }
 function CarouselSlide({ slide, offset }) {
     const containerRef = React.useRef(null);
-    const { currentIndex } = useLightboxState().state;
+    const { currentIndex } = useLightboxState();
     const { slideRect, close } = useController();
     const { render, carousel: { imageFit }, on: { click: onClick }, controller: { closeOnBackdropClick }, } = useLightboxProps();
     const renderSlide = () => {
@@ -45,7 +45,7 @@ function Placeholder() {
     return React.createElement("div", { className: cssClass("slide") });
 }
 export function Carousel({ carousel: { finite, preload, padding, spacing } }) {
-    const { slides, currentIndex, globalIndex } = useLightboxState().state;
+    const { slides, currentIndex, globalIndex } = useLightboxState();
     const { setCarouselRef } = useController();
     const spacingValue = parseLengthPercentage(spacing);
     const paddingValue = parseLengthPercentage(padding);

package/dist/core/modules/Controller.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { createModule } from "../config.js";
 import { cleanup, clsx, computeSlideRect, cssClass, cssVar, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
-import { useEvents, useLightboxState } from "../contexts/index.js";
+import { useEvents, useLightboxDispatch, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
 import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.js";
 const cssContainerPrefix = makeComposePrefix("container");
@@ -12,7 +12,8 @@ export function Controller({ children, ...props }) {
     var _a;
     const { carousel, animation, controller, on, styles, render } = props;
     const [toolbarWidth, setToolbarWidth] = React.useState();
-    const { state, dispatch } = useLightboxState();
+    const { state } = useLightboxState();
+    const dispatch = useLightboxDispatch();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
     const swipeOffset = React.useRef(0);
     const { registerSensors, subscribeSensors } = useSensors();

package/dist/core/modules/Navigation.js

@@ -1,18 +1,17 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, label as translateLabel } from "../utils.js";
+import { cssClass } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
-import { useLightboxProps, useLightboxState } from "../contexts/index.js";
+import { useLightboxState } from "../contexts/index.js";
 import { useController } from "./Controller.js";
 import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
 export function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }) {
-    const { labels } = useLightboxProps();
-    return (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
+    return (React.createElement(IconButton, { label: label, icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
 }
 export function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
     var _a;
-    const { slides, currentIndex } = useLightboxState().state;
+    const { slides, currentIndex } = useLightboxState();
     const { prev, next, subscribeSensors } = useController();
     const isRTL = useRTL();
     const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../types.js";
-export declare function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
+export declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
 export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { composePrefix, cssClass, label } from "../utils.js";
+import { useLayoutEffect } from "../hooks/index.js";
+import { composePrefix, cssClass } from "../utils.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
 import { useController } from "./Controller.js";
@@ -8,13 +9,17 @@ import { ACTION_CLOSE, MODULE_TOOLBAR } from "../consts.js";
 function cssPrefix(value) {
     return composePrefix(MODULE_TOOLBAR, value);
 }
-export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) {
+export function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }) {
     const { close, setToolbarWidth } = useController();
     const { setContainerRef, containerRect } = useContainerRect();
-    React.useEffect(() => {
+    useLayoutEffect(() => {
         setToolbarWidth(containerRect === null || containerRect === void 0 ? void 0 : containerRect.width);
     }, [setToolbarWidth, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
-    const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => close() }));
+    const renderCloseButton = () => {
+        if (buttonClose)
+            return buttonClose();
+        return React.createElement(IconButton, { key: ACTION_CLOSE, label: "Close", icon: CloseIcon, renderIcon: iconClose, onClick: close });
+    };
     return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
 }
 export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ContainerRect, Labels, LengthOrPercentage, LightboxProps, Slide, SlideImage } from "../types.js";
+import { ContainerRect, Labels, LengthOrPercentage, LightboxProps, Slide, SlideImage, ToolbarSettings } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
@@ -25,4 +25,7 @@ export declare function computeSlideRect(containerRect: ContainerRect, padding:
 };
 export declare const devicePixelRatio: () => number;
 export declare const getSlideIndex: (index: number, slidesCount: number) => number;
-export declare const getSlide: (slides: Slide[], index: number) => Slide;
+export declare const hasSlides: (slides: Slide[]) => slides is [Slide, ...Slide[]];
+export declare const getSlide: (slides: [Slide, ...Slide[]], index: number) => Slide;
+export declare const getSlideIfPresent: (slides: Slide[], index: number) => Slide | undefined;
+export declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;

package/dist/core/utils.js

@@ -45,5 +45,20 @@ export function computeSlideRect(containerRect, padding) {
     };
 }
 export const devicePixelRatio = () => (hasWindow() ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
-export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
+export const getSlideIndex = (index, slidesCount) => slidesCount > 0 ? ((index % slidesCount) + slidesCount) % slidesCount : 0;
+export const hasSlides = (slides) => slides.length > 0;
 export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];
+export const getSlideIfPresent = (slides, index) => hasSlides(slides) ? getSlide(slides, index) : undefined;
+export function addToolbarButton(toolbar, key, button) {
+    if (!button)
+        return toolbar;
+    const { buttons, ...restToolbar } = toolbar;
+    const index = buttons.findIndex((item) => item === key);
+    const buttonWithKey = React.isValidElement(button) ? React.cloneElement(button, { key }, null) : button;
+    if (index >= 0) {
+        const result = [...buttons];
+        result.splice(index, 1, buttonWithKey);
+        return { buttons: result, ...restToolbar };
+    }
+    return { buttons: [buttonWithKey, ...buttons], ...restToolbar };
+}

package/dist/plugins/captions/Captions.js

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { createModule, PLUGIN_CAPTIONS } from "../../core/index.js";
+import { addToolbarButton, createModule, PLUGIN_CAPTIONS } from "../../core/index.js";
 import { Title } from "./Title.js";
 import { Description } from "./Description.js";
 import { CaptionsButton } from "./CaptionsButton.js";
 import { CaptionsContextProvider } from "./CaptionsContext.js";
 import { resolveCaptionsProps } from "./props.js";
 export function Captions({ augment, addModule }) {
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, toolbar: { buttons, ...restToolbar }, captions: captionsProps, ...restProps }) => {
+    augment(({ captions: captionsProps, render: { slideFooter: renderFooter, ...restRender }, toolbar, ...restProps }) => {
         const captions = resolveCaptionsProps(captionsProps);
         return {
             render: {
@@ -16,10 +16,7 @@ export function Captions({ augment, addModule }) {
                     slide.description && React.createElement(Description, { description: slide.description }))),
                 ...restRender,
             },
-            toolbar: {
-                buttons: [...(captions.showToggle ? [React.createElement(CaptionsButton, { key: PLUGIN_CAPTIONS })] : []), ...buttons],
-                ...restToolbar,
-            },
+            toolbar: addToolbarButton(toolbar, PLUGIN_CAPTIONS, captions.showToggle ? React.createElement(CaptionsButton, null) : null),
             captions,
             ...restProps,
         };

package/dist/plugins/captions/CaptionsButton.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createIcon, createIconDisabled, IconButton, label, useLightboxProps } from "../../core/index.js";
+import { createIcon, createIconDisabled, IconButton, useLightboxProps } from "../../core/index.js";
 import { useCaptions } from "./CaptionsContext.js";
 const captionsIcon = () => (React.createElement(React.Fragment, null,
     React.createElement("path", { strokeWidth: 2, stroke: "currentColor", strokeLinejoin: "round", fill: "none", d: "M3 5l18 0l0 14l-18 0l0-14z" }),
@@ -8,9 +8,9 @@ const CaptionsVisible = createIcon("CaptionsVisible", captionsIcon());
 const CaptionsHidden = createIconDisabled("CaptionsVisible", captionsIcon());
 export function CaptionsButton() {
     const { visible, show, hide } = useCaptions();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
     if (render.buttonCaptions) {
         return React.createElement(React.Fragment, null, render.buttonCaptions({ visible, show, hide }));
     }
-    return (React.createElement(IconButton, { label: label(labels, visible ? "Hide captions" : "Show captions"), icon: visible ? CaptionsVisible : CaptionsHidden, renderIcon: visible ? render.iconCaptionsVisible : render.iconCaptionsHidden, onClick: visible ? hide : show }));
+    return (React.createElement(IconButton, { label: visible ? "Hide captions" : "Show captions", icon: visible ? CaptionsVisible : CaptionsHidden, renderIcon: visible ? render.iconCaptionsVisible : render.iconCaptionsHidden, onClick: visible ? hide : show }));
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { PLUGIN_CAPTIONS } from "../../core/index.js";
 import { Captions } from "./Captions.js";
 declare module "../../types.js" {
     type TextAlignment = "start" | "end" | "center";
@@ -8,6 +9,9 @@ declare module "../../types.js" {
         /** slide description */
         description?: React.ReactNode;
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_CAPTIONS]: null;
+    }
     interface LightboxProps {
         /** Captions plugin settings */
         captions?: {

package/dist/plugins/captions/index.js

@@ -1,2 +1,3 @@
+import { PLUGIN_CAPTIONS } from "../../core/index.js";
 import { Captions } from "./Captions.js";
 export default Captions;

package/dist/plugins/counter/Counter.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { clsx, createModule, cssClass, MODULE_CONTROLLER, PLUGIN_COUNTER, useLightboxState } from "../../core/index.js";
 export function CounterComponent({ counter: { className, ...rest } = {} }) {
-    const { slides, currentIndex } = useLightboxState().state;
+    const { slides, currentIndex } = useLightboxState();
     if (slides.length === 0)
         return null;
     return (React.createElement("div", { className: clsx(cssClass("counter"), className), ...rest },

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

@@ -0,0 +1,2 @@
+import { PluginProps } from "../../types.js";
+export declare function Download({ augment }: PluginProps): void;

package/dist/plugins/download/Download.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { addToolbarButton, PLUGIN_DOWNLOAD } from "../../core/index.js";
+import { DownloadButton } from "./DownloadButton.js";
+export function Download({ augment }) {
+    augment(({ toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_DOWNLOAD, React.createElement(DownloadButton, null)),
+        ...restProps,
+    }));
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DownloadButton(): JSX.Element;

package/dist/plugins/download/DownloadButton.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createIcon, IconButton, isImageSlide, useLightboxProps, useLightboxState } from "../../core/index.js";
+import { saveAs } from "./FileSaver.js";
+const DownloadIcon = createIcon("DownloadIcon", React.createElement("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5z" }));
+export function DownloadButton() {
+    const { render } = useLightboxProps();
+    const { currentSlide } = useLightboxState();
+    if (render.buttonDownload) {
+        return React.createElement(React.Fragment, null, render.buttonDownload());
+    }
+    const downloadUrl = (currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadUrl) || (currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined);
+    return (React.createElement(IconButton, { label: "Download", icon: DownloadIcon, renderIcon: render.iconDownload, disabled: !downloadUrl, onClick: () => {
+            if (downloadUrl) {
+                saveAs(downloadUrl, currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadFilename);
+            }
+        } }));
+}

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

@@ -0,0 +1 @@
+export declare function saveAs(source: string | Blob, name?: string): void;

package/dist/plugins/download/FileSaver.js

@@ -0,0 +1,60 @@
+function download(url, name) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.responseType = "blob";
+    xhr.onload = () => {
+        saveAs(xhr.response, name);
+    };
+    xhr.onerror = () => {
+        console.error("Failed to download file");
+    };
+    xhr.send();
+}
+function corsEnabled(url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("HEAD", url, false);
+    try {
+        xhr.send();
+    }
+    catch (e) {
+    }
+    return xhr.status >= 200 && xhr.status <= 299;
+}
+function click(link) {
+    try {
+        link.dispatchEvent(new MouseEvent("click"));
+    }
+    catch (e) {
+        const event = document.createEvent("MouseEvents");
+        event.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+        link.dispatchEvent(event);
+    }
+}
+export function saveAs(source, name) {
+    const link = document.createElement("a");
+    link.rel = "noopener";
+    link.download = name || "";
+    if (!link.download) {
+        link.target = "_blank";
+    }
+    if (typeof source === "string") {
+        link.href = source;
+        if (link.origin !== window.location.origin) {
+            if (corsEnabled(link.href)) {
+                download(source, name);
+            }
+            else {
+                link.target = "_blank";
+                click(link);
+            }
+        }
+        else {
+            click(link);
+        }
+    }
+    else {
+        link.href = URL.createObjectURL(source);
+        setTimeout(() => URL.revokeObjectURL(link.href), 30000);
+        setTimeout(() => click(link), 0);
+    }
+}

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

@@ -0,0 +1,20 @@
+import { PLUGIN_DOWNLOAD } from "../../core/index.js";
+import { Download } from "./Download.js";
+declare module "../../types.js" {
+    interface GenericSlide {
+        /** download url */
+        downloadUrl?: string;
+        /** download filename override */
+        downloadFilename?: string;
+    }
+    interface Render {
+        /** render custom Download button */
+        buttonDownload?: RenderFunction;
+        /** render custom Download icon */
+        iconDownload?: RenderFunction;
+    }
+    interface ToolbarButtonKeys {
+        [PLUGIN_DOWNLOAD]: null;
+    }
+}
+export default Download;

package/dist/plugins/download/index.js

@@ -0,0 +1,3 @@
+import { PLUGIN_DOWNLOAD } from "../../core/index.js";
+import { Download } from "./Download.js";
+export default Download;

package/dist/plugins/fullscreen/Fullscreen.js

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
+import { addToolbarButton, createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS, } from "../../core/index.js";
 import { resolveFullscreenProps } from "./props.js";
 import { FullscreenButton } from "./FullscreenButton.js";
 import { FullscreenContextProvider } from "./FullscreenContext.js";
 export function Fullscreen({ augment, contains, addParent }) {
-    augment(({ fullscreen, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: { buttons: [React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN }), ...buttons], ...restToolbar },
+    augment(({ fullscreen, toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_FULLSCREEN, React.createElement(FullscreenButton, null)),
         fullscreen: resolveFullscreenProps(fullscreen),
         ...restProps,
     }));

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useLightboxProps } from "../../core/index.js";
+import { createIcon, IconButton, 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 { fullscreen, disabled, enter, exit } = useFullscreen();
-    const { labels, render } = useLightboxProps();
+    const { render } = useLightboxProps();
     if (disabled)
         return null;
     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: label(labels, fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter }));
+    return (React.createElement(IconButton, { disabled: disabled, label: fullscreen ? "Exit Fullscreen" : "Enter Fullscreen", icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter }));
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { PLUGIN_FULLSCREEN } from "../../core/index.js";
 import { Fullscreen } from "./Fullscreen.js";
 declare module "../../types.js" {
     interface LightboxProps {
@@ -18,6 +19,9 @@ declare module "../../types.js" {
         /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: RenderFunction;
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_FULLSCREEN]: null;
+    }
     /** Fullscreen plugin ref */
     interface FullscreenRef {
         /** current fullscreen status */

package/dist/plugins/fullscreen/index.js

@@ -1,2 +1,3 @@
+import { PLUGIN_FULLSCREEN } from "../../core/index.js";
 import { Fullscreen } from "./Fullscreen.js";
 export default Fullscreen;

package/dist/plugins/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Captions } from "./captions/index.js";
 export { default as Counter } from "./counter/index.js";
+export { default as Download } from "./download/index.js";
 export { default as Fullscreen } from "./fullscreen/index.js";
 export { default as Inline } from "./inline/index.js";
 export { default as Slideshow } from "./slideshow/index.js";

package/dist/plugins/index.js

@@ -1,5 +1,6 @@
 export { default as Captions } from "./captions/index.js";
 export { default as Counter } from "./counter/index.js";
+export { default as Download } from "./download/index.js";
 export { default as Fullscreen } from "./fullscreen/index.js";
 export { default as Inline } from "./inline/index.js";
 export { default as Slideshow } from "./slideshow/index.js";

package/dist/plugins/slideshow/Slideshow.js

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { createModule, PLUGIN_SLIDESHOW } from "../../core/index.js";
+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: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: { buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons], ...restToolbar },
+    augment(({ slideshow, toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_SLIDESHOW, React.createElement(SlideshowButton, null)),
         slideshow: resolveSlideshowProps(slideshow),
         ...restProps,
     }));

package/dist/plugins/slideshow/SlideshowButton.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useLightboxProps, useLoseFocus } from "../../core/index.js";
+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, labels } = useLightboxProps();
+    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: label(labels, playing ? "Pause" : "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners }));
+    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.js

@@ -8,7 +8,7 @@ export function SlideshowContextProvider({ slideshow, carousel: { finite }, chil
     const [playing, setPlaying] = React.useState(autoplay);
     const scheduler = React.useRef();
     const slideStatus = React.useRef();
-    const { slides, currentIndex } = useLightboxState().state;
+    const { slides, currentIndex } = useLightboxState();
     const { setTimeout, clearTimeout } = useTimeouts();
     const { subscribe } = useEvents();
     const { next } = useController();

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PLUGIN_SLIDESHOW } from "../../core/index.js";
 import { Slideshow } from "./Slideshow.js";
 declare module "../../types.js" {
     interface LightboxProps {
@@ -20,6 +21,9 @@ declare module "../../types.js" {
         /** render custom Slideshow button */
         buttonSlideshow?: RenderFunction<SlideshowRef>;
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_SLIDESHOW]: null;
+    }
     /** Slideshow plugin ref */
     interface SlideshowRef {
         /** current slideshow playback status */

package/dist/plugins/slideshow/index.js

@@ -1,2 +1,3 @@
+import { PLUGIN_SLIDESHOW } from "../../core/index.js";
 import { Slideshow } from "./Slideshow.js";
 export default Slideshow;

package/dist/plugins/thumbnails/Thumbnails.js

@@ -1,16 +1,13 @@
 import * as React from "react";
-import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
+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: { buttons, ...restToolbar }, ...restProps }) => {
+    augment(({ thumbnails: thumbnailsProps, toolbar, ...restProps }) => {
         const thumbnails = resolveThumbnailsProps(thumbnailsProps);
         return {
-            toolbar: {
-                buttons: [...(thumbnails.showToggle ? [React.createElement(ThumbnailsButton, { key: PLUGIN_THUMBNAILS })] : []), ...buttons],
-                ...restToolbar,
-            },
+            toolbar: addToolbarButton(toolbar, PLUGIN_THUMBNAILS, thumbnails.showToggle ? React.createElement(ThumbnailsButton, null) : null),
             thumbnails,
             ...restProps,
         };

package/dist/plugins/thumbnails/ThumbnailsButton.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createIcon, createIconDisabled, IconButton, label, useLightboxProps } from "../../core/index.js";
+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" }),
@@ -8,9 +8,9 @@ const ThumbnailsVisible = createIcon("ThumbnailsVisible", thumbnailsIcon());
 const ThumbnailsHidden = createIconDisabled("ThumbnailsHidden", thumbnailsIcon());
 export function ThumbnailsButton() {
     const { visible, show, hide } = useThumbnails();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
     if (render.buttonThumbnails) {
         return React.createElement(React.Fragment, null, render.buttonThumbnails({ visible, show, hide }));
     }
-    return (React.createElement(IconButton, { label: label(labels, visible ? "Hide thumbnails" : "Show thumbnails"), icon: visible ? ThumbnailsVisible : ThumbnailsHidden, renderIcon: visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden, onClick: visible ? hide : show }));
+    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/ThumbnailsTrack.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, clsx, cssClass, cssVar, getSlide, useAnimation, useEventCallback, useEvents, useLightboxProps, useLightboxState, useRTL, } from "../../core/index.js";
+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";
@@ -14,7 +14,7 @@ export function ThumbnailsTrack({ containerRef }) {
     const track = React.useRef(null);
     const { visible } = useThumbnails();
     const { carousel, styles } = useLightboxProps();
-    const { slides, globalIndex, animation } = useLightboxState().state;
+    const { slides, globalIndex, animation } = useLightboxState();
     const { publish, subscribe } = useEvents();
     const isRTL = useRTL();
     const thumbnails = useThumbnailsProps();
@@ -57,7 +57,7 @@ export function ThumbnailsTrack({ containerRef }) {
     const { finite } = carousel;
     const preload = Math.max(Math.min(carousel.preload, slides.length - 1), 0);
     const items = [];
-    if (slides.length > 0) {
+    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 });

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PLUGIN_THUMBNAILS } from "../../core/index.js";
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types.js" {
@@ -54,6 +55,9 @@ declare module "../../types.js" {
         /** thumbnails container customization slot */
         thumbnailsContainer: "thumbnailsContainer";
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_THUMBNAILS]: null;
+    }
     /** Thumbnails plugin ref */
     interface ThumbnailsRef {
         /** if `true`, thumbnails are visible */

package/dist/plugins/thumbnails/index.js

@@ -1,2 +1,3 @@
+import { PLUGIN_THUMBNAILS } from "../../core/index.js";
 import { Thumbnails } from "./Thumbnails.js";
 export default Thumbnails;

package/dist/plugins/zoom/Zoom.js

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { createModule, isImageSlide, PLUGIN_ZOOM } from "../../core/index.js";
+import { addToolbarButton, createModule, isImageSlide, PLUGIN_ZOOM } from "../../core/index.js";
 import { resolveZoomProps } from "./props.js";
 import { ZoomContextProvider } from "./ZoomController.js";
 import { ZoomToolbarControl } from "./ZoomToolbarControl.js";
 import { ZoomWrapper } from "./ZoomWrapper.js";
 export const Zoom = ({ augment, addModule }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, render, zoom, ...restProps }) => ({
+    augment(({ toolbar, render, zoom, ...restProps }) => ({
         zoom: resolveZoomProps(zoom),
-        toolbar: { buttons: [React.createElement(ZoomToolbarControl, { key: PLUGIN_ZOOM }), ...buttons], ...restToolbar },
+        toolbar: addToolbarButton(toolbar, PLUGIN_ZOOM, React.createElement(ZoomToolbarControl, null)),
         render: {
             ...render,
             slide: (props) => { var _a; return isImageSlide(props.slide) ? React.createElement(ZoomWrapper, { render: render, ...props }) : (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, props); },

package/dist/plugins/zoom/ZoomButton.js

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useLightboxProps } from "../../core/index.js";
+import { createIcon, IconButton, useLightboxProps } from "../../core/index.js";
 import { useZoom } from "./ZoomController.js";
 const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
     React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
     React.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })));
 const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" }));
-export const ZoomButton = React.forwardRef(({ zoomIn, onLoseFocus }, ref) => {
+export const ZoomButton = React.forwardRef(function ZoomButton({ zoomIn, onLoseFocus }, ref) {
     const wasEnabled = React.useRef(false);
     const wasFocused = React.useRef(false);
     const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom();
-    const { render, labels } = useLightboxProps();
+    const { render } = useLightboxProps();
     const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1);
     React.useEffect(() => {
         if (disabled && wasEnabled.current && wasFocused.current) {
@@ -19,10 +19,9 @@ export const ZoomButton = React.forwardRef(({ zoomIn, onLoseFocus }, ref) => {
             wasEnabled.current = true;
         }
     }, [disabled, onLoseFocus]);
-    return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: zoomIn ? zoomInCallback : zoomOutCallback, onFocus: () => {
+    return (React.createElement(IconButton, { ref: ref, disabled: disabled, label: zoomIn ? "Zoom in" : "Zoom out", icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, onClick: zoomIn ? zoomInCallback : zoomOutCallback, onFocus: () => {
             wasFocused.current = true;
         }, onBlur: () => {
             wasFocused.current = false;
         } }));
 });
-ZoomButton.displayName = "ZoomButton";

package/dist/plugins/zoom/ZoomWrapper.js

@@ -8,7 +8,7 @@ export function ZoomWrapper({ render, slide, offset, rect }) {
     const zoomWrapperRef = React.useRef(null);
     const { zoom, maxZoom, offsetX, offsetY, setZoomWrapper } = useZoom();
     const { carousel, on } = useLightboxProps();
-    const { currentIndex } = useLightboxState().state;
+    const { currentIndex } = useLightboxState();
     useLayoutEffect(() => {
         if (offset === 0) {
             setZoomWrapper({ zoomWrapperRef, imageDimensions });

package/dist/plugins/zoom/hooks/useZoomImageRect.js

@@ -4,7 +4,7 @@ export function useZoomImageRect(slideRect, imageDimensions) {
     var _a, _b;
     let imageRect = { width: 0, height: 0 };
     let maxImageRect = { width: 0, height: 0 };
-    const { slides, currentIndex } = useLightboxState().state;
+    const { slides, currentIndex } = useLightboxState();
     const { imageFit } = useLightboxProps().carousel;
     const { maxZoomPixelRatio } = useZoomProps();
     if (slideRect && currentIndex < slides.length) {

package/dist/plugins/zoom/hooks/useZoomSensors.js

@@ -8,7 +8,7 @@ export function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffset
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
     const pinchZoomDistance = React.useRef();
-    const { globalIndex } = useLightboxState().state;
+    const { globalIndex } = useLightboxState();
     const { containerRef, subscribeSensors } = useController();
     const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
     const translateCoordinates = React.useCallback((event) => {

package/dist/plugins/zoom/hooks/useZoomState.js

@@ -15,7 +15,7 @@ export function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
-    const { slides, currentIndex, globalIndex } = useLightboxState().state;
+    const { slides, currentIndex, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
     const { zoomInMultiplier } = useZoomProps();
     const currentSource = getCurrentSource(slides, currentIndex);

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PLUGIN_ZOOM } from "../../core/index.js";
 import { Zoom } from "./Zoom.js";
 declare module "../../types.js" {
     interface LightboxProps {
@@ -53,6 +54,9 @@ declare module "../../types.js" {
         /** current zoom level */
         zoom: number;
     }
+    interface ToolbarButtonKeys {
+        [PLUGIN_ZOOM]: null;
+    }
     /** Zoom plugin ref */
     interface ZoomRef {
         /** current zoom level */

package/dist/plugins/zoom/index.js

@@ -1,2 +1,3 @@
+import { PLUGIN_ZOOM } from "../../core/index.js";
 import { Zoom } from "./Zoom.js";
 export default Zoom;

package/dist/types.d.ts

@@ -190,6 +190,8 @@ export interface LightboxState {
     currentIndex: number;
     /** current slide index in the (-∞, +∞) range */
     globalIndex: number;
+    /** current slide */
+    currentSlide: Slide | undefined;
     /** current animation */
     animation?: {
         increment?: number;
@@ -278,7 +280,11 @@ export type Labels = {
 /** Toolbar settings */
 export interface ToolbarSettings {
     /** buttons to render in the toolbar */
-    buttons: ("close" | React.ReactNode)[];
+    buttons: (ToolbarButtonKey | React.ReactNode)[];
+}
+export type ToolbarButtonKey = keyof ToolbarButtonKeys;
+export interface ToolbarButtonKeys {
+    close: null;
 }
 /** Plugin methods */
 export interface PluginProps {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.2.0",
+    "version": "3.4.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -30,6 +30,10 @@
             "types": "./dist/plugins/counter/index.d.ts",
             "default": "./dist/plugins/counter/index.js"
         },
+        "./plugins/download": {
+            "types": "./dist/plugins/download/index.d.ts",
+            "default": "./dist/plugins/download/index.js"
+        },
         "./plugins/fullscreen": {
             "types": "./dist/plugins/fullscreen/index.d.ts",
             "default": "./dist/plugins/fullscreen/index.js"
@@ -74,6 +78,9 @@
             "plugins/counter": [
                 "dist/plugins/counter/index.d.ts"
             ],
+            "plugins/download": [
+                "dist/plugins/download/index.d.ts"
+            ],
             "plugins/fullscreen": [
                 "dist/plugins/fullscreen/index.d.ts"
             ],