yet-another-react-lightbox-lite 1.2.0 → 1.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 Lightweight React lightbox component. This is a trimmed-down version of the
 [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox)
-that provides essential lightbox features and slick UX with just 3KB bundle
+that provides essential lightbox features and slick UX with just 4.3KB bundle
 size.
 
 ## Overview
@@ -13,6 +13,7 @@ size.
 
 - **Built for React:** works with React 18+
 - **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Zoom:** zoom is supported out of the box
 - **Performance:** preloads a fixed number of images without compromising
   performance or UX
 - **Responsive:** responsive images with automatic resolution switching are
@@ -269,14 +270,14 @@ An object providing custom render functions.
 ```tsx
 <Lightbox
   render={{
-    slide: ({ slide, rect, current }) => (
-      <CustomSlide {...{ slide, rect, current }} />
+    slide: ({ slide, rect, zoom, current }) => (
+      <CustomSlide {...{ slide, rect, zoom, current }} />
     ),
-    slideHeader: ({ slide, rect, current }) => (
-      <SlideHeader {...{ slide, rect, current }} />
+    slideHeader: ({ slide, rect, zoom, current }) => (
+      <SlideHeader {...{ slide, rect, zoom, current }} />
     ),
-    slideFooter: ({ slide, rect, current }) => (
-      <SlideFooter {...{ slide, rect, current }} />
+    slideFooter: ({ slide, rect, zoom, current }) => (
+      <SlideFooter {...{ slide, rect, zoom, current }} />
     ),
     controls: () => <CustomControls />,
     iconPrev: () => <IconPrev />,
@@ -287,15 +288,23 @@ An object providing custom render functions.
 />
 ```
 
-#### slide: ({ slide, rect, current }) => ReactNode
+#### slide: ({ slide, rect, zoom, current }) => ReactNode
 
 Render custom slide type, or override the default image slide implementation.
 
-#### slideHeader: ({ slide, rect, current }) => ReactNode
+Parameters:
+
+- `slide` - slide object (type: `Slide`)
+- `rect` - slide rect size (type: `Rect`)
+- `zoom` - current zoom level (type: `number`)
+- `current` - if `true`, the slide is the current slide in the viewport (type:
+  `boolean`)
+
+#### slideHeader: ({ slide, rect, zoom, current }) => ReactNode
 
 Render custom elements above each slide.
 
-#### slideFooter: ({ slide, rect, current }) => ReactNode
+#### slideFooter: ({ slide, rect, zoom, current }) => ReactNode
 
 Render custom elements below or over each slide. By default, the content is
 rendered right under the slide. Alternatively, you can use
@@ -515,6 +524,31 @@ fixed-positioned element container should not have its own border or padding
 styles. If that's the case, you can always add an extra wrapper that just
 defines the fixed position without visual styles.
 
+## Hooks (experimental)
+
+The library exports the following experimental hooks that you may find helpful
+in customizing lightbox functionality. All experimental hooks are currently
+exported with the `unstable_` prefix.
+
+### useZoom
+
+You can use the `useZoom` hook to build your custom zoom controls.
+
+```tsx
+import { unstable_useZoom as useZoom } from "yet-another-react-lightbox-lite";
+```
+
+The hook provides an object with the following props:
+
+- `rect` - slide rect
+- `zoom` - current zoom level (numeric value between `1` and `8`)
+- `maxZoom` - maximum zoom level (`1` if zoom is not supported on the current
+  slide)
+- `offsetX` - horizontal slide position offset
+- `offsetY` - vertical slide position offset
+- `changeZoom` - change zoom level
+- `changeOffsets` - change position offsets
+
 ## License
 
 MIT © 2024 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Lightbox props */
