yet-another-react-lightbox 2.6.0 → 2.6.1

package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { ContainerRect, DeepNonNullable, LightboxProps } from "../../types.js";
-type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
+export type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
+export type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
     thumbnails: ThumbnailsInternal;
     thumbnailRect: ContainerRect;
 };
-export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
-export {};
+export declare function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }: ThumbnailsTrackProps): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -3,9 +3,13 @@ import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, cls
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 import { Thumbnail } from "./Thumbnail.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
-const isHorizontal = (position) => ["top", "bottom"].includes(position);
-const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
+function isHorizontal(position) {
+    return ["top", "bottom"].includes(position);
+}
+function boxSize(thumbnails, dimension, includeGap) {
+    return dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
+}
+export function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) {
     const track = React.useRef(null);
     const { globalIndex, animation } = useLightboxState().state;
     const { publish, subscribe } = useEvents();
@@ -129,4 +133,4 @@ export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnail
             return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
         })),
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
-};
+}

package/dist/plugins/thumbnails/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types" {
@@ -25,13 +24,16 @@ declare module "../../types" {
             vignette?: boolean;
         };
     }
+    /** `render.thumbnail` render function props */
+    type RenderThumbnailProps = {
+        slide: Slide;
+        rect: ContainerRect;
+        render: Render;
+        imageFit: ImageFit;
+    };
     interface Render {
-        thumbnail?: ({ slide, rect, render, imageFit, }: {
-            slide: Slide;
-            rect: ContainerRect;
-            render: Render;
-            imageFit: ImageFit;
-        }) => React.ReactNode;
+        /** render custom thumbnail */
+        thumbnail?: RenderFunction<RenderThumbnailProps>;
     }
     interface SlotType {
         /** thumbnail customization slot */

package/dist/plugins/video/VideoSlide.d.ts

@@ -1,9 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 import { SlideVideo } from "./index.js";
-type VideoSlideProps = {
+export type VideoSlideProps = {
     slide: SlideVideo;
     offset: number;
 };
 /** Video slide */
-export declare const VideoSlide: React.FC<VideoSlideProps>;
-export {};
+export declare function VideoSlide({ slide, offset }: VideoSlideProps): JSX.Element;

package/dist/plugins/video/VideoSlide.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, clsx, cssClass, useContainerRect, useController, useEventCallback, useEvents, } from "../../core/index.js";
 import { defaultVideoProps } from "./Video.js";
-export const VideoSlide = ({ slide, offset }) => {
+export function VideoSlide({ slide, offset }) {
     const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
     const videoRef = React.useRef(null);
@@ -67,4 +67,4 @@ export const VideoSlide = ({ slide, offset }) => {
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);
         } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
-};
+}

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

@@ -1,12 +1,11 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ImageSlideProps } from "../../core/index.js";
 import { ImageSource, SlideImage } from "../../types.js";
-type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
+export type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
     srcSet: [ImageSource, ...ImageSource[]];
 };
-export declare const isResponsiveImageSlide: (slide: SlideImage) => slide is ResponsiveImageSlide;
-type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
+export declare function isResponsiveImageSlide(slide: SlideImage): slide is ResponsiveImageSlide;
+export type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
     slide: ResponsiveImageSlide;
 };
-export declare const ResponsiveImage: React.FC<ResponsiveImageProps>;
-export {};
+export declare function ResponsiveImage(props: ResponsiveImageProps): JSX.Element;

