yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/Lightbox.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { LightboxExternalProps } from "./types.js";
 /** Lightbox component */
-export declare function Lightbox(props: LightboxExternalProps): JSX.Element | null;
+export declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): JSX.Element | null;

package/dist/Lightbox.js

@@ -1,20 +1,21 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "./props.js";
-import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
+import { CarouselModule, ControllerModule, createNode, EventsProvider, LightboxPropsProvider, LightboxStateProvider, NavigationModule, NoScrollModule, PortalModule, RootModule, TimeoutsProvider, ToolbarModule, withPlugins, } from "./core/index.js";
 function renderNode(node, props) {
     var _a;
     return React.createElement(node.module.component, { key: node.module.name, ...props }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderNode(child, props)));
 }
-function fixupIndex({ index, slides, ...rest }) {
+function mergeAnimation(defaultAnimation, animation = {}) {
+    const { easing: defaultAnimationEasing, ...restDefaultAnimation } = defaultAnimation;
+    const { easing, ...restAnimation } = animation;
     return {
-        index: index >= 0 && index < slides.length ? index : 0,
-        slides,
-        ...rest,
+        easing: { ...defaultAnimationEasing, ...easing },
+        ...restDefaultAnimation,
+        ...restAnimation,
     };
 }
-export function Lightbox(props) {
-    const { carousel, animation, render, toolbar, controller, on, plugins, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
+export function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }) {
+    const { animation: defaultAnimation, carousel: defaultCarousel, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, slides: defaultSlides, index: defaultIndex, plugins: defaultPlugins, ...restDefaultProps } = LightboxDefaultProps;
     const { config, augmentation } = withPlugins([
         createNode(PortalModule, [
             createNode(NoScrollModule, [
@@ -25,10 +26,10 @@ export function Lightbox(props) {
                 ]),
             ]),
         ]),
-    ], plugins, [fixupIndex]);
-    const augmentedProps = augmentation({
+    ], plugins || defaultPlugins);
+    const props = augmentation({
+        animation: mergeAnimation(defaultAnimation, animation),
         carousel: { ...defaultCarousel, ...carousel },
-        animation: { ...defaultAnimation, ...animation },
         render: { ...defaultRender, ...render },
         toolbar: { ...defaultToolbar, ...toolbar },
         controller: { ...defaultController, ...controller },
@@ -36,7 +37,10 @@ export function Lightbox(props) {
         ...restDefaultProps,
         ...restProps,
     });
-    if (!augmentedProps.open)
+    if (!props.open)
         return null;
-    return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
+    return (React.createElement(LightboxPropsProvider, { ...props },
+        React.createElement(LightboxStateProvider, { slides: slides || defaultSlides, index: index || defaultIndex },
+            React.createElement(TimeoutsProvider, null,
+                React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
 }

package/dist/core/components/IconButton.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
-import { useController } from "../modules/Controller.js";
+import { useLightboxProps } from "../contexts/index.js";
 import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.js";
 export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) => {
-    const { styles } = useController().getLightboxProps();
+    const { styles } = useLightboxProps();
     return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon })));
 });
 IconButton.displayName = "IconButton";

package/dist/core/components/ImageSlide.js

