yet-another-react-lightbox 3.5.4 → 3.6.0

package/dist/plugins/captions/captions.css

@@ -1,33 +1 @@
-.yarl__slide_captions_container {
-  position: absolute;
-  left: var(--yarl__slide_captions_container_left, 0);
-  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);
-}
-.yarl__slide_title {
-  color: var(--yarl__slide_title_color, #fff);
-  font-size: var(--yarl__slide_title_font_size, 125%);
-  font-weight: var(--yarl__slide_title_font_weight, bolder);
-  max-width: calc(100% - var(--yarl__toolbar_width, 0px));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.yarl__slide_title_container {
-  top: var(--yarl__slide_title_container_top, 0);
-}
-.yarl__slide_description {
-  overflow: hidden;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--yarl__slide_description_max_lines, 3);
-  text-align: var(--yarl__slide_description_text_align, start);
-  color: var(--yarl__slide_description_color, #fff);
-}
-.yarl__slide_description_container {
-  bottom: var(--yarl__slide_description_container_bottom, 0);
-}
+.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}

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

@@ -0,0 +1,2 @@
+declare const styles: unknown;
+export default styles;

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

@@ -1,6 +1,9 @@
-import * as React from "react";
-import { PLUGIN_CAPTIONS } from "../../core/index.js";
-import { Captions } from "./Captions.js";
+import * as React from 'react';
+import { PluginProps, PLUGIN_CAPTIONS } from '../../types.js';
+
+/** Captions plugin */
+declare function Captions({ augment, addModule }: PluginProps): void;
+
 declare module "../../types.js" {
     type TextAlignment = "start" | "end" | "center";
     interface GenericSlide {
@@ -53,4 +56,5 @@ declare module "../../types.js" {
         hide: Callback;
     }
 }
-export default Captions;
+
+export { Captions as default };

package/dist/plugins/captions/index.js

@@ -1,3 +1,104 @@
-import { PLUGIN_CAPTIONS } from "../../core/index.js";
-import { Captions } from "./Captions.js";
-export default Captions;
+import { cssClass, useLightboxProps, makeUseContext, useController, clsx, cssVar, createIcon, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import * as React from 'react';
+import { PLUGIN_CAPTIONS } from '../../types.js';
+
+const cssPrefix = (className) => cssClass(`slide_${className}`);
+
+const defaultCaptionsProps = {
+    descriptionTextAlign: "start",
+    descriptionMaxLines: 3,
+    showToggle: false,
+};
+const resolveCaptionsProps = (captions) => ({
+    ...defaultCaptionsProps,
+    ...captions,
+});
+function useCaptionsProps() {
+    const { captions } = useLightboxProps();
+    return resolveCaptionsProps(captions);
+}
+
+const CaptionsContext = React.createContext(null);
+const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
+function CaptionsContextProvider({ captions, children }) {
+    const { ref } = resolveCaptionsProps(captions);
+    const [visible, setVisible] = React.useState(true);
+    const context = React.useMemo(() => ({
+        visible,
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+    }), [visible]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return React.createElement(CaptionsContext.Provider, { value: context }, children);
+}
+
+function Title({ title }) {
+    const { toolbarWidth } = useController();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
+    return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
+        React.createElement("div", { className: cssPrefix("title"), style: {
+                ...(toolbarWidth ? { [cssVar("toolbar_width")]: `${toolbarWidth}px` } : null),
+                ...styles.captionsTitle,
+            } }, title)));
+}
+
+function Description({ description }) {
+    const { descriptionTextAlign, descriptionMaxLines } = useCaptionsProps();
+    const { styles } = useLightboxProps();
+    const { visible } = useCaptions();
+    if (!visible)
+        return null;
+    return (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
+                    ? {
+                        [cssVar("slide_description_text_align")]: descriptionTextAlign,
+                        [cssVar("slide_description_max_lines")]: descriptionMaxLines,
+                    }
+                    : null),
+                ...styles.captionsDescription,
+            } }, typeof description === "string"
+            ? description
+                .split("\n")
+                .flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
+            : description)));
+}
+
+const captionsIcon = () => (React.createElement(React.Fragment, null,
+    React.createElement("path", { strokeWidth: 2, stroke: "currentColor", strokeLinejoin: "round", fill: "none", d: "M3 5l18 0l0 14l-18 0l0-14z" }),
+    React.createElement("path", { d: "M7 15h3c.55 0 1-.45 1-1v-1H9.5v.5h-2v-3h2v.5H11v-1c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm7 0h3c.55 0 1-.45 1-1v-1h-1.5v.5h-2v-3h2v.5H18v-1c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1z" })));
+const CaptionsVisible = createIcon("CaptionsVisible", captionsIcon());
+const CaptionsHidden = createIconDisabled("CaptionsVisible", captionsIcon());
+function CaptionsButton() {
+    const { visible, show, hide } = useCaptions();
+    const { render } = useLightboxProps();
+    if (render.buttonCaptions) {
+        return React.createElement(React.Fragment, null, render.buttonCaptions({ visible, show, hide }));
+    }
+    return (React.createElement(IconButton, { label: visible ? "Hide captions" : "Show captions", icon: visible ? CaptionsVisible : CaptionsHidden, renderIcon: visible ? render.iconCaptionsVisible : render.iconCaptionsHidden, onClick: visible ? hide : show }));
+}
+
+function Captions({ augment, addModule }) {
+    augment(({ captions: captionsProps, render: { slideFooter: renderFooter, ...restRender }, toolbar, ...restProps }) => {
+        const captions = resolveCaptionsProps(captionsProps);
+        return {
+            render: {
+                slideFooter: ({ slide }) => (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
+                    renderFooter({ slide }),
+                    slide.title && React.createElement(Title, { title: slide.title }),
+                    slide.description && React.createElement(Description, { description: slide.description }))),
+                ...restRender,
+            },
+            toolbar: addToolbarButton(toolbar, PLUGIN_CAPTIONS, captions.showToggle ? React.createElement(CaptionsButton, null) : null),
+            captions,
+            ...restProps,
+        };
+    });
+    addModule(createModule(PLUGIN_CAPTIONS, CaptionsContextProvider));
+}
+
+export { Captions as default };

