yet-another-react-lightbox 1.0.0

package/dist/core/modules/Carousel.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { LightboxDefaultProps } from "../../types.js";
+import { createModule } from "../config.js";
+import { clsx, cssClass, cssVar } from "../utils.js";
+import { ImageSlide } from "../components/index.js";
+import { useController } from "./Controller.js";
+const CarouselSlide = ({ slide, offset, renderSlide }) => (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, renderSlide(slide) || ("src" in slide && React.createElement(ImageSlide, { slide: slide }))));
+export const Carousel = (props) => {
+    const { slides, carousel: { finite, preload, padding, spacing }, render: { slide: renderSlide }, } = props;
+    const { currentIndex, globalIndex } = useController();
+    const items = [];
+    if (slides?.length > 0) {
+        for (let i = currentIndex - preload; i < currentIndex; i += 1) {
+            if (!finite || i >= 0) {
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
+            }
+        }
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, renderSlide: renderSlide }));
+        for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
+            if (!finite || i <= slides.length - 1) {
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, renderSlide: renderSlide }));
+            }
+        }
+    }
+    return (React.createElement("div", { className: cssClass("carousel"), style: {
+            ...(padding !== LightboxDefaultProps.carousel.padding
+                ? { [cssVar("carousel_padding")]: padding }
+                : null),
+            ...(spacing !== LightboxDefaultProps.carousel.spacing
+                ? { [cssVar("carousel_spacing")]: spacing !== 0 ? spacing : "0px" }
+                : null),
+        } }, items));
+};
+export const CarouselModule = createModule("carousel", Carousel);

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Component } from "../../types.js";
+import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
+export declare type ControllerContextType = {
+    containerRef: React.RefObject<HTMLDivElement>;
+    containerRect: ContainerRect;
+    currentIndex: number;
+    globalIndex: number;
+    subscribeSensors: SubscribeSensors<HTMLDivElement>;
+};
+export declare const useController: () => ControllerContextType;
+export declare const Controller: Component;
+export declare const ControllerModule: import("../../types.js").Module;

package/dist/core/modules/Controller.js

