yet-another-react-lightbox - npm Package Compare versions

Comparing version 2.6.0 to 2.6.1

dist/core/components/Icons.d.ts

 import * as React from "react";
-export declare const createIcon: (name: string, glyph: React.ReactNode) => {
+export declare function createIcon(name: string, glyph: React.ReactNode): {
     (props: React.SVGProps<SVGSVGElement>): JSX.Element;
@@ -4,0 +4,0 @@ displayName: string;

dist/core/components/Icons.js

 import * as React from "react";
-export const createIcon = (name, glyph) => {
+export function createIcon(name, glyph) {
     const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props },
@@ -9,3 +9,3 @@ React.createElement("g", { fill: "currentColor" },
     return icon;
-};
+}
 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" }));
@@ -12,0 +12,0 @@ export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));

dist/core/components/ImageSlide.d.ts

@@ -13,2 +13,2 @@ import * as React from "react";
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;
+export declare function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }: ImageSlideProps): JSX.Element;

dist/core/components/ImageSlide.js

@@ -9,3 +9,3 @@ import * as React from "react";
 const slideImagePrefix = makeComposePrefix("slide_image");
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }) => {
+export function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -72,2 +72,2 @@ const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
                 ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
-};
+}

dist/core/contexts/Events.d.ts

@@ -16,2 +16,2 @@ import * as React from "react";
 export declare const useEvents: () => EventsContextType;
-export declare const EventsProvider: React.FC<React.PropsWithChildren>;
+export declare function EventsProvider({ children }: React.PropsWithChildren): JSX.Element;

dist/core/contexts/Events.js

@@ -5,3 +5,3 @@ import * as React from "react";
 export const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
-export const EventsProvider = ({ children }) => {
+export function EventsProvider({ children }) {
     const [subscriptions] = React.useState({});
@@ -30,2 +30,2 @@ React.useEffect(() => () => {
     return React.createElement(EventsContext.Provider, { value: context }, children);
-};
+}

dist/core/contexts/LightboxState.d.ts

@@ -18,7 +18,6 @@ import * as React from "react";
 };
-type LightboxStateProviderProps = React.PropsWithChildren<{
+export type LightboxStateProviderProps = React.PropsWithChildren<{
     slidesCount: number;
     initialIndex: number;
 }>;
-export declare const LightboxStateProvider: React.FC<LightboxStateProviderProps>;
-export {};
+export declare function LightboxStateProvider({ initialIndex, slidesCount, children }: LightboxStateProviderProps): JSX.Element;

dist/core/contexts/LightboxState.js

@@ -17,3 +17,3 @@ import * as React from "react";
 };
-export const LightboxStateProvider = ({ initialIndex, slidesCount, children, }) => {
+export function LightboxStateProvider({ initialIndex, slidesCount, children }) {
     const memoizedReducer = React.useMemo(() => reducer(slidesCount), [slidesCount]);
@@ -27,2 +27,2 @@ const [state, dispatch] = React.useReducer(memoizedReducer, {
     return React.createElement(LightboxStateContext.Provider, { value: context }, children);
-};
+}

dist/core/contexts/Timeouts.d.ts

@@ -7,2 +7,2 @@ import * as React from "react";
 export declare const useTimeouts: () => TimeoutsContextType;
-export declare const TimeoutsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+export declare function TimeoutsProvider({ children }: React.PropsWithChildren): JSX.Element;

dist/core/contexts/Timeouts.js

@@ -5,3 +5,3 @@ import * as React from "react";
 export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
-export const TimeoutsProvider = ({ children }) => {
+export function TimeoutsProvider({ children }) {
     const [timeouts] = React.useState([]);
@@ -33,2 +33,2 @@ React.useEffect(() => () => {
     return React.createElement(TimeoutsContext.Provider, { value: context }, children);
-};
+}

dist/core/hooks/useAnimation.d.ts

@@ -12,2 +12,2 @@ import * as React from "react";
 } | undefined;
-export declare const useAnimation: <T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>) => (currentSnapshot: T | undefined) => void;
+export declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>): (currentSnapshot: T | undefined) => void;

dist/core/hooks/useAnimation.js

 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useMotionPreference } from "./useMotionPreference.js";
-const currentTransformation = (node) => {
+function currentTransformation(node) {
     let x = 0;
@@ -23,4 +23,4 @@ let y = 0;
     return { x, y, z };
-};
-export const useAnimation = (nodeRef, computeAnimation) => {
+}
+export function useAnimation(nodeRef, computeAnimation) {
     const snapshot = React.useRef();
@@ -49,2 +49,2 @@ const animation = React.useRef();
     };
-};
+}

dist/core/hooks/useContainerRect.d.ts

 import * as React from "react";
 import { ContainerRect } from "../../types.js";
