yet-another-react-lightbox 1.10.0 → 1.11.0

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

@@ -7,5 +7,6 @@ export declare type ImageSlideProps = {
     render?: Render;
     rect?: ContainerRect;
     imageFit?: ImageFit;
+    onClick?: () => void;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -4,7 +4,7 @@ import { useLatest } from "../hooks/index.js";
 import { useEvents } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
 import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, } from "../consts.js";
-export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) => {
+export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
@@ -61,7 +61,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) =>
         ? `${Math.ceil((Math.min(estimateActualWidth(), rect.width) / window.innerWidth) * 100)}vw`
         : undefined;
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),

package/dist/core/hooks/useLatest.d.ts

@@ -1,2 +1,3 @@
 import * as React from "react";
+/** @deprecated migrate to useEventCallback */
 export declare const useLatest: <T>(value: T) => React.MutableRefObject<T>;

package/dist/core/modules/Carousel.js

@@ -7,13 +7,18 @@ import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 const CarouselSlide = ({ slide, offset }) => {
     const { setContainerRef, containerRect } = useContainerRect();
-    const { latestProps } = useController();
+    const { latestProps, currentIndex } = useController();
     const { render } = latestProps.current;
     const renderSlide = (rect) => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
         if (!rendered && "src" in slide) {
-            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit }));
+            rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect, imageFit: latestProps.current.carousel.imageFit, onClick: latestProps.current.on.click && offset === 0
+                    ? () => {
+                        var _a, _b;
+                        (_b = (_a = latestProps.current.on).click) === null || _b === void 0 ? void 0 : _b.call(_a, currentIndex);
+                    }
+                    : undefined }));
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, slide),

package/dist/plugins/Video.js

@@ -39,9 +39,12 @@ export const VideoSlide = ({ slide, offset }) => {
         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: widthBound ? containerRect.width : Math.round((containerRect.height / height) * width),
-            height: !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height),
+            width: elementWidth,
+            height: elementHeight,
+            style: { width: elementWidth, height: elementHeight, maxWidth: "100%", maxHeight: "100%" },
         };
     };
     const resolveBoolean = (attr) => {

package/dist/plugins/Zoom.d.ts

@@ -28,6 +28,8 @@ declare module "../types.js" {
             wheelZoomDistanceFactor?: number;
             /** pinch zoom distance factor */
             pinchZoomDistanceFactor?: number;
+            /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
+            scrollToZoom?: boolean;
         };
     }
     interface AnimationSettings {

package/dist/plugins/Zoom.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useLayoutEffect, useEvents, useMotionPreference, } from "../core/index.js";
+import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEvents, useLayoutEffect, useMotionPreference, } from "../core/index.js";
 const defaultZoomProps = {
     maxZoomPixelRatio: 1,
     zoomInMultiplier: 2,
@@ -9,6 +9,7 @@ const defaultZoomProps = {
     keyboardMoveDistance: 50,
     wheelZoomDistanceFactor: 100,
     pinchZoomDistanceFactor: 100,
+    scrollToZoom: false,
 };
 const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
     React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
@@ -281,17 +282,19 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
         }
     }, [changeZoom, changeOffsets]);
     const onWheel = React.useCallback((event) => {
-        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
-        if (event.ctrlKey) {
-            event.stopPropagation();
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor, scrollToZoom }, } = refs.current;
+        if (event.ctrlKey || scrollToZoom) {
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                event.stopPropagation();
                 changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                return;
             }
-            return;
         }
         if (zoom > 1) {
             event.stopPropagation();
-            changeOffsets(event.deltaX, event.deltaY);
+            if (!scrollToZoom) {
+                changeOffsets(event.deltaX, event.deltaY);
+            }
         }
     }, [changeZoom, changeOffsets, translateCoordinates]);
     const clearPointer = React.useCallback((event) => {

package/dist/types.d.ts

@@ -99,6 +99,8 @@ export interface Render {
 export interface Callbacks {
     /** a callback called when a slide becomes active */
     view?: (index: number) => void;
+    /** a callback called when a slide is clicked */
+    click?: (index: number) => void;
     /** a callback called when the portal starts opening */
     entering?: () => void;
     /** a callback called when the portal opens */

package/package.json

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