yet-another-react-lightbox 1.8.0 → 1.9.1

package/dist/plugins/Zoom.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { LightboxProps, Plugin } from "../types.js";
+/** Custom zoom button render function */
+declare type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
+    ref: React.ForwardedRef<HTMLButtonElement>;
+    disabled: boolean;
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}) => React.ReactNode;
+declare module "../types.js" {
+    interface LightboxProps {
+        /** Zoom plugin settings */
+        zoom?: {
+            /** ratio of image pixels to physical pixels at maximum zoom level */
+            maxZoomPixelRatio?: number;
+            /** zoom-in multiplier */
+            zoomInMultiplier?: number;
+            /** double-tap maximum time delay */
+            doubleTapDelay?: number;
+            /** double-click maximum time delay */
+            doubleClickDelay?: number;
+            /** maximum number of zoom-in stops via double-click or double-tap */
+            doubleClickMaxStops?: number;
+            /** keyboard move distance */
+            keyboardMoveDistance?: number;
+            /** wheel zoom distance factor */
+            wheelZoomDistanceFactor?: number;
+            /** pinch zoom distance factor */
+            pinchZoomDistanceFactor?: number;
+        };
+    }
+    interface AnimationSettings {
+        /** zoom animation duration */
+        zoom?: number;
+    }
+    interface Render {
+        /** render custom Zoom in button */
+        buttonZoomIn?: RenderZoomButton;
+        /** render custom Zoom in button */
+        buttonZoomOut?: RenderZoomButton;
+        /** render custom Zoom in icon */
+        iconZoomIn?: () => React.ReactNode;
+        /** render custom Zoom out icon */
+        iconZoomOut?: () => React.ReactNode;
+    }
+}
+export declare const ZoomModule: import("../types.js").Module;
+/** Zoom plugin */
+export declare const Zoom: Plugin;
+export default Zoom;

package/dist/plugins/Zoom.js

