yet-another-react-lightbox 1.10.0 → 1.12.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/Captions.js

@@ -1,21 +1,21 @@
 import * as React from "react";
-import { cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
+import { clsx, cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
 import { useEvents } from "../core/contexts/Events.js";
 import { createModule } from "../core/index.js";
 const defaultTextAlign = "start";
 const defaultMaxLines = 3;
-const cls = (className) => cssClass(`slide_${className}`);
+const cssPrefix = (className) => cssClass(`slide_${className}`);
 const hasTitle = (slide) => "title" in slide ? typeof slide.title === "string" : false;
 const hasDescription = (slide) => "description" in slide ? typeof slide.description === "string" : false;
 const CaptionsContext = React.createContext(null);
 const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
 const Title = ({ title }) => {
     const { toolbarWidth } = useCaptions();
-    return (React.createElement("div", { className: cls(`title_container`) },
-        React.createElement("div", { className: cls("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+    return (React.createElement("div", { className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
+        React.createElement("div", { className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
 };
-const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: cls("description_container") },
-    React.createElement("div", { className: cls("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
+const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+    React.createElement("div", { className: cssPrefix("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
             ? {
                 style: {
                     [cssVar("slide_description_text_align")]: align,

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" }),
@@ -172,11 +173,29 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
         }));
     }, []);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
     useLayoutEffect(() => {
         if (refs.current.state.zoom > 1) {
+            const { maxZoom, state: { zoom: currentZoom }, } = refs.current;
+            if (currentZoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
             changeOffsets();
         }
-    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets, changeZoom]);
     useLayoutEffect(() => {
         var _a, _b;
         const { current } = refs;
@@ -226,20 +245,6 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             }
         }
     }, [offset, state.zoom, currentMaxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
-    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
-        const { current } = refs;
-        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
-        if (!containerRef.current || !containerRect)
-            return;
-        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
-        if (!rapid) {
-            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
-        }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
-        setState((prev) => ({ ...prev, zoom: newZoom }));
-    }, [changeOffsets]);
     const translateCoordinates = React.useCallback((event) => {
         const { controllerRef } = refs.current;
         if (controllerRef.current) {
@@ -252,9 +257,13 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
     }, []);
     const onKeyDown = React.useCallback((event) => {
         const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         if (zoom > 1) {
             const move = (deltaX, deltaY) => {
-                event.stopPropagation();
+                preventDefault();
                 changeOffsets(deltaX, deltaY);
             };
             if (event.key === "ArrowDown") {
@@ -270,28 +279,35 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
                 move(keyboardMoveDistance, 0);
             }
         }
-        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
-            changeZoom(zoom * zoomInMultiplier);
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta") || event.getModifierState("OS");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
         }
-        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
-            changeZoom(zoom / zoomInMultiplier);
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
         }
-        else if (event.key === "0" && event.metaKey) {
-            changeZoom(1);
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
         }
     }, [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/plugins/captions.css

@@ -1,27 +1,24 @@
+.yarl__slide_captions_container {
+  position: absolute;
+  left: var(--yarl__slide_captions_container_left, 0);
+  right: var(--yarl__slide_captions_container_right, 0);
+  padding: var(--yarl__slide_captions_container_padding, 16px);
+  background: var(--yarl__slide_captions_container_background, rgba(0, 0, 0, 0.5));
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
 .yarl__slide_title {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--yarl__slide_title_font_size, 125%);
+  font-weight: var(--yarl__slide_title_font_weight, bolder);
   max-width: calc(100% - var(--yarl__toolbar_width, 0px));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .yarl__slide_title_container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  top: var(--yarl__slide_title_container_top, 0);
 }
 .yarl__slide_description {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 1rem;
-  line-height: 1.2;
-  font-weight: 500;
   overflow: hidden;
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -31,12 +28,5 @@
   text-align: var(--yarl__slide_description_text_align, start);
 }
 .yarl__slide_description_container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  bottom: var(--yarl__slide_description_container_bottom, 0);
 }

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.12.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -96,19 +96,19 @@
         "@semantic-release/github": "^8.0.5",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.3",
-        "@types/jest": "^28.1.5",
+        "@testing-library/user-event": "^14.3.0",
+        "@types/jest": "^28.1.6",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.30.6",
-        "@typescript-eslint/parser": "^5.30.6",
-        "autoprefixer": "^10.4.7",
-        "eslint": "^8.19.0",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
+        "autoprefixer": "^10.4.8",
+        "eslint": "^8.20.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -123,8 +123,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "ts-jest": "^28.0.6",
+        "sass": "^1.54.0",
+        "ts-jest": "^28.0.7",
         "typescript": "^4.7.4"
     },
     "keywords": [