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

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { ACTION_NEXT, ACTION_PREV, CLASS_FLEX_CENTER, clsx, cssClass, cssVar, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, useRTL, } from "../../core/index.js";
+import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
+import { Thumbnail } from "./Thumbnail.js";
+import { defaultThumbnailsProps } from "./Thumbnails.js";
+const isHorizontal = (position) => ["top", "bottom"].includes(position);
+const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
+const getSlide = (slides, index) => slides[((index % slides.length) + slides.length) % slides.length];
+export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
+    const [index, setIndex] = React.useState(startingIndex);
+    const [offset, setOffset] = React.useState(0);
+    const track = React.useRef(null);
+    const animationRef = React.useRef();
+    const animationOffset = React.useRef(0);
+    const { state: { globalIndex, animationDuration }, } = useLightboxState();
+    const { publish } = useEvents();
+    const reduceMotion = useMotionPreference();
+    const isRTL = useRTL();
+    const handleControllerSwipe = useEventCallback(() => {
+        if (container.current && track.current) {
+            const containerRect = container.current.getBoundingClientRect();
+            const trackRect = track.current.getBoundingClientRect();
+            animationOffset.current = isHorizontal(thumbnails.position)
+                ? trackRect.left - (containerRect.width - trackRect.width) / 2
+                : trackRect.top - (containerRect.height - trackRect.height) / 2;
+        }
+        else {
+            animationOffset.current = 0;
+        }
+        setIndex(globalIndex);
+        setOffset(globalIndex - index);
+    });
+    React.useEffect(handleControllerSwipe, [globalIndex, handleControllerSwipe]);
+    const getCurrentIndex = useEventCallback(() => index);
+    const handleIndexOffsetChange = useEventCallback(() => {
+        var _a, _b, _c;
+        if (track.current && offset) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+            animationRef.current = (_c = (_b = track.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, isHorizontal(thumbnails.position)
+                ? [
+                    {
+                        transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, thumbnails.width, true) * offset +
+                            animationOffset.current}px)`,
+                    },
+                    { transform: "translateX(0)" },
+                ]
+                : [
+                    {
+                        transform: `translateY(${boxSize(thumbnails, thumbnails.height, true) * offset + animationOffset.current}px)`,
+                    },
+                    { transform: "translateY(0)" },
+                ], !reduceMotion ? animationDuration : 0);
+            if (animationRef.current) {
+                animationRef.current.onfinish = () => {
+                    animationRef.current = undefined;
+                    if (getCurrentIndex() === index) {
+                        setOffset(0);
+                    }
+                };
+            }
+            animationOffset.current = 0;
+        }
+    });
+    useLayoutEffect(handleIndexOffsetChange, [index, offset, handleIndexOffsetChange]);
+    const { finite, preload } = carousel;
+    const items = [];
+    if (slides.length > 0) {
+        if (offset < 0) {
+            for (let i = index - preload + offset; i < index - preload; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        for (let i = index - preload - (offset > 0 ? offset : 0); i < index; i += 1) {
+            if (!(finite && i < 0)) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        items.push({ slide: getSlide(slides, index), index });
+        for (let i = index + 1; i <= index + preload - (offset < 0 ? offset : 0); i += 1) {
+            if (!finite || i <= slides.length - 1) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        if (offset > 0) {
+            for (let i = index + preload + 1; i <= index + preload + offset; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+    }
+    const handleClick = (slideIndex) => () => {
+        if (slideIndex > index) {
+            publish(ACTION_NEXT, slideIndex - index);
+        }
+        else if (slideIndex < index) {
+            publish(ACTION_PREV, index - slideIndex);
+        }
+    };
+    const { width, height, border, borderRadius, padding, gap, imageFit } = thumbnails;
+    return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
+            ...(width !== defaultThumbnailsProps.width
+                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
+                : null),
+            ...(height !== defaultThumbnailsProps.height
+                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, height)}px` }
+                : null),
+            ...(border !== defaultThumbnailsProps.border
+                ? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
+                : null),
+            ...(borderRadius !== defaultThumbnailsProps.borderRadius
+                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
+                : null),
+            ...(padding !== defaultThumbnailsProps.padding
+                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
+                : null),
+            ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
+            ...styles.thumbnailsContainer,
+        } },
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+            const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
+            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
+                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: ((offset > 0
+                        ? slideIndex - (index + preload - offset)
+                        : index - preload - offset - slideIndex) -
+                        1) *
+                        fadeAnimationDuration,
+                }
+                : undefined;
+            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: (offset > 0
+                        ? offset - (index - preload - slideIndex)
+                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
+                }
+                : undefined;
+            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
+        })),
+        React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
+};