-export declare const useContainerRect: <T extends HTMLElement = HTMLElement>() => {
+export declare function useContainerRect<T extends HTMLElement = HTMLElement>(): {
     setContainerRef: (node: T | null) => void;
@@ -5,0 +5,0 @@ containerRef: React.MutableRefObject<T | null>;

dist/core/hooks/useContainerRect.js

 import * as React from "react";
-export const useContainerRect = () => {
+export function useContainerRect() {
     const [containerRect, setContainerRect] = React.useState();
@@ -36,2 +36,2 @@ const containerRef = React.useRef(null);
     }), [setContainerRef, containerRef, containerRect]);
-};
+}

dist/core/hooks/useDelay.d.ts

@@ -1,1 +0,1 @@
-export declare const useDelay: () => (callback: () => void, delay: number) => void;
+export declare function useDelay(): (callback: () => void, delay: number) => void;

dist/core/hooks/useDelay.js

 import * as React from "react";
 import { useTimeouts } from "../contexts/Timeouts.js";
-export const useDelay = () => {
+export function useDelay() {
     const timeoutId = React.useRef();
@@ -10,2 +10,2 @@ const { setTimeout, clearTimeout } = useTimeouts();
     }, [setTimeout, clearTimeout]);
-};
+}

dist/core/hooks/useEventCallback.d.ts

@@ -1,1 +0,1 @@
-export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;
+export declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

dist/core/hooks/useEventCallback.js

 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
-export const useEventCallback = (fn) => {
+export function useEventCallback(fn) {
     const ref = React.useRef(fn);
@@ -9,2 +9,2 @@ useLayoutEffect(() => {
     return React.useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
-};
+}

dist/core/hooks/useForkRef.d.ts

 import * as React from "react";
-export declare const setRef: <T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null) => void;
-export declare const useForkRef: <InstanceA, InstanceB>(refA: React.Ref<InstanceA> | undefined, refB: React.Ref<InstanceB> | undefined) => React.Ref<InstanceA & InstanceB>;
+export declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+export declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;

dist/core/hooks/useForkRef.js

 import * as React from "react";
-export const setRef = (ref, value) => {
+export function setRef(ref, value) {
     if (typeof ref === "function") {
@@ -9,8 +9,10 @@ ref(value);
     }
-};
-export const useForkRef = (refA, refB) => React.useMemo(() => refA == null && refB == null
-    ? null
-    : (refValue) => {
-        setRef(refA, refValue);
-        setRef(refB, refValue);
-    }, [refA, refB]);
+}
+export function useForkRef(refA, refB) {
+    return React.useMemo(() => refA == null && refB == null
+        ? null
+        : (refValue) => {
+            setRef(refA, refValue);
+            setRef(refB, refValue);
+        }, [refA, refB]);
+}

dist/core/hooks/useLoseFocus.d.ts

@@ -1,4 +0,4 @@
-export declare const useLoseFocus: (disabled?: boolean) => {
+export declare function useLoseFocus(disabled?: boolean): {
     onFocus: () => void;
     onBlur: () => void;
 };

dist/core/hooks/useLoseFocus.js

 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useController } from "../modules/Controller.js";
-export const useLoseFocus = (disabled = false) => {
+export function useLoseFocus(disabled = false) {
     const focused = React.useRef(disabled);
@@ -19,2 +19,2 @@ const { transferFocus } = useController();
     return { onFocus, onBlur };
-};
+}

dist/core/hooks/useMotionPreference.d.ts

@@ -1,1 +0,1 @@
-export declare const useMotionPreference: () => boolean;
+export declare function useMotionPreference(): boolean;

dist/core/hooks/useMotionPreference.js

 import * as React from "react";
-export const useMotionPreference = () => {
+export function useMotionPreference() {
     const [reduceMotion, setReduceMotion] = React.useState(false);
@@ -13,2 +13,2 @@ React.useEffect(() => {
     return reduceMotion;
-};
+}

dist/core/hooks/useRTL.d.ts

@@ -1,1 +0,1 @@
-export declare const useRTL: () => boolean;
+export declare function useRTL(): boolean;

dist/core/hooks/useRTL.js

 import * as React from "react";
 import { useLayoutEffect } from "./useLayoutEffect.js";
-export const useRTL = () => {
+export function useRTL() {
     const [isRTL, setIsRTL] = React.useState(false);
@@ -9,2 +9,2 @@ useLayoutEffect(() => {
     return isRTL;
-};
+}

dist/core/hooks/useSensors.d.ts

@@ -14,2 +14,2 @@ import * as React from "react";
 };
-export declare const useSensors: <T extends Element>() => UseSensors<T>;
+export declare function useSensors<T extends Element>(): UseSensors<T>;

dist/core/hooks/useSensors.js

 import * as React from "react";
 import { EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, } from "../consts.js";
-export const useSensors = () => {
+export function useSensors() {
     const [subscribers] = React.useState({});
@@ -38,2 +38,2 @@ return React.useMemo(() => {
     }, [subscribers]);
-};
+}

dist/core/hooks/useThrottle.d.ts

@@ -1,1 +0,1 @@
-export declare const useThrottle: (callback: (...args: any[]) => void, delay: number) => (...args: any[]) => void;
+export declare function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;

dist/core/hooks/useThrottle.js

 import * as React from "react";
 import { useDelay } from "./useDelay.js";
 import { useEventCallback } from "./useEventCallback.js";
-export const useThrottle = (callback, delay) => {
+export function useThrottle(callback, delay) {
     const lastCallbackTime = React.useRef(0);
@@ -16,2 +16,2 @@ const delayCallback = useDelay();
     }, [delay, executeCallback, delayCallback]);
-};
+}

dist/core/modules/Carousel.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-export declare const Carousel: Component;
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export declare function Carousel({ slides, carousel: { finite, preload, padding, spacing } }: ComponentProps): JSX.Element;
 export declare const CarouselModule: import("../../types.js").Module;

dist/core/modules/Carousel.js

 import * as React from "react";
 import { createModule } from "../config.js";
-import { useContainerRect } from "../hooks/index.js";
 import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseLengthPercentage } from "../utils.js";
@@ -10,10 +9,14 @@ import { ImageSlide } from "../components/index.js";
 import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, MODULE_CAROUSEL, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_CAROUSEL, value);
