@lumx/react 2.1.9-alpha-thumbnail5 → 2.1.9-alpha-thumbnail10

package/esm/_internal/Avatar2.js

@@ -62,7 +62,8 @@ var Avatar = forwardRef(function (props, ref) {
     aspectRatio: AspectRatio.square,
     size: size,
     image: image,
-    alt: alt
+    alt: alt,
+    theme: theme
   })), actions && React.createElement("div", {
     className: "".concat(CLASSNAME, "__actions")
   }, actions), badge && React.createElement("div", {

package/esm/_internal/Avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH;AART,KALJ,EAeKD,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAfhB,EAgBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAhBd,CADJ;AAoBH,CAnCkE;AAoCnEN,MAAM,CAACkB,WAAP,GAAqB5B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACmB,YAAP,GAAsB1B,aAAtB;;;;"}
+{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n                theme={theme}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH,GART;AASI,IAAA,KAAK,EAAER;AATX,KALJ,EAgBKO,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAhBhB,EAiBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAjBd,CADJ;AAqBH,CApCkE;AAqCnEN,MAAM,CAACkB,WAAP,GAAqB5B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACmB,YAAP,GAAsB1B,aAAtB;;;;"}

package/esm/_internal/Thumbnail2.js

@@ -118,7 +118,7 @@ var Thumbnail = forwardRef(function (props, ref) {
   var hasCustomErrorFallback = hasError && !hasIconErrorFallback;
   var imageErrorStyle = {};
 
-  if (isLoading || hasIconErrorFallback) {
+  if (hasIconErrorFallback) {
     // Keep the image layout on icon fallback.
     imageErrorStyle.visibility = 'hidden';
   } else if (hasCustomErrorFallback) {

package/esm/_internal/Thumbnail2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n    // Error event occurred or image loaded empty.\n    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n        return 'hasError';\n    }\n    // Image is undefined or incomplete.\n    if (!img || !img.complete) {\n        return 'isLoading';\n    }\n    // Else loaded.\n    return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: RefObject<HTMLImageElement>): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef?.current));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef?.current));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef?.current;\n        if (!img) return undefined;\n        const update = (event?: Event) => setState(getState(img, event));\n        img.addEventListener('load', update);\n        img.addEventListener('error', update);\n        return () => {\n            img.removeEventListener('load', update);\n            img.removeEventListener('error', update);\n        };\n    }, [imgRef, imgRef?.current?.src]);\n\n    return state;\n}\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useRef,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n    /** Alignment of the thumbnail in it's parent (requires flex parent). */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image cross origin resource policy. */\n    crossOrigin?: ImgHTMLProps['crossOrigin'];\n    /** Fallback icon (SVG path) or react node when image fails to load. */\n    fallback?: string | ReactNode;\n    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n    fillHeight?: boolean;\n    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n    focusPoint?: FocusPoint;\n    /** Image URL. */\n    image: string;\n    /** Props to inject into the native <img> element. */\n    imgProps?: ImgHTMLProps;\n    /** Reference to the native <img> element. */\n    imgRef?: Ref<HTMLImageElement>;\n    /** Set to true to force the display of the loading skeleton. */\n    isLoading?: boolean;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Variant of the component. */\n    variant?: ThumbnailVariant;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n    fallback: mdiImageBroken,\n    loading: 'lazy',\n    theme: Theme.light,\n};\n\nfunction getObjectPosition(aspectRatio: AspectRatio, focusPoint?: FocusPoint) {\n    if (aspectRatio === AspectRatio.original || (!focusPoint?.y && !focusPoint?.x)) return undefined;\n    const x = Math.round(Math.abs(((focusPoint?.x || 0) + 1) / 2) * 100);\n    const y = Math.round(Math.abs(((focusPoint?.y || 0) - 1) / 2) * 100);\n    return `${x}% ${y}%`;\n}\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback,\n        fillHeight,\n        focusPoint,\n        image,\n        imgProps,\n        imgRef: propImgRef,\n        isLoading: isLoadingProp,\n        loading,\n        size,\n        theme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    const imgRef = useRef<HTMLImageElement>(null);\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgRef);\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    const hasIconErrorFallback = hasError && typeof fallback === 'string';\n    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n    const imageErrorStyle: CSSProperties = {};\n    if (isLoading || hasIconErrorFallback) {\n        // Keep the image layout on icon fallback.\n        imageErrorStyle.visibility = 'hidden';\n    } else if (hasCustomErrorFallback) {\n        // Remove the image on custom fallback.\n        imageErrorStyle.display = 'none';\n    }\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isButton = !!forwardedProps.onClick;\n    const isClickable = isButton || isLink;\n\n    let Wrapper: any = 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isLink) {\n        Wrapper = linkAs || 'a';\n        Object.assign(wrapperProps, linkProps);\n    } else if (isButton) {\n        Wrapper = 'button';\n    }\n\n    return (\n        <Wrapper\n            {...wrapperProps}\n            ref={ref}\n            className={classNames(\n                linkProps?.className,\n                className,\n                handleBasicClasses({\n                    align,\n                    aspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isClickable,\n                    hasError,\n                    hasIconErrorFallback,\n                    hasCustomErrorFallback,\n                    isLoading,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <div className={`${CLASSNAME}__background`}>\n                <img\n                    {...imgProps}\n                    style={{\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        // Focus point.\n                        objectPosition: getObjectPosition(aspectRatio, focusPoint),\n                    }}\n                    ref={mergeRefs(imgRef, propImgRef)}\n                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}\n                    crossOrigin={crossOrigin}\n                    src={image}\n                    alt={alt}\n                    loading={loading}\n                />\n                {!isLoading && hasError && (\n                    <div className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </div>\n                )}\n            </div>\n            {badge &&\n                React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n        </Wrapper>\n    );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","current","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","getObjectPosition","aspectRatio","focusPoint","AspectRatio","original","y","x","Math","round","abs","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","image","imgProps","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","useRef","loadingState","hasError","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","visibility","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","style","objectPosition","mergeRefs","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n    // Error event occurred or image loaded empty.\n    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n        return 'hasError';\n    }\n    // Image is undefined or incomplete.\n    if (!img || !img.complete) {\n        return 'isLoading';\n    }\n    // Else loaded.\n    return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: RefObject<HTMLImageElement>): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef?.current));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef?.current));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef?.current;\n        if (!img) return undefined;\n        const update = (event?: Event) => setState(getState(img, event));\n        img.addEventListener('load', update);\n        img.addEventListener('error', update);\n        return () => {\n            img.removeEventListener('load', update);\n            img.removeEventListener('error', update);\n        };\n    }, [imgRef, imgRef?.current?.src]);\n\n    return state;\n}\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useRef,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n    /** Alignment of the thumbnail in it's parent (requires flex parent). */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image cross origin resource policy. */\n    crossOrigin?: ImgHTMLProps['crossOrigin'];\n    /** Fallback icon (SVG path) or react node when image fails to load. */\n    fallback?: string | ReactNode;\n    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n    fillHeight?: boolean;\n    /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n    focusPoint?: FocusPoint;\n    /** Image URL. */\n    image: string;\n    /** Props to inject into the native <img> element. */\n    imgProps?: ImgHTMLProps;\n    /** Reference to the native <img> element. */\n    imgRef?: Ref<HTMLImageElement>;\n    /** Set to true to force the display of the loading skeleton. */\n    isLoading?: boolean;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Variant of the component. */\n    variant?: ThumbnailVariant;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n    fallback: mdiImageBroken,\n    loading: 'lazy',\n    theme: Theme.light,\n};\n\nfunction getObjectPosition(aspectRatio: AspectRatio, focusPoint?: FocusPoint) {\n    if (aspectRatio === AspectRatio.original || (!focusPoint?.y && !focusPoint?.x)) return undefined;\n    const x = Math.round(Math.abs(((focusPoint?.x || 0) + 1) / 2) * 100);\n    const y = Math.round(Math.abs(((focusPoint?.y || 0) - 1) / 2) * 100);\n    return `${x}% ${y}%`;\n}\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback,\n        fillHeight,\n        focusPoint,\n        image,\n        imgProps,\n        imgRef: propImgRef,\n        isLoading: isLoadingProp,\n        loading,\n        size,\n        theme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    const imgRef = useRef<HTMLImageElement>(null);\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgRef);\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    const hasIconErrorFallback = hasError && typeof fallback === 'string';\n    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n    const imageErrorStyle: CSSProperties = {};\n    if (hasIconErrorFallback) {\n        // Keep the image layout on icon fallback.\n        imageErrorStyle.visibility = 'hidden';\n    } else if (hasCustomErrorFallback) {\n        // Remove the image on custom fallback.\n        imageErrorStyle.display = 'none';\n    }\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isButton = !!forwardedProps.onClick;\n    const isClickable = isButton || isLink;\n\n    let Wrapper: any = 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isLink) {\n        Wrapper = linkAs || 'a';\n        Object.assign(wrapperProps, linkProps);\n    } else if (isButton) {\n        Wrapper = 'button';\n    }\n\n    return (\n        <Wrapper\n            {...wrapperProps}\n            ref={ref}\n            className={classNames(\n                linkProps?.className,\n                className,\n                handleBasicClasses({\n                    align,\n                    aspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isClickable,\n                    hasError,\n                    hasIconErrorFallback,\n                    hasCustomErrorFallback,\n                    isLoading,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <div className={`${CLASSNAME}__background`}>\n                <img\n                    {...imgProps}\n                    style={{\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        // Focus point.\n                        objectPosition: getObjectPosition(aspectRatio, focusPoint),\n                    }}\n                    ref={mergeRefs(imgRef, propImgRef)}\n                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}\n                    crossOrigin={crossOrigin}\n                    src={image}\n                    alt={alt}\n                    loading={loading}\n                />\n                {!isLoading && hasError && (\n                    <div className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </div>\n                )}\n            </div>\n            {badge &&\n                React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n        </Wrapper>\n    );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","current","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","getObjectPosition","aspectRatio","focusPoint","AspectRatio","original","y","x","Math","round","abs","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","image","imgProps","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","useRef","loadingState","hasError","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","visibility","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","style","objectPosition","mergeRefs","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail5",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail5",
+        "@lumx/core": "^2.1.9-alpha-thumbnail10",
+        "@lumx/icons": "^2.1.9-alpha-thumbnail10",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.9-alpha-thumbnail5",
-    "gitHead": "6e250a16647f7777c81df31b4b203f1aa118756a"
+    "version": "2.1.9-alpha-thumbnail10",
+    "gitHead": "bab7c83bb2ad4ea7ff3f4a8328a07a57f87ff88e"
 }

package/src/components/avatar/Avatar.tsx

@@ -93,6 +93,7 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
                 size={size}
                 image={image}
                 alt={alt}
+                theme={theme}
             />
             {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
             {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}

package/src/components/thumbnail/Thumbnail.tsx

@@ -134,7 +134,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const hasIconErrorFallback = hasError && typeof fallback === 'string';
     const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
     const imageErrorStyle: CSSProperties = {};
-    if (isLoading || hasIconErrorFallback) {
+    if (hasIconErrorFallback) {
         // Keep the image layout on icon fallback.
         imageErrorStyle.visibility = 'hidden';
     } else if (hasCustomErrorFallback) {

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

@@ -16,7 +16,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       style={
         Object {
           "objectPosition": undefined,
-          "visibility": "hidden",
         }
       }
     />
@@ -40,7 +39,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
       style={
         Object {
           "objectPosition": undefined,
-          "visibility": "hidden",
         }
       }
     />
@@ -64,7 +62,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink'
       style={
         Object {
           "objectPosition": undefined,
-          "visibility": "hidden",
         }
       }
     />
@@ -87,7 +84,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] =
       style={
         Object {
           "objectPosition": undefined,
-          "visibility": "hidden",
         }
       }
     />
@@ -110,7 +106,6 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
       style={
         Object {
           "objectPosition": undefined,
-          "visibility": "hidden",
         }
       }
     />