yet-another-react-lightbox 1.13.3 → 2.0.0-rc.2

package/dist/core/modules/NoScroll.js

@@ -2,8 +2,9 @@ import * as React from "react";
 import { createModule } from "../config.js";
 import { cssClass } from "../utils.js";
 import { useLayoutEffect, useRTL } from "../hooks/index.js";
-const noScroll = cssClass("no_scroll");
-const noScrollPadding = cssClass("no_scroll_padding");
+import { CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL } from "../consts.js";
+const noScroll = cssClass(CLASS_NO_SCROLL);
+const noScrollPadding = cssClass(CLASS_NO_SCROLL_PADDING);
 const isHTMLElement = (element) => "style" in element;
 const padScrollbar = (element, padding, rtl) => {
     const styles = window.getComputedStyle(element);
@@ -46,4 +47,4 @@ export const NoScroll = ({ children }) => {
     }, [rtl]);
     return React.createElement(React.Fragment, null, children);
 };
-export const NoScrollModule = createModule("no-scroll", NoScroll);
+export const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);

package/dist/core/modules/Portal.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { LightboxDefaultProps } from "../../types.js";
+import { LightboxDefaultProps } from "../../props.js";
 import { createModule } from "../config.js";
-import { clsx, cssClass, cssVar } from "../utils.js";
-import { useLatest, useMotionPreference } from "../hooks/index.js";
+import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
+import { useEventCallback, useMotionPreference } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
+import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
+const cssPrefix = (value) => composePrefix(MODULE_PORTAL, value);
 const setAttribute = (element, attribute, value) => {
     const previousValue = element.getAttribute(attribute);
     element.setAttribute(attribute, value);
@@ -17,61 +19,70 @@ const setAttribute = (element, attribute, value) => {
         }
     };
 };