@@ -0,0 +1,267 @@
+import * as React from "react";
+import { LightboxDefaultProps } from "../../types.js";
+import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
+import { createModule } from "../config.js";
+import { useContainerRect, useEnhancedEffect, useSensors } from "../hooks/index.js";
+import { useEvents, useTimeouts } from "../contexts/index.js";
+const SWIPE_OFFSET_THRESHOLD = 30;
+const ControllerContext = React.createContext(null);
+export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
+export const Controller = ({ children, ...props }) => {
+    const { containerRef, setContainerRef, containerRect } = useContainerRect();
+    const { registerSensors, subscribeSensors } = useSensors();
+    const { subscribe, publish } = useEvents();
+    const { setTimeout, clearTimeout } = useTimeouts();
+    const [state, setState] = React.useState({
+        currentIndex: props.index,
+        globalIndex: props.index,
+    });
+    const refs = React.useRef({
+        state,
+        props,
+        swipeOffset: 0,
+        swipeIntent: 0,
+        swipeAnimationDuration: props.animation.swipe,
+        wheelResidualMomentum: 0,
+        pointers: [],
+    });
+    refs.current.state = state;
+    refs.current.props = props;
+    refs.current.containerRect = containerRect;
+    useEnhancedEffect(() => {
+        const preventDefault = (event) => event.preventDefault();
+        const node = containerRef.current;
+        if (node) {
+            node.addEventListener("wheel", preventDefault, { passive: false });
+        }
+        return () => {
+            if (node) {
+                node.removeEventListener("wheel", preventDefault);
+            }
+        };
+    }, [containerRef]);
+    React.useEffect(() => {
+        containerRef.current?.focus();
+    }, [containerRef]);
+    React.useEffect(() => subscribe("close", () => {
+        setTimeout(refs.current.props.close, refs.current.props.animation.fade);
+    }), [subscribe, setTimeout]);
+    const updateSwipeOffset = React.useCallback(() => {
+        const offsetVar = cssVar("swipe_offset");
+        if (refs.current.swipeOffset !== 0) {
+            containerRef.current?.style.setProperty(offsetVar, `${Math.round(refs.current.swipeOffset)}px`);
+        }
+        else {
+            containerRef.current?.style.removeProperty(offsetVar);
+        }
+    }, [containerRef]);
+    useEnhancedEffect(() => {
+        updateSwipeOffset();
+    });
+    const rerender = React.useCallback(() => {
+        setState((prev) => ({ ...prev }));
+    }, []);
+    const resetSwipe = React.useCallback(() => {
+        const { current } = refs;
+        current.swipeOffset = 0;
+        current.swipeIntent = 0;
+        current.swipeStartTime = undefined;
+        clearTimeout(current.swipeResetCleanup);
+        current.swipeResetCleanup = undefined;
+        clearTimeout(current.swipeIntentCleanup);
+        current.swipeIntentCleanup = undefined;
+    }, [clearTimeout]);
+    const isSwipeValid = React.useCallback((offset) => {
+        const { state: { currentIndex }, props: { carousel, slides }, } = refs.current;
+        return !(carousel.finite &&
+            ((offset > 0 && currentIndex === 0) || (offset < 0 && currentIndex === slides.length - 1)));
+    }, []);
+    const swipe = React.useCallback((direction) => {
+        const { current } = refs;
+        const slidesCount = current.props.slides.length;
+        const swipeAnimationDuration = current.props.animation.swipe;
+        const { currentIndex, globalIndex } = current.state;
+        const { swipeOffset } = current;
+        let newSwipeState = "swipe-animation";
+        let newSwipeAnimationDuration = swipeAnimationDuration;
+        if (!direction) {
+            const containerWidth = current.containerRect?.width;
+            const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
+            const expectedTime = containerWidth
+                ? (swipeAnimationDuration / containerWidth) * Math.abs(swipeOffset)
+                : swipeAnimationDuration;
+            if (containerWidth &&
+                ((swipeOffset !== 0 && elapsedTime < swipeAnimationDuration) ||
+                    Math.abs(swipeOffset) > 0.5 * containerWidth)) {
+                newSwipeAnimationDuration =
+                    (swipeAnimationDuration / containerWidth) * (containerWidth - Math.abs(swipeOffset));
+                if (elapsedTime < expectedTime) {
+                    newSwipeAnimationDuration =
+                        (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
+                }
+                direction = swipeOffset > 0 ? "prev" : "next";
+            }
+            else {
+                newSwipeAnimationDuration = swipeAnimationDuration / 2;
+            }
+        }
+        const newState = {};
+        if (direction === "prev") {
+            if (isSwipeValid(swipeOffset)) {
+                newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
+                newState.globalIndex = globalIndex - 1;
+            }
+            else {
+                newSwipeState = undefined;
+                newSwipeAnimationDuration = swipeAnimationDuration;
+            }
+        }
+        else if (direction === "next") {
+            if (isSwipeValid(swipeOffset)) {
+                newState.currentIndex = (currentIndex + 1) % slidesCount;
+                newState.globalIndex = globalIndex + 1;
+            }
+            else {
+                newSwipeState = undefined;
+                newSwipeAnimationDuration = swipeAnimationDuration;
+            }
+        }
+        resetSwipe();
+        current.swipeState = newSwipeState;
+        current.swipeAnimationDuration = newSwipeAnimationDuration;
+        if (newSwipeState) {
+            setTimeout(() => {
+                current.swipeState = undefined;
+                current.swipeAnimationDuration = current.props.animation.swipe;
+                rerender();
+            }, newSwipeAnimationDuration);
+        }
+        setState((prev) => ({ ...prev, ...newState }));
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender]);
+    React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
+    React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
+        if (event.code === "Escape") {
+            publish("close");
+        }
+    }), [subscribeSensors, publish]);
+    const clearPointer = React.useCallback((event) => {
+        const { current } = refs;
+        if (current.activePointer === event.pointerId) {
+            current.activePointer = undefined;
+        }
+        current.pointers.splice(0, current.pointers.length, ...current.pointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const addPointer = React.useCallback((event) => {
+        clearPointer(event);
+        refs.current.pointers.push(event);
+    }, [clearPointer]);
+    const onPointerDown = React.useCallback((event) => {
+        addPointer(event);
+    }, [addPointer]);
+    const onPointerMove = React.useCallback((event) => {
+        const { current } = refs;
+        const original = current.pointers.find((p) => p.pointerId === event.pointerId);
+        if (original) {
+            const deltaX = event.clientX - original.clientX;
+            const deltaY = event.clientY - original.clientY;
+            if (!current.swipeState) {
+                if (isSwipeValid(deltaX) &&
+                    Math.abs(deltaX) > Math.abs(deltaY) &&
+                    Math.abs(deltaX) > SWIPE_OFFSET_THRESHOLD) {
+                    addPointer(event);
+                    current.activePointer = event.pointerId;
+                    current.swipeStartTime = Date.now();
+                    current.swipeState = "swipe";
+                    rerender();
+                }
+            }
+            else if (current.swipeState === "swipe") {
+                if (event.pointerId === current.activePointer) {
+                    current.swipeOffset = deltaX;
+                    updateSwipeOffset();
+                }
+            }
+        }
+    }, [addPointer, updateSwipeOffset, isSwipeValid, rerender]);
+    const onPointerUp = React.useCallback((event) => {
+        const { current } = refs;
+        if (current.pointers.find((p) => p.pointerId === event.pointerId) &&
+            current.swipeState === "swipe" &&
+            current.activePointer === event.pointerId) {
+            swipe();
+        }
+        clearPointer(event);
+    }, [clearPointer, swipe]);
+    React.useEffect(() => cleanup(subscribeSensors("onPointerDown", onPointerDown), subscribeSensors("onPointerMove", onPointerMove), subscribeSensors("onPointerUp", onPointerUp), subscribeSensors("onPointerLeave", onPointerUp), subscribeSensors("onPointerCancel", onPointerUp)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
+    const onWheel = React.useCallback((event) => {
+        if (event.ctrlKey) {
+            return;
+        }
+        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+            return;
+        }
+        const { current } = refs;
+        if (!current.swipeState) {
+            if (Math.abs(event.deltaX) <= 1.2 * Math.abs(current.wheelResidualMomentum)) {
+                current.wheelResidualMomentum = event.deltaX;
+                return;
+            }
+            current.swipeIntent += event.deltaX;
+            clearTimeout(current.swipeIntentCleanup);
+            if (Math.abs(current.swipeIntent) > SWIPE_OFFSET_THRESHOLD) {
+                current.swipeStartTime = Date.now();
+                current.swipeIntent = 0;
+                current.wheelResidualMomentum = 0;
+                current.swipeState = "swipe";
+                rerender();
+            }
+            else {
+                current.swipeIntentCleanup = setTimeout(() => {
+                    current.swipeIntent = 0;
+                    current.swipeIntentCleanup = undefined;
+                }, current.props.animation.swipe);
+            }
+        }
+        else if (current.swipeState === "swipe") {
+            const containerWidth = current.containerRect?.width;
+            if (containerWidth) {
+                current.swipeOffset -= event.deltaX;
+                current.swipeOffset =
+                    Math.min(Math.abs(current.swipeOffset), containerWidth) * Math.sign(current.swipeOffset);
+                updateSwipeOffset();
+                clearTimeout(current.swipeResetCleanup);
+                if (Math.abs(current.swipeOffset) > 0.2 * containerWidth) {
+                    current.wheelResidualMomentum = event.deltaX;
+                    swipe();
+                    return;
+                }
+                const currentSwipeOffset = current.swipeOffset;
+                current.swipeResetCleanup = setTimeout(() => {
+                    current.swipeResetCleanup = undefined;
+                    if (current.swipeState === "swipe" && current.swipeOffset === currentSwipeOffset) {
+                        resetSwipe();
+                        current.swipeState = undefined;
+                        rerender();
+                    }
+                }, 2 * current.props.animation.swipe);
+            }
+        }
+        else {
+            current.wheelResidualMomentum = event.deltaX;
+        }
+    }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender]);
+    React.useEffect(() => subscribeSensors("onWheel", onWheel), [subscribeSensors, onWheel]);
+    const context = React.useMemo(() => ({
+        containerRef,
+        containerRect,
+        currentIndex: state.currentIndex,
+        globalIndex: state.globalIndex,
+        subscribeSensors,
+    }), [containerRef, containerRect, state.currentIndex, state.globalIndex, subscribeSensors]);
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
+            ? {
+                [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
+            }
+            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
+};
+export const ControllerModule = createModule("controller", Controller);

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

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+export declare const Core: Component;
+export declare const CoreModule: import("../../types.js").Module;

package/dist/core/modules/Core.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { createModule } from "../config.js";
+import { EventsProvider, TimeoutsProvider } from "../contexts/index.js";
+export const Core = ({ children }) => (React.createElement(TimeoutsProvider, null,
+    React.createElement(EventsProvider, null, children)));
+export const CoreModule = createModule("core", Core);

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Component, Labels } from "../../types.js";
+import { Publish } from "../contexts/index.js";
+export declare type NavigationButtonProps = {
+    publish: Publish;
+    labels: Labels | undefined;
+    buttonLabel: string;
+    icon: React.ElementType;
+    action: "prev" | "next";
+    disabled: boolean | undefined;
+};
+export declare const NavigationButton: ({ publish, labels, buttonLabel, icon, action, disabled }: NavigationButtonProps) => JSX.Element;
+export declare const Navigation: Component;
+export declare const NavigationModule: import("../../types.js").Module;

package/dist/core/modules/Navigation.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { createModule } from "../config.js";
+import { cssClass, label } from "../utils.js";
+import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
+import { useEvents } from "../contexts/index.js";
+import { useController } from "./Controller.js";
+export const NavigationButton = ({ publish, labels, buttonLabel, icon, action, disabled }) => (React.createElement(IconButton, { label: label(labels, buttonLabel), icon: icon, className: cssClass(`navigation_${action}`), disabled: disabled, "aria-disabled": disabled, onClick: () => {
+        publish(action);
+    } }));
+export const Navigation = ({ slides, carousel: { finite }, labels }) => {
+    const { currentIndex, subscribeSensors } = useController();
+    const { publish } = useEvents();
+    React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
+        if (event.code === "ArrowLeft") {
+            publish("prev");
+        }
+        else if (event.code === "ArrowRight") {
+            publish("next");
+        }
+    }), [subscribeSensors, publish]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(NavigationButton, { buttonLabel: "Previous Image", action: "prev", icon: PreviousIcon, disabled: finite && currentIndex === 0, labels: labels, publish: publish }),
+        React.createElement(NavigationButton, { buttonLabel: "Next Image", action: "next", icon: NextIcon, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish })));
+};
+export const NavigationModule = createModule("navigation", Navigation);

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

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+export declare const NoScroll: Component;
+export declare const NoScrollModule: import("../../types.js").Module;