-const cssSlidePrefix = (value) => composePrefix("slide", value);
-const CarouselSlide = ({ slide, offset }) => {
-    const { setContainerRef, containerRect, containerRef } = useContainerRect();
+function cssPrefix(value) {
+    return composePrefix(MODULE_CAROUSEL, value);
+}
+function cssSlidePrefix(value) {
+    return composePrefix("slide", value);
+}
+function CarouselSlide({ slide, offset, rect }) {
+    const containerRef = React.useRef(null);
     const { publish } = useEvents();
     const { currentIndex } = useLightboxState().state;
     const { render, carousel: { imageFit }, on: { click: onClick }, } = useController().getLightboxProps();
-    const renderSlide = (rect) => {
+    const renderSlide = () => {
         var _a, _b, _c, _d;
@@ -40,10 +43,17 @@ let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
     };
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
-};
-const Placeholder = () => React.createElement("div", { className: cssClass("slide") });
-export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, renderSlide()));
+}
+function Placeholder() {
+    return React.createElement("div", { className: cssClass("slide") });
+}
+export function Carousel({ slides, carousel: { finite, preload, padding, spacing } }) {
     const { currentIndex, globalIndex } = useLightboxState().state;
-    const { setCarouselRef } = useController();
+    const { setCarouselRef, containerRect } = useController();
     const spacingValue = parseLengthPercentage(spacing);
     const paddingValue = parseLengthPercentage(padding);
+    const paddingPixels = paddingValue.percent !== undefined ? (containerRect.width / 100) * paddingValue.percent : paddingValue.pixel;
+    const rect = {
+        width: Math.max(containerRect.width - 2 * paddingPixels, 0),
+        height: Math.max(containerRect.height - 2 * paddingPixels, 0),
+    };
     const items = [];
@@ -53,8 +63,8 @@ if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            items.push(!finite || i >= 0 ? (React.createElement(CarouselSlide, { key: key, slide: slides[(i + preload * slides.length) % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], rect: rect, offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             const key = globalIndex + i - currentIndex;
-            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
+            items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], rect: rect, offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
@@ -69,3 +79,3 @@ }
         } }, items));
-};
+}
 export const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);

dist/core/modules/Controller.d.ts

 import * as React from "react";
-import { Component, ComponentProps, ContainerRect } from "../../types.js";
+import { ComponentProps, ContainerRect } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
@@ -27,3 +27,3 @@ import { LightboxStateAction } from "../contexts/index.js";
 export declare const useController: () => ControllerContextType;
-export declare const Controller: Component;
+export declare function Controller({ children, ...props }: ComponentProps): JSX.Element;
 export declare const ControllerModule: import("../../types.js").Module;

dist/core/modules/Controller.js

@@ -11,3 +11,3 @@ import * as React from "react";
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
-export const Controller = ({ children, ...props }) => {
+export function Controller({ children, ...props }) {
     const { carousel, slides, animation, controller, on, styles } = props;
@@ -180,3 +180,3 @@ const { state, dispatch } = useLightboxState();
         }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && React.createElement(ControllerContext.Provider, { value: context }, children)));
-};
+}
 export const ControllerModule = createModule(MODULE_CONTROLLER, Controller);

dist/core/modules/controller/usePointerSwipe.d.ts

 import { UseSensors } from "../../hooks/useSensors.js";
-export declare const usePointerSwipe: <T extends Element = Element>(subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;
+export declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;

dist/core/modules/controller/usePointerSwipe.js

@@ -5,3 +5,3 @@ import * as React from "react";
 import { EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, } from "../../consts.js";
-export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+export function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
     const offset = React.useRef(0);
@@ -73,2 +73,2 @@ const pointers = React.useRef([]);
     React.useEffect(() => cleanup(subscribeSensors(EVENT_ON_POINTER_DOWN, onPointerDown), subscribeSensors(EVENT_ON_POINTER_MOVE, onPointerMove), subscribeSensors(EVENT_ON_POINTER_UP, onPointerUp), subscribeSensors(EVENT_ON_POINTER_LEAVE, onPointerUp), subscribeSensors(EVENT_ON_POINTER_CANCEL, onPointerUp)), [subscribeSensors, onPointerDown, onPointerMove, onPointerUp]);
-};
+}

