yet-another-react-lightbox 1.9.6 → 1.11.1

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

@@ -7,5 +7,6 @@ export declare type ImageSlideProps = {
     render?: Render;
     rect?: ContainerRect;
     imageFit?: ImageFit;
+    onClick?: () => void;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -4,7 +4,7 @@ import { useLatest } from "../hooks/index.js";
 import { useEvents } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
 import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, } from "../consts.js";
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) => {
+export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
@@ -61,7 +61,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) =>
         ? `${Math.ceil((Math.min(estimateActualWidth(), rect.width) / window.innerWidth) * 100)}vw`
         : undefined;
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),

package/dist/core/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./useContainerRect.js";
-export * from "./useEnhancedEffect.js";
+export * from "./useLayoutEffect.js";
 export * from "./useLatest.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";

package/dist/core/hooks/index.js

@@ -1,5 +1,5 @@
 export * from "./useContainerRect.js";
-export * from "./useEnhancedEffect.js";
+export * from "./useLayoutEffect.js";
 export * from "./useLatest.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";

package/dist/core/hooks/useLatest.d.ts

@@ -1,2 +1,3 @@
 import * as React from "react";
+/** @deprecated migrate to useEventCallback */
 export declare const useLatest: <T>(value: T) => React.MutableRefObject<T>;

package/dist/core/hooks/useLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const useLayoutEffect: typeof React.useLayoutEffect;

package/dist/core/hooks/useLayoutEffect.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { hasWindow } from "../utils.js";
+export const useLayoutEffect = hasWindow() ? React.useLayoutEffect : React.useEffect;

package/dist/core/hooks/useMotionPreference.js

@@ -1,12 +1,14 @@
 import * as React from "react";
-import { useEnhancedEffect } from "./useEnhancedEffect.js";
+import { useLayoutEffect } from "./useLayoutEffect.js";
 export const useMotionPreference = () => {
     const [reduceMotion, setReduceMotion] = React.useState(false);
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         var _a;
         const mediaQuery = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)");
-        mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.addEventListener("change", () => setReduceMotion(mediaQuery.matches));
         setReduceMotion(mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches);
+        const listener = () => setReduceMotion(mediaQuery.matches);
+        mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.addEventListener("change", listener);
+        return () => mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.removeEventListener("change", listener);
     }, []);
     return reduceMotion;
 };

package/dist/core/hooks/useRTL.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { useEnhancedEffect } from "./useEnhancedEffect.js";
+import { useLayoutEffect } from "./useLayoutEffect.js";
 export const useRTL = () => {
     const [isRTL, setIsRTL] = React.useState(false);
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         setIsRTL(window.getComputedStyle(window.document.documentElement).direction === "rtl");
     }, []);
     return isRTL;

package/dist/core/modules/Carousel.js

@@ -7,13 +7,18 @@ import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 const CarouselSlide = ({ slide, offset }) => {
     const { setContainerRef, containerRect } = useContainerRect();
-    const { latestProps } = useController();
+    const { latestProps, currentIndex } = useController();
     const { render } = latestProps.current;
     const renderSlide = (rect) => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
         if (!rendered && "src" in slide) {
-            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit }));
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit, onClick: latestProps.current.on.click && offset === 0
+                    ? () => {
+                        var _a, _b;
+                        (_b = (_a = latestProps.current.on).click) === null || _b === void 0 ? void 0 : _b.call(_a, currentIndex);
+                    }
+                    : undefined }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, slide),

package/dist/core/modules/Controller.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
 import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
 import { createModule } from "../config.js";