@@ -18,9 +18,6 @@ export function ImageSlide({ slide: image, offset, render, rect, imageFit, onCli
         }
     }, [offset, status, publish]);
     const handleLoading = useEventCallback((img) => {
-        if (status === SLIDE_STATUS_COMPLETE) {
-            return;
-        }
         ("decode" in img ? img.decode() : Promise.resolve())
             .catch(() => { })
             .then(() => {

package/dist/core/config.d.ts

@@ -1,7 +1,7 @@
 import { Augmentation, Component, Module, Node, Plugin } from "../types.js";
-export declare const createModule: (name: string, component: Component) => Module;
-export declare const createNode: (module: Module, children?: Node[]) => Node;
-export declare const withPlugins: (root: Node[], plugins?: Plugin[], augmentations?: Augmentation[]) => {
+export declare function createModule(name: string, component: Component): Module;
+export declare function createNode(module: Module, children?: Node[]): Node;
+export declare function withPlugins(root: Node[], plugins?: Plugin[], augmentations?: Augmentation[]): {
     config: Node[];
     augmentation: Augmentation;
 };

package/dist/core/config.js

@@ -1,12 +1,11 @@
-export const createModule = (name, component) => ({
-    name,
-    component,
-});
-export const createNode = (module, children) => ({
-    module,
-    children,
-});
-const traverseNode = (node, target, apply) => {
+import { MODULE_CONTROLLER } from "./consts.js";
+export function createModule(name, component) {
+    return { name, component };
+}
+export function createNode(module, children) {
+    return { module, children };
+}
+function traverseNode(node, target, apply) {
     if (node.module.name === target) {
         return apply(node);
     }
@@ -16,9 +15,11 @@ const traverseNode = (node, target, apply) => {
         ];
     }
     return [node];
-};
-const traverse = (nodes, target, apply) => nodes.flatMap((node) => { var _a; return (_a = traverseNode(node, target, apply)) !== null && _a !== void 0 ? _a : []; });
-export const withPlugins = (root, plugins = [], augmentations = []) => {
+}
+function traverse(nodes, target, apply) {
+    return nodes.flatMap((node) => { var _a; return (_a = traverseNode(node, target, apply)) !== null && _a !== void 0 ? _a : []; });
+}
+export function withPlugins(root, plugins = [], augmentations = []) {
     let config = root;
     const contains = (target) => {
         const nodes = [...config];
@@ -60,6 +61,9 @@ export const withPlugins = (root, plugins = [], augmentations = []) => {
             ...(!precede ? [createNode(module)] : []),
         ]);
     };
+    const addModule = (module) => {
+        append(MODULE_CONTROLLER, module);
+    };
     const replace = (target, module) => {
         config = traverse(config, target, (node) => [createNode(module, node.children)]);
     };
@@ -76,6 +80,7 @@ export const withPlugins = (root, plugins = [], augmentations = []) => {
             append,
             addChild,
             addSibling,
+            addModule,
             replace,
             remove,
             augment,
@@ -85,4 +90,4 @@ export const withPlugins = (root, plugins = [], augmentations = []) => {
         config,
         augmentation: (props) => augmentations.reduce((acc, augmentation) => augmentation(acc), props),
     };
-};
+}

package/dist/core/consts.d.ts

@@ -1,11 +1,10 @@
 export declare const MODULE_CAROUSEL = "carousel";
 export declare const MODULE_CONTROLLER = "controller";
-export declare const MODULE_CORE = "core";
 export declare const MODULE_NAVIGATION = "navigation";
 export declare const MODULE_NO_SCROLL = "no-scroll";
 export declare const MODULE_PORTAL = "portal";
+export declare const MODULE_ROOT = "root";
 export declare const MODULE_TOOLBAR = "toolbar";
-export declare const PLUGIN_CAPTIONS = "captions";
 export declare const PLUGIN_FULLSCREEN = "fullscreen";
 export declare const PLUGIN_INLINE = "inline";
 export declare const PLUGIN_SLIDESHOW = "slideshow";
@@ -22,8 +21,6 @@ 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";
@@ -47,3 +44,4 @@ export declare const ELEMENT_BUTTON = "button";
 export declare const ELEMENT_ICON = "icon";
 export declare const IMAGE_FIT_CONTAIN = "contain";
 export declare const IMAGE_FIT_COVER = "cover";
+export declare const UNKNOWN_ACTION_TYPE = "Unknown action type";

package/dist/core/consts.js

@@ -1,11 +1,10 @@
 export const MODULE_CAROUSEL = "carousel";
 export const MODULE_CONTROLLER = "controller";
-export const MODULE_CORE = "core";
 export const MODULE_NAVIGATION = "navigation";
 export const MODULE_NO_SCROLL = "no-scroll";
 export const MODULE_PORTAL = "portal";
+export const MODULE_ROOT = "root";
 export const MODULE_TOOLBAR = "toolbar";
-export const PLUGIN_CAPTIONS = "captions";
 export const PLUGIN_FULLSCREEN = "fullscreen";
 export const PLUGIN_INLINE = "inline";
 export const PLUGIN_SLIDESHOW = "slideshow";
@@ -21,8 +20,6 @@ export const ACTIVE_SLIDE_LOADING = activeSlideStatus(SLIDE_STATUS_LOADING);
 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";
@@ -46,3 +43,4 @@ export const ELEMENT_BUTTON = "button";
 export const ELEMENT_ICON = "icon";
 export const IMAGE_FIT_CONTAIN = "contain";
 export const IMAGE_FIT_COVER = "cover";
+export const UNKNOWN_ACTION_TYPE = "Unknown action type";

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

@@ -3,14 +3,15 @@ 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 Callback<T extends Topic> = (...args: Event<T> extends void ? [] : [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 Publish = <T extends Topic>(...args: Event<T> extends void ? [topic: T] : [topic: T, event: Event<T>]) => void;
 export type EventsContextType = {
     subscribe: Subscribe;
     unsubscribe: Unsubscribe;
     publish: Publish;
 };
+export declare const EventsContext: React.Context<EventsContextType | null>;
 export declare const useEvents: () => EventsContextType;
 export declare function EventsProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/core/contexts/Events.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { makeUseContext } from "../utils.js";
-const EventsContext = React.createContext(null);
+export const EventsContext = React.createContext(null);
 export const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
 export function EventsProvider({ children }) {
     const [subscriptions] = React.useState({});
     React.useEffect(() => () => {
-        Object.keys(subscriptions).forEach((key) => delete subscriptions[key]);
+        Object.keys(subscriptions).forEach((topic) => delete subscriptions[topic]);
     }, [subscriptions]);
     const context = React.useMemo(() => {
         const unsubscribe = (topic, callback) => {
@@ -19,7 +19,7 @@ export function EventsProvider({ children }) {
             subscriptions[topic].push(callback);
             return () => unsubscribe(topic, callback);
         };
-        const publish = (topic, event) => {
+        const publish = (...[topic, event]) => {
             var _a;
             (_a = subscriptions[topic]) === null || _a === void 0 ? void 0 : _a.forEach((callback) => callback(event));
         };

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { ComponentProps } from "../../types.js";
+export type LightboxPropsContextType = Omit<ComponentProps, "children">;
+export declare const LightboxPropsContext: React.Context<LightboxPropsContextType | null>;
+export declare const useLightboxProps: () => LightboxPropsContextType;
+export declare function LightboxPropsProvider({ children, ...props }: ComponentProps): JSX.Element;

package/dist/core/contexts/LightboxProps.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { makeUseContext } from "../utils.js";
+export const LightboxPropsContext = React.createContext(null);
+export const useLightboxProps = makeUseContext("useLightboxProps", "LightboxPropsContext", LightboxPropsContext);
+export function LightboxPropsProvider({ children, ...props }) {
+    return React.createElement(LightboxPropsContext.Provider, { value: props }, children);
+}

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

@@ -1,22 +1,22 @@
 import * as React from "react";
-export type LightboxState = {
-    currentIndex: number;
-    globalIndex: number;
-    /** @deprecated use `animation.duration` */
-    animationDuration: number;
-    animation?: LightboxStateAction;
-};
-export type LightboxStateAction = {
+import { LightboxProps, LightboxState, Slide } from "../../types.js";
+export type LightboxStateSwipeAction = {
+    type: "swipe";
     increment: number;
     duration?: number;
     easing?: string;
-} | undefined;
-export declare const useLightboxState: () => {
+};
+export type LightboxStateUpdateAction = {
+    type: "update";
+    slides: Slide[];
+    index: number;
+};
+export type LightboxStateAction = LightboxStateSwipeAction | LightboxStateUpdateAction;
+export type LightboxStateContextType = {
     state: LightboxState;
     dispatch: React.Dispatch<LightboxStateAction>;
 };
-export type LightboxStateProviderProps = React.PropsWithChildren<{
-    slidesCount: number;
-    initialIndex: number;
-}>;
-export declare function LightboxStateProvider({ initialIndex, slidesCount, children }: LightboxStateProviderProps): JSX.Element;
+export declare const LightboxStateContext: React.Context<LightboxStateContextType | null>;
+export declare const useLightboxState: () => LightboxStateContextType;
+export type LightboxStateProviderProps = React.PropsWithChildren<Pick<LightboxProps, "slides" | "index">>;
+export declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): JSX.Element;

package/dist/core/contexts/LightboxState.js

@@ -1,26 +1,39 @@
 import * as React from "react";
 import { getSlideIndex, makeUseContext } from "../utils.js";
-const LightboxStateContext = React.createContext(null);
+import { UNKNOWN_ACTION_TYPE } from "../consts.js";
+export const LightboxStateContext = React.createContext(null);
 export const useLightboxState = makeUseContext("useLightboxState", "LightboxStateContext", LightboxStateContext);
-const reducer = (slidesCount) => (state, action) => {
-    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 function LightboxStateProvider({ initialIndex, slidesCount, children }) {
-    const memoizedReducer = React.useMemo(() => reducer(slidesCount), [slidesCount]);
-    const [state, dispatch] = React.useReducer(memoizedReducer, {
-        currentIndex: initialIndex,
-        globalIndex: initialIndex,
-        animationDuration: 0,
-    });
+function reducer(state, action) {
+    switch (action.type) {
+        case "swipe": {
+            const { slides } = state;
+            const increment = (action === null || action === void 0 ? void 0 : action.increment) || 0;
+            const globalIndex = state.globalIndex + increment;
+            const currentIndex = getSlideIndex(globalIndex, slides.length);
+            const animation = increment || action.duration
+                ? {
+                    increment,
+                    duration: action.duration,
+                    easing: action.easing,
+                }
+                : undefined;
+            return { slides, currentIndex, globalIndex, animation };
+        }
+        case "update":
+            return {
+                slides: action.slides,
+                currentIndex: action.index,
+                globalIndex: action.index,
+            };
+        default:
+            throw new Error(UNKNOWN_ACTION_TYPE);
+    }
+}
+export function LightboxStateProvider({ slides, index, children }) {
+    const [state, dispatch] = React.useReducer(reducer, { slides, currentIndex: index, globalIndex: index });
+    React.useEffect(() => {
+        dispatch({ type: "update", slides, index });
+    }, [slides, index]);
     const context = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
     return React.createElement(LightboxStateContext.Provider, { value: context }, children);
 }

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

@@ -3,5 +3,6 @@ export type TimeoutsContextType = {
     setTimeout: (fn: () => void, delay?: number) => number;
     clearTimeout: (id?: number) => void;
 };
+export declare const TimeoutsContext: React.Context<TimeoutsContextType | null>;
 export declare const useTimeouts: () => TimeoutsContextType;
 export declare function TimeoutsProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/core/contexts/Timeouts.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { isDefined, makeUseContext } from "../utils.js";
-const TimeoutsContext = React.createContext(null);
+import { makeUseContext } from "../utils.js";
+export const TimeoutsContext = React.createContext(null);
 export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
 export function TimeoutsProvider({ children }) {
     const [timeouts] = React.useState([]);
@@ -21,7 +21,7 @@ export function TimeoutsProvider({ children }) {
             return id;
         };
         const clearTimeout = (id) => {
-            if (isDefined(id)) {
+            if (id !== undefined) {
                 removeTimeout(id);
                 window.clearTimeout(id);
             }

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

@@ -1,3 +1,4 @@
 export * from "./Events.js";
+export * from "./LightboxProps.js";
 export * from "./LightboxState.js";
 export * from "./Timeouts.js";

package/dist/core/contexts/index.js

@@ -1,3 +1,4 @@
 export * from "./Events.js";
+export * from "./LightboxProps.js";
 export * from "./LightboxState.js";
 export * from "./Timeouts.js";

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

@@ -9,4 +9,7 @@ export type ComputeAnimation<T> = (snapshot: T, rect: DOMRect, translate: {
     easing?: string;
     onfinish?: () => void;
 } | undefined;
-export declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>): (currentSnapshot: T | undefined) => void;
+export declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>): {
+    prepareAnimation: (currentSnapshot: T | undefined) => void;
+    isAnimationPlaying: () => boolean;
+};

package/dist/core/hooks/useAnimation.js

@@ -31,7 +31,13 @@ export function useAnimation(nodeRef, computeAnimation) {
             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, easing });
+                animation.current = undefined;
+                try {
+                    animation.current = (_c = (_b = nodeRef.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, keyframes, { duration, easing });
+                }
+                catch (err) {
+                    console.error(err);
+                }
                 if (animation.current) {
                     animation.current.onfinish = () => {
                         animation.current = undefined;
@@ -42,7 +48,10 @@ export function useAnimation(nodeRef, computeAnimation) {
         }
         snapshot.current = undefined;
     });
-    return (currentSnapshot) => {
-        snapshot.current = currentSnapshot;
+    return {
+        prepareAnimation: (currentSnapshot) => {
+            snapshot.current = currentSnapshot;
+        },
+        isAnimationPlaying: () => { var _a; return ((_a = animation.current) === null || _a === void 0 ? void 0 : _a.playState) === "running"; },
     };
 }

package/dist/core/hooks/useLoseFocus.js

@@ -3,12 +3,12 @@ import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useController } from "../modules/Controller.js";
 export function useLoseFocus(disabled = false) {
     const focused = React.useRef(disabled);
-    const { transferFocus } = useController();
+    const { focus } = useController();
     useLayoutEffect(() => {
         if (disabled) {
-            transferFocus();
+            focus();
         }
-    }, [disabled, transferFocus]);
+    }, [disabled, focus]);
     const onFocus = React.useCallback(() => {
         focused.current = true;
     }, []);

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../types.js";
-export declare function Carousel({ slides, carousel: { finite, preload, padding, spacing } }: ComponentProps): JSX.Element;
+export declare function Carousel({ carousel: { finite, preload, padding, spacing } }: ComponentProps): JSX.Element;
 export declare const CarouselModule: import("../../types.js").Module;

package/dist/core/modules/Carousel.js

@@ -3,40 +3,40 @@ import { createModule } from "../config.js";
 import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseLengthPercentage } 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";
+import { useLightboxProps, useLightboxState } from "../contexts/index.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, MODULE_CAROUSEL } from "../consts.js";
 function cssPrefix(value) {
     return composePrefix(MODULE_CAROUSEL, value);
 }
 function cssSlidePrefix(value) {
     return composePrefix("slide", value);
 }
-function CarouselSlide({ slide, offset, rect }) {
+function CarouselSlide({ slide, offset }) {
     const containerRef = React.useRef(null);
-    const { publish } = useEvents();
     const { currentIndex } = useLightboxState().state;
-    const { render, carousel: { imageFit }, on: { click: onClick }, } = useController().getLightboxProps();
+    const { slideRect, close } = useController();
+    const { render, carousel: { imageFit }, on: { click: onClick }, controller: { closeOnBackdropClick }, } = useLightboxProps();
     const renderSlide = () => {
         var _a, _b, _c, _d;
-        let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+        let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, { slide, offset, rect: slideRect });
         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 }));
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: slideRect, imageFit: imageFit, onClick: offset === 0 ? () => onClick === null || onClick === void 0 ? void 0 : onClick({ index: currentIndex }) : undefined }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
-            _b.call(render, slide),
-            ((_c = render.slideContainer) !== null && _c !== void 0 ? _c : ((_, x) => x))(slide, rendered), (_d = render.slideFooter) === null || _d === void 0 ? void 0 :
-            _d.call(render, slide))) : null;
+            _b.call(render, { slide }),
+            ((_c = render.slideContainer) !== null && _c !== void 0 ? _c : (({ children }) => children))({ slide, children: rendered }), (_d = render.slideFooter) === null || _d === void 0 ? void 0 :
+            _d.call(render, { slide }))) : null;
     };
     const handleBackdropClick = (event) => {
         const container = containerRef.current;
         const target = event.target instanceof HTMLElement ? event.target : undefined;
-        if (target &&
+        if (closeOnBackdropClick &&
+            target &&
             container &&
             (target === container ||
                 (Array.from(container.children).find((x) => x === target) &&
                     target.classList.contains(cssClass(CLASS_FULLSIZE))))) {
-            publish(YARL_EVENT_BACKDROP_CLICK);
+            close();
         }
     };
     return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, renderSlide()));
@@ -44,26 +44,21 @@ function CarouselSlide({ slide, offset, rect }) {
 function Placeholder() {
     return React.createElement("div", { className: cssClass("slide") });
 }
-export function Carousel({ slides, carousel: { finite, preload, padding, spacing } }) {
-    const { currentIndex, globalIndex } = useLightboxState().state;
-    const { setCarouselRef, containerRect } = useController();
+export function Carousel({ carousel: { finite, preload, padding, spacing } }) {
+    const { slides, currentIndex, globalIndex } = useLightboxState().state;
+    const { setCarouselRef } = useController();
     const spacingValue = parseLengthPercentage(spacing);
     const paddingValue = parseLengthPercentage(padding);
-    const paddingPixels = paddingValue.percent !== undefined ? (containerRect.width / 100) * paddingValue.percent : paddingValue.pixel;
-    const rect = {
-        width: Math.max(containerRect.width - 2 * paddingPixels, 0),
-        height: Math.max(containerRect.height - 2 * paddingPixels, 0),
-    };
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            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], rect: rect, offset: 0 }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            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 })));
         }
     }
     return (React.createElement("div", { ref: setCarouselRef, className: clsx(cssClass(cssPrefix()), items.length > 0 && cssClass(cssPrefix("with_slides"))), style: {

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

@@ -1,28 +1,27 @@
 import * as React from "react";
-import { ComponentProps, ContainerRect } from "../../types.js";
+import { Callback, ComponentProps, ContainerRect, ControllerRef, NavigationAction } 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";
-export type NavigationAction = {
-    count?: number;
-};
-declare module "../" {
+import { LightboxStateSwipeAction } from "../contexts/index.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE } from "../consts.js";
+declare module "../index.js" {
     interface EventTypes {
-        [ACTION_PREV]: NavigationAction;
-        [ACTION_NEXT]: NavigationAction;
-        [ACTION_SWIPE]: LightboxStateAction;
+        [ACTION_PREV]: NavigationAction | void;
+        [ACTION_NEXT]: NavigationAction | void;
+        [ACTION_SWIPE]: LightboxStateSwipeAction;
         [ACTION_CLOSE]: void;
-        [YARL_EVENT_BACKDROP_CLICK]: void;
     }
 }
-export type ControllerContextType = {
-    getLightboxProps: () => ComponentProps;
-    subscribeSensors: SubscribeSensors<HTMLDivElement>;
-    transferFocus: () => void;
+export type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {
+    focus: Callback;
+    slideRect: ContainerRect;
     containerRect: ContainerRect;
+    subscribeSensors: SubscribeSensors<HTMLDivElement>;
     containerRef: React.RefObject<HTMLDivElement>;
     setCarouselRef: React.Ref<HTMLDivElement>;
+    toolbarWidth: number | undefined;
+    setToolbarWidth: (width: number | undefined) => void;
 };
-export declare const useController: () => ControllerContextType;
+export declare const ControllerContext: React.Context<ControllerContextType | null>;
+export declare const useController: () => NonNullable<ControllerContextType>;
 export declare function Controller({ children, ...props }: ComponentProps): JSX.Element;
 export declare const ControllerModule: import("../../types.js").Module;