dist/core/modules/controller/usePreventSwipeNavigation.d.ts

 /** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
  * this has to be done via non-passive native event handler */
-export declare const usePreventSwipeNavigation: <T extends HTMLElement = HTMLElement>() => (node: T | null) => void;
+export declare function usePreventSwipeNavigation<T extends HTMLElement = HTMLElement>(): (node: T | null) => void;

dist/core/modules/controller/usePreventSwipeNavigation.js

 import * as React from "react";
 const WHEEL = "wheel";
-const preventDefault = (event) => {
+function preventDefault(event) {
     if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.ctrlKey) {
         event.preventDefault();
     }
-};
-export const usePreventSwipeNavigation = () => {
+}
+export function usePreventSwipeNavigation() {
     const ref = React.useRef(null);
@@ -20,2 +20,2 @@ return React.useCallback((node) => {
     }, []);
-};
+}

dist/core/modules/controller/useWheelSwipe.d.ts

 import { UseSensors } from "../../hooks/index.js";
 import { SwipeState } from "./index.js";
-export declare const useWheelSwipe: <T extends Element = Element>(swipeState: SwipeState, subscribeSensors: import("../../hooks/useSensors.js").SubscribeSensors<T>, isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void) => void;
+export declare function useWheelSwipe<T extends Element = Element>(swipeState: SwipeState, subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;

dist/core/modules/controller/useWheelSwipe.js

@@ -6,3 +6,3 @@ import * as React from "react";
 import { EVENT_ON_WHEEL } from "../../consts.js";
-export const useWheelSwipe = (swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) => {
+export function useWheelSwipe(swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
     const offset = React.useRef(0);
@@ -93,2 +93,2 @@ const intent = React.useRef(0);
     React.useEffect(() => subscribeSensors(EVENT_ON_WHEEL, onWheel), [subscribeSensors, onWheel]);
-};
+}

dist/core/modules/Core.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-export declare const Core: Component;
+/// <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;

dist/core/modules/Core.js

@@ -5,5 +5,7 @@ import * as React from "react";
 import { MODULE_CORE } from "../consts.js";
-export const Core = ({ slides, index, children }) => (React.createElement(TimeoutsProvider, null,
-    React.createElement(EventsProvider, null,
-        React.createElement(LightboxStateProvider, { slidesCount: slides.length, initialIndex: index }, children))));
+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);

dist/core/modules/Navigation.d.ts

 import * as React from "react";
-import { Component, Labels } from "../../types.js";
+import { ComponentProps, Labels } from "../../types.js";
 export type NavigationButtonProps = {
@@ -12,4 +12,4 @@ labels?: Labels;
 };
-export declare const NavigationButton: ({ labels, label, icon, renderIcon, action, onClick, disabled, }: NavigationButtonProps) => JSX.Element;
-export declare const Navigation: Component;
+export declare function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }: NavigationButtonProps): JSX.Element;
+export declare function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
 export declare const NavigationModule: import("../../types.js").Module;

dist/core/modules/Navigation.js

 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, label as translateLabel, getNavigationAnimationDuration } from "../utils.js";
+import { cssClass, getNavigationAnimationDuration, label as translateLabel } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
@@ -9,4 +9,6 @@ import { useEvents, useLightboxState } from "../contexts/index.js";
 import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
-export const NavigationButton = ({ labels, label, icon, renderIcon, action, onClick, disabled, }) => (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
-export const Navigation = ({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
+export function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }) {
+    return (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
+}
+export function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
     const { currentIndex } = useLightboxState().state;
@@ -31,3 +33,3 @@ const { subscribeSensors } = useController();
         buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, onClick: () => publish(ACTION_NEXT) }))));
-};
+}
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

dist/core/modules/NoScroll.d.ts

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

dist/core/modules/NoScroll.js

@@ -8,4 +8,6 @@ import * as React from "react";
 const noScrollPadding = cssClass(CLASS_NO_SCROLL_PADDING);
-const isHTMLElement = (element) => "style" in element;
-const padScrollbar = (element, padding, rtl) => {
+function isHTMLElement(element) {
+    return "style" in element;
+}
+function padScrollbar(element, padding, rtl) {
     const styles = window.getComputedStyle(element);
@@ -24,4 +26,4 @@ const property = rtl ? "padding-left" : "padding-right";
     };
-};
-export const NoScroll = ({ children }) => {
+}
+export function NoScroll({ children }) {
     const rtl = useRTL();
@@ -51,3 +53,3 @@ useLayoutEffect(() => {
     return React.createElement(React.Fragment, null, children);
-};
+}
 export const NoScrollModule = createModule(MODULE_NO_SCROLL, NoScroll);

dist/core/modules/Portal.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-export declare const Portal: Component;
+import * as React from "react";
+import { ComponentProps } from "../../types.js";
+export declare function Portal({ children, animation, styles, className, on, close }: ComponentProps): React.ReactPortal | null;
 export declare const PortalModule: import("../../types.js").Module;

dist/core/modules/Portal.js

@@ -9,4 +9,6 @@ import * as React from "react";
 import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_PORTAL, value);
