@lumx/react 3.8.1 → 3.8.2-alpha.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.8.1",
-        "@lumx/icons": "^3.8.1",
+        "@lumx/core": "^3.8.2-alpha.1",
+        "@lumx/icons": "^3.8.2-alpha.1",
         "@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.1"
+    "version": "3.8.2-alpha.1"
 }

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { IMAGES } from '@lumx/react/stories/controls/image';
+import { Button, Mosaic, ImageLightbox, ImageLightboxProps, Chip, ChipGroup } from '@lumx/react';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+
+const ZOOM_PROPS = {
+    zoomInButtonProps: { label: 'Zoom in' },
+    zoomOutButtonProps: { label: 'Zoom out' },
+};
+
+const SLIDESHOW_PROPS = {
+    slideshowControlsProps: {
+        nextButtonProps: { label: 'Next' },
+        previousButtonProps: { label: 'Previous' },
+        paginationItemProps: (index: number) => ({ label: `Go to slide ${index + 1}` }),
+    },
+};
+
+const MULTIPLE_IMAGES: ImageLightboxProps['images'] = [
+    {
+        image: 'https://picsum.photos/id/237/2000/3000',
+        alt: 'Image 1',
+        title: 'Little puppy',
+        description: 'A black labrador puppy with big brown eyes, looking up with a curious and innocent expression.',
+        tags: (
+            <ChipGroup>
+                <Chip theme="dark" size="s">
+                    Tag 1
+                </Chip>
+                <Chip theme="dark" size="s">
+                    Tag 2
+                </Chip>
+            </ChipGroup>
+        ),
+    },
+    {
+        image: 'https://picsum.photos/id/337/3000/1000',
+        alt: 'Image 2',
+        // Intentionally using the wrong size to see how it renders while loading the image
+        imgProps: { width: '300px', height: '100px' },
+    },
+    {
+        image: 'https://picsum.photos/id/437/2000/2000',
+        alt: 'Image 3',
+    },
+    {
+        image: 'https://picsum.photos/id/537/300/400',
+        alt: 'Image 4',
+    },
+    {
+        image: 'https://picsum.photos/id/637/400/200',
+        alt: 'Image 5',
+    },
+    {
+        image: 'https://picsum.photos/id/737/300/300',
+        alt: 'Image 6',
+    },
+];
+
+export default {
+    title: 'LumX components/image-lightbox/ImageLightbox',
+    component: ImageLightbox,
+    args: {
+        closeButtonProps: { label: 'Close' },
+    },
+    argTypes: {
+        onClose: { action: true },
+    },
+};
+
+/**
+ * Display a single image fullscreen in the ImageLightbox
+ */
+export const SingleImage = {
+    args: {
+        images: [{ image: IMAGES.portrait1s200, alt: 'Image 1' }],
+        isOpen: true,
+    },
+};
+
+/**
+ * Display a single image fullscreen in the ImageLightbox with zoom controls
+ */
+export const SingleImageWithZoom = {
+    ...SingleImage,
+    args: { ...SingleImage.args, ...ZOOM_PROPS },
+};
+
+/**
+ * Display a single image fullscreen in the ImageLightbox with metadata (title, description, etc.)
+ */
+export const SingleImageWithMetadata = {
+    ...SingleImage,
+    args: { ...SingleImage.args, images: [MULTIPLE_IMAGES[0]] },
+};
+
+/**
+ * Display a multiple image fullscreen in the ImageLightbox
+ */
+export const MultipleImages = {
+    args: {
+        images: MULTIPLE_IMAGES,
+        isOpen: true,
+        ...SLIDESHOW_PROPS,
+    },
+};
+
+/**
+ * Display a multiple images fullscreen in the ImageLightbox with zoom controls
+ */
+export const MultipleImagesWithZoom = {
+    ...MultipleImages,
+    args: { ...MultipleImages.args, ...ZOOM_PROPS },
+};
+
+/**
+ * Open ImageLightbox via buttons
+ */
+export const WithButtonTrigger = {
+    decorators: [
+        (Story: any, { args }: any) => {
+            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({
+                images: [
+                    { image: IMAGES.portrait1s200, alt: 'Image 1' },
+                    { image: IMAGES.landscape1s200, alt: 'Image 2' },
+                ],
+            });
+            return (
+                <>
+                    <Story args={{ ...args, ...imageLightboxProps }} />
+                    <Button {...(getTriggerProps({ activeImageIndex: 0 }) as any)}>Image 1</Button>
+                    <Button {...(getTriggerProps({ activeImageIndex: 1 }) as any)}>Image 2</Button>
+                </>
+            );
+        },
+    ],
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};
+
+/**
+ * Open ImageLightbox with zoom and slideshow via clickable thumbnails in a Mosaic
+ */
+export const WithMosaicTrigger = {
+    args: { ...SLIDESHOW_PROPS, ...ZOOM_PROPS },
+    decorators: [
+        (Story: any, { args }: any) => {
+            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({ images: MULTIPLE_IMAGES });
+            return (
+                <>
+                    <Story args={{ ...args, ...imageLightboxProps }} />
+                    <Mosaic
+                        thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
+                            ...image,
+                            ...getTriggerProps({ activeImageIndex: index }),
+                        }))}
+                    />
+                </>
+            );
+        },
+        withWrapper({ style: { width: 300 } }),
+    ],
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};

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

