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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ImageFit, Render, SlideImage } from "../../types.js";
 import { ContainerRect } from "../hooks/index.js";
 export declare type ImageSlideProps = {
@@ -8,5 +8,7 @@ export declare type ImageSlideProps = {
     rect?: ContainerRect;
     imageFit?: ImageFit;
     onClick?: () => void;
+    onLoad?: (image: HTMLImageElement) => void;
+    style?: React.CSSProperties;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -6,7 +6,7 @@ import { ErrorIcon, LoadingIcon } from "./Icons.js";
 import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick }) => {
+export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
@@ -27,6 +27,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
                 return;
             }
             setStatus(SLIDE_STATUS_COMPLETE);
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(img);
         });
     });
     const setImageRef = React.useCallback((img) => {
@@ -35,7 +36,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
             handleLoading(img);
         }
     }, [handleLoading]);
-    const onLoad = React.useCallback((event) => {
+    const handleOnLoad = React.useCallback((event) => {
         handleLoading(event.currentTarget);
     }, [handleLoading]);
     const onError = React.useCallback(() => {
@@ -45,7 +46,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
     const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
-    const style = maxWidth && maxHeight
+    const defaultStyle = maxWidth && maxHeight
         ? {
             maxWidth: `min(${maxWidth}px, 100%)`,
             maxHeight: `min(${maxHeight}px, 100%)`,
@@ -58,7 +59,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     const estimateActualWidth = () => rect && !cover && image.width && image.height ? (rect.height / image.height) * image.width : Number.MAX_VALUE;
     const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: onError, onClick: onClick, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))), draggable: false, alt: image.alt, style: { ...defaultStyle, ...style }, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),

package/dist/core/modules/Controller.js

@@ -12,7 +12,7 @@ export const Controller = ({ children, ...props }) => {
     const { carousel, slides, animation, controller, on, styles } = props;
     const { state, dispatch } = useLightboxState();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
-    const [swipeOffset, setSwipeOffset] = React.useState(0);
+    const swipeOffset = React.useRef(0);
     const swipeAnimationReset = React.useRef();
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
@@ -29,6 +29,11 @@ export const Controller = ({ children, ...props }) => {
     const isSwipeValid = useEventCallback((offset) => !(carousel.finite &&
         ((rtl(offset) > 0 && state.currentIndex === 0) ||
             (rtl(offset) < 0 && state.currentIndex === slides.length - 1))));
+    const setSwipeOffset = React.useCallback((offset) => {
+        var _a;
+        swipeOffset.current = offset;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
+    }, [containerRef]);
     const swipe = useEventCallback((action) => {
         var _a;
         const swipeDuration = animation.swipe;
@@ -79,6 +84,12 @@ export const Controller = ({ children, ...props }) => {
                 newSwipeAnimationDuration = swipeDuration;
             }
         }
+        if (carouselRef.current) {
+            carouselSwipeAnimation.current = {
+                rect: carouselRef.current.getBoundingClientRect(),
+                index: state.globalIndex,
+            };
+        }
         newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
         clearTimeout(swipeAnimationReset.current);
         if (newSwipeState) {
@@ -90,12 +101,6 @@ export const Controller = ({ children, ...props }) => {
             }, newSwipeAnimationDuration);
             swipeAnimationReset.current = timeoutId;
         }
-        if (carouselRef.current) {
-            carouselSwipeAnimation.current = {
-                rect: carouselRef.current.getBoundingClientRect(),
-                index: state.globalIndex,
-            };
-        }
         setSwipeState(newSwipeState);
         dispatch({ increment, animationDuration: newSwipeAnimationDuration });
     });
@@ -125,22 +130,17 @@ export const Controller = ({ children, ...props }) => {
     });
     useLayoutEffect(animateCarouselSwipe);
     const swipeParams = [
-        swipeState,
         subscribeSensors,
         isSwipeValid,
         (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
         animation.swipe,
         () => setSwipeState(SwipeState.SWIPE),
+        (offset) => setSwipeOffset(offset),
         (offset, duration) => swipe({ offset, duration, count: 1 }),
         (offset) => swipe({ offset, count: 0 }),
-        (offset) => {
-            if (swipeState === SwipeState.SWIPE) {
-                setSwipeOffset(offset);
-            }
-        },
     ];
     usePointerSwipe(...swipeParams);
-    useWheelSwipe(...swipeParams);
+    useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         var _a;
         if (controller.focus) {
@@ -180,7 +180,7 @@ export const Controller = ({ children, ...props }) => {
     }), [getLightboxProps, subscribeSensors, transferFocus, containerRect, containerRef, setCarouselRef]);
     return (React.createElement("div", { ref: handleContainerRef, className: clsx(cssClass(cssContainerPrefix()), cssClass(CLASS_FLEX_CENTER)), style: {
             ...(swipeState === SwipeState.SWIPE
-                ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset)}px` }
+                ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset.current)}px` }
                 : null),
             ...(controller.touchAction !== "none" ? {} : null),
             ...styles.container,

package/dist/core/modules/controller/usePointerSwipe.d.ts

@@ -1,3 +1,2 @@
 import { UseSensors } from "../../hooks/useSensors.js";
-import { SwipeState } from "./index.js";
-export declare const usePointerSwipe: <T extends Element = Element>(swipeState: SwipeState, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, onChange: (offset: number) => void) => void;
+export declare const usePointerSwipe: <T extends Element = Element>(subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;

package/dist/core/modules/controller/usePointerSwipe.js

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { cleanup } from "../../utils.js";
 import { useEventCallback } from "../../hooks/useEventCallback.js";
-import { SwipeState } from "./index.js";
-import { useOffset } from "./useOffset.js";
 import { EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, } from "../../consts.js";
-export const usePointerSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeFinish, onSwipeCancel, onChange) => {
-    const [offset, setOffset] = useOffset(onChange);
+export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+    const offset = React.useRef(0);
     const pointers = React.useRef([]);
     const activePointer = React.useRef();
     const startTime = React.useRef(0);
@@ -24,18 +22,18 @@ export const usePointerSwipe = (swipeState, subscribeSensors, isSwipeValid, cont
         addPointer(event);
     });
     const onPointerUp = useEventCallback((event) => {
-        if (swipeState === SwipeState.SWIPE &&
-            pointers.current.find((x) => x.pointerId === event.pointerId) &&
+        if (pointers.current.find((x) => x.pointerId === event.pointerId) &&
             activePointer.current === event.pointerId) {
             const duration = Date.now() - startTime.current;
-            if (Math.abs(offset) > 0.3 * containerWidth ||
-                (Math.abs(offset) > 5 && duration < swipeAnimationDuration)) {
-                onSwipeFinish(offset, duration);
+            const currentOffset = offset.current;
+            if (Math.abs(currentOffset) > 0.3 * containerWidth ||
+                (Math.abs(currentOffset) > 5 && duration < swipeAnimationDuration)) {
+                onSwipeFinish(currentOffset, duration);
             }
             else {
-                onSwipeCancel(offset);
+                onSwipeCancel(currentOffset);
             }
-            setOffset(0);
+            offset.current = 0;
         }
         clearPointer(event);
     });
@@ -44,16 +42,18 @@ export const usePointerSwipe = (swipeState, subscribeSensors, isSwipeValid, cont
         if (pointer) {
             const deltaX = event.clientX - pointer.clientX;
             const deltaY = event.clientY - pointer.clientY;
-            if (!swipeState) {
-                if (isSwipeValid(deltaX) && Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 30) {
-                    addPointer(event);
-                    activePointer.current = event.pointerId;
-                    startTime.current = Date.now();
-                    onSwipeStart();
-                }
+            if (!activePointer.current &&
+                isSwipeValid(deltaX) &&
+                Math.abs(deltaX) > Math.abs(deltaY) &&
+                Math.abs(deltaX) > 30) {
+                addPointer(event);
+                activePointer.current = event.pointerId;
+                startTime.current = Date.now();
+                onSwipeStart();
             }
             else if (activePointer.current === event.pointerId) {
-                setOffset(deltaX);
+                offset.current = deltaX;
+                onSwipeProgress(deltaX);
             }
         }
     });

package/dist/core/modules/controller/useWheelSwipe.d.ts

@@ -1,3 +1,3 @@
 import { UseSensors } from "../../hooks/index.js";
 import { SwipeState } from "./index.js";
-export declare const useWheelSwipe: <T extends Element = Element>(swipeState: SwipeState | undefined, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, onChange: (offset: number) => void) => void;
+export declare const useWheelSwipe: <T extends Element = Element>(swipeState: SwipeState, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;

package/dist/core/modules/controller/useWheelSwipe.js

@@ -2,33 +2,30 @@ import * as React from "react";
 import { useEventCallback } from "../../hooks/index.js";
 import { useTimeouts } from "../../contexts/index.js";
 import { SwipeState } from "./index.js";
-import { useOffset } from "./useOffset.js";
 import { EVENT_ON_WHEEL } from "../../consts.js";
-export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeFinish, onSwipeCancel, onChange) => {
-    const [offset, setOffset] = useOffset(onChange);
-    const swipeIntent = React.useRef(0);
-    const swipeIntentCleanup = React.useRef();
-    const swipeResetCleanup = React.useRef();
+export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+    const offset = React.useRef(0);
+    const intent = React.useRef(0);
+    const intentCleanup = React.useRef();
+    const resetCleanup = React.useRef();
     const wheelResidualMomentum = React.useRef(0);
     const startTime = React.useRef(0);
     const { setTimeout, clearTimeout } = useTimeouts();
     const cancelSwipeIntentCleanup = React.useCallback(() => {
-        if (swipeIntentCleanup.current) {
-            clearTimeout(swipeIntentCleanup.current);
-            swipeIntentCleanup.current = undefined;
+        if (intentCleanup.current) {
+            clearTimeout(intentCleanup.current);
+            intentCleanup.current = undefined;
         }
     }, [clearTimeout]);
     const cancelSwipeResetCleanup = React.useCallback(() => {
-        if (swipeResetCleanup.current) {
-            clearTimeout(swipeResetCleanup.current);
-            swipeResetCleanup.current = undefined;
+        if (resetCleanup.current) {
+            clearTimeout(resetCleanup.current);
+            resetCleanup.current = undefined;
         }
     }, [clearTimeout]);
     const handleCleanup = useEventCallback(() => {
         if (swipeState !== SwipeState.SWIPE) {
-            if (offset !== 0) {
-                setOffset(0);
-            }
+            offset.current = 0;
             startTime.current = 0;
             cancelSwipeIntentCleanup();
             cancelSwipeResetCleanup();
@@ -36,9 +33,9 @@ export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, contai
     });
     React.useEffect(handleCleanup, [swipeState, handleCleanup]);
     const handleCancelSwipe = useEventCallback((currentSwipeOffset) => {
-        swipeResetCleanup.current = undefined;
-        if (swipeState === SwipeState.SWIPE && offset === currentSwipeOffset) {
-            onSwipeCancel(offset);
+        resetCleanup.current = undefined;
+        if (offset.current === currentSwipeOffset) {
+            onSwipeCancel(offset.current);
         }
     });
     const onWheel = useEventCallback((event) => {
@@ -56,35 +53,36 @@ export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, contai
             if (!isSwipeValid(-event.deltaX)) {
                 return;
             }
-            swipeIntent.current += event.deltaX;
+            intent.current += event.deltaX;
             cancelSwipeIntentCleanup();
-            if (Math.abs(swipeIntent.current) > 30) {
-                swipeIntent.current = 0;
+            if (Math.abs(intent.current) > 30) {
+                intent.current = 0;
                 wheelResidualMomentum.current = 0;
                 startTime.current = Date.now();
                 onSwipeStart();
             }
             else {
-                const currentSwipeIntent = swipeIntent.current;
-                swipeIntentCleanup.current = setTimeout(() => {
-                    swipeIntentCleanup.current = undefined;
-                    if (currentSwipeIntent === swipeIntent.current) {
-                        swipeIntent.current = 0;
+                const currentSwipeIntent = intent.current;
+                intentCleanup.current = setTimeout(() => {
+                    intentCleanup.current = undefined;
+                    if (currentSwipeIntent === intent.current) {
+                        intent.current = 0;
                     }
                 }, swipeAnimationDuration);
             }
         }
         else if (swipeState === SwipeState.SWIPE) {
-            let newSwipeOffset = offset - event.deltaX;
+            let newSwipeOffset = offset.current - event.deltaX;
             newSwipeOffset = Math.min(Math.abs(newSwipeOffset), containerWidth) * Math.sign(newSwipeOffset);
-            setOffset(newSwipeOffset);
+            offset.current = newSwipeOffset;
+            onSwipeProgress(newSwipeOffset);
             cancelSwipeResetCleanup();
             if (Math.abs(newSwipeOffset) > 0.2 * containerWidth) {
                 wheelResidualMomentum.current = event.deltaX;
                 onSwipeFinish(newSwipeOffset, Date.now() - startTime.current);
                 return;
             }
-            swipeResetCleanup.current = setTimeout(() => handleCancelSwipe(newSwipeOffset), 2 * swipeAnimationDuration);
+            resetCleanup.current = setTimeout(() => handleCancelSwipe(newSwipeOffset), 2 * swipeAnimationDuration);
         }
         else {
             wheelResidualMomentum.current = event.deltaX;

package/dist/core/utils.d.ts

@@ -20,3 +20,4 @@ export declare const parseLengthPercentage: (input: unknown) => {
     percent: number;
     pixel?: undefined;
 };
+export declare const devicePixelRatio: () => number;

package/dist/core/utils.js

@@ -36,3 +36,6 @@ export const parseLengthPercentage = (input) => {
     }
     return { pixel: 0 };
 };
+export const devicePixelRatio = () => {
+    return (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
+};

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ImageSlideProps } from "../../core/index.js";
+import { ImageSource, SlideImage } from "../../types.js";
+declare type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
+    srcSet: [ImageSource, ...ImageSource[]];
+};
+export declare const isResponsiveImageSlide: (slide: SlideImage) => slide is ResponsiveImageSlide;
+declare type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
+    slide: ResponsiveImageSlide;
+};
+export declare const ResponsiveImage: React.FC<ResponsiveImageProps>;
+export {};

package/dist/plugins/zoom/ResponsiveImage.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { devicePixelRatio, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageSlide, useEventCallback, useLayoutEffect, } from "../../core/index.js";
+export const isResponsiveImageSlide = (slide) => { var _a; return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; };
+export const ResponsiveImage = (props) => {
+    var _a, _b;
+    const [state, setState] = React.useState({});
+    const { current, preload } = state;
+    const { slide: image, rect, imageFit, render } = props;
+    const srcSet = image.srcSet.sort((a, b) => a.width - b.width);
+    const width = (_a = image.width) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1].width;
+    const height = (_b = image.height) !== null && _b !== void 0 ? _b : srcSet[srcSet.length - 1].height;
+    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const maxWidth = Math.max(...srcSet.map((x) => x.width));
+    const targetWidth = Math.min((cover ? Math.max : Math.min)(rect.width, width * (rect.height / height)), maxWidth);
+    const pixelDensity = devicePixelRatio();
+    const handleSourceChange = useEventCallback(() => {
+        var _a;
+        const targetSource = (_a = srcSet.find((x) => x.width >= targetWidth * pixelDensity)) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1];
+        if (!current) {
+            setState((prev) => ({ ...prev, current: targetSource.src }));
+        }
+        else if (srcSet.findIndex((x) => x.src === current) < srcSet.findIndex((x) => x === targetSource)) {
+            setState((prev) => ({ ...prev, preload: targetSource.src }));
+        }
+    });
+    useLayoutEffect(handleSourceChange, [rect === null || rect === void 0 ? void 0 : rect.width, rect === null || rect === void 0 ? void 0 : rect.height, pixelDensity, handleSourceChange]);
+    const handlePreload = useEventCallback((currentPreload) => {
+        if (currentPreload === preload) {
+            setState((prev) => ({ ...prev, current: preload, preload: undefined }));
+        }
+    });
+    const style = {
+        "-webkit-transform": "translateZ(0)",
+        ...(rect.width / rect.height < width / height
+            ? {
+                width: "100%",
+                height: "auto",
+            }
+            : { width: "auto", height: "100%" }),
+    };
+    return (React.createElement(React.Fragment, null,
+        preload && preload !== current && (React.createElement(ImageSlide, { key: preload, ...props, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
+                ...render,
+                iconLoading: () => null,
+                iconError: () => null,
+            } })),
+        current && (React.createElement(ImageSlide, { key: current, ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
+};

package/dist/plugins/zoom/Zoom.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { createModule, MODULE_CONTROLLER, PLUGIN_ZOOM } from "../../core/index.js";
+import { createModule, isImageSlide, MODULE_CONTROLLER, PLUGIN_ZOOM } from "../../core/index.js";
 import { ZoomContextProvider } from "./ZoomContext.js";
 import { ZoomButtonsGroup } from "./ZoomButtonsGroup.js";
-import { ZoomWrapper } from "./ZoomWrapper.js";
+import { ZoomContainer } from "./ZoomContainer.js";
 export const defaultZoomProps = {
     maxZoomPixelRatio: 1,
     zoomInMultiplier: 2,
@@ -15,14 +15,17 @@ export const defaultZoomProps = {
     scrollToZoom: false,
 };
 export const Zoom = ({ augment, append }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, on, ...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 })),
+            slide: (slide, offset, rect) => {
+                var _a;
+                return isImageSlide(slide) ? (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom, on: on })) : ((_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect));
+            },
         },
         zoom: {
             ...defaultZoomProps,
@@ -30,6 +33,7 @@ export const Zoom = ({ augment, append }) => {
         },
         carousel,
         animation,
+        on,
         ...restProps,
     }));
     append(MODULE_CONTROLLER, createModule(PLUGIN_ZOOM, ZoomContextProvider));

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

@@ -2,7 +2,7 @@ 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"> & {
+export declare const ZoomContainer: React.FC<Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
     slide: Slide;
     offset: number;
     rect: ContainerRect;

package/dist/plugins/zoom/ZoomContainer.js

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, 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, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useMotionPreference, } from "../../core/index.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, 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, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
 import { useZoom } from "./ZoomContext.js";
 import { defaultZoomProps } from "./Zoom.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
+import { isResponsiveImageSlide, ResponsiveImage } from "./ResponsiveImage.js";
 const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
     var _a, _b;
     let slideRect = { width: 0, height: 0 };
@@ -35,12 +36,14 @@ const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
     return { slideRect, maxSlideRect };
 };
 const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
-export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps }) => {
+export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on }) => {
     var _a;
     const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
+    const { state: { currentIndex }, } = useLightboxState();
     const [zoom, setZoom] = React.useState(1);
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);
+    const [imageDimensions, setImageDimensions] = React.useState();
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
     const zoomAnimation = React.useRef();
@@ -51,7 +54,7 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
     const { subscribeSensors, containerRef: controllerRef, containerRect: controllerRect } = useController();
     const { subscribe } = useEvents();
     const reduceMotion = useMotionPreference();
-    const { slideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, containerRect);
+    const { slideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, containerRect);
     const maxZoom = slideRect.width ? Math.max(round(currentMaxSlideRect.width / slideRect.width, 5), 1) : 1;
     const changeOffsets = useEventCallback((dx, dy, targetZoom) => {
         const newZoom = targetZoom || zoom;
@@ -295,7 +298,15 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
         : rect;
     let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
     if (!rendered && isImageSlide(slide)) {
-        rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, rect: scaledRect, render: render, imageFit: carousel.imageFit }));
+        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, currentIndex); } : undefined,
+        };
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
     return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), ...(offset === 0
             ? { style: { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } }

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

@@ -5,7 +5,6 @@ declare type ZoomContextType = {
     isZoomSupported: boolean;
     setIsMinZoom: (value: boolean) => void;
     setIsMaxZoom: (value: boolean) => void;
-    setIsZoomSupported: (value: boolean) => void;
 };
 export declare const useZoom: () => ZoomContextType;
 export declare const ZoomContextProvider: Component;

package/dist/plugins/zoom/ZoomContext.js

@@ -1,18 +1,20 @@
 import * as React from "react";
-import { makeUseContext } from "../../core/index.js";
+import { isImageSlide, makeUseContext, useEventCallback, useLayoutEffect, useLightboxState } from "../../core/index.js";
 const ZoomContext = React.createContext(null);
 export const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
-export const ZoomContextProvider = ({ children }) => {
+export const ZoomContextProvider = ({ slides, children }) => {
     const [isMinZoom, setIsMinZoom] = React.useState(false);
     const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     const [isZoomSupported, setIsZoomSupported] = React.useState(false);
+    const { state: { currentIndex }, } = useLightboxState();
+    const updateZoomSupported = useEventCallback(() => setIsZoomSupported(isImageSlide(slides[currentIndex])));
+    useLayoutEffect(updateZoomSupported, [currentIndex, updateZoomSupported]);
     const context = React.useMemo(() => ({
         isMinZoom,
         isMaxZoom,
         isZoomSupported,
         setIsMinZoom,
         setIsMaxZoom,
-        setIsZoomSupported,
     }), [isMinZoom, isMaxZoom, isZoomSupported]);
     return React.createElement(ZoomContext.Provider, { value: context }, children);
 };

package/dist/styles.css

@@ -57,8 +57,11 @@
   --yarl__direction: -1;
 }
 .yarl__slide_image {
+  max-width: 100%;
+  max-height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
+  pointer-events: none;
   -moz-user-select: none;
        user-select: none;
   -webkit-user-select: none;

package/dist/types.d.ts

@@ -2,6 +2,16 @@ import * as React from "react";
 import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image fit setting */
 export declare type ImageFit = "contain" | "cover";
+/** Image source */
+export interface ImageSource {
+    /** image URL */
+    src: string;
+    /** image width in pixels */
+    width: number;
+    /** image height in pixels */
+    height: number;
+}
+/** Generic slide */
 export interface GenericSlide {
 }
 /** Image slide properties */
@@ -19,14 +29,7 @@ export interface SlideImage extends GenericSlide {
     /** `object-fit` setting */
     imageFit?: ImageFit;
     /** alternative images to be passed to the 'srcSet' */
-    srcSet?: {
-        /** image URL */
-        src: string;
-        /** image width in pixels */
-        width: number;
-        /** image height in pixels */
-        height: number;
-    }[];
+    srcSet?: ImageSource[];
 }
 /** Supported slide types */
 export interface SlideTypes {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "2.0.0-rc.3",
+    "version": "2.0.0-rc.4",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",

package/dist/core/modules/controller/useOffset.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare const useOffset: (onChange: (offset: number) => void) => [number, React.Dispatch<React.SetStateAction<number>>];

package/dist/core/modules/controller/useOffset.js

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { useEventCallback } from "../../hooks/useEventCallback.js";
-export const useOffset = (onChange) => {
-    const [offset, setOffset] = React.useState(0);
-    const handleOnChange = useEventCallback(() => {
-        onChange(offset);
-    });
-    React.useEffect(handleOnChange, [offset, handleOnChange]);
-    return [offset, setOffset];
-};

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

@@ -1,3 +0,0 @@
-import { ZoomContainer } from "./ZoomContainer.js";
-/** Zoom slide wrapper */
-export declare const ZoomWrapper: typeof ZoomContainer;

package/dist/plugins/zoom/ZoomWrapper.js

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { ImageSlide, isImageSlide, useEventCallback } from "../../core/index.js";
-import { ZoomContainer } from "./ZoomContainer.js";
-import { useZoom } from "./ZoomContext.js";
-export const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation, zoom }) => {
-    var _a;
-    const { setIsZoomSupported, isZoomSupported } = useZoom();
-    const zoomSupported = isImageSlide(slide) && (Boolean(slide.srcSet) || Boolean(slide.width && slide.height));
-    const updateIsZoomSupported = useEventCallback(() => {
-        if (offset === 0 && zoomSupported !== isZoomSupported) {
-            setIsZoomSupported(zoomSupported);
-        }
-    });
-    React.useEffect(updateIsZoomSupported, [offset, updateIsZoomSupported]);
-    if (zoomSupported) {
-        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom }));
-    }
-    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 (isImageSlide(slide)) {
-        return React.createElement(ImageSlide, { slide: slide, offset: offset, rect: rect, render: render, imageFit: carousel.imageFit });
-    }
-    return null;
-};