yet-another-react-lightbox 3.30.0 → 3.31.0

package/dist/index.js

@@ -739,14 +739,18 @@ const LightboxRoot = React.forwardRef(function LightboxRoot({ className, childre
     const nodeRef = React.useRef(null);
     const [isRTL, setIsRTL] = React.useState(false);
     const { trackFocusWithin } = useA11yContext();
-    const detectRTL = React.useCallback((node) => {
-        if (node) {
-            setIsRTL(window.getComputedStyle(node).direction === "rtl");
+    const detectRTL = useEventCallback(() => {
+        if (nodeRef.current) {
+            const rtl = window.getComputedStyle(nodeRef.current).direction === "rtl";
+            if (rtl !== isRTL) {
+                setIsRTL(rtl);
+            }
         }
-    }, []);
+    });
+    React.useEffect(detectRTL);
     return (React.createElement(DocumentContextProvider, { nodeRef: nodeRef },
         React.createElement(RTLContextProvider, { isRTL: isRTL },
-            React.createElement("div", { ref: useForkRef(useForkRef(ref, nodeRef), detectRTL), className: clsx(cssClass("root"), className), ...trackFocusWithin(onFocus, onBlur), ...rest }, children))));
+            React.createElement("div", { ref: useForkRef(ref, nodeRef), className: clsx(cssClass("root"), className), ...trackFocusWithin(onFocus, onBlur), ...rest }, children))));
 });
 
 var SwipeState;

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

@@ -32,6 +32,10 @@ declare module "yet-another-react-lightbox" {
             pinchZoomV4?: boolean;
             /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
             scrollToZoom?: boolean;
+            /** custom slide types that support zoom */
+            supports?: readonly SlideTypeKey[];
+            /** maximum zoom level for custom slide types; when a function, return `undefined` to use the default (default: 8) */
+            maxZoom?: number | ((slide: Slide) => number | undefined);
         };
     }
     interface AnimationSettings {

package/dist/plugins/zoom/index.js

@@ -14,6 +14,7 @@ const defaultZoomProps = {
     pinchZoomDistanceFactor: 100,
     pinchZoomV4: false,
     scrollToZoom: false,
+    maxZoom: 8,
 };
 function validateMinZoom(minZoom) {
     return Math.min(Math.max(minZoom, Number.EPSILON), 1);
@@ -77,13 +78,18 @@ function useZoomProps() {
     return resolveZoomProps(zoom);
 }
 
+function resolveMaxZoom(maxZoom, slide) {
+    var _a;
+    const resolved = typeof maxZoom === "function" ? ((_a = maxZoom(slide)) !== null && _a !== void 0 ? _a : defaultZoomProps.maxZoom) : maxZoom;
+    return Math.max(resolved, 1);
+}
 function useZoomImageRect(slideRect, imageDimensions) {
     var _a, _b;
     let imageRect = { width: 0, height: 0 };
     let maxImageRect = { width: 0, height: 0 };
     const { currentSlide } = useLightboxState();
     const { imageFit } = useLightboxProps().carousel;
-    const { maxZoomPixelRatio } = useZoomProps();
+    const { maxZoomPixelRatio, maxZoom: maxZoomInProps } = useZoomProps();
     if (slideRect && currentSlide) {
         const slide = { ...currentSlide, ...imageDimensions };
         if (isImageSlide(slide)) {
@@ -112,8 +118,23 @@ function useZoomImageRect(slideRect, imageDimensions) {
                     };
             }
         }
+        else if (slideRect.width > 0 && slideRect.height > 0) {
+            if (imageDimensions && imageDimensions.width > 0 && imageDimensions.height > 0) {
+                imageRect = {
+                    width: Math.min(slideRect.width, imageDimensions.width),
+                    height: Math.min(slideRect.height, imageDimensions.height),
+                };
+            }
+            else {
+                imageRect = { width: slideRect.width, height: slideRect.height };
+            }
+        }
     }
-    const maxZoom = imageRect.width ? Math.max(round(maxImageRect.width / imageRect.width, 5), 1) : 1;
+    const maxZoom = currentSlide && imageRect.width
+        ? isImageSlide(currentSlide)
+            ? Math.max(round(maxImageRect.width / imageRect.width, 5), 1)
+            : resolveMaxZoom(maxZoomInProps, currentSlide)
+        : 1;
     return { imageRect, maxZoom };
 }
 
@@ -296,7 +317,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const { containerRect, slideRect } = useController();
     const { minZoom, zoomInMultiplier } = useZoomProps();
     const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
-    const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
+    const disabled = !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
         setZoom(1);
         setOffsetX(0);
@@ -468,10 +489,37 @@ function ZoomWrapper({ render, slide, offset, rect }) {
     var _a;
     const [imageDimensions, setImageDimensions] = React.useState();
     const zoomWrapperRef = React.useRef(null);
+    const isImage = isImageSlide(slide);
     const { zoom, maxZoom, offsetX, offsetY, setZoomWrapper } = useZoom();
     const interactive = zoom > 1;
     const { carousel, on } = useLightboxProps();
     const { currentIndex } = useLightboxState();
+    useLayoutEffect(() => {
+        if (offset !== 0 || isImage || !zoomWrapperRef.current)
+            return () => { };
+        const measure = () => {
+            const wrapper = zoomWrapperRef.current;
+            if (!wrapper)
+                return;
+            let width = 0;
+            let height = 0;
+            for (const child of wrapper.children) {
+                if (child instanceof HTMLElement) {
+                    width = Math.max(width, child.offsetWidth);
+                    height = Math.max(height, child.offsetHeight);
+                }
+            }
+            setImageDimensions((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return () => { };
+        const observer = new ResizeObserver(measure);
+        for (const child of zoomWrapperRef.current.children) {
+            observer.observe(child);
+        }
+        return () => observer.disconnect();
+    }, [offset, isImage, rect]);
     useLayoutEffect(() => {
         if (offset === 0) {
             setZoomWrapper({ zoomWrapperRef, imageDimensions });
@@ -480,7 +528,7 @@ function ZoomWrapper({ render, slide, offset, rect }) {
         return () => { };
     }, [offset, imageDimensions, setZoomWrapper]);
     let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, { slide, offset, rect, zoom, maxZoom });
-    if (!rendered && isImageSlide(slide)) {
+    if (!rendered && isImage) {
         const slideProps = {
             slide,
             offset,
@@ -505,7 +553,10 @@ const Zoom = ({ augment, addModule }) => {
             toolbar: addToolbarButton(toolbar, PLUGIN_ZOOM, React.createElement(ZoomToolbarControl, null)),
             render: {
                 ...render,
-                slide: (props) => { var _a; return isImageSlide(props.slide) ? React.createElement(ZoomWrapper, { render: render, ...props }) : (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, props); },
+                slide: (props) => {
+                    var _a, _b;
+                    return isImageSlide(props.slide) || (props.slide.type != null && ((_a = zoom.supports) === null || _a === void 0 ? void 0 : _a.includes(props.slide.type))) ? (React.createElement(ZoomWrapper, { render: render, ...props })) : ((_b = render.slide) === null || _b === void 0 ? void 0 : _b.call(render, props));
+                },
             },
             controller: { ...controller, preventDefaultWheelY: zoom.scrollToZoom },
             ...restProps,

package/package.json

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