package/dist/plugins/zoom/ResponsiveImage.js

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { devicePixelRatio, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageSlide, useEventCallback, useLayoutEffect, } from "../../core/index.js";
-export const isResponsiveImageSlide = (slide) => { var _a; return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; };
-export const ResponsiveImage = (props) => {
+export function isResponsiveImageSlide(slide) {
+    var _a;
+    return (((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+}
+export function ResponsiveImage(props) {
     var _a, _b;
     const [state, setState] = React.useState({});
     const { current, preload } = state;
@@ -44,4 +47,4 @@ export const ResponsiveImage = (props) => {
                 iconError: () => null,
             } })),
         current && (React.createElement(ImageSlide, { key: "current", ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
-};
+}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps } from "../../types.js";
 type ZoomButtonsGroupProps = Pick<LightboxProps, "labels" | "render">;
-export declare const ZoomButtonsGroup: React.FC<ZoomButtonsGroupProps>;
+export declare function ZoomButtonsGroup({ labels, render }: ZoomButtonsGroupProps): JSX.Element;
 export {};

package/dist/plugins/zoom/ZoomButtonsGroup.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useController } from "../../core/index.js";
 import { ZoomButton } from "./ZoomButton.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
-export const ZoomButtonsGroup = ({ labels, render }) => {
+export function ZoomButtonsGroup({ labels, render }) {
     const zoomInRef = React.useRef(null);
     const zoomOutRef = React.useRef(null);
     const { transferFocus } = useController();
@@ -20,4 +20,4 @@ export const ZoomButtonsGroup = ({ labels, render }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(ZoomButton, { ref: zoomInRef, key: ACTION_ZOOM_IN, zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
         React.createElement(ZoomButton, { ref: zoomOutRef, key: ACTION_ZOOM_OUT, labels: labels, render: render, onLoseFocus: focusZoomIn })));
-};
+}

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

@@ -1,8 +1,9 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ContainerRect, LightboxProps, Slide } from "../../types.js";
-/** Zoom container */
-export declare const ZoomContainer: React.FC<Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
+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;

package/dist/plugins/zoom/ZoomContainer.js

@@ -4,7 +4,7 @@ import { useZoom } from "./ZoomContext.js";
 import { defaultZoomProps } from "./Zoom.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
 import { isResponsiveImageSlide, ResponsiveImage } from "./ResponsiveImage.js";
-const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+function getSlideRects(slide, cover, maxZoomPixelRatio, rect) {
     var _a, _b;
     let slideRect = { width: 0, height: 0 };
     let maxSlideRect = { width: 0, height: 0 };
@@ -34,9 +34,11 @@ const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
         }
     }
     return { slideRect, maxSlideRect };
-};
-const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
-export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on }) => {
+}
+function distance(pointerA, pointerB) {
+    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+}
+export function ZoomContainer({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on, }) {
     var _a;
     const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
     const { currentIndex } = useLightboxState().state;
@@ -317,4 +319,4 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
     return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), ...(offset === 0
             ? { style: { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } }
             : null) }, rendered)) : null;
-};
+}

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

@@ -1,5 +1,6 @@
-import { Component } from "../../types.js";
-type ZoomContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type ZoomContextType = {
     isMinZoom: boolean;
     isMaxZoom: boolean;
     isZoomSupported: boolean;
@@ -7,5 +8,4 @@ type ZoomContextType = {
     setIsMaxZoom: (value: boolean) => void;
 };
 export declare const useZoom: () => ZoomContextType;
-export declare const ZoomContextProvider: Component;
-export {};
+export declare function ZoomContextProvider({ slides, children }: ComponentProps): JSX.Element;

package/dist/plugins/zoom/ZoomContext.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { isImageSlide, makeUseContext, useEventCallback, useLayoutEffect, useLightboxState } from "../../core/index.js";
 const ZoomContext = React.createContext(null);
 export const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
-export const ZoomContextProvider = ({ slides, children }) => {
+export function ZoomContextProvider({ slides, children }) {
     const [isMinZoom, setIsMinZoom] = React.useState(false);
     const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     const [isZoomSupported, setIsZoomSupported] = React.useState(false);
@@ -17,4 +17,4 @@ export const ZoomContextProvider = ({ slides, children }) => {
         setIsMaxZoom,
     }), [isMinZoom, isMaxZoom, isZoomSupported]);
     return React.createElement(ZoomContext.Provider, { value: context }, children);
-};
+}

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

@@ -1,16 +1,7 @@
 import * as React from "react";
-import { LightboxProps } from "../../types.js";
 import { Zoom } from "./Zoom.js";
 export declare const ACTION_ZOOM_IN = "zoom-in";
 export declare const ACTION_ZOOM_OUT = "zoom-out";
