yet-another-react-lightbox 3.5.2 → 3.5.4

package/dist/Lightbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { LightboxExternalProps } from "./types.js";
 /** Lightbox component */
-export declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): JSX.Element | null;
+export declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;

package/dist/core/components/Icons.d.ts

@@ -1,29 +1,29 @@
 import * as React from "react";
 export declare function createIcon(name: string, glyph: React.ReactNode): {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare function createIconDisabled(name: string, glyph: React.ReactNode): {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare const CloseIcon: {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare const PreviousIcon: {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare const NextIcon: {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare const LoadingIcon: {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };
 export declare const ErrorIcon: {
-    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
     displayName: string;
 };

package/dist/core/components/ImageSlide.d.ts

@@ -10,4 +10,4 @@ export type ImageSlideProps = {
     onLoad?: (image: HTMLImageElement) => void;
     style?: React.CSSProperties;
 };
-export declare function 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): React.JSX.Element;

package/dist/core/contexts/Events.d.ts

@@ -14,4 +14,4 @@ export type EventsContextType = {
 };
 export declare const EventsContext: React.Context<EventsContextType | null>;
 export declare const useEvents: () => EventsContextType;
-export declare function EventsProvider({ children }: React.PropsWithChildren): JSX.Element;
+export declare function EventsProvider({ children }: React.PropsWithChildren): React.JSX.Element;

package/dist/core/contexts/LightboxProps.d.ts

@@ -3,4 +3,4 @@ import { ComponentProps } from "../../types.js";
 export type LightboxPropsContextType = Omit<ComponentProps, "children">;
 export declare const LightboxPropsContext: React.Context<LightboxPropsContextType | null>;
 export declare const useLightboxProps: () => LightboxPropsContextType;
-export declare function LightboxPropsProvider({ children, ...props }: ComponentProps): JSX.Element;
+export declare function LightboxPropsProvider({ children, ...props }: ComponentProps): React.JSX.Element;

package/dist/core/contexts/LightboxState.d.ts

@@ -24,4 +24,4 @@ export type LightboxDispatchContextType = React.Dispatch<LightboxStateAction>;
 export declare const LightboxDispatchContext: React.Context<LightboxDispatchContextType | null>;
 export declare const useLightboxDispatch: () => LightboxDispatchContextType;
 export type LightboxStateProviderProps = React.PropsWithChildren<Pick<LightboxProps, "slides" | "index">>;
-export declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): JSX.Element;
+export declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): React.JSX.Element;

package/dist/core/contexts/Timeouts.d.ts

@@ -5,4 +5,4 @@ export type TimeoutsContextType = {
 };
 export declare const TimeoutsContext: React.Context<TimeoutsContextType | null>;
 export declare const useTimeouts: () => TimeoutsContextType;
-export declare function TimeoutsProvider({ children }: React.PropsWithChildren): JSX.Element;
+export declare function TimeoutsProvider({ children }: React.PropsWithChildren): React.JSX.Element;

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

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

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

@@ -27,5 +27,5 @@ export type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close
 };
 export declare const ControllerContext: React.Context<ControllerContextType | null>;
 export declare const useController: () => NonNullable<ControllerContextType>;
-export declare function Controller({ children, ...props }: ComponentProps): JSX.Element;
+export declare function Controller({ children, ...props }: ComponentProps): React.JSX.Element;
 export declare const ControllerModule: import("../../types.js").Module;

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

@@ -8,6 +8,6 @@ export type NavigationButtonProps = {
     onClick: () => void;
     disabled?: boolean;
 };
-export declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): JSX.Element;
-export declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
+export declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): React.JSX.Element;
+export declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): React.JSX.Element;
 export declare const NavigationModule: import("../../types.js").Module;

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComponentProps } from "../../types.js";
-export declare function Root({ children }: ComponentProps): JSX.Element;
+export declare function Root({ children }: ComponentProps): React.JSX.Element;
 export declare const RootModule: import("../../types.js").Module;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComponentProps } from "../../types.js";
-export declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
+export declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): React.JSX.Element;
 export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useLayoutEffect } from "../hooks/index.js";
-import { composePrefix, cssClass } from "../utils.js";
+import { composePrefix, cssClass, stopNavigationEventsPropagation } from "../utils.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
 import { useController } from "./Controller.js";
@@ -20,6 +20,6 @@ export function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose
             return buttonClose();
         return React.createElement(IconButton, { key: ACTION_CLOSE, label: "Close", icon: CloseIcon, renderIcon: iconClose, onClick: close });
     };
-    return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
+    return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()), ...stopNavigationEventsPropagation() }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
 }
 export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

package/dist/core/utils.d.ts

