@lumx/react 3.7.5 → 3.7.6-alpha.0

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,99 @@
+import React from 'react';
+
+import { SlideshowItem, Thumbnail } from '@lumx/react';
+import { mergeRefs } 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/getPrefersReducedMotion';
+import { CLASSNAME } from '../constants';
+import { usePointerZoom } from './usePointerZoom';
+import { useAnimateScroll } from './useAnimateScroll';
+import type { InheritedThumbnailProps } from '../types';
+
+export interface ImageSlideProps extends InheritedThumbnailProps {
+    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, imgRef: propImgRef, imgProps, alt } = 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 initialWidth = Number.parseInt(imgProps?.width as any, 10);
+        const initialHeight = Number.parseInt(imgProps?.height as any, 10);
+        return initialWidth && initialHeight ? { width: initialWidth, height: initialHeight } : 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={mergeRefs(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,
+                    },
+                }}
+            />
+        </SlideshowItem>
+    );
+});

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

@@ -0,0 +1,158 @@
+import React from 'react';
+
+import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
+import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import { ImageCaption } from '../../image-block/ImageCaption';
+import { CLASSNAME } from '../constants';
+import type { ImagesProps, InheritedSlideShowProps, ZoomProps } from '../types';
+import { ImageSlide } from './ImageSlide';
+
+export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomProps, ImagesProps {
+    currentPaginationItemRef?: React.Ref<HTMLButtonElement>;
+    footerRef?: React.Ref<HTMLDivElement>;
+}
+
+/** Internal image slideshow component for ImageLightbox */
+export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
+    activeImageIndex,
+    images,
+    slideGroupLabel,
+    zoomInButtonProps,
+    zoomOutButtonProps,
+    slideshowControlsProps,
+    currentPaginationItemRef,
+    footerRef,
+    activeImageRef,
+}) => {
+    const {
+        activeIndex,
+        slideshowId,
+        setSlideshow,
+        slideshowSlidesId,
+        slidesCount,
+        onNextClick,
+        onPaginationClick,
+        onPreviousClick,
+        toggleAutoPlay,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: images.length,
+        activeIndex: activeImageIndex,
+    });
+
+    // Image metadata (caption)
+    const title = images[activeIndex]?.title;
+    const description = images[activeIndex]?.description;
+    const tags = images[activeIndex]?.tags;
+    const metadata =
+        title || description || tags ? (
+            <ImageCaption theme="dark" as="div" title={title} description={description} tags={tags} align="center" />
+        ) : null;
+
+    // Slideshow controls
+    const slideShowControls =
+        slidesCount > 1 && slideshowControlsProps ? (
+            <SlideshowControls
+                theme="dark"
+                activeIndex={activeIndex}
+                slidesCount={slidesCount}
+                onNextClick={onNextClick}
+                onPreviousClick={onPreviousClick}
+                onPaginationClick={onPaginationClick}
+                {...slideshowControlsProps}
+                paginationItemProps={(index: number) => {
+                    const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
+                    return {
+                        ...props,
+                        ref: mergeRefs(
+                            (props as any)?.ref,
+                            // Focus the active pagination item once on mount
+                            activeIndex === index ? currentPaginationItemRef : undefined,
+                        ),
+                    };
+                }}
+            />
+        ) : null;
+
+    // Zoom controls
+    const [scale, setScale] = React.useState<number | undefined>(undefined);
+    const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
+    const onScaleChange = React.useMemo(() => {
+        if (!zoomEnabled) return undefined;
+        return (newScale: number) => {
+            setScale((prevScale = 1) => Math.max(1, newScale * prevScale));
+        };
+    }, [zoomEnabled]);
+    const zoomIn = React.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);
+    const zoomOut = React.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);
+    React.useEffect(() => {
+        // Reset scale on slide change
+        if (activeIndex) setScale(undefined);
+    }, [activeIndex]);
+    const zoomControls = zoomEnabled && (
+        <>
+            <IconButton
+                {...zoomInButtonProps}
+                theme="dark"
+                emphasis="low"
+                icon={mdiMagnifyPlusOutline}
+                onClick={zoomIn}
+            />
+            <IconButton
+                {...zoomOutButtonProps}
+                theme="dark"
+                emphasis="low"
+                isDisabled={!scale || scale <= 1}
+                icon={mdiMagnifyMinusOutline}
+                onClick={zoomOut}
+            />
+        </>
+    );
+
+    return (
+        <>
+            <Slides
+                activeIndex={activeIndex}
+                theme="dark"
+                slideGroupLabel={slideGroupLabel}
+                fillHeight
+                id={slideshowId}
+                ref={setSlideshow}
+                slidesId={slideshowSlidesId}
+                toggleAutoPlay={toggleAutoPlay}
+            >
+                {images.map(({ image, imgRef, ...props }, index) => {
+                    const isActive = index === activeIndex;
+                    return (
+                        <ImageSlide
+                            {...props}
+                            isActive={isActive}
+                            key={image}
+                            imgRef={mergeRefs(imgRef, isActive ? activeImageRef : undefined)}
+                            image={image}
+                            scale={isActive ? scale : undefined}
+                            onScaleChange={onScaleChange}
+                        />
+                    );
+                })}
+            </Slides>
+            {(metadata || slideShowControls || zoomControls) && (
+                <FlexBox
+                    ref={footerRef}
+                    className={`${CLASSNAME}__footer`}
+                    orientation="vertical"
+                    vAlign="center"
+                    gap="big"
+                >
+                    {metadata}
+
+                    <FlexBox className={`${CLASSNAME}__footer-actions`} orientation="horizontal" gap="regular">
+                        {slideShowControls}
+                        {zoomControls}
+                    </FlexBox>
+                </FlexBox>
+            )}
+        </>
+    );
+};