-import { useContainerRect, useEnhancedEffect, useLatest, useRTL, useSensors, } from "../hooks/index.js";
+import { useContainerRect, useLatest, useLayoutEffect, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 const SWIPE_OFFSET_THRESHOLD = 30;
 const ControllerContext = React.createContext(null);
@@ -29,7 +29,7 @@ export const Controller = ({ children, ...props }) => {
     });
     refs.current.state = state;
     refs.current.props = props;
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         const preventDefault = (event) => {
             if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
                 event.preventDefault();
@@ -65,7 +65,7 @@ export const Controller = ({ children, ...props }) => {
             (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.removeProperty(offsetVar);
         }
     }, [containerRef]);
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         updateSwipeOffset();
     });
     const rerender = React.useCallback(() => {
@@ -298,6 +298,6 @@ export const Controller = ({ children, ...props }) => {
                     [cssVar("controller_touch_action")]: props.controller.touchAction,
                 }
                 : null),
-        }, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
+        }, ...(props.controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/core/modules/NoScroll.js

@@ -1,22 +1,49 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cssClass, cssVar } from "../utils.js";
+import { cssClass } from "../utils.js";
+import { useLayoutEffect, useRTL } from "../hooks/index.js";
 const noScroll = cssClass("no_scroll");
-const padScrollbar = cssClass("pad_scrollbar");
-const scrollbarPadding = cssVar("scrollbar_padding");
+const noScrollPadding = cssClass("no_scroll_padding");
+const isHTMLElement = (element) => "style" in element;
+const padScrollbar = (element, padding, rtl) => {
+    const styles = window.getComputedStyle(element);
+    const property = rtl ? "padding-left" : "padding-right";
+    const computedValue = rtl ? styles.paddingLeft : styles.paddingRight;
+    const originalValue = element.style.getPropertyValue(property);
+    element.style.setProperty(property, `${(parseInt(computedValue, 10) || 0) + padding}px`);
+    return () => {
+        if (originalValue) {
+            element.style.setProperty(property, originalValue);
+        }
+        else {
+            element.style.removeProperty(property);
+        }
+    };
+};
 export const NoScroll = ({ children }) => {
-    React.useEffect(() => {
-        const scrollbarWidth = Math.round(window.innerWidth - document.documentElement.clientWidth);
-        if (scrollbarWidth > 1) {
-            document.body.style.setProperty(scrollbarPadding, `${scrollbarWidth}px`);
-            document.body.classList.add(padScrollbar);
+    const rtl = useRTL();
+    useLayoutEffect(() => {
+        const cleanup = [];
+        const { body, documentElement } = document;
+        const scrollbar = Math.round(window.innerWidth - documentElement.clientWidth);
+        if (scrollbar > 0) {
+            cleanup.push(padScrollbar(body, scrollbar, rtl));
+            const elements = body.getElementsByTagName("*");
+            for (let i = 0; i < elements.length; i += 1) {
+                const element = elements[i];
+                if (isHTMLElement(element) &&
+                    window.getComputedStyle(element).getPropertyValue("position") === "fixed" &&
+                    !element.classList.contains(noScrollPadding)) {
+                    cleanup.push(padScrollbar(element, scrollbar, rtl));
+                }
+            }
         }
-        document.body.classList.add(noScroll);
+        body.classList.add(noScroll);
         return () => {
-            document.body.style.removeProperty(scrollbarPadding);
-            document.body.classList.remove(noScroll, padScrollbar);
+            body.classList.remove(noScroll);
+            cleanup.forEach((clean) => clean());
         };
-    });
+    }, [rtl]);
     return React.createElement(React.Fragment, null, children);
 };
 export const NoScrollModule = createModule("no-scroll", NoScroll);

package/dist/core/modules/Portal.js

@@ -2,50 +2,77 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { LightboxDefaultProps } from "../../types.js";
 import { createModule } from "../config.js";
-import { cssClass, cssVar } from "../utils.js";
-import { useLatest } from "../hooks/useLatest.js";
+import { clsx, cssClass, cssVar } from "../utils.js";
+import { useLatest, useMotionPreference } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
+const setAttribute = (element, attribute, value) => {
+    const previousValue = element.getAttribute(attribute);
+    element.setAttribute(attribute, value);
+    return () => {
+        if (previousValue) {
+            element.setAttribute(attribute, previousValue);
+        }
+        else {
+            element.removeAttribute(attribute);
+        }
+    };
+};
 export const Portal = ({ children, ...props }) => {
     const [mounted, setMounted] = React.useState(false);
+    const [visible, setVisible] = React.useState(false);
+    const cleanup = React.useRef([]);
     const latestProps = useLatest(props);
+    const latestAnimationDuration = useLatest(!useMotionPreference() ? props.animation.fade : 0);
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
-    const [portal] = React.useState(() => {
-        const div = document.createElement("div");
-        div.className = cssClass("portal");
-        const fadeAnimation = latestProps.current.animation.fade;
-        if (fadeAnimation !== LightboxDefaultProps.animation.fade) {
-            div.style.setProperty(cssVar("fade_animation_duration"), `${Math.round(fadeAnimation)}ms`);
-        }
-        return div;
-    });
+    React.useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+        };
+    }, []);
     React.useEffect(() => subscribe("close", () => {
         var _a, _b;
+        setVisible(false);
         (_b = (_a = latestProps.current.on).exiting) === null || _b === void 0 ? void 0 : _b.call(_a);
-        portal.classList.remove(cssClass("portal_open"));
         setTimeout(() => {
             var _a, _b;
             (_b = (_a = latestProps.current.on).exited) === null || _b === void 0 ? void 0 : _b.call(_a);
             latestProps.current.close();
-        }, latestProps.current.animation.fade);
-    }), [portal, setTimeout, subscribe, latestProps]);
-    React.useEffect(() => {
-        var _a, _b;
-        document.body.appendChild(portal);
-        setMounted(true);
-        (_b = (_a = latestProps.current.on).entering) === null || _b === void 0 ? void 0 : _b.call(_a);
-        setTimeout(() => {
-            portal.classList.add(cssClass("portal_open"));
-        }, 0);
-        setTimeout(() => {
-            var _a, _b;
-            (_b = (_a = latestProps.current.on).entered) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }, latestProps.current.animation.fade);
-        return () => {
-            document.body.removeChild(portal);
-            setMounted(false);
-        };
-    }, [portal, setTimeout, latestProps]);
-    return ReactDOM.createPortal(mounted ? children : null, portal);
+        }, latestAnimationDuration.current);
+    }), [setTimeout, subscribe, latestProps, latestAnimationDuration]);
+    const handlePortalRef = React.useCallback((node) => {
+        var _a, _b, _c, _d;
+        if (node) {
+            node.getBoundingClientRect();
+            setVisible(true);
+            (_b = (_a = latestProps.current.on).entering) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const elements = (_d = (_c = node.parentNode) === null || _c === void 0 ? void 0 : _c.children) !== null && _d !== void 0 ? _d : [];
+            for (let i = 0; i < elements.length; i += 1) {
+                const element = elements[i];
+                if (["TEMPLATE", "SCRIPT", "STYLE"].indexOf(element.tagName) === -1 && element !== node) {
+                    cleanup.current.push(setAttribute(element, "inert", "true"));
+                    cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
+                }
+            }
+            setTimeout(() => {
+                var _a, _b;
+                (_b = (_a = latestProps.current.on).entered) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }, latestAnimationDuration.current);
+        }
+        else {
+            cleanup.current.forEach((clean) => clean());
+            cleanup.current = [];
+        }
+    }, [setTimeout, latestProps, latestAnimationDuration]);
+    return mounted
+        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", ...(props.animation.fade !== LightboxDefaultProps.animation.fade
+                ? {
+                    style: {
+                        [cssVar("fade_animation_duration")]: `${Math.round(props.animation.fade)}ms`,
+                    },
+                }
+                : null) }, children), document.body)
+        : null;
 };
 export const PortalModule = createModule("portal", Portal);

