yet-another-react-lightbox 1.6.0 → 1.7.0

package/dist/core/components/ImageSlide.js

@@ -4,10 +4,12 @@ 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";
+import { useController } from "../modules/Controller.js";
 export const ImageSlide = ({ slide: image, offset, render, rect }) => {
     var _a;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const latestStatus = useLatest(status);
+    const { latestProps } = useController();
     const { publish } = useEvents();
     const imageRef = React.useRef(null);
     React.useEffect(() => {
@@ -41,7 +43,9 @@ export const ImageSlide = ({ slide: image, offset, render, rect }) => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), (image.imageFit === "cover" ||
+                (image.imageFit !== "contain" && latestProps.current.carousel.imageFit === "cover")) &&
+                cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
                 ? {
                     ...(rect && hasWindow()
                         ? {

package/dist/styles.css

@@ -14,7 +14,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  touch-action: none;
+  touch-action: pan-y;
 }
 .yarl__container {
   width: 100%;
@@ -65,6 +65,12 @@
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+.yarl__slide_image_cover {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .yarl__slide_image_loading {
   opacity: 0;

package/dist/types.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { ContainerRect } from "./core/hooks/useContainerRect.js";
+/** Image fit setting */
+export declare type ImageFit = "contain" | "cover";
 /** Image slide properties */
 export interface SlideImage {
     /** image URL */
@@ -8,6 +10,8 @@ export interface SlideImage {
     alt?: string;
     /** image aspect ratio */
     aspectRatio?: number;
+    /** `object-fit` setting */
+    imageFit?: ImageFit;
     /** alternative images to be passed to the 'srcSet' */
     srcSet?: {
         /** image URL */
@@ -33,6 +37,8 @@ export interface CarouselSettings {
     padding: string | number;
     /** spacing between slides (e.g., "100px", "50%" or 0) */
     spacing: string | number;
+    /** `object-fit` setting for image slides */
+    imageFit: ImageFit;
 }
 /** Animation settings */
 export interface AnimationSettings {
@@ -43,7 +49,7 @@ export interface AnimationSettings {
 }
 /** Controller settings */
 export interface ControllerSettings {
-    /** if true, the lightbox captures focus when it opens v     */
+    /** if true, the lightbox captures focus when it opens */
     focus: boolean;
 }
 /** Custom render functions. */

package/dist/types.js

@@ -16,6 +16,7 @@ export const LightboxDefaultProps = {
         preload: 2,
         padding: "16px",
         spacing: "30%",
+        imageFit: "contain",
     },
     controller: {
         focus: true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -100,7 +100,7 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.30.0",
-        "eslint-plugin-react-hooks": "^4.5.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
         "jest": "^28.1.1",
         "jest-environment-jsdom": "^28.1.1",
@@ -109,8 +109,8 @@
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
         "prettier": "^2.7.0",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
         "sass": "^1.52.3",
         "ts-jest": "^28.0.5",