yet-another-react-lightbox 3.0.0 → 3.2.0

package/README.md

@@ -129,6 +129,7 @@ The following plugins come bundled in the package:
 
 - [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
   description
+- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds slides counter
 - [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.com/plugins/inline) - adds support for inline rendering mode
 - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow autoplay feature

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

@@ -3,6 +3,10 @@ export declare function createIcon(name: string, glyph: React.ReactNode): {
     (props: React.SVGProps<SVGSVGElement>): JSX.Element;
     displayName: string;
 };
+export declare function createIconDisabled(name: string, glyph: React.ReactNode): {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
 export declare const CloseIcon: {
     (props: React.SVGProps<SVGSVGElement>): JSX.Element;
     displayName: string;

package/dist/core/components/Icons.js

@@ -1,11 +1,24 @@
 import * as React from "react";
+function svgIcon(name, children) {
+    const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props }, children));
+    icon.displayName = name;
+    return icon;
+}
 export function createIcon(name, glyph) {
-    const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props },
-        React.createElement("g", { fill: "currentColor" },
+    return svgIcon(name, React.createElement("g", { fill: "currentColor" },
+        React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        glyph));
+}
+export function createIconDisabled(name, glyph) {
+    return svgIcon(name, React.createElement(React.Fragment, null,
+        React.createElement("defs", null,
+            React.createElement("mask", { id: "strike" },
+                React.createElement("path", { d: "M0 0h24v24H0z", fill: "white" }),
+                React.createElement("path", { d: "M0 0L24 24", stroke: "black", strokeWidth: 4 }))),
+        React.createElement("path", { d: "M0.70707 2.121320L21.878680 23.292883", stroke: "currentColor", strokeWidth: 2 }),
+        React.createElement("g", { fill: "currentColor", mask: "url(#strike)" },
             React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
             glyph)));
-    icon.displayName = name;
-    return icon;
 }
 export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));

package/dist/core/consts.d.ts

@@ -5,6 +5,8 @@ export declare const MODULE_NO_SCROLL = "no-scroll";
 export declare const MODULE_PORTAL = "portal";
 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_FULLSCREEN = "fullscreen";
 export declare const PLUGIN_INLINE = "inline";
 export declare const PLUGIN_SLIDESHOW = "slideshow";

package/dist/core/consts.js

@@ -5,6 +5,8 @@ export const MODULE_NO_SCROLL = "no-scroll";
 export const MODULE_PORTAL = "portal";
 export const MODULE_ROOT = "root";
 export const MODULE_TOOLBAR = "toolbar";
+export const PLUGIN_CAPTIONS = "captions";
+export const PLUGIN_COUNTER = "counter";
 export const PLUGIN_FULLSCREEN = "fullscreen";
 export const PLUGIN_INLINE = "inline";
 export const PLUGIN_SLIDESHOW = "slideshow";

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

@@ -2,13 +2,17 @@ import * as React from "react";
 import { Callback, ComponentProps, ContainerRect, ControllerRef, NavigationAction } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
 import { LightboxStateSwipeAction } from "../contexts/index.js";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE } from "../consts.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../consts.js";
 declare module "../index.js" {
     interface EventTypes {
         [ACTION_PREV]: NavigationAction | void;
         [ACTION_NEXT]: NavigationAction | void;
         [ACTION_SWIPE]: LightboxStateSwipeAction;
         [ACTION_CLOSE]: void;
+        [ACTIVE_SLIDE_LOADING]: void;
+        [ACTIVE_SLIDE_PLAYING]: void;
+        [ACTIVE_SLIDE_COMPLETE]: void;
+        [ACTIVE_SLIDE_ERROR]: void;
     }
 }
 export type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {

package/dist/core/modules/Controller.js

@@ -4,7 +4,7 @@ import { cleanup, clsx, computeSlideRect, cssClass, cssVar, makeComposePrefix, m
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.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");
 export const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);

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

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

package/dist/plugins/captions/Captions.js

@@ -1,20 +1,28 @@
 import * as React from "react";
-import { resolveCaptionsProps } from "./props.js";
-import { Description } from "./Description.js";
+import { createModule, PLUGIN_CAPTIONS } from "../../core/index.js";
 import { Title } from "./Title.js";
-export function Captions({ augment }) {
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => {
+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 }) => {
+        const captions = resolveCaptionsProps(captionsProps);
         return {
             render: {
                 slideFooter: ({ slide }) => (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
                     renderFooter({ slide }),
-                    slide.title && React.createElement(Title, { styles: styles, title: slide.title }),
-                    slide.description && React.createElement(Description, { styles: styles, description: slide.description }))),
+                    slide.title && React.createElement(Title, { title: slide.title }),
+                    slide.description && React.createElement(Description, { description: slide.description }))),
                 ...restRender,
             },