@@ -0,0 +1,253 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+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 { ImageLightbox } from './ImageLightbox';
+import { ImageLightboxProps } from './types';
+import Meta, {
+    MultipleImages,
+    MultipleImagesWithZoom,
+    SingleImage,
+    SingleImageWithZoom,
+    WithButtonTrigger,
+    WithMosaicTrigger,
+} from './ImageLightbox.stories';
+
+jest.mock('@lumx/react/hooks/useImageSize');
+jest.mock('@lumx/react/hooks/useElementSizeDependentOfWindowSize');
+
+const CLASSNAME = ImageLightbox.className as string;
+const baseProps = Meta.args;
+
+const setup = (overrides: Partial<ImageLightboxProps> = {}) => {
+    const props: any = {
+        ...baseProps,
+        isOpen: true,
+        images: [],
+        ...overrides,
+    };
+    const result = render(<ImageLightbox {...props} />);
+    const rerender = () => result.rerender(<ImageLightbox {...props} />);
+    const imageLightbox = queryByClassName(document.body, CLASSNAME);
+    return { props, imageLightbox, rerender };
+};
+
+const queries = {
+    getImageLightbox: () => getByClassName(document.body, CLASSNAME),
+    queryCloseButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Close' }),
+    queryImage: (imageLightbox: HTMLElement, name?: string) => within(imageLightbox).queryByRole('img', { name }),
+    queryScrollArea: (imageLightbox: HTMLElement) =>
+        queryByClassName(imageLightbox, 'lumx-image-lightbox__image-slide'),
+    queryZoomInButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Zoom in' }),
+    queryZoomOutButton: (imageLightbox: HTMLElement) =>
+        within(imageLightbox).queryByRole('button', { name: 'Zoom out' }),
+    queryPrevSlideButton: (imageLightbox: HTMLElement) =>
+        within(imageLightbox).queryByRole('button', { name: 'Previous' }),
+    queryNextSlideButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Next' }),
+    querySlideButton: (imageLightbox: HTMLElement, slide: number) =>
+        within(imageLightbox).queryByRole('tab', { name: `Go to slide ${slide}` }),
+};
+
+describe(`<${ImageLightbox.displayName}>`, () => {
+    beforeEach(() => {
+        (useImageSize as any).mockReturnValue(null);
+        (useElementSizeDependentOfWindowSize as any).mockReturnValue([null, jest.fn()]);
+    });
+
+    describe('render', () => {
+        it('should render single image', () => {
+            setup(SingleImage.args);
+            const imageLightbox = queries.getImageLightbox();
+
+            // Should render
+            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
+
+            // Should not render
+            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
+            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
+            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
+            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
+        });
+
+        it('should render single image with zoom', () => {
+            setup(SingleImageWithZoom.args);
+            const imageLightbox = queries.getImageLightbox();
+
+            // Should render
+            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
+            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
+
+            // Should not render
+            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
+            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
+        });
+
+        it('should render multiple images', () => {
+            setup(MultipleImages.args);
+            const imageLightbox = queries.getImageLightbox();
+
+            // Should render
+            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
+            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
+
+            // Should not render
+            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
+            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
+        });
+
+        it('should render multiple images with set active image', () => {
+            setup({ ...MultipleImages.args, activeImageIndex: 1 });
+            const imageLightbox = queries.getImageLightbox();
+
+            // Should render
+            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
+        });
+
+        it('should render multiple images with zoom', () => {
+            setup(MultipleImagesWithZoom.args);
+            const imageLightbox = queries.getImageLightbox();
+
+            // Should render
+            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
+            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
+            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
+        });
+    });
+
+    describe('trigger', () => {
+        it('should move focus on open and close with single image lightbox', async () => {
+            const decorator = WithButtonTrigger.decorators[0];
+            const Story = ({ args }: any) => <ImageLightbox {...args} />;
+            const Render = () => decorator(Story, { args: baseProps });
+            render(<Render />);
+
+            // Focus the second button
+            await userEvent.tab();
+            await userEvent.tab();
+            const buttonTrigger = screen.getByRole('button', { name: 'Image 2' });
+            expect(buttonTrigger).toHaveFocus();
+
+            // Open image lightbox with the button trigger
+            await userEvent.keyboard('{enter}');
+
+            // Focus moved to the close button
+            const imageLightbox = queries.getImageLightbox();
+            expect(queries.queryCloseButton(imageLightbox)).toHaveFocus();
+
+            // Image lightbox opened on the correct image
+            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
+
+            // Close on escape
+            await userEvent.keyboard('{escape}');
+            expect(imageLightbox).not.toBeInTheDocument();
+
+            // Focus moved back to the trigger button
+            expect(buttonTrigger).toHaveFocus();
+        });
+
+        it('should move focus on open and close with multiple image lightbox', async () => {
+            const decorator = WithMosaicTrigger.decorators[0];
+            const Story = ({ args }: any) => <ImageLightbox {...args} />;
+            const Render = () => decorator(Story, { args: { ...baseProps, ...WithMosaicTrigger.args } });
+            render(<Render />);
+
+            // Focus the first button & activate to open
+            await userEvent.tab();
+            const buttonTrigger = document.activeElement;
+            await userEvent.keyboard('{enter}');
+
+            // Focus moved to the first slide button
+            const imageLightbox = queries.getImageLightbox();
+            expect(queries.querySlideButton(imageLightbox, 1)).toHaveFocus();
+
+            // Image lightbox opened on the correct image
+            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
+
+            // Close on escape
+            await userEvent.keyboard('{escape}');
+            expect(imageLightbox).not.toBeInTheDocument();
+
+            // Focus moved back to the trigger button
+            expect(buttonTrigger).toHaveFocus();
+        });
+    });
+
+    describe('zoom', () => {
+        const scrollAreaSize = { width: 600, height: 600 };
+        beforeEach(() => {
+            (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
+            (useElementSizeDependentOfWindowSize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
+        });
+
+        it('should use the image initial size', () => {
+            setup({
+                images: [
+                    { image: 'https://example.com/image.png', alt: 'Image 1', imgProps: { width: 200, height: 200 } },
+                ],
+            });
+            const imageLightbox = queries.getImageLightbox();
+            const image = queries.queryImage(imageLightbox, 'Image 1');
+            expect(image).toHaveStyle({
+                height: `200px`,
+                width: `200px`,
+            });
+        });
+
+        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)
+            const imageSize = { width: 500, height: 300 };
+            (useImageSize as any).mockReturnValue(imageSize);
+            rerender();
+
+            // Image style updated
+            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
+
+            // Scroll area is bigger than the image, it should not be focusable
+            expect(queries.queryScrollArea(imageLightbox)).not.toHaveAttribute('tabindex');
+
+            // Zoom in
+            const zoomInButton = queries.queryZoomInButton(imageLightbox) as any;
+            await userEvent.click(zoomInButton);
+            expect(image).toHaveStyle({ height: '450px', width: '750px' });
+
+            // Scroll area is smaller than the image, it should be focusable
+            expect(queries.queryScrollArea(imageLightbox)).toHaveAttribute('tabindex', '0');
+
+            // Zoom out
+            const zoomOutButton = queries.queryZoomOutButton(imageLightbox) as any;
+            await userEvent.click(zoomOutButton);
+            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'imageLightbox',
+        forwardAttributes: 'imageLightbox',
+    });
+});

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

@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Lightbox } from '@lumx/react';
+import { ClickAwayProvider } from '@lumx/react/utils';
+import type { Comp } from '@lumx/react/utils/type';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import { ImageSlideshow } from './internal/ImageSlideshow';
+import { useImageLightbox } from './useImageLightbox';
+import type { ImageLightboxProps } from './types';
+import { CLASSNAME, COMPONENT_NAME } from './constants';
+
+const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        className,
+        isOpen,
+        closeButtonProps,
+        onClose,
+        parentElement,
+        activeImageIndex,
+        slideshowControlsProps,
+        slideGroupLabel,
+        images,
+        zoomOutButtonProps,
+        zoomInButtonProps,
+        activeImageRef: propImageRef,
+        ...forwardedProps
+    } = props;
+    const currentPaginationItemRef = React.useRef(null);
+    const footerRef = React.useRef(null);
+    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}
+            className={classNames(className, CLASSNAME)}
+            parentElement={parentElement}
+            isOpen={isOpen}
+            onClose={onClose}
+            closeButtonProps={closeButtonProps}
+            focusElement={currentPaginationItemRef}
+            {...forwardedProps}
+        >
+            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
+                <ImageSlideshow
+                    activeImageIndex={activeImageIndex}
+                    slideGroupLabel={slideGroupLabel}
+                    slideshowControlsProps={slideshowControlsProps}
+                    images={images}
+                    zoomInButtonProps={zoomInButtonProps}
+                    zoomOutButtonProps={zoomOutButtonProps}
+                    footerRef={footerRef}
+                    activeImageRef={useMergeRefs(propImageRef, imageRef)}
+                    currentPaginationItemRef={currentPaginationItemRef}
+                />
+            </ClickAwayProvider>
+        </Lightbox>
+    );
+});
+Inner.displayName = COMPONENT_NAME;
+Inner.className = CLASSNAME;
+
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ImageLightbox = Object.assign(Inner, { useImageLightbox });

