yet-another-react-lightbox 1.13.2 → 2.0.0-rc.1

package/dist/core/modules/Carousel.js

@@ -1,27 +1,27 @@
 import * as React from "react";
-import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
-import { LightboxDefaultProps } from "../../types.js";
-import { useContainerRect } from "../hooks/index.js";
 import { createModule } from "../config.js";
-import { clsx, cssClass, cssVar } from "../utils.js";
+import { LightboxDefaultProps } from "../../props.js";
+import { useContainerRect } from "../hooks/index.js";
+import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseSpacing } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 import { useEvents } from "../contexts/Events.js";
+import { useLightboxState } from "../contexts/LightboxState.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, MODULE_CAROUSEL, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
+const cssPrefix = (value) => composePrefix(MODULE_CAROUSEL, value);
+const cssSlidePrefix = (value) => composePrefix("slide", value);
+const sanitize = (value) => (value === 0 || value === "0" ? "0px" : value);
 const CarouselSlide = ({ slide, offset }) => {
     const { setContainerRef, containerRect, containerRef } = useContainerRect();
     const { publish } = useEvents();
-    const { latestProps, currentIndex } = useController();
-    const { render } = latestProps.current;
+    const { state: { currentIndex }, } = useLightboxState();
+    const { getLightboxProps } = useController();
+    const { render, carousel: { imageFit }, on: { click: onClick }, } = 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);
-        if (!rendered && "src" in slide) {
-            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit, onClick: latestProps.current.on.click && offset === 0
-                    ? () => {
-                        var _a, _b;
-                        (_b = (_a = latestProps.current.on).click) === null || _b === void 0 ? void 0 : _b.call(_a, currentIndex);
-                    }
-                    : undefined }));
+        if (!rendered && isImageSlide(slide)) {
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: imageFit, onClick: offset === 0 ? () => onClick === null || onClick === void 0 ? void 0 : onClick(currentIndex) : undefined }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, slide),
@@ -35,36 +35,36 @@ const CarouselSlide = ({ slide, offset }) => {
             container &&
             (target === container ||
                 (Array.from(container.children).find((x) => x === target) &&
-                    target.classList.contains(cssClass("fullsize"))))) {
+                    target.classList.contains(cssClass(CLASS_FULLSIZE))))) {
             publish(YARL_EVENT_BACKDROP_CLICK);
         }
     };
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset }, onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
 };
+const Placeholder = () => React.createElement("div", { className: cssClass("slide") });
 export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
-    const { currentIndex, globalIndex } = useController();
+    const { state: { currentIndex, globalIndex }, } = useLightboxState();
+    const { setCarouselRef } = useController();
+    const spacingValue = parseSpacing(spacing);
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
-            if (!finite || i >= 0) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex }));
-            }
+            const key = globalIndex + i - currentIndex;
+            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
         items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
-            if (!finite || i <= slides.length - 1) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex }));
-            }
+            const key = globalIndex + i - currentIndex;
+            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
     }