package/dist/plugins/counter/counter.css

@@ -1,16 +1 @@
-.yarl__counter {
-  position: var(--yarl__counter_position, absolute);
-  top: var(--yarl__counter_top, 0);
-  left: var(--yarl__counter_left, 0);
-  bottom: var(--yarl__counter_bottom, unset);
-  right: var(--yarl__counter_right, unset);
-  color: var(--yarl__counter_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
-  -webkit-filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
-          filter: var(--yarl__counter_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
-  margin: var(--yarl__counter_margin, var(--yarl__toolbar_padding, 8px));
-  padding: var(--yarl__counter_padding, var(--yarl__button_padding, 8px));
-  line-height: var(--yarl__counter_line_height, var(--yarl__icon_size, 32px));
-  -webkit-user-select: var(--yarl__counter_user_select, none);
-     -moz-user-select: var(--yarl__counter_user_select, none);
-          user-select: var(--yarl__counter_user_select, none);
-}
+.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));-webkit-filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}

package/dist/plugins/counter/counter.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: unknown;
+export default styles;

package/dist/plugins/counter/index.d.ts

@@ -1,9 +1,14 @@
-/// <reference types="react" />
-import { Counter } from "./Counter.js";
+import * as React from 'react';
+import { PluginProps } from '../../types.js';
+
+/** Counter plugin */
+declare function Counter({ addChild }: PluginProps): void;
+
 declare module "../../types.js" {
     interface LightboxProps {
         /** HTML div element attributes to be passed to the Counter plugin container */
         counter?: React.HTMLAttributes<HTMLDivElement>;
     }
 }
-export default Counter;
+
+export { Counter as default };

package/dist/plugins/counter/index.js

@@ -1,2 +1,18 @@
-import { Counter } from "./Counter.js";
-export default Counter;
+import * as React from 'react';
+import { useLightboxState, clsx, cssClass, createModule } from '../../index.js';
+import { MODULE_CONTROLLER, PLUGIN_COUNTER } from '../../types.js';
+
+function CounterComponent({ counter: { className, ...rest } = {} }) {
+    const { slides, currentIndex } = useLightboxState();
+    if (slides.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx(cssClass("counter"), className), ...rest },
+        currentIndex + 1,
+        " / ",
+        slides.length));
+}
+function Counter({ addChild }) {
+    addChild(MODULE_CONTROLLER, createModule(PLUGIN_COUNTER, CounterComponent));
+}
+
+export { Counter as default };

