@lumx/react 3.7.6-alpha.0 → 3.7.6-alpha.10

package/package.json

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

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

@@ -3,12 +3,12 @@ import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
+
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, 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.
@@ -46,6 +46,16 @@ export interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMet
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
 }
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
 /**
  * Component default props.
  */
@@ -107,11 +117,14 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
                 alt={(alt || title) as string}
             />
             <ImageCaption
+                className={`${CLASSNAME}__wrapper`}
+                theme={theme}
                 title={title}
                 description={description}
                 tags={tags}
                 captionStyle={captionStyle}
                 align={align}
+                truncate={captionPosition === 'over'}
             />
             {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
         </figure>

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

@@ -1,8 +1,7 @@
 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';
+import { HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 
 type As = 'div' | 'figcaption';
 
@@ -18,19 +17,22 @@ export type ImageCaptionMetadata = {
 };
 
 export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
+    HasClassName &
     HasPolymorphicAs<AS> &
     ImageCaptionMetadata & {
         /** Alignment. */
         align?: HorizontalAlignment;
+        /** Truncate title & description */
+        truncate?: boolean;
     };
 
 /** 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;
+    const { className, theme, as = 'figcaption', title, description, tags, captionStyle, align, truncate } = 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;
+    const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;
+    const descriptionColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
 
     // Display description as string or HTML
     const descriptionContent =
@@ -39,32 +41,25 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
     return (
         <FlexBox
             as={as}
-            className={`${CLASSNAME}__wrapper`}
+            className={className}
             style={captionStyle}
-            orientation="horizontal"
+            orientation="vertical"
             vAlign={align}
+            hAlign={align === 'center' ? align : undefined}
+            gap="regular"
         >
             {(title || description) && (
-                <div className={`${CLASSNAME}__caption`}>
+                <Text as="p" truncate={truncate}>
                     {title && (
-                        <Text as="span" className={`${CLASSNAME}__title`} {...titleColor}>
+                        <Text as="span" typography="subtitle1" {...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>
+                    )}{' '}
+                    {description && <Text as="span" typography="body1" {...descriptionColor} {...descriptionContent} />}
+                </Text>
             )}
             {tags && (
-                <FlexBox orientation="horizontal" vAlign={align} className={`${CLASSNAME}__tags`}>
+                <FlexBox orientation="horizontal" vAlign={align}>
                     {tags}
                 </FlexBox>
             )}

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

@@ -119,15 +119,17 @@ export const MultipleImagesWithZoom = {
 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' },
-            ]);
+            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(0) as any)}>Image 1</Button>
-                    <Button {...(getTriggerProps(1) as any)}>Image 2</Button>
+                    <Button {...(getTriggerProps({ activeImageIndex: 0 }) as any)}>Image 1</Button>
+                    <Button {...(getTriggerProps({ activeImageIndex: 1 }) as any)}>Image 2</Button>
                 </>
             );
         },
@@ -143,14 +145,14 @@ export const WithMosaicTrigger = {
     args: { ...SLIDESHOW_PROPS, ...ZOOM_PROPS },
     decorators: [
         (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox(MULTIPLE_IMAGES);
+            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({ images: MULTIPLE_IMAGES });
             return (
                 <>
                     <Story args={{ ...args, ...imageLightboxProps }} />
                     <Mosaic
                         thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
                             ...image,
-                            ...getTriggerProps(index),
+                            ...getTriggerProps({ activeImageIndex: index }),
                         }))}
                     />
                 </>

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

@@ -1,17 +1,19 @@
 import React from 'react';
 
+import isEqual from 'lodash/isEqual';
 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';
+import type { ImageProps } from '../types';
 
-export interface ImageSlideProps extends InheritedThumbnailProps {
+export interface ImageSlideProps {
+    image: ImageProps;
     isActive?: boolean;
     scale?: number;
     onScaleChange?: (value: number) => void;
@@ -19,7 +21,12 @@ export interface ImageSlideProps extends InheritedThumbnailProps {
 
 /** Internal image slide component for ImageLightbox */
 export const ImageSlide = React.memo((props: ImageSlideProps) => {
-    const { isActive, scale, onScaleChange, image, imgRef: propImgRef, imgProps, alt } = props;
+    const {
+        isActive,
+        scale,
+        onScaleChange,
+        image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef },
+    } = props;
 
     // Get scroll area size
     const scrollAreaRef = React.useRef<HTMLDivElement>(null);
@@ -93,7 +100,8 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
                         transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined,
                     },
                 }}
