@lumx/react 3.7.6-alpha.4 → 3.7.6-alpha.6

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.4",
-        "@lumx/icons": "^3.7.6-alpha.4",
+        "@lumx/core": "^3.7.6-alpha.6",
+        "@lumx/icons": "^3.7.6-alpha.6",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.4"
+    "version": "3.7.6-alpha.6"
 }

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -113,10 +113,14 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
 
     const getImgRef = React.useMemo(
         () =>
-            memoize((index: number) =>
-                mergeRefs(images?.[index].imgRef, index === activeImageIndex ? activeImageRef : undefined),
+            memoize(
+                (index: number, isActive: boolean) => {
+                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+                },
+                // memoize based on both arguments
+                (...args) => args.join(),
             ),
-        [images, activeImageIndex, activeImageRef],
+        [images, activeImageRef],
     );
 
     return (
@@ -140,7 +144,7 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
                             image={{
                                 ...imageProps,
                                 image,
-                                imgRef: getImgRef(index),
+                                imgRef: getImgRef(index, isActive),
                             }}
                             scale={isActive ? scale : undefined}
                             onScaleChange={onScaleChange}

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -120,9 +120,10 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
 
         return memoize((options?: TriggerOptions) => ({
             ref(element: HTMLElement | null) {
-                const triggerImage = findImage(element);
-                if (options?.activeImageIndex !== undefined && triggerImage)
-                    triggerImageRefs[options.activeImageIndex] = { current: triggerImage };
+                // Track trigger image ref if any
+                if (options?.activeImageIndex !== undefined && element) {
+                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
+                }
             },
             onClick(e: React.MouseEvent) {
                 openLightbox(e.target as HTMLElement, options);

package/src/utils/findImage.tsx

@@ -1,3 +1,3 @@
 /** Find image in element including the element */
-export const findImage = (element: HTMLElement | null) =>
-    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img');
+export const findImage = (element: HTMLElement | null): HTMLImageElement | null =>
+    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img') || null;