package/src/components/image-lightbox/constants.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/react/utils/className';
+
+/**
+ * Component display name.
+ */
+export const COMPONENT_NAME = 'ImageLightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/src/components/image-lightbox/index.ts

@@ -0,0 +1,2 @@
+export { ImageLightbox } from './ImageLightbox';
+export type { ImageLightboxProps } from './types';

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

@@ -0,0 +1,107 @@
+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 { useImageSize } from '@lumx/react/hooks/useImageSize';
+import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
+import { isEqual } from '@lumx/react/utils/object/isEqual';
+
+import { CLASSNAME } from '../constants';
+import { usePointerZoom } from './usePointerZoom';
+import { useAnimateScroll } from './useAnimateScroll';
+import type { ImageProps } from '../types';
+
+export interface ImageSlideProps {
+    image: ImageProps;
+    isActive?: boolean;
+    scale?: number;
+    onScaleChange?: (value: number) => void;
+}
+
+/** Internal image slide component for ImageLightbox */
+export const ImageSlide = React.memo((props: ImageSlideProps) => {
+    const {
+        isActive,
+        scale,
+        onScaleChange,
+        image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef },
+    } = props;
+
+    // Get scroll area size
+    const scrollAreaRef = React.useRef<HTMLDivElement>(null);
+    const [scrollAreaSize, updateSize] = useElementSizeDependentOfWindowSize(scrollAreaRef);
+    React.useEffect(() => {
+        // Update size when active
+        if (isActive) updateSize();
+    }, [isActive, updateSize]);
+
+    // Get image size
+    const imgRef = React.useRef<HTMLImageElement>(null);
+    const imageSize = useImageSize(imgRef, () => {
+        const width = Number.parseInt(imgProps?.width as any, 10);
+        const height = Number.parseInt(imgProps?.height as any, 10);
+        return width && height ? { width, height } : null;
+    });
+
+    // Calculate new image size with scale
+    const scaledImageSize = React.useMemo(() => {
+        if (!scrollAreaSize || !imageSize) {
+            return null;
+        }
+        const horizontalScale = scrollAreaSize.width / imageSize.width;
+        const verticalScale = scrollAreaSize.height / imageSize.height;
+        const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
+        return {
+            width: imageSize.width * baseScale * (scale ?? 1),
+            height: imageSize.height * baseScale * (scale ?? 1),
+        };
+    }, [scrollAreaSize, imageSize, scale]);
+
+    // Animate scroll to preserve the center of the current visible window in the scroll area
+    const animateScroll = useAnimateScroll(scrollAreaRef);
+
+    // Zoom via mouse wheel or multi-touch pinch zoom
+    const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
+
+    // Animate scroll on scale change
+    React.useLayoutEffect(() => {
+        if (scale && !isPointerZooming) {
+            animateScroll();
+        }
+    }, [isPointerZooming, scale, animateScroll]);
+
+    const isScrollable =
+        scaledImageSize &&
+        scrollAreaSize &&
+        (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
+
+    return (
+        <SlideshowItem
+            ref={scrollAreaRef}
+            // Make it accessible to keyboard nav when the zone is scrollable
+            tabIndex={isScrollable ? 0 : undefined}
+            className={`${CLASSNAME}__image-slide`}
+        >
+            <Thumbnail
+                imgRef={useMergeRefs(imgRef, propImgRef)}
+                image={image}
+                alt={alt}
+                className={`${CLASSNAME}__thumbnail`}
+                imgProps={{
+                    ...imgProps,
+                    style: {
+                        ...imgProps?.style,
+                        ...(scaledImageSize || {
+                            maxHeight: scrollAreaSize?.height,
+                            maxWidth: scrollAreaSize?.width,
+                        }),
+                        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
+                        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined,
+                    },
+                }}
+                loadingPlaceholderImageRef={loadingPlaceholderImageRef}
+            />
+        </SlideshowItem>
+    );
+}, isEqual);