@lumx/react 3.8.2-alpha.0 → 3.8.2-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.8.2-alpha.0",
-        "@lumx/icons": "^3.8.2-alpha.0",
+        "@lumx/core": "^3.8.2-alpha.2",
+        "@lumx/icons": "^3.8.2-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.8.2-alpha.0"
+    "version": "3.8.2-alpha.2"
 }

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -5,7 +5,7 @@ import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
+import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
 
 import { ImageLightbox } from './ImageLightbox';
 import { ImageLightboxProps } from './types';
@@ -19,7 +19,7 @@ import Meta, {
 } from './ImageLightbox.stories';
 
 jest.mock('@lumx/react/hooks/useImageSize');
-jest.mock('@lumx/react/hooks/useElementSizeDependentOfWindowSize');
+jest.mock('@lumx/react/hooks/useSizeOnWindowResize');
 
 const CLASSNAME = ImageLightbox.className as string;
 const baseProps = Meta.args;
@@ -56,7 +56,7 @@ const queries = {
 describe(`<${ImageLightbox.displayName}>`, () => {
     beforeEach(() => {
         (useImageSize as any).mockReturnValue(null);
-        (useElementSizeDependentOfWindowSize as any).mockReturnValue([null, jest.fn()]);
+        (useSizeOnWindowResize as any).mockReturnValue([null, jest.fn()]);
     });
 
     describe('render', () => {
@@ -189,7 +189,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         const scrollAreaSize = { width: 600, height: 600 };
         beforeEach(() => {
             (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useElementSizeDependentOfWindowSize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
+            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
         });
 
         it('should use the image initial size', () => {
@@ -207,23 +207,15 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         });
 
         it('should zoom on zoom button pressed', async () => {
-            const { rerender } = setup(SingleImageWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Initial image style
-            const image = queries.queryImage(imageLightbox, 'Image 1');
-
-            expect(image).toHaveStyle({
-                maxHeight: `${scrollAreaSize.height}px`,
-                maxWidth: `${scrollAreaSize.width}px`,
-            });
-
-            // Update image size (simulate image loaded)
+            // Set image size (simulate image loaded)
             const imageSize = { width: 500, height: 300 };
             (useImageSize as any).mockReturnValue(imageSize);
-            rerender();
 
-            // Image style updated
+            setup(SingleImageWithZoom.args);
+            const imageLightbox = queries.getImageLightbox();
+
+            // Image style
+            const image = queries.queryImage(imageLightbox, 'Image 1');
             expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
 
             // Scroll area is bigger than the image, it should not be focusable

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { Lightbox } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils';
 import type { Comp } from '@lumx/react/utils/type';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { ImageSlideshow } from './internal/ImageSlideshow';
 import { useImageLightbox } from './useImageLightbox';
@@ -32,6 +32,19 @@ const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref)
     const imageRef = React.useRef(null);
     const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
 
+    const onClickAway = React.useCallback(
+        (evt: Event) => {
+            const targetElement = evt.target;
+            if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
+
+            // Skip click away if clicking on the scrollbar
+            if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
+
+            onClose?.();
+        },
+        [onClose],
+    );
+
     return (
         <Lightbox
             ref={ref}
@@ -43,7 +56,7 @@ const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref)
             focusElement={currentPaginationItemRef}
             {...forwardedProps}
         >
-            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClose}>
+            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
                 <ImageSlideshow
                     activeImageIndex={activeImageIndex}
                     slideGroupLabel={slideGroupLabel}
@@ -52,7 +65,7 @@ const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref)
                     zoomInButtonProps={zoomInButtonProps}
                     zoomOutButtonProps={zoomOutButtonProps}
                     footerRef={footerRef}
-                    activeImageRef={mergeRefs(propImageRef, imageRef)}
+                    activeImageRef={useMergeRefs(propImageRef, imageRef)}
                     currentPaginationItemRef={currentPaginationItemRef}
                 />
             </ClickAwayProvider>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SlideshowItem, Thumbnail } from '@lumx/react';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
+import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
 import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
 import { isEqual } from '@lumx/react/utils/object/isEqual';
@@ -30,7 +30,7 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
 
     // Get scroll area size
     const scrollAreaRef = React.useRef<HTMLDivElement>(null);
-    const [scrollAreaSize, updateSize] = useElementSizeDependentOfWindowSize(scrollAreaRef);
+    const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);
     React.useEffect(() => {
         // Update size when active
         if (isActive) updateSize();

package/src/hooks/{useElementSizeDependentOfWindowSize.ts → useSizeOnWindowResize.ts}

@@ -11,9 +11,7 @@ import { RectSize } from '@lumx/react/utils/type';
  * @param elementRef Element to observe
  * @return the size and a manual update callback
  */
-export function useElementSizeDependentOfWindowSize(
-    elementRef: React.RefObject<HTMLElement>,
-): [RectSize | null, () => void] {
+export function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {
     const [size, setSize] = React.useState<null | RectSize>(null);
     const updateSize = React.useMemo(
         () =>