package/dist/plugins/download/index.d.ts

@@ -1,5 +1,7 @@
-import { PLUGIN_DOWNLOAD } from "../../core/index.js";
-import { Download } from "./Download.js";
+import { PluginProps, PLUGIN_DOWNLOAD } from '../../types.js';
+
+declare function Download({ augment }: PluginProps): void;
+
 declare module "../../types.js" {
     interface GenericSlide {
         /** download url */
@@ -24,4 +26,5 @@ declare module "../../types.js" {
         [PLUGIN_DOWNLOAD]: null;
     }
 }
-export default Download;
+
+export { Download as default };

package/dist/plugins/download/index.js

@@ -1,3 +1,90 @@
-import { PLUGIN_DOWNLOAD } from "../../core/index.js";
-import { Download } from "./Download.js";
-export default Download;
+import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
+import * as React from 'react';
+import { PLUGIN_DOWNLOAD } from '../../types.js';
+
+function download(url, name) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.responseType = "blob";
+    xhr.onload = () => {
+        saveAs(xhr.response, name);
+    };
+    xhr.onerror = () => {
+        console.error("Failed to download file");
+    };
+    xhr.send();
+}
+function corsEnabled(url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("HEAD", url, false);
+    try {
+        xhr.send();
+    }
+    catch (e) {
+    }
+    return xhr.status >= 200 && xhr.status <= 299;
+}
+function click(link) {
+    try {
+        link.dispatchEvent(new MouseEvent("click"));
+    }
+    catch (e) {
+        const event = document.createEvent("MouseEvents");
+        event.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+        link.dispatchEvent(event);
+    }
+}
+function saveAs(source, name) {
+    const link = document.createElement("a");
+    link.rel = "noopener";
+    link.download = name || "";
+    if (!link.download) {
+        link.target = "_blank";
+    }
+    if (typeof source === "string") {
+        link.href = source;
+        if (link.origin !== window.location.origin) {
+            if (corsEnabled(link.href)) {
+                download(source, name);
+            }
+            else {
+                link.target = "_blank";
+                click(link);
+            }
+        }
+        else {
+            click(link);
+        }
+    }
+    else {
+        link.href = URL.createObjectURL(source);
+        setTimeout(() => URL.revokeObjectURL(link.href), 30000);
+        setTimeout(() => click(link), 0);
+    }
+}
+
+const DownloadIcon = createIcon("DownloadIcon", React.createElement("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5z" }));
+function DownloadButton() {
+    const { render, on } = useLightboxProps();
+    const { currentSlide, currentIndex } = useLightboxState();
+    if (render.buttonDownload) {
+        return React.createElement(React.Fragment, null, render.buttonDownload());
+    }
+    const downloadUrl = (currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadUrl) || (currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined);
+    return (React.createElement(IconButton, { label: "Download", icon: DownloadIcon, renderIcon: render.iconDownload, disabled: !downloadUrl, onClick: () => {
+            var _a;
+            if (downloadUrl) {
+                saveAs(downloadUrl, currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.downloadFilename);
+                (_a = on.download) === null || _a === void 0 ? void 0 : _a.call(on, { index: currentIndex });
+            }
+        } }));
+}
+
+function Download({ augment }) {
+    augment(({ toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_DOWNLOAD, React.createElement(DownloadButton, null)),
+        ...restProps,
+    }));
+}
+
+export { Download as default };

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

