@lumx/react 3.8.1 → 3.8.2-alpha.1

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

@@ -0,0 +1,173 @@
+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 memoize from 'lodash/memoize';
+import { ImageCaption } from '../../image-block/ImageCaption';
+import { CLASSNAME } from '../constants';
+import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
+import { ImageSlide } from './ImageSlide';
+
+export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, 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}
+            />
+        </>
+    );
+
+    const getImgRef = React.useMemo(
+        () =>
+            memoize(
+                (index: number, isActive: boolean) => {
+                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+                },
+                // memoize based on both arguments
+                (...args) => args.join(),
+            ),
+        [images, activeImageRef],
+    );
+
+    return (
+        <>
+            <Slides
+                activeIndex={activeIndex}
+                theme="dark"
+                slideGroupLabel={slideGroupLabel}
+                fillHeight
+                id={slideshowId}
+                ref={setSlideshow}
+                slidesId={slideshowSlidesId}
+                toggleAutoPlay={toggleAutoPlay}
+            >
+                {images.map(({ image, imgRef, ...imageProps }, index) => {
+                    const isActive = index === activeIndex;
+                    return (
+                        <ImageSlide
+                            isActive={isActive}
+                            key={image}
+                            image={{
+                                ...imageProps,
+                                image,
+                                imgRef: getImgRef(index, isActive),
+                            }}
+                            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,50 @@
+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, 'slideshowControlsProps' | 'slideGroupLabel'>;
+
+export interface ZoomButtonProps {
+    /** Zoom in button props */
+    zoomInButtonProps?: IconButtonProps;
+    /** Zoom out button props */
+    zoomOutButtonProps?: IconButtonProps;
+}
+
+export type InheritedThumbnailProps = Pick<
+    ThumbnailProps,
+    'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'
+>;
+
+export type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
+
+export type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
+
+export interface ImagesProps {
+    /** Index of the active image 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' | 'aria-label' | 'aria-labelledby'
+>;
+
+export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
+
+/**
+ * ImageLightbox component props
+ */
+export interface ImageLightboxProps
+    extends HasClassName,
+        ZoomButtonProps,
+        ImagesProps,
+        InheritedSlideShowProps,
+        InheritedLightboxProps,
+        ForwardedProps {}

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

@@ -0,0 +1,130 @@
+import React from 'react';
+
+import memoize from 'lodash/memoize';
+
+import { startViewTransition } from '@lumx/react/utils/DOM/startViewTransition';
+import { findImage } from '@lumx/react/utils/DOM/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() };
+
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
+
+/**
+ * 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 initialProps Images to display in the image lightbox
+ */
+export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
+    initialProps: P,
+): {
+    /**
+     * Generates trigger props
+     * @param index Provide an index to choose which image to display when the image lightbox opens.
+     * */
+    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    /** Props to forward to the ImageLightbox */
+    imageLightboxProps: ManagedProps & P;
+} {
+    const { images = [], ...otherProps } = initialProps;
+
+    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(
+        () => ({ ...EMPTY_PROPS, ...otherProps }) as ManagedProps & P,
+    );
+
+    const getTriggerProps = React.useMemo(() => {
+        const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
+
+        async function close() {
+            const currentImage = currentImageRef.current;
+            if (!currentImage) {
+                return;
+            }
+            const currentIndex = imagesPropsRef.current.findIndex(
+                ({ imgRef }) => (imgRef as any)?.current === currentImage,
+            );
+
+            await startViewTransition({
+                changes() {
+                    // Close lightbox
+                    setImageLightboxProps((prevProps) => ({ ...prevProps, isOpen: false }));
+                },
+                // Morph from the image in lightbox to the image in trigger
+                viewTransitionName: {
+                    source: currentImageRef,
+                    target: triggerImageRefs[currentIndex],
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        async function open(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
+            // If we find an image inside the trigger, animate it in transition with the opening image
+            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
+
+            // Inject the trigger image as loading placeholder for better loading state
+            const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
+                if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
+                    return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
+                }
+                return image;
+            });
+
+            await startViewTransition({
+                changes: () => {
+                    // Open lightbox with setup props
+                    setImageLightboxProps((prevProps) => ({
+                        ...prevProps,
+                        activeImageRef: currentImageRef,
+                        parentElement: { current: triggerElement },
+                        isOpen: true,
+                        onClose: () => {
+                            close();
+                            prevProps?.onClose?.();
+                        },
+                        images: imagesWithFallbackSize,
+                        activeImageIndex: activeImageIndex || 0,
+                    }));
+                },
+                // Morph from the image in trigger to the image in lightbox
+                viewTransitionName: {
+                    source: triggerImage,
+                    target: currentImageRef,
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        return memoize((options?: TriggerOptions) => ({
+            ref(element: HTMLElement | null) {
+                // Track trigger image ref if any
+                if (options?.activeImageIndex !== undefined && element) {
+                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
+                }
+            },
+            onClick(e: React.MouseEvent) {
+                open(e.target as HTMLElement, options);
+            },
+        }));
+    }, []);
+
+    return { getTriggerProps, imageLightboxProps };
+}

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
+import { RectSize } from '@lumx/react/utils/type';
 
 // Calculate shift to center the focus point in the container.
 export function shiftPosition({
@@ -24,8 +25,6 @@ export function shiftPosition({
     return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
-type Size = { width: number; height: number };
-
 // Compute CSS properties to apply the focus point.
 export const useFocusPointStyle = (
     { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,
@@ -33,7 +32,7 @@ export const useFocusPointStyle = (
     isLoaded: boolean,
 ): CSSProperties => {
     // Get natural image size from imgProps or img element.
-    const imageSize: Size | undefined = useMemo(() => {
+    const imageSize: RectSize | undefined = useMemo(() => {
         // Focus point is not applicable => exit early
         if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;
         if (typeof width === 'number' && typeof height === 'number') return { width, height };
@@ -42,7 +41,7 @@ export const useFocusPointStyle = (
     }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
 
     // Get container size (dependant on imageSize).
-    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);
+    const [containerSize, setContainerSize] = useState<RectSize | undefined>(undefined);
     useEffect(
         function updateContainerSize() {
             const cWidth = element?.offsetWidth;

package/src/hooks/useElementSizeDependentOfWindowSize.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import throttle from 'lodash/throttle';
+import { RectSize } from '@lumx/react/utils/type';
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+export function useElementSizeDependentOfWindowSize(
+    elementRef: React.RefObject<HTMLElement>,
+): [RectSize | null, () => void] {
+    const [size, setSize] = React.useState<null | RectSize>(null);
+    const updateSize = React.useMemo(
+        () =>
+            throttle(() => {
+                const newSize = elementRef.current?.getBoundingClientRect();
+                if (newSize) setSize(newSize);
+            }, 10),
+        [elementRef],
+    );
+    React.useEffect(() => {
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, [updateSize]);
+    return [size, updateSize];
+}

package/src/hooks/useImageSize.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RectSize } from '@lumx/react/utils/type';
+
+/** Get natural image size after load. */
+export function useImageSize(imgRef: React.RefObject<HTMLImageElement>, getInitialSize?: () => RectSize | null) {
+    const [imageSize, setImageSize] = React.useState<null | RectSize>(getInitialSize || null);
+    React.useEffect(() => {
+        const { current: img } = imgRef;
+        if (!img) {
+            return undefined;
+        }
+        const onLoad = () => setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
+        img.addEventListener('load', onLoad);
+        return () => img.removeEventListener('load', onLoad);
+    }, [imgRef]);
+    return imageSize;
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/grid';
 export * from './components/grid-column';
 export * from './components/icon';
 export * from './components/image-block';
+export * from './components/image-lightbox';
 export * from './components/inline-list';
 export * from './components/input-helper';
 export * from './components/input-label';

package/src/stories/generated/ImageLightbox/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/image-lightbox/ImageLightbox Demos' };
+
+export { App as Default } from './default';

package/src/utils/DOM/findImage.tsx

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