yet-another-react-lightbox 2.3.1 → 2.4.0

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

@@ -4,4 +4,4 @@ export type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttri
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;
 };
-export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "icon" | "hidden" | "color" | "style" | "translate" | "disabled" | "className" | "placeholder" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "value" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "onResize" | "onResizeCapture" | "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" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "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" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/core/components/ImageSlide.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { clsx, cssClass, hasWindow, makeComposePrefix } from "../utils.js";
 import { useEventCallback } from "../hooks/index.js";
-import { useEvents } from "../contexts/index.js";
+import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
 import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
 const slidePrefix = makeComposePrefix("slide");
@@ -10,6 +10,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
+    const { setTimeout } = useTimeouts();
     const imageRef = React.useRef(null);
     React.useEffect(() => {
         if (offset === 0) {
@@ -27,7 +28,9 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
                 return;
             }
             setStatus(SLIDE_STATUS_COMPLETE);
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad(img);
+            setTimeout(() => {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(img);
+            }, 0);
         });
     });
     const setImageRef = React.useCallback((img) => {

package/dist/core/consts.d.ts

@@ -17,18 +17,20 @@ export declare const SLIDE_STATUS_ERROR = "error";
 export declare const SLIDE_STATUS_COMPLETE = "complete";
 export declare const SLIDE_STATUS_PLACEHOLDER = "placeholder";
 export type SlideStatus = typeof SLIDE_STATUS_LOADING | typeof SLIDE_STATUS_PLAYING | typeof SLIDE_STATUS_ERROR | typeof SLIDE_STATUS_COMPLETE;
-export declare const activeSlideStatus: (status: SlideStatus) => string;
-export declare const ACTIVE_SLIDE_LOADING: string;
-export declare const ACTIVE_SLIDE_PLAYING: string;
-export declare const ACTIVE_SLIDE_ERROR: string;
-export declare const ACTIVE_SLIDE_COMPLETE: string;
+export declare const activeSlideStatus: (status: SlideStatus) => `active-slide-${SlideStatus}`;
+export declare const ACTIVE_SLIDE_LOADING: "active-slide-loading";
+export declare const ACTIVE_SLIDE_PLAYING: "active-slide-playing";
+export declare const ACTIVE_SLIDE_ERROR: "active-slide-error";
+export declare const ACTIVE_SLIDE_COMPLETE: "active-slide-complete";
 export declare const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";
+export declare const YARL_EVENT_TOOLBAR_WIDTH = "toolbar-width";
 export declare const CLASS_FULLSIZE = "fullsize";
 export declare const CLASS_FLEX_CENTER = "flex_center";
 export declare const CLASS_NO_SCROLL = "no_scroll";
 export declare const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
 export declare const ACTION_PREV = "prev";
 export declare const ACTION_NEXT = "next";
+export declare const ACTION_SWIPE = "swipe";
 export declare const ACTION_CLOSE = "close";
 export declare const EVENT_ON_POINTER_DOWN = "onPointerDown";
 export declare const EVENT_ON_POINTER_MOVE = "onPointerMove";

package/dist/core/consts.js

@@ -22,12 +22,14 @@ export const ACTIVE_SLIDE_PLAYING = activeSlideStatus(SLIDE_STATUS_PLAYING);
 export const ACTIVE_SLIDE_ERROR = activeSlideStatus(SLIDE_STATUS_ERROR);
 export const ACTIVE_SLIDE_COMPLETE = activeSlideStatus(SLIDE_STATUS_COMPLETE);
 export const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";
+export const YARL_EVENT_TOOLBAR_WIDTH = "toolbar-width";
 export const CLASS_FULLSIZE = "fullsize";
 export const CLASS_FLEX_CENTER = "flex_center";
 export const CLASS_NO_SCROLL = "no_scroll";
 export const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
 export const ACTION_PREV = "prev";
 export const ACTION_NEXT = "next";
+export const ACTION_SWIPE = "swipe";
 export const ACTION_CLOSE = "close";
 export const EVENT_ON_POINTER_DOWN = "onPointerDown";
 export const EVENT_ON_POINTER_MOVE = "onPointerMove";

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

@@ -1,8 +1,12 @@
 import * as React from "react";
-export type Callback = (event?: unknown) => void;
-export type Subscribe = (topic: string, callback: Callback) => () => void;
-export type Unsubscribe = (topic: string, callback: Callback) => void;
-export type Publish = (topic: string, event?: unknown) => void;
+export interface EventTypes {
+}
+export type Topic = keyof EventTypes;
+export type Event<T extends Topic> = EventTypes[T];
+export type Callback<T extends Topic> = (event?: Event<T>) => void;
+export type Subscribe = <T extends Topic>(topic: T, callback: Callback<T>) => () => void;
+export type Unsubscribe = <T extends Topic>(topic: T, callback: Callback<T>) => void;
+export type Publish = <T extends Topic>(topic: T, event?: Event<T>) => void;
 export type EventsContextType = {
     subscribe: Subscribe;
     unsubscribe: Unsubscribe;

package/dist/core/contexts/Events.js

@@ -9,9 +9,8 @@ export const EventsProvider = ({ children }) => {
     }, [subscriptions]);
     const context = React.useMemo(() => {
         const unsubscribe = (topic, callback) => {
-            if (subscriptions[topic]) {
-                subscriptions[topic] = subscriptions[topic].filter((cb) => cb !== callback);
-            }
+            var _a;
+            (_a = subscriptions[topic]) === null || _a === void 0 ? void 0 : _a.splice(0, subscriptions[topic].length, ...subscriptions[topic].filter((cb) => cb !== callback));
         };
         const subscribe = (topic, callback) => {
             if (!subscriptions[topic]) {

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

@@ -2,12 +2,14 @@ import * as React from "react";
 export type LightboxState = {
     currentIndex: number;
     globalIndex: number;
+    /** @deprecated use `animation.duration` */
     animationDuration: number;
+    animation?: LightboxStateAction;
 };
-type LightboxStateAction = {
-    increment?: number;
-    animationDuration: number;
-};
+export type LightboxStateAction = {
+    increment: number;
+    duration?: number;
+} | undefined;
 export declare const useLightboxState: () => {
     state: LightboxState;
     dispatch: React.Dispatch<LightboxStateAction>;

package/dist/core/contexts/LightboxState.js

@@ -1,19 +1,22 @@
 import * as React from "react";
-import { makeUseContext } from "../utils.js";
+import { getSlideIndex, makeUseContext } from "../utils.js";
 const LightboxStateContext = React.createContext(null);
 export const useLightboxState = makeUseContext("useLightboxState", "LightboxStateContext", LightboxStateContext);
 const reducer = (slidesCount) => (state, action) => {
-    var _a;
-    return action.increment !== undefined || action.animationDuration !== undefined
-        ? {
-            currentIndex: (((state.currentIndex + (action.increment || 0)) % slidesCount) + slidesCount) % slidesCount,
-            globalIndex: state.globalIndex + (action.increment || 0),
-            animationDuration: (_a = action.animationDuration) !== null && _a !== void 0 ? _a : state.animationDuration,
-        }
-        : state;
+    const increment = (action === null || action === void 0 ? void 0 : action.increment) || 0;
+    const globalIndex = state.globalIndex + increment;
+    const currentIndex = getSlideIndex(globalIndex, slidesCount);
+    const animationDuration = (action === null || action === void 0 ? void 0 : action.duration) || 0;
+    return {
+        globalIndex,
+        currentIndex,
+        animation: action,
+        animationDuration,
+    };
 };
 export const LightboxStateProvider = ({ initialIndex, slidesCount, children, }) => {
-    const [state, dispatch] = React.useReducer(reducer(slidesCount), {
+    const memoizedReducer = React.useMemo(() => reducer(slidesCount), [slidesCount]);
+    const [state, dispatch] = React.useReducer(memoizedReducer, {
         currentIndex: initialIndex,
         globalIndex: initialIndex,
         animationDuration: 0,

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

@@ -1,7 +1,11 @@
+export * from "./useAnimation.js";
 export * from "./useContainerRect.js";
+export * from "./useDelay.js";
 export * from "./useEventCallback.js";
 export * from "./useForkRef.js";
 export * from "./useLayoutEffect.js";
+export * from "./useLoseFocus.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";
 export * from "./useSensors.js";
+export * from "./useThrottle.js";

package/dist/core/hooks/index.js

@@ -1,7 +1,11 @@
+export * from "./useAnimation.js";
 export * from "./useContainerRect.js";
+export * from "./useDelay.js";
 export * from "./useEventCallback.js";
 export * from "./useForkRef.js";
 export * from "./useLayoutEffect.js";
+export * from "./useLoseFocus.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";
 export * from "./useSensors.js";
+export * from "./useThrottle.js";

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

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

package/dist/core/hooks/useAnimation.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useLayoutEffect } from "./useLayoutEffect.js";
+import { useMotionPreference } from "./useMotionPreference.js";
+const currentTransformation = (node) => {
+    let x = 0;
+    let y = 0;
+    let z = 0;
+    const matrix = window.getComputedStyle(node).transform;
+    const matcher = matrix.match(/matrix.*\((.+)\)/);
+    if (matcher) {
+        const values = matcher[1].split(",").map((str) => Number.parseInt(str, 10));
+        if (values.length === 6) {
+            x = values[4];
+            y = values[5];
+        }
+        else if (values.length === 16) {
+            x = values[12];
+            y = values[13];
+            z = values[14];
+        }
+    }
+    return { x, y, z };
+};
+export const useAnimation = (nodeRef, computeAnimation) => {
+    const snapshot = React.useRef();
+    const animation = React.useRef();
+    const reduceMotion = useMotionPreference();
+    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)) || {};
+            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);
+                if (animation.current) {
+                    animation.current.onfinish = () => {
+                        animation.current = undefined;
+                        onfinish === null || onfinish === void 0 ? void 0 : onfinish();
+                    };
+                }
+            }
+        }
+        snapshot.current = undefined;
+    });
+    return (currentSnapshot) => {
+        snapshot.current = currentSnapshot;
+    };
+};

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

@@ -0,0 +1 @@
+export declare const useDelay: () => (callback: (...args: any[]) => void, delay: number) => void;

package/dist/core/hooks/useDelay.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useTimeouts } from "../contexts/Timeouts.js";
+export const useDelay = () => {
+    const timeoutId = React.useRef();
+    const { setTimeout, clearTimeout } = useTimeouts();
+    return React.useCallback((callback, delay) => {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, delay > 0 ? delay : 0);
+    }, [setTimeout, clearTimeout]);
+};

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

@@ -0,0 +1,4 @@
+export declare const useLoseFocus: (disabled?: boolean) => {
+    onFocus: () => void;
+    onBlur: () => void;
+};

package/dist/core/hooks/useLoseFocus.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { useLayoutEffect } from "./useLayoutEffect.js";
+import { useController } from "../modules/Controller.js";
+export const useLoseFocus = (disabled = false) => {
+    const focused = React.useRef(disabled);
+    const { transferFocus } = useController();
+    useLayoutEffect(() => {
+        if (disabled) {
+            transferFocus();
+        }
+    }, [disabled, transferFocus]);
+    const onFocus = React.useCallback(() => {
+        focused.current = true;
+    }, []);
+    const onBlur = React.useCallback(() => {
+        focused.current = false;
+    }, []);
+    return { onFocus, onBlur };
+};

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

@@ -0,0 +1 @@
+export declare const useThrottle: (callback: (...args: any[]) => void, delay: number) => (...args: any[]) => void;

package/dist/core/hooks/useThrottle.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { useDelay } from "./useDelay.js";
+import { useEventCallback } from "./useEventCallback.js";
+export const useThrottle = (callback, delay) => {
+    const lastCallbackTime = React.useRef(0);
+    const delayCallback = useDelay();
+    const executeCallback = useEventCallback((...args) => {
+        lastCallbackTime.current = Date.now();
+        callback(args);
+    });
+    return React.useCallback((...args) => {
+        delayCallback(() => {
+            executeCallback(args);
+        }, delay - (Date.now() - lastCallbackTime.current));
+    }, [delay, executeCallback, delayCallback]);
+};

package/dist/core/modules/Carousel.js

@@ -12,9 +12,8 @@ const cssSlidePrefix = (value) => composePrefix("slide", value);
 const CarouselSlide = ({ slide, offset }) => {
     const { setContainerRef, containerRect, containerRef } = useContainerRect();
     const { publish } = useEvents();
-    const { state: { currentIndex }, } = useLightboxState();
-    const { getLightboxProps } = useController();
-    const { render, carousel: { imageFit }, on: { click: onClick }, } = getLightboxProps();
+    const { currentIndex } = useLightboxState().state;
+    const { render, carousel: { imageFit }, on: { click: onClick }, } = useController().getLightboxProps();
     const renderSlide = (rect) => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
@@ -41,7 +40,7 @@ const CarouselSlide = ({ slide, offset }) => {
 };
 const Placeholder = () => React.createElement("div", { className: cssClass("slide") });
 export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
-    const { state: { currentIndex, globalIndex }, } = useLightboxState();
+    const { currentIndex, globalIndex } = useLightboxState().state;
     const { setCarouselRef } = useController();
     const spacingValue = parseLengthPercentage(spacing);
     const paddingValue = parseLengthPercentage(padding);

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

@@ -1,6 +1,17 @@
 import * as React from "react";
 import { Component, ComponentProps, ContainerRect } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
+import { LightboxStateAction } from "../contexts/index.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
+declare module "../" {
+    interface EventTypes {
+        [ACTION_PREV]: number;
+        [ACTION_NEXT]: number;
+        [ACTION_SWIPE]: LightboxStateAction;
+        [ACTION_CLOSE]: void;
+        [YARL_EVENT_BACKDROP_CLICK]: void;
+    }
+}
 export type ControllerContextType = {
     getLightboxProps: () => ComponentProps;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;

package/dist/core/modules/Controller.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
-import { useContainerRect, useEventCallback, useForkRef, useLayoutEffect, useMotionPreference, useRTL, useSensors, } from "../hooks/index.js";
-import { useEvents, useLightboxState, useTimeouts } from "../contexts/index.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";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, YARL_EVENT_BACKDROP_CLICK, } from "../consts.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, YARL_EVENT_BACKDROP_CLICK, } from "../consts.js";
 const cssContainerPrefix = makeComposePrefix("container");
 const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
@@ -13,27 +13,45 @@ export const Controller = ({ children, ...props }) => {
     const { state, dispatch } = useLightboxState();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
     const swipeOffset = React.useRef(0);
-    const swipeAnimationReset = React.useRef();
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
-    const { setTimeout, clearTimeout } = useTimeouts();
+    const cleanupAnimationIncrement = useDelay();
+    const cleanupSwipeOffset = useDelay();
     const { containerRef, setContainerRef, containerRect } = useContainerRect();
     const handleContainerRef = useForkRef(usePreventSwipeNavigation(), setContainerRef);
     const carouselRef = React.useRef(null);
     const setCarouselRef = useForkRef(carouselRef, undefined);
-    const carouselAnimation = React.useRef();
-    const carouselSwipeAnimation = React.useRef();
-    const reduceMotion = useMotionPreference();
     const isRTL = useRTL();
-    const rtl = useEventCallback((value) => (isRTL ? -1 : 1) * (isNumber(value) ? value : 1));
-    const isSwipeValid = useEventCallback((offset) => !(carousel.finite &&
+    const rtl = (value) => (isRTL ? -1 : 1) * (isNumber(value) ? value : 1);
+    const isSwipeValid = (offset) => !(carousel.finite &&
         ((rtl(offset) > 0 && state.currentIndex === 0) ||
-            (rtl(offset) < 0 && state.currentIndex === slides.length - 1))));
-    const setSwipeOffset = React.useCallback((offset) => {
+            (rtl(offset) < 0 && state.currentIndex === slides.length - 1)));
+    const setSwipeOffset = (offset) => {
         var _a;
         swipeOffset.current = offset;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
-    }, [containerRef]);
+    };
+    const animate = useAnimation(carouselRef, (snapshot, rect, translate) => {
+        var _a;
+        if (carouselRef.current && containerRect && ((_a = state.animation) === null || _a === void 0 ? void 0 : _a.duration)) {
+            const parsedSpacing = parseLengthPercentage(carousel.spacing);
+            const spacingValue = (parsedSpacing.percent ? (parsedSpacing.percent * containerRect.width) / 100 : parsedSpacing.pixel) ||
+                0;
+            return {
+                keyframes: [
+                    {
+                        transform: `translateX(${rtl(state.globalIndex - snapshot.index) * (containerRect.width + spacingValue) +
+                            snapshot.rect.x -
+                            rect.x +
+                            translate.x}px)`,
+                    },
+                    { transform: "translateX(0)" },
+                ],
+                duration: state.animation.duration,
+            };
+        }
+        return undefined;
+    });
     const swipe = useEventCallback((action) => {
         var _a;
         const swipeDuration = animation.swipe;
@@ -65,7 +83,7 @@ export const Controller = ({ children, ...props }) => {
                 direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
             }
         }
-        let increment;
+        let increment = 0;
         if (direction === ACTION_PREV) {
             if (isSwipeValid(rtl(1))) {
                 increment = -count;
@@ -84,51 +102,26 @@ export const Controller = ({ children, ...props }) => {
                 newSwipeAnimationDuration = swipeDuration;
             }
         }
+        newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
+        cleanupSwipeOffset(() => {
+            setSwipeOffset(0);
+            setSwipeState(SwipeState.NONE);
+        }, newSwipeAnimationDuration);
         if (carouselRef.current) {
-            carouselSwipeAnimation.current = {
+            animate({
                 rect: carouselRef.current.getBoundingClientRect(),
                 index: state.globalIndex,
-            };
-        }
-        newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
-        clearTimeout(swipeAnimationReset.current);
-        if (newSwipeState) {
-            const timeoutId = setTimeout(() => {
-                if (swipeAnimationReset.current === timeoutId) {
-                    setSwipeOffset(0);
-                    setSwipeState(SwipeState.NONE);
-                }
-            }, newSwipeAnimationDuration);
-            swipeAnimationReset.current = timeoutId;
+            });
         }
         setSwipeState(newSwipeState);
-        dispatch({ increment, animationDuration: newSwipeAnimationDuration });
+        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration });
     });
-    const animateCarouselSwipe = useEventCallback(() => {
-        var _a, _b, _c;
-        const swipeAnimation = carouselSwipeAnimation.current;
-        carouselSwipeAnimation.current = undefined;
-        if (swipeAnimation && carouselRef.current && containerRect) {
-            const parsedSpacing = parseLengthPercentage(carousel.spacing);
-            const spacingValue = (parsedSpacing.percent ? (parsedSpacing.percent * containerRect.width) / 100 : parsedSpacing.pixel) ||
-                0;
-            (_a = carouselAnimation.current) === null || _a === void 0 ? void 0 : _a.cancel();
-            carouselAnimation.current = (_c = (_b = carouselRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, [
-                {
-                    transform: `translateX(${rtl(state.globalIndex - swipeAnimation.index) * (containerRect.width + spacingValue) +
-                        swipeAnimation.rect.x -
-                        carouselRef.current.getBoundingClientRect().x}px)`,
-                },
-                { transform: "translateX(0)" },
-            ], !reduceMotion ? state.animationDuration : 0);
-            if (carouselAnimation.current) {
-                carouselAnimation.current.onfinish = () => {
-                    carouselAnimation.current = undefined;
-                };
-            }
+    React.useEffect(() => {
+        var _a, _b;
+        if (((_a = state.animation) === null || _a === void 0 ? void 0 : _a.increment) && ((_b = state.animation) === null || _b === void 0 ? void 0 : _b.duration)) {
+            cleanupAnimationIncrement(() => dispatch({ increment: 0 }), state.animation.duration);
         }
-    });
-    useLayoutEffect(animateCarouselSwipe);
+    }, [state.animation, dispatch, cleanupAnimationIncrement]);
     const swipeParams = [
         subscribeSensors,
         isSwipeValid,
@@ -153,13 +146,7 @@ export const Controller = ({ children, ...props }) => {
         (_a = on.view) === null || _a === void 0 ? void 0 : _a.call(on, state.currentIndex);
     });
     React.useEffect(handleIndexChange, [state.currentIndex, handleIndexChange]);
-    React.useEffect(() => cleanup(subscribe(ACTION_PREV, (count) => swipe({
-        direction: ACTION_PREV,
-        count: isNumber(count) ? count : undefined,
-    })), subscribe(ACTION_NEXT, (count) => swipe({
-        direction: ACTION_NEXT,
-        count: isNumber(count) ? count : undefined,
-    }))), [subscribe, swipe]);
+    React.useEffect(() => cleanup(subscribe(ACTION_PREV, (count) => swipe({ direction: ACTION_PREV, count })), subscribe(ACTION_NEXT, (count) => swipe({ direction: ACTION_NEXT, count })), subscribe(ACTION_SWIPE, (action) => dispatch(action))), [subscribe, swipe, dispatch]);
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_UP, (event) => {
         if (event.code === VK_ESCAPE) {
             publish(ACTION_CLOSE);

package/dist/core/modules/Navigation.js

@@ -1,30 +1,31 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { useEventCallback, useRTL } from "../hooks/index.js";
+import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
 import { cssClass, label as translateLabel } 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 = ({ 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 { state: { currentIndex }, } = useLightboxState();
+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, onClick: () => publish(action), ...useLoseFocus(disabled) }));
+export const Navigation = ({ slides, carousel: { finite }, animation: { swipe }, 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 publishThrottled = useThrottle((action) => publish(action), swipe / 2);
     const handleKeyDown = useEventCallback((event) => {
-        if (event.key === VK_ARROW_LEFT) {
-            publish(isRTL ? ACTION_NEXT : ACTION_PREV);
+        if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
+            publishThrottled(isRTL ? ACTION_NEXT : ACTION_PREV);
         }
-        else if (event.key === VK_ARROW_RIGHT) {
-            publish(isRTL ? ACTION_PREV : ACTION_NEXT);
+        if (event.key === VK_ARROW_RIGHT && !(isRTL ? prevDisabled : nextDisabled)) {
+            publishThrottled(isRTL ? ACTION_PREV : ACTION_NEXT);
         }
     });
     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: slides.length === 0 || (finite && currentIndex === 0), labels: labels, publish: publish })),
-        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: slides.length === 0 || (finite && currentIndex === slides.length - 1), labels: labels, publish: publish }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, labels: labels, publish: publish })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, publish: publish }))));
 };
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

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