-export const Portal = ({ children, ...props }) => {
+export const Portal = ({ children, animation, styles, className, on, close }) => {
     const [mounted, setMounted] = React.useState(false);
     const [visible, setVisible] = React.useState(false);
     const cleanup = React.useRef([]);
-    const latestProps = useLatest(props);
-    const latestAnimationDuration = useLatest(!useMotionPreference() ? props.animation.fade : 0);
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
+    const fadeAnimationDuration = !useMotionPreference() ? animation.fade : 0;
     React.useEffect(() => {
         setMounted(true);
-        return () => setMounted(false);
+        return () => {
+            setMounted(false);
+            setVisible(false);
+        };
     }, []);
-    React.useEffect(() => subscribe("close", () => {
-        var _a, _b;
+    const handleClose = useEventCallback(() => {
+        var _a;
         setVisible(false);
-        (_b = (_a = latestProps.current.on).exiting) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_a = on.exiting) === null || _a === void 0 ? void 0 : _a.call(on);
         setTimeout(() => {
-            var _a, _b;
-            (_b = (_a = latestProps.current.on).exited) === null || _b === void 0 ? void 0 : _b.call(_a);
-            latestProps.current.close();
-        }, latestAnimationDuration.current);
-    }), [setTimeout, subscribe, latestProps, latestAnimationDuration]);
-    const handlePortalRef = React.useCallback((node) => {
-        var _a, _b, _c, _d;
-        if (node) {
-            node.getBoundingClientRect();
-            setVisible(true);
-            (_b = (_a = latestProps.current.on).entering) === null || _b === void 0 ? void 0 : _b.call(_a);
-            const elements = (_d = (_c = node.parentNode) === null || _c === void 0 ? void 0 : _c.children) !== null && _d !== void 0 ? _d : [];
-            for (let i = 0; i < elements.length; i += 1) {
-                const element = elements[i];
-                if (["TEMPLATE", "SCRIPT", "STYLE"].indexOf(element.tagName) === -1 && element !== node) {
-                    cleanup.current.push(setAttribute(element, "inert", "true"));
-                    cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
-                }
+            var _a;
+            (_a = on.exited) === null || _a === void 0 ? void 0 : _a.call(on);
+            close();
+        }, fadeAnimationDuration);
+    });
+    React.useEffect(() => subscribe(ACTION_CLOSE, handleClose), [subscribe, handleClose]);
+    const handleEnter = useEventCallback((node) => {
+        var _a, _b, _c;
+        node.scrollTop;
+        setVisible(true);
+        (_a = on.entering) === null || _a === void 0 ? void 0 : _a.call(on);
+        const elements = (_c = (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : [];
+        for (let i = 0; i < elements.length; i += 1) {
+            const element = elements[i];
+            if (["TEMPLATE", "SCRIPT", "STYLE"].indexOf(element.tagName) === -1 && element !== node) {
+                cleanup.current.push(setAttribute(element, "inert", "true"));
+                cleanup.current.push(setAttribute(element, "aria-hidden", "true"));
             }
-            setTimeout(() => {
-                var _a, _b;
-                (_b = (_a = latestProps.current.on).entered) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }, latestAnimationDuration.current);
+        }
+        setTimeout(() => {
+            var _a;
+            (_a = on.entered) === null || _a === void 0 ? void 0 : _a.call(on);
+        }, fadeAnimationDuration);
+    });
+    const handleExit = useEventCallback(() => {
+        cleanup.current.forEach((clean) => clean());
+        cleanup.current = [];
+    });
+    const handleRef = React.useCallback((node) => {
+        if (node) {
+            handleEnter(node);
         }
         else {
-            cleanup.current.forEach((clean) => clean());
-            cleanup.current = [];
+            handleExit();
         }
-    }, [setTimeout, latestProps, latestAnimationDuration]);
+    }, [handleEnter, handleExit]);
     return mounted
-        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(props.className, cssClass("root"), cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", style: {
-                ...(props.animation.fade !== LightboxDefaultProps.animation.fade
+        ? ReactDOM.createPortal(React.createElement("div", { ref: handleRef, className: clsx(className, cssClass("root"), cssClass(cssPrefix()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix("open"))), role: "presentation", "aria-live": "polite", style: {
+                ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? {
-                        [cssVar("fade_animation_duration")]: `${Math.round(props.animation.fade)}ms`,
+                        [cssVar("fade_animation_duration")]: `${fadeAnimationDuration}ms`,
                     }
                     : null),
-                ...props.styles.root,
+                ...styles.root,
             } }, children), document.body)
         : null;
 };
-export const PortalModule = createModule("portal", Portal);
+export const PortalModule = createModule(MODULE_PORTAL, Portal);

package/dist/core/modules/Toolbar.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cssClass, label } from "../utils.js";
+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";
+const cssPrefix = (value) => composePrefix(MODULE_TOOLBAR, value);
 export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
@@ -12,7 +14,7 @@ export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, i
             publish("toolbar-width", containerRect.width);
         }
     }, [publish, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
-    const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: "close", label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => publish("close") }));
-    return (React.createElement("div", { ref: setContainerRef, className: cssClass("toolbar") }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === "close" ? renderCloseButton() : button))));
+    const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => publish(ACTION_CLOSE) }));
+    return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
 };
-export const ToolbarModule = createModule("toolbar", Toolbar);
+export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

package/dist/core/modules/controller/index.d.ts

@@ -0,0 +1,8 @@
+export declare enum SwipeState {
+    NONE = 0,
+    SWIPE = 1,
+    ANIMATION = 2
+}
+export * from "./usePointerSwipe.js";
+export * from "./usePreventSwipeNavigation.js";
+export * from "./useWheelSwipe.js";

package/dist/core/modules/controller/index.js

@@ -0,0 +1,9 @@
+export var SwipeState;
+(function (SwipeState) {
+    SwipeState[SwipeState["NONE"] = 0] = "NONE";
+    SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
+    SwipeState[SwipeState["ANIMATION"] = 2] = "ANIMATION";
+})(SwipeState || (SwipeState = {}));
+export * from "./usePointerSwipe.js";
+export * from "./usePreventSwipeNavigation.js";
+export * from "./useWheelSwipe.js";

package/dist/core/modules/controller/useOffset.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const useOffset: (onChange: (offset: number) => void) => [number, React.Dispatch<React.SetStateAction<number>>];

package/dist/core/modules/controller/useOffset.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useEventCallback } from "../../hooks/useEventCallback.js";
+export const useOffset = (onChange) => {
+    const [offset, setOffset] = React.useState(0);
+    const handleOnChange = useEventCallback(() => {
+        onChange(offset);
+    });
+    React.useEffect(handleOnChange, [offset, handleOnChange]);
+    return [offset, setOffset];
+};

