yet-another-react-lightbox 2.2.7 → 2.3.1

package/README.md

@@ -78,7 +78,7 @@ export default App;
 
 Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a concept of "thumbnail" or "original"
 (or "full size") images. We use responsive images instead and recommend you provide multiple files of different
-resolutions for each image. Yet Another React Lightbox automatically populates `srcSet` / `sizes` attributes and lets
+resolutions for each image. Yet Another React Lightbox automatically populates `srcset` / `sizes` attributes and lets
 the browser decide which image is more appropriate for its viewport size.
 
 ```jsx

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { ImageFit, Render, SlideImage } from "../../types.js";
-import { ContainerRect } from "../hooks/index.js";
+import { ContainerRect, ImageFit, Render, SlideImage } from "../../types.js";
 export type ImageSlideProps = {
     slide: SlideImage;
     offset?: number;

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

@@ -1,8 +1,5 @@
 import * as React from "react";
-export type ContainerRect = {
-    width: number;
-    height: number;
-};
+import { ContainerRect } from "../../types.js";
 export declare const useContainerRect: <T extends HTMLElement = HTMLElement>() => {
     setContainerRef: (node: T | null) => void;
     containerRef: React.MutableRefObject<T | null>;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Component, ComponentProps } from "../../types.js";
-import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
+import { Component, ComponentProps, ContainerRect } from "../../types.js";
+import { SubscribeSensors } from "../hooks/index.js";
 export type ControllerContextType = {
     getLightboxProps: () => ComponentProps;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { ImageFit, LightboxProps, Slide } from "../../types.js";
-import { ContainerRect } from "../../core/index.js";
+import { ContainerRect, ImageFit, LightboxProps, Slide } from "../../types.js";
 type FadeSettings = {
     duration: number;
     delay: number;

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { ContainerRect } from "../../core/index.js";
-import { DeepNonNullable, LightboxProps } from "../../types.js";
+import { ContainerRect, DeepNonNullable, LightboxProps } from "../../types.js";
 type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
 type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ContainerRect } from "../../core/index.js";
 import { Thumbnails } from "./Thumbnails.js";
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types" {

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { ContainerRect } from "../../core/index.js";
-import { LightboxProps, Slide } from "../../types.js";
+import { ContainerRect, LightboxProps, Slide } from "../../types.js";
 /** Zoom container */
 export declare const ZoomContainer: React.FC<Pick<LightboxProps, "render" | "carousel" | "zoom" | "animation" | "on"> & {
     slide: Slide;

package/dist/plugins/zoom/ZoomContainer.js

@@ -140,6 +140,13 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
             }
         }
     }, [offset, zoom, maxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
+    const onZoomCallback = useEventCallback(() => {
+        var _a;
+        if (offset === 0) {
+            (_a = on.zoom) === null || _a === void 0 ? void 0 : _a.call(on, zoom);
+        }
+    });
+    useLayoutEffect(onZoomCallback, [zoom, onZoomCallback]);
     const translateCoordinates = React.useCallback((event) => {
         if (controllerRef.current) {
             const { pageX, pageY } = event;

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

@@ -49,5 +49,8 @@ declare module "../../types" {
         /** render custom Zoom out icon */
         iconZoomOut?: () => React.ReactNode;
     }
+    interface Callbacks {
+        zoom?: (level: number) => void;
+    }
 }
 export default Zoom;

package/dist/types.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image fit setting */
 export type ImageFit = "contain" | "cover";
 /** Image source */
@@ -38,6 +37,11 @@ export interface SlideTypes {
 }
 /** Slide */
 export type Slide = SlideTypes[keyof SlideTypes];
+/** Container rect */
+export type ContainerRect = {
+    width: number;
+    height: number;
+};
 /** Supported customization slots */
 export interface SlotType {
     /** lightbox root customization slot */

package/package.json

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