-const setAttribute = (element, attribute, value) => {
+function cssPrefix(value) {
+    return composePrefix(MODULE_PORTAL, value);
+}
+function setAttribute(element, attribute, value) {
     const previousValue = element.getAttribute(attribute);
@@ -22,4 +24,4 @@ element.setAttribute(attribute, value);
     };
-};
-export const Portal = ({ children, animation, styles, className, on, close }) => {
+}
+export function Portal({ children, animation, styles, className, on, close }) {
     const [mounted, setMounted] = React.useState(false);
@@ -90,3 +92,3 @@ const [visible, setVisible] = React.useState(false);
         : null;
-};
+}
 export const PortalModule = createModule(MODULE_PORTAL, Portal);

dist/core/modules/Toolbar.d.ts

@@ -1,2 +0,3 @@
-import { Component } from "../../types.js";
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
 import { YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
@@ -8,3 +9,3 @@ declare module "../" {
 }
-export declare const Toolbar: Component;
+export declare function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
 export declare const ToolbarModule: import("../../types.js").Module;

dist/core/modules/Toolbar.js

@@ -8,4 +8,6 @@ import * as React from "react";
 import { ACTION_CLOSE, MODULE_TOOLBAR, YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
-const cssPrefix = (value) => composePrefix(MODULE_TOOLBAR, value);
-export const Toolbar = ({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) => {
+function cssPrefix(value) {
+    return composePrefix(MODULE_TOOLBAR, value);
+}
+export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) {
     const { publish } = useEvents();
@@ -20,3 +22,3 @@ const { setContainerRef, containerRect } = useContainerRect();
     return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
-};
+}
 export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

dist/core/utils.js

@@ -40,5 +40,3 @@ import * as React from "react";
 };
-export const devicePixelRatio = () => {
-    return (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
-};
+export const devicePixelRatio = () => (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
 export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
@@ -50,4 +48,2 @@ export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];
 export const getSwipeAnimationDuration = (animation) => getAnimationDuration(animation.swipe, AnimationDefaultProps.swipe);
-export const getNavigationAnimationDuration = (animation) => {
-    return getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));
-};
+export const getNavigationAnimationDuration = (animation) => getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));

dist/Lightbox.d.ts

@@ -1,4 +0,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxExternalProps } from "./types.js";
 /** Lightbox component */
-export declare const Lightbox: React.FC<LightboxExternalProps>;
+export declare function Lightbox(props: LightboxExternalProps): JSX.Element | null;

dist/Lightbox.js

 import * as React from "react";
 import { LightboxDefaultProps } from "./props.js";
 import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
-const renderNode = (node, props) => {
+function renderNode(node, props) {
     var _a;
     return React.createElement(node.module.component, { key: node.module.name, ...props }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderNode(child, props)));
-};
-const fixupIndex = ({ index, slides, ...rest }) => ({
-    index: index >= 0 && index < slides.length ? index : 0,
-    slides,
-    ...rest,
-});
-export const Lightbox = (props) => {
+}
+function fixupIndex({ index, slides, ...rest }) {
+    return {
+        index: index >= 0 && index < slides.length ? index : 0,
+        slides,
+        ...rest,
+    };
+}
+export function Lightbox(props) {
     const { carousel, animation, render, toolbar, controller, on, plugins, ...restProps } = props;
@@ -40,2 +42,2 @@ const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
-};
+}

dist/plugins/captions/CaptionsContext.d.ts

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

dist/plugins/captions/CaptionsContext.js

@@ -5,3 +5,3 @@ import * as React from "react";
 export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-export const CaptionsContextProvider = ({ children }) => {
+export function CaptionsContextProvider({ children }) {
     const { subscribe } = useEvents();
@@ -12,2 +12,2 @@ const [toolbarWidth, setToolbarWidth] = React.useState();
     return React.createElement(CaptionsContext.Provider, { value: context }, children);
-};
+}

dist/plugins/captions/Description.d.ts

@@ -1,5 +0,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps, Slide } from "../../types.js";
-type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
-export declare const Description: React.FC<DescriptionProps>;
-export {};
+export type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
+export declare function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }: DescriptionProps): JSX.Element;

dist/plugins/captions/Description.js

@@ -5,14 +5,18 @@ import * as React from "react";
 import { cssPrefix } from "./utils.js";