@@ -0,0 +1,423 @@
+import * as React from "react";
+import { adjustDevicePixelRatio, cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
+const defaultZoomProps = {
+    maxZoomPixelRatio: 1,
+    zoomInMultiplier: 2,
+    doubleTapDelay: 300,
+    doubleClickDelay: 500,
+    doubleClickMaxStops: 2,
+    keyboardMoveDistance: 50,
+    wheelZoomDistanceFactor: 100,
+    pinchZoomDistanceFactor: 100,
+};
+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" }));
+const ZoomContext = React.createContext(null);
+const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
+const ZoomContextProvider = ({ children }) => {
+    const [minZoom, setMinZoom] = React.useState(false);
+    const [maxZoom, setMaxZoom] = React.useState(false);
+    const [zoomSupported, setZoomSupported] = React.useState(false);
+    const context = React.useMemo(() => ({
+        minZoom,
+        maxZoom,
+        zoomSupported,
+        setMinZoom,
+        setMaxZoom,
+        setZoomSupported,
+    }), [minZoom, maxZoom, zoomSupported]);
+    return React.createElement(ZoomContext.Provider, { value: context }, children);
+};
+const ZoomButton = React.forwardRef(({ labels, render, zoomIn, onLoseFocus }, ref) => {
+    const wasEnabled = React.useRef(false);
+    const wasFocused = React.useRef(false);
+    const { zoomSupported, minZoom, maxZoom } = useZoom();
+    const { publish } = useEvents();
+    const disabled = !zoomSupported || (zoomIn ? maxZoom : minZoom);
+    const onClick = () => publish(zoomIn ? "zoom-in" : "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";
+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: "zoomIn", zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
+        React.createElement(ZoomButton, { ref: zoomOutRef, key: "zoomOut", labels: labels, render: render, onLoseFocus: focusZoomIn })));
+};
+const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+    var _a, _b, _c;
+    let slideRect = { width: 0, height: 0 };
+    let maxSlideRect = { width: 0, height: 0 };
+    if (rect && !("type" in slide) && "src" in slide) {
+        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(...((_c = (_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height).filter((x) => Boolean(x))) !== null && _c !== void 0 ? _c : (slide.aspectRatio ? [width / slide.aspectRatio] : [])).concat(slide.height ? [slide.height] : []));
+        if (width > 0 && height > 0 && rect.width > 0 && rect.height > 0) {
+            maxSlideRect = cover
+                ? {
+                    width: Math.round(Math.min(width, (rect.width / rect.height) * height)),
+                    height: Math.round(Math.min(height, (rect.height / rect.width) * width)),
+                }
+                : { width, height };
+            maxSlideRect = {
+                width: adjustDevicePixelRatio(maxSlideRect.width) * maxZoomPixelRatio,
+                height: adjustDevicePixelRatio(maxSlideRect.height) * maxZoomPixelRatio,
+            };
+            slideRect = cover
+                ? {
+                    width: Math.min(rect.width, maxSlideRect.width),
+                    height: Math.min(rect.height, maxSlideRect.height),
+                }
+                : {
+                    width: Math.round(Math.min(rect.width, (rect.height / height) * width)),
+                    height: Math.round(Math.min(rect.height, (rect.width / width) * height)),
+                };
+        }
+    }
+    return { slideRect, maxSlideRect };
+};
+const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps }) => {
+    var _a;
+    const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
+    const { setMinZoom: currentSetMinZoom, setMaxZoom: currentSetMaxZoom } = useZoom();
+    const { setContainerRef, containerRef: currentContainerRef, containerRect: currentContainerRect, } = useContainerRect();
+    const { subscribeSensors, containerRef: currentControllerRef, containerRect: currentControllerRect, } = useController();
+    const { subscribe } = useEvents();
+    const currentReduceMotion = useMotionPreference();
+    const { slideRect: currentSlideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, currentContainerRect);
+    const currentMaxZoom = currentSlideRect.width ? round(currentMaxSlideRect.width / currentSlideRect.width, 3) : 1;
+    const [state, setState] = React.useState({ zoom: 1, offsetX: 0, offsetY: 0 });
+    const refs = React.useRef({
+        state,
+        slideRect: currentSlideRect,
+        containerRef: currentContainerRef,
+        controllerRef: currentControllerRef,
+        containerRect: currentContainerRect,
+        controllerRect: currentControllerRect,
+        maxZoom: currentMaxZoom,
+        reduceMotion: currentReduceMotion,
+        setMinZoom: currentSetMinZoom,
+        setMaxZoom: currentSetMaxZoom,
+        activePointers: [],
+        lastPointerDown: 0,
+        zoomProps,
+    });
+    refs.current.state = state;
+    refs.current.slideRect = currentSlideRect;
+    refs.current.containerRef = currentContainerRef;
+    refs.current.controllerRef = currentControllerRef;
+    refs.current.containerRect = currentContainerRect;
+    refs.current.controllerRect = currentControllerRect;
+    refs.current.maxZoom = currentMaxZoom;
+    refs.current.reduceMotion = currentReduceMotion;
+    refs.current.setMinZoom = currentSetMinZoom;
+    refs.current.setMaxZoom = currentSetMaxZoom;
+    refs.current.zoomAnimationDuration = animation.zoom;
+    refs.current.zoomProps = zoomProps;
+    const changeOffsets = React.useCallback((dx, dy, newZoom) => {
+        const { state: { zoom, offsetX, offsetY }, containerRect, slideRect, } = refs.current;
+        const targetZoom = newZoom || zoom;
+        const newOffsetX = offsetX - (dx || 0);
+        const newOffsetY = offsetY - (dy || 0);
+        const maxOffsetX = containerRect ? (slideRect.width * targetZoom - containerRect.width) / 2 / targetZoom : 0;
+        const maxOffsetY = containerRect ? (slideRect.height * targetZoom - containerRect.height) / 2 / targetZoom : 0;
+        setState((prev) => ({
+            ...prev,
+            offsetX: Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX),
+            offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
+        }));
+    }, []);
+    useEnhancedEffect(() => {
+        if (refs.current.state.zoom > 1) {
+            changeOffsets();
+        }
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    useEnhancedEffect(() => {
+        var _a, _b;
+        const { current } = refs;
+        const { zoomAnimation, zoomAnimationStart, zoomAnimationDuration, reduceMotion, containerRef } = current;
+        zoomAnimation === null || zoomAnimation === void 0 ? void 0 : zoomAnimation.cancel();
+        if (zoomAnimationStart && containerRef.current) {
+            current.zoomAnimation = (_b = (_a = containerRef.current).animate) === null || _b === void 0 ? void 0 : _b.call(_a, [
+                { transform: zoomAnimationStart },
+                {
+                    transform: `scale(${state.zoom}) translate3d(${state.offsetX}px, ${state.offsetY}px, 0)`,
+                },
+            ], {
+                duration: reduceMotion ? 0 : zoomAnimationDuration !== null && zoomAnimationDuration !== void 0 ? zoomAnimationDuration : 500,
+                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+            });
+            current.zoomAnimationStart = undefined;
+            if (current.zoomAnimation) {
+                current.zoomAnimation.onfinish = () => {
+                    current.zoomAnimation = undefined;
+                };
+            }
+        }
+    }, [state.zoom, state.offsetX, state.offsetY]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom, maxZoom } = refs.current;
+            setMinZoom(state.zoom <= 1);
+            setMaxZoom(state.zoom >= maxZoom);
+        }
+    }, [offset, state.zoom]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom } = refs.current;
+            const resetZoom = () => {
+                setState({ zoom: 1, offsetX: 0, offsetY: 0 });
+                setMinZoom(true);
+                setMaxZoom(false);
+            };
+            resetZoom();
+            return () => {
+                resetZoom();
+            };
+        }
+        return () => { };
+    }, [offset]);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
+    const translateCoordinates = React.useCallback((event) => {
+        const { controllerRef } = refs.current;
+        if (controllerRef.current) {
+            const { pageX, pageY } = event;
+            const { scrollX, scrollY } = window;
+            const { left, top, width, height } = controllerRef.current.getBoundingClientRect();
+            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
+        }
+        return [];
+    }, []);
+    const onKeyDown = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
+                event.stopPropagation();
+                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);
+            }
+        }
+        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
+            changeZoom(zoom * zoomInMultiplier);
+        }
+        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
+            changeZoom(zoom / zoomInMultiplier);
+        }
+        else if (event.key === "0" && event.metaKey) {
+            changeZoom(1);
+        }
+    }, [changeZoom, changeOffsets]);
+    const onWheel = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
+        if (event.ctrlKey) {
+            event.stopPropagation();
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            changeOffsets(event.deltaX, event.deltaY);
+        }
+    }, [changeZoom, changeOffsets, translateCoordinates]);
+    const clearPointer = React.useCallback((event) => {
+        const { activePointers } = refs.current;
+        activePointers.splice(0, activePointers.length, ...activePointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const replacePointer = React.useCallback((event) => {
+        clearPointer(event);
+        refs.current.activePointers.push(event);
+    }, [clearPointer]);
+    const onPointerDown = React.useCallback((event) => {
+        var _a;
+        const { current } = refs;
+        const { state: { zoom }, containerRef, activePointers, lastPointerDown, maxZoom, zoomProps: { doubleTapDelay, doubleClickDelay, zoomInMultiplier, doubleClickMaxStops }, } = current;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+        }
+        const { timeStamp } = event;
+        if (activePointers.length === 0 &&
+            timeStamp - lastPointerDown < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
+            current.lastPointerDown = 0;
+            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+        }
+        else {
+            current.lastPointerDown = timeStamp;
+        }
+        replacePointer(event);
+        if (activePointers.length === 2) {
+            current.pinchZoomDistance = distance(activePointers[0], activePointers[1]);
+        }
+    }, [changeZoom, replacePointer, translateCoordinates]);
+    const onPointerMove = React.useCallback((event) => {
+        const { current } = refs;
+        const { state: { zoom }, activePointers, pinchZoomDistance, zoomProps: { pinchZoomDistanceFactor }, } = current;
+        const activePointer = activePointers.find((p) => p.pointerId === event.pointerId);
+        if (activePointers.length === 2 && pinchZoomDistance) {
+            event.stopPropagation();
+            replacePointer(event);
+            const currentDistance = distance(activePointers[0], activePointers[1]);
+            const delta = currentDistance - pinchZoomDistance;
+            if (Math.abs(delta) > 0) {
+                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...activePointers
+                    .map((x) => translateCoordinates(x))
+                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+                current.pinchZoomDistance = currentDistance;
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (activePointer) {
+                if (activePointers.length === 1) {
+                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
+                }
+                replacePointer(event);
+            }
+        }
+    }, [changeOffsets, replacePointer, changeZoom, translateCoordinates]);
+    const onPointerUp = React.useCallback((event) => {
+        const { current } = refs;
+        const { activePointers } = current;
+        if (activePointers.length === 2 && activePointers.find((p) => p.pointerId === event.pointerId)) {
+            current.pinchZoomDistance = undefined;
+        }
+        clearPointer(event);
+    }, [clearPointer]);
+    React.useEffect(() => offset === 0
+        ? cleanup(subscribe("zoom-in", () => changeZoom(refs.current.state.zoom * refs.current.zoomProps.zoomInMultiplier)), subscribe("zoom-out", () => changeZoom(refs.current.state.zoom / refs.current.zoomProps.zoomInMultiplier)), subscribeSensors("onKeyDown", onKeyDown), subscribeSensors("onWheel", onWheel), subscribeSensors("onPointerDown", onPointerDown), subscribeSensors("onPointerMove", onPointerMove), subscribeSensors("onPointerUp", onPointerUp), subscribeSensors("onPointerLeave", onPointerUp), subscribeSensors("onPointerCancel", onPointerUp))
+        : () => { }, [offset, subscribe, subscribeSensors, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onWheel, changeZoom]);
+    const { state: { zoom, offsetX, offsetY }, } = refs.current;
+    const scaledRect = offset === 0
+        ? {
+            width: rect.width * zoom,
+            height: rect.height * zoom,
+        }
+        : rect;
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    if (!rendered && !("type" in slide) && "src" in slide) {
+        rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, rect: scaledRect, render: render, imageFit: carousel.imageFit }));
+    }
+    return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("fullsize"), cssClass("flex_center")), ...(offset === 0
+            ? { style: { transform: `scale(${zoom}) translate3d(${offsetX}px, ${offsetY}px, 0)` } }
+            : null) }, rendered)) : null;
+};
+const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
+    var _a;
+    const { setZoomSupported } = useZoom();
+    const imageSlide = !("type" in slide);
+    const zoomSupported = imageSlide && ("srcSet" in slide || ("width" in slide && "height" in slide));
+    React.useEffect(() => {
+        if (offset === 0) {
+            setZoomSupported(zoomSupported);
+        }
+    }, [offset, zoomSupported, setZoomSupported]);
+    if (zoomSupported) {
+        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation }));
+    }
+    const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+    if (rendered) {
+        return React.createElement(React.Fragment, null, rendered);
+    }
+    if (imageSlide) {
+        return React.createElement(ImageSlide, { slide: slide, offset: offset, rect: rect, render: render, imageFit: carousel.imageFit });
+    }
+    return null;
+};
+export const ZoomModule = createModule("zoom", ZoomContextProvider);
+export const Zoom = ({ augment, append }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(ZoomButtonsGroup, { key: "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: {
+            ...defaultZoomProps,
+            ...zoom,
+        },
+        carousel,
+        animation,
+        ...restProps,
+    }));
+    append("controller", ZoomModule);
+};
+export default Zoom;

