yet-another-react-lightbox 1.8.0 → 1.8.1

package/dist/core/components/ImageSlide.js

@@ -3,7 +3,7 @@ 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;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);

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

@@ -4,7 +4,6 @@ import { SubscribeSensors } from "../hooks/index.js";
 declare type ControllerState = {
     currentIndex: number;
     globalIndex: number;
-    isRTL: boolean;
 };
 export declare type ControllerContextType = ControllerState & {
     latestProps: React.MutableRefObject<ComponentProps>;

package/dist/core/modules/Controller.js

@@ -1,8 +1,8 @@
 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);
@@ -12,10 +12,10 @@ export const Controller = ({ children, ...props }) => {
     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({
@@ -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 &&
@@ -279,9 +273,8 @@ export const Controller = ({ children, ...props }) => {
         latestProps,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
-        isRTL: state.isRTL,
         subscribeSensors,
-    }), [latestProps, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
+    }), [latestProps, state.currentIndex, state.globalIndex, subscribeSensors]);
     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
                 ? {

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();
+    const isRTL = useLatest(useRTL());
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "ArrowLeft") {
-            publish(isRTL ? "next" : "prev");
+            publish(isRTL.current ? "next" : "prev");
         }
         else if (event.code === "ArrowRight") {
-            publish(isRTL ? "prev" : "next");
+            publish(isRTL.current ? "prev" : "next");
         }
     }), [subscribeSensors, publish, isRTL]);
     return (React.createElement(React.Fragment, null,

package/dist/core/utils.d.ts

@@ -8,4 +8,3 @@ 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 adjustDevicePixelRatio: (value: number) => number;
-export declare const isRTL: (node: HTMLElement) => boolean;

package/dist/core/utils.js

@@ -18,4 +18,3 @@ export const makeUseContext = (name, contextName, context) => () => {
 };
 export const hasWindow = () => typeof window !== "undefined";
 export const adjustDevicePixelRatio = (value) => hasWindow() ? Math.round(value / (window.devicePixelRatio || 1)) : value;
-export const isRTL = (node) => window.getComputedStyle(node).direction === "rtl";

package/dist/plugins/Thumbnails.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Component, 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,12 +20,16 @@ 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;
     }
 }

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,7 +210,7 @@ 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, }) => {

package/dist/styles.css

@@ -144,7 +144,6 @@
   display: flex;
   justify-content: flex-end;
   padding: 8px;
-  gap: 8px;
 }
 [dir=rtl] .yarl__toolbar {
   inset: 0 auto auto 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",