yet-another-react-lightbox 1.8.0 → 1.9.1

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

@@ -3,9 +3,9 @@ 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 { 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/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/Controller.d.ts

@@ -1,14 +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>;
     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

@@ -1,21 +1,21 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
-import { cleanup, clsx, cssClass, cssVar, isRTL, makeUseContext } from "../utils.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: isRTL(node) }));
-        }
-    }, [containerRef]);
     React.useEffect(() => {
         var _a;
         if (refs.current.props.controller.focus) {
@@ -87,7 +81,7 @@ 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 &&
@@ -275,13 +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,
-        isRTL: state.isRTL,
         subscribeSensors,
-    }), [latestProps, state.currentIndex, state.globalIndex, state.isRTL, 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
                 ? {
@@ -293,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,5 +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 isRTL: (node: HTMLElement) => boolean;
+export declare const round: (value: number, decimals?: number) => number;

package/dist/core/utils.js

@@ -17,5 +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 isRTL = (node) => window.getComputedStyle(node).direction === "rtl";
+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,7 +1,7 @@
 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";
-declare type Position = "top" | "bottom" | "start" | "end";
+export declare type Position = "top" | "bottom" | "start" | "end";
 declare module "../types.js" {
     interface LightboxProps {
         /** Thumbnails plugin settings */
@@ -20,18 +20,19 @@ declare module "../types.js" {
             padding?: number;
             /** gap between thumbnails */
             gap?: number;
+            /** `object-fit` setting */
+            imageFit?: ImageFit;
         };
     }
     interface Render {
-        thumbnail: ({ slide, rect }: {
+        thumbnail?: ({ slide, rect, render, imageFit, }: {
             slide: Slide;
             rect: ContainerRect;
+            render: Render;
+            imageFit: ImageFit;
         }) => 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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, isRTL, useEnhancedEffect, useEvents, } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useEnhancedEffect, useEvents, useLatest, useMotionPreference, useRTL, } from "../core/index.js";
 const defaultThumbnailsProps = {
     position: "bottom",
     width: 120,
@@ -8,6 +8,7 @@ const defaultThumbnailsProps = {
     borderRadius: 4,
     padding: 4,
     gap: 16,
+    imageFit: "contain",
 };
 const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
 const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
@@ -16,9 +17,9 @@ const cssThumbnailPrefix = (value) => cssPrefix(`thumbnail${value ? `_${value}`
 const getSlide = (slides, index) => slides[((index % slides.length) + slides.length) % slides.length];
 const isHorizontal = (position) => ["top", "bottom"].includes(position);
 const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-const renderThumbnail = ({ slide, render, rect }) => {
+const renderThumbnail = ({ slide, render, rect, imageFit }) => {
     var _a;
-    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, rect });
+    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
     if (customThumbnail) {
         return customThumbnail;
     }
@@ -31,11 +32,11 @@ const renderThumbnail = ({ slide, render, rect }) => {
         }
     }
     else if ("src" in slide) {
-        return React.createElement(ImageSlide, { slide: slide, rect: rect });
+        return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
 };
-const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
+const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
         ...(fadeIn
             ? {
                 [cssVar(cssThumbnailPrefix("fadein_duration"))]: `${fadeIn.duration}ms`,
@@ -48,13 +49,16 @@ const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder,
                 [cssVar(cssThumbnailPrefix("fadeout_delay"))]: `${fadeOut.delay}ms`,
             }
             : null),
-    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect })));
+    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
 export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, }) => {
     const track = React.useRef(null);
     const [state, setState] = React.useState({
         index: startingIndex,
         offset: 0,
     });
+    const { publish, subscribe } = useEvents();
+    const reduceMotion = useLatest(useMotionPreference());
+    const isRTL = useLatest(useRTL());
     const refs = React.useRef({
         state,
         thumbnails,
@@ -67,12 +71,6 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
     refs.current.carousel = carousel;
     refs.current.animation = animation;
     const animationRef = React.useRef();
-    const { publish, subscribe } = useEvents();
-    React.useEffect(() => {
-        if (track.current) {
-            refs.current.isRTL = isRTL(track.current);
-        }
-    }, []);
     React.useEffect(() => subscribe("controller-swipe", (_, event) => {
         if (event && typeof event === "object" && "globalIndex" in event) {
             const { current } = refs;
@@ -106,7 +104,7 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
             animationRef.current = (_d = (_c = track.current).animate) === null || _d === void 0 ? void 0 : _d.call(_c, isHorizontal(current.thumbnails.position)
                 ? [
                     {
-                        transform: `translate3d(${(current.isRTL ? -1 : 1) *
+                        transform: `translate3d(${(isRTL.current ? -1 : 1) *
                             boxSize(current.thumbnails, current.thumbnails.width, true) *
                             state.offset +
                             current.animationOffset}px, 0, 0)`,
@@ -119,7 +117,7 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
                             current.animationOffset}px, 0)`,
                     },
                     { transform: "translate3d(0, 0, 0)" },
-                ], animationDuration);
+                ], reduceMotion.current ? 0 : animationDuration);
             if (animationRef.current) {
                 animationRef.current.onfinish = () => {
                     animationRef.current = undefined;
@@ -130,7 +128,7 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
             }
             current.animationOffset = 0;
         }
-    }, [state.index, state.offset]);
+    }, [state.index, state.offset, isRTL, reduceMotion]);
     const { index, offset } = state;
     const { finite, preload } = carousel;
     const items = [];
@@ -171,25 +169,24 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
             publish("prev", index - slideIndex);
         }
     };
+    const { width, height, border, borderRadius, padding, gap, imageFit } = thumbnails;
     return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass("flex_center")), style: {
-            ...(thumbnails.width !== defaultThumbnailsProps.width
-                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, thumbnails.width)}px` }
-                : null),
-            ...(thumbnails.height !== defaultThumbnailsProps.height
-                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, thumbnails.height)}px` }
+            ...(width !== defaultThumbnailsProps.width
+                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
                 : null),
-            ...(thumbnails.border !== defaultThumbnailsProps.border
-                ? { [cssVar(cssThumbnailPrefix("border"))]: `${thumbnails.border}px` }
+            ...(height !== defaultThumbnailsProps.height
+                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, height)}px` }
                 : null),
-            ...(thumbnails.borderRadius !== defaultThumbnailsProps.borderRadius
-                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${thumbnails.borderRadius}px` }
+            ...(border !== defaultThumbnailsProps.border
+                ? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
                 : null),
-            ...(thumbnails.padding !== defaultThumbnailsProps.padding
-                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${thumbnails.padding}px` }
+            ...(borderRadius !== defaultThumbnailsProps.borderRadius
+                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
                 : null),
-            ...(thumbnails.gap !== defaultThumbnailsProps.gap
-                ? { [cssVar(cssThumbnailPrefix("gap"))]: `${thumbnails.gap}px` }
+            ...(padding !== defaultThumbnailsProps.padding
+                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
                 : null),
+            ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
         } },
         React.createElement("nav", { ref: track, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
             var _a;
@@ -213,11 +210,11 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
                         : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+            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")) },
@@ -226,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,
     }));