@lumx/react 3.7.5 → 3.7.6-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.5",
-        "@lumx/icons": "^3.7.5",
+        "@lumx/core": "^3.7.6-alpha.0",
+        "@lumx/icons": "^3.7.6-alpha.0",
         "@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.5"
+    "version": "3.7.6-alpha.0"
 }

package/src/components/image-block/ImageBlock.tsx

@@ -1,14 +1,14 @@
-import React, { CSSProperties, forwardRef, ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import isObject from 'lodash/isObject';
-
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
-
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
+
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
+import { ImageCaption, ImageCaptionMetadata } from './ImageCaption';
+import { CLASSNAME, COMPONENT_NAME } from './constants';
 
 /**
  * Image block variants.
@@ -27,7 +27,7 @@ export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-export interface ImageBlockProps extends GenericProps, HasTheme {
+export interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Alignment. */
@@ -36,34 +36,16 @@ export interface ImageBlockProps extends GenericProps, HasTheme {
     alt: string;
     /** Caption position. */
     captionPosition?: ImageBlockCaptionPosition;
-    /** Caption custom CSS style. */
-    captionStyle?: CSSProperties;
-    /** Image description. Can be either a string, or sanitized html. */
-    description?: string | { __html: string };
     /** Whether the image has to fill its container height or not. */
     fillHeight?: boolean;
     /** Image URL. */
     image: string;
     /** Size variant. */
     size?: ImageBlockSize;
-    /** Tag content. */
-    tags?: ReactNode;
     /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
-    /** Image title to display in the caption. */
-    title?: string;
 }
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
 /**
  * Component default props.
  */
@@ -124,24 +106,13 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
                 theme={theme}
                 alt={(alt || title) as string}
             />
-            {(title || description || tags) && (
-                <figcaption className={`${CLASSNAME}__wrapper`} style={captionStyle}>
-                    {(title || description) && (
-                        <div className={`${CLASSNAME}__caption`}>
-                            {title && <span className={`${CLASSNAME}__title`}>{title}</span>}
-                            {/* Add an `&nbsp;` when there is description and title. */}
-                            {title && description && '\u00A0'}
-                            {isObject(description) && description.__html ? (
-                                // eslint-disable-next-line react/no-danger
-                                <span dangerouslySetInnerHTML={description} className={`${CLASSNAME}__description`} />
-                            ) : (
-                                <span className={`${CLASSNAME}__description`}>{description}</span>
-                            )}
-                        </div>
-                    )}
-                    {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}
-                </figcaption>
-            )}
+            <ImageCaption
+                title={title}
+                description={description}
+                tags={tags}
+                captionStyle={captionStyle}
+                align={align}
+            />
             {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
         </figure>
     );

package/src/components/image-block/ImageCaption.tsx

@@ -0,0 +1,73 @@
+import React, { CSSProperties, ReactNode } from 'react';
+
+import { FlexBox, HorizontalAlignment, Text } from '@lumx/react';
+import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import { CLASSNAME } from './constants';
+
+type As = 'div' | 'figcaption';
+
+export type ImageCaptionMetadata = {
+    /** Image title to display in the caption. */
+    title?: string;
+    /** Image description. Can be either a string, or sanitized html. */
+    description?: string | { __html: string };
+    /** Tag content. */
+    tags?: ReactNode;
+    /** Caption custom CSS style. */
+    captionStyle?: CSSProperties;
+};
+
+export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
+    HasPolymorphicAs<AS> &
+    ImageCaptionMetadata & {
+        /** Alignment. */
+        align?: HorizontalAlignment;
+    };
+
+/** Internal component used to render image captions */
+export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
+    const { theme, as = 'figcaption', title, description, tags, captionStyle, align } = props;
+    if (!title && !description && !tags) return null;
+
+    const titleColor = theme === 'dark' ? ({ color: 'light' } as const) : undefined;
+    const descriptionColor = theme === 'dark' ? ({ color: 'light', colorVariant: 'L2' } as const) : undefined;
+
+    // Display description as string or HTML
+    const descriptionContent =
+        typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };
+
+    return (
+        <FlexBox
+            as={as}
+            className={`${CLASSNAME}__wrapper`}
+            style={captionStyle}
+            orientation="horizontal"
+            vAlign={align}
+        >
+            {(title || description) && (
+                <div className={`${CLASSNAME}__caption`}>
+                    {title && (
+                        <Text as="span" className={`${CLASSNAME}__title`} {...titleColor}>
+                            {title}
+                        </Text>
+                    )}
+                    {/* Add an `&nbsp;` when there is description and title. */}
+                    {title && description && '\u00A0'}
+                    {description && (
+                        <Text
+                            as="span"
+                            className={`${CLASSNAME}__description`}
+                            {...descriptionColor}
+                            {...descriptionContent}
+                        />
+                    )}
+                </div>
+            )}
+            {tags && (
+                <FlexBox orientation="horizontal" vAlign={align} className={`${CLASSNAME}__tags`}>
+                    {tags}
+                </FlexBox>
+            )}
+        </FlexBox>
+    );
+};

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

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

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

@@ -0,0 +1,163 @@
+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([
+                { image: IMAGES.portrait1s200, alt: 'Image 1' },
+                { image: IMAGES.landscape1s200, alt: 'Image 2' },
+            ]);
+            return (
+                <>
+                    <Story args={{ ...args, ...imageLightboxProps }} />
+                    <Button {...(getTriggerProps(0) as any)}>Image 1</Button>
+                    <Button {...(getTriggerProps(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(MULTIPLE_IMAGES);
+            return (
+                <>
+                    <Story args={{ ...args, ...imageLightboxProps }} />
+                    <Mosaic
+                        thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
+                            ...image,
+                            ...getTriggerProps(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,252 @@
+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,72 @@
+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 { mergeRefs } 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]);
+
+    return (
+        <Lightbox
+            ref={ref}
+            className={classNames(className, CLASSNAME)}
+            parentElement={parentElement}
+            isOpen={isOpen}
+            onClose={onClose}
+            closeButtonProps={closeButtonProps}
+            focusElement={currentPaginationItemRef}
+            {...forwardedProps}
+        >
+            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClose}>
+                <ImageSlideshow
+                    activeImageIndex={activeImageIndex}
+                    slideGroupLabel={slideGroupLabel}
+                    slideshowControlsProps={slideshowControlsProps}
+                    images={images}
+                    zoomInButtonProps={zoomInButtonProps}
+                    zoomOutButtonProps={zoomOutButtonProps}
+                    footerRef={footerRef}
+                    activeImageRef={mergeRefs(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 });