-            captions: resolveCaptionsProps(captions),
-            styles,
+            toolbar: {
+                buttons: [...(captions.showToggle ? [React.createElement(CaptionsButton, { key: PLUGIN_CAPTIONS })] : []), ...buttons],
+                ...restToolbar,
+            },
+            captions,
             ...restProps,
         };
     });
+    addModule(createModule(PLUGIN_CAPTIONS, CaptionsContextProvider));
 }

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

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

package/dist/plugins/captions/CaptionsButton.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { createIcon, createIconDisabled, IconButton, label, 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" }),
+    React.createElement("path", { d: "M7 15h3c.55 0 1-.45 1-1v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm7 0h3c.55 0 1-.45 1-1v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1z" })));
+const CaptionsVisible = createIcon("CaptionsVisible", captionsIcon());
+const CaptionsHidden = createIconDisabled("CaptionsVisible", captionsIcon());
+export function CaptionsButton() {
+    const { visible, show, hide } = useCaptions();
+    const { render, labels } = 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 }));
+}

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { CaptionsRef, ComponentProps } from "../../types.js";
+export declare const CaptionsContext: React.Context<CaptionsRef | null>;
+export declare const useCaptions: () => CaptionsRef;
+export declare function CaptionsContextProvider({ captions, children }: ComponentProps): JSX.Element;

