yet-another-react-lightbox 1.0.0 → 1.1.1

package/README.md

@@ -26,7 +26,7 @@ or
 yarn add yet-another-react-lightbox
 ```
 
-### Minimal Setup Example
+## Minimal Setup Example
 
 ```javascript
 import * as React from "react";

package/dist/Lightbox.d.ts

@@ -7,9 +7,7 @@ declare const LightboxComponent: {
         close: import("prop-types").Validator<(...args: any[]) => any>;
         index: import("prop-types").Validator<number>;
         slides: import("prop-types").Validator<any[]>;
-        render: import("prop-types").Validator<import("prop-types").InferProps<{
-            slide: import("prop-types").Validator<(...args: any[]) => any>;
-        }>>;
+        render: import("prop-types").Validator<import("prop-types").InferProps<{}>>;
         plugins: import("prop-types").Validator<((...args: any[]) => any)[]>;
         toolbar: import("prop-types").Validator<import("prop-types").InferProps<{
             buttons: import("prop-types").Validator<(string | number | boolean | import("prop-types").ReactElementLike | import("prop-types").ReactNodeArray | null | undefined)[]>;
@@ -25,6 +23,7 @@ declare const LightboxComponent: {
             fade: import("prop-types").Validator<number>;
             swipe: import("prop-types").Validator<number>;
         }>>;
+        on: import("prop-types").Validator<import("prop-types").InferProps<{}>>;
     };
     defaultProps: {
         open: boolean;
@@ -34,9 +33,10 @@ declare const LightboxComponent: {
         render: import("./types.js").Render;
         plugins: import("./types.js").Plugin[];
         toolbar: import("./types.js").Toolbar;
-        labels: {};
+        labels: import("./types.js").Labels;
         animation: import("./types.js").Animation;
         carousel: import("./types.js").Carousel;
+        on: import("./types.js").Callbacks;
     };
 };
 declare type ComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P> ? JSX.LibraryManagedAttributes<T, P> : never;
@@ -45,5 +45,5 @@ declare type NestedPartial<T extends object> = {
     [P in keyof T]?: MakePartial<T[P]>;
 };
 declare type NestedOptional<T, K extends keyof T> = Omit<T, K> & NestedPartial<Pick<T, K>>;
-export declare const Lightbox: (props: NestedOptional<ComponentProps<typeof LightboxComponent>, "carousel" | "animation" | "render">) => JSX.Element;
+export declare const Lightbox: (props: NestedOptional<ComponentProps<typeof LightboxComponent>, "carousel" | "animation">) => JSX.Element;
 export {};

package/dist/Lightbox.js

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { LightboxDefaultProps, LightboxPropTypes } from "./types.js";
 import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
-const renderNode = (node, props) => React.createElement(node.module.component, { key: node.module.name, ...props }, node.children?.map((child) => renderNode(child, props)));
+const renderNode = (node, props) => {
+    var _a;
+    return React.createElement(node.module.component, { key: node.module.name, ...props }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderNode(child, props)));
+};
 const LightboxComponent = (props) => {
     const { plugins } = props;
     const { config, augmentation } = withPlugins([
@@ -23,7 +26,7 @@ const LightboxComponent = (props) => {
 LightboxComponent.propTypes = LightboxPropTypes;
 LightboxComponent.defaultProps = LightboxDefaultProps;
 export const Lightbox = (props) => {
-    const { carousel, animation, render, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, ...restDefaultProps } = LightboxDefaultProps;
-    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, ...restDefaultProps, ...restProps }));
+    const { carousel, animation, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, ...restDefaultProps } = LightboxDefaultProps;
+    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, ...restDefaultProps, ...restProps }));
 };

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

@@ -2,5 +2,6 @@ import * as React from "react";
 export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "aria-label"> & {
     label: string;
     icon: React.ElementType;
+    renderIcon?: () => React.ReactNode;
 };
-export declare const IconButton: ({ label, className, icon: Icon, onClick, ...rest }: IconButtonProps) => JSX.Element;
+export declare const IconButton: React.FC<IconButtonProps>;

package/dist/core/components/IconButton.js

@@ -1,4 +1,3 @@
 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