-export const Description = ({ description, descriptionTextAlign, descriptionMaxLines, styles, }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
-    React.createElement("div", { className: cssPrefix("description"), style: {
-            ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
-                descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
-                ? {
-                    [cssVar("slide_description_text_align")]: descriptionTextAlign,
-                    [cssVar("slide_description_max_lines")]: descriptionMaxLines,
-                }
-                : null),
-            ...styles.captionsDescription,
-        } }, typeof description === "string"
-        ? description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
-        : description)));
+export function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }) {
+    return (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+        React.createElement("div", { className: cssPrefix("description"), style: {
+                ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||
+                    descriptionMaxLines !== defaultCaptionsProps.descriptionMaxLines
+                    ? {
+                        [cssVar("slide_description_text_align")]: descriptionTextAlign,
+                        [cssVar("slide_description_max_lines")]: descriptionMaxLines,
+                    }
+                    : null),
+                ...styles.captionsDescription,
+            } }, typeof description === "string"
+            ? description
+                .split("\n")
+                .flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
+            : description)));
+}

dist/plugins/captions/Title.d.ts

@@ -1,5 +0,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { LightboxProps, Slide } from "../../types.js";
-type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
-export declare const Title: React.FC<TitleProps>;
-export {};
+export type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
+export declare function Title({ title, styles }: TitleProps): JSX.Element;

dist/plugins/captions/Title.js

@@ -5,6 +5,6 @@ import * as React from "react";
 import { cssPrefix } from "./utils.js";
-export const Title = ({ title, styles }) => {
+export function Title({ title, styles }) {
     const { toolbarWidth } = useCaptions();
     return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
         React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
-};
+}

dist/plugins/captions/utils.d.ts

@@ -1,1 +0,1 @@
-export declare const cssPrefix: (className: string) => string;
+export declare function cssPrefix(className: string): string;

dist/plugins/captions/utils.js

 import { cssClass } from "../../core/index.js";
-export const cssPrefix = (className) => cssClass(`slide_${className}`);
+export function cssPrefix(className) {
+    return cssClass(`slide_${className}`);
+}

dist/plugins/fullscreen/FullscreenButton.d.ts

@@ -1,3 +0,3 @@
-import * as React from "react";
+/// <reference types="react" />
 /** Fullscreen button */
-export declare const FullscreenButton: React.FC;
+export declare function FullscreenButton(): JSX.Element | null;

dist/plugins/fullscreen/FullscreenButton.js

@@ -6,3 +6,3 @@ import * as React from "react";
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
-export const FullscreenButton = () => {
+export function FullscreenButton() {
     var _a;
@@ -14,2 +14,2 @@ const { labels, render } = useController().getLightboxProps();
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, fullscreenEnabled, toggleFullscreen }))) : (React.createElement(IconButton, { disabled: !fullscreenEnabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
-};
+}

dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-type FullscreenContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type FullscreenContextType = {
     fullscreen: boolean;
@@ -8,3 +9,2 @@ fullscreenEnabled?: boolean;
 export declare const useFullscreen: () => FullscreenContextType;
-export declare const FullscreenContextProvider: Component;
-export {};
+export declare function FullscreenContextProvider({ fullscreen: auto, children }: ComponentProps): JSX.Element;

dist/plugins/fullscreen/FullscreenContext.js

@@ -5,3 +5,3 @@ import * as React from "react";
 export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-export const FullscreenContextProvider = ({ fullscreen: auto, children }) => {
+export function FullscreenContextProvider({ fullscreen: auto, children }) {
     const containerRef = React.useRef(null);
@@ -104,2 +104,2 @@ const [fullscreen, setFullscreen] = React.useState(false);
         React.createElement(FullscreenContext.Provider, { value: context }, children)));
-};
+}

dist/plugins/fullscreen/index.d.ts

@@ -1,2 +0,1 @@
-import * as React from "react";
 import { Fullscreen } from "./Fullscreen.js";
@@ -8,13 +7,15 @@ declare module "../../types" {
     }
+    /** `render.buttonFullscreen` render function props */
+    type RenderFullscreenButtonProps = {
+        fullscreen: boolean;
+        fullscreenEnabled: boolean | undefined;
+        toggleFullscreen: () => void;
+    };
     interface Render {
         /** render custom Enter/Exit Fullscreen button */
-        buttonFullscreen?: ({ fullscreen, fullscreenEnabled, toggleFullscreen, }: {
-            fullscreen: boolean;
-            fullscreenEnabled: boolean | undefined;
-            toggleFullscreen: () => void;
-        }) => React.ReactNode;
+        buttonFullscreen?: RenderFunction<RenderFullscreenButtonProps>;
         /** render custom Enter Fullscreen icon */
-        iconEnterFullscreen?: () => React.ReactNode;
+        iconEnterFullscreen?: RenderFunction;
         /** render custom Exit Fullscreen icon */
-        iconExitFullscreen?: () => React.ReactNode;
+        iconExitFullscreen?: RenderFunction;
     }
@@ -21,0 +22,0 @@ }

dist/plugins/inline/Inline.js

 import * as React from "react";
 import { ACTION_CLOSE, clsx, createModule, cssClass, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE, } from "../../core/index.js";