@@ -17,6 +17,8 @@ interface LightboxProps {
     toolbar?: ToolbarSettings;
     /** controller settings */
     controller?: ControllerSettings;
+    /** zoom settings */
+    zoom?: ZoomSettings;
     /** customization slots styles */
     styles?: SlotStyles;
     /** CSS class of the lightbox root element */
@@ -91,8 +93,10 @@ interface Render {
 interface RenderSlideProps {
     /** slide */
     slide: Slide;
-    /** slide */
+    /** slide rect size */
     rect: Rect;
+    /** zoom level */
+    zoom: number;
     /** if `true`, the slide is the current slide in the viewport */
     current: boolean;
 }
@@ -112,6 +116,11 @@ interface ControllerSettings {
     /** if `true`, close the lightbox when the backdrop is clicked (default: `true`) */
     closeOnBackdropClick?: boolean;
 }
+/** Zoom settings */
+interface ZoomSettings {
+    /** zoom-enabled custom slide types */
+    supports?: SlideTypeKey[];
+}
 /** Customization slots */
 interface SlotType {
     /** lightbox portal (root) customization slot */
@@ -149,6 +158,31 @@ type Callback<T = void> = () => T;
 /** Render function */
 type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (props: T) => React.ReactNode;
 
+/** Lightbox component */
 declare function Lightbox({ slides, index, setIndex, ...rest }: LightboxProps): react_jsx_runtime.JSX.Element | null;
 
-export { type Callback, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, Lightbox as default };
+/** Zoom context */
+type ZoomContextType = {
+    /** slide rect */
+    rect?: Rect;
+    /** zoom level */
+    zoom: number;
+    /** maximum zoom level */
+    maxZoom: number;
+    /** horizontal slide position offset */
+    offsetX: number;
+    /** vertical slide position offset */
+    offsetY: number;
+    /** change zoom level */
+    changeZoom: (
+    /** new zoom value */
+    newZoom: number, 
+    /** pointer/mouse/wheel event that determines zoom-in point */
+    event?: Pick<MouseEvent, "clientX" | "clientY">) => void;
+    /** change position offsets */
+    changeOffsets: (dx: number, dy: number) => void;
+};
+/** `useZoom` hook */
+declare const useZoom: () => ZoomContextType;
+
+export { type Callback, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, type ZoomSettings, Lightbox as default, useZoom as unstable_useZoom };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
+import { useContext, createContext, useState, useRef, useLayoutEffect, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 
 const cssPrefix = "yarll__";
@@ -33,6 +33,16 @@ function makeUseContext(context) {
         return ctx;
     };
 }
+function round(value, decimals = 0) {
+    const factor = 10 ** decimals;
+    return Math.round((value + Number.EPSILON) * factor) / factor;
+}
+function scaleZoom(value, delta, factor = 100, clamp = 2) {
+    return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
+}
+function isImageSlide(slide) {
+    return (slide.type === undefined || slide.type === "image") && typeof slide.src === "string";
+}
 
 const LightboxContext = createContext(null);
 const useLightboxContext = makeUseContext(LightboxContext);
@@ -40,25 +50,43 @@ function LightboxContextProvider({ children, ...props }) {
     return jsx(LightboxContext.Provider, { value: props, children: children });
 }
 
-function ImageSlide({ slide, rect }) {
-    const { styles } = useLightboxContext();
-    const { width, height } = slide.srcSet?.[0] ?? slide;
-    const imageAspectRatio = width && height ? width / height : undefined;
-    const srcSet = slide.srcSet
-        ?.sort((a, b) => a.width - b.width)
-        .map((image) => `${image.src} ${image.width}w`)
-        .join(", ");
-    const sizes = imageAspectRatio
-        ? `${imageAspectRatio < rect.width / rect.height ? Math.round(imageAspectRatio * rect.height) : rect.width}px`
-        : undefined;
-    return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, src: slide.src, alt: slide.alt }));
-}
-
-function Carousel() {
-    const { slides, index, styles, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
+const ZoomContext = createContext(null);
+const useZoom = makeUseContext(ZoomContext);
+const ZoomInternalContext = createContext(null);
+const useZoomInternal = makeUseContext(ZoomInternalContext);
+function Zoom({ children }) {
+    const [zoom, setZoom] = useState(1);
+    const [offsetX, setOffsetX] = useState(0);
+    const [offsetY, setOffsetY] = useState(0);
     const [rect, setRect] = useState();
     const observer = useRef();
-    const handleRef = useCallback((node) => {
+    const carouselRef = useRef(null);
+    const { index, slides, zoom: { supports } = {} } = useLightboxContext();
+    const slide = slides[index];
+    const maxZoom = isImageSlide(slide) || (supports || []).includes(slide.type) ? 8 : 1;
+    useLayoutEffect(() => {
+        setZoom(1);
+        setOffsetX(0);
+        setOffsetY(0);
+    }, [index]);
+    useLayoutEffect(() => {
+        const carouselHalfWidth = (rect?.width || 0) / 2;
+        const carouselHalfHeight = (rect?.height || 0) / 2;
+        const [slideHalfWidth, slideHalfHeight] = Array.from(Array.from(carouselRef.current?.children || []).find((node) => node instanceof HTMLElement && !node.hidden)
+            ?.children || [])
+            .filter((node) => node instanceof HTMLElement)
+            .map((node) => [
+            Math.max(carouselHalfWidth - node.offsetLeft, node.offsetLeft + node.offsetWidth - carouselHalfWidth),
+            Math.max(carouselHalfHeight - node.offsetTop, node.offsetTop + node.offsetHeight - carouselHalfHeight),
+        ])
+            .reduce(([maxWidth, maxHeight], [width, height]) => [Math.max(width, maxWidth), Math.max(height, maxHeight)], [0, 0]);
+        const maxOffsetX = Math.max(slideHalfWidth * zoom - carouselHalfWidth, 0);
+        const maxOffsetY = Math.max(slideHalfHeight * zoom - carouselHalfHeight, 0);
+        setOffsetX(Math.min(maxOffsetX, Math.max(-maxOffsetX, offsetX)));
+        setOffsetY(Math.min(maxOffsetY, Math.max(-maxOffsetY, offsetY)));
+    }, [zoom, rect, offsetX, offsetY]);
+    const setCarouselRef = useCallback((node) => {
+        carouselRef.current = node;
         observer.current?.disconnect();
         observer.current = undefined;
         const updateRect = () => setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
@@ -70,15 +98,75 @@ function Carousel() {
             updateRect();
         }
     }, []);
-    return (jsx("div", { ref: handleRef, style: styles?.carousel, className: cssClass("carousel"), children: rect &&
+    const changeOffsets = useCallback((dx, dy) => {
+        setOffsetX(offsetX + dx);
+        setOffsetY(offsetY + dy);
+    }, [offsetX, offsetY]);
+    const changeZoom = useCallback((targetZoom, event) => {
+        const newZoom = Math.min(Math.max(targetZoom, 1), maxZoom);
+        setZoom(newZoom);
+        if (event && carouselRef.current) {
+            const { clientX, clientY } = event;
+            const { left, top, width, height } = carouselRef.current.getBoundingClientRect();
+            const zoomDelta = newZoom / zoom - 1;
+            changeOffsets((left + width / 2 + offsetX - clientX) * zoomDelta, (top + height / 2 + offsetY - clientY) * zoomDelta);
+        }
+    }, [zoom, maxZoom, offsetX, offsetY, changeOffsets]);
+    return (jsx(ZoomContext.Provider, { value: useMemo(() => ({ rect, zoom, maxZoom, offsetX, offsetY, changeZoom, changeOffsets }), [rect, zoom, maxZoom, offsetX, offsetY, changeZoom, changeOffsets]), children: jsx(ZoomInternalContext.Provider, { value: useMemo(() => ({ carouselRef, setCarouselRef }), [setCarouselRef]), children: children }) }));
+}
+
+function getImageDimensions(slide, rect) {
+    const { width, height } = slide.srcSet?.[0] || slide;
+    const imageAspectRatio = width && height ? width / height : undefined;
+    const rectAspectRatio = rect.width / rect.height;
+    return imageAspectRatio
+        ? [
+            round(imageAspectRatio < rectAspectRatio ? imageAspectRatio * rect.height : rect.width, 2),
+            round(imageAspectRatio > rectAspectRatio ? rect.width / imageAspectRatio : rect.height, 2),
+        ]
+        : [];
+}
+function ImageSlide({ slide, rect, zoom }) {
+    const [scale, setScale] = useState(1);
+    const persistScaleTimeout = useRef();
+    const { styles } = useLightboxContext();
+    useEffect(() => {
+        if (zoom && zoom > scale) {
+            clearTimeout(persistScaleTimeout.current);
+            persistScaleTimeout.current = setTimeout(() => {
+                persistScaleTimeout.current = undefined;
+                setScale(zoom);
+            }, 300);
+        }
+    }, [zoom, scale]);
+    const srcSet = slide.srcSet
+        ?.sort((a, b) => a.width - b.width)
+        .map((image) => `${image.src} ${image.width}w`)
+        .join(", ");
+    const [width, height] = getImageDimensions(slide, rect);
+    const sizes = width ? `${round(width * scale, 2)}px` : undefined;
+    return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, width: width, height: height, src: slide.src, alt: slide.alt }));
+}
+
+function Carousel() {
+    const { slides, index, styles, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
+    const { rect, zoom, offsetX, offsetY } = useZoom();
+    const { setCarouselRef } = useZoomInternal();
+    return (jsx("div", { ref: setCarouselRef, style: styles?.carousel, className: cssClass("carousel"), children: rect &&
             Array.from({ length: 5 }).map((_, i) => {
                 const slideIndex = index - 2 + i;
                 if (slideIndex < 0 || slideIndex >= slides.length)
                     return null;
                 const slide = slides[slideIndex];
                 const current = slideIndex === index;
-                const context = { slide, rect, current };
-                return (jsxs("div", { role: "group", "aria-roledescription": "slide", className: cssClass("slide"), hidden: !current, style: styles?.slide, children: [slideHeader?.(context), renderSlide?.(context) ?? jsx(ImageSlide, { ...context }), slideFooter?.(context)] }, slide.key ?? `${slideIndex}-${slide.src}`));
+                const context = { slide, rect, current, zoom: round(current ? zoom : 1, 3) };
+                return (jsxs("div", { role: "group", "aria-roledescription": "slide", className: cssClass("slide"), hidden: !current, style: {
+                        transform: current && zoom > 1
+                            ? `translateX(${round(offsetX, 3)}px) translateY(${round(offsetY, 3)}px) scale(${round(zoom, 3)})`
+                            : undefined,
+                        ...styles?.slide,
+                    }, children: [slideHeader?.(context), renderSlide?.(context) ??
+                            (isImageSlide(slide) && jsx(ImageSlide, { ...context })), slideFooter?.(context)] }, slide.key ?? `${slideIndex}-${isImageSlide(slide) ? slide.src : undefined}`));
             }) }));
 }
 
@@ -142,11 +230,25 @@ function Navigation() {
     return (jsxs(Fragment, { children: [slides.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { label: "Previous", icon: Previous, renderIcon: iconPrev, onClick: prev, className: cssClass("button_prev"), disabled: index <= 0 }), jsx(Button, { label: "Next", icon: Next, renderIcon: iconNext, onClick: next, className: cssClass("button_next"), disabled: index >= slides.length - 1 })] })), controls?.()] }));
 }
 
