yet-another-react-lightbox 1.3.5 → 1.4.1

package/README.md

@@ -15,7 +15,7 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
 - **Responsive:** responsive images with automatic resolution switching are supported out of the box
 - **Video:** video slides are supported via an optional plugin
 - **Customization:** customize any UI element or add your own custom slides
-- **No bloat:** never bundle rarely used features; add optional features via plugins 
+- **No bloat:** never bundle rarely used features; add optional features via plugins
 - **TypeScript:** type definitions come built-in in the package
 
 ## Documentation
@@ -40,7 +40,7 @@ yarn add yet-another-react-lightbox
 
 ## Minimal Setup Example
 
-```javascript
+```jsx
 import * as React from "react";
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
@@ -58,8 +58,8 @@ const App = () => {
                 open={open}
                 close={() => setOpen(false)}
                 slides={[
-                    { src: "/image1.jpg" }, 
-                    { src: "/image2.jpg" }, 
+                    { src: "/image1.jpg" },
+                    { src: "/image2.jpg" },
                     { src: "/image3.jpg" },
                 ]}
             />
@@ -70,6 +70,68 @@ const App = () => {
 export default App;
 ```
 
+## Recommended Setup
+
+Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a concept of "thumbnail" or "original"
+(or "full size") images. We use responsive images instead and recommend you provide multiple files of different
+resolutions for each image. Yet Another React Lightbox automatically populates `srcSet` / `sizes` attributes and lets
+the browser decide which image is more appropriate for its viewport size.
+
+```jsx
+import * as React from "react";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+const App = () => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <>
+            <button type="button" onClick={() => setOpen(true)}>
+                Open Lightbox
+            </button>
+
+            <Lightbox
+                open={open}
+                close={() => setOpen(false)}
+                slides={[
+                    {
+                        src: "/image1x3840.jpg",
+                        alt: "image 1",
+                        aspectRatio: 3 / 2,
+                        srcSet: [
+                            { src: "/image1x320.jpg", width: 320 },
+                            { src: "/image1x640.jpg", width: 640 },
+                            { src: "/image1x1200.jpg", width: 1200 },
+                            { src: "/image1x2048.jpg", width: 2048 },
+                            { src: "/image1x3840.jpg", width: 3840 },
+                        ]
+                    },
+                    // ...
+                ]}
+            />
+        </>
+    );
+};
+
+export default App;
+```
+
+You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby Image) via a custom render function.
+See [examples](https://yet-another-react-lightbox.vercel.app/examples) on the documentation website.
+
+## Plugins
+
+Yet Another React Lightbox allows you to add optional features based on your requirements via plugins.
+
+The following plugins come bundled in the package:
+
+- [Captions](https://yet-another-react-lightbox.vercel.app/plugins/captions) - adds support for slide title and
+  description
+- [Fullscreen](https://yet-another-react-lightbox.vercel.app/plugins/fullscreen) - adds support for fullscreen mode
+- [Inline](https://yet-another-react-lightbox.vercel.app/plugins/inline) - adds support for inline rendering mode
+- [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
+
 ## License
 
-MIT © [Igor Danchenko](https://github.com/igordanchenko)
+MIT © 2022 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/Lightbox.js

@@ -24,7 +24,6 @@ const LightboxComponent = (props) => {
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
 };
 LightboxComponent.propTypes = LightboxPropTypes;
-/** Modern React lightbox component */
 export const Lightbox = (props) => {
     const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
     const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;

package/dist/core/components/Icons.js

@@ -10,7 +10,5 @@ export const createIcon = (name, glyph) => {
 export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
 export const NextIcon = createIcon("Next", React.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
-export const LoadingIcon = createIcon("Loading", React.createElement(React.Fragment, null, Array.from({ length: 8 }).map((_, index, array) => (React.createElement("line", { 
-    // eslint-disable-next-line react/no-array-index-key
-    key: index, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: (1 / array.length) * (index + 1), transform: `rotate(${(360 / array.length) * index}, 12, 12)` })))));
+export const LoadingIcon = createIcon("Loading", React.createElement(React.Fragment, null, Array.from({ length: 8 }).map((_, index, array) => (React.createElement("line", { key: index, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: (1 / array.length) * (index + 1), transform: `rotate(${(360 / array.length) * index}, 12, 12)` })))));
 export const ErrorIcon = createIcon("Error", React.createElement("path", { d: "M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" }));

package/dist/core/components/ImageSlide.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { Render, SlideImage } from "../../types.js";
+import { ContainerRect } from "../hooks/index.js";
 export declare type ImageSlideProps = {
     slide: SlideImage;
-    render: Render;
+    render?: Render;
+    rect?: ContainerRect;
 };
-export declare const ImageSlide: ({ slide: image, render }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, render, rect }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -1,14 +1,12 @@
 import * as React from "react";
-import { clsx, cssClass } from "../utils.js";
+import { adjustDevicePixelRatio, clsx, cssClass, hasWindow } from "../utils.js";
 import { useLatest } from "../hooks/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { useController } from "../modules/Controller.js";
-export const ImageSlide = ({ slide: image, render }) => {
-    var _a, _b, _c;
+export const ImageSlide = ({ slide: image, render, rect }) => {
+    var _a;
     const [state, setState] = React.useState("loading");
     const latestState = useLatest(state);
     const imageRef = React.useRef(null);
-    const { containerRect } = useController();
     const handleLoading = React.useCallback((img) => {
         if (latestState.current === "complete") {
             return;
@@ -37,29 +35,31 @@ export const ImageSlide = ({ slide: image, render }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), state !== "complete" && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
                 ? {
-                    // this approach does not account for carousel padding,
-                    // but the margin of error should be negligible in most cases
-                    sizes: `${Math.ceil((Math.min(image.aspectRatio ? containerRect.height * image.aspectRatio : Number.MAX_VALUE, containerRect.width) /
-                        window.innerWidth) *
-                        100)}vw`,
+                    ...(rect && hasWindow()
+                        ? {
+                            sizes: `${Math.ceil((Math.min(image.aspectRatio ? rect.height * image.aspectRatio : Number.MAX_VALUE, rect.width) /
+                                window.innerWidth) *
+                                100)}vw`,
+                        }
+                        : null),
                     srcSet: image.srcSet
                         .sort((a, b) => a.width - b.width)
                         .map((item) => `${item.src} ${item.width}w`)
                         .join(", "),
                     style: {
-                        maxWidth: `${Math.max(...image.srcSet.map((x) => x.width))}px`,
+                        maxWidth: `${adjustDevicePixelRatio(Math.max(...image.srcSet.map((x) => x.width)))}px`,
                     },
                 }
                 : {
-                    style: ((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) !== null && _b !== void 0 ? _b : 0) > 0
+                    style: imageRef.current && ((_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) > 0
                         ? {
-                            maxWidth: `${(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth}px`,
+                            maxWidth: `${adjustDevicePixelRatio(imageRef.current.naturalWidth)}px`,
                         }
                         : undefined,
                 }), src: image.src }),
         state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
             state === "loading" &&
-                (render.iconLoading ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
+                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
             state === "error" &&
-                (render.iconError ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
+                ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
 };

package/dist/core/hooks/useContainerRect.js

@@ -10,14 +10,17 @@ export const useContainerRect = () => {
             observerRef.current = undefined;
         }
         const updateContainerRect = () => {
-            const width = node === null || node === void 0 ? void 0 : node.clientWidth;
-            const height = node === null || node === void 0 ? void 0 : node.clientHeight;
-            setContainerRect(width !== undefined && height !== undefined
-                ? {
-                    width,
-                    height,
-                }
-                : undefined);
+            if (node) {
+                const styles = window.getComputedStyle(node);
+                const parse = (value) => parseFloat(value) || 0;
+                setContainerRect({
+                    width: Math.round(node.clientWidth - parse(styles.paddingLeft) - parse(styles.paddingRight)),
+                    height: Math.round(node.clientHeight - parse(styles.paddingTop) - parse(styles.paddingBottom)),
+                });
+            }
+            else {
+                setContainerRect(undefined);
+            }
         };
         updateContainerRect();
         if (node && typeof ResizeObserver !== "undefined") {

package/dist/core/hooks/useEnhancedEffect.js

@@ -1,2 +1,3 @@
 import * as React from "react";
-export const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+import { hasWindow } from "../utils.js";
+export const useEnhancedEffect = hasWindow() ? React.useLayoutEffect : React.useEffect;

package/dist/core/modules/Carousel.js

@@ -1,35 +1,40 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
+import { useContainerRect } from "../hooks/index.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, render }) => {
-    const renderSlide = () => {
-        if (render.slide) {
-            const rendered = render.slide(slide);
-            if (rendered) {
-                return rendered;
-            }
+const CarouselSlide = ({ slide, offset }) => {
+    const { setContainerRef, containerRect } = useContainerRect();
+    const { latestProps } = useController();
+    const { render } = latestProps.current;
+    const renderSlide = (rect) => {
+        var _a, _b, _c, _d;
+        let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+        if (!rendered && "src" in slide) {
+            rendered = React.createElement(ImageSlide, { slide: slide, render: render, rect: rect });
         }
-        return "src" in slide ? React.createElement(ImageSlide, { slide: slide, render: render }) : null;
+        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;
     };
-    return (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, renderSlide()));
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, containerRect && renderSlide(containerRect)));
 };
-export const Carousel = (props) => {
-    const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;
+export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
     const { currentIndex, globalIndex } = useController();
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
             if (!finite || i >= 0) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, render: render }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex }));
             }
         }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, render: render }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             if (!finite || i <= slides.length - 1) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, render: render }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex }));
             }
         }
     }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Component } from "../../types.js";
-import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
+import { Component, ComponentProps } from "../../types.js";
+import { SubscribeSensors } from "../hooks/index.js";
 export declare type ControllerContextType = {
+    latestProps: React.MutableRefObject<ComponentProps>;
     containerRef: React.RefObject<HTMLDivElement>;
-    containerRect: ContainerRect;
     currentIndex: number;
     globalIndex: number;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;

package/dist/core/modules/Controller.js

@@ -2,13 +2,13 @@ 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 { useContainerRect, useEnhancedEffect, useLatest, 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 { containerRef, setContainerRef } = useContainerRect();
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
     const { setTimeout, clearTimeout } = useTimeouts();
@@ -16,6 +16,7 @@ export const Controller = ({ children, ...props }) => {
         currentIndex: props.index,
         globalIndex: props.index,
     });
+    const latestProps = useLatest(props);
     const refs = React.useRef({
         state,
         props,
@@ -27,9 +28,6 @@ export const Controller = ({ children, ...props }) => {
     });
     refs.current.state = state;
     refs.current.props = props;
-    refs.current.containerRect = containerRect;
-    // prevent browser back/forward navigation on touchpad left/right swipe
-    // this has to be done via non-passive native event handler
     useEnhancedEffect(() => {
         const preventDefault = (event) => event.preventDefault();
         const node = containerRef.current;
@@ -93,7 +91,7 @@ export const Controller = ({ children, ...props }) => {
         let newSwipeState = "swipe-animation";
         let newSwipeAnimationDuration = swipeAnimationDuration;
         if (!direction) {
-            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
+            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
             const expectedTime = containerWidth
                 ? (swipeAnimationDuration / containerWidth) * Math.abs(swipeOffset)
@@ -107,7 +105,6 @@ export const Controller = ({ children, ...props }) => {
                     newSwipeAnimationDuration =
                         (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
                 }
-                // eslint-disable-next-line no-param-reassign
                 direction = swipeOffset > 0 ? "prev" : "next";
             }
             else {
@@ -116,7 +113,7 @@ export const Controller = ({ children, ...props }) => {
         }
         const newState = {};
         if (direction === "prev") {
-            if (isSwipeValid(swipeOffset)) {
+            if (isSwipeValid(1)) {
                 newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
                 newState.globalIndex = globalIndex - 1;
             }
@@ -126,7 +123,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (direction === "next") {
-            if (isSwipeValid(swipeOffset)) {
+            if (isSwipeValid(-1)) {
                 newState.currentIndex = (currentIndex + 1) % slidesCount;
                 newState.globalIndex = globalIndex + 1;
             }
@@ -146,7 +143,7 @@ export const Controller = ({ children, ...props }) => {
             }, newSwipeAnimationDuration);
         }
         setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender]);
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef]);
     React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "Escape") {
@@ -205,11 +202,9 @@ export const Controller = ({ children, ...props }) => {
     const onWheel = React.useCallback((event) => {
         var _a;
         if (event.ctrlKey) {
-            // zoom
             return;
         }
         if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-            // pan-y
             return;
         }
         const { current } = refs;
@@ -218,6 +213,9 @@ export const Controller = ({ children, ...props }) => {
                 current.wheelResidualMomentum = event.deltaX;
                 return;
             }
+            if (!isSwipeValid(-event.deltaX)) {
+                return;
+            }
             current.swipeIntent += event.deltaX;
             clearTimeout(current.swipeIntentCleanup);
             if (Math.abs(current.swipeIntent) > SWIPE_OFFSET_THRESHOLD) {
@@ -235,7 +233,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (current.swipeState === "swipe") {
-            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
+            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             if (containerWidth) {
                 current.swipeOffset -= event.deltaX;
                 current.swipeOffset =
@@ -261,19 +259,20 @@ export const Controller = ({ children, ...props }) => {
         else {
             current.wheelResidualMomentum = event.deltaX;
         }
-    }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender]);
+    }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender, isSwipeValid, containerRef]);
     React.useEffect(() => subscribeSensors("onWheel", onWheel), [subscribeSensors, onWheel]);
     const context = React.useMemo(() => ({
+        latestProps,
         containerRef,
-        containerRect,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
         subscribeSensors,
-    }), [containerRef, containerRect, state.currentIndex, state.globalIndex, subscribeSensors]);
+    }), [latestProps, containerRef, 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))));
+            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
+        React.createElement(ControllerContext.Provider, { value: context }, children)));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/core/modules/NoScroll.js

@@ -7,7 +7,6 @@ const scrollbarPadding = cssVar("scrollbar_padding");
 export const NoScroll = ({ children }) => {
     React.useEffect(() => {
         const scrollbarWidth = Math.round(window.innerWidth - document.documentElement.clientWidth);
-        // using an arbitrary threshold to counter the 1px difference in some browsers
         if (scrollbarWidth > 1) {
             document.body.style.setProperty(scrollbarPadding, `${scrollbarWidth}px`);
             document.body.classList.add(padScrollbar);

package/dist/core/modules/Toolbar.js

@@ -3,9 +3,16 @@ import { createModule } from "../config.js";
 import { cssClass, label } from "../utils.js";
 import { useEvents } from "../contexts/index.js";
 import { CloseIcon, IconButton } from "../components/index.js";
+import { useContainerRect } from "../hooks/useContainerRect.js";
 export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
     const { publish } = useEvents();
+    const { setContainerRef, containerRect } = useContainerRect();
+    React.useEffect(() => {
+        if (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) {
+            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", { className: cssClass("toolbar") }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === "close" ? renderCloseButton() : button))));
+    return (React.createElement("div", { ref: setContainerRef, className: cssClass("toolbar") }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === "close" ? renderCloseButton() : button))));
 };
 export const ToolbarModule = createModule("toolbar", Toolbar);

package/dist/core/utils.d.ts

@@ -6,3 +6,5 @@ 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;
+export declare const hasWindow: () => boolean;
+export declare const adjustDevicePixelRatio: (value: number) => number;

package/dist/core/utils.js

@@ -16,3 +16,5 @@ export const makeUseContext = (name, contextName, context) => () => {
     }
     return ctx;
 };
+export const hasWindow = () => typeof window !== "undefined";
+export const adjustDevicePixelRatio = (value) => hasWindow() ? Math.round(value / (window.devicePixelRatio || 1)) : value;

package/dist/plugins/Captions.d.ts

@@ -0,0 +1,26 @@
+import { Component, Plugin } from "../types.js";
+declare type TextAlignment = "start" | "end" | "center";
+declare module "../types.js" {
+    interface SlideImage {
+        /** slide title */
+        title?: string;
+        /** slide description */
+        description?: string;
+    }
+    interface LightboxProps {
+        /** Captions plugin settings */
+        captions?: {
+            /** description text alignment */
+            descriptionTextAlign?: TextAlignment;
+            /** maximum number of lines to display in the description section */
+            descriptionMaxLines?: number;
+        };
+    }
+}
+/** 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.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cssClass, cssVar, makeUseContext } from "../core/utils.js";
+import { useEvents } from "../core/contexts/Events.js";
+import { createModule } from "../core/index.js";
+const defaultTextAlign = "start";
+const defaultMaxLines = 3;
+const cls = (className) => cssClass(`slide_${className}`);
+const hasTitle = (slide) => "title" in slide ? typeof slide.title === "string" : false;
+const hasDescription = (slide) => "description" in slide ? typeof slide.description === "string" : false;
+const CaptionsContext = React.createContext(null);
+const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
+const Title = ({ title }) => {
+    const { toolbarWidth } = useCaptions();
+    return (React.createElement("div", { className: cls(`title_container`) },
+        React.createElement("div", { className: cls("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+};
+const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: cls("description_container") },
+    React.createElement("div", { className: cls("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
+            ? {
+                style: {
+                    [cssVar("slide_description_text_align")]: align,
+                    [cssVar("slide_description_max_lines")]: maxLines,
+                },
+            }
+            : null) }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
+export const CaptionsComponent = ({ children }) => {
+    const { subscribe } = useEvents();
+    const [toolbarWidth, setToolbarWidth] = React.useState();
+    React.useEffect(() => subscribe("toolbar-width", (topic, event) => {
+        if (typeof event === "undefined" || typeof event === "number") {
+            setToolbarWidth(event);
+        }
+    }), [subscribe]);
+    const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
+    return React.createElement(CaptionsContext.Provider, { value: context }, children);
+};
+export const CaptionsModule = createModule("captions", CaptionsComponent);
+export const Captions = ({ augment, addParent }) => {
+    addParent("controller", CaptionsModule);
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, ...restProps }) => ({
+        render: {
+            slideFooter: (slide) => {
+                var _a, _b;
+                return (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
+                    renderFooter(slide),
+                    hasTitle(slide) && React.createElement(Title, { title: slide.title }),
+                    hasDescription(slide) && (React.createElement(Description, { description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
+            },
+            ...restRender,
+        },
+        ...restProps,
+    }));
+};
+export default Captions;

package/dist/plugins/Fullscreen.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { createIcon, IconButton, label, useController, useLatest } 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" }));
-/** Fullscreen button */
 export const FullscreenButton = ({ auto, labels, render }) => {
+    const [mounted, setMounted] = React.useState(false);
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
     const { containerRef } = useController();
@@ -33,7 +33,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
-                //
             }
         }
     }, [containerRef]);
@@ -54,7 +53,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
-                //
             }
         }
     }, [getFullscreenElement]);
@@ -74,6 +72,7 @@ export const FullscreenButton = ({ auto, labels, render }) => {
             setFullscreen(false);
         }
     }, [containerRef, getFullscreenElement]);
+    React.useEffect(() => setMounted(true), []);
     React.useEffect(() => {
         const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
         events.forEach((event) => {
@@ -91,11 +90,10 @@ export const FullscreenButton = ({ auto, labels, render }) => {
             requestFullscreen();
         }
     }, [latestAuto, requestFullscreen]);
-    if (!isFullscreenEnabled())
+    if (!mounted || !isFullscreenEnabled())
         return null;
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
 };
-/** Fullscreen plugin */
 export const Fullscreen = ({ augment }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {

package/dist/plugins/Inline.js

@@ -1,10 +1,7 @@
 import * as React from "react";
 import { createModule } from "../core/index.js";
-/** Inline plugin container */
 export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
-/** Inline plugin module */
 export const InlineModule = createModule("inline", InlineContainer);
-/** Inline plugin */
 export const Inline = ({ augment, replace, remove }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, ...restController }, ...restProps }) => ({
         open: true,

package/dist/plugins/Video.js

@@ -12,7 +12,6 @@ SlideTypesPropTypes.push(PropTypes.shape({
         type: PropTypes.string.isRequired,
     }).isRequired),
 }));
-/** Video slide */
 export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     const { setContainerRef, containerRect } = useContainerRect();
     const scaleWidthAndHeight = () => {
@@ -27,21 +26,17 @@ export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     return (React.createElement(React.Fragment, null, sources && (React.createElement("div", { ref: setContainerRef, style: {
             width: "100%",
             height: "100%",
-        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (
-    // eslint-disable-next-line jsx-a11y/media-has-caption
-    React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (
-    // eslint-disable-next-line react/no-array-index-key
-    React.createElement("source", { key: index, src: src, type: type })))))))));
+            ...(width ? { maxWidth: `${width}px` } : null),
+        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
 };
-/** Video plugin */
 export const Video = ({ augment }) => {
     augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
         render: {
-            slide: (slide) => {
+            slide: (slide, offset, rect) => {
                 if ("type" in slide && slide.type === "video") {
                     return React.createElement(VideoSlide, { slide: slide });
                 }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide);
+                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
             },
             ...restRender,
         },

package/dist/plugins/captions.css

@@ -0,0 +1,39 @@
+.yarl__slide_title {
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  max-width: calc(100% - var(--yarl__toolbar_width, 0px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.yarl__slide_title_container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.5);
+}
+.yarl__slide_description {
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: 500;
+  overflow: hidden;
+  -webkit-hyphens: auto;
+      -ms-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);
+}
+.yarl__slide_description_container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.5);
+}

package/dist/plugins/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Video.js";

package/dist/plugins/index.js

@@ -1,3 +1,4 @@
+export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Video.js";

package/dist/styles.css

@@ -131,7 +131,7 @@
 }
 .yarl__toolbar {
   position: absolute;
-  inset: 0 0 auto 0;
+  inset: 0 0 auto auto;
   display: flex;
   justify-content: flex-end;
   padding: 8px;

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image slide properties */
 export interface SlideImage {
     /** image URL */
@@ -49,7 +50,19 @@ export interface ControllerSettings {
 /** Custom render functions. */
 export interface Render {
     /** render custom slide type, or override the default image slide */
-    slide?: (slide: Slide) => React.ReactNode;
+    slide?: (
+    /** slide */
+    slide: Slide, 
+    /** slide offset (`0` - current slide, `1` - next slide, `-1` - previous slide, etc.) */
+    offset: number, 
+    /** container rect */
+    rect: ContainerRect) => React.ReactNode;
+    /** render custom slide header */
+    slideHeader?: (slide: Slide) => React.ReactNode;
+    /** render custom slide footer */
+    slideFooter?: (slide: Slide) => React.ReactNode;
+    /** render custom slide container */
+    slideContainer?: (slide: Slide, children: React.ReactNode) => React.ReactNode;
     /** render custom Prev icon */
     iconPrev?: () => React.ReactNode;
     /** render custom Next icon */
@@ -111,7 +124,7 @@ export interface LightboxProps {
     on: Callbacks;
 }
 export declare const ImageSlidePropTypes: PropTypes.Requireable<PropTypes.InferProps<{
-    src: PropTypes.Validator<string>;
+    src: PropTypes.Requireable<string>;
     alt: PropTypes.Requireable<string>;
     aspectRatio: PropTypes.Requireable<number>;
     srcSet: PropTypes.Requireable<PropTypes.InferProps<{
@@ -127,6 +140,9 @@ export declare const LightboxPropTypes: {
     slides: PropTypes.Validator<any[]>;
     render: PropTypes.Validator<PropTypes.InferProps<{
         slide: PropTypes.Requireable<(...args: any[]) => any>;
+        slideHeader: PropTypes.Requireable<(...args: any[]) => any>;
+        slideFooter: PropTypes.Requireable<(...args: any[]) => any>;
+        slideContainer: PropTypes.Requireable<(...args: any[]) => any>;
         iconPrev: PropTypes.Requireable<(...args: any[]) => any>;
         iconNext: PropTypes.Requireable<(...args: any[]) => any>;
         iconClose: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/types.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 export const ImageSlidePropTypes = PropTypes.shape({
-    src: PropTypes.string.isRequired,
+    src: PropTypes.string,
     alt: PropTypes.string,
     aspectRatio: PropTypes.number,
     srcSet: PropTypes.arrayOf(PropTypes.shape({
@@ -16,6 +16,9 @@ export const LightboxPropTypes = {
     slides: PropTypes.arrayOf(PropTypes.oneOfType(SlideTypesPropTypes).isRequired).isRequired,
     render: PropTypes.shape({
         slide: PropTypes.func,
+        slideHeader: PropTypes.func,
+        slideFooter: PropTypes.func,
+        slideContainer: PropTypes.func,
         iconPrev: PropTypes.func,
         iconNext: PropTypes.func,
         iconClose: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.3.5",
+    "version": "1.4.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -10,6 +10,8 @@
         ".": "./dist/index.js",
         "./core": "./dist/core/index.js",
         "./plugins": "./dist/plugins/index.js",
+        "./plugins/captions": "./dist/plugins/Captions.js",
+        "./plugins/captions.css": "./dist/plugins/captions.css",
         "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
         "./plugins/inline": "./dist/plugins/Inline.js",
         "./plugins/video": "./dist/plugins/Video.js",
@@ -27,6 +29,9 @@
             "plugins": [
                 "dist/plugins/index.d.ts"
             ],
+            "plugins/captions": [
+                "dist/plugins/Captions.d.ts"
+            ],
             "plugins/fullscreen": [
                 "dist/plugins/Fullscreen.d.ts"
             ],
@@ -59,8 +64,8 @@
         "build": "npm-run-all clean build:scss build:css build:js build:dts",
         "build:js": "tsc -p tsconfig.build.js.json",
         "build:dts": "tsc -p tsconfig.build.dts.json",
-        "build:css": "postcss src/styles.css -u autoprefixer --no-map -d dist",
-        "build:scss": "sass src/styles.scss src/styles.css --no-source-map ",
+        "build:css": "postcss src/*.css src/**/*.css --base src -d dist -u autoprefixer --no-map",
+        "build:scss": "sass src --no-source-map",
         "start": "npm-run-all clean --parallel \"build:* -- -w\"",
         "lint": "eslint .",
         "test": "jest"
@@ -80,13 +85,13 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.0",
-        "@types/jest": "^27.5.2",
-        "@types/react": "^18.0.10",
+        "@types/jest": "^28.1.1",
+        "@types/react": "^18.0.12",
         "@types/react-dom": "^18.0.5",
-        "@typescript-eslint/eslint-plugin": "^5.27.0",
-        "@typescript-eslint/parser": "^5.27.0",
+        "@typescript-eslint/eslint-plugin": "^5.27.1",
+        "@typescript-eslint/parser": "^5.27.1",
         "autoprefixer": "^10.4.7",
-        "eslint": "^8.16.0",
+        "eslint": "^8.17.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
@@ -96,9 +101,9 @@
         "eslint-plugin-react": "^7.30.0",
         "eslint-plugin-react-hooks": "^4.5.0",
         "husky": "^8.0.1",
-        "jest": "^28.1.0",
-        "jest-environment-jsdom": "^28.1.0",
-        "lint-staged": "^13.0.0",
+        "jest": "^28.1.1",
+        "jest-environment-jsdom": "^28.1.1",
+        "lint-staged": "^13.0.1",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
@@ -106,12 +111,13 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.1",
-        "ts-jest": "^28.0.3",
-        "typescript": "^4.7.2"
+        "sass": "^1.52.3",
+        "ts-jest": "^28.0.4",
+        "typescript": "^4.7.3"
     },
     "keywords": [
         "react",
+        "image",
         "lightbox",
         "react lightbox"
     ]