package/dist/core/modules/NoScroll.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { createModule } from "../config.js";
+import { cssClass, cssVar } from "../utils.js";
+const noScroll = cssClass("no_scroll");
+const padScrollbar = cssClass("pad_scrollbar");
+const scrollbarPadding = cssVar("scrollbar_padding");
+export const NoScroll = ({ children }) => {
+    React.useEffect(() => {
+        const scrollbarWidth = Math.round(window.innerWidth - document.documentElement.clientWidth);
+        if (scrollbarWidth > 1) {
+            document.body.style.setProperty(scrollbarPadding, `${scrollbarWidth}px`);
+            document.body.classList.add(padScrollbar);
+        }
+        document.body.classList.add(noScroll);
+        return () => {
+            document.body.style.removeProperty(scrollbarPadding);
+            document.body.classList.remove(noScroll, padScrollbar);
+        };
+    });
+    return React.createElement(React.Fragment, null, children);
+};
+export const NoScrollModule = createModule("no-scroll", NoScroll);

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

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+export declare const Portal: Component;
+export declare const PortalModule: import("../../types.js").Module;

package/dist/core/modules/Portal.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { LightboxDefaultProps } from "../../types.js";
+import { createModule } from "../config.js";
+import { cssClass, cssVar } from "../utils.js";
+import { useEvents } from "../contexts/index.js";
+export const Portal = ({ animation, children }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const [portal] = React.useState(() => {
+        const div = document.createElement("div");
+        div.className = cssClass("portal");
+        if (animation.fade !== LightboxDefaultProps.animation.fade) {
+            div.style.setProperty(cssVar("fade_animation_duration"), `${Math.round(animation.fade)}ms`);
+        }
+        return div;
+    });
+    const { subscribe } = useEvents();
+    React.useEffect(() => subscribe("close", () => {
+        portal.classList.remove(cssClass("portal_open"));
+    }), [subscribe, portal]);
+    React.useEffect(() => {
+        document.body.appendChild(portal);
+        setMounted(true);
+        setTimeout(() => {
+            portal.classList.add(cssClass("portal_open"));
+        }, 0);
+        return () => {
+            document.body.removeChild(portal);
+            setMounted(false);
+        };
+    }, [portal]);
+    return ReactDOM.createPortal(mounted ? children : null, portal);
+};
+export const PortalModule = createModule("portal", Portal);

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

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+export declare const Toolbar: Component;
+export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createModule } from "../config.js";
+import { cssClass, label } from "../utils.js";
+import { useEvents } from "../contexts/index.js";
+import { CloseIcon, IconButton } from "../components/index.js";
+export const Toolbar = ({ toolbar: { buttons }, labels }) => {
+    const { publish } = useEvents();
+    return (React.createElement("div", { className: cssClass("toolbar") }, buttons?.map((button) => button === "close" ? (React.createElement(IconButton, { key: "close", label: label(labels, "Close"), icon: CloseIcon, onClick: () => publish("close") })) : (button))));
+};
+export const ToolbarModule = createModule("toolbar", Toolbar);

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