package/dist/plugins/{Thumbnails.d.ts → thumbnails/index.d.ts}

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { Component, DeepNonNullable, LightboxProps, Plugin } from "../types.js";
-import { ContainerRect } from "../core/index.js";
-export declare type Position = "top" | "bottom" | "start" | "end";
-declare module "../types.js" {
+import { ContainerRect } from "../../core/index.js";
+import { Thumbnails } from "./Thumbnails.js";
+declare type Position = "top" | "bottom" | "start" | "end";
+declare module "../../types" {
     interface LightboxProps {
         /** Thumbnails plugin settings */
         thumbnails?: {
@@ -41,16 +41,4 @@ declare module "../types.js" {
         thumbnailsContainer: "thumbnailsContainer";
     }
 }
-declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
-    container: React.RefObject<HTMLDivElement>;
-    thumbnails: ThumbnailsInternal;
-    startingIndex: number;
-    thumbnailRect: ContainerRect;
-};
-export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
-/** Thumbnails plugin component */
-export declare const ThumbnailsComponent: Component;
-/** Thumbnails plugin */
-export declare const Thumbnails: Plugin;
 export default Thumbnails;

package/dist/plugins/thumbnails/index.js

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

package/dist/plugins/{thumbnails.css → thumbnails/thumbnails.css}

@@ -1,69 +1,60 @@
 .yarl__thumbnails {
   display: flex;
+  height: 100%;
 }
 .yarl__thumbnails_top, .yarl__thumbnails_bottom {
-  flex-flow: column nowrap;
-}
-.yarl__thumbnails_top .yarl__thumbnails_track, .yarl__thumbnails_bottom .yarl__thumbnails_track {
-  flex-flow: row nowrap;
-}
-.yarl__thumbnails_start, .yarl__thumbnails_end {
-  flex-flow: row nowrap;
+  flex-direction: column;
 }
 .yarl__thumbnails_start .yarl__thumbnails_track, .yarl__thumbnails_end .yarl__thumbnails_track {
-  flex-flow: column nowrap;
+  flex-direction: column;
 }
 .yarl__thumbnails_wrapper {
-  flex-grow: 1;
+  flex: 1;
   position: relative;
 }
 .yarl__thumbnails_container {
+  flex: 0 0 auto;
   background-color: var(--yarl__thumbnails_container_background_color, var(--yarl__color_backdrop, #000));
   padding: var(--yarl__thumbnails_container_padding, 16px);
   position: relative;
   overflow: hidden;
-  z-index: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
 }
-.yarl__thumbnails_container::before, .yarl__thumbnails_container::after {
-  content: "";
+.yarl__thumbnails_vignette {
   position: absolute;
-  z-index: 1;
+  pointer-events: none;
+  --yarl__thumbnails_vignette_size: 12%;
 }
-.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
-  left: 0;
-  background: linear-gradient(to left, transparent, var(--yarl__color_backdrop, #000));
+@media (min-width: 1200px) {
+  .yarl__thumbnails_vignette {
+    --yarl__thumbnails_vignette_size: 8%;
+  }
 }
-.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
-  right: 0;
-  background: linear-gradient(to right, transparent, var(--yarl__color_backdrop, #000));
+@media (min-width: 2000px) {
+  .yarl__thumbnails_vignette {
+    --yarl__thumbnails_vignette_size: 5%;
+  }
 }
-.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
-  top: 0;
-  bottom: 0;
-  width: 60px;
+.yarl__thumbnails_top .yarl__thumbnails_vignette, .yarl__thumbnails_bottom .yarl__thumbnails_vignette {
+  height: 100%;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to right, var(--yarl__color_backdrop, #000) 0px, transparent var(--yarl__thumbnails_vignette_size, 12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)), var(--yarl__color_backdrop, #000) 100%);
 }
-.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
+.yarl__thumbnails_start .yarl__thumbnails_vignette, .yarl__thumbnails_end .yarl__thumbnails_vignette {
+  width: 100%;
   top: 0;
-  background: linear-gradient(to top, transparent, var(--yarl__color_backdrop, #000));
-}
-.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
   bottom: 0;
-  background: linear-gradient(to bottom, transparent, var(--yarl__color_backdrop, #000));
-}
-.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::after {
-  left: 0;
-  right: 0;
-  height: 60px;
+  background: linear-gradient(to bottom, var(--yarl__color_backdrop, #000) 0px, transparent var(--yarl__thumbnails_vignette_size, 12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)), var(--yarl__color_backdrop, #000) 100%);
 }
 .yarl__thumbnails_track {
-  display: flex;
   gap: var(--yarl__thumbnails_thumbnail_gap, 16px);
 }
 .yarl__thumbnails_thumbnail {
+  flex: 0 0 auto;
   cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -72,7 +63,6 @@
   border: var(--yarl__thumbnails_thumbnail_border, 1px solid var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
   border-radius: var(--yarl__thumbnails_thumbnail_border_radius, 4px);
   -webkit-tap-highlight-color: transparent;
-  flex-shrink: 0;
   position: relative;
   overflow: hidden;
   padding: var(--yarl__thumbnails_thumbnail_padding, 4px);
@@ -104,8 +94,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate3d(-50%, -50%, 0);
-          transform: translate3d(-50%, -50%, 0);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
   width: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
   height: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
 }

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

@@ -0,0 +1,2 @@
+export declare const cssPrefix: (value?: string) => string;
+export declare const cssThumbnailPrefix: (value?: string) => string;

package/dist/plugins/thumbnails/utils.js

@@ -0,0 +1,4 @@
+import { composePrefix } from "../../core/utils.js";
+import { PLUGIN_THUMBNAILS } from "../../core/consts.js";
+export const cssPrefix = (value) => composePrefix(PLUGIN_THUMBNAILS, value);
+export const cssThumbnailPrefix = (value) => cssPrefix(composePrefix("thumbnail", value));

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

@@ -0,0 +1,7 @@
+import { Plugin } from "../../types.js";
+export declare const defaultVideoProps: {
+    controls: boolean;
+    playsInline: boolean;
+};
+/** Video plugin */
+export declare const Video: Plugin;

package/dist/plugins/video/Video.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { VideoSlide } from "./VideoSlide.js";
+export const defaultVideoProps = {
+    controls: true,
+    playsInline: true,
+};
+export const Video = ({ augment }) => {
+    augment(({ render: { slide: renderSlide, ...restRender }, video: originalVideo, ...restProps }) => ({
+        render: {
+            slide: (slide, offset, rect) => {
+                if (slide.type === "video") {
+                    return React.createElement(VideoSlide, { slide: slide, offset: offset });
+                }
+                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
+            },
+            ...restRender,
+        },
+        video: {
+            ...defaultVideoProps,
+            ...originalVideo,
+        },
+        ...restProps,
+    }));
+};

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { SlideVideo } from "./index.js";
+declare type VideoSlideProps = {
+    slide: SlideVideo;
+    offset: number;
+};
+/** Video slide */
+export declare const VideoSlide: React.FC<VideoSlideProps>;
+export {};

package/dist/plugins/{Video.js → video/VideoSlide.js}

@@ -1,16 +1,11 @@
 import * as React from "react";
-import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, clsx, cssClass, useContainerRect, useController, useEvents, useLatest, } from "../core/index.js";
-const defaultVideoProps = {
-    controls: true,
-    playsInline: true,
-};
+import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, clsx, cssClass, useContainerRect, useController, useEventCallback, useEvents, } from "../../core/index.js";
+import { defaultVideoProps } from "./Video.js";
 export const VideoSlide = ({ slide, offset }) => {
-    var _a;
-    const { latestProps } = useController();
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     const videoRef = React.useRef(null);
-    const video = (_a = latestProps.current.video) !== null && _a !== void 0 ? _a : defaultVideoProps;
+    const video = { ...defaultVideoProps, ...useController().getLightboxProps().video };
     React.useEffect(() => {
         if (offset !== 0 && videoRef.current && !videoRef.current.paused) {
             videoRef.current.pause();
@@ -22,18 +17,17 @@ export const VideoSlide = ({ slide, offset }) => {
             videoRef.current.play().catch(() => { });
         }
     }, [offset, video.autoPlay, slide.autoPlay, publish]);
-    const latestOffset = useLatest(offset);
-    const latestVideoAutoPlay = useLatest(video.autoPlay);
-    const latestSlideAutoPlay = useLatest(slide.autoPlay);
-    const setVideoRef = React.useCallback((el) => {
-        videoRef.current = el;
-        if (el &&
-            latestOffset.current === 0 &&
-            (latestVideoAutoPlay.current || latestSlideAutoPlay.current) &&
-            el.paused) {
-            el.play().catch(() => { });
+    const handleVideoRef = useEventCallback((node) => {
+        if (offset === 0 && (video.autoPlay || slide.autoPlay) && node.paused) {
+            node.play().catch(() => { });
+        }
+    });
+    const setVideoRef = React.useCallback((node) => {
+        videoRef.current = node;
+        if (node) {
+            handleVideoRef(node);
         }
-    }, [latestOffset, latestVideoAutoPlay, latestSlideAutoPlay]);
+    }, [handleVideoRef]);
     const { width, height, poster, sources } = slide;
     const scaleWidthAndHeight = () => {
         if (!width || !height || !containerRect)
@@ -68,28 +62,9 @@ export const VideoSlide = ({ slide, offset }) => {
             width: "100%",
             height: "100%",
             ...(width ? { maxWidth: `${width}px` } : null),
-        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { ref: setVideoRef, poster: poster, ...scaleWidthAndHeight(), ...resolveBoolean("controls"), ...resolveBoolean("playsInline"), ...resolveBoolean("loop"), ...resolveBoolean("muted"), ...resolveBoolean("playsInline"), ...resolveBoolean("disablePictureInPicture"), ...resolveBoolean("disableRemotePlayback"), ...resolveString("controlsList"), ...resolveString("crossOrigin"), ...resolveString("preload"), onPlay: () => {
+        }, className: clsx(cssClass("video_container"), cssClass(CLASS_FLEX_CENTER)) }, containerRect && (React.createElement("video", { ref: setVideoRef, poster: poster, ...scaleWidthAndHeight(), ...resolveBoolean("controls"), ...resolveBoolean("playsInline"), ...resolveBoolean("loop"), ...resolveBoolean("muted"), ...resolveBoolean("playsInline"), ...resolveBoolean("disablePictureInPicture"), ...resolveBoolean("disableRemotePlayback"), ...resolveString("controlsList"), ...resolveString("crossOrigin"), ...resolveString("preload"), onPlay: () => {
             publish(ACTIVE_SLIDE_PLAYING);
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);
         } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
 };
-export const Video = ({ augment }) => {
-    augment(({ render: { slide: renderSlide, ...restRender }, video: originalVideo, ...restProps }) => ({
-        render: {
-            slide: (slide, offset, rect) => {
-                if ("type" in slide && slide.type === "video") {
-                    return React.createElement(VideoSlide, { slide: slide, offset: offset });
-                }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
-            },
-            ...restRender,
-        },
-        video: {
-            ...defaultVideoProps,
-            ...originalVideo,
-        },
-        ...restProps,
-    }));
-};
-export default Video;

package/dist/plugins/{Video.d.ts → video/index.d.ts}

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { Plugin } from "../types.js";
+import { GenericSlide } from "../../types.js";
+import { Video } from "./Video.js";
 /** Video slide attributes */
-export interface SlideVideo {
+export interface SlideVideo extends GenericSlide {
     /** video slide type marker */
     type: "video";
     /** video placeholder image */
@@ -31,14 +31,14 @@ export interface SlideVideo {
     /** disables the capability of remote playback */
     disableRemotePlayback?: boolean;
     /** an array of video files */
-    sources?: {
+    sources: {
         /** video source URL */
         src: string;
         /** video source type (e.g., `video/mp4`) */
         type: string;
     }[];
 }
-declare module "../types.js" {
+declare module "../../types" {
     interface SlideTypes {
         /** video slide type */
         SlideVideo: SlideVideo;
@@ -48,12 +48,4 @@ declare module "../types.js" {
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
-declare type VideoSlideProps = {
-    slide: SlideVideo;
-    offset: number;
-};
-/** Video slide */
-export declare const VideoSlide: React.FC<VideoSlideProps>;
-/** Video plugin */
-export declare const Video: Plugin;
 export default Video;

package/dist/plugins/video/index.js

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

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

@@ -0,0 +1,14 @@
+import { Plugin } from "../../types.js";
+export declare const defaultZoomProps: {
+    maxZoomPixelRatio: number;
+    zoomInMultiplier: number;
+    doubleTapDelay: number;
+    doubleClickDelay: number;
+    doubleClickMaxStops: number;
+    keyboardMoveDistance: number;
+    wheelZoomDistanceFactor: number;
+    pinchZoomDistanceFactor: number;
+    scrollToZoom: boolean;
+};
+/** Zoom plugin */
+export declare const Zoom: Plugin;

package/dist/plugins/zoom/Zoom.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { createModule, MODULE_CONTROLLER, PLUGIN_ZOOM } from "../../core/index.js";
+import { ZoomContextProvider } from "./ZoomContext.js";
+import { ZoomButtonsGroup } from "./ZoomButtonsGroup.js";
+import { ZoomWrapper } from "./ZoomWrapper.js";
+export const defaultZoomProps = {
+    maxZoomPixelRatio: 1,
+    zoomInMultiplier: 2,
+    doubleTapDelay: 300,
+    doubleClickDelay: 500,
+    doubleClickMaxStops: 2,
+    keyboardMoveDistance: 50,
+    wheelZoomDistanceFactor: 100,
+    pinchZoomDistanceFactor: 100,
+    scrollToZoom: false,
+};
+export const Zoom = ({ augment, append }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(ZoomButtonsGroup, { key: PLUGIN_ZOOM, labels: restProps.labels, render: render }), ...buttons],
+            ...restToolbar,
+        },
+        render: {
+            ...render,
+            slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom })),
+        },
+        zoom: {
+            ...defaultZoomProps,
+            ...zoom,
+        },
+        carousel,
+        animation,
+        ...restProps,
+    }));
+    append(MODULE_CONTROLLER, createModule(PLUGIN_ZOOM, ZoomContextProvider));
+};

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { LightboxProps } from "../../types.js";
+/** Zoom button */
+export declare const ZoomButton: React.ForwardRefExoticComponent<Pick<LightboxProps, "render" | "labels"> & {
+    zoomIn?: boolean | undefined;
+    onLoseFocus: () => void;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/plugins/zoom/ZoomButton.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { createIcon, IconButton, label, useEvents } from "../../core/index.js";
+import { useZoom } from "./ZoomContext.js";
+import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.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(({ labels, render, zoomIn, onLoseFocus }, ref) => {
+    const wasEnabled = React.useRef(false);
+    const wasFocused = React.useRef(false);
+    const { isMinZoom, isMaxZoom, isZoomSupported } = useZoom();
+    const { publish } = useEvents();
+    const disabled = !isZoomSupported || (zoomIn ? isMaxZoom : isMinZoom);
+    const onClick = () => publish(zoomIn ? ACTION_ZOOM_IN : ACTION_ZOOM_OUT);
+    const onFocus = React.useCallback(() => {
+        wasFocused.current = true;
+    }, []);
+    const onBlur = React.useCallback(() => {
+        wasFocused.current = false;
+    }, []);
+    React.useEffect(() => {
+        if (disabled && wasEnabled.current && wasFocused.current) {
+            onLoseFocus();
+        }
+        if (!disabled) {
+            wasEnabled.current = true;
+        }
+    }, [disabled, onLoseFocus]);
+    if (zoomIn && render.buttonZoomIn)
+        return (React.createElement(React.Fragment, null, render.buttonZoomIn({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    if (!zoomIn && render.buttonZoomOut)
+        return (React.createElement(React.Fragment, null, render.buttonZoomOut({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    return (React.createElement(IconButton, { ref: ref, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur }));
+});
+ZoomButton.displayName = "ZoomButton";

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { LightboxProps } from "../../types.js";
+declare type ZoomButtonsGroupProps = Pick<LightboxProps, "labels" | "render">;
+export declare const ZoomButtonsGroup: React.FC<ZoomButtonsGroupProps>;
+export {};

package/dist/plugins/zoom/ZoomButtonsGroup.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useController } from "../../core/index.js";
+import { ZoomButton } from "./ZoomButton.js";
+import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
+export const ZoomButtonsGroup = ({ labels, render }) => {
+    const zoomInRef = React.useRef(null);
+    const zoomOutRef = React.useRef(null);
+    const { transferFocus } = useController();
+    const focusSibling = React.useCallback((sibling) => {
+        var _a, _b;
+        if (!((_a = sibling.current) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            (_b = sibling.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else {
+            transferFocus();
+        }
+    }, [transferFocus]);
+    const focusZoomIn = React.useCallback(() => focusSibling(zoomInRef), [focusSibling]);
+    const focusZoomOut = React.useCallback(() => focusSibling(zoomOutRef), [focusSibling]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ZoomButton, { ref: zoomInRef, key: ACTION_ZOOM_IN, zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
+        React.createElement(ZoomButton, { ref: zoomOutRef, key: ACTION_ZOOM_OUT, labels: labels, render: render, onLoseFocus: focusZoomIn })));
+};

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { ContainerRect } from "../../core/index.js";
+import { LightboxProps, Slide } from "../../types.js";
+/** Zoom container */
+export declare const ZoomContainer: React.FC<Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation"> & {
+    slide: Slide;
+    offset: number;
+    rect: ContainerRect;
+}>;