yet-another-react-lightbox 2.5.0 → 2.6.0

package/dist/core/contexts/LightboxState.d.ts

@@ -9,6 +9,7 @@ export type LightboxState = {
 export type LightboxStateAction = {
     increment: number;
     duration?: number;
+    easing?: string;
 } | undefined;
 export declare const useLightboxState: () => {
     state: LightboxState;

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

@@ -1,10 +1,12 @@
 import * as React from "react";
-export declare const useAnimation: <T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: (snapshot: T, rect: DOMRect, translate: {
+export type ComputeAnimation<T> = (snapshot: T, rect: DOMRect, translate: {
     x: number;
     y: number;
     z: number;
 }) => {
     keyframes: Keyframe[];
     duration: number;
+    easing?: string;
     onfinish?: () => void;
-} | undefined) => (currentSnapshot: T | undefined) => void;
+} | undefined;
+export declare const useAnimation: <T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>) => (currentSnapshot: T | undefined) => void;

package/dist/core/hooks/useAnimation.js

@@ -28,10 +28,10 @@ export const useAnimation = (nodeRef, computeAnimation) => {
     useLayoutEffect(() => {
         var _a, _b, _c;
         if (nodeRef.current && snapshot.current !== undefined && !reduceMotion) {
-            const { keyframes, duration, onfinish } = computeAnimation(snapshot.current, nodeRef.current.getBoundingClientRect(), currentTransformation(nodeRef.current)) || {};
+            const { keyframes, duration, easing, onfinish } = computeAnimation(snapshot.current, nodeRef.current.getBoundingClientRect(), currentTransformation(nodeRef.current)) || {};
             if (keyframes && duration) {
                 (_a = animation.current) === null || _a === void 0 ? void 0 : _a.cancel();
-                animation.current = (_c = (_b = nodeRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, keyframes, duration);
+                animation.current = (_c = (_b = nodeRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, keyframes, { duration, easing });
                 if (animation.current) {
                     animation.current.onfinish = () => {
                         animation.current = undefined;

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

@@ -5,7 +5,6 @@ import { LightboxStateAction } from "../contexts/index.js";
 import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 export type NavigationAction = {
     count?: number;
-    animationDuration?: number;
 };
 declare module "../" {
     interface EventTypes {

package/dist/core/modules/Controller.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
+import { cleanup, clsx, cssClass, cssVar, getAnimationEasing, getNavigationAnimationDuration, getSwipeAnimationDuration, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
@@ -48,16 +48,20 @@ export const Controller = ({ children, ...props }) => {
                     { transform: "translateX(0)" },
                 ],
                 duration: state.animation.duration,
+                easing: state.animation.easing,
             };
         }
         return undefined;
     });
     const swipe = useEventCallback((action) => {
-        var _a, _b;
-        const swipeDuration = (_a = action.animationDuration) !== null && _a !== void 0 ? _a : animation.swipe;
+        var _a;
         const currentSwipeOffset = action.offset || 0;
+        const swipeDuration = !currentSwipeOffset
+            ? getNavigationAnimationDuration(animation)
+            : getSwipeAnimationDuration(animation);
+        const swipeEasing = getAnimationEasing(!currentSwipeOffset ? animation.navigation : animation.swipe);
         let { direction } = action;
-        const count = (_b = action.count) !== null && _b !== void 0 ? _b : 1;
+        const count = (_a = action.count) !== null && _a !== void 0 ? _a : 1;
         let newSwipeState = SwipeState.ANIMATION;
         let newSwipeAnimationDuration = swipeDuration * count;
         if (!direction) {
@@ -75,13 +79,11 @@ export const Controller = ({ children, ...props }) => {
                     newSwipeAnimationDuration =
                         (swipeDuration / containerWidth) * (containerWidth - Math.abs(currentSwipeOffset));
                 }
+                direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
             }
             else {
                 newSwipeAnimationDuration = swipeDuration / 2;
             }
-            if (count !== 0) {
-                direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
-            }
         }
         let increment = 0;
         if (direction === ACTION_PREV) {
@@ -114,7 +116,7 @@ export const Controller = ({ children, ...props }) => {
             });
         }
         setSwipeState(newSwipeState);
-        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration });
+        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration, easing: swipeEasing });
     });
     React.useEffect(() => {
         var _a, _b;
@@ -126,7 +128,7 @@ export const Controller = ({ children, ...props }) => {
         subscribeSensors,
         isSwipeValid,
         (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
-        animation.swipe,
+        getSwipeAnimationDuration(animation),
         () => setSwipeState(SwipeState.SWIPE),
         (offset) => setSwipeOffset(offset),
         (offset, duration) => swipe({ offset, duration, count: 1 }),

package/dist/core/modules/Navigation.js

@@ -1,23 +1,20 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, label as translateLabel } from "../utils.js";
+import { cssClass, label as translateLabel, getNavigationAnimationDuration } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { useController } from "./Controller.js";
 import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
 export const NavigationButton = ({ labels, label, icon, renderIcon, action, onClick, disabled, }) => (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
-export const Navigation = ({ slides, carousel: { finite }, animation: { swipe, navigation }, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
+export const Navigation = ({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
     const { currentIndex } = useLightboxState().state;
     const { subscribeSensors } = useController();
     const { publish } = useEvents();
     const isRTL = useRTL();
     const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);
     const nextDisabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
-    const navigate = (action) => {
-        publish(action, { animationDuration: navigation });
-    };
-    const publishThrottled = useThrottle((action) => navigate(action), (navigation !== null && navigation !== void 0 ? navigation : swipe) / 2);
+    const publishThrottled = useThrottle((action) => publish(action), getNavigationAnimationDuration(animation) / 2);
     const handleKeyDown = useEventCallback((event) => {
         if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
             publishThrottled(isRTL ? ACTION_NEXT : ACTION_PREV);
@@ -28,7 +25,7 @@ export const Navigation = ({ slides, carousel: { finite }, animation: { swipe, n
     });
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
     return (React.createElement(React.Fragment, null,
-        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, labels: labels, onClick: () => navigate(ACTION_PREV) })),
-        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, onClick: () => navigate(ACTION_NEXT) }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, labels: labels, onClick: () => publish(ACTION_PREV) })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, onClick: () => publish(ACTION_NEXT) }))));
 };
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

package/dist/core/modules/Portal.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { LightboxDefaultProps } from "../../props.js";
 import { createModule } from "../config.js";
-import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
+import { clsx, composePrefix, cssClass, cssVar, getAnimationEasing, getFadeAnimationDuration } from "../utils.js";
 import { useEventCallback, useMotionPreference } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
@@ -25,7 +25,9 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
     const cleanup = React.useRef([]);
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
-    const fadeAnimationDuration = !useMotionPreference() ? animation.fade : 0;
+    const reduceMotion = useMotionPreference();
+    const animationDuration = !reduceMotion ? getFadeAnimationDuration(animation) : 0;
+    const animationEasing = !reduceMotion ? getAnimationEasing(animation.fade) : undefined;
     React.useEffect(() => {
         setMounted(true);
         return () => {
@@ -41,7 +43,7 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
             var _a;
             (_a = on.exited) === null || _a === void 0 ? void 0 : _a.call(on);
             close();
-        }, fadeAnimationDuration);
+        }, animationDuration);
     });
     React.useEffect(() => subscribe(ACTION_CLOSE, handleClose), [subscribe, handleClose]);
     const handleEnter = useEventCallback((node) => {
@@ -60,7 +62,7 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
         setTimeout(() => {
             var _a;
             (_a = on.entered) === null || _a === void 0 ? void 0 : _a.call(on);
-        }, fadeAnimationDuration);
+        }, animationDuration);
     });
     const handleExit = useEventCallback(() => {
         cleanup.current.forEach((clean) => clean());
@@ -77,10 +79,9 @@ export const Portal = ({ children, animation, styles, className, on, close }) =>
     return mounted
         ? ReactDOM.createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix("open"))), role: "presentation", "aria-live": "polite", style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
