@lumx/react 2.1.9 → 2.2.1

package/src/components/thumbnail/Thumbnail.tsx

@@ -1,4 +1,5 @@
 import React, {
+    CSSProperties,
     forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
@@ -6,7 +7,6 @@ import React, {
     ReactElement,
     ReactNode,
     Ref,
-    useRef,
     useState,
 } from 'react';
 import classNames from 'classnames';
@@ -15,12 +15,10 @@ import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { mdiImageBrokenVariant } from '@lumx/icons';
-import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
+import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useFocusPoint } from '@lumx/react/components/thumbnail/useFocusPoint';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
-import { useClickable } from '@lumx/react/components/thumbnail/useClickable';
+import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -51,6 +49,8 @@ export interface ThumbnailProps extends GenericProps {
     imgProps?: ImgHTMLProps;
     /** Reference to the native <img> element. */
     imgRef?: Ref<HTMLImageElement>;
+    /** Set to true to force the display of the loading skeleton. */
+    isLoading?: boolean;
     /** Size variant of the component. */
     size?: ThumbnailSize;
     /** Image loading mode. */
@@ -63,6 +63,10 @@ export interface ThumbnailProps extends GenericProps {
     theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
 }
 
 /**
@@ -79,7 +83,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ThumbnailProps> = {
-    fallback: mdiImageBrokenVariant,
+    fallback: mdiImageBroken,
     loading: 'lazy',
     theme: Theme.light,
 };
@@ -95,7 +99,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const {
         align,
         alt,
-        aspectRatio,
+        aspectRatio = AspectRatio.original,
         badge,
         className,
         crossOrigin,
@@ -105,71 +109,104 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         image,
         imgProps,
         imgRef: propImgRef,
+        isLoading: isLoadingProp,
         loading,
         size,
         theme,
         variant,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
-    const imgRef = useRef<HTMLImageElement>(null);
+    const [imgElement, setImgElement] = useState<HTMLImageElement>();
 
     // Image loading state.
-    const loadingState = useImageLoad(imgRef);
+    const loadingState = useImageLoad(image, imgElement);
+    const isLoaded = loadingState === 'isLoaded';
+    const isLoading = isLoadingProp || loadingState === 'isLoading';
     const hasError = loadingState === 'hasError';
-    const isLoading = loadingState === 'isLoading';
 
-    const [wrapper, setWrapper] = useState<HTMLElement>();
-    const wrapperProps: any = {
-        ...forwardedProps,
-        ref: mergeRefs(setWrapper, ref),
-        className: classNames(
-            className,
-            handleBasicClasses({ align, aspectRatio, prefix: CLASSNAME, size, theme, variant, hasBadge: !!badge }),
-            isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
-            fillHeight && `${CLASSNAME}--fill-height`,
-        ),
-        // Handle clickable Thumbnail a11y.
-        ...useClickable(props),
-    };
+    // Focus point.
+    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
 
-    // Update img style according to focus point and aspect ratio.
-    const style = useFocusPoint({ image, focusPoint, aspectRatio, imgRef, loadingState, wrapper });
+    const hasIconErrorFallback = hasError && typeof fallback === 'string';
+    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+    const imageErrorStyle: CSSProperties = {};
+    if (hasIconErrorFallback) {
+        // Keep the image layout on icon fallback.
+        imageErrorStyle.visibility = 'hidden';
+    } else if (hasCustomErrorFallback) {
+        // Remove the image on custom fallback.
+        imageErrorStyle.display = 'none';
+    }
+
+    const isLink = Boolean(linkProps?.href || linkAs);
+    const isButton = !!forwardedProps.onClick;
+    const isClickable = isButton || isLink;
+
+    let Wrapper: any = 'div';
+    const wrapperProps = { ...forwardedProps };
+    if (isLink) {
+        Wrapper = linkAs || 'a';
+        Object.assign(wrapperProps, linkProps);
+    } else if (isButton) {
+        Wrapper = 'button';
+        wrapperProps.type = forwardedProps.type || 'button';
+        wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+    }
 
     return (
-        <div {...wrapperProps}>
-            <div
-                className={`${CLASSNAME}__background`}
-                style={{
-                    ...style?.wrapper,
-                    // Remove from layout if image not loaded correctly (use fallback)
-                    display: hasError ? 'none' : undefined,
-                    // Hide while loading.
-                    visibility: isLoading ? 'hidden' : undefined,
-                }}
-            >
+        <Wrapper
+            {...wrapperProps}
+            ref={ref}
+            className={classNames(
+                linkProps?.className,
+                className,
+                handleBasicClasses({
+                    align,
+                    aspectRatio,
+                    prefix: CLASSNAME,
+                    size,
+                    theme,
+                    variant,
+                    isClickable,
+                    hasError,
+                    hasIconErrorFallback,
+                    hasCustomErrorFallback,
+                    isLoading,
+                    hasBadge: !!badge,
+                }),
+                fillHeight && `${CLASSNAME}--fill-height`,
+            )}
+        >
+            <div className={`${CLASSNAME}__background`}>
                 <img
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        ...style?.image,
+                        ...imageErrorStyle,
+                        ...focusPointStyle,
                     }}
-                    ref={mergeRefs(imgRef, propImgRef)}
-                    className={style?.image ? `${CLASSNAME}__focused-image` : `${CLASSNAME}__image`}
-                    crossOrigin={crossOrigin && !isInternetExplorer() ? crossOrigin : undefined}
+                    ref={mergeRefs(setImgElement, propImgRef)}
+                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
+                    crossOrigin={crossOrigin}
                     src={image}
                     alt={alt}
                     loading={loading}
                 />
+                {!isLoading && hasError && (
+                    <div className={`${CLASSNAME}__fallback`}>
+                        {hasIconErrorFallback ? (
+                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />
+                        ) : (
+                            fallback
+                        )}
+                    </div>
+                )}
             </div>
-            {hasError &&
-                (typeof fallback === 'string' ? (
-                    <Icon className={`${CLASSNAME}__fallback`} icon={fallback} size={size || Size.m} theme={theme} />
-                ) : (
-                    <div className={`${CLASSNAME}__fallback`}>{fallback}</div>
-                ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
-        </div>
+        </Wrapper>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -1,123 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
+<button
+  aria-label="Click me"
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
   onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
+  type="button"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Click me"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
-</div>
+</button>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'CustomFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
+<CustomLink
+  className="custom-class-name lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
+  href="https://google.fr"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
-      alt="foo"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="foo"
-      style={Object {}}
-    />
-  </div>
-</div>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
-  >
-    <img
-      alt="Image alt text"
-      className="lumx-thumbnail__image"
+      alt="Click me"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
-</div>
+</CustomLink>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'DefaultFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
+<a
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
+  href="https://google.fr"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
-      alt="foo"
-      className="lumx-thumbnail__image"
+      alt="Click me"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
-      src="foo"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
-</div>
+</a>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'IconFallback' 1`] = `
+exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
 <div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--theme-light lumx-thumbnail--variant-squared lumx-thumbnail--is-loading"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
-      alt="foo"
-      className="lumx-thumbnail__image"
+      alt="Image alt text"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
-      src="foo"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
@@ -126,20 +79,14 @@ exports[`<Thumbnail> Snapshots and structure should render story 'IconFallback'
 
 exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`] = `
 <div
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--has-badge"
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--is-loading lumx-thumbnail--has-badge"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Image alt text"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
       style={Object {}}

package/src/components/thumbnail/index.ts

@@ -1,2 +1,3 @@
 export * from './Thumbnail';
 export * from './types';
+export { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -0,0 +1,89 @@
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { AspectRatio } from '@lumx/react/components';
+import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
+
+// Calculate shift to center the focus point in the container.
+function shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {
+    const scaledSize = imageSize / scale;
+    const scaledFocusHeight = focusPoint * scaledSize;
+    const startFocus = scaledFocusHeight - containerSize / 2;
+    const shift = startFocus / (scaledSize - containerSize);
+    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,
+    element: HTMLImageElement | undefined,
+    isLoaded: boolean,
+): CSSProperties => {
+    // Get natural image size from imgProps or img element.
+    const imageSize: Size | 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 };
+        if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };
+        return undefined;
+    }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
+
+    // Get container size (dependant on imageSize).
+    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);
+    useEffect(
+        function updateContainerSize() {
+            const cWidth = element?.offsetWidth;
+            const cHeight = element?.offsetHeight;
+            if (cWidth && cHeight) {
+                // Update only if needed.
+                setContainerSize((oldContainerSize) =>
+                    oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight
+                        ? oldContainerSize
+                        : { width: cWidth, height: cHeight },
+                );
+            } else if (imageSize) {
+                // Wait for a render (in case the container size is dependent on the image size).
+                requestAnimationFrame(updateContainerSize);
+            }
+        },
+        [element?.offsetHeight, element?.offsetWidth, imageSize],
+    );
+
+    // Compute style.
+    const [style, setStyle] = useState<CSSProperties>({});
+    useEffect(() => {
+        // Focus point is not applicable => exit early
+        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {
+            return;
+        }
+        if (!element || !imageSize) {
+            // Focus point can be computed but now right now (image size unknown).
+            setStyle({ visibility: 'hidden' });
+            return;
+        }
+        if (!containerSize) {
+            // Missing container size abort focus point compute.
+            setStyle({});
+            return;
+        }
+
+        const heightScale = imageSize.height / containerSize.height;
+        const widthScale = imageSize.width / containerSize.width;
+        const scale = Math.min(widthScale, heightScale);
+
+        // Focus Y relative to the top (instead of the center)
+        const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
+        const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);
+
+        // Focus X relative to the left (instead of the center)
+        const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
+        const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);
+
+        const objectPosition = `${x}% ${y}%`;
+
+        // Update only if needed.
+        setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));
+    }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
+
+    return style;
+};

package/src/components/thumbnail/useImageLoad.ts

@@ -1,39 +1,40 @@
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
-export function useImageLoad(imgRef?: RefObject<HTMLImageElement>): LoadingState {
-    const [state, setState] = useState<LoadingState>('isLoading');
-
-    const update = useCallback(
-        (event?: any) => {
-            const img = imgRef?.current;
-            if (!img || !img.complete) {
-                setState('isLoading');
-                return;
-            }
+function getState(img: HTMLImageElement | null | undefined, event?: Event) {
+    // Error event occurred or image loaded empty.
+    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {
+        return 'hasError';
+    }
+    // Image is undefined or incomplete.
+    if (!img || !img.complete) {
+        return 'isLoading';
+    }
+    // Else loaded.
+    return 'isLoaded';
+}
 
-            if (event?.type === 'error' || (img.complete && img?.naturalWidth === 0)) {
-                setState('hasError');
-                return;
-            }
+export function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {
+    const [state, setState] = useState<LoadingState>(getState(imgRef));
 
-            setState('isLoaded');
-        },
-        [imgRef],
-    );
+    // Update state when changing image URL or DOM reference.
+    useEffect(() => {
+        setState(getState(imgRef));
+    }, [imageURL, imgRef]);
 
+    // Listen to `load` and `error` event on image
     useEffect(() => {
-        const img = imgRef?.current;
+        const img = imgRef;
         if (!img) return undefined;
-
-        update();
+        const update = (event?: Event) => setState(getState(img, event));
         img.addEventListener('load', update);
         img.addEventListener('error', update);
         return () => {
             img.removeEventListener('load', update);
             img.removeEventListener('error', update);
         };
-    }, [update, imgRef, imgRef?.current?.src]);
+    }, [imgRef, imgRef?.src]);
+
     return state;
 }

package/src/components/tooltip/Tooltip.stories.tsx

@@ -76,13 +76,16 @@ export const EmptyTooltip = () => (
 );
 
 export const TooltipWithDropdown = () => {
-    const buttonRef = useRef(null);
+    const [button, setButton] = useState<HTMLElement | null>(null);
+    const [isOpen, setOpen] = useState(false);
     return (
         <>
-            <Tooltip label="Tooltip">
-                <Button ref={buttonRef}>Anchor</Button>
+            <Tooltip label={!isOpen && 'Tooltip'} placement="top">
+                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
+                    Anchor
+                </Button>
             </Tooltip>
-            <Dropdown anchorRef={buttonRef} isOpen>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
                 Dropdown
             </Dropdown>
         </>

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -28,9 +28,7 @@ export const useInjectTooltipRef = (
             get(children, 'props.isDisabled') !== true
         ) {
             const element = children as any;
-            if (element.ref) {
-                setAnchorElement(element.ref.current);
-            }
+
             return cloneElement(element, {
                 ...element.props,
                 ...ariaProps,