-const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
+function InlineContainer({ inline: { className, ...rest } = {}, children }) {
+    return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
+}
 export const Inline = ({ augment, replace, remove }) => {
@@ -5,0 +7,0 @@ augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({

dist/plugins/slideshow/index.d.ts

@@ -1,2 +0,1 @@
-import * as React from "react";
 import { Slideshow } from "./Slideshow.js";
@@ -13,18 +12,20 @@ declare module "../../types" {
     }
+    /** `render.buttonSlideshow` render function props */
+    type RenderSlideshowButtonProps = {
+        /** current slideshow autoplay status */
+        playing: boolean;
+        /** toggle slideshow autoplay status */
+        togglePlaying: () => void;
+        /** if `true`, the button is disabled */
+        disabled: boolean;
+    };
     interface Render {
         /** render custom Slideshow Play icon */
-        iconSlideshowPlay?: () => React.ReactNode;
+        iconSlideshowPlay?: RenderFunction;
         /** render custom Slideshow Pause icon */
-        iconSlideshowPause?: () => React.ReactNode;
+        iconSlideshowPause?: RenderFunction;
         /** render custom Slideshow button */
-        buttonSlideshow?: ({ playing, togglePlaying, disabled, }: {
-            /** current slideshow autoplay status */
-            playing: boolean;
-            /** toggle slideshow autoplay status */
-            togglePlaying: () => void;
-            /** if `true`, the button is disabled */
-            disabled: boolean;
-        }) => React.ReactNode;
+        buttonSlideshow?: RenderFunction<RenderSlideshowButtonProps>;
     }
 }
 export default Slideshow;

dist/plugins/slideshow/SlideshowButton.d.ts

@@ -1,2 +0,2 @@
-import * as React from "react";
-export declare const SlideshowButton: React.FC;
+/// <reference types="react" />
+export declare function SlideshowButton(): JSX.Element;

dist/plugins/slideshow/SlideshowButton.js

@@ -6,3 +6,3 @@ import * as React from "react";
 const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
-export const SlideshowButton = () => {
+export function SlideshowButton() {
     const { playing, disabled, togglePlaying } = useSlideshow();
@@ -13,2 +13,2 @@ const { getLightboxProps } = useController();
     return render.buttonSlideshow ? (React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, togglePlaying, disabled }))) : (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: togglePlaying, disabled: disabled, ...focusListeners }));
-};
+}

dist/plugins/slideshow/SlideshowContext.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-type SlideshowContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type SlideshowContextType = {
     playing: boolean;
@@ -8,3 +9,2 @@ disabled: boolean;
 export declare const useSlideshow: () => SlideshowContextType;
-export declare const SlideshowContextProvider: Component;
-export {};
+export declare function SlideshowContextProvider({ slides, slideshow, carousel: { finite }, children }: ComponentProps): JSX.Element;

dist/plugins/slideshow/SlideshowContext.js

@@ -6,3 +6,3 @@ import * as React from "react";
 export const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
-export const SlideshowContextProvider = ({ slides, slideshow, carousel: { finite }, children }) => {
+export function SlideshowContextProvider({ slides, slideshow, carousel: { finite }, children }) {
     const { autoplay, delay } = { ...defaultSlideshowProps, ...slideshow };
@@ -59,2 +59,2 @@ const [playing, setPlaying] = React.useState(autoplay);
     return React.createElement(SlideshowContext.Provider, { value: context }, children);
-};
+}

dist/plugins/thumbnails/index.d.ts

@@ -1,2 +0,1 @@
-import * as React from "react";
 import { Thumbnails } from "./Thumbnails.js";
@@ -28,9 +27,12 @@ type Position = "top" | "bottom" | "start" | "end";
     }
