@lumx/react 2.2.0 → 2.2.1-alpha.0

package/esm/_internal/Avatar2.js

@@ -39,12 +39,14 @@ var Avatar = forwardRef(function (props, ref) {
       badge = props.badge,
       className = props.className,
       image = props.image,
+      linkProps = props.linkProps,
+      linkAs = props.linkAs,
       onClick = props.onClick,
       onKeyPress = props.onKeyPress,
       size = props.size,
       theme = props.theme,
       thumbnailProps = props.thumbnailProps,
-      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"]);
+      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"]);
 
   return React.createElement("div", _extends({
     ref: ref
@@ -55,6 +57,8 @@ var Avatar = forwardRef(function (props, ref) {
       theme: theme
     }))
   }), React.createElement(Thumbnail, _extends({
+    linkProps: linkProps,
+    linkAs: linkAs,
     className: "".concat(CLASSNAME, "__thumbnail"),
     onClick: onClick,
     onKeyPress: onKeyPress

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                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;;;;"}
+{"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    /** 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    /** 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        linkProps,\n        linkAs,\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                linkProps={linkProps}\n                linkAs={linkAs}\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","linkProps","linkAs","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAoCA;;;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,GAe5EF,KAf4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAe5EH,KAf4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAe5EJ,KAf4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAe5EL,KAf4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAe5EN,KAf4E,CAM5EM,KAN4E;AAAA,MAO5EC,SAP4E,GAe5EP,KAf4E,CAO5EO,SAP4E;AAAA,MAQ5EC,MAR4E,GAe5ER,KAf4E,CAQ5EQ,MAR4E;AAAA,MAS5EC,OAT4E,GAe5ET,KAf4E,CAS5ES,OAT4E;AAAA,MAU5EC,UAV4E,GAe5EV,KAf4E,CAU5EU,UAV4E;AAAA,MAW5ElB,IAX4E,GAe5EQ,KAf4E,CAW5ER,IAX4E;AAAA,MAY5EG,KAZ4E,GAe5EK,KAf4E,CAY5EL,KAZ4E;AAAA,MAa5EgB,cAb4E,GAe5EX,KAf4E,CAa5EW,cAb4E;AAAA,MAczEC,cAdyE,4BAe5EZ,KAf4E;;AAiBhF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACR,SAAD,EAAYS,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE1B,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,EAAEY,SADf;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,SAAS,YAAKnB,SAAL,gBAHb;AAII,IAAA,OAAO,EAAEoB,OAJb;AAKI,IAAA,UAAU,EAAEC;AALhB,KAMQC,cANR;AAOI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAP7B;AAQI,IAAA,IAAI,EAAEzB,IARV;AASI,IAAA,KAAK,EAAEc,KATX;AAUI,IAAA,GAAG,EAAEH,GAVT;AAWI,IAAA,KAAK,EAAER;AAXX,KALJ,EAkBKO,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAlBhB,EAmBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAnBd,CADJ;AAuBH,CAxCkE;AAyCnEN,MAAM,CAACoB,WAAP,GAAqB9B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACqB,YAAP,GAAsB5B,aAAtB;;;;"}

package/esm/_internal/Thumbnail2.js

@@ -236,6 +236,8 @@ var Thumbnail = forwardRef(function (props, ref) {
     Object.assign(wrapperProps, linkProps);
   } else if (isButton) {
     Wrapper = 'button';
+    wrapperProps.type = forwardedProps.type || 'button';
+    wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
 
   return React.createElement(Wrapper, _extends({}, wrapperProps, {

package/esm/_internal/Thumbnail2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { 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?: HTMLImageElement): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef;\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?.src]);\n\n    return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n    const scaledSize = imageSize / scale;\n    const scaledFocusHeight = focusPoint * scaledSize;\n    const startFocus = scaledFocusHeight - containerSize / 2;\n    const shift = startFocus / (scaledSize - containerSize);\n    return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n    { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n    element: HTMLImageElement | undefined,\n    isLoaded: boolean,\n): CSSProperties => {\n    // Get natural image size from imgProps or img element.\n    const imageSize: Size | undefined = useMemo(() => {\n        // Focus point is not applicable => exit early\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n        if (typeof width === 'number' && typeof height === 'number') return { width, height };\n        if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n        return undefined;\n    }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n    // Get container size (dependant on imageSize).\n    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);\n    useEffect(\n        function updateContainerSize() {\n            const cWidth = element?.offsetWidth;\n            const cHeight = element?.offsetHeight;\n            if (cWidth && cHeight) {\n                // Update only if needed.\n                setContainerSize((oldContainerSize) =>\n                    oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n                        ? oldContainerSize\n                        : { width: cWidth, height: cHeight },\n                );\n            } else if (imageSize) {\n                // Wait for a render (in case the container size is dependent on the image size).\n                requestAnimationFrame(updateContainerSize);\n            }\n        },\n        [element?.offsetHeight, element?.offsetWidth, imageSize],\n    );\n\n    // Compute style.\n    const [style, setStyle] = useState<CSSProperties>({});\n    useEffect(() => {\n        // Focus point is not applicable => exit early\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n            return;\n        }\n        if (!element || !imageSize) {\n            // Focus point can be computed but now right now (image size unknown).\n            setStyle({ visibility: 'hidden' });\n            return;\n        }\n        if (!containerSize) {\n            // Missing container size abort focus point compute.\n            setStyle({});\n            return;\n        }\n\n        const heightScale = imageSize.height / containerSize.height;\n        const widthScale = imageSize.width / containerSize.width;\n        const scale = Math.min(widthScale, heightScale);\n\n        // Focus Y relative to the top (instead of the center)\n        const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n        const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n        // Focus X relative to the left (instead of the center)\n        const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n        const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n        const objectPosition = `${x}% ${y}%`;\n\n        // Update only if needed.\n        setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n    }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n    return style;\n};\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\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 { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\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\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 [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgElement);\n    const isLoaded = loadingState === 'isLoaded';\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    // Focus point.\n    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\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                        ...focusPointStyle,\n                    }}\n                    ref={mergeRefs(setImgElement, 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","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","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/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { 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?: HTMLImageElement): LoadingState {\n    const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n    // Update state when changing image URL or DOM reference.\n    useEffect(() => {\n        setState(getState(imgRef));\n    }, [imageURL, imgRef]);\n\n    // Listen to `load` and `error` event on image\n    useEffect(() => {\n        const img = imgRef;\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?.src]);\n\n    return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n    const scaledSize = imageSize / scale;\n    const scaledFocusHeight = focusPoint * scaledSize;\n    const startFocus = scaledFocusHeight - containerSize / 2;\n    const shift = startFocus / (scaledSize - containerSize);\n    return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n    { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n    element: HTMLImageElement | undefined,\n    isLoaded: boolean,\n): CSSProperties => {\n    // Get natural image size from imgProps or img element.\n    const imageSize: Size | undefined = useMemo(() => {\n        // Focus point is not applicable => exit early\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n        if (typeof width === 'number' && typeof height === 'number') return { width, height };\n        if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n        return undefined;\n    }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n    // Get container size (dependant on imageSize).\n    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);\n    useEffect(\n        function updateContainerSize() {\n            const cWidth = element?.offsetWidth;\n            const cHeight = element?.offsetHeight;\n            if (cWidth && cHeight) {\n                // Update only if needed.\n                setContainerSize((oldContainerSize) =>\n                    oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n                        ? oldContainerSize\n                        : { width: cWidth, height: cHeight },\n                );\n            } else if (imageSize) {\n                // Wait for a render (in case the container size is dependent on the image size).\n                requestAnimationFrame(updateContainerSize);\n            }\n        },\n        [element?.offsetHeight, element?.offsetWidth, imageSize],\n    );\n\n    // Compute style.\n    const [style, setStyle] = useState<CSSProperties>({});\n    useEffect(() => {\n        // Focus point is not applicable => exit early\n        if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n            return;\n        }\n        if (!element || !imageSize) {\n            // Focus point can be computed but now right now (image size unknown).\n            setStyle({ visibility: 'hidden' });\n            return;\n        }\n        if (!containerSize) {\n            // Missing container size abort focus point compute.\n            setStyle({});\n            return;\n        }\n\n        const heightScale = imageSize.height / containerSize.height;\n        const widthScale = imageSize.width / containerSize.width;\n        const scale = Math.min(widthScale, heightScale);\n\n        // Focus Y relative to the top (instead of the center)\n        const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n        const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n        // Focus X relative to the left (instead of the center)\n        const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n        const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n        const objectPosition = `${x}% ${y}%`;\n\n        // Update only if needed.\n        setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n    }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n    return style;\n};\n","import React, {\n    CSSProperties,\n    forwardRef,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\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 { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\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\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 [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n    // Image loading state.\n    const loadingState = useImageLoad(image, imgElement);\n    const isLoaded = loadingState === 'isLoaded';\n    const isLoading = isLoadingProp || loadingState === 'isLoading';\n    const hasError = loadingState === 'hasError';\n\n    // Focus point.\n    const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\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        wrapperProps.type = forwardedProps.type || 'button';\n        wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\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                        ...focusPointStyle,\n                    }}\n                    ref={mergeRefs(setImgElement, 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","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Tooltip2.js

@@ -30,11 +30,6 @@ var useInjectTooltipRef = function useInjectTooltipRef(children, setAnchorElemen
 
     if (children && get(children, '$$typeof') && get(children, 'props.disabled') !== true && get(children, 'props.isDisabled') !== true) {
       var element = children;
-
-      if (element.ref) {
-        setAnchorElement(element.ref.current);
-      }
-
       return cloneElement(element, _objectSpread2({}, element.props, {}, ariaProps, {
         ref: mergeRefs(element.ref, setAnchorElement)
       }));

package/esm/_internal/Tooltip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param  children         Original tooltip anchor.\n * @param  setAnchorElement Set tooltip anchor element.\n * @param  isOpen           Whether the tooltip is open or not.\n * @param  id               Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n    children: ReactNode,\n    setAnchorElement: (e: HTMLDivElement) => void,\n    isOpen: boolean,\n    id: string,\n): ReactNode => {\n    return useMemo(() => {\n        const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n        if (\n            children &&\n            get(children, '$$typeof') &&\n            get(children, 'props.disabled') !== true &&\n            get(children, 'props.isDisabled') !== true\n        ) {\n            const element = children as any;\n            if (element.ref) {\n                setAnchorElement(element.ref.current);\n            }\n            return cloneElement(element, {\n                ...element.props,\n                ...ariaProps,\n                ref: mergeRefs(element.ref, setAnchorElement),\n            });\n        }\n        return (\n            <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n                {children}\n            </div>\n        );\n    }, [isOpen, id, children, setAnchorElement]);\n};\n","import { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useRef, useState } from 'react';\nimport pull from 'lodash/pull';\nimport debounce from 'lodash/debounce';\n\ntype Tooltip = { open: Callback; close: Callback; anchorElement: HTMLElement };\n\n/**\n * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when\n * entering and leaving their anchor element.\n */\nconst tooltipMouseToggle = (() => {\n    /** List of tooltips to toggle on anchor enter/leave. */\n    let tooltips: Array<Tooltip> | undefined;\n\n    /** Global listener added on the document. */\n    let globalListener: undefined | ((evt: MouseEvent) => void);\n\n    function addGlobalListener() {\n        if (globalListener) return;\n        globalListener = debounce((evt) => {\n            if (!tooltips || !evt.target) return;\n            for (const { open, close, anchorElement } of tooltips) {\n                if (anchorElement.contains(evt.target as any)) {\n                    open();\n                } else {\n                    close();\n                }\n            }\n        }, 10);\n        document.addEventListener('mouseover', globalListener);\n    }\n\n    function removeGlobalListener() {\n        if (!globalListener) return;\n        document.removeEventListener('mouseover', globalListener);\n        globalListener = undefined;\n    }\n\n    return {\n        addTooltip(tooltip: Tooltip) {\n            if (!tooltips) {\n                tooltips = [];\n                addGlobalListener();\n            }\n            tooltips.push(tooltip);\n        },\n        removeTooltip(actions: Tooltip) {\n            if (!tooltips) return;\n            pull(tooltips, actions);\n            if (tooltips.length === 0) {\n                removeGlobalListener();\n                tooltips = undefined;\n            }\n        },\n    };\n})();\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param  delay         Delay in millisecond to display the tooltip.\n * @param  anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number, anchorElement: HTMLElement | null): boolean {\n    const timer = useRef<number>();\n    const shouldOpen = useRef<boolean>(false);\n    const [isOpen, setIsOpen] = useState(false);\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        const tooltip: Tooltip = {\n            anchorElement,\n            open() {\n                if (!shouldOpen.current) {\n                    shouldOpen.current = true;\n                    timer.current = setTimeout(() => {\n                        setIsOpen(shouldOpen.current);\n                    }, delay) as any;\n                }\n            },\n            close() {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                    timer.current = undefined;\n                }\n                if (shouldOpen.current) {\n                    shouldOpen.current = false;\n                    setIsOpen(shouldOpen.current);\n                }\n            },\n        };\n        const keydown = onEscapePressed(tooltip.close);\n\n        tooltipMouseToggle.addTooltip(tooltip);\n        anchorElement.addEventListener('focusin', tooltip.open);\n        anchorElement.addEventListener('focusout', tooltip.close);\n        anchorElement.addEventListener('keydown', keydown);\n        return () => {\n            tooltipMouseToggle.removeTooltip(tooltip);\n            anchorElement.removeEventListener('focusin', tooltip.open);\n            anchorElement.removeEventListener('focusout', tooltip.close);\n            anchorElement.removeEventListener('keydown', keydown);\n            tooltip.close();\n        };\n    }, [anchorElement, delay, timer, shouldOpen]);\n\n    return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n    /** Anchor (element on which we activate the tooltip). */\n    children: ReactNode;\n    /** Delay (in ms) before closing the tooltip. */\n    delay?: number;\n    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n    forceOpen?: boolean;\n    /** Label text. */\n    label?: string | null | false;\n    /** Placement of the tooltip relative to the anchor. */\n    placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n    delay: 500,\n    placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n    if (!label) {\n        return <>{children}</>;\n    }\n\n    const id = useMemo(() => `tooltip-${uid()}`, []);\n\n    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n    const { styles, attributes } = usePopper(anchorElement, popperElement, {\n        placement,\n        modifiers: [\n            {\n                name: 'offset',\n                options: { offset: [0, ARROW_SIZE] },\n            },\n        ],\n    });\n\n    const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n    const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;\n    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n    return (\n        <>\n            {wrappedChildren}\n            {isOpen &&\n                createPortal(\n                    <div\n                        ref={mergeRefs(ref, setPopperElement)}\n                        {...forwardedProps}\n                        id={id}\n                        role=\"tooltip\"\n                        aria-label={label}\n                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n                        style={styles.popper}\n                        {...attributes.popper}\n                    >\n                        <div className={`${CLASSNAME}__arrow`} />\n                        <div className={`${CLASSNAME}__inner`}>\n                            {label.indexOf('\\n') !== -1\n                                ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n                                : label}\n                        </div>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","ref","current","cloneElement","props","mergeRefs","tooltipMouseToggle","tooltips","globalListener","addGlobalListener","debounce","evt","target","open","close","anchorElement","contains","document","addEventListener","removeGlobalListener","removeEventListener","addTooltip","tooltip","push","removeTooltip","actions","pull","length","useTooltipOpen","delay","timer","useRef","shouldOpen","useState","setIsOpen","useEffect","setTimeout","clearTimeout","keydown","onEscapePressed","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","body","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param  children         Original tooltip anchor.\n * @param  setAnchorElement Set tooltip anchor element.\n * @param  isOpen           Whether the tooltip is open or not.\n * @param  id               Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n    children: ReactNode,\n    setAnchorElement: (e: HTMLDivElement) => void,\n    isOpen: boolean,\n    id: string,\n): ReactNode => {\n    return useMemo(() => {\n        const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n        if (\n            children &&\n            get(children, '$$typeof') &&\n            get(children, 'props.disabled') !== true &&\n            get(children, 'props.isDisabled') !== true\n        ) {\n            const element = children as any;\n\n            return cloneElement(element, {\n                ...element.props,\n                ...ariaProps,\n                ref: mergeRefs(element.ref, setAnchorElement),\n            });\n        }\n        return (\n            <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n                {children}\n            </div>\n        );\n    }, [isOpen, id, children, setAnchorElement]);\n};\n","import { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useRef, useState } from 'react';\nimport pull from 'lodash/pull';\nimport debounce from 'lodash/debounce';\n\ntype Tooltip = { open: Callback; close: Callback; anchorElement: HTMLElement };\n\n/**\n * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when\n * entering and leaving their anchor element.\n */\nconst tooltipMouseToggle = (() => {\n    /** List of tooltips to toggle on anchor enter/leave. */\n    let tooltips: Array<Tooltip> | undefined;\n\n    /** Global listener added on the document. */\n    let globalListener: undefined | ((evt: MouseEvent) => void);\n\n    function addGlobalListener() {\n        if (globalListener) return;\n        globalListener = debounce((evt) => {\n            if (!tooltips || !evt.target) return;\n            for (const { open, close, anchorElement } of tooltips) {\n                if (anchorElement.contains(evt.target as any)) {\n                    open();\n                } else {\n                    close();\n                }\n            }\n        }, 10);\n        document.addEventListener('mouseover', globalListener);\n    }\n\n    function removeGlobalListener() {\n        if (!globalListener) return;\n        document.removeEventListener('mouseover', globalListener);\n        globalListener = undefined;\n    }\n\n    return {\n        addTooltip(tooltip: Tooltip) {\n            if (!tooltips) {\n                tooltips = [];\n                addGlobalListener();\n            }\n            tooltips.push(tooltip);\n        },\n        removeTooltip(actions: Tooltip) {\n            if (!tooltips) return;\n            pull(tooltips, actions);\n            if (tooltips.length === 0) {\n                removeGlobalListener();\n                tooltips = undefined;\n            }\n        },\n    };\n})();\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param  delay         Delay in millisecond to display the tooltip.\n * @param  anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number, anchorElement: HTMLElement | null): boolean {\n    const timer = useRef<number>();\n    const shouldOpen = useRef<boolean>(false);\n    const [isOpen, setIsOpen] = useState(false);\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        const tooltip: Tooltip = {\n            anchorElement,\n            open() {\n                if (!shouldOpen.current) {\n                    shouldOpen.current = true;\n                    timer.current = setTimeout(() => {\n                        setIsOpen(shouldOpen.current);\n                    }, delay) as any;\n                }\n            },\n            close() {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                    timer.current = undefined;\n                }\n                if (shouldOpen.current) {\n                    shouldOpen.current = false;\n                    setIsOpen(shouldOpen.current);\n                }\n            },\n        };\n        const keydown = onEscapePressed(tooltip.close);\n\n        tooltipMouseToggle.addTooltip(tooltip);\n        anchorElement.addEventListener('focusin', tooltip.open);\n        anchorElement.addEventListener('focusout', tooltip.close);\n        anchorElement.addEventListener('keydown', keydown);\n        return () => {\n            tooltipMouseToggle.removeTooltip(tooltip);\n            anchorElement.removeEventListener('focusin', tooltip.open);\n            anchorElement.removeEventListener('focusout', tooltip.close);\n            anchorElement.removeEventListener('keydown', keydown);\n            tooltip.close();\n        };\n    }, [anchorElement, delay, timer, shouldOpen]);\n\n    return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n    /** Anchor (element on which we activate the tooltip). */\n    children: ReactNode;\n    /** Delay (in ms) before closing the tooltip. */\n    delay?: number;\n    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n    forceOpen?: boolean;\n    /** Label text. */\n    label?: string | null | false;\n    /** Placement of the tooltip relative to the anchor. */\n    placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n    delay: 500,\n    placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n    if (!label) {\n        return <>{children}</>;\n    }\n\n    const id = useMemo(() => `tooltip-${uid()}`, []);\n\n    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n    const { styles, attributes } = usePopper(anchorElement, popperElement, {\n        placement,\n        modifiers: [\n            {\n                name: 'offset',\n                options: { offset: [0, ARROW_SIZE] },\n            },\n        ],\n    });\n\n    const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n    const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;\n    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n    return (\n        <>\n            {wrappedChildren}\n            {isOpen &&\n                createPortal(\n                    <div\n                        ref={mergeRefs(ref, setPopperElement)}\n                        {...forwardedProps}\n                        id={id}\n                        role=\"tooltip\"\n                        aria-label={label}\n                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n                        style={styles.popper}\n                        {...attributes.popper}\n                    >\n                        <div className={`${CLASSNAME}__arrow`} />\n                        <div className={`${CLASSNAME}__inner`}>\n                            {label.indexOf('\\n') !== -1\n                                ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n                                : label}\n                        </div>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","tooltipMouseToggle","tooltips","globalListener","addGlobalListener","debounce","evt","target","open","close","anchorElement","contains","document","addEventListener","removeGlobalListener","removeEventListener","addTooltip","tooltip","push","removeTooltip","actions","pull","length","useTooltipOpen","delay","timer","useRef","shouldOpen","useState","setIsOpen","useEffect","current","setTimeout","clearTimeout","keydown","onEscapePressed","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","body","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/UserBlock.js

@@ -1,8 +1,10 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Size, Orientation, Theme } from './components.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { Size, Orientation, Theme, ColorPalette } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
+import isEmpty from 'lodash/isEmpty';
 import { A as Avatar } from './Avatar2.js';
+import { L as Link } from './Link2.js';
 
 /**
  * Component display name.
@@ -34,8 +36,11 @@ var UserBlock = forwardRef(function (props, ref) {
   var avatarProps = props.avatarProps,
       className = props.className,
       fields = props.fields,
+      linkProps = props.linkProps,
+      linkAs = props.linkAs,
       multipleActions = props.multipleActions,
       name = props.name,
+      nameProps = props.nameProps,
       onClick = props.onClick,
       onMouseEnter = props.onMouseEnter,
       onMouseLeave = props.onMouseLeave,
@@ -43,7 +48,7 @@ var UserBlock = forwardRef(function (props, ref) {
       simpleAction = props.simpleAction,
       size = props.size,
       theme = props.theme,
-      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
+      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
 
   var componentSize = size; // Special case - When using vertical orientation force the size to be Sizes.l.
 
@@ -52,19 +57,36 @@ var UserBlock = forwardRef(function (props, ref) {
   }
 
   var shouldDisplayActions = orientation === Orientation.vertical;
-  var nameBlock = name && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
-  React.createElement("span", {
-    className: "".concat(CLASSNAME, "__name"),
-    onClick: onClick,
-    tabIndex: onClick ? 0 : -1
-  }, name);
+  var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
+  var isClickable = !!onClick || isLink;
+  var nameBlock = React.useMemo(function () {
+    if (isEmpty(name)) {
+      return null;
+    }
+
+    var NameComponent = 'span';
+
+    var nProps = _objectSpread2({}, nameProps, {
+      className: classnames("".concat(CLASSNAME, "__name"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
+    });
+
+    if (isClickable) {
+      NameComponent = Link;
+      Object.assign(nProps, _objectSpread2({}, linkProps, {
+        linkAs: linkAs,
+        color: ColorPalette.dark
+      }));
+    }
+
+    return React.createElement(NameComponent, nProps, name);
+  }, [isClickable, linkAs, linkProps, name, nameProps]);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
-  }, fields.map(function (aField, idx) {
+  }, fields.map(function (field, idx) {
     return React.createElement("span", {
       key: idx,
       className: "".concat(CLASSNAME, "__field")
-    }, aField);
+    }, field);
   }));
   return React.createElement("div", _extends({
     ref: ref
@@ -73,18 +95,20 @@ var UserBlock = forwardRef(function (props, ref) {
       prefix: CLASSNAME,
       orientation: orientation,
       size: componentSize,
-      theme: theme
+      theme: theme,
+      isClickable: isClickable
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter
-  }), avatarProps && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__avatar")
-  }, React.createElement(Avatar, _extends({}, avatarProps, {
+  }), avatarProps && React.createElement(Avatar, _extends({
+    linkAs: linkAs,
+    linkProps: linkProps
+  }, avatarProps, {
+    className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
     size: componentSize,
     onClick: onClick,
-    tabIndex: onClick ? 0 : -1,
     theme: theme
-  }))), (fields || name) && React.createElement("div", {
+  })), (fields || name) && React.createElement("div", {
     className: "".concat(CLASSNAME, "__wrapper")
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && React.createElement("div", {
     className: "".concat(CLASSNAME, "__action")

package/esm/_internal/UserBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const nameBlock: ReactNode = name && (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions\n        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>\n            {name}\n        </span>\n    );\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <div className={`${CLASSNAME}__avatar`}>\n                    <Avatar\n                        {...avatarProps}\n                        size={componentSize}\n                        onClick={onClick}\n                        tabIndex={onClick ? 0 : -1}\n                        theme={theme}\n                    />\n                </div>\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","nameBlock","fieldsBlock","s","map","aField","idx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport classNames from 'classnames';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar 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    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: string;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [isClickable, linkAs, linkProps, name, nameProps]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","fieldsBlock","s","map","field","idx","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/user-block.js

@@ -9,7 +9,9 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
 import './Avatar2.js';
+import './renderLink.js';
 import './Icon2.js';
+import './Link2.js';
 import './Thumbnail2.js';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.0",
-        "@lumx/icons": "^2.2.0",
+        "@lumx/core": "^2.2.1-alpha.0",
+        "@lumx/icons": "^2.2.1-alpha.0",
         "@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.2.0",
-    "gitHead": "6d4aa1b10bf4cde545cdfc67c73778c70a549956"
+    "version": "2.2.1-alpha.0",
+    "gitHead": "32d69b12124ecb7dcddb0c9a0649b5a2eba3aead"
 }