yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/types.d.ts

@@ -1,22 +1,52 @@
 import * as React from "react";
-/** Image fit setting */
-export type ImageFit = "contain" | "cover";
-/** Image source */
-export interface ImageSource {
-    /** image URL */
-    src: string;
-    /** image width in pixels */
-    width: number;
-    /** image height in pixels */
-    height: number;
+/** Lightbox external props */
+export type LightboxExternalProps = DeepPartial<LightboxProps, "carousel" | "animation" | "controller" | "toolbar">;
+/** Lightbox properties */
+export interface LightboxProps {
+    /** if `true`, the lightbox is open */
+    open: boolean;
+    /** a callback to close the lightbox */
+    close: Callback;
+    /** starting slide index */
+    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 settings */
+    toolbar: ToolbarSettings;
+    /** carousel settings */
+    carousel: CarouselSettings;
+    /** animation settings */
+    animation: AnimationSettings;
+    /** controller settings */
+    controller: ControllerSettings;
+    /** lifecycle callbacks */
+    on: Callbacks;
+    /** customization styles */
+    styles: SlotStyles;
+    /** CSS class of the lightbox root element */
+    className: string;
 }
+/** Slide */
+export type Slide = SlideTypes[SlideTypeKey];
+/** Supported slide types */
+export interface SlideTypes {
+    /** image slide type */
+    image: SlideImage;
+}
+/** Slide type key */
+export type SlideTypeKey = keyof SlideTypes;
 /** Generic slide */
 export interface GenericSlide {
+    type?: SlideTypeKey;
 }
 /** Image slide properties */
 export interface SlideImage extends GenericSlide {
-    /** slide type */
-    type?: "image";
     /** image URL */
     src: string;
     /** image 'alt' attribute */
@@ -30,18 +60,44 @@ export interface SlideImage extends GenericSlide {
     /** alternative images to be passed to the 'srcSet' */
     srcSet?: ImageSource[];
 }
-/** Supported slide types */
-export interface SlideTypes {
-    /** image slide type */
-    SlideImage: SlideImage;
+/** Image source */
+export interface ImageSource {
+    /** image URL */
+    src: string;
+    /** image width in pixels */
+    width: number;
+    /** image height in pixels */
+    height: number;
 }
-/** Slide */
-export type Slide = SlideTypes[keyof SlideTypes];
+/** Image fit setting */
+export type ImageFit = "contain" | "cover";
+/** Lightbox component */
+export type Component = React.ComponentType<ComponentProps>;
+/** Lightbox component properties */
+export type ComponentProps = React.PropsWithChildren<Omit<LightboxProps, "slides" | "index" | "plugins">>;
+/** Lightbox component tree node */
+export type Node = {
+    /** module */
+    module: Module;
+    /** module child nodes */
+    children?: Node[];
+};
+/** Lightbox module */
+export type Module = {
+    /** module name */
+    name: string;
+    /** module component */
+    component: Component;
+};
+/** Lightbox props augmentation */
+export type Augmentation = (props: ComponentProps) => ComponentProps;
 /** Container rect */
 export type ContainerRect = {
     width: number;
     height: number;
 };
+/** Customization slots */
+export type Slot = SlotType[keyof SlotType];
 /** Supported customization slots */
 export interface SlotType {
     /** lightbox root customization slot */
@@ -53,8 +109,6 @@ export interface SlotType {
     /** lightbox icon customization slot */
     icon: "icon";
 }
-/** Customization slots */
-export type Slot = SlotType[keyof SlotType];
 /** Customization slot CSS properties */
 interface SlotCSSProperties extends React.CSSProperties {
     [key: `--yarl__${string}`]: string | number;
@@ -69,33 +123,36 @@ export interface CarouselSettings {
     finite: boolean;
     /** the lightbox preloads (2 * preload + 1) slides */
     preload: number;
-    /** padding around each slide (e.g., "16px", "10px 20px" or 0) */
-    padding: string | 0;
+    /** padding around each slide (e.g., "16px", "10%" or 0) */
+    padding: LengthOrPercentage;
     /** spacing between slides (e.g., "100px", "50%" or 0) */
-    spacing: string | 0;
+    spacing: LengthOrPercentage;
     /** `object-fit` setting for image slides */
     imageFit: ImageFit;
 }
+export type LengthOrPercentage = `${number}px` | `${number}%` | number;
 /** Animation settings */
 export interface AnimationSettings {
     /** fade-in / fade-out animation settings */
-    fade: AnimationSpec;
+    fade: number;
     /** swipe animation settings */
-    swipe: AnimationSpec;
+    swipe: number;
     /** override for `swipe` animation settings when using keyboard navigation or navigation buttons */
-    navigation?: AnimationSpec;
-}
-/** Animation duration or animation settings */
-export type AnimationSpec = {
-    /** animation duration */
-    duration?: number;
-    /** animation easing function */
-    easing?: string;
+    navigation?: number;
+    /** animation timing function settings */
+    easing: {
+        /** fade-in / fade-out animation timing function */
+        fade: string;
+        /** slide swipe animation timing function */
+        swipe: string;
+        /** slide navigation animation timing function (when using keyboard navigation or navigation buttons) */
+        navigation: string;
+    };
 }
-/** animation duration */
- | number;
 /** Controller settings */
 export interface ControllerSettings {
+    /** controller ref */
+    ref: React.ForwardedRef<ControllerRef>;
     /** if true, the lightbox captures focus when it opens */
     focus: boolean;
     /** controller `touch-action` */
@@ -105,33 +162,76 @@ export interface ControllerSettings {
     /** if `true`, close the lightbox when the backdrop is clicked */
     closeOnBackdropClick: boolean;
 }
+/** Lightbox controller ref */
+export interface ControllerRef {
+    /** navigate to the previous slide */
+    prev: Callback<NavigationAction | void>;
+    /** navigate to the next slide */
+    next: Callback<NavigationAction | void>;
+    /** close the lightbox */
+    close: Callback;
+    /** transfer focus to the lightbox controller */
+    focus: Callback;
+    /** get lightbox props */
+    getLightboxProps: () => ComponentProps;
+    /** get lightbox state */
+    getLightboxState: () => LightboxState;
+}
+/** Lightbox navigation action */
+export interface NavigationAction {
+    /** navigate through the specified number of slides */
+    count?: number;
+}
+/** Lightbox state */
+export interface LightboxState {
+    /** lightbox slides */
+    slides: Slide[];
+    /** current slide index */
+    currentIndex: number;
+    /** current slide index in the (-∞, +∞) range */
+    globalIndex: number;
+    /** current animation */
+    animation?: {
+        increment?: number;
+        duration?: number;
+        easing?: string;
+    };
+}
 /** Render function */
-export type RenderFunction<T = void> = (props: T) => React.ReactNode;
+export type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (props: T) => React.ReactNode;
 /** `render.slide` render function props */
-export type RenderSlideProps = [
+export interface RenderSlideProps {
     /** slide */
-    slide: Slide,
+    slide: Slide;
     /** slide offset (`0` - current slide, `1` - next slide, `-1` - previous slide, etc.) */
-    offset: number,
+    offset: number;
     /** container rect */
-    rect: ContainerRect
-];
+    rect: ContainerRect;
+}
 /** `render.slideHeader` render function props */
-export type RenderSlideHeaderProps = [slide: Slide];
+export interface RenderSlideHeaderProps {
+    slide: Slide;
+}
 /** `render.slideFooter` render function props */
-export type RenderSlideFooterProps = [slide: Slide];
+export interface RenderSlideFooterProps {
+    slide: Slide;
+}
 /** `render.slideContainer` render function props */
-export type RenderSlideContainerProps = [slide: Slide, children: React.ReactNode];
+export interface RenderSlideContainerProps extends React.PropsWithChildren {
+    slide: Slide;
+}
 /** Custom render functions. */
 export interface Render {
     /** render custom slide type, or override the default image slide */
-    slide?: (...props: RenderSlideProps) => React.ReactNode;
-    /** render custom slide header */
-    slideHeader?: (...props: RenderSlideHeaderProps) => React.ReactNode;
-    /** render custom slide footer */
-    slideFooter?: (...props: RenderSlideFooterProps) => React.ReactNode;
+    slide?: RenderFunction<RenderSlideProps>;
+    /** render custom slide header (use absolute positioning) */
+    slideHeader?: RenderFunction<RenderSlideHeaderProps>;
+    /** render custom slide footer (use absolute positioning) */
+    slideFooter?: RenderFunction<RenderSlideFooterProps>;
     /** render custom slide container */
-    slideContainer?: (...props: RenderSlideContainerProps) => React.ReactNode;
+    slideContainer?: RenderFunction<RenderSlideContainerProps>;
+    /** render custom controls or additional elements in the lightbox (use absolute positioning) */
+    controls?: RenderFunction;
     /** render custom Prev icon */
     iconPrev?: RenderFunction;
     /** render custom Next icon */
@@ -149,54 +249,27 @@ export interface Render {
     /** render custom Close button */
     buttonClose?: RenderFunction;
 }
+export type Callback<T = void> = [T] extends [void] ? () => void : (props: T) => void;
+export interface ViewCallbackProps {
+    index: number;
+}
+export interface ClickCallbackProps {
+    index: number;
+}
 /** Lifecycle callbacks */
 export interface Callbacks {
     /** a callback called when a slide becomes active */
-    view?: (index: number) => void;
+    view?: Callback<ViewCallbackProps>;
     /** a callback called when a slide is clicked */
-    click?: (index: number) => void;
+    click?: Callback<ClickCallbackProps>;
     /** a callback called when the portal starts opening */
-    entering?: () => void;
+    entering?: Callback;
     /** a callback called when the portal opens */
-    entered?: () => void;
+    entered?: Callback;
     /** a callback called when the portal starts closing */
-    exiting?: () => void;
+    exiting?: Callback;
     /** 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 settings */
-    toolbar: ToolbarSettings;
-    /** carousel settings */
-    carousel: CarouselSettings;
-    /** animation settings */
-    animation: AnimationSettings;
-    /** controller settings */
-    controller: ControllerSettings;
-    /** lifecycle callbacks */
-    on: Callbacks;
-    /** customization styles */
-    styles: SlotStyles;
-    /** CSS class of the lightbox root element */
-    className: string;
+    exited?: Callback;
 }
 /** Custom UI labels */
 export type Labels = {
@@ -207,28 +280,8 @@ export interface ToolbarSettings {
     /** buttons to render in the toolbar */
     buttons: ("close" | React.ReactNode)[];
 }
-/** Lightbox component properties */
-export type ComponentProps = React.PropsWithChildren<Omit<LightboxProps, "plugins">>;
-/** Lightbox component */
-export type Component = React.ComponentType<ComponentProps>;
-/** Lightbox module */
-export type Module = {
-    /** module name */
-    name: string;
-    /** module component */
-    component: Component;
-};
-/** Lightbox component tree node */
-export type Node = {
-    /** module */
-    module: Module;
-    /** module child nodes */
-    children?: Node[];
-};
-/** Lightbox props augmentation */
-export type Augmentation = (props: LightboxProps) => LightboxProps;
 /** Plugin methods */
-export type PluginMethods = {
+export interface PluginProps {
     /** test if a target module is present */
     contains: (target: string) => boolean;
     /** add module as a parent */
@@ -237,6 +290,8 @@ export type PluginMethods = {
     addChild: (target: string, module: Module, precede?: boolean) => void;
     /** add module as a sibling */
     addSibling: (target: string, module: Module, precede?: boolean) => void;
+    /** append module to the Controller module */
+    addModule: (module: Module) => void;
     /** replace module */
     replace: (target: string, module: Module) => void;
     /** add module as a child and inherit all existing children */
@@ -245,17 +300,18 @@ export type PluginMethods = {
     remove: (target: string) => void;
     /** augment lightbox props */
     augment: (augmentation: Augmentation) => void;
-};
+}
 /** Lightbox plugin */
-export type Plugin = ({ addParent, addChild, addSibling, replace, remove, append, augment }: PluginMethods) => void;
+export type Plugin = (props: PluginProps) => void;
 /** Deep partial utility type */
-export type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
-    [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
+export type DeepPartial<T extends {}, K extends keyof T> = Omit<Partial<T>, K> & {
+    [P in K]?: DeepPartialValue<T[P]>;
 };
+export type DeepPartialValue<T> = T extends any[] ? T : T extends (...props: any[]) => any ? T : T extends {} ? {
+    [P in keyof T]?: P extends "ref" ? T[P] : DeepPartialValue<T[P]>;
+} : T;
 /** Deep non-nullable utility type */
 export type DeepNonNullable<T> = T extends {} ? {
     [K in keyof T]-?: NonNullable<T[K]>;
 } : never;
-/** Lightbox external props */
-export type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "2.6.2",
+    "version": "3.0.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -8,18 +8,48 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "exports": {
-        ".": "./dist/index.js",
-        "./core": "./dist/core/index.js",
-        "./plugins": "./dist/plugins/index.js",
-        "./plugins/captions": "./dist/plugins/captions/index.js",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./core": {
+            "types": "./dist/core/index.d.ts",
+            "default": "./dist/core/index.js"
+        },
+        "./plugins": {
+            "types": "./dist/plugins/index.d.ts",
+            "default": "./dist/plugins/index.js"
+        },
         "./plugins/captions.css": "./dist/plugins/captions/captions.css",
-        "./plugins/fullscreen": "./dist/plugins/fullscreen/index.js",
-        "./plugins/inline": "./dist/plugins/inline/index.js",
-        "./plugins/slideshow": "./dist/plugins/slideshow/index.js",
-        "./plugins/thumbnails": "./dist/plugins/thumbnails/index.js",
+        "./plugins/captions": {
+            "types": "./dist/plugins/captions/index.d.ts",
+            "default": "./dist/plugins/captions/index.js"
+        },
+        "./plugins/fullscreen": {
+            "types": "./dist/plugins/fullscreen/index.d.ts",
+            "default": "./dist/plugins/fullscreen/index.js"
+        },
+        "./plugins/inline": {
+            "types": "./dist/plugins/inline/index.d.ts",
+            "default": "./dist/plugins/inline/index.js"
+        },
+        "./plugins/slideshow": {
+            "types": "./dist/plugins/slideshow/index.d.ts",
+            "default": "./dist/plugins/slideshow/index.js"
+        },
         "./plugins/thumbnails.css": "./dist/plugins/thumbnails/thumbnails.css",
-        "./plugins/video": "./dist/plugins/video/index.js",
-        "./plugins/zoom": "./dist/plugins/zoom/index.js",
+        "./plugins/thumbnails": {
+            "types": "./dist/plugins/thumbnails/index.d.ts",
+            "default": "./dist/plugins/thumbnails/index.js"
+        },
+        "./plugins/video": {
+            "types": "./dist/plugins/video/index.d.ts",
+            "default": "./dist/plugins/video/index.js"
+        },
+        "./plugins/zoom": {
+            "types": "./dist/plugins/zoom/index.d.ts",
+            "default": "./dist/plugins/zoom/index.js"
+        },
         "./styles.css": "./dist/styles.css"
     },
     "typesVersions": {

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { ComponentProps } from "../../types.js";
-export declare function Core({ slides, index, children }: ComponentProps): JSX.Element;
-export declare const CoreModule: import("../../types.js").Module;

package/dist/core/modules/Core.js

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { createModule } from "../config.js";
-import { EventsProvider, LightboxStateProvider, TimeoutsProvider } from "../contexts/index.js";
-import { MODULE_CORE } from "../consts.js";
-export function Core({ slides, index, children }) {
-    return (React.createElement(TimeoutsProvider, null,
-        React.createElement(EventsProvider, null,
-            React.createElement(LightboxStateProvider, { slidesCount: slides.length, initialIndex: index }, children))));
-}
-export const CoreModule = createModule(MODULE_CORE, Core);

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

@@ -1,7 +0,0 @@
-import * as React from "react";
-export type CaptionsContextType = {
-    toolbarWidth?: number;
-};
-export declare const useCaptions: () => CaptionsContextType;
-/** Captions plugin context holder */
-export declare function CaptionsContextProvider({ children }: React.PropsWithChildren): JSX.Element;

package/dist/plugins/captions/CaptionsContext.js

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { makeUseContext, useEvents, YARL_EVENT_TOOLBAR_WIDTH } from "../../core/index.js";
-const CaptionsContext = React.createContext(null);
-export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-export function CaptionsContextProvider({ children }) {
-    const { subscribe } = useEvents();
-    const [toolbarWidth, setToolbarWidth] = React.useState();
-    React.useEffect(() => subscribe(YARL_EVENT_TOOLBAR_WIDTH, (event) => setToolbarWidth(event)), [subscribe]);
-    const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
-    return React.createElement(CaptionsContext.Provider, { value: context }, children);
-}

package/dist/plugins/zoom/ZoomContainer.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ContainerRect, LightboxProps, Slide } from "../../types.js";
-export type ZoomContainerProps = Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
-    slide: Slide;
-    offset: number;
-    rect: ContainerRect;
-};
-/** Zoom container */
-export declare function ZoomContainer({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on, }: ZoomContainerProps): JSX.Element | null;