@lumx/react 3.7.6-alpha.11 → 3.7.6-alpha.13

package/package.json

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

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

@@ -15,94 +15,105 @@ import {
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { imageArgType, PORTRAIT_IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 import { mdiFileEdit } from '@lumx/icons';
-import { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { focusPoint } from '@lumx/react/stories/controls/focusPoint';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
 export default {
     title: 'LumX components/image-block/Image Block',
+    component: ImageBlock,
     argTypes: {
         size: getSelectArgType<ImageBlockSize>([Size.xl, Size.xxl]),
         image: imageArgType,
         captionPosition: getSelectArgType(ImageBlockCaptionPosition),
         'thumbnailProps.aspectRatio': getSelectArgType(AspectRatio),
         align: getSelectArgType<HorizontalAlignment>([Alignment.left, Alignment.center, Alignment.right]),
+        tags: { control: false },
+        actions: { control: false },
     },
     args: { ...ImageBlock.defaultProps, image: LANDSCAPE_IMAGES.landscape1 },
+    decorators: [withNestedProps()],
 };
 
-export const Default = (props: any) => {
-    const nestedProps = toNestedProps(props) as any;
-    return <ImageBlock {...nestedProps} />;
-};
-
-export const WithCaptionBelow: any = Default.bind({});
-WithCaptionBelow.args = {
-    captionPosition: ImageBlockCaptionPosition.below,
-    size: Size.xxl,
-    title: 'Image block title',
-    description: 'Image block description',
+export const WithCaptionBelow = {
+    args: {
+        captionPosition: ImageBlockCaptionPosition.below,
+        size: Size.xxl,
+        title: 'Image block title',
+        description: 'Image block description',
+    },
 };
 
-export const WithCaptionOver: any = Default.bind({});
-WithCaptionOver.args = {
-    captionPosition: ImageBlockCaptionPosition.over,
-    size: Size.xxl,
-    title: 'Image block title',
-    description: 'Image block description',
+export const WithCaptionOver = {
+    args: {
+        captionPosition: ImageBlockCaptionPosition.over,
+        size: Size.xxl,
+        title: 'Image block title',
+        description: 'Image block description',
+    },
 };
 
-export const WithAlign: any = Default.bind({});
-WithAlign.args = {
-    ...WithCaptionBelow.args,
-    image: LANDSCAPE_IMAGES.landscape1s200,
-    size: undefined,
-    align: Alignment.center,
+export const WithAlign = {
+    args: {
+        ...WithCaptionBelow.args,
+        image: LANDSCAPE_IMAGES.landscape1s200,
+        size: undefined,
+        align: Alignment.center,
+    },
 };
 
-export const WithTags: any = Default.bind({});
-WithTags.argTypes = {
-    tags: { control: false },
-};
-WithTags.args = {
-    size: Size.xxl,
-    tags: (
-        <ChipGroup align={Alignment.left}>
-            <Chip size={Size.s}>Tag 1</Chip>
-            <Chip size={Size.s}>Tag 2</Chip>
-        </ChipGroup>
-    ),
+export const WithTags = {
+    args: {
+        size: Size.xxl,
+        tags: (
+            <ChipGroup align={Alignment.left}>
+                <Chip size={Size.s}>Tag 1</Chip>
+                <Chip size={Size.s}>Tag 2</Chip>
+            </ChipGroup>
+        ),
+    },
 };
 
-export const WithActions: any = Default.bind({});
-WithActions.argTypes = {
-    actions: { control: false },
-};
-WithActions.args = {
-    size: Size.xxl,
-    actions: <IconButton label="Edit" icon={mdiFileEdit} />,
+export const WithActions = {
+    args: {
+        size: Size.xxl,
+        actions: <IconButton label="Edit" icon={mdiFileEdit} />,
+    },
 };
 
-export const WithFocusPointHorizontal: any = Default.bind({});
-WithFocusPointHorizontal.args = {
-    size: Size.xxl,
-    'thumbnailProps.aspectRatio': AspectRatio.vertical,
-    'thumbnailProps.focusPoint.x': 1,
-    'thumbnailProps.focusPoint.y': 0,
-};
-WithFocusPointHorizontal.argTypes = {
-    'thumbnailProps.focusPoint.x': focusPoint,
-    'thumbnailProps.focusPoint.y': focusPoint,
+export const WithFocusPointHorizontal = {
+    args: {
+        size: Size.xxl,
+        'thumbnailProps.aspectRatio': AspectRatio.vertical,
+        'thumbnailProps.focusPoint.x': 1,
+        'thumbnailProps.focusPoint.y': 0,
+    },
+    argTypes: {
+        'thumbnailProps.focusPoint.x': focusPoint,
+        'thumbnailProps.focusPoint.y': focusPoint,
+    },
 };
 
-export const WithFocusPointVertical: any = Default.bind({});
-WithFocusPointVertical.args = {
-    size: Size.xxl,
-    image: PORTRAIT_IMAGES.portrait1,
-    'thumbnailProps.aspectRatio': AspectRatio.horizontal,
-    'thumbnailProps.focusPoint.x': 0,
-    'thumbnailProps.focusPoint.y': 1,
+export const WithFocusPointVertical = {
+    args: {
+        size: Size.xxl,
+        image: PORTRAIT_IMAGES.portrait1,
+        'thumbnailProps.aspectRatio': AspectRatio.horizontal,
+        'thumbnailProps.focusPoint.x': 0,
+        'thumbnailProps.focusPoint.y': 1,
+    },
+    argTypes: {
+        'thumbnailProps.focusPoint.x': focusPoint,
+        'thumbnailProps.focusPoint.y': focusPoint,
+    },
 };
-WithFocusPointVertical.argTypes = {
-    'thumbnailProps.focusPoint.x': focusPoint,
-    'thumbnailProps.focusPoint.y': focusPoint,
+export const FullFeatured = {
+    args: {
+        ...WithCaptionBelow.args,
+        ...WithTags.args,
+        ...WithActions.args,
+        ...WithFocusPointVertical.args,
+        ...WithAlign.args,
+    },
+    decorators: [withWrapper({ style: { width: 400, height: 300 } })],
 };

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

@@ -117,6 +117,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
                 alt={(alt || title) as string}
             />
             <ImageCaption
+                as="figcaption"
                 className={`${CLASSNAME}__wrapper`}
                 theme={theme}
                 title={title}

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

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
 
-import { FlexBox, HorizontalAlignment, Text } from '@lumx/react';
+import { FlexBox, HorizontalAlignment, Text, TextProps } from '@lumx/react';
 import { HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 
 type As = 'div' | 'figcaption';
@@ -22,8 +22,8 @@ export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
     ImageCaptionMetadata & {
         /** Alignment. */
         align?: HorizontalAlignment;
-        /** Truncate title & description */
-        truncate?: boolean;
+        /** Truncate text on title & description (no line wrapping). */
+        truncate?: TextProps['truncate'];
     };
 
 /** Internal component used to render image captions */
@@ -32,7 +32,7 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
     if (!title && !description && !tags) return null;
 
     const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;
-    const descriptionColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
+    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
 
     // Display description as string or HTML
     const descriptionContent =
@@ -49,13 +49,13 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
             gap="regular"
         >
             {(title || description) && (
-                <Text as="p" truncate={truncate}>
+                <Text as="p" truncate={truncate} {...baseColor}>
                     {title && (
                         <Text as="span" typography="subtitle1" {...titleColor}>
                             {title}
                         </Text>
                     )}{' '}
-                    {description && <Text as="span" typography="body1" {...descriptionColor} {...descriptionContent} />}
+                    {description && <Text as="span" typography="body1" {...descriptionContent} />}
                 </Text>
             )}
             {tags && (

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

@@ -41,7 +41,8 @@ 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'),
+    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' }),

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

@@ -39,9 +39,9 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
     // 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;
+        const width = Number.parseInt(imgProps?.width as any, 10);
+        const height = Number.parseInt(imgProps?.height as any, 10);
+        return width && height ? { width, height } : null;
     });
 
     // Calculate new image size with scale

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

@@ -36,27 +36,24 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
      * */
     getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
     /** Props to forward to the ImageLightbox */
-    imageLightboxProps: P & ManagedProps;
+    imageLightboxProps: ManagedProps & P;
 } {
     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<P & ManagedProps>(basePropsRef.current);
+    const [imageLightboxProps, setImageLightboxProps] = React.useState(
+        () => ({ ...EMPTY_PROPS, ...otherProps }) as ManagedProps & P,
+    );
 
     const getTriggerProps = React.useMemo(() => {
         const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
 
-        async function closeLightbox() {
+        async function close() {
             const currentImage = currentImageRef.current;
             if (!currentImage) {
                 return;
@@ -67,8 +64,8 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
 
             await startViewTransition({
                 changes() {
-                    // Close lightbox with reset empty props
-                    setImageLightboxProps(({ parentElement }) => ({ ...basePropsRef.current, parentElement }));
+                    // Close lightbox
+                    setImageLightboxProps((prevProps) => ({ ...prevProps, isOpen: false }));
                 },
                 // Morph from the image in lightbox to the image in trigger
                 viewTransitionName: {
@@ -79,7 +76,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             });
         }
 
-        async function openLightbox(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
+        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);
 
@@ -94,15 +91,18 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             await startViewTransition({
                 changes: () => {
                     // Open lightbox with setup props
-                    setImageLightboxProps({
-                        ...basePropsRef.current,
+                    setImageLightboxProps((prevProps) => ({
+                        ...prevProps,
                         activeImageRef: currentImageRef,
                         parentElement: { current: triggerElement },
                         isOpen: true,
-                        onClose: closeLightbox,
+                        onClose: () => {
+                            close();
+                            prevProps?.onClose?.();
+                        },
                         images: imagesWithFallbackSize,
                         activeImageIndex: activeImageIndex || 0,
-                    });
+                    }));
                 },
                 // Morph from the image in trigger to the image in lightbox
                 viewTransitionName: {
@@ -121,7 +121,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                 }
             },
             onClick(e: React.MouseEvent) {
-                openLightbox(e.target as HTMLElement, options);
+                open(e.target as HTMLElement, options);
             },
         }));
     }, []);

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

@@ -428,10 +428,12 @@ export const LoadingPlaceholderImage = () => {
                 <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"
+                        alt="Large image"
+                        // Loading placeholder image
+                        loadingPlaceholderImageRef={imgRef}
+                        // Reserve space
+                        imgProps={{ width: 2500, height: 1667 }}
                     />
                 )}
             </FlexBox>

package/src/components/thumbnail/Thumbnail.tsx

@@ -166,12 +166,10 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const loadingPlaceholderImage =
         (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||
         undefined;
+
+    // Set loading placeholder image as background
     const loadingStyle = loadingPlaceholderImage
-        ? {
-              backgroundImage: `url(${loadingPlaceholderImage.src})`,
-              minWidth: loadingPlaceholderImage.naturalWidth,
-              minHeight: loadingPlaceholderImage.naturalHeight,
-          }
+        ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }
         : undefined;
 
     return (
@@ -202,6 +200,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
             <span className={`${CLASSNAME}__background`}>
                 <img
                     {...imgProps}
+                    width={imgProps?.width || loadingPlaceholderImage?.naturalWidth}
+                    height={imgProps?.height || loadingPlaceholderImage?.naturalHeight}
                     style={{
                         ...imgProps?.style,
                         ...imageErrorStyle,