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

package/esm/_internal/Thumbnail2.js

@@ -73,8 +73,8 @@ var DEFAULT_PROPS = {
 
 function getObjectPosition(aspectRatio, focusPoint) {
   if (aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x)) return undefined;
-  var x = (((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2 * 100;
-  var y = (((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2 * 100;
+  var x = Math.round(Math.abs((((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2) * 100);
+  var y = Math.round(Math.abs((((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2) * 100);
   return "".concat(x, "% ").concat(y, "%");
 }
 /**
@@ -107,15 +107,25 @@ var Thumbnail = forwardRef(function (props, ref) {
       variant = props.variant,
       linkProps = props.linkProps,
       linkAs = props.linkAs,
-      _props$showSkeletonLo = props.showSkeletonLoading,
-      showSkeletonLoading = _props$showSkeletonLo === void 0 ? true : _props$showSkeletonLo,
-      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs", "showSkeletonLoading"]);
+      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"]);
 
   var imgRef = useRef(null); // Image loading state.
 
   var loadingState = useImageLoad(image, imgRef);
   var isLoading = isLoadingProp || loadingState === 'isLoading';
   var hasError = loadingState === 'hasError';
+  var hasIconErrorFallback = hasError && typeof fallback === 'string';
+  var hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+  var imageErrorStyle = {};
+
+  if (isLoading || hasIconErrorFallback) {
+    // Keep the image layout on icon fallback.
+    imageErrorStyle.visibility = 'hidden';
+  } else if (hasCustomErrorFallback) {
+    // Remove the image on custom fallback.
+    imageErrorStyle.display = 'none';
+  }
+
   var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
   var isButton = !!forwardedProps.onClick;
   var isClickable = isButton || isLink;
@@ -141,17 +151,15 @@ var Thumbnail = forwardRef(function (props, ref) {
       variant: variant,
       isClickable: isClickable,
       hasError: hasError,
-      isLoading: showSkeletonLoading && isLoading,
+      hasIconErrorFallback: hasIconErrorFallback,
+      hasCustomErrorFallback: hasCustomErrorFallback,
+      isLoading: isLoading,
       hasBadge: !!badge
     }), fillHeight && "".concat(CLASSNAME, "--fill-height"))
   }), React.createElement("div", {
     className: "".concat(CLASSNAME, "__background")
   }, React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {
-      //
-      //display: hasError && (!imgProps?.width || !imgProps?.height) ? 'none' : undefined,
-      // Hide while loading.
-      visibility: hasError || hasError && isLoading ? 'hidden' : undefined,
+    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, imageErrorStyle, {
       // Focus point.
       objectPosition: getObjectPosition(aspectRatio, focusPoint)
     }),
@@ -163,7 +171,7 @@ var Thumbnail = forwardRef(function (props, ref) {
     loading: loading
   })), !isLoading && hasError && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fallback")
-  }, typeof fallback === 'string' ? React.createElement(Icon, {
+  }, hasIconErrorFallback ? React.createElement(Icon, {
     icon: fallback,
     size: Size.xxs,
     theme: theme

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    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 = (((focusPoint?.x || 0) + 1) / 2) * 100;\n    const y = (((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        showSkeletonLoading = true,\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 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                    isLoading: showSkeletonLoading && 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                        //\n                        //display: hasError && (!imgProps?.width || !imgProps?.height) ? 'none' : undefined,\n                        // Hide while loading.\n                        visibility: hasError || (hasError && isLoading) ? 'hidden' : undefined,\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                        {typeof fallback === 'string' ? (\n                            <Icon icon={fallback} 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","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","image","imgProps","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","showSkeletonLoading","forwardedProps","useRef","loadingState","hasError","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","style","visibility","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 (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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"}

package/esm/_internal/UserBlock.js

@@ -1,10 +1,8 @@
-import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
 import { Size, Orientation, Theme } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { A as Avatar } from './Avatar2.js';
-import { r as renderLink } from './renderLink.js';
-import { isEmpty } from 'lodash';
 
 /**
  * Component display name.
@@ -45,9 +43,7 @@ var UserBlock = forwardRef(function (props, ref) {
       simpleAction = props.simpleAction,
       size = props.size,
       theme = props.theme,
-      linkProps = props.linkProps,
-      linkAs = props.linkAs,
-      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme", "linkProps", "linkAs"]);
+      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
 
   var componentSize = size; // Special case - When using vertical orientation force the size to be Sizes.l.
 
@@ -56,37 +52,12 @@ var UserBlock = forwardRef(function (props, ref) {
   }
 
   var shouldDisplayActions = orientation === Orientation.vertical;
-  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 nameClassName = classnames(handleBasicClasses({
-      prefix: "".concat(CLASSNAME, "__name"),
-      isClickable: isClickable
-    }), isLink && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
-
-    if (isLink) {
-      return renderLink(_objectSpread2({}, linkProps, {
-        linkAs: linkAs,
-        className: nameClassName
-      }), name);
-    }
-
-    if (onClick) {
-      return React.createElement("button", {
-        onClick: onClick,
-        type: "button",
-        className: nameClassName
-      }, name);
-    }
-
-    return React.createElement("span", {
-      className: nameClassName
-    }, name);
-  }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
+  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 fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
   }, fields.map(function (aField, idx) {
@@ -102,20 +73,18 @@ var UserBlock = forwardRef(function (props, ref) {
       prefix: CLASSNAME,
       orientation: orientation,
       size: componentSize,
-      theme: theme,
-      isClickable: isClickable
+      theme: theme
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter
-  }), avatarProps && React.createElement(Avatar, _extends({
-    linkAs: linkAs,
-    linkProps: linkProps
-  }, avatarProps, {
-    className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
+  }), avatarProps && React.createElement("div", {
+    className: "".concat(CLASSNAME, "__avatar")
+  }, React.createElement(Avatar, _extends({}, avatarProps, {
     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 { isEmpty } from 'lodash';\nimport { renderLink } from '@lumx/react/utils/renderLink';\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    /** 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    /** 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        linkProps,\n        linkAs,\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        const nameClassName = classNames(\n            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),\n            isLink && linkProps?.className,\n        );\n        if (isLink) {\n            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);\n        }\n        if (onClick) {\n            return (\n                <button onClick={onClick} type=\"button\" className={nameClassName}>\n                    {name}\n                </button>\n            );\n        }\n        return <span className={nameClassName}>{name}</span>;\n    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);\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, 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","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","linkProps","linkAs","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","nameClassName","classNames","handleBasicClasses","prefix","renderLink","fieldsBlock","s","map","aField","idx","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';\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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"}

package/esm/_internal/user-block.js

@@ -9,9 +9,7 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
 import './Avatar2.js';
-import './renderLink.js';
 import './Icon2.js';
 import './Thumbnail2.js';
-import 'lodash';
 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/esm/index.js

@@ -86,6 +86,5 @@ export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
 import 'lodash/debounce';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
-import 'lodash';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail",
+        "@lumx/core": "^2.1.9-alpha-thumbnail5",
+        "@lumx/icons": "^2.1.9-alpha-thumbnail5",
         "@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-thumbnail",
-    "gitHead": "e89e3ca2d44ff4b4aeb73af5662aea190d93f8a3"
+    "version": "2.1.9-alpha-thumbnail5",
+    "gitHead": "6e250a16647f7777c81df31b4b203f1aa118756a"
 }

package/src/components/avatar/Avatar.tsx

@@ -36,10 +36,6 @@ export interface AvatarProps extends GenericProps {
         ThumbnailProps,
         'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
     >;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
 }
 
 /**
@@ -79,8 +75,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         theme,
         thumbnailProps,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
 
@@ -91,8 +85,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
-                linkProps={linkProps}
-                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}