yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/plugins/zoom/ZoomController.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { makeUseContext, useController } from "../../core/index.js";
+import { useZoomCallback, useZoomImageRect, useZoomProps, useZoomSensors, useZoomState } from "./hooks/index.js";
+export const ZoomControllerContext = React.createContext(null);
+export const useZoom = makeUseContext("useZoom", "ZoomControllerContext", ZoomControllerContext);
+export function ZoomContextProvider({ children }) {
+    const [zoomWrapper, setZoomWrapper] = React.useState();
+    const { slideRect } = useController();
+    const { imageRect, maxZoom } = useZoomImageRect(slideRect, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.imageDimensions);
+    const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    useZoomCallback(zoom, disabled);
+    useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut]);
+    React.useImperativeHandle(useZoomProps().ref, () => zoomRef, [zoomRef]);
+    const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
+    return React.createElement(ZoomControllerContext.Provider, { value: context }, children);
+}

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

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

package/dist/plugins/zoom/ZoomToolbarControl.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { useLightboxProps } from "../../core/index.js";
+import ZoomButtonsGroup from "./ZoomButtonsGroup.js";
+import { useZoom } from "./ZoomController.js";
+export function ZoomToolbarControl() {
+    const { render } = useLightboxProps();
+    const zoomRef = useZoom();
+    if (render.buttonZoom) {
+        return React.createElement(React.Fragment, null, render.buttonZoom(zoomRef));
+    }
+    return React.createElement(ZoomButtonsGroup, null);
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LightboxProps, RenderSlideProps } from "../../types.js";
+export type ZoomWrapperProps = Pick<LightboxProps, "render"> & RenderSlideProps;
+/** Zoom wrapper */
+export declare function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps): JSX.Element | null;

package/dist/plugins/zoom/ZoomWrapper.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, clsx, cssClass, ImageSlide, isImageSlide, useLayoutEffect, useLightboxProps, useLightboxState, } from "../../core/index.js";
+import { useZoom } from "./ZoomController.js";
+import { isResponsiveImageSlide, ResponsiveImage } from "./ResponsiveImage.js";
+export function ZoomWrapper({ render, slide, offset, rect }) {
+    var _a;
+    const [imageDimensions, setImageDimensions] = React.useState();
+    const zoomWrapperRef = React.useRef(null);
+    const { zoom, maxZoom, offsetX, offsetY, setZoomWrapper } = useZoom();
+    const { carousel, on } = useLightboxProps();
+    const { currentIndex } = useLightboxState().state;
+    useLayoutEffect(() => {
+        if (offset === 0) {
+            setZoomWrapper({ zoomWrapperRef, imageDimensions });
+            return () => setZoomWrapper(undefined);
+        }
+        return () => { };
+    }, [offset, imageDimensions, setZoomWrapper]);
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, { slide, offset, rect, zoom, maxZoom });
+    if (!rendered && isImageSlide(slide)) {
+        const slideProps = {
+            slide,
+            offset,
+            rect,
+            render,
+            imageFit: carousel.imageFit,
+            onClick: offset === 0 ? () => { var _a; return (_a = on.click) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex }); } : undefined,
+        };
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { key: slide.src, ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { key: slide.src, onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+    }
+    if (!rendered)
+        return null;
+    return (React.createElement("div", { ref: zoomWrapperRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), style: offset === 0
+            ? { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` }
+            : undefined }, rendered));
+}

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

@@ -0,0 +1,6 @@
+export * from "./useZoomAnimation.js";
+export * from "./useZoomCallback.js";
+export * from "./useZoomImageRect.js";
+export * from "./useZoomProps.js";
+export * from "./useZoomSensors.js";
+export * from "./useZoomState.js";

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

@@ -0,0 +1,6 @@
+export * from "./useZoomAnimation.js";
+export * from "./useZoomCallback.js";
+export * from "./useZoomImageRect.js";
+export * from "./useZoomProps.js";
+export * from "./useZoomSensors.js";
+export * from "./useZoomState.js";

package/dist/plugins/zoom/hooks/useZoomAnimation.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function useZoomAnimation(zoom: number, offsetX: number, offsetY: number, zoomWrapperRef?: React.RefObject<HTMLDivElement>): () => void;

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useEventCallback, useLayoutEffect, useLightboxProps, useMotionPreference } from "../../../core/index.js";
+export function useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef) {
+    const zoomAnimation = React.useRef();
+    const zoomAnimationStart = React.useRef();
+    const { zoom: zoomAnimationDuration } = useLightboxProps().animation;
+    const reduceMotion = useMotionPreference();
+    const playZoomAnimation = useEventCallback(() => {
+        var _a, _b, _c;
+        (_a = zoomAnimation.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        zoomAnimation.current = undefined;
+        if (zoomAnimationStart.current && (zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current)) {
+            try {
+                zoomAnimation.current = (_c = (_b = zoomWrapperRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, [
+                    { transform: zoomAnimationStart.current },
+                    { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` },
+                ], {
+                    duration: !reduceMotion ? zoomAnimationDuration !== null && zoomAnimationDuration !== void 0 ? zoomAnimationDuration : 500 : 0,
+                    easing: zoomAnimation.current ? "ease-out" : "ease-in-out",
+                });
+            }
+            catch (err) {
+                console.error(err);
+            }
+            zoomAnimationStart.current = undefined;
+            if (zoomAnimation.current) {
+                zoomAnimation.current.onfinish = () => {
+                    zoomAnimation.current = undefined;
+                };
+            }
+        }
+    });
+    useLayoutEffect(playZoomAnimation, [zoom, offsetX, offsetY, playZoomAnimation]);
+    return React.useCallback(() => {
+        zoomAnimationStart.current = (zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current)
+            ? window.getComputedStyle(zoomWrapperRef.current).transform
+            : undefined;
+    }, [zoomWrapperRef]);
+}