package/dist/plugins/Inline.js

@@ -3,7 +3,7 @@ import { createModule } from "../core/index.js";
 export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
 export const InlineModule = createModule("inline", InlineContainer);
 export const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, touchAction, ...restController }, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, ...restProps }) => ({
         open: true,
         close: () => { },
         toolbar: {
@@ -11,7 +11,7 @@ export const Inline = ({ augment, replace, remove }) => {
             ...restToolbar,
         },
         inline: { style: { width: "100%", height: "100%" } },
-        controller: { focus: false, touchAction: "pan-y", ...restController },
+        controller: { focus: false, aria: true, touchAction: "pan-y", ...restController },
         ...restProps,
     }));
     remove("no-scroll");

package/dist/plugins/Thumbnails.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useEnhancedEffect, useEvents, useLatest, useMotionPreference, useRTL, } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useLayoutEffect, useEvents, useLatest, useMotionPreference, useRTL, } from "../core/index.js";
 const defaultThumbnailsProps = {
     position: "bottom",
     width: 120,
@@ -95,7 +95,7 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
             });
         }
     }), [container, subscribe]);
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         var _a, _b, _c, _d;
         if (track.current && state.offset) {
             const { current } = refs;

package/dist/plugins/Video.js

@@ -39,9 +39,12 @@ export const VideoSlide = ({ slide, offset }) => {
         if (!width || !height || !containerRect)
             return null;
         const widthBound = width / height > containerRect.width / containerRect.height;
+        const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
+        const elementHeight = !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height);
         return {
-            width: widthBound ? containerRect.width : Math.round((containerRect.height / height) * width),
-            height: !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height),
+            width: elementWidth,
+            height: elementHeight,
+            style: { width: elementWidth, height: elementHeight, maxWidth: "100%", maxHeight: "100%" },
         };
     };
     const resolveBoolean = (attr) => {

package/dist/plugins/Zoom.d.ts

@@ -28,6 +28,8 @@ declare module "../types.js" {
             wheelZoomDistanceFactor?: number;
             /** pinch zoom distance factor */
             pinchZoomDistanceFactor?: number;
+            /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
+            scrollToZoom?: boolean;
         };
     }
     interface AnimationSettings {

package/dist/plugins/Zoom.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
+import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEvents, useLayoutEffect, useMotionPreference, } from "../core/index.js";
 const defaultZoomProps = {
     maxZoomPixelRatio: 1,
     zoomInMultiplier: 2,
@@ -9,6 +9,7 @@ const defaultZoomProps = {
     keyboardMoveDistance: 50,
     wheelZoomDistanceFactor: 100,
     pinchZoomDistanceFactor: 100,
+    scrollToZoom: false,
 };
 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" }),
@@ -17,25 +18,25 @@ const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.
 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 [isMinZoom, setIsMinZoom] = React.useState(false);
+    const [isMaxZoom, setIsMaxZoom] = React.useState(false);
+    const [isZoomSupported, setIsZoomSupported] = React.useState(false);
     const context = React.useMemo(() => ({
-        minZoom,
-        maxZoom,
-        zoomSupported,
-        setMinZoom,
-        setMaxZoom,
-        setZoomSupported,
-    }), [minZoom, maxZoom, zoomSupported]);
+        isMinZoom,
+        isMaxZoom,
+        isZoomSupported,
+        setIsMinZoom,
+        setIsMaxZoom,
+        setIsZoomSupported,
+    }), [isMinZoom, isMaxZoom, isZoomSupported]);
     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 { isMinZoom, isMaxZoom, isZoomSupported } = useZoom();
     const { publish } = useEvents();