-export const IconButton = ({ label, className, icon: Icon, onClick, ...rest }) => (React.createElement("button", { type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick || undefined, ...rest },
-    React.createElement(Icon, { className: cssClass("icon") })));
+export const IconButton = ({ label, className, icon: Icon, renderIcon, onClick, ...rest }) => (React.createElement("button", { type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon") })));

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

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

package/dist/core/components/ImageSlide.js

@@ -3,7 +3,8 @@ import { clsx, cssClass } 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 }) => {
+export const ImageSlide = ({ slide: image, render }) => {
+    var _a, _b, _c;
     const [state, setState] = React.useState("loading");
     const latestState = useLatest(state);
     const imageRef = React.useRef(null);
@@ -23,7 +24,7 @@ export const ImageSlide = ({ slide: image }) => {
     }, [latestState]);
     const setImageRef = React.useCallback((img) => {
         imageRef.current = img;
-        if (img?.complete) {
+        if (img === null || img === void 0 ? void 0 : img.complete) {
             handleLoading(img);
         }
     }, [handleLoading]);
@@ -48,13 +49,15 @@ export const ImageSlide = ({ slide: image }) => {
                     },
                 }
                 : {
-                    style: (imageRef.current?.naturalWidth ?? 0) > 0
+                    style: ((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) !== null && _b !== void 0 ? _b : 0) > 0
                         ? {
-                            maxWidth: `${imageRef.current?.naturalWidth}px`,
+                            maxWidth: `${(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth}px`,
                         }
                         : undefined,
                 }), src: image.src }),
         state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
-            state === "loading" && (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) })),
-            state === "error" && React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))));
+            state === "loading" &&
+                (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")) })))))));
 };

package/dist/core/config.js

@@ -12,12 +12,12 @@ const traverseNode = (node, target, apply) => {
     }
     if (node.children) {
         return [
-            createNode(node.module, node.children.flatMap((n) => traverseNode(n, target, apply) ?? [])),
+            createNode(node.module, node.children.flatMap((n) => { var _a; return (_a = traverseNode(n, target, apply)) !== null && _a !== void 0 ? _a : []; })),
         ];
     }
     return [node];
 };