-    const sanitize = (value) => value === 0 || value.trim() === "" || value.trim() === "0" ? "0px" : value;
-    return (React.createElement("div", { className: cssClass("carousel"), style: {
+    return (React.createElement("div", { ref: setCarouselRef, className: cssClass(cssPrefix()), style: {
+            [`${cssVar(cssPrefix("slides_count"))}`]: items.length,
+            [`${cssVar(cssPrefix("spacing_px"))}`]: spacingValue.pixel || 0,
+            [`${cssVar(cssPrefix("spacing_percent"))}`]: spacingValue.percent || 0,
             ...(padding !== LightboxDefaultProps.carousel.padding
-                ? { [cssVar("carousel_padding")]: sanitize(padding) }
-                : null),
-            ...(spacing !== LightboxDefaultProps.carousel.spacing
-                ? { [cssVar("carousel_spacing")]: sanitize(spacing) }
+                ? { [cssVar(cssPrefix("padding"))]: sanitize(padding) }
                 : null),
         } }, items));
 };
-export const CarouselModule = createModule("carousel", Carousel);
+export const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);

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

@@ -1,18 +1,14 @@
 import * as React from "react";
 import { Component, ComponentProps } from "../../types.js";
 import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
-declare type ControllerState = {
-    currentIndex: number;
-    globalIndex: number;
-};
-export declare type ControllerContextType = ControllerState & {
-    latestProps: React.MutableRefObject<ComponentProps>;
+export declare type ControllerContextType = {
+    getLightboxProps: () => ComponentProps;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
     transferFocus: () => void;
     containerRect: ContainerRect;
     containerRef: React.RefObject<HTMLDivElement>;
+    setCarouselRef: React.Ref<HTMLDivElement>;
 };
 export declare const useController: () => ControllerContextType;
 export declare const Controller: Component;
 export declare const ControllerModule: import("../../types.js").Module;
-export {};

package/dist/core/modules/Controller.js

@@ -1,308 +1,189 @@
 import * as React from "react";
-import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
-import { LightboxDefaultProps } from "../../types.js";
-import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
 import { createModule } from "../config.js";
-import { useContainerRect, useLatest, useLayoutEffect, useRTL, useSensors, } from "../hooks/index.js";
-import { useEvents, useTimeouts } from "../contexts/index.js";
-const SWIPE_OFFSET_THRESHOLD = 30;
+import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseSpacing, } from "../utils.js";
+import { useContainerRect, useEventCallback, useForkRef, useLayoutEffect, useMotionPreference, useRTL, useSensors, } from "../hooks/index.js";
+import { useEvents, useLightboxState, useTimeouts } 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";
+const cssContainerPrefix = makeComposePrefix("container");
 const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
 export const Controller = ({ children, ...props }) => {
-    const { containerRef, setContainerRef, containerRect } = useContainerRect();
+    const { carousel, slides, animation, controller, on, styles } = props;
+    const { state, dispatch } = useLightboxState();
+    const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
+    const [swipeOffset, setSwipeOffset] = React.useState(0);
+    const swipeAnimationReset = React.useRef();
     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,
-    });
-    const latestProps = useLatest(props);
-    const refs = React.useRef({
-        state,
-        props,
-        swipeOffset: 0,
-        swipeIntent: 0,
-        swipeAnimationDuration: props.animation.swipe,
-        wheelResidualMomentum: 0,
-        pointers: [],
-    });
-    refs.current.state = state;
-    refs.current.props = props;
-    useLayoutEffect(() => {
-        const preventDefault = (event) => {
-            if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
-                event.preventDefault();
-            }
-        };
-        const node = containerRef.current;
-        if (node) {
-            node.addEventListener("wheel", preventDefault, { passive: false });
-        }
-        return () => {
-            if (node) {
-                node.removeEventListener("wheel", preventDefault);
-            }
-        };
-    }, [containerRef]);
-    React.useEffect(() => {
-        var _a;
-        if (refs.current.props.controller.focus) {
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [containerRef, refs]);
-    React.useEffect(() => {
-        var _a, _b;
-        (_b = (_a = refs.current.props.on).view) === null || _b === void 0 ? void 0 : _b.call(_a, state.currentIndex);
-    }, [state.currentIndex]);
-    const updateSwipeOffset = React.useCallback(() => {
-        var _a, _b;
-        const offsetVar = cssVar("swipe_offset");
-        if (refs.current.swipeOffset !== 0) {
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(offsetVar, `${Math.round(refs.current.swipeOffset)}px`);
-        }
-        else {
-            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.removeProperty(offsetVar);
-        }
-    }, [containerRef]);
-    useLayoutEffect(() => {
-        updateSwipeOffset();
-    });
-    const rerender = React.useCallback(() => {
-        setState((prev) => ({ ...prev }));
-    }, []);
-    const resetSwipe = React.useCallback(() => {
-        const { current } = refs;
-        current.swipeOffset = 0;
-        current.swipeIntent = 0;
-        current.swipeStartTime = undefined;
-        clearTimeout(current.swipeResetCleanup);
-        current.swipeResetCleanup = undefined;
-        clearTimeout(current.swipeIntentCleanup);
-        current.swipeIntentCleanup = undefined;
-    }, [clearTimeout]);
-    const rtl = React.useCallback((value) => (isRTL.current ? -1 : 1) * (typeof value === "number" ? value : 1), [isRTL]);
-    const isSwipeValid = React.useCallback((offset) => {
-        const { state: { currentIndex }, props: { carousel, slides }, } = refs.current;
-        return !(carousel.finite &&
-            ((rtl(offset) > 0 && currentIndex === 0) || (rtl(offset) < 0 && currentIndex === slides.length - 1)));
-    }, [rtl]);
-    const swipe = React.useCallback((direction, count = 1) => {
+    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 &&
+        ((rtl(offset) > 0 && state.currentIndex === 0) ||
+            (rtl(offset) < 0 && state.currentIndex === slides.length - 1))));
+    const swipe = useEventCallback((action) => {
         var _a;
-        const { current } = refs;
-        const slidesCount = current.props.slides.length;
-        const swipeAnimationDuration = current.props.animation.swipe;
-        const { currentIndex, globalIndex } = current.state;
-        const { swipeOffset } = current;
-        let newSwipeState = "swipe-animation";
-        let newSwipeAnimationDuration = swipeAnimationDuration * count;
+        const swipeDuration = animation.swipe;
+        const currentSwipeOffset = action.offset || 0;
+        let { direction } = action;
+        const count = (_a = action.count) !== null && _a !== void 0 ? _a : 1;
+        let newSwipeState = SwipeState.ANIMATION;
+        let newSwipeAnimationDuration = swipeDuration * count;
         if (!direction) {
-            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
+            const containerWidth = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
+            const elapsedTime = action.duration || 0;
             const expectedTime = containerWidth
-                ? (swipeAnimationDuration / containerWidth) * Math.abs(swipeOffset)
-                : swipeAnimationDuration;
-            if (containerWidth &&
-                ((swipeOffset !== 0 && elapsedTime < swipeAnimationDuration) ||
-                    Math.abs(swipeOffset) > 0.5 * containerWidth)) {
-                newSwipeAnimationDuration =
-                    (swipeAnimationDuration / containerWidth) * (containerWidth - Math.abs(swipeOffset));
+                ? (swipeDuration / containerWidth) * Math.abs(currentSwipeOffset)
+                : swipeDuration;
+            if (count !== 0) {
                 if (elapsedTime < expectedTime) {
                     newSwipeAnimationDuration =
                         (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
                 }
-                direction = rtl(swipeOffset) > 0 ? "prev" : "next";
+                else if (containerWidth) {
+                    newSwipeAnimationDuration =
+                        (swipeDuration / containerWidth) * (containerWidth - Math.abs(currentSwipeOffset));
+                }
             }
             else {
-                newSwipeAnimationDuration = swipeAnimationDuration / 2;
+                newSwipeAnimationDuration = swipeDuration / 2;
+            }
+            if (count !== 0) {
+                direction = rtl(currentSwipeOffset) > 0 ? ACTION_PREV : ACTION_NEXT;
             }
         }
-        const newState = {};
-        if (direction === "prev") {
+        let increment;
+        if (direction === ACTION_PREV) {
             if (isSwipeValid(rtl(1))) {
-                newState.currentIndex = (currentIndex - count + slidesCount) % slidesCount;
-                newState.globalIndex = globalIndex - count;
+                increment = -count;
             }
             else {
-                newSwipeState = undefined;
-                newSwipeAnimationDuration = swipeAnimationDuration;
+                newSwipeState = SwipeState.NONE;
+                newSwipeAnimationDuration = swipeDuration;
             }
         }
-        else if (direction === "next") {
+        else if (direction === ACTION_NEXT) {
             if (isSwipeValid(rtl(-1))) {
-                newState.currentIndex = (currentIndex + count) % slidesCount;
-                newState.globalIndex = globalIndex + count;
+                increment = count;
             }
             else {
-                newSwipeState = undefined;
-                newSwipeAnimationDuration = swipeAnimationDuration;
+                newSwipeState = SwipeState.NONE;
+                newSwipeAnimationDuration = swipeDuration;
             }
         }
         newSwipeAnimationDuration = Math.round(newSwipeAnimationDuration);
-        resetSwipe();
-        current.swipeState = newSwipeState;
-        current.swipeAnimationDuration = newSwipeAnimationDuration;
+        clearTimeout(swipeAnimationReset.current);
         if (newSwipeState) {
-            setTimeout(() => {
-                current.swipeState = undefined;
-                current.swipeAnimationDuration = current.props.animation.swipe;
-                rerender();
-            }, newSwipeAnimationDuration);
-        }
-        publish("controller-swipe", { ...newState, animationDuration: current.swipeAnimationDuration });
-        setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl, publish]);
-    React.useEffect(() => cleanup(subscribe("prev", (_, count) => swipe("prev", typeof count === "number" ? count : undefined)), subscribe("next", (_, count) => swipe("next", typeof count === "number" ? count : undefined))), [subscribe, swipe]);
-    React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
-        if (event.code === "Escape") {
-            publish("close");
-        }
-    }), [subscribeSensors, publish]);
-    React.useEffect(() => props.controller.closeOnBackdropClick
-        ? subscribe(YARL_EVENT_BACKDROP_CLICK, () => publish("close"))
-        : () => { }, [props.controller.closeOnBackdropClick, publish, subscribe]);
-    const clearPointer = React.useCallback((event) => {
-        const { current } = refs;
-        if (current.activePointer === event.pointerId) {
-            current.activePointer = undefined;
-        }
-        current.pointers.splice(0, current.pointers.length, ...current.pointers.filter((p) => p.pointerId !== event.pointerId));
-    }, []);
-    const addPointer = React.useCallback((event) => {
-        clearPointer(event);
-        refs.current.pointers.push(event);
-    }, [clearPointer]);
-    const onPointerDown = React.useCallback((event) => {
-        addPointer(event);
-    }, [addPointer]);
-    const onPointerMove = React.useCallback((event) => {
-        const { current } = refs;
-        const original = current.pointers.find((p) => p.pointerId === event.pointerId);
-        if (original) {
-            const deltaX = event.clientX - original.clientX;
-            const deltaY = event.clientY - original.clientY;
-            if (!current.swipeState) {
-                if (isSwipeValid(deltaX) &&
-                    Math.abs(deltaX) > Math.abs(deltaY) &&
-                    Math.abs(deltaX) > SWIPE_OFFSET_THRESHOLD) {
-                    addPointer(event);
-                    current.activePointer = event.pointerId;
-                    current.swipeStartTime = Date.now();
-                    current.swipeState = "swipe";
-                    rerender();
+            const timeoutId = setTimeout(() => {
+                if (swipeAnimationReset.current === timeoutId) {
+                    setSwipeOffset(0);
+                    setSwipeState(SwipeState.NONE);
                 }
-            }
-            else if (current.swipeState === "swipe") {
-                if (event.pointerId === current.activePointer) {
-                    current.swipeOffset = deltaX;
-                    updateSwipeOffset();
-                }
-            }
-        }
-    }, [addPointer, updateSwipeOffset, isSwipeValid, rerender]);
-    const onPointerUp = React.useCallback((event) => {
-        const { current } = refs;
-        if (current.pointers.find((p) => p.pointerId === event.pointerId) &&
-            current.swipeState === "swipe" &&
-            current.activePointer === event.pointerId) {
-            swipe();
-        }
-        clearPointer(event);
-    }, [clearPointer, swipe]);
-    React.useEffect(() => cleanup(subscribeSensors("onPointerDown", onPointerDown), subscribeSensors("onPointerMove", onPointerMove), subscribeSensors("onPointerUp", onPointerUp), subscribeSensors("onPointerLeave", onPointerUp), subscribeSensors("onPointerCancel", onPointerUp)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
-    const onWheel = React.useCallback((event) => {
-        var _a;
-        if (event.ctrlKey) {
-            return;
+            }, newSwipeAnimationDuration);
+            swipeAnimationReset.current = timeoutId;
         }
-        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-            return;
+        if (carouselRef.current) {
+            carouselSwipeAnimation.current = {
+                rect: carouselRef.current.getBoundingClientRect(),
+                index: state.globalIndex,
+            };
         }
-        const { current } = refs;
-        if (!current.swipeState) {
-            if (Math.abs(event.deltaX) <= 1.2 * Math.abs(current.wheelResidualMomentum)) {
-                current.wheelResidualMomentum = event.deltaX;
-                return;
-            }
-            if (!isSwipeValid(-event.deltaX)) {
-                return;
-            }
-            current.swipeIntent += event.deltaX;
-            clearTimeout(current.swipeIntentCleanup);
-            if (Math.abs(current.swipeIntent) > SWIPE_OFFSET_THRESHOLD) {
-                current.swipeStartTime = Date.now();
-                current.swipeIntent = 0;
-                current.wheelResidualMomentum = 0;
-                current.swipeState = "swipe";
-                rerender();
-            }
-            else {
-                current.swipeIntentCleanup = setTimeout(() => {
-                    current.swipeIntent = 0;
-                    current.swipeIntentCleanup = undefined;
-                }, current.props.animation.swipe);
+        setSwipeState(newSwipeState);
+        dispatch({ increment, animationDuration: newSwipeAnimationDuration });
+    });
+    const animateCarouselSwipe = useEventCallback(() => {
+        var _a, _b, _c;
+        const swipeAnimation = carouselSwipeAnimation.current;
+        carouselSwipeAnimation.current = undefined;
+        if (swipeAnimation && carouselRef.current && containerRect) {
+            const parsedSpacing = parseSpacing(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;
+                };
             }
         }
-        else if (current.swipeState === "swipe") {
-            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            if (containerWidth) {
-                current.swipeOffset -= event.deltaX;
-                current.swipeOffset =
-                    Math.min(Math.abs(current.swipeOffset), containerWidth) * Math.sign(current.swipeOffset);
-                updateSwipeOffset();
-                clearTimeout(current.swipeResetCleanup);
-                if (Math.abs(current.swipeOffset) > 0.2 * containerWidth) {
-                    current.wheelResidualMomentum = event.deltaX;
-                    swipe();
-                    return;
-                }
-                const currentSwipeOffset = current.swipeOffset;
-                current.swipeResetCleanup = setTimeout(() => {
-                    current.swipeResetCleanup = undefined;
-                    if (current.swipeState === "swipe" && current.swipeOffset === currentSwipeOffset) {
-                        resetSwipe();
-                        current.swipeState = undefined;
-                        rerender();
-                    }
-                }, 2 * current.props.animation.swipe);
+    });
+    useLayoutEffect(animateCarouselSwipe);
+    const swipeParams = [
+        swipeState,
+        subscribeSensors,
+        isSwipeValid,
+        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
+        animation.swipe,
+        () => setSwipeState(SwipeState.SWIPE),
+        (offset, duration) => swipe({ offset, duration, count: 1 }),
+        (offset) => swipe({ offset, count: 0 }),
+        (offset) => {
+            if (swipeState === SwipeState.SWIPE) {
+                setSwipeOffset(offset);
             }
+        },
+    ];
+    usePointerSwipe(...swipeParams);
+    useWheelSwipe(...swipeParams);
+    const focusOnMount = useEventCallback(() => {
+        var _a;
+        if (controller.focus) {
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        else {
-            current.wheelResidualMomentum = event.deltaX;
+    });
+    React.useEffect(focusOnMount, [focusOnMount]);
+    const handleIndexChange = useEventCallback(() => {
+        var _a;
+        (_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(() => subscribeSensors(EVENT_ON_KEY_UP, (event) => {
+        if (event.code === VK_ESCAPE) {
+            publish(ACTION_CLOSE);
         }
-    }, [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]);
+    }), [subscribeSensors, publish]);
+    React.useEffect(() => controller.closeOnBackdropClick
+        ? subscribe(YARL_EVENT_BACKDROP_CLICK, () => publish(ACTION_CLOSE))
+        : () => { }, [controller.closeOnBackdropClick, publish, subscribe]);
+    const transferFocus = useEventCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    const getLightboxProps = useEventCallback(() => props);
     const context = React.useMemo(() => ({
-        latestProps,
-        currentIndex: state.currentIndex,
-        globalIndex: state.globalIndex,
+        getLightboxProps,
         subscribeSensors,
         transferFocus,
-        containerRect,
+        containerRect: containerRect || { width: 0, height: 0 },
         containerRef,
-    }), [
-        latestProps,
-        state.currentIndex,
-        state.globalIndex,
-        subscribeSensors,
-        transferFocus,
-        containerRect,
-        containerRef,
-    ]);
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), cssClass("fullsize"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
-            ...(refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
-                ? {
-                    [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
-                }
-                : null),
-            ...(props.controller.touchAction !== "none"
-                ? {
-                    [cssVar("controller_touch_action")]: props.controller.touchAction,
-                }
+        setCarouselRef,
+    }), [getLightboxProps, subscribeSensors, transferFocus, containerRect, containerRef, setCarouselRef]);
+    return (React.createElement("div", { ref: handleContainerRef, className: clsx(cssClass(cssContainerPrefix()), cssClass(CLASS_FLEX_CENTER)), style: {
+            ...(swipeState === SwipeState.SWIPE
+                ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset)}px` }
                 : null),
-            ...props.styles.container,
-        }, ...(props.controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
+            ...(controller.touchAction !== "none" ? {} : null),
+            ...styles.container,
+        }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && React.createElement(ControllerContext.Provider, { value: context }, children)));
 };
-export const ControllerModule = createModule("controller", Controller);
+export const ControllerModule = createModule(MODULE_CONTROLLER, Controller);

package/dist/core/modules/Core.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { EventsProvider, TimeoutsProvider } from "../contexts/index.js";
-export const Core = ({ children }) => (React.createElement(TimeoutsProvider, null,
-    React.createElement(EventsProvider, null, children)));
-export const CoreModule = createModule("core", Core);
+import { EventsProvider, LightboxStateProvider, TimeoutsProvider } from "../contexts/index.js";
+import { MODULE_CORE } from "../consts.js";
+export const Core = ({ slides, index, children }) => (React.createElement(TimeoutsProvider, null,
+    React.createElement(EventsProvider, null,
+        React.createElement(LightboxStateProvider, { slidesCount: slides.length, initialIndex: index }, children))));
+export const CoreModule = createModule(MODULE_CORE, Core);

package/dist/core/modules/Navigation.js

@@ -1,27 +1,30 @@
 import * as React from "react";
 import { createModule } from "../config.js";
+import { useEventCallback, useRTL } from "../hooks/index.js";
 import { cssClass, label as translateLabel } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
-import { useEvents } from "../contexts/index.js";
+import { useEvents, useLightboxState } from "../contexts/index.js";
 import { useController } from "./Controller.js";
-import { useLatest, useRTL } from "../hooks/index.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 { currentIndex, subscribeSensors } = useController();
+    const { state: { currentIndex }, } = useLightboxState();
+    const { subscribeSensors } = useController();
     const { publish } = useEvents();
-    const isRTL = useLatest(useRTL());
-    React.useEffect(() => subscribeSensors("onKeyDown", (event) => {
-        if (event.key === "ArrowLeft") {
-            publish(isRTL.current ? "next" : "prev");
+    const isRTL = useRTL();
+    const handleKeyDown = useEventCallback((event) => {
+        if (event.key === VK_ARROW_LEFT) {
+            publish(isRTL ? ACTION_NEXT : ACTION_PREV);
         }
-        else if (event.key === "ArrowRight") {
-            publish(isRTL.current ? "prev" : "next");
+        else if (event.key === VK_ARROW_RIGHT) {
+            publish(isRTL ? ACTION_PREV : ACTION_NEXT);
         }
-    }), [subscribeSensors, publish, isRTL]);
+    });
+    React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
     return (React.createElement(React.Fragment, null,
-        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: "prev", icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
-        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: "next", icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));
 };
-export const NavigationModule = createModule("navigation", Navigation);
+export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);