package/dist/plugins/captions.css

@@ -22,7 +22,6 @@
   font-weight: 500;
   overflow: hidden;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;

package/dist/plugins/index.d.ts

@@ -4,3 +4,4 @@ export * from "./Inline.js";
 export * from "./Slideshow.js";
 export * from "./Thumbnails.js";
 export * from "./Video.js";
+export * from "./Zoom.js";

package/dist/plugins/index.js

@@ -4,3 +4,4 @@ export * from "./Inline.js";
 export * from "./Slideshow.js";
 export * from "./Thumbnails.js";
 export * from "./Video.js";
+export * from "./Zoom.js";

package/dist/plugins/thumbnails.css

@@ -26,7 +26,6 @@
   z-index: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
 }

package/dist/styles.css

@@ -16,7 +16,6 @@
 .yarl__container {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   touch-action: var(--yarl__controller_touch_action, none);
 }
@@ -61,7 +60,6 @@
   -o-object-fit: contain;
      object-fit: contain;
   -moz-user-select: none;
-   -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -144,7 +142,6 @@
   display: flex;
   justify-content: flex-end;
   padding: 8px;
-  gap: 8px;
 }
 [dir=rtl] .yarl__toolbar {
   inset: 0 auto auto 0;
@@ -215,6 +212,7 @@
 .yarl__no_scroll {
   height: 100%;
   overflow: hidden;
+  overscroll-behavior: none;
 }
 .yarl__pad_scrollbar {
   padding-right: var(--yarl__scrollbar_padding, 17px);

package/dist/types.d.ts

@@ -8,8 +8,12 @@ export interface SlideImage {
     src?: string;
     /** image 'alt' attribute */
     alt?: string;
-    /** image aspect ratio */
+    /** @deprecated use `width` and `height` instead */
     aspectRatio?: number;
+    /** image width in pixels */
+    width?: number;
+    /** image height in pixels */
+    height?: number;
     /** `object-fit` setting */
     imageFit?: ImageFit;
     /** alternative images to be passed to the 'srcSet' */
@@ -18,6 +22,8 @@ export interface SlideImage {
         src: string;
         /** image width in pixels */
         width: number;
+        /** image height in pixels */
+        height?: number;
     }[];
 }
 /** Supported slide types */
@@ -198,5 +204,9 @@ export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove
 export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
     [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
 };
+/** Deep non-nullable utility type */
+export declare type DeepNonNullable<T> = NonNullable<{
+    [K in keyof T]-?: NonNullable<T[K]>;
+}>;
 /** Lightbox external props */
 export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "controller" | "on">;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.8.0",
+    "version": "1.9.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -18,6 +18,7 @@
         "./plugins/thumbnails": "./dist/plugins/Thumbnails.js",
         "./plugins/thumbnails.css": "./dist/plugins/thumbnails.css",
         "./plugins/video": "./dist/plugins/Video.js",
+        "./plugins/zoom": "./dist/plugins/Zoom.js",
         "./styles.css": "./dist/styles.css"
     },
     "types": "dist/index.d.ts",
@@ -49,6 +50,9 @@
             ],
             "plugins/video": [
                 "dist/plugins/Video.d.ts"
+            ],
+            "plugins/zoom": [
+                "dist/plugins/Zoom.d.ts"
             ]
         }
     },
@@ -84,32 +88,32 @@
         "react-dom": ">=16.8.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^17.0.2",
-        "@commitlint/config-conventional": "^17.0.2",
+        "@commitlint/cli": "^17.0.3",
+        "@commitlint/config-conventional": "^17.0.3",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/github": "^8.0.4",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.1",
-        "@types/jest": "^28.1.2",
+        "@types/jest": "^28.1.3",
         "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
-        "@typescript-eslint/eslint-plugin": "^5.28.0",
-        "@typescript-eslint/parser": "^5.28.0",
+        "@typescript-eslint/eslint-plugin": "^5.30.0",
+        "@typescript-eslint/parser": "^5.30.0",
         "autoprefixer": "^10.4.7",
         "eslint": "^8.18.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.30.0",
+        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-prettier": "^4.1.0",
+        "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
-        "jest": "^28.1.1",
-        "jest-environment-jsdom": "^28.1.1",
-        "lint-staged": "^13.0.2",
+        "jest": "^28.1.2",
+        "jest-environment-jsdom": "^28.1.2",
+        "lint-staged": "^13.0.3",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
@@ -117,7 +121,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.3",
+        "sass": "^1.53.0",
         "ts-jest": "^28.0.5",
         "typescript": "^4.7.4"
     },