package/dist/plugins/captions/CaptionsContext.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { makeUseContext } from "../../core/index.js";
+import { resolveCaptionsProps } from "./props.js";
+export const CaptionsContext = React.createContext(null);
+export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
+export function CaptionsContextProvider({ captions, children }) {
+    const { ref } = resolveCaptionsProps(captions);
+    const [visible, setVisible] = React.useState(true);
+    const context = React.useMemo(() => ({
+        visible,
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+    }), [visible]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return React.createElement(CaptionsContext.Provider, { value: context }, children);
+}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { LightboxProps, Slide } from "../../types.js";
-export type DescriptionProps = Required<Pick<Slide, "description">> & Pick<LightboxProps, "styles">;
-export declare function Description({ description, styles }: DescriptionProps): JSX.Element;
+import { Slide } from "../../types.js";
+export type DescriptionProps = Pick<Slide, "description">;
+export declare function Description({ description }: DescriptionProps): JSX.Element | null;

package/dist/plugins/captions/Description.js

@@ -1,10 +1,14 @@
 import * as React from "react";
 import { clsx, cssVar, useLightboxProps } from "../../core/index.js";
-import { defaultCaptionsProps, resolveCaptionsProps } from "./props.js";
 import { cssPrefix } from "./utils.js";
-export function Description({ description, styles }) {
-    const { captions } = useLightboxProps();
-    const { descriptionTextAlign, descriptionMaxLines } = resolveCaptionsProps(captions);
+import { defaultCaptionsProps, useCaptionsProps } from "./props.js";
+import { useCaptions } from "./CaptionsContext.js";
+export function Description({ description }) {
+    const { descriptionTextAlign, descriptionMaxLines } = useCaptionsProps();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
     return (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
         React.createElement("div", { className: cssPrefix("description"), style: {
                 ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { LightboxProps, Slide } from "../../types.js";
-export type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
-export declare function Title({ title, styles }: TitleProps): JSX.Element;
+import { Slide } from "../../types.js";
+export type TitleProps = Pick<Slide, "title">;
+export declare function Title({ title }: TitleProps): JSX.Element | null;

package/dist/plugins/captions/Title.js

@@ -1,8 +1,16 @@
 import * as React from "react";
-import { clsx, cssVar, useController } from "../../core/index.js";
+import { clsx, cssVar, useController, useLightboxProps } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
-export function Title({ title, styles }) {
+import { useCaptions } from "./CaptionsContext.js";
+export function Title({ title }) {
     const { toolbarWidth } = useController();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
     return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
-        React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+        React.createElement("div", { className: cssPrefix("title"), style: {
+                ...(toolbarWidth ? { [cssVar("toolbar_width")]: `${toolbarWidth}px` } : null),
+                ...styles.captionsTitle,
+            } }, title)));
 }

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

@@ -11,6 +11,10 @@ declare module "../../types.js" {
     interface LightboxProps {
         /** Captions plugin settings */
         captions?: {
+            /** Captions plugin ref */
+            ref?: React.ForwardedRef<CaptionsRef>;
+            /** if `true`, show Captions Toggle button in the toolbar */
+            showToggle?: boolean;
             /** description text alignment */
             descriptionTextAlign?: TextAlignment;
             /** maximum number of lines to display in the description section */
@@ -27,5 +31,22 @@ declare module "../../types.js" {
         /** captions description container customization slot */
         captionsDescriptionContainer: "captionsDescriptionContainer";
     }
+    interface Render {
+        /** render custom Captions Visible icon */
+        iconCaptionsVisible?: RenderFunction;
+        /** render custom Captions Hidden icon */
+        iconCaptionsHidden?: RenderFunction;
+        /** render custom Captions button */
+        buttonCaptions?: RenderFunction<CaptionsRef>;
+    }
+    /** Captions plugin ref */
+    interface CaptionsRef {
+        /** if `true`, captions are visible */
+        visible: boolean;
+        /** show captions */
+        show: Callback;
+        /** hide captions */
+        hide: Callback;
+    }
 }
 export default Captions;

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

@@ -1,9 +1,19 @@
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
 export declare const defaultCaptionsProps: {
     descriptionTextAlign: "start";
     descriptionMaxLines: number;
+    showToggle: boolean;
 };
 export declare const resolveCaptionsProps: (captions: LightboxProps["captions"]) => {
+    ref?: import("react").ForwardedRef<import("../../types.js").CaptionsRef> | undefined;
+    showToggle: boolean;
+    descriptionTextAlign: import("../../types.js").TextAlignment;
+    descriptionMaxLines: number;
+};
+export declare function useCaptionsProps(): {
+    ref?: import("react").ForwardedRef<import("../../types.js").CaptionsRef> | undefined;
+    showToggle: boolean;
     descriptionTextAlign: import("../../types.js").TextAlignment;
     descriptionMaxLines: number;
 };

package/dist/plugins/captions/props.js

@@ -1,8 +1,14 @@
+import { useLightboxProps } from "../../core/index.js";
 export const defaultCaptionsProps = {
     descriptionTextAlign: "start",
     descriptionMaxLines: 3,
+    showToggle: false,
 };
 export const resolveCaptionsProps = (captions) => ({
     ...defaultCaptionsProps,
     ...captions,
 });
+export function useCaptionsProps() {
+    const { captions } = useLightboxProps();
+    return resolveCaptionsProps(captions);
+}

package/dist/plugins/counter/Counter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentProps, PluginProps } from "../../types.js";
+export declare function CounterComponent({ counter: { className, ...rest } }: ComponentProps): JSX.Element | null;
+/** Counter plugin */
+export declare function Counter({ addChild }: PluginProps): void;

package/dist/plugins/counter/Counter.js

@@ -0,0 +1,14 @@
+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;
+    if (slides.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx(cssClass("counter"), className), ...rest },
+        currentIndex + 1,
+        " / ",
+        slides.length));
+}
+export function Counter({ addChild }) {
+    addChild(MODULE_CONTROLLER, createModule(PLUGIN_COUNTER, CounterComponent));
+}

package/dist/plugins/counter/counter.css

@@ -0,0 +1,16 @@
+.yarl__counter {
+  position: var(--yarl__counter_position, absolute);
+  top: var(--yarl__counter_top, 0);
+  left: var(--yarl__counter_left, 0);
+  bottom: var(--yarl__counter_bottom, unset);
+  right: var(--yarl__counter_right, unset);
+  color: var(--yarl__counter_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
+  -webkit-filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+          filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+  margin: var(--yarl__counter_margin, var(--yarl__toolbar_padding, 8px));
+  padding: var(--yarl__counter_padding, var(--yarl__button_padding, 8px));
+  line-height: var(--yarl__counter_line_height, var(--yarl__icon_size, 32px));
+  -webkit-user-select: var(--yarl__counter_user_select, none);
+     -moz-user-select: var(--yarl__counter_user_select, none);
+          user-select: var(--yarl__counter_user_select, none);
+}

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

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

package/dist/plugins/counter/index.js

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

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -12,5 +12,5 @@ export function FullscreenButton() {
     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)() }));
+    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 }));
 }

