yet-another-react-lightbox 2.6.0 → 2.6.2

package/dist/plugins/thumbnails/Thumbnail.js

@@ -3,7 +3,7 @@ import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, clsx, createIcon, cssClass, cssVar,
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
 const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
-const renderThumbnail = ({ slide, render, rect, imageFit }) => {
+function renderThumbnail({ slide, render, rect, imageFit }) {
     var _a;
     const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
     if (customThumbnail) {
@@ -21,25 +21,27 @@ const renderThumbnail = ({ slide, render, rect, imageFit }) => {
         return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
-};
+}
 const activePrefix = makeComposePrefix("active");
 const fadeInPrefix = makeComposePrefix("fadein");
 const fadeOutPrefix = makeComposePrefix("fadeout");
 const placeholderPrefix = makeComposePrefix("placeholder");
 const DELAY = "delay";
 const DURATION = "duration";
-export const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
-        ...(fadeIn
-            ? {
-                [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
-                [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
-            }
-            : null),
-        ...(fadeOut
-            ? {
-                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
-                [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
-            }
-            : null),
-        ...style,
-    }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+export function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) {
+    return (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
+            ...(fadeIn
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
+                }
+                : null),
+            ...(fadeOut
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
+                }
+                : null),
+            ...style,
+        }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+}

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

@@ -1,3 +1,4 @@
-import { Component } from "../../types.js";
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
 /** Thumbnails plugin component */
-export declare const ThumbnailsComponent: Component;
+export declare function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }: ComponentProps): JSX.Element;

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -3,7 +3,7 @@ import { clsx, cssClass } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
 import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }) => {
+export function ThumbnailsComponent({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }) {
     const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
     const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
@@ -11,4 +11,4 @@ export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, carou
         (thumbnails.position === "start" || thumbnails.position === "top") && track,
         React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
         (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
-};
+}

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) => {
+import { devicePixelRatio, ImageSlide, isImageFitCover, useEventCallback, useLayoutEffect, } from "../../core/index.js";
+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;
@@ -9,7 +12,7 @@ export const ResponsiveImage = (props) => {
     const srcSet = image.srcSet.sort((a, b) => a.width - b.width);
     const width = (_a = image.width) !== null && _a !== void 0 ? _a : srcSet[srcSet.length - 1].width;
     const height = (_b = image.height) !== null && _b !== void 0 ? _b : srcSet[srcSet.length - 1].height;
-    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const cover = isImageFitCover(image, imageFit);
     const maxWidth = Math.max(...srcSet.map((x) => x.width));
     const targetWidth = Math.min((cover ? Math.max : Math.min)(rect.width, width * (rect.height / height)), maxWidth);
     const pixelDensity = devicePixelRatio();
@@ -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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, IMAGE_FIT_COVER, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ImageSlide, isImageFitCover, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
 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;
@@ -54,7 +56,7 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
     const { subscribeSensors, containerRef: controllerRef, containerRect: controllerRect } = useController();
     const { subscribe } = useEvents();
     const reduceMotion = useMotionPreference();
-    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, carousel.imageFit === IMAGE_FIT_COVER || ("imageFit" in slide && slide.imageFit === IMAGE_FIT_COVER), zoomProps.maxZoomPixelRatio, containerRect);
+    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, isImageSlide(slide) && isImageFitCover(slide, carousel.imageFit), zoomProps.maxZoomPixelRatio, containerRect);
     const maxZoom = slideRect.width ? Math.max(round(maxSlideRect.width / slideRect.width, 5), 1) : 1;
     const changeOffsets = useEventCallback((dx, dy, targetZoom) => {
         const newZoom = targetZoom || zoom;
@@ -296,13 +298,7 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
         handleZoomIn,
         handleZoomOut,
     ]);
-    const scaledRect = offset === 0
-        ? {
-            width: rect.width * zoom,
-            height: rect.height * zoom,
-        }
-        : rect;
-    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
     if (!rendered && isImageSlide(slide)) {
         const slideProps = {
             slide,
@@ -312,9 +308,9 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
             imageFit: carousel.imageFit,
             onClick: offset === 0 ? () => { var _a; return (_a = on.click) === null || _a === void 0 ? void 0 : _a.call(on, currentIndex); } : undefined,
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: scaledRect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
     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.2",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",