package/dist/plugins/zoom/hooks/useZoomCallback.d.ts

@@ -0,0 +1 @@
+export declare function useZoomCallback(zoom: number, disabled: boolean): void;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { useEventCallback, useLightboxProps } from "../../../core/index.js";
+export function useZoomCallback(zoom, disabled) {
+    const { on } = useLightboxProps();
+    const onZoomCallback = useEventCallback(() => {
+        var _a;
+        if (!disabled) {
+            (_a = on.zoom) === null || _a === void 0 ? void 0 : _a.call(on, { zoom });
+        }
+    });
+    React.useEffect(onZoomCallback, [zoom, onZoomCallback]);
+}

package/dist/plugins/zoom/hooks/useZoomImageRect.d.ts

@@ -0,0 +1,5 @@
+import { ContainerRect } from "../../../types.js";
+export declare function useZoomImageRect(slideRect: ContainerRect, imageDimensions?: ContainerRect): {
+    imageRect: ContainerRect;
+    maxZoom: number;
+};

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

@@ -0,0 +1,41 @@
+import { isImageFitCover, isImageSlide, round, useLightboxProps, useLightboxState } from "../../../core/index.js";
+import { useZoomProps } from "./useZoomProps.js";
+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 { imageFit } = useLightboxProps().carousel;
+    const { maxZoomPixelRatio } = useZoomProps();
+    if (slideRect && currentIndex < slides.length) {
+        const slide = { ...slides[currentIndex], ...imageDimensions };
+        if (isImageSlide(slide)) {
+            const cover = isImageFitCover(slide, imageFit);
+            const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
+            const height = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height)) || []).concat(slide.height ? [slide.height] : []));
+            if (width > 0 && height > 0 && slideRect.width > 0 && slideRect.height > 0) {
+                maxImageRect = cover
+                    ? {
+                        width: Math.round(Math.min(width, (slideRect.width / slideRect.height) * height)),
+                        height: Math.round(Math.min(height, (slideRect.height / slideRect.width) * width)),
+                    }
+                    : { width, height };
+                maxImageRect = {
+                    width: maxImageRect.width * maxZoomPixelRatio,
+                    height: maxImageRect.height * maxZoomPixelRatio,
+                };
+                imageRect = cover
+                    ? {
+                        width: Math.min(slideRect.width, maxImageRect.width, width),
+                        height: Math.min(slideRect.height, maxImageRect.height, height),
+                    }
+                    : {
+                        width: Math.round(Math.min(slideRect.width, (slideRect.height / height) * width, width)),
+                        height: Math.round(Math.min(slideRect.height, (slideRect.width / width) * height, height)),
+                    };
+            }
+        }
+    }
+    const maxZoom = imageRect.width ? Math.max(round(maxImageRect.width / imageRect.width, 5), 1) : 1;
+    return { imageRect, maxZoom };
+}