package/dist/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Captions } from "./captions/index.js";
+export { default as Counter } from "./counter/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,4 +1,5 @@
 export { default as Captions } from "./captions/index.js";
+export { default as Counter } from "./counter/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/SlideshowButton.js

@@ -10,5 +10,5 @@ export function SlideshowButton() {
     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 }));
+    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 }));
 }

package/dist/plugins/thumbnails/Thumbnails.js

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

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

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

package/dist/plugins/thumbnails/ThumbnailsButton.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { createIcon, createIconDisabled, IconButton, label, 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, labels } = 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 }));
+}

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

@@ -0,0 +1,6 @@
+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): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsContext.js

@@ -0,0 +1,24 @@
+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,6 +1,4 @@
 import * as React from "react";
-import { DeepNonNullable, LightboxProps } from "../../types.js";
-export type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
 export type ThumbnailsTrackProps = {
     containerRef: React.RefObject<HTMLDivElement>;
 };

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -3,6 +3,7 @@ import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, cls
 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);
 }
@@ -11,6 +12,7 @@ function boxSize(thumbnails, dimension, includeGap) {
 }
 export function ThumbnailsTrack({ containerRef }) {
     const track = React.useRef(null);
+    const { visible } = useThumbnails();
     const { carousel, styles } = useLightboxProps();
     const { slides, globalIndex, animation } = useLightboxState().state;
     const { publish, subscribe } = useEvents();
@@ -93,6 +95,7 @@ export function ThumbnailsTrack({ containerRef }) {
         }
     };
     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),

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