+const WHEEL_ZOOM_FACTOR = 100;
+const WHEEL_SWIPE_DISTANCE = 100;
+const WHEEL_SWIPE_COOLDOWN_TIME = 1000;
+const POINTER_SWIPE_DISTANCE = 100;
+const KEYBOARD_ZOOM_FACTOR = 8 ** (1 / 4);
+const KEYBOARD_MOVE_DISTANCE = 50;
+const PINCH_ZOOM_DISTANCE_FACTOR = 100;
+const PREVAILING_DIRECTION_FACTOR = 1.2;
+function distance(pointerA, pointerB) {
+    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+}
 function useSensors() {
     const wheelEvents = useRef([]);
     const wheelCooldown = useRef(null);
     const wheelCooldownMomentum = useRef(null);
-    const activePointer = useRef(null);
+    const activePointers = useRef([]);
+    const pinchZoomDistance = useRef();
+    const { zoom, changeZoom, changeOffsets } = useZoom();
+    const { carouselRef } = useZoomInternal();
     const { prev, next, close } = useController();
     const { closeOnPullUp, closeOnPullDown, closeOnBackdropClick } = {
         closeOnPullUp: true,
@@ -156,34 +258,94 @@ function useSensors() {
     };
     return useMemo(() => {
         const onKeyDown = (event) => {
-            switch (event.key) {
-                case "Escape":
-                    close();
-                    break;
-                case "ArrowLeft":
-                    prev();
-                    break;
-                case "ArrowRight":
-                    next();
-                    break;
+            const meta = event.getModifierState("Meta");
+            const preventDefault = () => event.preventDefault();
+            const handleChangeZoom = (newZoom) => {
+                preventDefault();
+                changeZoom(newZoom);
+            };
+            if (event.key === "+" || (meta && event.key === "="))
+                handleChangeZoom(zoom * KEYBOARD_ZOOM_FACTOR);
+            if (event.key === "-" || (meta && event.key === "_"))
+                handleChangeZoom(zoom / KEYBOARD_ZOOM_FACTOR);
+            if (meta && event.key === "0")
+                handleChangeZoom(1);
+            if (event.key === "Escape")
+                close();
+            if (zoom > 1) {
+                const move = (deltaX, deltaY) => {
+                    preventDefault();
+                    changeOffsets(deltaX, deltaY);
+                };
+                if (event.key === "ArrowUp")
+                    move(0, KEYBOARD_MOVE_DISTANCE);
+                if (event.key === "ArrowDown")
+                    move(0, -KEYBOARD_MOVE_DISTANCE);
+                if (event.key === "ArrowLeft")
+                    move(KEYBOARD_MOVE_DISTANCE, 0);
+                if (event.key === "ArrowRight")
+                    move(-KEYBOARD_MOVE_DISTANCE, 0);
+                return;
             }
+            if (event.key === "ArrowLeft")
+                prev();
+            if (event.key === "ArrowRight")
+                next();
+        };
+        const removePointer = (event) => {
+            const pointers = activePointers.current;
+            pointers.splice(0, pointers.length, ...pointers.filter((pointer) => pointer.pointerId !== event.pointerId));
+        };
+        const addPointer = (event) => {
+            event.persist();
+            removePointer(event);
+            activePointers.current.push(event);
         };
         const onPointerDown = (event) => {
-            if (!activePointer.current) {
-                event.persist();
-                activePointer.current = event;
+            const pointers = activePointers.current;
+            if (event.target instanceof Element &&
+                (event.target.classList.contains(cssClass("button")) ||
+                    event.target.classList.contains(cssClass("icon")) ||
+                    carouselRef.current?.parentElement?.querySelector(`.${cssClass("toolbar")}`)?.contains(event.target))) {
+                return;
             }
-            else {
-                activePointer.current = null;
+            addPointer(event);
+            if (pointers.length === 2) {
+                pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+            }
+        };
+        const onPointerMove = (event) => {
+            const pointers = activePointers.current;
+            const activePointer = pointers.find((pointer) => pointer.pointerId === event.pointerId);
+            if (pointers.length === 2 && pinchZoomDistance.current) {
+                addPointer(event);
+                const currentDistance = distance(pointers[0], pointers[1]);
+                const delta = currentDistance - pinchZoomDistance.current;
+                if (Math.abs(delta) > 0) {
+                    changeZoom(scaleZoom(zoom, delta, PINCH_ZOOM_DISTANCE_FACTOR), {
+                        clientX: (pointers[0].clientX + pointers[1].clientX) / 2,
+                        clientY: (pointers[0].clientY + pointers[1].clientY) / 2,
+                    });
+                    pinchZoomDistance.current = currentDistance;
+                }
+                return;
+            }
+            if (zoom > 1 && activePointer) {
+                if (pointers.length === 1) {
+                    changeOffsets(event.clientX - activePointer.clientX, event.clientY - activePointer.clientY);
+                }
+                addPointer(event);
             }
         };
         const onPointerUp = (event) => {
-            if (event.pointerId === activePointer.current?.pointerId) {
-                const dx = event.clientX - activePointer.current.clientX;
-                const dy = event.clientY - activePointer.current.clientY;
+            const pointers = activePointers.current;
+            const activePointer = pointers.find((pointer) => pointer.pointerId === event.pointerId);
+            if (activePointer && pointers.length === 1 && zoom === 1) {
+                const dx = event.clientX - activePointer.clientX;
+                const dy = event.clientY - activePointer.clientY;
                 const deltaX = Math.abs(dx);
                 const deltaY = Math.abs(dy);
-                if (deltaX > 50 && deltaX > 1.2 * deltaY) {
+                if (deltaX > POINTER_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
                     if (dx > 0) {
                         prev();
                     }
@@ -191,21 +353,33 @@ function useSensors() {
                         next();
                     }
                 }
-                else if ((deltaY > 50 && deltaY > 1.2 * deltaX && ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
+                else if ((deltaY > POINTER_SWIPE_DISTANCE &&
+                    deltaY > PREVAILING_DIRECTION_FACTOR * deltaX &&
+                    ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
                     (closeOnBackdropClick &&
-                        activePointer.current.target instanceof Element &&
-                        Array.from(activePointer.current.target.classList).some((className) => [cssClass("slide"), cssClass("portal")].includes(className)))) {
+                        activePointer.target instanceof Element &&
+                        Array.from(activePointer.target.classList).some((className) => [cssClass("slide"), cssClass("portal")].includes(className)))) {
                     close();
                 }
-                activePointer.current = null;
             }
+            removePointer(event);
         };
         const onWheel = (event) => {
+            if (event.ctrlKey) {
+                if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                    changeZoom(scaleZoom(zoom, -event.deltaY, WHEEL_ZOOM_FACTOR), event);
+                }
+                return;
+            }
+            if (zoom > 1) {
+                changeOffsets(-event.deltaX, -event.deltaY);
+                return;
+            }
             if (wheelCooldown.current && wheelCooldownMomentum.current) {
                 if (event.deltaX * wheelCooldownMomentum.current > 0 &&
-                    (event.timeStamp <= wheelCooldown.current + 500 ||
-                        (event.timeStamp <= wheelCooldown.current + 1000 &&
-                            Math.abs(event.deltaX) < 1.2 * Math.abs(wheelCooldownMomentum.current)))) {
+                    (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME / 2 ||
+                        (event.timeStamp <= wheelCooldown.current + WHEEL_SWIPE_COOLDOWN_TIME &&
+                            Math.abs(event.deltaX) < PREVAILING_DIRECTION_FACTOR * Math.abs(wheelCooldownMomentum.current)))) {
                     wheelCooldownMomentum.current = event.deltaX;
                     return;
                 }
@@ -218,7 +392,7 @@ function useSensors() {
             const dx = wheelEvents.current.map((e) => e.deltaX).reduce((a, b) => a + b, 0);
             const deltaX = Math.abs(dx);
             const deltaY = Math.abs(wheelEvents.current.map((e) => e.deltaY).reduce((a, b) => a + b, 0));
-            if (deltaX > 100 && deltaX > 1.2 * deltaY) {
+            if (deltaX > WHEEL_SWIPE_DISTANCE && deltaX > PREVAILING_DIRECTION_FACTOR * deltaY) {
                 if (dx < 0) {
                     prev();
                 }
@@ -233,12 +407,24 @@ function useSensors() {
         return {
             onKeyDown,
             onPointerDown,
+            onPointerMove,
             onPointerUp,
             onPointerLeave: onPointerUp,
             onPointerCancel: onPointerUp,
             onWheel,
         };
-    }, [prev, next, close, closeOnPullUp, closeOnPullDown, closeOnBackdropClick]);
+    }, [
+        prev,
+        next,
+        close,
+        zoom,
+        changeZoom,
+        changeOffsets,
+        carouselRef,
+        closeOnPullUp,
+        closeOnPullDown,
+        closeOnBackdropClick,
+    ]);
 }
 
 function setAttribute(element, attribute, value) {
@@ -334,7 +520,7 @@ function Toolbar() {
 function Lightbox({ slides, index, setIndex, ...rest }) {
     if (!Array.isArray(slides) || index === undefined || index < 0 || index >= slides.length)
         return null;
-    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsxs(Portal, { children: [jsx(Toolbar, {}), jsx(Carousel, {}), jsx(Navigation, {})] }) }) }));
+    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsx(Zoom, { children: jsxs(Portal, { children: [jsx(Toolbar, {}), jsx(Carousel, {}), jsx(Navigation, {})] }) }) }) }));
 }
 
-export { Lightbox as default };
+export { Lightbox as default, useZoom as unstable_useZoom };

package/dist/styles.css

@@ -1 +1 @@
-body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;flex:1;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static;z-index:unset}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);width:var(--yarll__icon_size,32px)}
+body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static;z-index:unset}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);pointer-events:none;width:var(--yarll__icon_size,32px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",