yet-another-react-lightbox 1.8.1 → 1.9.2

package/README.md

@@ -14,10 +14,11 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
 - **Performance:** preloads limited number of images without compromising performance or UX
 - **Responsive:** responsive images with automatic resolution switching are supported out of the box
 - **Video:** video slides are supported via an optional plugin
+- **Zoom:** image zoom is supported via an optional plugin
 - **Customization:** customize any UI element or add your own custom slides
 - **No bloat:** never bundle rarely used features; add optional features via plugins
-- **RTL:** compatible with RTL layout
 - **TypeScript:** type definitions come built-in in the package
+- **RTL:** compatible with RTL layout
 
 ## Documentation
 
@@ -99,13 +100,14 @@ const App = () => {
                     {
                         src: "/image1x3840.jpg",
                         alt: "image 1",
-                        aspectRatio: 3 / 2,
+                        width: 3840,
+                        height: 2560,
                         srcSet: [
-                            { src: "/image1x320.jpg", width: 320 },
-                            { src: "/image1x640.jpg", width: 640 },
-                            { src: "/image1x1200.jpg", width: 1200 },
-                            { src: "/image1x2048.jpg", width: 2048 },
-                            { src: "/image1x3840.jpg", width: 3840 },
+                            { src: "/image1x320.jpg", width: 320, height: 213 },
+                            { src: "/image1x640.jpg", width: 640, height: 427 },
+                            { src: "/image1x1200.jpg", width: 1200, height: 800 },
+                            { src: "/image1x2048.jpg", width: 2048, height: 1365 },
+                            { src: "/image1x3840.jpg", width: 3840, height: 2560 },
                         ]
                     },
                     // ...
@@ -134,6 +136,7 @@ The following plugins come bundled in the package:
 - [Slideshow](https://yet-another-react-lightbox.vercel.app/plugins/slideshow) - adds slideshow autoplay feature
 - [Thumbnails](https://yet-another-react-lightbox.vercel.app/plugins/thumbnails) - adds thumbnails track
 - [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
+- [Zoom](https://yet-another-react-lightbox.vercel.app/plugins/zoom) - adds image zoom feature
 
 ## License
 

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

@@ -4,4 +4,4 @@ export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonH
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;
 };
-export declare const IconButton: React.FC<IconButtonProps>;
+export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "value" | "children" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "icon" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/core/components/IconButton.js

@@ -1,3 +1,4 @@
 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
-export const IconButton = ({ label, className, icon: Icon, renderIcon, onClick, ...rest }) => (React.createElement("button", { type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon") })));
+export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, ...rest }, ref) => (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon") }))));
+IconButton.displayName = "IconButton";

package/dist/core/components/ImageSlide.js

@@ -5,7 +5,7 @@ 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 }) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
     const { publish } = useEvents();
@@ -40,32 +40,28 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) =>
     const onError = React.useCallback(() => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
+    const cover = image.imageFit === "cover" || (image.imageFit !== "contain" && imageFit === "cover");
+    const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
+    const maxWidth = adjustDevicePixelRatio(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 = adjustDevicePixelRatio(nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height).filter((x) => Boolean(x))) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), (image.aspectRatio && maxWidth ? maxWidth / image.aspectRatio : (_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0));
+    const style = maxWidth && maxHeight ? { maxWidth, maxHeight } : undefined;
+    const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
+    const estimateActualWidth = () => {
+        if (rect && !cover) {
+            if (image.width && image.height) {
+                return (rect.height / image.height) * image.width;
+            }
+            if (image.aspectRatio) {
+                return rect.height * image.aspectRatio;
+            }
+        }
+        return Number.MAX_VALUE;
+    };
+    const sizes = srcSet && rect && hasWindow()
+        ? `${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"), (image.imageFit === "cover" || (image.imageFit !== "contain" && imageFit === "cover")) &&
-                cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
-                ? {
-                    ...(rect && hasWindow()
-                        ? {
-                            sizes: `${Math.ceil((Math.min(image.aspectRatio ? rect.height * image.aspectRatio : Number.MAX_VALUE, rect.width) /
-                                window.innerWidth) *
-                                100)}vw`,
-                        }
-                        : null),
-                    srcSet: image.srcSet
-                        .sort((a, b) => a.width - b.width)
-                        .map((item) => `${item.src} ${item.width}w`)
-                        .join(", "),
-                    style: {
-                        maxWidth: `${adjustDevicePixelRatio(Math.max(...image.srcSet.map((x) => x.width)))}px`,
-                    },
-                }
-                : {
-                    style: imageRef.current && ((_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) > 0
-                        ? {
-                            maxWidth: `${adjustDevicePixelRatio(imageRef.current.naturalWidth)}px`,
-                        }
-                        : undefined,
-                }), src: image.src }),
+        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 }),
         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/contexts/Timeouts.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { makeUseContext } from "../utils.js";
+import { isDefined, makeUseContext } from "../utils.js";
 const TimeoutsContext = React.createContext(null);
 export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
 export const TimeoutsProvider = ({ children }) => {
@@ -16,7 +16,7 @@ export const TimeoutsProvider = ({ children }) => {
         return id;
     };
     const clearTimeout = (id) => {
-        if (typeof id !== "undefined") {
+        if (isDefined(id)) {
             removeTimeout(id);
             window.clearTimeout(id);
         }

package/dist/core/hooks/useSensors.js

@@ -4,7 +4,10 @@ export const useSensors = () => {
     return React.useMemo(() => {
         const notifySubscribers = (type, event) => {
             var _a;
-            (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => listener(event));
+            (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => {
+                if (!event.isPropagationStopped())
+                    listener(event);
+            });
         };
         return {
             registerSensors: {
@@ -25,7 +28,7 @@ export const useSensors = () => {
                 if (!subscribers[type]) {
                     subscribers[type] = [];
                 }
-                subscribers[type].push(callback);
+                subscribers[type].unshift(callback);
                 return () => {
                     const listeners = subscribers[type];
                     if (listeners) {

package/dist/core/modules/Controller.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Component, ComponentProps } from "../../types.js";
-import { SubscribeSensors } from "../hooks/index.js";
+import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
 declare type ControllerState = {
     currentIndex: number;
     globalIndex: number;
@@ -8,6 +8,9 @@ declare type ControllerState = {
 export declare type ControllerContextType = ControllerState & {
     latestProps: React.MutableRefObject<ComponentProps>;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
+    transferFocus: () => void;
+    containerRect: ContainerRect;
+    containerRef: React.RefObject<HTMLDivElement>;
 };
 export declare const useController: () => ControllerContextType;
 export declare const Controller: Component;

package/dist/core/modules/Controller.js

@@ -8,7 +8,7 @@ const SWIPE_OFFSET_THRESHOLD = 30;
 const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
 export const Controller = ({ children, ...props }) => {
-    const { containerRef, setContainerRef } = useContainerRect();
+    const { containerRef, setContainerRef, containerRect } = useContainerRect();
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
     const { setTimeout, clearTimeout } = useTimeouts();
@@ -31,7 +31,7 @@ export const Controller = ({ children, ...props }) => {
     refs.current.props = props;
     useEnhancedEffect(() => {
         const preventDefault = (event) => {
-            if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+            if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
                 event.preventDefault();
             }
         };
@@ -269,12 +269,24 @@ export const Controller = ({ children, ...props }) => {
         }
     }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender, isSwipeValid, containerRef]);
     React.useEffect(() => subscribeSensors("onWheel", onWheel), [subscribeSensors, onWheel]);
+    const transferFocus = React.useCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, [containerRef]);
     const context = React.useMemo(() => ({
         latestProps,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
         subscribeSensors,
-    }), [latestProps, state.currentIndex, state.globalIndex, subscribeSensors]);
+        transferFocus,
+        containerRect,
+        containerRef,
+    }), [
+        latestProps,
+        state.currentIndex,
+        state.globalIndex,
+        subscribeSensors,
+        transferFocus,
+        containerRect,
+        containerRef,
+    ]);
     return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), cssClass("fullsize"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
             ...(refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
                 ? {
@@ -286,7 +298,6 @@ export const Controller = ({ children, ...props }) => {
                     [cssVar("controller_touch_action")]: props.controller.touchAction,
                 }
                 : null),
-        }, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
-        React.createElement(ControllerContext.Provider, { value: context }, children)));
+        }, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/core/modules/Navigation.js

@@ -12,11 +12,11 @@ export const Navigation = ({ slides, carousel: { finite }, labels, render: { but
     const { currentIndex, subscribeSensors } = useController();
     const { publish } = useEvents();
     const isRTL = useLatest(useRTL());
-    React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
-        if (event.code === "ArrowLeft") {
+    React.useEffect(() => subscribeSensors("onKeyDown", (event) => {
+        if (event.key === "ArrowLeft") {
             publish(isRTL.current ? "next" : "prev");
         }
-        else if (event.code === "ArrowRight") {
+        else if (event.key === "ArrowRight") {
             publish(isRTL.current ? "prev" : "next");
         }
     }), [subscribeSensors, publish, isRTL]);

package/dist/core/utils.d.ts

@@ -7,4 +7,6 @@ export declare const label: (labels: Labels | undefined, lbl: string) => string;
 export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
 export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
 export declare const hasWindow: () => boolean;
+export declare const isDefined: <T = any>(x: T | undefined) => x is T;
 export declare const adjustDevicePixelRatio: (value: number) => number;
+export declare const round: (value: number, decimals?: number) => number;

package/dist/core/utils.js

@@ -17,4 +17,9 @@ export const makeUseContext = (name, contextName, context) => () => {
     return ctx;
 };
 export const hasWindow = () => typeof window !== "undefined";
+export const isDefined = (x) => typeof x !== "undefined";
 export const adjustDevicePixelRatio = (value) => hasWindow() ? Math.round(value / (window.devicePixelRatio || 1)) : value;
+export const round = (value, decimals = 0) => {
+    const factor = 10 ** decimals;
+    return Math.round((value + Number.EPSILON) * factor) / factor;
+};

package/dist/plugins/Captions.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cssClass, cssVar, makeUseContext } from "../core/utils.js";
+import { cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
 import { useEvents } from "../core/contexts/Events.js";
 import { createModule } from "../core/index.js";
 const defaultTextAlign = "start";
@@ -27,7 +27,7 @@ export const CaptionsComponent = ({ children }) => {
     const { subscribe } = useEvents();
     const [toolbarWidth, setToolbarWidth] = React.useState();
     React.useEffect(() => subscribe("toolbar-width", (topic, event) => {
-        if (typeof event === "undefined" || typeof event === "number") {
+        if (!isDefined(event) || typeof event === "number") {
             setToolbarWidth(event);
         }
     }), [subscribe]);

package/dist/plugins/Fullscreen.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Component, LightboxProps, Plugin, Render } from "../types.js";
+import { Component, LightboxProps, Plugin } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
         /** if `true`, enter fullscreen mode automatically when the lightbox opens */
@@ -37,9 +37,8 @@ declare global {
 }
 export declare const FullscreenContainer: Component;
 /** Fullscreen button props */
-export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
+export declare type FullscreenButtonProps = Pick<LightboxProps, "labels" | "render"> & {
     auto: boolean;
-    render: Render;
 };
 /** Fullscreen button */
 export declare const FullscreenButton: React.FC<FullscreenButtonProps>;

package/dist/plugins/Thumbnails.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Component, LightboxProps, Plugin } from "../types.js";
+import { Component, DeepNonNullable, LightboxProps, Plugin } from "../types.js";
 import { ContainerRect } from "../core/index.js";
 export declare type Position = "top" | "bottom" | "start" | "end";
 declare module "../types.js" {
@@ -33,9 +33,6 @@ declare module "../types.js" {
         }) => React.ReactNode;
     }
 }
-declare type DeepNonNullable<T> = NonNullable<{
-    [K in keyof T]-?: NonNullable<T[K]>;
-}>;
 declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
 declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render"> & {
     container: React.RefObject<HTMLDivElement>;

package/dist/plugins/Thumbnails.js

@@ -213,8 +213,8 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
             return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
         }))));
 };
-export const ThumbnailsComponent = ({ thumbnails: originalThumbnails, slides, index, carousel, animation, render, children, }) => {
-    const thumbnails = { ...defaultThumbnailsProps, ...originalThumbnails };
+export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, children, }) => {
+    const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
     const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height } }));
     return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`)), cssClass("fullsize")) },