@@ -0,0 +1,7 @@
+export * from "./Carousel.js";
+export * from "./Controller.js";
+export * from "./Core.js";
+export * from "./Navigation.js";
+export * from "./NoScroll.js";
+export * from "./Portal.js";
+export * from "./Toolbar.js";

package/dist/core/modules/index.js

@@ -0,0 +1,7 @@
+export * from "./Carousel.js";
+export * from "./Controller.js";
+export * from "./Core.js";
+export * from "./Navigation.js";
+export * from "./NoScroll.js";
+export * from "./Portal.js";
+export * from "./Toolbar.js";

package/dist/core/utils.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Labels } 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 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;

package/dist/core/utils.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
+export const cssClass = (name) => `yarl__${name}`;
+export const cssVar = (name) => `--yarl__${name}`;
+export const label = (labels, lbl) => (labels && labels[lbl] ? labels[lbl] : lbl);
+export const cleanup = (...cleaners) => () => {
+    cleaners.forEach((cleaner) => {
+        cleaner();
+    });
+};
+export const makeUseContext = (name, contextName, context) => () => {
+    const ctx = React.useContext(context);
+    if (!ctx) {
+        throw new Error(`${name} must be used within a ${contextName}.Provider`);
+    }
+    return ctx;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export * from "./Lightbox.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export * from "./Lightbox.js";

package/dist/plugins/Fullscreen.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { LightboxProps, Plugin } from "../types.js";
+declare module "../types.js" {
+    interface LightboxProps {
+        fullscreen?: boolean;
+    }
+}
+declare global {
+    interface Document {
+        webkitFullscreenEnabled?: boolean;
+        mozFullScreenEnabled?: boolean;
+        msFullscreenEnabled?: boolean;
+        webkitExitFullscreen?: () => void;
+        mozCancelFullScreen?: () => void;
+        msExitFullscreen?: () => void;
+        webkitFullscreenElement?: Element;
+        mozFullScreenElement?: Element;
+        msFullscreenElement?: Element;
+    }
+    interface HTMLElement {
+        webkitRequestFullscreen?: () => void;
+        mozRequestFullScreen?: () => void;
+        msRequestFullscreen?: () => void;
+    }
+}
+export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
+    auto: boolean;
+};
+export declare const FullscreenButton: ({ auto, labels }: FullscreenButtonProps) => JSX.Element | null;
+export declare const Fullscreen: Plugin;