@@ -29,3 +29,8 @@ export declare const hasSlides: (slides: Slide[]) => slides is [Slide, ...Slide[
 export declare const getSlide: (slides: [Slide, ...Slide[]], index: number) => Slide;
 export declare const getSlideIfPresent: (slides: Slide[], index: number) => Slide | undefined;
 export declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
+export declare function stopNavigationEventsPropagation(): {
+    onPointerDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+    onKeyDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+    onWheel: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+};

package/dist/core/utils.js

@@ -62,3 +62,9 @@ export function addToolbarButton(toolbar, key, button) {
     }
     return { buttons: [buttonWithKey, ...buttons], ...restToolbar };
 }
+export function stopNavigationEventsPropagation() {
+    const stopPropagation = (event) => {
+        event.stopPropagation();
+    };
+    return { onPointerDown: stopPropagation, onKeyDown: stopPropagation, onWheel: stopPropagation };
+}

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

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

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

@@ -2,4 +2,4 @@ import * as React from "react";
 import { CaptionsRef, ComponentProps } from "../../types.js";
 export declare const CaptionsContext: React.Context<CaptionsRef | null>;
 export declare const useCaptions: () => CaptionsRef;
-export declare function CaptionsContextProvider({ captions, children }: ComponentProps): JSX.Element;
+export declare function CaptionsContextProvider({ captions, children }: ComponentProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { Slide } from "../../types.js";
 export type DescriptionProps = Pick<Slide, "description">;
-export declare function Description({ description }: DescriptionProps): JSX.Element | null;
+export declare function Description({ description }: DescriptionProps): React.JSX.Element | null;

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

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

package/dist/plugins/counter/Counter.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComponentProps, PluginProps } from "../../types.js";
-export declare function CounterComponent({ counter: { className, ...rest } }: ComponentProps): JSX.Element | null;
+export declare function CounterComponent({ counter: { className, ...rest } }: ComponentProps): React.JSX.Element | null;
 /** Counter plugin */
 export declare function Counter({ addChild }: PluginProps): void;

package/dist/plugins/download/DownloadButton.d.ts

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

package/dist/plugins/fullscreen/FullscreenButton.d.ts

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

package/dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 import { ComponentProps, FullscreenRef } from "../../types.js";
 export declare const FullscreenContext: React.Context<FullscreenRef | null>;
 export declare const useFullscreen: () => FullscreenRef;
-export declare function FullscreenContextProvider({ fullscreen: fullscreenProps, children }: ComponentProps): JSX.Element;
+export declare function FullscreenContextProvider({ fullscreen: fullscreenProps, children }: ComponentProps): React.JSX.Element;

package/dist/plugins/inline/InlineContainer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ComponentProps } from "../../types.js";
 /** Inline plugin container */
-export declare function InlineContainer({ inline: { className, ...rest }, children }: ComponentProps): JSX.Element;
+export declare function InlineContainer({ inline: { className, ...rest }, children }: ComponentProps): React.JSX.Element;

package/dist/plugins/slideshow/SlideshowButton.d.ts

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

package/dist/plugins/slideshow/SlideshowContext.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 import { ComponentProps, SlideshowRef } from "../../types.js";
 export declare const SlideshowContext: React.Context<SlideshowRef | null>;
 export declare const useSlideshow: () => SlideshowRef;
-export declare function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }: ComponentProps): JSX.Element;
+export declare function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }: ComponentProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { Slide } from "../../types.js";
 export type FadeSettings = {
     duration: number;
@@ -12,4 +12,4 @@ export type ThumbnailProps = {
     fadeOut?: FadeSettings;
     placeholder: boolean;
 };
-export declare function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }: ThumbnailProps): JSX.Element;
+export declare function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }: ThumbnailProps): React.JSX.Element;

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

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

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

@@ -3,4 +3,4 @@ import { ComponentProps, ThumbnailsRef } from "../../types.js";
 export declare const ThumbnailsContext: React.Context<ThumbnailsRef | null>;
 export declare const useThumbnails: () => ThumbnailsRef;
 /** Thumbnails plugin component */
-export declare function ThumbnailsContextProvider({ children, ...props }: ComponentProps): JSX.Element;
+export declare function ThumbnailsContextProvider({ children, ...props }: ComponentProps): React.JSX.Element;

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

@@ -2,4 +2,4 @@ import * as React from "react";
 export type ThumbnailsTrackProps = {
     containerRef: React.RefObject<HTMLDivElement>;
 };
-export declare function ThumbnailsTrack({ containerRef }: ThumbnailsTrackProps): JSX.Element;
+export declare function ThumbnailsTrack({ containerRef }: ThumbnailsTrackProps): React.JSX.Element;

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

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

package/dist/plugins/video/VideoSlide.js

@@ -30,16 +30,20 @@ export function VideoSlide({ slide, offset }) {
     }, [handleVideoRef]);
     const { width, height, poster, sources } = slide;
     const scaleWidthAndHeight = () => {
-        if (!width || !height || !containerRect)
-            return null;
-        const widthBound = width / height > containerRect.width / containerRect.height;
-        const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
-        const elementHeight = !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height);
-        return {
-            width: elementWidth,
-            height: elementHeight,
-            style: { width: elementWidth, height: elementHeight, maxWidth: "100%", maxHeight: "100%" },
-        };
+        const scalingProps = {};
+        scalingProps.style = { maxWidth: "100%", maxHeight: "100%" };
+        if (width && height && containerRect) {
+            const widthBound = width / height > containerRect.width / containerRect.height;
+            const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
+            const elementHeight = !widthBound
+                ? containerRect.height
+                : Math.round((containerRect.width / width) * height);
+            scalingProps.width = elementWidth;
+            scalingProps.height = elementHeight;
+            scalingProps.style.width = elementWidth;
+            scalingProps.style.height = elementHeight;
+        }
+        return scalingProps;
     };
     const resolveBoolean = (attr) => {
         if (slide[attr] === false)

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

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

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

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

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

@@ -9,4 +9,4 @@ export type ZoomControllerContextType = ZoomRef & {
 };
 export declare const ZoomControllerContext: React.Context<ZoomControllerContextType | null>;
 export declare const useZoom: () => NonNullable<ZoomControllerContextType>;
-export declare function ZoomContextProvider({ children }: ComponentProps): JSX.Element;
+export declare function ZoomContextProvider({ children }: ComponentProps): React.JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import { LightboxProps, RenderSlideProps } from "../../types.js";
 export type ZoomWrapperProps = Pick<LightboxProps, "render"> & RenderSlideProps;
 /** Zoom wrapper */
-export declare function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps): JSX.Element | null;
+export declare function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps): React.JSX.Element | null;

package/package.json

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