@@ -1,9 +1,12 @@
+/// <reference types="react" />
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types.js" {
     interface LightboxProps {
         /** Thumbnails plugin settings */
         thumbnails?: {
+            /** Thumbnails plugin ref */
+            ref?: React.ForwardedRef<ThumbnailsRef>;
             /** thumbnails position */
             position?: Position;
             /** thumbnail width */
@@ -20,13 +23,21 @@ declare module "../../types.js" {
             gap?: number;
             /** `object-fit` setting */
             imageFit?: ImageFit;
-            /** vignette effect on the edges of the thumbnails track */
+            /** if `true`, show the vignette effect on the edges of the thumbnails track */
             vignette?: boolean;
+            /** if `true`, show the Toggle Thumbnails button in the toolbar */
+            showToggle?: boolean;
         };
     }
     interface Render {
         /** render custom thumbnail */
         thumbnail?: RenderFunction<RenderThumbnailProps>;
+        /** render custom Thumbnails Visible icon */
+        iconThumbnailsVisible?: RenderFunction;
+        /** render custom Thumbnails Hidden icon */
+        iconThumbnailsHidden?: RenderFunction;
+        /** render custom Thumbnails button */
+        buttonThumbnails?: RenderFunction<ThumbnailsRef>;
     }
     /** `render.thumbnail` render function props */
     type RenderThumbnailProps = {
@@ -43,5 +54,14 @@ declare module "../../types.js" {
         /** thumbnails container customization slot */
         thumbnailsContainer: "thumbnailsContainer";
     }
+    /** Thumbnails plugin ref */
+    interface ThumbnailsRef {
+        /** if `true`, thumbnails are visible */
+        visible: boolean;
+        /** show thumbnails */
+        show: Callback;
+        /** hide thuumbnails */
+        hide: Callback;
+    }
 }
 export default Thumbnails;

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
 export declare const defaultThumbnailsProps: {
+    ref: null;
     position: "bottom";
     width: number;
     height: number;
@@ -11,6 +13,7 @@ export declare const defaultThumbnailsProps: {
     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;
@@ -20,8 +23,10 @@ export declare const resolveThumbnailsProps: (thumbnails: LightboxProps["thumbna
     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;
@@ -31,4 +36,5 @@ export declare function useThumbnailsProps(): {
     gap: number;
     imageFit: import("../../types.js").ImageFit;
     vignette: boolean;
+    showToggle?: boolean | undefined;
 };

package/dist/plugins/thumbnails/props.js

@@ -1,5 +1,6 @@
 import { useLightboxProps } from "../../core/index.js";
 export const defaultThumbnailsProps = {
+    ref: null,
     position: "bottom",
     width: 120,
     height: 80,

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

@@ -1,5 +1,4 @@
 import { Video } from "./Video.js";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../../core/consts.js";
 declare module "../../types.js" {
     interface SlideTypes {
         /** video slide type */
@@ -46,12 +45,4 @@ declare module "../../types.js" {
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
-declare module "../../core/index.js" {
-    interface EventTypes {
-        [ACTIVE_SLIDE_LOADING]: void;
-        [ACTIVE_SLIDE_PLAYING]: void;
-        [ACTIVE_SLIDE_COMPLETE]: void;
-        [ACTIVE_SLIDE_ERROR]: void;
-    }
-}
 export default Video;

package/dist/plugins/video/index.js

@@ -1,3 +1,2 @@
 import { Video } from "./Video.js";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, } from "../../core/consts.js";
 export default Video;

package/dist/plugins/zoom/ZoomButton.js

@@ -19,7 +19,7 @@ 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: label(labels, 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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.0.0",
+    "version": "3.2.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -25,6 +25,11 @@
             "types": "./dist/plugins/captions/index.d.ts",
             "default": "./dist/plugins/captions/index.js"
         },
+        "./plugins/counter.css": "./dist/plugins/counter/counter.css",
+        "./plugins/counter": {
+            "types": "./dist/plugins/counter/index.d.ts",
+            "default": "./dist/plugins/counter/index.js"
+        },
         "./plugins/fullscreen": {
             "types": "./dist/plugins/fullscreen/index.d.ts",
             "default": "./dist/plugins/fullscreen/index.js"
@@ -66,6 +71,9 @@
             "plugins/captions": [
                 "dist/plugins/captions/index.d.ts"
             ],
+            "plugins/counter": [
+                "dist/plugins/counter/index.d.ts"
+            ],
             "plugins/fullscreen": [
                 "dist/plugins/fullscreen/index.d.ts"
             ],

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

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

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { clsx, cssClass, LightboxPropsProvider } from "../../core/index.js";
-import { cssPrefix } from "./utils.js";
-import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
-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 }))));
-}