@@ -1,6 +1,9 @@
-import * as React from "react";
-import { PLUGIN_FULLSCREEN } from "../../core/index.js";
-import { Fullscreen } from "./Fullscreen.js";
+import * as React from 'react';
+import { PluginProps, PLUGIN_FULLSCREEN } from '../../types.js';
+
+/** Fullscreen plugin */
+declare function Fullscreen({ augment, contains, addParent }: PluginProps): void;
+
 declare module "../../types.js" {
     interface LightboxProps {
         /** Fullscreen plugin settings */
@@ -52,4 +55,5 @@ declare global {
         msRequestFullscreen?: () => void;
     }
 }
-export default Fullscreen;
+
+export { Fullscreen as default };

package/dist/plugins/fullscreen/index.js

@@ -1,3 +1,128 @@
-import { PLUGIN_FULLSCREEN } from "../../core/index.js";
-import { Fullscreen } from "./Fullscreen.js";
-export default Fullscreen;
+import { makeUseContext, useLayoutEffect, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
+import * as React from 'react';
+import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
+
+const defaultFullscreenProps = {
+    auto: false,
+    ref: null,
+};
+const resolveFullscreenProps = (fullscreen) => ({
+    ...defaultFullscreenProps,
+    ...fullscreen,
+});
+
+const FullscreenContext = React.createContext(null);
+const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
+function FullscreenContextProvider({ fullscreen: fullscreenProps, children }) {
+    const { auto, ref } = resolveFullscreenProps(fullscreenProps);
+    const containerRef = React.useRef(null);
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const [disabled, setDisabled] = React.useState();
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        setDisabled(!((_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false));
+    }, []);
+    const getFullscreenElement = React.useCallback(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.webkitFullscreenElement) !== null && _b !== void 0 ? _b : document.mozFullScreenElement) !== null && _c !== void 0 ? _c : document.msFullscreenElement;
+    }, []);
+    const enter = React.useCallback(() => {
+        const container = containerRef.current;
+        if (container) {
+            try {
+                if (container.requestFullscreen) {
+                    container.requestFullscreen().catch(() => { });
+                }
+                else if (container.webkitRequestFullscreen) {
+                    container.webkitRequestFullscreen();
+                }
+                else if (container.mozRequestFullScreen) {
+                    container.mozRequestFullScreen();
+                }
+                else if (container.msRequestFullscreen) {
+                    container.msRequestFullscreen();
+                }
+            }
+            catch (err) {
+            }
+        }
+    }, []);
+    const exit = React.useCallback(() => {
+        if (getFullscreenElement()) {
+            try {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen().catch(() => { });
+                }
+                else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+                else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                }
+                else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+            catch (err) {
+            }
+        }
+    }, [getFullscreenElement]);
+    const fullscreenChangeListener = React.useCallback(() => {
+        if (getFullscreenElement() === containerRef.current) {
+            setFullscreen(true);
+        }
+        else {
+            setFullscreen(false);
+        }
+    }, [getFullscreenElement]);
+    React.useEffect(() => {
+        const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+        events.forEach((event) => {
+            document.addEventListener(event, fullscreenChangeListener);
+        });
+        return () => {
+            events.forEach((event) => {
+                document.removeEventListener(event, fullscreenChangeListener);
+            });
+        };
+    }, [fullscreenChangeListener]);
+    const handleAutoFullscreen = useEventCallback(() => { var _a; return (_a = (auto ? enter : null)) === null || _a === void 0 ? void 0 : _a(); });
+    React.useEffect(() => {
+        handleAutoFullscreen();
+        return () => exit();
+    }, [handleAutoFullscreen, exit]);
+    const context = React.useMemo(() => ({
+        fullscreen,
+        disabled,
+        enter,
+        exit,
+    }), [fullscreen, disabled, enter, exit]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
+        React.createElement(FullscreenContext.Provider, { value: context }, children)));
+}
+
+const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
+const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
+function FullscreenButton() {
+    var _a;
+    const { fullscreen, disabled, enter, exit } = useFullscreen();
+    const { render } = useLightboxProps();
+    if (disabled)
+        return null;
+    if (render.buttonFullscreen) {
+        return React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, disabled, enter, exit }));
+    }
+    return (React.createElement(IconButton, { disabled: disabled, label: fullscreen ? "Exit Fullscreen" : "Enter Fullscreen", icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: fullscreen ? exit : enter }));
+}
+
+function Fullscreen({ augment, contains, addParent }) {
+    augment(({ fullscreen, toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_FULLSCREEN, React.createElement(FullscreenButton, null)),
+        fullscreen: resolveFullscreenProps(fullscreen),
+        ...restProps,
+    }));
+    addParent(contains(PLUGIN_THUMBNAILS) ? PLUGIN_THUMBNAILS : MODULE_CONTROLLER, createModule(PLUGIN_FULLSCREEN, FullscreenContextProvider));
+}
+
+export { Fullscreen as default };

package/dist/plugins/index.d.ts