-const traverse = (nodes, target, apply) => nodes.flatMap((node) => traverseNode(node, target, apply) ?? []);
+const traverse = (nodes, target, apply) => nodes.flatMap((node) => { var _a; return (_a = traverseNode(node, target, apply)) !== null && _a !== void 0 ? _a : []; });
 export const withPlugins = (root, plugins) => {
     let config = root;
     const augmentations = [];
@@ -29,13 +29,16 @@ export const withPlugins = (root, plugins) => {
         config = traverse(config, target, (node) => [createNode(module, [node])]);
     };
     const addChild = (target, module, precede) => {
-        config = traverse(config, target, (node) => [
-            createNode(node.module, [
-                ...(precede ? [createNode(module)] : []),
-                ...(node.children ?? []),
-                ...(!precede ? [createNode(module)] : []),
-            ]),
-        ]);
+        config = traverse(config, target, (node) => {
+            var _a;
+            return [
+                createNode(node.module, [
+                    ...(precede ? [createNode(module)] : []),
+                    ...((_a = node.children) !== null && _a !== void 0 ? _a : []),
+                    ...(!precede ? [createNode(module)] : []),
+                ]),
+            ];
+        });
     };
     const addSibling = (target, module, precede) => {
         config = traverse(config, target, (node) => [
@@ -53,7 +56,7 @@ export const withPlugins = (root, plugins) => {
     const augment = (augmentation) => {
         augmentations.push(augmentation);
     };
-    plugins?.forEach((plugin) => {
+    plugins === null || plugins === void 0 ? void 0 : plugins.forEach((plugin) => {
         plugin({
             addParent,
             addChild,

package/dist/core/contexts/Events.js

@@ -17,7 +17,8 @@ export const EventsProvider = ({ children }) => {
         return () => unsubscribe(topic, callback);
     };
     const publish = (topic, event) => {
-        subscriptions.current[topic]?.forEach((callback) => callback(topic, event));
+        var _a;
+        (_a = subscriptions.current[topic]) === null || _a === void 0 ? void 0 : _a.forEach((callback) => callback(topic, event));
     };
     React.useEffect(() => () => {
         subscriptions.current = {};

package/dist/core/hooks/useContainerRect.js

@@ -10,8 +10,8 @@ export const useContainerRect = () => {
             observerRef.current = undefined;
         }
         const updateContainerRect = () => {
-            const width = node?.clientWidth;
-            const height = node?.clientHeight;
+            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,

package/dist/core/hooks/useSensors.js

@@ -3,7 +3,8 @@ export const useSensors = () => {
     const [subscribers] = React.useState({});
     return React.useMemo(() => {
         const notifySubscribers = (type, event) => {
-            subscribers[type]?.forEach((listener) => listener(event));
+            var _a;
+            (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.forEach((listener) => listener(event));
         };
         return {
             registerSensors: {
@@ -21,10 +22,11 @@ export const useSensors = () => {
                 onWheel: (event) => notifySubscribers("onWheel", event),
             },
             subscribeSensors: (type, callback) => {
+                var _a;
                 if (!subscribers[type]) {
                     subscribers[type] = [];
                 }
-                subscribers[type]?.push(callback);
+                (_a = subscribers[type]) === null || _a === void 0 ? void 0 : _a.push(callback);
                 return () => {
                     const listeners = subscribers[type];
                     if (listeners) {

package/dist/core/modules/Carousel.js

@@ -4,21 +4,24 @@ 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 }))));
+const CarouselSlide = ({ slide, offset, render }) => {
+    var _a;
+    return (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, ((_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide)) || ("src" in slide && React.createElement(ImageSlide, { slide: slide, render: render }))));
+};
 export const Carousel = (props) => {
-    const { slides, carousel: { finite, preload, padding, spacing }, render: { slide: renderSlide }, } = props;
+    const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;
     const { currentIndex, globalIndex } = useController();
     const items = [];
-    if (slides?.length > 0) {
+    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, renderSlide: renderSlide }));
+                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, slide: slides[currentIndex], offset: 0, renderSlide: renderSlide }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, render: render }));
         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 }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, render: render }));
             }
         }
     }

package/dist/core/modules/Controller.js

@@ -41,18 +41,21 @@ export const Controller = ({ children, ...props }) => {
         };
     }, [containerRef]);
     React.useEffect(() => {
-        containerRef.current?.focus();
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [containerRef]);
-    React.useEffect(() => subscribe("close", () => {
-        setTimeout(refs.current.props.close, refs.current.props.animation.fade);
-    }), [subscribe, setTimeout]);
+    React.useEffect(() => {
+        var _a, _b;
+        (_b = (_a = refs.current.props.on).view) === null || _b === void 0 ? void 0 : _b.call(_a, state.currentIndex);
+    }, [state.currentIndex]);
     const updateSwipeOffset = React.useCallback(() => {
+        var _a, _b;
         const offsetVar = cssVar("swipe_offset");
         if (refs.current.swipeOffset !== 0) {
-            containerRef.current?.style.setProperty(offsetVar, `${Math.round(refs.current.swipeOffset)}px`);
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(offsetVar, `${Math.round(refs.current.swipeOffset)}px`);
         }
         else {
-            containerRef.current?.style.removeProperty(offsetVar);
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.removeProperty(offsetVar);
         }
     }, [containerRef]);
     useEnhancedEffect(() => {
@@ -77,6 +80,7 @@ export const Controller = ({ children, ...props }) => {
             ((offset > 0 && currentIndex === 0) || (offset < 0 && currentIndex === slides.length - 1)));
     }, []);
     const swipe = React.useCallback((direction) => {
+        var _a;
         const { current } = refs;
         const slidesCount = current.props.slides.length;
         const swipeAnimationDuration = current.props.animation.swipe;
@@ -85,7 +89,7 @@ export const Controller = ({ children, ...props }) => {
         let newSwipeState = "swipe-animation";
         let newSwipeAnimationDuration = swipeAnimationDuration;
         if (!direction) {
-            const containerWidth = current.containerRect?.width;
+            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
             const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
             const expectedTime = containerWidth
                 ? (swipeAnimationDuration / containerWidth) * Math.abs(swipeOffset)
@@ -194,6 +198,7 @@ export const Controller = ({ children, ...props }) => {
     }, [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) => {
+        var _a;
         if (event.ctrlKey) {
             return;
         }
@@ -223,7 +228,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (current.swipeState === "swipe") {
-            const containerWidth = current.containerRect?.width;
+            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
             if (containerWidth) {
                 current.swipeOffset -= event.deltaX;
                 current.swipeOffset =

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

@@ -3,12 +3,13 @@ import { Component, Labels } from "../../types.js";
 import { Publish } from "../contexts/index.js";
 export declare type NavigationButtonProps = {
     publish: Publish;
-    labels: Labels | undefined;
-    buttonLabel: string;
+    labels?: Labels;
+    label: string;
     icon: React.ElementType;
+    renderIcon?: () => React.ReactNode;
     action: "prev" | "next";
-    disabled: boolean | undefined;
+    disabled?: boolean;
 };
-export declare const NavigationButton: ({ publish, labels, buttonLabel, icon, action, disabled }: NavigationButtonProps) => JSX.Element;
+export declare const NavigationButton: ({ publish, labels, label, icon, renderIcon, action, disabled, }: NavigationButtonProps) => JSX.Element;
 export declare const Navigation: Component;
 export declare const NavigationModule: import("../../types.js").Module;

package/dist/core/modules/Navigation.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cssClass, label } from "../utils.js";
+import { cssClass, label as translateLabel } 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: () => {
+export const NavigationButton = ({ publish, labels, label, icon, renderIcon, action, disabled, }) => (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, "aria-disabled": disabled, onClick: () => {
         publish(action);
     } }));
-export const Navigation = ({ slides, carousel: { finite }, labels }) => {
+export const Navigation = ({ slides, carousel: { finite }, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
     const { currentIndex, subscribeSensors } = useController();
     const { publish } = useEvents();
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
@@ -19,7 +19,7 @@ export const Navigation = ({ slides, carousel: { finite }, labels }) => {
         }
     }), [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 })));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous Image", action: "prev", icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next Image", action: "next", icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));
 };
 export const NavigationModule = createModule("navigation", Navigation);

package/dist/core/modules/Portal.js

@@ -3,32 +3,49 @@ 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 }) => {
+import { useLatest } from "../hooks/useLatest.js";
+import { useEvents, useTimeouts } from "../contexts/index.js";
+export const Portal = ({ children, ...props }) => {
     const [mounted, setMounted] = React.useState(false);
+    const latestProps = useLatest(props);
+    const { setTimeout } = useTimeouts();
+    const { subscribe } = useEvents();
     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`);
+        const fadeAnimation = latestProps.current.animation.fade;
+        if (fadeAnimation !== LightboxDefaultProps.animation.fade) {
+            div.style.setProperty(cssVar("fade_animation_duration"), `${Math.round(fadeAnimation)}ms`);
         }
         return div;
     });
-    const { subscribe } = useEvents();
     React.useEffect(() => subscribe("close", () => {
+        var _a, _b;
+        (_b = (_a = latestProps.current.on).exiting) === null || _b === void 0 ? void 0 : _b.call(_a);
         portal.classList.remove(cssClass("portal_open"));
-    }), [subscribe, portal]);
+        setTimeout(() => {
+            var _a, _b;
+            (_b = (_a = latestProps.current.on).exited) === null || _b === void 0 ? void 0 : _b.call(_a);
+            latestProps.current.close();
+        }, latestProps.current.animation.fade);
+    }), [portal, setTimeout, subscribe, latestProps]);
     React.useEffect(() => {
+        var _a, _b;
         document.body.appendChild(portal);
         setMounted(true);
+        (_b = (_a = latestProps.current.on).entering) === null || _b === void 0 ? void 0 : _b.call(_a);
         setTimeout(() => {
             portal.classList.add(cssClass("portal_open"));
         }, 0);
+        setTimeout(() => {
+            var _a, _b;
+            (_b = (_a = latestProps.current.on).entered) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }, latestProps.current.animation.fade);
         return () => {
             document.body.removeChild(portal);
             setMounted(false);
         };
-    }, [portal]);
+    }, [portal, setTimeout, latestProps]);
     return ReactDOM.createPortal(mounted ? children : null, portal);
 };
 export const PortalModule = createModule("portal", Portal);

package/dist/core/modules/Toolbar.js

@@ -3,8 +3,9 @@ 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 }) => {
+export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
     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))));
+    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))));
 };
 export const ToolbarModule = createModule("toolbar", Toolbar);

package/dist/core/utils.js

@@ -1,7 +1,8 @@
 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}`;
+const cssPrefix = "yarl__";
+export const cssClass = (name) => `${cssPrefix}${name}`;
+export const cssVar = (name) => `--${cssPrefix}${name}`;
 export const label = (labels, lbl) => (labels && labels[lbl] ? labels[lbl] : lbl);
 export const cleanup = (...cleaners) => () => {
     cleaners.forEach((cleaner) => {

package/dist/plugins/Fullscreen.d.ts

@@ -1,9 +1,17 @@
-/// <reference types="react" />
-import { LightboxProps, Plugin } from "../types.js";
+import * as React from "react";
+import { LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
         fullscreen?: boolean;
     }
+    interface Render {
+        buttonFullscreen?: ({ fullscreen, toggleFullscreen, }: {
+            fullscreen: boolean;
+            toggleFullscreen: () => void;
+        }) => React.ReactNode;
+        iconEnterFullscreen?: () => React.ReactNode;
+        iconExitFullscreen?: () => React.ReactNode;
+    }
 }
 declare global {
     interface Document {
@@ -25,6 +33,7 @@ declare global {
 }
 export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
     auto: boolean;
+    render: Render;
 };
-export declare const FullscreenButton: ({ auto, labels }: FullscreenButtonProps) => JSX.Element | null;
+export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
 export declare const Fullscreen: Plugin;

package/dist/plugins/Fullscreen.js

@@ -1,21 +1,19 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useController } from "../core/index.js";
+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" }));
-export const FullscreenButton = ({ auto, labels }) => {
+export const FullscreenButton = ({ auto, labels, render }) => {
     const [fullscreen, setFullscreen] = React.useState(false);
+    const latestAuto = useLatest(auto);
     const { containerRef } = useController();
     const isFullscreenEnabled = () => {
-        return (document.fullscreenEnabled ??
-            document.webkitFullscreenEnabled ??
-            document.mozFullScreenEnabled ??
-            document.msFullscreenEnabled ??
-            false);
+        var _a, _b, _c, _d;
+        return (_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(() => document.fullscreenElement ??
-        document.webkitFullscreenElement ??
-        document.mozFullScreenElement ??
-        document.msFullscreenElement, []);
+    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 requestFullscreen = React.useCallback(() => {
         const container = containerRef.current;
         if (container) {
@@ -86,19 +84,19 @@ export const FullscreenButton = ({ auto, labels }) => {
     }, [fullscreenChangeListener]);
     React.useEffect(() => () => exitFullscreen(), [exitFullscreen]);
     React.useEffect(() => {
-        if (auto) {
+        if (latestAuto.current) {
             requestFullscreen();
         }
-    }, [auto, requestFullscreen]);
+    }, [latestAuto, 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 }));
+    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 }));
 };
 export const Fullscreen = ({ augment }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {
             buttons: [
-                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels }),
+                React.createElement(FullscreenButton, { key: "fullscreen", auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
                 ...buttons,
             ],
             ...restToolbar,

package/dist/plugins/Video.js

@@ -35,7 +35,7 @@ export const Video = ({ augment }) => {
                 if ("type" in slide && slide.type === "video") {
                     return React.createElement(VideoSlide, { slide: slide });
                 }
-                return renderSlide(slide);
+                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide);
             },
             ...restRender,
         },

package/dist/types.d.ts

@@ -24,7 +24,22 @@ export interface Animation {
     swipe: number;
 }
 export interface Render {
-    slide: (slide: Slide) => React.ReactNode;
+    slide?: (slide: Slide) => React.ReactNode;
+    iconPrev?: () => React.ReactNode;
+    iconNext?: () => React.ReactNode;
+    iconClose?: () => React.ReactNode;
+    iconLoading?: () => React.ReactNode;
+    iconError?: () => React.ReactNode;
+    buttonPrev?: () => React.ReactNode;
+    buttonNext?: () => React.ReactNode;
+    buttonClose?: () => React.ReactNode;
+}
+export interface Callbacks {
+    view?: (index: number) => void;
+    entering?: () => void;
+    entered?: () => void;
+    exiting?: () => void;
+    exited?: () => void;
 }
 export interface LightboxProps {
     open: boolean;
@@ -37,6 +52,7 @@ export interface LightboxProps {
     toolbar: Toolbar;
     carousel: Carousel;
     animation: Animation;
+    on: Callbacks;
 }
 export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
 export declare const LightboxPropTypes: {
@@ -44,9 +60,7 @@ export declare const LightboxPropTypes: {
     close: PropTypes.Validator<(...args: any[]) => any>;
     index: PropTypes.Validator<number>;
     slides: PropTypes.Validator<any[]>;
-    render: PropTypes.Validator<PropTypes.InferProps<{
-        slide: PropTypes.Validator<(...args: any[]) => any>;
-    }>>;
+    render: PropTypes.Validator<PropTypes.InferProps<{}>>;
     plugins: PropTypes.Validator<((...args: any[]) => any)[]>;
     toolbar: PropTypes.Validator<PropTypes.InferProps<{
         buttons: PropTypes.Validator<(string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | null | undefined)[]>;
@@ -62,6 +76,7 @@ export declare const LightboxPropTypes: {
         fade: PropTypes.Validator<number>;
         swipe: PropTypes.Validator<number>;
     }>>;
+    on: PropTypes.Validator<PropTypes.InferProps<{}>>;
 };
 export declare const LightboxDefaultProps: {
     open: boolean;
@@ -71,9 +86,10 @@ export declare const LightboxDefaultProps: {
     render: Render;
     plugins: Plugin[];
     toolbar: Toolbar;
-    labels: {};
+    labels: Labels;
     animation: Animation;
     carousel: Carousel;
+    on: Callbacks;
 };
 export declare type Labels = {
     [key: string]: string;

package/dist/types.js

@@ -18,9 +18,7 @@ export const LightboxPropTypes = {
     close: PropTypes.func.isRequired,
     index: PropTypes.number.isRequired,
     slides: PropTypes.arrayOf(PropTypes.oneOfType(SlideTypesPropTypes).isRequired).isRequired,
-    render: PropTypes.shape({
-        slide: PropTypes.func.isRequired,
-    }).isRequired,
+    render: PropTypes.shape({}).isRequired,
     plugins: PropTypes.arrayOf(PropTypes.func.isRequired).isRequired,
     toolbar: PropTypes.shape({
         buttons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["close"]), PropTypes.node])).isRequired,
@@ -36,15 +34,14 @@ export const LightboxPropTypes = {
         fade: PropTypes.number.isRequired,
         swipe: PropTypes.number.isRequired,
     }).isRequired,
+    on: PropTypes.shape({}).isRequired,
 };
 export const LightboxDefaultProps = {
     open: false,
     close: () => { },
     index: 0,
     slides: [],
-    render: {
-        slide: () => null,
-    },
+    render: {},
     plugins: [],
     toolbar: { buttons: ["close"] },
     labels: {},
@@ -58,4 +55,5 @@ export const LightboxDefaultProps = {
         padding: "16px",
         spacing: "30%",
     },
+    on: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "description": "Modern lightbox component for React",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -56,8 +56,8 @@
         "prop-types": "^15.8.1"
     },
     "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
     },
     "devDependencies": {
         "@commitlint/cli": "^17.0.0",
@@ -80,7 +80,7 @@
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react": "^7.30.0",
         "eslint-plugin-react-hooks": "^4.5.0",
         "husky": "^8.0.1",
         "jest": "^28.1.0",
@@ -93,7 +93,7 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.51.0",
+        "sass": "^1.52.0",
         "ts-jest": "^28.0.2",
         "typescript": "^4.6.4"
     },