yet-another-react-lightbox 2.6.1 → 2.6.2

package/dist/core/components/ImageSlide.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { clsx, cssClass, hasWindow, makeComposePrefix } from "../utils.js";
+import { clsx, cssClass, hasWindow, isImageFitCover, makeComposePrefix } from "../utils.js";
 import { useEventCallback } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
+import { activeSlideStatus, ELEMENT_ICON, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
 export function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }) {
@@ -45,7 +45,7 @@ export function ImageSlide({ slide: image, offset, render, rect, imageFit, onCli
     const onError = React.useCallback(() => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
-    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
+    const cover = isImageFitCover(image, imageFit);
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
     const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AnimationSettings, AnimationSpec, Labels, Slide, SlideImage } from "../types.js";
+import { AnimationSettings, AnimationSpec, Labels, LightboxProps, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
@@ -13,6 +13,7 @@ export declare const isDefined: <T = any>(x: T | undefined) => x is T;
 export declare const isNumber: (value: any) => value is number;
 export declare const round: (value: number, decimals?: number) => number;
 export declare const isImageSlide: (slide: Slide) => slide is SlideImage;
+export declare const isImageFitCover: (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) => boolean;
 export declare const parseLengthPercentage: (input: unknown) => {
     pixel: number;
     percent?: undefined;

package/dist/core/utils.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { AnimationDefaultProps } from "../props.js";
+import { IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER } from "./consts.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
 const cssPrefix = "yarl__";
 export const cssClass = (name) => `${cssPrefix}${name}`;
@@ -27,6 +28,7 @@ export const round = (value, decimals = 0) => {
     return Math.round((value + Number.EPSILON) * factor) / factor;
 };
 export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
+export const isImageFitCover = (image, imageFit) => image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
 export const parseLengthPercentage = (input) => {
     if (typeof input === "number") {
         return { pixel: input };

package/dist/plugins/zoom/ResponsiveImage.js

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

package/dist/plugins/zoom/ZoomContainer.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, IMAGE_FIT_COVER, ImageSlide, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
+import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, cleanup, clsx, cssClass, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ImageSlide, isImageFitCover, isImageSlide, round, useContainerRect, useController, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, } from "../../core/index.js";
 import { useZoom } from "./ZoomContext.js";
 import { defaultZoomProps } from "./Zoom.js";
 import { ACTION_ZOOM_IN, ACTION_ZOOM_OUT } from "./index.js";
@@ -56,7 +56,7 @@ export function ZoomContainer({ slide, offset, rect, render, carousel, animation
     const { subscribeSensors, containerRef: controllerRef, containerRect: controllerRect } = useController();
     const { subscribe } = useEvents();
     const reduceMotion = useMotionPreference();
-    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, carousel.imageFit === IMAGE_FIT_COVER || ("imageFit" in slide && slide.imageFit === IMAGE_FIT_COVER), zoomProps.maxZoomPixelRatio, containerRect);
+    const { slideRect, maxSlideRect } = getSlideRects({ ...slide, ...imageDimensions }, isImageSlide(slide) && isImageFitCover(slide, carousel.imageFit), zoomProps.maxZoomPixelRatio, containerRect);
     const maxZoom = slideRect.width ? Math.max(round(maxSlideRect.width / slideRect.width, 5), 1) : 1;
     const changeOffsets = useEventCallback((dx, dy, targetZoom) => {
         const newZoom = targetZoom || zoom;
@@ -298,13 +298,7 @@ export function ZoomContainer({ slide, offset, rect, render, carousel, animation
         handleZoomIn,
         handleZoomOut,
     ]);
-    const scaledRect = offset === 0
-        ? {
-            width: rect.width * zoom,
-            height: rect.height * zoom,
-        }
-        : rect;
-    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
     if (!rendered && isImageSlide(slide)) {
         const slideProps = {
             slide,
@@ -314,7 +308,7 @@ export function ZoomContainer({ slide, offset, rect, render, carousel, animation
             imageFit: carousel.imageFit,
             onClick: offset === 0 ? () => { var _a; return (_a = on.click) === null || _a === void 0 ? void 0 : _a.call(on, currentIndex); } : undefined,
         };
-        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: scaledRect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
+        rendered = isResponsiveImageSlide(slide) ? (React.createElement(ResponsiveImage, { ...slideProps, slide: slide, rect: offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect })) : (React.createElement(ImageSlide, { onLoad: (img) => setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }), ...slideProps }));
     }
     return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER)), ...(offset === 0
             ? { style: { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } }

package/package.json

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