-                    ? {
-                        [cssVar("fade_animation_duration")]: `${fadeAnimationDuration}ms`,
-                    }
+                    ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
+                ...(animationEasing ? { [cssVar("fade_animation_timing_function")]: animationEasing } : null),
                 ...styles.root,
             } }, children), document.body)
         : null;

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Labels, Slide, SlideImage } from "../types.js";
+import { AnimationSettings, AnimationSpec, Labels, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
@@ -23,3 +23,8 @@ export declare const parseLengthPercentage: (input: unknown) => {
 export declare const devicePixelRatio: () => number;
 export declare const getSlideIndex: (index: number, slidesCount: number) => number;
 export declare const getSlide: (slides: Slide[], index: number) => Slide;
+export declare const getAnimationEasing: (animationSpec: AnimationSpec | undefined) => string | undefined;
+export declare const getAnimationDuration: (animationSpec: AnimationSpec | undefined, defaultDuration: number) => number;
+export declare const getFadeAnimationDuration: (animation: AnimationSettings) => number;
+export declare const getSwipeAnimationDuration: (animation: AnimationSettings) => number;
+export declare const getNavigationAnimationDuration: (animation: AnimationSettings) => number;

package/dist/core/utils.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AnimationDefaultProps } from "../props.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
 const cssPrefix = "yarl__";
 export const cssClass = (name) => `${cssPrefix}${name}`;
@@ -41,3 +42,10 @@ export const devicePixelRatio = () => {
 };
 export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
 export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];
+export const getAnimationEasing = (animationSpec) => typeof animationSpec === "object" ? animationSpec.easing : undefined;
+export const getAnimationDuration = (animationSpec, defaultDuration) => { var _a; return (_a = (typeof animationSpec === "object" ? animationSpec.duration : animationSpec)) !== null && _a !== void 0 ? _a : defaultDuration; };
+export const getFadeAnimationDuration = (animation) => getAnimationDuration(animation.fade, AnimationDefaultProps.fade);
+export const getSwipeAnimationDuration = (animation) => getAnimationDuration(animation.swipe, AnimationDefaultProps.swipe);
+export const getNavigationAnimationDuration = (animation) => {
+    return getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));
+};