package/dist/plugins/Fullscreen.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { createIcon, IconButton, label, useController } from "../core/index.js";
+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" }));
+export const FullscreenButton = ({ auto, labels }) => {
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const { containerRef } = useController();
+    const isFullscreenEnabled = () => {
+        return (document.fullscreenEnabled ??
+            document.webkitFullscreenEnabled ??
+            document.mozFullScreenEnabled ??
+            document.msFullscreenEnabled ??
+            false);
+    };
+    const getFullscreenElement = React.useCallback(() => document.fullscreenElement ??
+        document.webkitFullscreenElement ??
+        document.mozFullScreenElement ??
+        document.msFullscreenElement, []);
+    const requestFullscreen = 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) {
+            }
+        }
+    }, [containerRef]);
+    const exitFullscreen = 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 toggleFullscreen = React.useCallback(() => {
+        if (fullscreen) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen();
+        }
+    }, [fullscreen, requestFullscreen, exitFullscreen]);
+    const fullscreenChangeListener = React.useCallback(() => {
+        if (getFullscreenElement() === containerRef.current) {
+            setFullscreen(true);
+        }
+        else {
+            setFullscreen(false);
+        }
+    }, [containerRef, 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]);
+    React.useEffect(() => () => exitFullscreen(), [exitFullscreen]);
+    React.useEffect(() => {
+        if (auto) {
+            requestFullscreen();
+        }
+    }, [auto, requestFullscreen]);
+    if (!isFullscreenEnabled())
+        return null;
+    return (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, onClick: toggleFullscreen }));
+};
+export const Fullscreen = ({ augment }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+        toolbar: {
+            buttons: [
+                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels }),
+                ...buttons,
+            ],
+            ...restToolbar,
+        },
+        ...restProps,
+    }));
+};

package/dist/plugins/Inline.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Component, Plugin } from "../types.js";
+declare module "../types.js" {
+    interface LightboxProps {
+        inline?: React.HTMLAttributes<HTMLDivElement>;
+    }
+}
+export declare const InlineContainer: Component;
+export declare const InlineModule: import("../types.js").Module;
+export declare const Inline: Plugin;