package/dist/plugins/zoom/hooks/useZoomProps.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare function useZoomProps(): {
+    ref?: import("react").ForwardedRef<import("../../../types.js").ZoomRef> | undefined;
+    maxZoomPixelRatio: number;
+    zoomInMultiplier: number;
+    doubleTapDelay: number;
+    doubleClickDelay: number;
+    doubleClickMaxStops: number;
+    keyboardMoveDistance: number;
+    wheelZoomDistanceFactor: number;
+    pinchZoomDistanceFactor: number;
+    scrollToZoom: boolean;
+};

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

@@ -0,0 +1,6 @@
+import { useLightboxProps } from "../../../core/index.js";
+import { resolveZoomProps } from "../props.js";
+export function useZoomProps() {
+    const { zoom } = useLightboxProps();
+    return resolveZoomProps(zoom);
+}

package/dist/plugins/zoom/hooks/useZoomSensors.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { useZoomState } from "./useZoomState.js";
+export declare function useZoomSensors(zoom: number, maxZoom: number, disabled: boolean, changeZoom: ReturnType<typeof useZoomState>["changeZoom"], changeOffsets: ReturnType<typeof useZoomState>["changeOffsets"], zoomWrapperRef?: React.RefObject<HTMLDivElement>): void;

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

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { cleanup, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, useController, useEventCallback, useLightboxState, } from "../../../core/index.js";
+import { useZoomProps } from "./useZoomProps.js";
+function distance(pointerA, pointerB) {
+    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+}
+export function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
+    const activePointers = React.useRef([]);
+    const lastPointerDown = React.useRef(0);
+    const pinchZoomDistance = React.useRef();
+    const { globalIndex } = useLightboxState().state;
+    const { containerRef, subscribeSensors } = useController();
+    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
+    const translateCoordinates = React.useCallback((event) => {
+        if (containerRef.current) {
+            const { pageX, pageY } = event;
+            const { scrollX, scrollY } = window;
+            const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
+        }
+        return [];
+    }, [containerRef]);
+    const onKeyDown = useEventCallback((event) => {
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
+                preventDefault();
+                changeOffsets(deltaX, deltaY);
+            };
+            if (event.key === "ArrowDown") {
+                move(0, keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowUp") {
+                move(0, -keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowLeft") {
+                move(-keyboardMoveDistance, 0);
+            }
+            else if (event.key === "ArrowRight") {
+                move(keyboardMoveDistance, 0);
+            }
+        }
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
+        }
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
+        }
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
+        }
+    });
+    const onWheel = useEventCallback((event) => {
+        if (event.ctrlKey || scrollToZoom) {
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                event.stopPropagation();
+                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                return;
+            }
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (!scrollToZoom) {
+                changeOffsets(event.deltaX, event.deltaY);
+            }
+        }
+    });
+    const clearPointer = React.useCallback((event) => {
+        const pointers = activePointers.current;
+        pointers.splice(0, pointers.length, ...pointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const replacePointer = React.useCallback((event) => {
+        clearPointer(event);
+        event.persist();
+        activePointers.current.push(event);
+    }, [clearPointer]);
+    const onPointerDown = useEventCallback((event) => {
+        var _a;
+        const pointers = activePointers.current;
+        if (!((_a = zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+        }
+        const { timeStamp } = event;
+        if (pointers.length === 0 &&
+            timeStamp - lastPointerDown.current < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
+            lastPointerDown.current = 0;
+            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+        }
+        else {
+            lastPointerDown.current = timeStamp;
+        }
+        replacePointer(event);
+        if (pointers.length === 2) {
+            pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+        }
+    });
+    const onPointerMove = useEventCallback((event) => {
+        const pointers = activePointers.current;
+        const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
+        if (pointers.length === 2 && pinchZoomDistance.current) {
+            event.stopPropagation();
+            replacePointer(event);
+            const currentDistance = distance(pointers[0], pointers[1]);
+            const delta = currentDistance - pinchZoomDistance.current;
+            if (Math.abs(delta) > 0) {
+                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...pointers
+                    .map((x) => translateCoordinates(x))
+                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+                pinchZoomDistance.current = currentDistance;
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (activePointer) {
+                if (pointers.length === 1) {
+                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
+                }
+                replacePointer(event);
+            }
+        }
+    });
+    const onPointerUp = React.useCallback((event) => {
+        const pointers = activePointers.current;
+        if (pointers.length === 2 && pointers.find((p) => p.pointerId === event.pointerId)) {
+            pinchZoomDistance.current = undefined;
+        }
+        clearPointer(event);
+    }, [clearPointer]);
+    const cleanupSensors = React.useCallback(() => {
+        const pointers = activePointers.current;
+        pointers.splice(0, pointers.length);
+        lastPointerDown.current = 0;
+        pinchZoomDistance.current = undefined;
+    }, []);
+    React.useEffect(cleanupSensors, [globalIndex, cleanupSensors]);
+    React.useEffect(() => {
+        if (!disabled) {
+            return cleanup(cleanupSensors, subscribeSensors(EVENT_ON_KEY_DOWN, onKeyDown), subscribeSensors(EVENT_ON_WHEEL, onWheel), subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp));
+        }
+        return () => { };
+    }, [disabled, subscribeSensors, cleanupSensors, onKeyDown, onWheel, onPointerDown, onPointerMove, onPointerUp]);
+}

package/dist/plugins/zoom/hooks/useZoomState.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ContainerRect } from "../../../types.js";
+export declare function useZoomState(imageRect: ContainerRect, maxZoom: number, zoomWrapperRef?: React.RefObject<HTMLDivElement>): {
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+    disabled: boolean;
+    changeOffsets: (dx?: number, dy?: number, targetZoom?: number) => void;
+    changeZoom: (value: number, rapid?: boolean, dx?: number, dy?: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+};

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { isImageSlide, round, useController, useEventCallback, useLayoutEffect, useLightboxState, } from "../../../core/index.js";
+import { useZoomProps } from "./useZoomProps.js";
+import { useZoomAnimation } from "./useZoomAnimation.js";
+function getCurrentSource(slides, currentIndex) {
+    if (currentIndex < slides.length) {
+        const slide = slides[currentIndex];
+        if (isImageSlide(slide))
+            return slide.src;
+    }
+    return undefined;
+}
+export function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
+    const [zoom, setZoom] = React.useState(1);
+    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 { containerRect, slideRect } = useController();
+    const { zoomInMultiplier } = useZoomProps();
+    const currentSource = getCurrentSource(slides, currentIndex);
+    const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
+    useLayoutEffect(() => {
+        setZoom(1);
+        setOffsetX(0);
+        setOffsetY(0);
+    }, [globalIndex, currentSource]);
+    const changeOffsets = React.useCallback((dx, dy, targetZoom) => {
+        const newZoom = targetZoom || zoom;
+        const newOffsetX = offsetX - (dx || 0);
+        const newOffsetY = offsetY - (dy || 0);
+        const maxOffsetX = (imageRect.width * newZoom - slideRect.width) / 2 / newZoom;
+        const maxOffsetY = (imageRect.height * newZoom - slideRect.height) / 2 / newZoom;
+        setOffsetX(Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX));
+        setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
+    }, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            animate();
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setZoom(newZoom);
+    }, [zoom, maxZoom, changeOffsets, animate]);
+    const handleControllerRectChange = useEventCallback(() => {
+        if (zoom > 1) {
+            if (zoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
+            changeOffsets();
+        }
+    });
+    useLayoutEffect(handleControllerRectChange, [
+        containerRect.width,
+        containerRect.height,
+        handleControllerRectChange,
+    ]);
+    const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
+    const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
+    return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
+}

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

@@ -1,11 +1,11 @@
-import * as React from "react";
+/// <reference types="react" />
 import { Zoom } from "./Zoom.js";
-export declare const ACTION_ZOOM_IN = "zoom-in";
-export declare const ACTION_ZOOM_OUT = "zoom-out";
-declare module "../../types" {
+declare module "../../types.js" {
     interface LightboxProps {
         /** Zoom plugin settings */
         zoom?: {
+            /** Zoom plugin ref */
+            ref?: React.ForwardedRef<ZoomRef>;
             /** ratio of image pixels to physical pixels at maximum zoom level */
             maxZoomPixelRatio?: number;
             /** zoom-in multiplier */
@@ -30,32 +30,45 @@ declare module "../../types" {
         /** zoom animation duration */
         zoom?: number;
     }
-    /** `render.buttonZoomIn` and `render.buttonZoomOut` render function props */
-    type RenderZoomButtonProps = Pick<LightboxProps, "labels"> & {
-        ref: React.ForwardedRef<HTMLButtonElement>;
-        disabled: boolean;
-        onClick: () => void;
-        onFocus: () => void;
-        onBlur: () => void;
-    };
     interface Render {
-        /** render custom Zoom in button */
-        buttonZoomIn?: RenderFunction<RenderZoomButtonProps>;
-        /** render custom Zoom in button */
-        buttonZoomOut?: RenderFunction<RenderZoomButtonProps>;
-        /** render custom Zoom in icon */
+        /** render custom Zoom control in the toolbar */
+        buttonZoom?: RenderFunction<ZoomRef>;
+        /** render custom Zoom In icon */
         iconZoomIn?: RenderFunction;
-        /** render custom Zoom out icon */
+        /** render custom Zoom Out icon */
         iconZoomOut?: RenderFunction;
     }
+    interface RenderSlideProps {
+        /** current zoom level */
+        zoom?: number;
+        /** maximum zoom level */
+        maxZoom?: number;
+    }
     interface Callbacks {
-        zoom?: (level: number) => void;
+        /** zoom callback */
+        zoom?: Callback<ZoomCallbackProps>;
     }
-}
-declare module "../../core" {
-    interface EventTypes {
-        [ACTION_ZOOM_IN]: void;
-        [ACTION_ZOOM_OUT]: void;
+    /** Zoom callback props */
+    interface ZoomCallbackProps {
+        /** current zoom level */
+        zoom: number;
+    }
+    /** Zoom plugin ref */
+    interface ZoomRef {
+        /** current zoom level */
+        zoom: number;
+        /** maximum zoom level */
+        maxZoom: number;
+        /** horizontal offset */
+        offsetX: number;
+        /** vertical offset */
+        offsetY: number;
+        /** if `true`, zoom is unavailable for the current slide */
+        disabled: boolean;
+        /** increase zoom level using `zoomInMultiplier` */
+        zoomIn: Callback;
+        /** decrease zoom level using `zoomInMultiplier` */
+        zoomOut: Callback;
     }
 }
 export default Zoom;

package/dist/plugins/zoom/index.js

@@ -1,4 +1,2 @@
 import { Zoom } from "./Zoom.js";
-export const ACTION_ZOOM_IN = "zoom-in";
-export const ACTION_ZOOM_OUT = "zoom-out";
 export default Zoom;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { LightboxProps } 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;
+};
+export declare const resolveZoomProps: (zoom: LightboxProps["zoom"]) => {
+    ref?: import("react").ForwardedRef<import("../../types.js").ZoomRef> | undefined;
+    maxZoomPixelRatio: number;
+    zoomInMultiplier: number;
+    doubleTapDelay: number;
+    doubleClickDelay: number;
+    doubleClickMaxStops: number;
+    keyboardMoveDistance: number;
+    wheelZoomDistanceFactor: number;
+    pinchZoomDistanceFactor: number;
+    scrollToZoom: boolean;
+};

package/dist/plugins/zoom/props.js

@@ -0,0 +1,15 @@
+export const defaultZoomProps = {
+    maxZoomPixelRatio: 1,
+    zoomInMultiplier: 2,
+    doubleTapDelay: 300,
+    doubleClickDelay: 500,
+    doubleClickMaxStops: 2,
+    keyboardMoveDistance: 50,
+    wheelZoomDistanceFactor: 100,
+    pinchZoomDistanceFactor: 100,
+    scrollToZoom: false,
+};
+export const resolveZoomProps = (zoom) => ({
+    ...defaultZoomProps,
+    ...zoom,
+});

package/dist/props.d.ts

@@ -1,6 +1,2 @@
 import { LightboxProps } from "./types.js";
-export declare const AnimationDefaultProps: {
-    fade: number;
-    swipe: number;
-};
 export declare const LightboxDefaultProps: LightboxProps;

package/dist/props.js

@@ -1,8 +1,4 @@
 import { ACTION_CLOSE, IMAGE_FIT_CONTAIN } from "./core/consts.js";
-export const AnimationDefaultProps = {
-    fade: 330,
-    swipe: 500,
-};
 export const LightboxDefaultProps = {
     open: false,
     close: () => { },
@@ -12,7 +8,15 @@ export const LightboxDefaultProps = {
     plugins: [],
     toolbar: { buttons: [ACTION_CLOSE] },
     labels: {},
-    animation: AnimationDefaultProps,
+    animation: {
+        fade: 250,
+        swipe: 500,
+        easing: {
+            fade: "ease",
+            swipe: "ease-out",
+            navigation: "ease-in-out",
+        },
+    },
     carousel: {
         finite: false,
         preload: 2,
@@ -21,6 +25,7 @@ export const LightboxDefaultProps = {
         imageFit: IMAGE_FIT_CONTAIN,
     },
     controller: {
+        ref: null,
         focus: true,
         aria: false,
         touchAction: "none",