-/** Custom zoom button render function */
-type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
-    ref: React.ForwardedRef<HTMLButtonElement>;
-    disabled: boolean;
-    onClick: () => void;
-    onFocus: () => void;
-    onBlur: () => void;
-}) => React.ReactNode;
 declare module "../../types" {
     interface LightboxProps {
         /** Zoom plugin settings */
@@ -39,15 +30,23 @@ declare module "../../types" {
         /** zoom animation duration */
         zoom?: number;
     }
+    /** `render.buttonZoomIn` and `render.buttonZoomOut` render function props */
+    type RenderZoomButtonProps = Pick<LightboxProps, "labels"> & {
+        ref: React.ForwardedRef<HTMLButtonElement>;
+        disabled: boolean;
+        onClick: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
     interface Render {
         /** render custom Zoom in button */
-        buttonZoomIn?: RenderZoomButton;
+        buttonZoomIn?: RenderFunction<RenderZoomButtonProps>;
         /** render custom Zoom in button */
-        buttonZoomOut?: RenderZoomButton;
+        buttonZoomOut?: RenderFunction<RenderZoomButtonProps>;
         /** render custom Zoom in icon */
-        iconZoomIn?: () => React.ReactNode;
+        iconZoomIn?: RenderFunction;
         /** render custom Zoom out icon */
-        iconZoomOut?: () => React.ReactNode;
+        iconZoomOut?: RenderFunction;
     }
     interface Callbacks {
         zoom?: (level: number) => void;

package/dist/styles.css

@@ -59,6 +59,7 @@
 .yarl__slide {
   flex: 1;
   position: relative;
+  overflow: hidden;
   padding: calc(var(--yarl__carousel_padding_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_padding_percent, 0) * 1%);
 }
 [dir=rtl] .yarl__slide {

package/dist/types.d.ts

@@ -105,38 +105,49 @@ export interface ControllerSettings {
     /** if `true`, close the lightbox when the backdrop is clicked */
     closeOnBackdropClick: boolean;
 }
-/** Custom render functions. */
-export interface Render {
-    /** render custom slide type, or override the default image slide */
-    slide?: (
+/** Render function */
+export type RenderFunction<T = void> = (props: T) => React.ReactNode;
+/** `render.slide` render function props */
+export type 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) => React.ReactNode;
+    rect: ContainerRect
+];
+/** `render.slideHeader` render function props */
+export type RenderSlideHeaderProps = [slide: Slide];
+/** `render.slideFooter` render function props */
+export type RenderSlideFooterProps = [slide: Slide];
+/** `render.slideContainer` render function props */
+export type RenderSlideContainerProps = [slide: Slide, children: React.ReactNode];
+/** 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?: (slide: Slide) => React.ReactNode;
+    slideHeader?: (...props: RenderSlideHeaderProps) => React.ReactNode;
     /** render custom slide footer */
-    slideFooter?: (slide: Slide) => React.ReactNode;
+    slideFooter?: (...props: RenderSlideFooterProps) => React.ReactNode;
     /** render custom slide container */
-    slideContainer?: (slide: Slide, children: React.ReactNode) => React.ReactNode;
+    slideContainer?: (...props: RenderSlideContainerProps) => React.ReactNode;
     /** render custom Prev icon */
-    iconPrev?: () => React.ReactNode;
+    iconPrev?: RenderFunction;
     /** render custom Next icon */
-    iconNext?: () => React.ReactNode;
+    iconNext?: RenderFunction;
     /** render custom Close icon */
-    iconClose?: () => React.ReactNode;
+    iconClose?: RenderFunction;
     /** render custom Loading icon */
-    iconLoading?: () => React.ReactNode;
+    iconLoading?: RenderFunction;
     /** render custom Error icon */
-    iconError?: () => React.ReactNode;
+    iconError?: RenderFunction;
     /** render custom Prev button */
-    buttonPrev?: () => React.ReactNode;
+    buttonPrev?: RenderFunction;
     /** render custom Next button */
-    buttonNext?: () => React.ReactNode;
+    buttonNext?: RenderFunction;
     /** render custom Close button */
-    buttonClose?: () => React.ReactNode;
+    buttonClose?: RenderFunction;
 }
 /** Lifecycle callbacks */
 export interface Callbacks {
@@ -197,9 +208,9 @@ export interface ToolbarSettings {
     buttons: ("close" | React.ReactNode)[];
 }
 /** Lightbox component properties */
-export type ComponentProps = Omit<LightboxProps, "plugins">;
+export type ComponentProps = React.PropsWithChildren<Omit<LightboxProps, "plugins">>;
 /** Lightbox component */
-export type Component = React.ComponentType<React.PropsWithChildren<ComponentProps>>;
+export type Component = React.ComponentType<ComponentProps>;
 /** Lightbox module */
 export type Module = {
     /** module name */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "2.6.0",
+    "version": "2.6.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",