@@ -1,9 +1,9 @@
-export { default as Captions } from "./captions/index.js";
-export { default as Counter } from "./counter/index.js";
-export { default as Download } from "./download/index.js";
-export { default as Fullscreen } from "./fullscreen/index.js";
-export { default as Inline } from "./inline/index.js";
-export { default as Slideshow } from "./slideshow/index.js";
-export { default as Thumbnails } from "./thumbnails/index.js";
-export { default as Video } from "./video/index.js";
-export { default as Zoom } from "./zoom/index.js";
+export { default as Captions } from './captions/index.js';
+export { default as Counter } from './counter/index.js';
+export { default as Download } from './download/index.js';
+export { default as Fullscreen } from './fullscreen/index.js';
+export { default as Inline } from './inline/index.js';
+export { default as Slideshow } from './slideshow/index.js';
+export { default as Thumbnails } from './thumbnails/index.js';
+export { default as Video } from './video/index.js';
+export { default as Zoom } from './zoom/index.js';

package/dist/plugins/index.js

@@ -1,9 +1,9 @@
-export { default as Captions } from "./captions/index.js";
-export { default as Counter } from "./counter/index.js";
-export { default as Download } from "./download/index.js";
-export { default as Fullscreen } from "./fullscreen/index.js";
-export { default as Inline } from "./inline/index.js";
-export { default as Slideshow } from "./slideshow/index.js";
-export { default as Thumbnails } from "./thumbnails/index.js";
-export { default as Video } from "./video/index.js";
-export { default as Zoom } from "./zoom/index.js";
+export { default as Captions } from './captions/index.js';
+export { default as Counter } from './counter/index.js';
+export { default as Download } from './download/index.js';
+export { default as Fullscreen } from './fullscreen/index.js';
+export { default as Inline } from './inline/index.js';
+export { default as Slideshow } from './slideshow/index.js';
+export { default as Thumbnails } from './thumbnails/index.js';
+export { default as Video } from './video/index.js';
+export { default as Zoom } from './zoom/index.js';

package/dist/plugins/inline/index.d.ts

@@ -1,9 +1,14 @@
-import * as React from "react";
-import { Inline } from "./Inline.js";
+import * as React from 'react';
+import { PluginProps } from '../../types.js';
+
+/** Inline plugin */
+declare function Inline({ augment, replace, remove }: PluginProps): void;
+
 declare module "../../types.js" {
     interface LightboxProps {
         /** HTML div element attributes to be passed to the Inline plugin container */
         inline?: React.HTMLAttributes<HTMLDivElement>;
     }
 }
-export default Inline;
+
+export { Inline as default };

package/dist/plugins/inline/index.js

@@ -1,2 +1,26 @@
-import { Inline } from "./Inline.js";
-export default Inline;
+import { clsx, cssClass, createModule } from '../../index.js';
+import * as React from 'react';
+import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
+
+function InlineContainer({ inline: { className, ...rest } = {}, children }) {
+    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
+}
+
+function Inline({ augment, replace, remove }) {
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
+        open: true,
+        close: () => { },
+        toolbar: {
+            buttons: buttons.filter((button) => button !== ACTION_CLOSE),
+            ...restToolbar,
+        },
+        inline: { style: { width: "100%", height: "100%" }, className },
+        controller: { focus: false, aria: true, touchAction: "pan-y", ...restController },
+        className,
+        ...restProps,
+    }));
+    remove(MODULE_NO_SCROLL);
+    replace(MODULE_PORTAL, createModule(PLUGIN_INLINE, InlineContainer));
+}
+
+export { Inline as default };

package/dist/plugins/slideshow/index.d.ts

@@ -1,6 +1,9 @@
-import * as React from "react";
-import { PLUGIN_SLIDESHOW } from "../../core/index.js";
-import { Slideshow } from "./Slideshow.js";
+import * as React from 'react';
+import { PluginProps, PLUGIN_SLIDESHOW } from '../../types.js';
+
+/** Slideshow plugin */
+declare function Slideshow({ augment, addModule }: PluginProps): void;
+
 declare module "../../types.js" {
     interface LightboxProps {
         /** Slideshow plugin settings */
@@ -42,4 +45,5 @@ declare module "../../types.js" {
         pause: Callback;
     }
 }
-export default Slideshow;
+
+export { Slideshow as default };