-    const disabled = !zoomSupported || (zoomIn ? maxZoom : minZoom);
+    const disabled = !isZoomSupported || (zoomIn ? isMaxZoom : isMinZoom);
     const onClick = () => publish(zoomIn ? "zoom-in" : "zoom-out");
     const onFocus = React.useCallback(() => {
         wasFocused.current = true;
@@ -126,7 +127,7 @@ const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX)
 const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps }) => {
     var _a;
     const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
-    const { setMinZoom: currentSetMinZoom, setMaxZoom: currentSetMaxZoom } = useZoom();
+    const { isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom } = useZoom();
     const { setContainerRef, containerRef: currentContainerRef, containerRect: currentContainerRect, } = useContainerRect();
     const { subscribeSensors, containerRef: currentControllerRef, containerRect: currentControllerRect, } = useController();
     const { subscribe } = useEvents();
@@ -145,8 +146,6 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
         controllerRect: currentControllerRect,
         maxZoom: currentMaxZoom,
         reduceMotion: currentReduceMotion,
-        setMinZoom: currentSetMinZoom,
-        setMaxZoom: currentSetMaxZoom,
         activePointers: [],
         lastPointerDown: 0,
         zoomProps,
@@ -159,8 +158,6 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
     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) => {
@@ -176,12 +173,30 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
         }));
     }, []);