package/dist/plugins/captions/Description.js

@@ -7,10 +7,8 @@ export const Description = ({ description, descriptionTextAlign, descriptionMaxL
             ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
                 descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
                 ? {
-                    style: {
-                        [cssVar("slide_description_text_align")]: descriptionTextAlign,
-                        [cssVar("slide_description_max_lines")]: descriptionMaxLines,
-                    },
+                    [cssVar("slide_description_text_align")]: descriptionTextAlign,
+                    [cssVar("slide_description_max_lines")]: descriptionMaxLines,
                 }
                 : null),
             ...styles.captionsDescription,

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -5,7 +5,7 @@ import { Thumbnail } from "./Thumbnail.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
 const isHorizontal = (position) => ["top", "bottom"].includes(position);
 const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, animation: { navigation }, }) => {
+export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
     const track = React.useRef(null);
     const { globalIndex, animation } = useLightboxState().state;
     const { publish, subscribe } = useEvents();
@@ -28,6 +28,7 @@ export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnail
                 { transform: "translateY(0)" },
             ],
         duration: animationDuration,
+        easing: animation === null || animation === void 0 ? void 0 : animation.easing,
     }));
     const handleControllerSwipe = useEventCallback(() => {
         let animationOffset;
@@ -78,10 +79,10 @@ export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnail
     }
     const handleClick = (slideIndex) => () => {
         if (slideIndex > index) {
-            publish(ACTION_NEXT, { count: slideIndex - index, animationDuration: navigation });
+            publish(ACTION_NEXT, { count: slideIndex - index });
         }
         else if (slideIndex < index) {
-            publish(ACTION_PREV, { count: index - slideIndex, animationDuration: navigation });
+            publish(ACTION_PREV, { count: index - slideIndex });
         }
     };
     const { width, height, border, borderRadius, padding, gap, imageFit, vignette } = thumbnails;

package/dist/plugins/zoom/ZoomContainer.js

@@ -96,12 +96,10 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
         if (zoomAnimationStart.current && containerRef.current) {
             zoomAnimation.current = (_c = (_b = containerRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, [
                 { transform: zoomAnimationStart.current },
-                {
-                    transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)`,
-                },
+                { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` },
             ], {
-                duration: reduceMotion ? 0 : (_d = animation.zoom) !== null && _d !== void 0 ? _d : 500,
-                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+                duration: !reduceMotion ? (_d = animation.zoom) !== null && _d !== void 0 ? _d : 500 : 0,
+                easing: zoomAnimation.current ? "ease-out" : "ease-in-out",
             });
             zoomAnimationStart.current = undefined;
             if (zoomAnimation.current) {

package/dist/props.d.ts

@@ -1,2 +1,6 @@
 import { LightboxProps } from "./types.js";
+export declare const AnimationDefaultProps: {
+    fade: number;
+    swipe: number;
+};
 export declare const LightboxDefaultProps: LightboxProps;

package/dist/props.js

@@ -1,4 +1,8 @@
 import { ACTION_CLOSE, IMAGE_FIT_CONTAIN } from "./core/consts.js";
+export const AnimationDefaultProps = {
+    fade: 330,
+    swipe: 500,
+};
 export const LightboxDefaultProps = {
     open: false,
     close: () => { },
@@ -8,10 +12,7 @@ export const LightboxDefaultProps = {
     plugins: [],
     toolbar: { buttons: [ACTION_CLOSE] },
     labels: {},
-    animation: {
-        fade: 330,
-        swipe: 500,
-    },
+    animation: AnimationDefaultProps,
     carousel: {
         finite: false,
         preload: 2,

package/dist/types.d.ts

@@ -78,13 +78,22 @@ export interface CarouselSettings {
 }
 /** Animation settings */
 export interface AnimationSettings {
-    /** fade-in / fade-out animation duration */
-    fade: number;
-    /** swipe animation duration */
-    swipe: number;
-    /** override for `swipe` animation duration when using keyboard navigation or navigation buttons */
-    navigation?: number;
+    /** fade-in / fade-out animation settings */
+    fade: AnimationSpec;
+    /** swipe animation settings */
+    swipe: AnimationSpec;
+    /** override for `swipe` animation settings when using keyboard navigation or navigation buttons */
+    navigation?: AnimationSpec;
 }
+/** Animation duration or animation settings */
+export type AnimationSpec = {
+    /** animation duration */
+    duration?: number;
+    /** animation easing function */
+    easing?: string;
+}
+/** animation duration */
+ | number;
 /** Controller settings */
 export interface ControllerSettings {
     /** if true, the lightbox captures focus when it opens */

package/package.json

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