package/src/components/image-lightbox/internal/useAnimateScroll.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Point, RectSize } from '@lumx/react/utils/type';
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+export function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {
+    return React.useMemo(() => {
+        let animationFrame: number | null = null;
+
+        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {
+            const scrollArea = scrollAreaRef.current as HTMLDivElement;
+            if (!scrollArea) {
+                return;
+            }
+
+            // Cancel previously running animation
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+
+            // Center on the given point or else on the scroll area visual center
+            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+
+            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+
+            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+            const heightRatio = heightCenter / initialScrollHeight;
+
+            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+            const widthRatio = widthCenter / initialScrollWidth;
+
+            let prevScrollHeight = 0;
+            let prevScrollWidth = 0;
+
+            function nextFrame() {
+                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;
+
+                // Scroll area stopped expanding => stop animation
+                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+                    animationFrame = null;
+                    return;
+                }
+
+                // Compute next scroll position
+                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+
+                scrollArea.scrollTo({ top, left });
+                prevScrollHeight = scrollHeight;
+                prevScrollWidth = scrollWidth;
+                animationFrame = requestAnimationFrame(nextFrame);
+            }
+            animationFrame = requestAnimationFrame(nextFrame);
+        };
+    }, [scrollAreaRef]);
+}

package/src/components/image-lightbox/internal/usePointerZoom.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import type { Point } from '@lumx/react/utils/type';
+import type { useAnimateScroll } from './useAnimateScroll';
+
+/**
+ * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+ */
+export function usePointerZoom(
+    scrollAreaRef: React.RefObject<HTMLDivElement>,
+    onScaleChange: ((value: number) => void) | undefined,
+    animateScroll: ReturnType<typeof useAnimateScroll>,
+) {
+    const [isPointerZooming, setPointerZooming] = React.useState(false);
+    React.useEffect(() => {
+        const scrollArea = scrollAreaRef.current as HTMLDivElement;
+        if (!scrollArea || !onScaleChange) {
+            return undefined;
+        }
+
+        let animationFrame: number | null;
+        let zoomStateTimeoutId: ReturnType<typeof setTimeout> | null;
+
+        function updateScaleOnNextFrame(newScale: number, mousePosition: Point): void {
+            // Cancel previously scheduled frame
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+
+            // Cancel previously scheduled zoom state change
+            if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+
+            function nextFrame() {
+                setPointerZooming(true);
+                onScaleChange?.(newScale);
+
+                animationFrame = null;
+                // Wait a bit before indicating the pointer zooming is finished
+                zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+            }
+            animationFrame = requestAnimationFrame(nextFrame);
+
+            // Animate scroll in parallel (centering on the current mouse position)
+            animateScroll(mousePosition, {
+                width: scrollArea.scrollWidth,
+                height: scrollArea.scrollHeight,
+            });
+        }
+
+        function onWheel(event: WheelEvent) {
+            if (!event.ctrlKey) {
+                return;
+            }
+            event.preventDefault();
+            const newScale = Math.exp(-event.deltaY / 50);
+
+            // Update scale on next frame (focused on the mouse position)
+            updateScaleOnNextFrame(newScale, {
+                x: event.pageX,
+                y: event.pageY,
+            });
+        }
+
+        const activePointers: Record<PointerEvent['pointerId'], PointerEvent> = {};
+        let prevDistance: number | null = null;
+        let previousCenterPoint: Point | null = null;
+
+        function onPointerDown(event: PointerEvent) {
+            activePointers[event.pointerId] = event;
+        }
+        function onPointerMove(event: PointerEvent) {
+            // Update pointer in cache
+            if (activePointers[event.pointerId]) {
+                activePointers[event.pointerId] = event;
+            }
+
+            const pointers = Object.values(activePointers);
+
+            // Make sure we run computation on one of the pointer in the group
+            if (pointers[0].pointerId !== event.pointerId) {
+                return;
+            }
+
+            // Centered point between all pointers
+            const centerPoint: Point = {
+                x: pointers.reduce((x, { clientX }) => x + clientX, 0) / pointers.length,
+                y: pointers.reduce((y, { clientY }) => y + clientY, 0) / pointers.length,
+            };
+
+            // Movement of the center point
+            const deltaCenterPoint = previousCenterPoint && {
+                left: previousCenterPoint.x - centerPoint.x,
+                top: previousCenterPoint.y - centerPoint.y,
+            };
+
+            // Pan X & Y
+            if (deltaCenterPoint) {
+                // Apply movement of the center point to the scroll
+                scrollArea.scrollBy({
+                    top: deltaCenterPoint.top / 2,
+                    left: deltaCenterPoint.left / 2,
+                });
+            }
+
+            // Pinch to zoom
+            if (pointers.length === 2) {
+                const [pointer1, pointer2] = pointers;
+                const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+
+                if (prevDistance && deltaCenterPoint) {
+                    const delta = prevDistance - distance;
+                    const absDelta = Math.abs(delta);
+
+                    // Zoom only if we are "pinching" more than we are moving the pointers
+                    if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
+                        // Update scale on next frame (focused on the center point between the two pointers)
+                        const newScale = Math.exp(-delta / 100);
+                        updateScaleOnNextFrame(newScale, centerPoint);
+                    }
+                }
+
+                prevDistance = distance;
+            }
+
+            previousCenterPoint = centerPoint;
+        }
+        function onPointerUp(event: PointerEvent) {
+            prevDistance = null;
+            previousCenterPoint = null;
+            delete activePointers[event.pointerId];
+        }
+
+        scrollArea.addEventListener('wheel', onWheel, { passive: false });
+        const isMultiTouch = navigator.maxTouchPoints >= 2;
+        if (isMultiTouch) {
+            scrollArea.addEventListener('pointerdown', onPointerDown);
+            scrollArea.addEventListener('pointermove', onPointerMove);
+            scrollArea.addEventListener('pointerup', onPointerUp);
+        }
+        return () => {
+            scrollArea.removeEventListener('wheel', onWheel);
+            if (isMultiTouch) {
+                scrollArea.removeEventListener('pointerdown', onPointerDown);
+                scrollArea.removeEventListener('pointermove', onPointerMove);
+                scrollArea.removeEventListener('pointerup', onPointerUp);
+            }
+        };
+    }, [animateScroll, onScaleChange, scrollAreaRef]);
+
+    return isPointerZooming;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } from '@lumx/react';
+import type { HasClassName } from '@lumx/react/utils/type';
+import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';
+
+export type InheritedSlideShowProps = Pick<
+    SlideshowProps,
+    'activeIndex' | 'slideshowControlsProps' | 'slideGroupLabel'
+>;
+
+export interface ZoomProps {
+    /** */
+    zoomInButtonProps?: IconButtonProps;
+    zoomOutButtonProps?: IconButtonProps;
+}
+
+export type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef'>;
+
+export type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
+
+export type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
+
+export interface ImagesProps {
+    /** Index of the active thumbnail to show on open */
+    activeImageIndex?: number;
+    /** List of images to display */
+    images: Array<ImageProps>;
+    /** Ref of the active image when the lightbox is open */
+    activeImageRef?: React.Ref<HTMLImageElement>;
+}
+
+export type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps'>;
+
+export type InheritedAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
+export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
+
+/**
+ * ImageLightbox component props
+ */
+export interface ImageLightboxProps
+    extends HasClassName,
+        ZoomProps,
+        ImagesProps,
+        InheritedSlideShowProps,
+        InheritedLightboxProps,
+        InheritedAriaAttributes,
+        ForwardedProps {}

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

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import memoize from 'lodash/memoize';
+
+import { startViewTransition } from '@lumx/react/utils/startViewTransition';
+import { findImage } from '@lumx/react/utils/findImage';
+
+import type { ImageLightboxProps } from './types';
+import { CLASSNAME } from './constants';
+
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+type ManagedProps = Pick<
+    ImageLightboxProps,
+    'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'
+>;
+
+const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };
+
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param images Images to display in the image lightbox
+ */
+export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
+    /**
+     * Generates trigger props
+     * @param index Provide an index to choose which image to display when the image lightbox opens.
+     * */
+    getTriggerProps: (index?: number) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    /** Props to forward to the ImageLightbox */
+    imageLightboxProps: ManagedProps;
+} {
+    const imagesPropsRef = React.useRef(images);
+    React.useEffect(() => {
+        imagesPropsRef.current = images.map((props) => ({ imgRef: React.createRef(), ...props }));
+    }, [images]);
+
+    const currentImageRef = React.useRef<HTMLImageElement>(null);
+    const [imageLightboxProps, setImageLightboxProps] = React.useState<ManagedProps>(EMPTY_PROPS);
+
+    const getTriggerProps = React.useMemo(() => {
+        const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
+
+        async function closeLightbox() {
+            const currentImage = currentImageRef.current;
+            if (!currentImage) {
+                return;
+            }
+            const currentIndex = imagesPropsRef.current.findIndex(
+                ({ imgRef }) => (imgRef as any)?.current === currentImage,
+            );
+
+            await startViewTransition({
+                changes() {
+                    // Close lightbox with reset empty props
+                    setImageLightboxProps(({ parentElement }) => ({ ...EMPTY_PROPS, parentElement }));
+                },
+                // Morph from the image in lightbox to the image in trigger
+                viewTransitionName: {
+                    source: currentImageRef,
+                    //source: imageIsVisible ? currentImageRef : null,
+                    target: triggerImageRefs[currentIndex],
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        async function openLightbox(triggerElement: HTMLElement, index?: number) {
+            // If we find an image inside the trigger, animate it in transition with the opening image
+            const triggerImage = triggerImageRefs[index as any]?.current || findImage(triggerElement);
+
+            // Inject the trigger image size as a fallback for better loading state
+            const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
+                if (triggerImage && idx === index && !image.imgProps?.width && !image.imgProps?.height) {
+                    const imgProps = {
+                        ...image.imgProps,
+                        height: triggerImage.naturalHeight,
+                        width: triggerImage.naturalWidth,
+                    };
+                    return { ...image, imgProps };
+                }
+                return image;
+            });
+
+            await startViewTransition({
+                changes: () => {
+                    // Open lightbox with setup props
+                    setImageLightboxProps({
+                        activeImageRef: currentImageRef,
+                        parentElement: { current: triggerElement },
+                        isOpen: true,
+                        onClose: closeLightbox,
+                        images: imagesWithFallbackSize,
+                        activeImageIndex: index || 0,
+                    });
+                },
+                // Morph from the image in trigger to the image in lightbox
+                viewTransitionName: {
+                    source: triggerImage,
+                    target: currentImageRef,
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        return memoize((index?: number) => ({
+            ref(element: HTMLElement | null) {
+                const triggerImage = findImage(element);
+                if (index !== undefined && triggerImage) triggerImageRefs[index] = { current: triggerImage };
+            },
+            onClick(e: React.MouseEvent) {
+                openLightbox(e.target as HTMLElement, index);
+            },
+        }));
+    }, []);
+
+    return { getTriggerProps, imageLightboxProps };
+}