-    useEnhancedEffect(() => {
+    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 + 0.001 < maxZoom ? value : maxZoom, 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]);
+    useLayoutEffect(() => {
         if (refs.current.state.zoom > 1) {
+            const { maxZoom, state: { zoom: currentZoom }, } = refs.current;
+            if (currentZoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
             changeOffsets();
         }
-    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
-    useEnhancedEffect(() => {
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets, changeZoom]);
+    useLayoutEffect(() => {
         var _a, _b;
         const { current } = refs;
         const { zoomAnimation, zoomAnimationStart, zoomAnimationDuration, reduceMotion, containerRef } = current;
@@ -204,13 +219,12 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             }
         }
     }, [state.zoom, state.offsetX, state.offsetY]);
-    useEnhancedEffect(() => {
+    useLayoutEffect(() => {
         if (offset === 0) {
-            const { setMinZoom, setMaxZoom } = refs.current;
             const resetZoom = () => {
                 setState({ zoom: 1, offsetX: 0, offsetY: 0 });
-                setMinZoom(true);
-                setMaxZoom(false);
+                setIsMinZoom(true);
+                setIsMaxZoom(false);
             };
             resetZoom();
             return () => {
@@ -218,28 +232,19 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             };
         }
         return () => { };
-    }, [offset]);
-    useEnhancedEffect(() => {
+    }, [offset, setIsMinZoom, setIsMaxZoom]);
+    useLayoutEffect(() => {
         if (offset === 0) {
-            const { setMinZoom, setMaxZoom } = refs.current;
-            setMinZoom(state.zoom <= 1);
-            setMaxZoom(state.zoom >= currentMaxZoom);
-        }
-    }, [offset, state.zoom, currentMaxZoom]);
-    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 + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
-        if (!rapid) {
-            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+            const newMinZoom = state.zoom <= 1;
+            if (newMinZoom !== isMinZoom) {
+                setIsMinZoom(newMinZoom);
+            }
+            const newMaxZoom = state.zoom >= currentMaxZoom;
+            if (newMaxZoom !== isMaxZoom) {
+                setIsMaxZoom(newMaxZoom);
+            }
         }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
-        setState((prev) => ({ ...prev, zoom: newZoom }));
-    }, [changeOffsets]);
+    }, [offset, state.zoom, currentMaxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
     const translateCoordinates = React.useCallback((event) => {
         const { controllerRef } = refs.current;
         if (controllerRef.current) {
@@ -252,9 +257,13 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
     }, []);
     const onKeyDown = React.useCallback((event) => {
         const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         if (zoom > 1) {
             const move = (deltaX, deltaY) => {
-                event.stopPropagation();
+                preventDefault();
                 changeOffsets(deltaX, deltaY);
             };
             if (event.key === "ArrowDown") {
@@ -270,28 +279,35 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
                 move(keyboardMoveDistance, 0);
             }
         }
-        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
-            changeZoom(zoom * zoomInMultiplier);
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta") || event.getModifierState("OS");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
         }
-        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
-            changeZoom(zoom / zoomInMultiplier);
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
         }
-        else if (event.key === "0" && event.metaKey) {
-            changeZoom(1);
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
         }
     }, [changeZoom, changeOffsets]);
     const onWheel = React.useCallback((event) => {
-        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
-        if (event.ctrlKey) {
-            event.stopPropagation();
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor, scrollToZoom }, } = refs.current;
+        if (event.ctrlKey || scrollToZoom) {
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                event.stopPropagation();
                 changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                return;
             }
-            return;
         }
         if (zoom > 1) {
             event.stopPropagation();
-            changeOffsets(event.deltaX, event.deltaY);
+            if (!scrollToZoom) {
+                changeOffsets(event.deltaX, event.deltaY);
+            }
         }
     }, [changeZoom, changeOffsets, translateCoordinates]);
     const clearPointer = React.useCallback((event) => {
@@ -381,14 +397,14 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
 };
 const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation, zoom }) => {
     var _a;
-    const { setZoomSupported } = useZoom();
+    const { setIsZoomSupported, isZoomSupported } = 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);
+        if (offset === 0 && zoomSupported !== isZoomSupported) {
+            setIsZoomSupported(zoomSupported);
         }