package/dist/core/modules/controller/usePointerSwipe.d.ts

@@ -0,0 +1,3 @@
+import { UseSensors } from "../../hooks/useSensors.js";
+import { SwipeState } from "./index.js";
+export declare const usePointerSwipe: <T extends Element = Element>(swipeState: SwipeState, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, onChange: (offset: number) => void) => void;

package/dist/core/modules/controller/usePointerSwipe.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { cleanup } from "../../utils.js";
+import { useEventCallback } from "../../hooks/useEventCallback.js";
+import { SwipeState } from "./index.js";
+import { useOffset } from "./useOffset.js";
+import { EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, } from "../../consts.js";
+export const usePointerSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeFinish, onSwipeCancel, onChange) => {
+    const [offset, setOffset] = useOffset(onChange);
+    const pointers = React.useRef([]);
+    const activePointer = React.useRef();
+    const startTime = React.useRef(0);
+    const clearPointer = React.useCallback((event) => {
+        if (activePointer.current === event.pointerId) {
+            activePointer.current = undefined;
+        }
+        const currentPointers = pointers.current;
+        currentPointers.splice(0, currentPointers.length, ...currentPointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const addPointer = React.useCallback((event) => {
+        clearPointer(event);
+        pointers.current.push(event);
+    }, [clearPointer]);
+    const onPointerDown = useEventCallback((event) => {
+        addPointer(event);
+    });
+    const onPointerUp = useEventCallback((event) => {
+        if (swipeState === SwipeState.SWIPE &&
+            pointers.current.find((x) => x.pointerId === event.pointerId) &&
+            activePointer.current === event.pointerId) {
+            const duration = Date.now() - startTime.current;
+            if (Math.abs(offset) > 0.3 * containerWidth ||
+                (Math.abs(offset) > 5 && duration < swipeAnimationDuration)) {
+                onSwipeFinish(offset, duration);
+            }
+            else {
+                onSwipeCancel(offset);
+            }
+            setOffset(0);
+        }
+        clearPointer(event);
+    });
+    const onPointerMove = useEventCallback((event) => {
+        const pointer = pointers.current.find((p) => p.pointerId === event.pointerId);
+        if (pointer) {
+            const deltaX = event.clientX - pointer.clientX;
+            const deltaY = event.clientY - pointer.clientY;
+            if (!swipeState) {
+                if (isSwipeValid(deltaX) && Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 30) {
+                    addPointer(event);
+                    activePointer.current = event.pointerId;
+                    startTime.current = Date.now();
+                    onSwipeStart();
+                }
+            }
+            else if (activePointer.current === event.pointerId) {
+                setOffset(deltaX);
+            }
+        }
+    });
+    React.useEffect(() => cleanup(subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
+};

package/dist/core/modules/controller/usePreventSwipeNavigation.d.ts

@@ -0,0 +1,3 @@
+/** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
+ * this has to be done via non-passive native event handler */
+export declare const usePreventSwipeNavigation: <T extends HTMLElement = HTMLElement>() => (node: T | null) => void;

package/dist/core/modules/controller/usePreventSwipeNavigation.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+const WHEEL = "wheel";
+const preventDefault = (event) => {
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
+        event.preventDefault();
+    }
+};
+export const usePreventSwipeNavigation = () => {
+    const ref = React.useRef(null);
+    return React.useCallback((node) => {
+        var _a;
+        if (node) {
+            node.addEventListener(WHEEL, preventDefault, { passive: false });
+        }
+        else {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(WHEEL, preventDefault);
+        }
+        ref.current = node;
+    }, []);
+};

package/dist/core/modules/controller/useWheelSwipe.d.ts

@@ -0,0 +1,3 @@
+import { UseSensors } from "../../hooks/index.js";
+import { SwipeState } from "./index.js";
+export declare const useWheelSwipe: <T extends Element = Element>(swipeState: SwipeState | undefined, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, onChange: (offset: number) => void) => void;

package/dist/core/modules/controller/useWheelSwipe.js

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { useEventCallback } from "../../hooks/index.js";
+import { useTimeouts } from "../../contexts/index.js";
+import { SwipeState } from "./index.js";
+import { useOffset } from "./useOffset.js";
+import { EVENT_ON_WHEEL } from "../../consts.js";
+export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeFinish, onSwipeCancel, onChange) => {
+    const [offset, setOffset] = useOffset(onChange);
+    const swipeIntent = React.useRef(0);
+    const swipeIntentCleanup = React.useRef();
+    const swipeResetCleanup = React.useRef();
+    const wheelResidualMomentum = React.useRef(0);
+    const startTime = React.useRef(0);
+    const { setTimeout, clearTimeout } = useTimeouts();
+    const cancelSwipeIntentCleanup = React.useCallback(() => {
+        if (swipeIntentCleanup.current) {
+            clearTimeout(swipeIntentCleanup.current);
+            swipeIntentCleanup.current = undefined;
+        }
+    }, [clearTimeout]);
+    const cancelSwipeResetCleanup = React.useCallback(() => {
+        if (swipeResetCleanup.current) {
+            clearTimeout(swipeResetCleanup.current);
+            swipeResetCleanup.current = undefined;
+        }
+    }, [clearTimeout]);
+    const handleCleanup = useEventCallback(() => {
+        if (swipeState !== SwipeState.SWIPE) {
+            if (offset !== 0) {
+                setOffset(0);
+            }
+            startTime.current = 0;
+            cancelSwipeIntentCleanup();
+            cancelSwipeResetCleanup();
+        }
+    });
+    React.useEffect(handleCleanup, [swipeState, handleCleanup]);
+    const handleCancelSwipe = useEventCallback((currentSwipeOffset) => {
+        swipeResetCleanup.current = undefined;
+        if (swipeState === SwipeState.SWIPE && offset === currentSwipeOffset) {
+            onSwipeCancel(offset);
+        }
+    });
+    const onWheel = useEventCallback((event) => {
+        if (event.ctrlKey) {
+            return;
+        }
+        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+            return;
+        }
+        if (!swipeState) {
+            if (Math.abs(event.deltaX) <= 1.2 * Math.abs(wheelResidualMomentum.current)) {
+                wheelResidualMomentum.current = event.deltaX;
+                return;
+            }
+            if (!isSwipeValid(-event.deltaX)) {
+                return;
+            }
+            swipeIntent.current += event.deltaX;
+            cancelSwipeIntentCleanup();
+            if (Math.abs(swipeIntent.current) > 30) {
+                swipeIntent.current = 0;
+                wheelResidualMomentum.current = 0;
+                startTime.current = Date.now();
+                onSwipeStart();
+            }
+            else {
+                const currentSwipeIntent = swipeIntent.current;
+                swipeIntentCleanup.current = setTimeout(() => {
+                    swipeIntentCleanup.current = undefined;
+                    if (currentSwipeIntent === swipeIntent.current) {
+                        swipeIntent.current = 0;
+                    }
+                }, swipeAnimationDuration);
+            }
+        }
+        else if (swipeState === SwipeState.SWIPE) {
+            let newSwipeOffset = offset - event.deltaX;
+            newSwipeOffset = Math.min(Math.abs(newSwipeOffset), containerWidth) * Math.sign(newSwipeOffset);
+            setOffset(newSwipeOffset);
+            cancelSwipeResetCleanup();
+            if (Math.abs(newSwipeOffset) > 0.2 * containerWidth) {
+                wheelResidualMomentum.current = event.deltaX;
+                onSwipeFinish(newSwipeOffset, Date.now() - startTime.current);
+                return;
+            }
+            swipeResetCleanup.current = setTimeout(() => handleCancelSwipe(newSwipeOffset), 2 * swipeAnimationDuration);
+        }
+        else {
+            wheelResidualMomentum.current = event.deltaX;
+        }
+    });
+    React.useEffect(() => subscribeSensors(EVENT_ON_WHEEL, onWheel), [subscribeSensors, onWheel]);
+};

package/dist/core/utils.d.ts

@@ -1,11 +1,22 @@
 import * as React from "react";
-import { Labels } from "../types.js";
+import { Labels, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
+export declare const composePrefix: (base: string, prefix?: string) => string;
+export declare const makeComposePrefix: (base: string) => (prefix?: string) => string;
 export declare const label: (labels: Labels | undefined, lbl: string) => string;
 export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
 export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
 export declare const hasWindow: () => boolean;
 export declare const isDefined: <T = any>(x: T | undefined) => x is T;
+export declare const isNumber: (value: any) => value is number;
 export declare const round: (value: number, decimals?: number) => number;
+export declare const isImageSlide: (slide: Slide) => slide is SlideImage;
+export declare const parseLengthPercentage: (input: unknown) => {
+    pixel: number;
+    percent?: undefined;
+} | {
+    percent: number;
+    pixel?: undefined;
+};

package/dist/core/utils.js

@@ -3,6 +3,8 @@ export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).j
 const cssPrefix = "yarl__";
 export const cssClass = (name) => `${cssPrefix}${name}`;
 export const cssVar = (name) => `--${cssPrefix}${name}`;
+export const composePrefix = (base, prefix) => `${base}${prefix ? `_${prefix}` : ""}`;
+export const makeComposePrefix = (base) => (prefix) => composePrefix(base, prefix);
 export const label = (labels, lbl) => (labels && labels[lbl] ? labels[lbl] : lbl);
 export const cleanup = (...cleaners) => () => {
     cleaners.forEach((cleaner) => {
@@ -18,7 +20,19 @@ export const makeUseContext = (name, contextName, context) => () => {
 };
 export const hasWindow = () => typeof window !== "undefined";
 export const isDefined = (x) => typeof x !== "undefined";
+export const isNumber = (value) => typeof value === "number";
 export const round = (value, decimals = 0) => {
     const factor = 10 ** decimals;
     return Math.round((value + Number.EPSILON) * factor) / factor;
 };
+export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
+export const parseLengthPercentage = (input) => {
+    if (typeof input === "number") {
+        return { pixel: input };
+    }
+    if (typeof input === "string") {
+        const value = parseInt(input, 10);
+        return input.endsWith("%") ? { percent: value } : { pixel: value };
+    }
+    return { pixel: 0 };
+};

package/dist/plugins/captions/Captions.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from "../../types.js";
+export declare const defaultCaptionsProps: {
+    descriptionTextAlign: "start";
+    descriptionMaxLines: number;
+};
+/** Captions plugin */
+export declare const Captions: Plugin;

package/dist/plugins/captions/Captions.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { createModule, MODULE_CONTROLLER, PLUGIN_CAPTIONS } from "../../core/index.js";
+import { CaptionsContextProvider } from "./CaptionsContext.js";
+import { Description } from "./Description.js";
+import { Title } from "./Title.js";
+export const defaultCaptionsProps = {
+    descriptionTextAlign: "start",
+    descriptionMaxLines: 3,
+};
+export const Captions = ({ augment, addParent }) => {
+    addParent(MODULE_CONTROLLER, createModule(PLUGIN_CAPTIONS, CaptionsContextProvider));
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => ({
+        render: {
+            slideFooter: (slide) => (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
+                renderFooter(slide),
+                slide.title && React.createElement(Title, { styles: styles, title: slide.title }),
+                slide.description && (React.createElement(Description, { styles: styles, description: slide.description, ...{ ...defaultCaptionsProps, ...captions } })))),
+            ...restRender,
+        },
+        styles,
+        ...restProps,
+    }));
+};

package/dist/plugins/captions/CaptionsContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare type CaptionsContextType = {
+    toolbarWidth?: number;
+};
+export declare const useCaptions: () => CaptionsContextType;
+/** Captions plugin context holder */
+export declare const CaptionsContextProvider: React.FC<React.PropsWithChildren>;
+export {};

package/dist/plugins/captions/CaptionsContext.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { isDefined, isNumber, makeUseContext, useEvents } from "../../core/index.js";
+const CaptionsContext = React.createContext(null);
+export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
+export const CaptionsContextProvider = ({ children }) => {
+    const { subscribe } = useEvents();
+    const [toolbarWidth, setToolbarWidth] = React.useState();
+    React.useEffect(() => subscribe("toolbar-width", (event) => {
+        if (!isDefined(event) || isNumber(event)) {
+            setToolbarWidth(event);
+        }
+    }), [subscribe]);
+    const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
+    return React.createElement(CaptionsContext.Provider, { value: context }, children);
+};

package/dist/plugins/captions/Description.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { LightboxProps, Slide } from "../../types.js";
+declare type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
+export declare const Description: React.FC<DescriptionProps>;
+export {};

package/dist/plugins/captions/Description.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { clsx, cssVar } from "../../core/index.js";
+import { defaultCaptionsProps } from "./Captions.js";
+import { cssPrefix } from "./utils.js";
+export const Description = ({ description, descriptionTextAlign, descriptionMaxLines, styles, }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+    React.createElement("div", { className: cssPrefix("description"), style: {
+            ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
+                descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
+                ? {
+                    style: {
+                        [cssVar("slide_description_text_align")]: descriptionTextAlign,
+                        [cssVar("slide_description_max_lines")]: descriptionMaxLines,
+                    },
+                }
+                : null),
+            ...styles.captionsDescription,
+        } }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));

package/dist/plugins/captions/Title.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { LightboxProps, Slide } from "../../types.js";
+declare type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
+export declare const Title: React.FC<TitleProps>;
+export {};

package/dist/plugins/captions/Title.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { clsx, cssVar } from "../../core/index.js";
+import { useCaptions } from "./CaptionsContext.js";
+import { cssPrefix } from "./utils.js";
+export const Title = ({ title, styles }) => {
+    const { toolbarWidth } = useCaptions();
+    return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
+        React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+};

package/dist/plugins/{captions.css → captions/captions.css}

@@ -4,8 +4,6 @@
   right: var(--yarl__slide_captions_container_right, 0);
   padding: var(--yarl__slide_captions_container_padding, 16px);
   background: var(--yarl__slide_captions_container_background, rgba(0, 0, 0, 0.5));
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
 }
 .yarl__slide_title {
   color: var(--yarl__slide_title_color, #fff);

package/dist/plugins/{Captions.d.ts → captions/index.d.ts}

@@ -1,7 +1,7 @@
-import { Component, Plugin } from "../types.js";
+import { Captions } from "./Captions.js";
 declare type TextAlignment = "start" | "end" | "center";
-declare module "../types.js" {
-    interface SlideImage {
+declare module "../../types" {
+    interface GenericSlide {
         /** slide title */
         title?: string;
         /** slide description */
@@ -27,10 +27,4 @@ declare module "../types.js" {
         captionsDescriptionContainer: "captionsDescriptionContainer";
     }
 }
-/** Captions plugin context holder */
-export declare const CaptionsComponent: Component;
-/** Captions plugin module */
-export declare const CaptionsModule: import("../types.js").Module;
-/** Captions plugin */
-export declare const Captions: Plugin;
 export default Captions;

package/dist/plugins/captions/index.js

@@ -0,0 +1,2 @@
+import { Captions } from "./Captions.js";
+export default Captions;

package/dist/plugins/captions/utils.d.ts

@@ -0,0 +1 @@
+export declare const cssPrefix: (className: string) => string;

package/dist/plugins/captions/utils.js

@@ -0,0 +1,2 @@
+import { cssClass } from "../../core/index.js";
+export const cssPrefix = (className) => cssClass(`slide_${className}`);

package/dist/plugins/fullscreen/Fullscreen.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from "../../types.js";
+/** Fullscreen plugin */
+export declare const Fullscreen: Plugin;

package/dist/plugins/fullscreen/Fullscreen.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
+import { FullscreenButton } from "./FullscreenButton.js";
+import { FullscreenContextProvider } from "./FullscreenContext.js";
+export const Fullscreen = ({ augment, contains, addParent }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+        toolbar: {
+            buttons: [
+                React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN, auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
+                ...buttons,
+            ],
+            ...restToolbar,
+        },
+        ...restProps,
+    }));
+    addParent(contains(PLUGIN_THUMBNAILS) ? PLUGIN_THUMBNAILS : MODULE_CONTROLLER, createModule(PLUGIN_FULLSCREEN, FullscreenContextProvider));
+};

package/dist/plugins/fullscreen/FullscreenButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { LightboxProps } from "../../types.js";
+/** Fullscreen button props */
+export declare type FullscreenButtonProps = Pick<LightboxProps, "labels" | "render"> & {
+    auto: boolean;
+};
+/** Fullscreen button */
+export declare const FullscreenButton: React.FC<FullscreenButtonProps>;