yet-another-react-lightbox 1.3.1 → 1.3.4

package/README.md

@@ -1,6 +1,6 @@
 # Yet Another React Lightbox
 
-Modern React lightbox component.
+Modern React lightbox component. Performant, easy to use, customizable and extendable.
 
 ## Overview
 
@@ -8,9 +8,23 @@ Modern React lightbox component.
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](LICENSE)
 
+- **Built for React:** works with React 18, 17 and 16.8.0+
+- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Preloading:** never displays partially downloaded images
+- **Performance:** preloads limited number of images without compromising performance or UX
+- **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 
+- **TypeScript:** type definitions come built-in in the package
+
 ## Documentation
 
-[https://yet-another-react-lightbox.vercel.app/](https://yet-another-react-lightbox.vercel.app/)
+[https://yet-another-react-lightbox.vercel.app/documentation](https://yet-another-react-lightbox.vercel.app/documentation)
+
+## Examples
+
+[https://yet-another-react-lightbox.vercel.app/examples](https://yet-another-react-lightbox.vercel.app/examples)
 
 ## Installation
 

package/dist/Lightbox.d.ts

@@ -3,5 +3,6 @@ import { LightboxProps } from "./types.js";
 declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
     [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
 };
-export declare const Lightbox: (props: DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "on">) => JSX.Element;
+/** Modern React lightbox component */
+export declare const Lightbox: (props: DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "controller" | "on">) => JSX.Element;
 export {};

package/dist/Lightbox.js

@@ -24,8 +24,9 @@ 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, on, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
-    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
+    const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
+    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, controller: { ...defaultController, ...controller }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
 };

package/dist/core/components/Icons.js

@@ -10,5 +10,7 @@ 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", { 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", { 
+    // 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 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.js

@@ -35,8 +35,10 @@ export const ImageSlide = ({ slide: image, render }) => {
         setState("error");
     }, []);
     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.title, ...(image.srcSet
+        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`,

package/dist/core/modules/Carousel.js

@@ -5,8 +5,16 @@ import { clsx, cssClass, cssVar } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 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 }))));
+    const renderSlide = () => {
+        if (render.slide) {
+            const rendered = render.slide(slide);
+            if (rendered) {
+                return rendered;
+            }
+        }
+        return "src" in slide ? React.createElement(ImageSlide, { slide: slide, render: render }) : null;
+    };
+    return (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, renderSlide()));
 };
 export const Carousel = (props) => {
     const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;

package/dist/core/modules/Controller.js

@@ -28,6 +28,8 @@ 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;
@@ -42,8 +44,10 @@ export const Controller = ({ children, ...props }) => {
     }, [containerRef]);
     React.useEffect(() => {
         var _a;
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [containerRef]);
+        if (refs.current.props.controller.focus) {
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [containerRef, refs]);
     React.useEffect(() => {
         var _a, _b;
         (_b = (_a = refs.current.props.on).view) === null || _b === void 0 ? void 0 : _b.call(_a, state.currentIndex);
@@ -103,6 +107,7 @@ 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 {
@@ -200,9 +205,11 @@ 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;

package/dist/core/modules/Navigation.js

@@ -19,7 +19,7 @@ export const Navigation = ({ slides, carousel: { finite }, labels, render: { but
         }
     }), [subscribeSensors, publish]);
     return (React.createElement(React.Fragment, null,
-        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 }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: "prev", icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", 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/NoScroll.js

@@ -7,6 +7,7 @@ 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/plugins/Fullscreen.d.ts

@@ -2,14 +2,18 @@ import * as React from "react";
 import { LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
+        /** enter fullscreen mode automatically when the lightbox opens */
         fullscreen?: boolean;
     }
     interface Render {
+        /** render custom Enter/Exit Fullscreen button */
         buttonFullscreen?: ({ fullscreen, toggleFullscreen, }: {
             fullscreen: boolean;
             toggleFullscreen: () => void;
         }) => React.ReactNode;
+        /** render custom Enter Fullscreen icon */
         iconEnterFullscreen?: () => React.ReactNode;
+        /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: () => React.ReactNode;
     }
 }
@@ -31,12 +35,13 @@ declare global {
         msRequestFullscreen?: () => void;
     }
 }
-declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
+/** Fullscreen button props */
+export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
     auto: boolean;
     render: Render;
 };
-declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
-declare const Fullscreen: Plugin;
-export type { FullscreenButtonProps };
-export { Fullscreen, FullscreenButton };
+/** Fullscreen button */
+export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
+/** Fullscreen plugin */
+export declare const Fullscreen: Plugin;
 export default Fullscreen;

package/dist/plugins/Fullscreen.js

@@ -2,7 +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" }));
-const FullscreenButton = ({ auto, labels, render }) => {
+/** Fullscreen button */
+export const FullscreenButton = ({ auto, labels, render }) => {
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
     const { containerRef } = useController();
@@ -32,6 +33,7 @@ const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
+                //
             }
         }
     }, [containerRef]);
@@ -52,6 +54,7 @@ const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
+                //
             }
         }
     }, [getFullscreenElement]);
@@ -92,7 +95,8 @@ const FullscreenButton = ({ auto, labels, render }) => {
         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 }));
 };
-const Fullscreen = ({ augment }) => {
+/** Fullscreen plugin */
+export const Fullscreen = ({ augment }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {
             buttons: [
@@ -104,5 +108,4 @@ const Fullscreen = ({ augment }) => {
         ...restProps,
     }));
 };
-export { Fullscreen, FullscreenButton };
 export default Fullscreen;

package/dist/plugins/Inline.d.ts

@@ -2,11 +2,14 @@ import * as React from "react";
 import { Component, Plugin } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
+        /** HTML div element attributes to be passed to inline plugin container */
         inline?: React.HTMLAttributes<HTMLDivElement>;
     }
 }
-declare const InlineContainer: Component;
-declare const InlineModule: import("../types.js").Module;
-declare const Inline: Plugin;
-export { Inline, InlineModule, InlineContainer };
+/** Inline plugin container */
+export declare const InlineContainer: Component;
+/** Inline plugin module */
+export declare const InlineModule: import("../types.js").Module;
+/** Inline plugin */
+export declare const Inline: Plugin;
 export default Inline;

package/dist/plugins/Inline.js

@@ -1,9 +1,12 @@
 import * as React from "react";
 import { createModule } from "../core/index.js";
-const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
-const InlineModule = createModule("inline", InlineContainer);
-const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, ...restProps }) => ({
+/** 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,
         close: () => { },
         toolbar: {
@@ -11,10 +14,10 @@ const Inline = ({ augment, replace, remove }) => {
             ...restToolbar,
         },
         inline: { style: { width: "100%", height: "100%" } },
+        controller: { focus: false, ...restController },
         ...restProps,
     }));
     remove("no-scroll");
     replace("portal", InlineModule);
 };
-export { Inline, InlineModule, InlineContainer };
 export default Inline;

package/dist/plugins/Video.d.ts

@@ -1,23 +1,33 @@
 /// <reference types="react" />
 import { Plugin } from "../types.js";
+/** Video slide attributes */
 export interface SlideVideo {
+    /** video slide type marker */
     type: "video";
+    /** video placeholder image */
     poster?: string;
+    /** video width */
     width?: number;
+    /** video height */
     height?: number;
+    /** vide source files */
     sources?: {
+        /** video source URL */
         src: string;
+        /** video source type (e.g., `video/mp4`) */
         type: string;
     }[];
 }
 declare module "../types.js" {
     interface SlideTypes {
+        /** video slide type */
         SlideVideo: SlideVideo;
     }
 }
-declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
+/** Video slide */
+export declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
     slide: SlideVideo;
 }) => JSX.Element;
-declare const Video: Plugin;
-export { Video, VideoSlide };
+/** Video plugin */
+export declare const Video: Plugin;
 export default Video;

package/dist/plugins/Video.js

@@ -12,7 +12,8 @@ SlideTypesPropTypes.push(PropTypes.shape({
         type: PropTypes.string.isRequired,
     }).isRequired),
 }));
-const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
+/** Video slide */
+export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     const { setContainerRef, containerRect } = useContainerRect();
     const scaleWidthAndHeight = () => {
         if (!width || !height || !containerRect)
@@ -26,9 +27,14 @@ 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 && (React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
+        }, 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 })))))))));
 };
-const Video = ({ augment }) => {
+/** Video plugin */
+export const Video = ({ augment }) => {
     augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
         render: {
             slide: (slide) => {
@@ -42,5 +48,4 @@ const Video = ({ augment }) => {
         ...restProps,
     }));
 };
-export { Video, VideoSlide };
 export default Video;

package/dist/types.d.ts

@@ -1,57 +1,113 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+/** Image slide properties */
 export interface SlideImage {
+    /** image URL */
     src?: string;
-    title?: string;
+    /** image 'alt' attribute */
+    alt?: string;
+    /** image aspect ratio */
     aspectRatio?: number;
+    /** alternative images to be passed to the 'srcSet' */
     srcSet?: {
+        /** image URL */
         src: string;
+        /** image width in pixels */
         width: number;
     }[];
 }
+/** Supported slide types */
 export interface SlideTypes {
+    /** image slide type */
     SlideImage: SlideImage;
 }
+/** Slide */
 export declare type Slide = SlideTypes[keyof SlideTypes];
-export interface Carousel {
+/** Carousel settings */
+export interface CarouselSettings {
+    /** if `true`, the lightbox carousel doesn't wrap around */
     finite: boolean;
+    /** the lightbox preloads (2 * preload + 1) slides */
     preload: number;
+    /** padding around each slide */
     padding: string | number;
+    /** spacing between slides (e.g., "100px", "50%" or 0) */
     spacing: string | number;
 }
-export interface Animation {
+/** Animation settings */
+export interface AnimationSettings {
+    /** fade-in / fade-out animation duration */
     fade: number;
+    /** swipe animation duration */
     swipe: number;
 }
+/** Controller settings */
+export interface ControllerSettings {
+    /** if true, the lightbox captures focus when it opens v     */
+    focus: boolean;
+}
+/** Custom render functions. */
 export interface Render {
+    /** render custom slide type, or override the default image slide */
     slide?: (slide: Slide) => React.ReactNode;
+    /** render custom Prev icon */
     iconPrev?: () => React.ReactNode;
+    /** render custom Next icon */
     iconNext?: () => React.ReactNode;
+    /** render custom Close icon */
     iconClose?: () => React.ReactNode;
+    /** render custom Loading icon */
     iconLoading?: () => React.ReactNode;
+    /** render custom Error icon */
     iconError?: () => React.ReactNode;
+    /** render custom Prev button */
     buttonPrev?: () => React.ReactNode;
+    /** render custom Next button */
     buttonNext?: () => React.ReactNode;
+    /** render custom Close button */
     buttonClose?: () => React.ReactNode;
 }
+/** Lifecycle callbacks */
 export interface Callbacks {
+    /** a callback called when a slide becomes active */
     view?: (index: number) => void;
+    /** a callback called when the portal starts opening */
     entering?: () => void;
+    /** a callback called when the portal opens */
     entered?: () => void;
+    /** a callback called when the portal starts closing */
     exiting?: () => void;
+    /** a callback called when the portal closes */
     exited?: () => void;
 }
+/** Lightbox properties */
 export interface LightboxProps {
+    /** if `true`, the lightbox is open */
     open: boolean;
+    /** a callback to close the lightbox */
     close: () => void;
+    /**
+     * Starting slide index. The lightbox reads this property only when it opens.
+     * Changing this property while the lightbox is already open has no effect.
+     */
     index: number;
+    /** slides to display in the lightbox */
     slides: Slide[];
+    /** custom render functions */
     render: Render;
+    /** custom UI labels */
     labels: Labels;
+    /** enabled plugins */
     plugins: Plugin[];
-    toolbar: Toolbar;
-    carousel: Carousel;
-    animation: Animation;
+    /** toolbar settings */
+    toolbar: ToolbarSettings;
+    /** carousel settings */
+    carousel: CarouselSettings;
+    /** animation settings */
+    animation: AnimationSettings;
+    /** controller settings */
+    controller: ControllerSettings;
+    /** lifecycle callbacks */
     on: Callbacks;
 }
 export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
@@ -86,6 +142,9 @@ export declare const LightboxPropTypes: {
         fade: PropTypes.Validator<number>;
         swipe: PropTypes.Validator<number>;
     }>>;
+    controller: PropTypes.Validator<PropTypes.InferProps<{
+        focus: PropTypes.Validator<boolean>;
+    }>>;
     on: PropTypes.Validator<PropTypes.InferProps<{
         view: PropTypes.Requireable<(...args: any[]) => any>;
         entering: PropTypes.Requireable<(...args: any[]) => any>;
@@ -101,34 +160,56 @@ export declare const LightboxDefaultProps: {
     slides: Slide[];
     render: Render;
     plugins: Plugin[];
-    toolbar: Toolbar;
+    toolbar: ToolbarSettings;
     labels: Labels;
-    animation: Animation;
-    carousel: Carousel;
+    animation: AnimationSettings;
+    carousel: CarouselSettings;
+    controller: ControllerSettings;
     on: Callbacks;
 };
+/** Custom UI labels */
 export declare type Labels = {
     [key: string]: string;
 };
-export interface Toolbar {
+/** Toolbar settings */
+export interface ToolbarSettings {
+    /** buttons to render in the toolbar */
     buttons: ("close" | React.ReactNode)[];
 }
+/** Lightbox component properties */
 export declare type ComponentProps = Omit<LightboxProps, "plugins">;
+/** Lightbox component */
 export declare type Component = React.ComponentType<React.PropsWithChildren<ComponentProps>>;
+/** Lightbox module */
 export declare type Module = {
+    /** module name */
     name: string;
+    /** module component */
     component: Component;
 };
+/** Lightbox component tree node */
 export declare type Node = {
+    /** module */
     module: Module;
+    /** module child nodes */
     children?: Node[];
 };
+/** Lightbox props augmentation */
 export declare type Augmentation = (props: LightboxProps) => LightboxProps;
-export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, }: {
+/** Plugin methods */
+export declare type PluginMethods = {
+    /** add module as parent */
     addParent: (target: string, module: Module) => void;
+    /** add module as child */
     addChild: (target: string, module: Module, precede?: boolean) => void;
+    /** add module as sibling */
     addSibling: (target: string, module: Module, precede?: boolean) => void;
+    /** replace module */
     replace: (target: string, module: Module) => void;
+    /** remove module */
     remove: (target: string) => void;
+    /** augment lightbox props */
     augment: (augmentation: Augmentation) => void;
-}) => void;
+};
+/** Lightbox plugin */
+export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, augment }: PluginMethods) => void;

package/dist/types.js

@@ -44,6 +44,9 @@ export const LightboxPropTypes = {
         fade: PropTypes.number.isRequired,
         swipe: PropTypes.number.isRequired,
     }).isRequired,
+    controller: PropTypes.shape({
+        focus: PropTypes.bool.isRequired,
+    }).isRequired,
     on: PropTypes.shape({
         view: PropTypes.func,
         entering: PropTypes.func,
@@ -71,5 +74,8 @@ export const LightboxDefaultProps = {
         padding: "16px",
         spacing: "30%",
     },
+    controller: {
+        focus: true,
+    },
     on: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.3.1",
+    "version": "1.3.4",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -42,7 +42,7 @@
         "dist"
     ],
     "sideEffects": false,
-    "homepage": "https://github.com/igordanchenko/yet-another-react-lightbox#readme",
+    "homepage": "https://yet-another-react-lightbox.vercel.app/",
     "repository": {
         "type": "git",
         "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
@@ -56,8 +56,9 @@
     "scripts": {
         "prepare": "husky install",
         "clean": "rimraf dist",
-        "build": "npm-run-all clean build:scss build:css build:js",
-        "build:js": "tsc -p tsconfig.build.json",
+        "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 ",
         "start": "npm-run-all clean --parallel \"build:* -- -w\"",
@@ -72,15 +73,15 @@
         "react-dom": ">=16.8.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^17.0.1",
-        "@commitlint/config-conventional": "^17.0.0",
+        "@commitlint/cli": "^17.0.2",
+        "@commitlint/config-conventional": "^17.0.2",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/github": "^8.0.4",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.0",
         "@types/jest": "^27.5.1",
-        "@types/react": "^18.0.9",
+        "@types/react": "^18.0.10",
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.27.0",
         "@typescript-eslint/parser": "^5.27.0",
@@ -97,7 +98,7 @@
         "husky": "^8.0.1",
         "jest": "^28.1.0",
         "jest-environment-jsdom": "^28.1.0",
-        "lint-staged": "^12.4.3",
+        "lint-staged": "^13.0.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",