-    }, [offset, zoomSupported, setZoomSupported]);
+    }, [offset, zoomSupported, isZoomSupported, setIsZoomSupported]);
     if (zoomSupported) {
         return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom }));
     }

package/dist/styles.css

@@ -214,13 +214,6 @@
   overflow: hidden;
   overscroll-behavior: none;
 }
-.yarl__pad_scrollbar {
-  padding-right: var(--yarl__scrollbar_padding, 17px);
-}
-[dir=rtl] .yarl__pad_scrollbar {
-  padding-right: unset;
-  padding-left: var(--yarl__scrollbar_padding, 17px);
-}
 
 @-webkit-keyframes yarl__delayed_fadein {
   0% {

package/dist/types.d.ts

@@ -59,6 +59,8 @@ export interface ControllerSettings {
     focus: boolean;
     /** controller `touch-action` */
     touchAction: "none" | "pan-y";
+    /** if `true`, set ARIA attributes on the controller div */
+    aria: boolean;
 }
 /** Custom render functions. */
 export interface Render {
@@ -97,6 +99,8 @@ export interface Render {
 export interface Callbacks {
     /** a callback called when a slide becomes active */
     view?: (index: number) => void;
+    /** a callback called when a slide is clicked */
+    click?: (index: number) => void;
     /** a callback called when the portal starts opening */
     entering?: () => void;
     /** a callback called when the portal opens */

package/dist/types.js

@@ -20,6 +20,7 @@ export const LightboxDefaultProps = {
     },
     controller: {
         focus: true,
+        aria: false,
         touchAction: "none",
     },
     on: {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.9.6",
+    "version": "1.11.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -96,25 +96,25 @@
         "@semantic-release/github": "^8.0.5",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.1",
-        "@types/jest": "^28.1.3",
-        "@types/react": "^18.0.14",
-        "@types/react-dom": "^18.0.5",
-        "@typescript-eslint/eslint-plugin": "^5.30.0",
-        "@typescript-eslint/parser": "^5.30.0",
-        "autoprefixer": "^10.4.7",
-        "eslint": "^8.18.0",
+        "@testing-library/user-event": "^14.3.0",
+        "@types/jest": "^28.1.6",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
+        "autoprefixer": "^10.4.8",
+        "eslint": "^8.20.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.6.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
-        "jest": "^28.1.2",
-        "jest-environment-jsdom": "^28.1.2",
+        "jest": "^28.1.3",
+        "jest-environment-jsdom": "^28.1.3",
         "lint-staged": "^13.0.3",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
@@ -123,8 +123,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "ts-jest": "^28.0.5",
+        "sass": "^1.54.0",
+        "ts-jest": "^28.0.7",
         "typescript": "^4.7.4"
     },
     "keywords": [

package/dist/core/hooks/useEnhancedEffect.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare const useEnhancedEffect: typeof React.useLayoutEffect;

package/dist/core/hooks/useEnhancedEffect.js

@@ -1,3 +0,0 @@
-import * as React from "react";
-import { hasWindow } from "../utils.js";
-export const useEnhancedEffect = hasWindow() ? React.useLayoutEffect : React.useEffect;