+    /** `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>;
     }
@@ -37,0 +39,0 @@ interface SlotType {

dist/plugins/thumbnails/Thumbnail.d.ts

 import * as React from "react";
 import { ContainerRect, ImageFit, LightboxProps, Slide } from "../../types.js";
-type FadeSettings = {
+export type FadeSettings = {
     duration: number;
     delay: number;
 };
-type ThumbnailProps = {
+export type ThumbnailProps = {
     rect: ContainerRect;
@@ -19,3 +19,2 @@ slide: Slide | null;
 };
-export declare const Thumbnail: React.FC<ThumbnailProps>;
-export {};
+export declare function Thumbnail({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }: ThumbnailProps): JSX.Element;

dist/plugins/thumbnails/Thumbnail.js

@@ -6,3 +6,3 @@ import * as React from "react";
 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;
@@ -25,3 +25,3 @@ const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
-};
+}
 const activePrefix = makeComposePrefix("active");
@@ -33,16 +33,18 @@ const fadeInPrefix = makeComposePrefix("fadein");
 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 })));
+}

dist/plugins/thumbnails/ThumbnailsContainer.d.ts

@@ -1,3 +0,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;

dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -6,3 +6,3 @@ import * as React from "react";
 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 };
@@ -15,2 +15,2 @@ const ref = React.useRef(null);
         (thumbnails.position === "end" || thumbnails.position === "bottom") && track));
-};
+}

dist/plugins/thumbnails/ThumbnailsTrack.d.ts

 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>;
@@ -9,3 +9,2 @@ thumbnails: ThumbnailsInternal;
 };
-export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;
-export {};
+export declare function ThumbnailsTrack({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }: ThumbnailsTrackProps): JSX.Element;

dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -6,5 +6,9 @@ import * as React from "react";
 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);
@@ -133,2 +137,2 @@ const { globalIndex, animation } = useLightboxState().state;
         vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
-};
+}

dist/plugins/video/VideoSlide.d.ts

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

dist/plugins/video/VideoSlide.js

 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();
@@ -70,2 +70,2 @@ const { setContainerRef, containerRect } = useContainerRect();
         } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
-};
+}

dist/plugins/zoom/index.d.ts

 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" {
@@ -42,11 +33,19 @@ interface LightboxProps {
     }
+    /** `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;
     }
@@ -53,0 +52,0 @@ interface Callbacks {

dist/plugins/zoom/ResponsiveImage.d.ts

@@ -1,12 +0,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;

dist/plugins/zoom/ResponsiveImage.js

 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;
@@ -47,2 +50,2 @@ const [state, setState] = React.useState({});
         current && (React.createElement(ImageSlide, { key: "current", ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
-};
+}

dist/plugins/zoom/ZoomButtonsGroup.d.ts

@@ -1,5 +0,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 {};

dist/plugins/zoom/ZoomButtonsGroup.js

@@ -5,3 +5,3 @@ import * as React from "react";
 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);
@@ -24,2 +24,2 @@ const zoomOutRef = React.useRef(null);
         React.createElement(ZoomButton, { ref: zoomOutRef, key: ACTION_ZOOM_OUT, labels: labels, render: render, onLoseFocus: focusZoomIn })));
-};
+}

dist/plugins/zoom/ZoomContainer.d.ts

@@ -1,8 +0,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;

dist/plugins/zoom/ZoomContainer.js

@@ -7,3 +7,3 @@ import * as React from "react";
 import { isResponsiveImageSlide, ResponsiveImage } from "./ResponsiveImage.js";
-const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+function getSlideRects(slide, cover, maxZoomPixelRatio, rect) {
     var _a, _b;
@@ -38,5 +38,7 @@ let slideRect = { width: 0, height: 0 };
     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;
@@ -322,2 +324,2 @@ const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
             : null) }, rendered)) : null;
-};
+}

dist/plugins/zoom/ZoomContext.d.ts

@@ -1,3 +0,4 @@
-import { Component } from "../../types.js";
-type ZoomContextType = {
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export type ZoomContextType = {
     isMinZoom: boolean;
@@ -10,3 +11,2 @@ isMaxZoom: boolean;
 export declare const useZoom: () => ZoomContextType;
-export declare const ZoomContextProvider: Component;
-export {};
+export declare function ZoomContextProvider({ slides, children }: ComponentProps): JSX.Element;

dist/plugins/zoom/ZoomContext.js

@@ -5,3 +5,3 @@ import * as React from "react";
 export const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
-export const ZoomContextProvider = ({ slides, children }) => {
+export function ZoomContextProvider({ slides, children }) {
     const [isMinZoom, setIsMinZoom] = React.useState(false);
@@ -21,2 +21,2 @@ const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     return React.createElement(ZoomContext.Provider, { value: context }, children);
-};
+}

dist/types.d.ts

@@ -108,34 +108,45 @@ import * as React from "react";
 }
+/** Render function */
+export type RenderFunction<T = void> = (props: T) => React.ReactNode;
+/** `render.slide` render function props */
+export type RenderSlideProps = [
+    /** slide */
+    slide: Slide,
+    /** slide offset (`0` - current slide, `1` - next slide, `-1` - previous slide, etc.) */
+    offset: number,
+    /** container rect */
+    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?: (
-    /** slide */
-    slide: Slide, 
-    /** slide offset (`0` - current slide, `1` - next slide, `-1` - previous slide, etc.) */
-    offset: number, 
-    /** container rect */
-    rect: ContainerRect) => React.ReactNode;
+    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;
 }
@@ -201,5 +212,5 @@ /** Lifecycle callbacks */
 /** 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 */
@@ -206,0 +217,0 @@ export type Module = {

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "2.6.0",
+    "version": "2.6.1",
     "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

README.md

@@ -52,3 +52,3 @@ # Yet Another React Lightbox
 
-const App = () => {
+export default function App() {
   const [open, setOpen] = React.useState(false);
@@ -73,5 +73,3 @@
   );
-};
-
-export default App;
+}
 ```
@@ -91,3 +89,3 @@
 
-const App = () => {
+export default function App() {
   const [open, setOpen] = React.useState(false);
@@ -123,5 +121,3 @@
   );
-};
-
-export default App;
+}
 ```
@@ -128,0 +124,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

193085

increased by1.39%

Lines of code

4044

increased by1.3%

Worsened metrics

Number of lines in readme file

142

decreased by-2.74%

No dependency changes