yet-another-react-lightbox 1.7.1 → 1.9.0

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 },
                         ]
                     },
                     // ...
@@ -132,7 +134,9 @@ The following plugins come bundled in the package:
 - [Fullscreen](https://yet-another-react-lightbox.vercel.app/plugins/fullscreen) - adds support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.vercel.app/plugins/inline) - adds support for inline rendering mode
 - [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 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.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { Render, SlideImage } from "../../types.js";
+import { ImageFit, Render, SlideImage } from "../../types.js";
 import { ContainerRect } from "../hooks/index.js";
 export declare type ImageSlideProps = {
     slide: SlideImage;
-    offset: number;
+    offset?: number;
     render?: Render;
     rect?: ContainerRect;
+    imageFit?: ImageFit;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -3,13 +3,11 @@ import { adjustDevicePixelRatio, clsx, cssClass, hasWindow } from "../utils.js";
 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";
-import { useController } from "../modules/Controller.js";
-export const ImageSlide = ({ slide: image, offset, render, rect }) => {
-    var _a;
+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, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
-    const { latestProps } = useController();
     const { publish } = useEvents();
     const imageRef = React.useRef(null);
     React.useEffect(() => {
@@ -42,33 +40,28 @@ export const ImageSlide = ({ slide: image, offset, render, rect }) => {
     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"), (image.imageFit === "cover" ||
-                (image.imageFit !== "contain" && latestProps.current.carousel.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/config.js

@@ -21,6 +21,17 @@ const traverse = (nodes, target, apply) => nodes.flatMap((node) => { var _a; ret
 export const withPlugins = (root, plugins) => {
     let config = root;
     const augmentations = [];
+    const contains = (target) => {
+        const nodes = [...config];
+        while (nodes.length > 0) {
+            const node = nodes.pop();
+            if ((node === null || node === void 0 ? void 0 : node.module.name) === target)
+                return true;
+            if (node === null || node === void 0 ? void 0 : node.children)
+                nodes.push(...node.children);
+        }
+        return false;
+    };
     const addParent = (target, module) => {
         if (target === "") {
             config = [createNode(module, config)];
@@ -28,6 +39,9 @@ export const withPlugins = (root, plugins) => {
         }
         config = traverse(config, target, (node) => [createNode(module, [node])]);
     };
+    const append = (target, module) => {
+        config = traverse(config, target, (node) => [createNode(node.module, [createNode(module, node.children)])]);
+    };
     const addChild = (target, module, precede) => {
         config = traverse(config, target, (node) => {
             var _a;
@@ -58,7 +72,9 @@ export const withPlugins = (root, plugins) => {
     };
     plugins === null || plugins === void 0 ? void 0 : plugins.forEach((plugin) => {
         plugin({
+            contains,
             addParent,
+            append,
             addChild,
             addSibling,
             replace,

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/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./useContainerRect.js";
 export * from "./useEnhancedEffect.js";
 export * from "./useLatest.js";
+export * from "./useMotionPreference.js";
+export * from "./useRTL.js";
 export * from "./useSensors.js";

package/dist/core/hooks/index.js

@@ -1,4 +1,6 @@
 export * from "./useContainerRect.js";
 export * from "./useEnhancedEffect.js";
 export * from "./useLatest.js";
+export * from "./useMotionPreference.js";
+export * from "./useRTL.js";
 export * from "./useSensors.js";

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

@@ -0,0 +1 @@
+export declare const useMotionPreference: () => boolean;

package/dist/core/hooks/useMotionPreference.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { useEnhancedEffect } from "./useEnhancedEffect.js";
+export const useMotionPreference = () => {
+    const [reduceMotion, setReduceMotion] = React.useState(false);
+    useEnhancedEffect(() => {
+        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);
+    }, []);
+    return reduceMotion;
+};

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

@@ -0,0 +1 @@
+export declare const useRTL: () => boolean;

package/dist/core/hooks/useRTL.js

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

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/Carousel.js

@@ -13,7 +13,7 @@ const CarouselSlide = ({ slide, offset }) => {
         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 });
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit }));
         }
         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.d.ts

@@ -1,15 +1,16 @@
 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;
-    isRTL: boolean;
 };
 export declare type ControllerContextType = ControllerState & {
     latestProps: React.MutableRefObject<ComponentProps>;
-    containerRef: React.RefObject<HTMLDivElement>;
     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

@@ -2,20 +2,20 @@ 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, useSensors } from "../hooks/index.js";
+import { useContainerRect, useEnhancedEffect, useLatest, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 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();
+    const isRTL = useLatest(useRTL());
     const [state, setState] = React.useState({
         currentIndex: props.index,
         globalIndex: props.index,
-        isRTL: false,
     });
     const latestProps = useLatest(props);
     const refs = React.useRef({
@@ -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();
             }
         };
@@ -45,12 +45,6 @@ export const Controller = ({ children, ...props }) => {
             }
         };
     }, [containerRef]);
-    useEnhancedEffect(() => {
-        const node = containerRef.current;
-        if (node) {
-            setState((prev) => ({ ...prev, isRTL: window.getComputedStyle(node).direction === "rtl" }));
-        }
-    }, [containerRef]);
     React.useEffect(() => {
         var _a;
         if (refs.current.props.controller.focus) {
@@ -87,13 +81,13 @@ export const Controller = ({ children, ...props }) => {
         clearTimeout(current.swipeIntentCleanup);
         current.swipeIntentCleanup = undefined;
     }, [clearTimeout]);
-    const rtl = React.useCallback((value) => (refs.current.state.isRTL ? -1 : 1) * (typeof value === "number" ? value : 1), [refs]);
+    const rtl = React.useCallback((value) => (isRTL.current ? -1 : 1) * (typeof value === "number" ? value : 1), [isRTL]);
     const isSwipeValid = React.useCallback((offset) => {
         const { state: { currentIndex }, props: { carousel, slides }, } = refs.current;
         return !(carousel.finite &&
             ((rtl(offset) > 0 && currentIndex === 0) || (rtl(offset) < 0 && currentIndex === slides.length - 1)));
     }, [rtl]);
-    const swipe = React.useCallback((direction) => {
+    const swipe = React.useCallback((direction, count = 1) => {
         var _a;
         const { current } = refs;
         const slidesCount = current.props.slides.length;
@@ -101,7 +95,7 @@ export const Controller = ({ children, ...props }) => {
         const { currentIndex, globalIndex } = current.state;
         const { swipeOffset } = current;
         let newSwipeState = "swipe-animation";
-        let newSwipeAnimationDuration = swipeAnimationDuration;
+        let newSwipeAnimationDuration = swipeAnimationDuration * count;
         if (!direction) {
             const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
@@ -126,8 +120,8 @@ export const Controller = ({ children, ...props }) => {
         const newState = {};
         if (direction === "prev") {
             if (isSwipeValid(rtl(1))) {
-                newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
-                newState.globalIndex = globalIndex - 1;
+                newState.currentIndex = (currentIndex - count + slidesCount) % slidesCount;
+                newState.globalIndex = globalIndex - count;
             }
             else {
                 newSwipeState = undefined;
@@ -136,14 +130,15 @@ export const Controller = ({ children, ...props }) => {
         }
         else if (direction === "next") {
             if (isSwipeValid(rtl(-1))) {
-                newState.currentIndex = (currentIndex + 1) % slidesCount;
-                newState.globalIndex = globalIndex + 1;
+                newState.currentIndex = (currentIndex + count) % slidesCount;
+                newState.globalIndex = globalIndex + count;
             }
             else {
                 newSwipeState = undefined;
                 newSwipeAnimationDuration = swipeAnimationDuration;
             }
         }
+        newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
         resetSwipe();
         current.swipeState = newSwipeState;
         current.swipeAnimationDuration = newSwipeAnimationDuration;
@@ -154,9 +149,10 @@ export const Controller = ({ children, ...props }) => {
                 rerender();
             }, newSwipeAnimationDuration);
         }
+        publish("controller-swipe", { ...newState, animationDuration: current.swipeAnimationDuration });
         setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl]);
-    React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl, publish]);
+    React.useEffect(() => cleanup(subscribe("prev", (_, count) => swipe("prev", typeof count === "number" ? count : undefined)), subscribe("next", (_, count) => swipe("next", typeof count === "number" ? count : undefined))), [subscribe, swipe]);
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "Escape") {
             publish("close");
@@ -273,15 +269,25 @@ 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,
-        containerRef,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
-        isRTL: state.isRTL,
         subscribeSensors,
-    }), [latestProps, containerRef, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
+        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
                 ? {
                     [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
@@ -292,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

@@ -4,18 +4,20 @@ import { cssClass, label as translateLabel } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
 import { useEvents } from "../contexts/index.js";
 import { useController } from "./Controller.js";
+import { useLatest, useRTL } from "../hooks/index.js";
 export const NavigationButton = ({ publish, labels, label, icon, renderIcon, action, disabled, }) => (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, "aria-disabled": disabled, onClick: () => {
         publish(action);
     } }));
 export const Navigation = ({ slides, carousel: { finite }, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
-    const { currentIndex, subscribeSensors, isRTL } = useController();
+    const { currentIndex, subscribeSensors } = useController();
     const { publish } = useEvents();
-    React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
-        if (event.code === "ArrowLeft") {
-            publish(isRTL ? "next" : "prev");
+    const isRTL = useLatest(useRTL());
+    React.useEffect(() => subscribeSensors("onKeyDown", (event) => {
+        if (event.key === "ArrowLeft") {
+            publish(isRTL.current ? "next" : "prev");
         }
-        else if (event.code === "ArrowRight") {
-            publish(isRTL ? "prev" : "next");
+        else if (event.key === "ArrowRight") {
+            publish(isRTL.current ? "prev" : "next");
         }
     }), [subscribeSensors, publish, isRTL]);
     return (React.createElement(React.Fragment, null,

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 { 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 */
@@ -35,13 +35,13 @@ declare global {
         msRequestFullscreen?: () => void;
     }
 }
+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: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
+export declare const FullscreenButton: React.FC<FullscreenButtonProps>;
 /** Fullscreen plugin */
 export declare const Fullscreen: Plugin;
 export default Fullscreen;

package/dist/plugins/Fullscreen.js

@@ -1,12 +1,20 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useController, useLatest } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, IconButton, label, makeUseContext, useLatest, } from "../core/index.js";
+const FullscreenContext = React.createContext(null);
+const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
+export const FullscreenContainer = ({ children }) => {
+    const containerRef = React.useRef(null);
+    const context = React.useMemo(() => ({ containerRef }), []);
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass("fullscreen"), cssClass("fullsize")) },
+        React.createElement(FullscreenContext.Provider, { value: context }, children)));
+};
 const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
 export const FullscreenButton = ({ auto, labels, render }) => {
     const [mounted, setMounted] = React.useState(false);
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
-    const { containerRef } = useController();
+    const { containerRef } = useFullscreen();
     const isFullscreenEnabled = () => {
         var _a, _b, _c, _d;
         return (_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false;
@@ -94,7 +102,7 @@ export const FullscreenButton = ({ auto, labels, render }) => {
         return null;
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
 };
-export const Fullscreen = ({ augment }) => {
+export const Fullscreen = ({ augment, contains, addParent }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {
             buttons: [
@@ -105,5 +113,6 @@ export const Fullscreen = ({ augment }) => {
         },
         ...restProps,
     }));
+    addParent(contains("thumbnails") ? "thumbnails" : "controller", createModule("fullscreen", FullscreenContainer));
 };
 export default Fullscreen;