+                loadingPlaceholderImageRef={loadingPlaceholderImageRef}
             />
         </SlideshowItem>
     );
-});
+}, isEqual);

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

@@ -4,12 +4,13 @@ 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, ZoomProps } from '../types';
+import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
 import { ImageSlide } from './ImageSlide';
 
-export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomProps, ImagesProps {
+export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, ImagesProps {
     currentPaginationItemRef?: React.Ref<HTMLButtonElement>;
     footerRef?: React.Ref<HTMLDivElement>;
 }
@@ -110,6 +111,18 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
         </>
     );
 
+    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
@@ -122,15 +135,17 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
                 slidesId={slideshowSlidesId}
                 toggleAutoPlay={toggleAutoPlay}
             >
-                {images.map(({ image, imgRef, ...props }, index) => {
+                {images.map(({ image, imgRef, ...imageProps }, index) => {
                     const isActive = index === activeIndex;
                     return (
                         <ImageSlide
-                            {...props}
                             isActive={isActive}
                             key={image}
-                            imgRef={mergeRefs(imgRef, isActive ? activeImageRef : undefined)}
-                            image={image}
+                            image={{
+                                ...imageProps,
+                                image,
+                                imgRef: getImgRef(index, isActive),
+                            }}
                             scale={isActive ? scale : undefined}
                             onScaleChange={onScaleChange}
                         />

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

@@ -4,25 +4,26 @@ import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } f
 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 type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
 
-export interface ZoomProps {
-    /** */
+export interface ZoomButtonProps {
+    /** Zoom in button props */
     zoomInButtonProps?: IconButtonProps;
+    /** Zoom out button props */
     zoomOutButtonProps?: IconButtonProps;
 }
 
-export type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef'>;
+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 thumbnail to show on open */
+    /** Index of the active image to show on open */
     activeImageIndex?: number;
     /** List of images to display */
     images: Array<ImageProps>;
@@ -30,9 +31,10 @@ export interface ImagesProps {
     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 InheritedLightboxProps = Pick<
+    LightboxProps,
+    'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'
+>;
 
 export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
 
@@ -41,9 +43,8 @@ export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
  */
 export interface ImageLightboxProps
     extends HasClassName,
-        ZoomProps,
+        ZoomButtonProps,
         ImagesProps,
         InheritedSlideShowProps,
         InheritedLightboxProps,
-        InheritedAriaAttributes,
         ForwardedProps {}

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

@@ -16,6 +16,8 @@ type ManagedProps = Pick<
 
 const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };
 
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
+
 /**
  * Set up an ImageLightbox with images and triggers.
  *
@@ -23,24 +25,33 @@ const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: Re
  * - 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
+ * @param initialProps Images to display in the image lightbox
  */
-export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
+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: (index?: number) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
     /** Props to forward to the ImageLightbox */
-    imageLightboxProps: ManagedProps;
+    imageLightboxProps: P & ManagedProps;
 } {
+    const { images = [], ...otherProps } = initialProps;
+
+    const basePropsRef = React.useRef(EMPTY_PROPS as P & ManagedProps);
+    React.useEffect(() => {
+        basePropsRef.current = { ...EMPTY_PROPS, ...otherProps } as P & ManagedProps;
+    }, [otherProps]);
+
     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 [imageLightboxProps, setImageLightboxProps] = React.useState<P & ManagedProps>(basePropsRef.current);
 
     const getTriggerProps = React.useMemo(() => {
         const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
@@ -57,31 +68,25 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
             await startViewTransition({
                 changes() {
                     // Close lightbox with reset empty props
-                    setImageLightboxProps(({ parentElement }) => ({ ...EMPTY_PROPS, parentElement }));
+                    setImageLightboxProps(({ parentElement }) => ({ ...basePropsRef.current, 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) {
+        async function openLightbox(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
             // 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);
+            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
 
-            // Inject the trigger image size as a fallback for better loading state
+            // Inject the trigger image as loading placeholder 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 };
+                if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
+                    return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
                 }
                 return image;
             });
@@ -90,12 +95,13 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
                 changes: () => {
                     // Open lightbox with setup props
                     setImageLightboxProps({
+                        ...basePropsRef.current,
                         activeImageRef: currentImageRef,
                         parentElement: { current: triggerElement },
                         isOpen: true,
                         onClose: closeLightbox,
                         images: imagesWithFallbackSize,
-                        activeImageIndex: index || 0,
+                        activeImageIndex: activeImageIndex || 0,
                     });
                 },
                 // Morph from the image in trigger to the image in lightbox
@@ -107,13 +113,15 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
             });
         }
 
-        return memoize((index?: number) => ({
+        return memoize((options?: TriggerOptions) => ({
             ref(element: HTMLElement | null) {
-                const triggerImage = findImage(element);
-                if (index !== undefined && triggerImage) triggerImageRefs[index] = { current: triggerImage };
+                // Track trigger image ref if any
+                if (options?.activeImageIndex !== undefined && element) {
+                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
+                }
             },
             onClick(e: React.MouseEvent) {
-                openLightbox(e.target as HTMLElement, index);
+                openLightbox(e.target as HTMLElement, options);
             },
         }));
     }, []);

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -5,6 +5,7 @@ import {
     Alignment,
     AspectRatio,
     Badge,
+    Button,
     FlexBox,
     GridColumn,
     Icon,
@@ -411,3 +412,31 @@ export const ObjectFit = {
         withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
     ],
 };
+
+/**
+ * Demonstrate loading a small image and then use it as the loading placeholder image when loading a bigger image
+ */
+export const LoadingPlaceholderImage = () => {
+    const [isShown, setShown] = React.useState(false);
+    const imgRef = React.useRef() as React.RefObject<HTMLImageElement>;
+    return (
+        <>
+            <Button onClick={() => setShown((shown) => !shown)}>
+                Display bigger image using the small image as a placeholder
+            </Button>
+            <FlexBox orientation="horizontal">
+                <Thumbnail alt="Small image" imgRef={imgRef} image="https://picsum.photos/id/15/128/85" />
+                {isShown && (
+                    <Thumbnail
+                        loadingPlaceholderImageRef={imgRef}
+                        style={{ maxWidth: 300 }}
+                        alt="Large image"
+                        image="https://picsum.photos/id/15/2500/1667"
+                    />
+                )}
+            </FlexBox>
+        </>
+    );
+};
+// Disables Chromatic snapshot (not relevant for this story).
+LoadingPlaceholderImage.parameters = { chromatic: { disable: true } };

package/src/components/thumbnail/Thumbnail.tsx

@@ -58,6 +58,8 @@ export interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -115,6 +117,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         isLoading: isLoadingProp,
         objectFit,
         loading,
+        loadingPlaceholderImageRef,
         size,
         theme,
         variant,
@@ -159,6 +162,18 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 
+    // If we have a loading placeholder image that is really loaded (complete)
+    const loadingPlaceholderImage =
+        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||
+        undefined;
+    const loadingStyle = loadingPlaceholderImage
+        ? {
+              backgroundImage: `url(${loadingPlaceholderImage.src})`,
+              minWidth: loadingPlaceholderImage.naturalWidth,
+              minHeight: loadingPlaceholderImage.naturalHeight,
+          }
+        : undefined;
+
     return (
         <Wrapper
             {...wrapperProps}
@@ -191,6 +206,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                         ...imgProps?.style,
                         ...imageErrorStyle,
                         ...focusPointStyle,
+                        ...loadingStyle,
                     }}
                     ref={mergeRefs(setImgElement, propImgRef)}
                     className={classNames(

package/src/hooks/useElementSizeDependentOfWindowSize.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { RectSize } from '@lumx/react/utils/type';
 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).
@@ -18,7 +18,7 @@ export function useElementSizeDependentOfWindowSize(
     const updateSize = React.useMemo(
         () =>
             throttle(() => {
-                const newSize = elementRef?.current?.getBoundingClientRect();
+                const newSize = elementRef.current?.getBoundingClientRect();
                 if (newSize) setSize(newSize);
             }, 10),
         [elementRef],

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/findImage.tsx

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

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

@@ -1,11 +0,0 @@
-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);