@@ -223,10 +223,10 @@ export const ThumbnailsComponent = ({ thumbnails: originalThumbnails, slides, in
         (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
 };
 export const Thumbnails = ({ augment, contains, append, addParent }) => {
-    augment(({ thumbnails: originalThumbnails, ...restProps }) => ({
+    augment(({ thumbnails, ...restProps }) => ({
         thumbnails: {
             ...defaultThumbnailsProps,
-            ...originalThumbnails,
+            ...thumbnails,
         },
         ...restProps,
     }));

package/dist/plugins/Zoom.d.ts

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

package/dist/plugins/Zoom.js

@@ -0,0 +1,425 @@
+import * as React from "react";
+import { adjustDevicePixelRatio, cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
+const defaultZoomProps = {
+    maxZoomPixelRatio: 1,
+    zoomInMultiplier: 2,
+    doubleTapDelay: 300,
+    doubleClickDelay: 500,
+    doubleClickMaxStops: 2,
+    keyboardMoveDistance: 50,
+    wheelZoomDistanceFactor: 100,
+    pinchZoomDistanceFactor: 100,
+};
+const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
+    React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
+    React.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })));
+const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" }));
+const ZoomContext = React.createContext(null);
+const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
+const ZoomContextProvider = ({ children }) => {
+    const [minZoom, setMinZoom] = React.useState(false);
+    const [maxZoom, setMaxZoom] = React.useState(false);
+    const [zoomSupported, setZoomSupported] = React.useState(false);
+    const context = React.useMemo(() => ({
+        minZoom,
+        maxZoom,
+        zoomSupported,
+        setMinZoom,
+        setMaxZoom,
+        setZoomSupported,
+    }), [minZoom, maxZoom, zoomSupported]);
+    return React.createElement(ZoomContext.Provider, { value: context }, children);
+};
+const ZoomButton = React.forwardRef(({ labels, render, zoomIn, onLoseFocus }, ref) => {
+    const wasEnabled = React.useRef(false);
+    const wasFocused = React.useRef(false);
+    const { zoomSupported, minZoom, maxZoom } = useZoom();
+    const { publish } = useEvents();
+    const disabled = !zoomSupported || (zoomIn ? maxZoom : minZoom);
+    const onClick = () => publish(zoomIn ? "zoom-in" : "zoom-out");
+    const onFocus = React.useCallback(() => {
+        wasFocused.current = true;
+    }, []);
+    const onBlur = React.useCallback(() => {
+        wasFocused.current = false;
+    }, []);
+    React.useEffect(() => {
+        if (disabled && wasEnabled.current && wasFocused.current) {
+            onLoseFocus();
+        }
+        if (!disabled) {
+            wasEnabled.current = true;
+        }
+    }, [disabled, onLoseFocus]);
+    if (zoomIn && render.buttonZoomIn)
+        return (React.createElement(React.Fragment, null, render.buttonZoomIn({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    if (zoomIn && render.buttonZoomOut)
+        return (React.createElement(React.Fragment, null, render.buttonZoomOut({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    return (React.createElement(IconButton, { ref: ref, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur }));
+});
+ZoomButton.displayName = "ZoomButton";
+const ZoomButtonsGroup = ({ labels, render }) => {
+    const zoomInRef = React.useRef(null);
+    const zoomOutRef = React.useRef(null);
+    const { transferFocus } = useController();
+    const focusSibling = React.useCallback((sibling) => {
+        var _a, _b;
+        if (!((_a = sibling.current) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            (_b = sibling.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else {
+            transferFocus();
+        }
+    }, [transferFocus]);
+    const focusZoomIn = React.useCallback(() => focusSibling(zoomInRef), [focusSibling]);
+    const focusZoomOut = React.useCallback(() => focusSibling(zoomOutRef), [focusSibling]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ZoomButton, { ref: zoomInRef, key: "zoomIn", zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
+        React.createElement(ZoomButton, { ref: zoomOutRef, key: "zoomOut", labels: labels, render: render, onLoseFocus: focusZoomIn })));
+};
+const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+    var _a, _b, _c;
+    let slideRect = { width: 0, height: 0 };
+    let maxSlideRect = { width: 0, height: 0 };
+    if (rect && !("type" in slide) && "src" in slide) {
+        const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []).concat(slide.width ? [slide.width] : []));
+        const height = Math.max(...((_c = (_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.height).filter((x) => Boolean(x))) !== null && _c !== void 0 ? _c : (slide.aspectRatio ? [width / slide.aspectRatio] : [])).concat(slide.height ? [slide.height] : []));
+        if (width > 0 && height > 0 && rect.width > 0 && rect.height > 0) {
+            maxSlideRect = cover
+                ? {
+                    width: Math.round(Math.min(width, (rect.width / rect.height) * height)),
+                    height: Math.round(Math.min(height, (rect.height / rect.width) * width)),
+                }
+                : { width, height };
+            maxSlideRect = {
+                width: adjustDevicePixelRatio(maxSlideRect.width) * maxZoomPixelRatio,
+                height: adjustDevicePixelRatio(maxSlideRect.height) * maxZoomPixelRatio,
+            };
+            slideRect = cover
+                ? {
+                    width: Math.min(rect.width, maxSlideRect.width),
+                    height: Math.min(rect.height, maxSlideRect.height),
+                }
+                : {
+                    width: Math.round(Math.min(rect.width, (rect.height / height) * width)),
+                    height: Math.round(Math.min(rect.height, (rect.width / width) * height)),
+                };
+        }
+    }
+    return { slideRect, maxSlideRect };
+};
+const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps }) => {
+    var _a;
+    const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
+    const { setMinZoom: currentSetMinZoom, setMaxZoom: currentSetMaxZoom } = useZoom();
+    const { setContainerRef, containerRef: currentContainerRef, containerRect: currentContainerRect, } = useContainerRect();
+    const { subscribeSensors, containerRef: currentControllerRef, containerRect: currentControllerRect, } = useController();
+    const { subscribe } = useEvents();
+    const currentReduceMotion = useMotionPreference();
+    const { slideRect: currentSlideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, currentContainerRect);
+    const currentMaxZoom = currentSlideRect.width
+        ? Math.max(round(currentMaxSlideRect.width / currentSlideRect.width, 5), 1)
+        : 1;
+    const [state, setState] = React.useState({ zoom: 1, offsetX: 0, offsetY: 0 });
+    const refs = React.useRef({
+        state,
+        slideRect: currentSlideRect,
+        containerRef: currentContainerRef,
+        controllerRef: currentControllerRef,
+        containerRect: currentContainerRect,
+        controllerRect: currentControllerRect,
+        maxZoom: currentMaxZoom,
+        reduceMotion: currentReduceMotion,
+        setMinZoom: currentSetMinZoom,
+        setMaxZoom: currentSetMaxZoom,
+        activePointers: [],
+        lastPointerDown: 0,
+        zoomProps,
+    });
+    refs.current.state = state;
+    refs.current.slideRect = currentSlideRect;
+    refs.current.containerRef = currentContainerRef;
+    refs.current.controllerRef = currentControllerRef;
+    refs.current.containerRect = currentContainerRect;
+    refs.current.controllerRect = currentControllerRect;
+    refs.current.maxZoom = currentMaxZoom;
+    refs.current.reduceMotion = currentReduceMotion;
+    refs.current.setMinZoom = currentSetMinZoom;
+    refs.current.setMaxZoom = currentSetMaxZoom;
+    refs.current.zoomAnimationDuration = animation.zoom;
+    refs.current.zoomProps = zoomProps;
+    const changeOffsets = React.useCallback((dx, dy, newZoom) => {
+        const { state: { zoom, offsetX, offsetY }, containerRect, slideRect, } = refs.current;
+        const targetZoom = newZoom || zoom;
+        const newOffsetX = offsetX - (dx || 0);
+        const newOffsetY = offsetY - (dy || 0);
+        const maxOffsetX = containerRect ? (slideRect.width * targetZoom - containerRect.width) / 2 / targetZoom : 0;
+        const maxOffsetY = containerRect ? (slideRect.height * targetZoom - containerRect.height) / 2 / targetZoom : 0;
+        setState((prev) => ({
+            ...prev,
+            offsetX: Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX),
+            offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
+        }));
+    }, []);
+    useEnhancedEffect(() => {
+        if (refs.current.state.zoom > 1) {
+            changeOffsets();
+        }
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    useEnhancedEffect(() => {
+        var _a, _b;
+        const { current } = refs;
+        const { zoomAnimation, zoomAnimationStart, zoomAnimationDuration, reduceMotion, containerRef } = current;
+        zoomAnimation === null || zoomAnimation === void 0 ? void 0 : zoomAnimation.cancel();
+        if (zoomAnimationStart && containerRef.current) {
+            current.zoomAnimation = (_b = (_a = containerRef.current).animate) === null || _b === void 0 ? void 0 : _b.call(_a, [
+                { transform: zoomAnimationStart },
+                {
+                    transform: `scale(${state.zoom}) translate3d(${state.offsetX}px, ${state.offsetY}px, 0)`,
+                },
+            ], {
+                duration: reduceMotion ? 0 : zoomAnimationDuration !== null && zoomAnimationDuration !== void 0 ? zoomAnimationDuration : 500,
+                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+            });
+            current.zoomAnimationStart = undefined;
+            if (current.zoomAnimation) {
+                current.zoomAnimation.onfinish = () => {
+                    current.zoomAnimation = undefined;
+                };
+            }
+        }
+    }, [state.zoom, state.offsetX, state.offsetY]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom } = refs.current;
+            const resetZoom = () => {
+                setState({ zoom: 1, offsetX: 0, offsetY: 0 });
+                setMinZoom(true);
+                setMaxZoom(false);
+            };
+            resetZoom();
+            return () => {
+                resetZoom();
+            };
+        }
+        return () => { };
+    }, [offset]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom, maxZoom } = refs.current;
+            setMinZoom(state.zoom <= 1);
+            setMaxZoom(state.zoom >= maxZoom);
+        }
+    }, [offset, state.zoom]);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
+    const translateCoordinates = React.useCallback((event) => {
+        const { controllerRef } = refs.current;
+        if (controllerRef.current) {
+            const { pageX, pageY } = event;
+            const { scrollX, scrollY } = window;
+            const { left, top, width, height } = controllerRef.current.getBoundingClientRect();
+            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
+        }
+        return [];
+    }, []);
+    const onKeyDown = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
+                event.stopPropagation();
+                changeOffsets(deltaX, deltaY);
+            };
+            if (event.key === "ArrowDown") {
+                move(0, keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowUp") {
+                move(0, -keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowLeft") {
+                move(-keyboardMoveDistance, 0);
+            }
+            else if (event.key === "ArrowRight") {
+                move(keyboardMoveDistance, 0);
+            }
+        }
+        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
+            changeZoom(zoom * zoomInMultiplier);
+        }
+        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
+            changeZoom(zoom / zoomInMultiplier);
+        }
+        else if (event.key === "0" && event.metaKey) {
+            changeZoom(1);
+        }
+    }, [changeZoom, changeOffsets]);
+    const onWheel = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
+        if (event.ctrlKey) {
+            event.stopPropagation();
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            changeOffsets(event.deltaX, event.deltaY);
+        }
+    }, [changeZoom, changeOffsets, translateCoordinates]);
+    const clearPointer = React.useCallback((event) => {
+        const { activePointers } = refs.current;
+        activePointers.splice(0, activePointers.length, ...activePointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const replacePointer = React.useCallback((event) => {
+        clearPointer(event);
+        refs.current.activePointers.push(event);
+    }, [clearPointer]);
+    const onPointerDown = React.useCallback((event) => {
+        var _a;
+        const { current } = refs;
+        const { state: { zoom }, containerRef, activePointers, lastPointerDown, maxZoom, zoomProps: { doubleTapDelay, doubleClickDelay, zoomInMultiplier, doubleClickMaxStops }, } = current;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+        }
+        const { timeStamp } = event;
+        if (activePointers.length === 0 &&
+            timeStamp - lastPointerDown < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
+            current.lastPointerDown = 0;
+            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+        }
+        else {
+            current.lastPointerDown = timeStamp;
+        }
+        replacePointer(event);
+        if (activePointers.length === 2) {
+            current.pinchZoomDistance = distance(activePointers[0], activePointers[1]);
+        }
+    }, [changeZoom, replacePointer, translateCoordinates]);
+    const onPointerMove = React.useCallback((event) => {
+        const { current } = refs;
+        const { state: { zoom }, activePointers, pinchZoomDistance, zoomProps: { pinchZoomDistanceFactor }, } = current;
+        const activePointer = activePointers.find((p) => p.pointerId === event.pointerId);
+        if (activePointers.length === 2 && pinchZoomDistance) {
+            event.stopPropagation();
+            replacePointer(event);
+            const currentDistance = distance(activePointers[0], activePointers[1]);
+            const delta = currentDistance - pinchZoomDistance;
+            if (Math.abs(delta) > 0) {
+                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...activePointers
+                    .map((x) => translateCoordinates(x))
+                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+                current.pinchZoomDistance = currentDistance;
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (activePointer) {
+                if (activePointers.length === 1) {
+                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
+                }
+                replacePointer(event);
+            }
+        }
+    }, [changeOffsets, replacePointer, changeZoom, translateCoordinates]);
+    const onPointerUp = React.useCallback((event) => {
+        const { current } = refs;
+        const { activePointers } = current;
+        if (activePointers.length === 2 && activePointers.find((p) => p.pointerId === event.pointerId)) {
+            current.pinchZoomDistance = undefined;
+        }
+        clearPointer(event);
+    }, [clearPointer]);
+    React.useEffect(() => offset === 0
+        ? cleanup(subscribe("zoom-in", () => changeZoom(refs.current.state.zoom * refs.current.zoomProps.zoomInMultiplier)), subscribe("zoom-out", () => changeZoom(refs.current.state.zoom / refs.current.zoomProps.zoomInMultiplier)), subscribeSensors("onKeyDown", onKeyDown), subscribeSensors("onWheel", onWheel), subscribeSensors("onPointerDown", onPointerDown), subscribeSensors("onPointerMove", onPointerMove), subscribeSensors("onPointerUp", onPointerUp), subscribeSensors("onPointerLeave", onPointerUp), subscribeSensors("onPointerCancel", onPointerUp))
+        : () => { }, [offset, subscribe, subscribeSensors, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onWheel, changeZoom]);
+    const { state: { zoom, offsetX, offsetY }, } = refs.current;
+    const scaledRect = offset === 0
+        ? {
+            width: rect.width * zoom,
+            height: rect.height * zoom,
+        }
+        : rect;
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    if (!rendered && !("type" in slide) && "src" in slide) {
+        rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, rect: scaledRect, render: render, imageFit: carousel.imageFit }));
+    }
+    return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("fullsize"), cssClass("flex_center")), ...(offset === 0
+            ? { style: { transform: `scale(${zoom}) translate3d(${offsetX}px, ${offsetY}px, 0)` } }
+            : null) }, rendered)) : null;
+};
+const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
+    var _a;
+    const { setZoomSupported } = useZoom();
+    const imageSlide = !("type" in slide);
+    const zoomSupported = imageSlide && ("srcSet" in slide || ("width" in slide && "height" in slide));
+    React.useEffect(() => {
+        if (offset === 0) {
+            setZoomSupported(zoomSupported);
+        }
+    }, [offset, zoomSupported, setZoomSupported]);
+    if (zoomSupported) {
+        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation }));
+    }
+    const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+    if (rendered) {
+        return React.createElement(React.Fragment, null, rendered);
+    }
+    if (imageSlide) {
+        return React.createElement(ImageSlide, { slide: slide, offset: offset, rect: rect, render: render, imageFit: carousel.imageFit });
+    }
+    return null;
+};
+export const ZoomModule = createModule("zoom", ZoomContextProvider);
+export const Zoom = ({ augment, append }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(ZoomButtonsGroup, { key: "zoom", labels: restProps.labels, render: render }), ...buttons],
+            ...restToolbar,
+        },
+        render: {
+            ...render,
+            slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation })),
+        },
+        zoom: {
+            ...defaultZoomProps,
+            ...zoom,
+        },
+        carousel,
+        animation,
+        ...restProps,
+    }));
+    append("controller", ZoomModule);
+};
+export default Zoom;

package/dist/plugins/captions.css

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

package/dist/plugins/index.d.ts

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

package/dist/plugins/index.js

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

package/dist/plugins/thumbnails.css

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

package/dist/styles.css

@@ -16,7 +16,6 @@
 .yarl__container {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   touch-action: var(--yarl__controller_touch_action, none);
 }
@@ -61,7 +60,6 @@
   -o-object-fit: contain;
      object-fit: contain;
   -moz-user-select: none;
-   -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -214,6 +212,7 @@
 .yarl__no_scroll {
   height: 100%;
   overflow: hidden;
+  overscroll-behavior: none;
 }
 .yarl__pad_scrollbar {
   padding-right: var(--yarl__scrollbar_padding, 17px);

package/dist/types.d.ts

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

package/package.json

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