@@ -1,3 +1,9 @@
 import { Component } from "../../types.js";
+import { YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
+declare module "../" {
+    interface EventTypes {
+        [YARL_EVENT_TOOLBAR_WIDTH]: number;
+    }
+}
 export declare const Toolbar: Component;
 export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -4,14 +4,14 @@ import { composePrefix, cssClass, label } from "../utils.js";
 import { useEvents } from "../contexts/index.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
-import { ACTION_CLOSE, MODULE_TOOLBAR } from "../consts.js";
+import { ACTION_CLOSE, MODULE_TOOLBAR, YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
 const cssPrefix = (value) => composePrefix(MODULE_TOOLBAR, value);
 export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     React.useEffect(() => {
         if (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) {
-            publish("toolbar-width", containerRect.width);
+            publish(YARL_EVENT_TOOLBAR_WIDTH, containerRect.width);
         }
     }, [publish, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
     const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => publish(ACTION_CLOSE) }));

package/dist/core/utils.d.ts

@@ -21,3 +21,5 @@ export declare const parseLengthPercentage: (input: unknown) => {
     pixel?: undefined;
 };
 export declare const devicePixelRatio: () => number;
+export declare const getSlideIndex: (index: number, slidesCount: number) => number;
+export declare const getSlide: (slides: Slide[], index: number) => Slide;

package/dist/core/utils.js

@@ -39,3 +39,5 @@ export const parseLengthPercentage = (input) => {
 export const devicePixelRatio = () => {
     return (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
 };
+export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
+export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];