@lumx/react 2.2.22-alpha-fix-generic-block.2 → 2.2.23

package/esm/_internal/Link2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link2.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorVariant, Icon, Size, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps {\n    /** Color variant. */\n    color?: Color;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Link href. */\n    href?: HTMLAnchorProps['href'];\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Left icon (SVG path). */\n    leftIcon?: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Right icon (SVG path). */\n    rightIcon?: string;\n    /** Link target. */\n    target?: HTMLAnchorProps['target'];\n    /** Typography variant. */\n    typography?: TypographyInterface | TypographyTitleCustom;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n    switch (typography) {\n        case Typography.display1:\n            return Size.m;\n\n        case Typography.headline:\n        case Typography.title:\n        case Typography.custom.title1:\n        case Typography.custom.title2:\n        case Typography.custom.title3:\n        case Typography.custom.title4:\n        case Typography.custom.title5:\n        case Typography.custom.title6:\n        case Typography.body2:\n        case Typography.subtitle2:\n            return Size.s;\n\n        case Typography.body1:\n        case Typography.subtitle1:\n            return Size.xs;\n\n        case Typography.caption:\n        case Typography.overline:\n            return Size.xxs;\n\n        default:\n            return Size.s;\n    }\n};\n\n/**\n * Link component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        color,\n        colorVariant,\n        disabled,\n        isDisabled = disabled,\n        href,\n        leftIcon,\n        linkAs,\n        rightIcon,\n        target,\n        typography,\n        ...forwardedProps\n    } = props;\n    const renderedChildren = useMemo(\n        () => (\n            <>\n                {leftIcon && !isEmpty(leftIcon) && (\n                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n                )}\n\n                {children && (\n                    <span\n                        className={classNames(`${CLASSNAME}__content`, {\n                            [`lumx-typography-${typography}`]: typography,\n                        })}\n                    >\n                        {children}\n                    </span>\n                )}\n\n                {rightIcon && !isEmpty(rightIcon) && (\n                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n                )}\n            </>\n        ),\n        [leftIcon, typography, children, rightIcon],\n    );\n\n    /**\n     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((!linkAs && isEmpty(href)) || isDisabled) {\n        return (\n            <button\n                type=\"button\"\n                {...forwardedProps}\n                ref={ref as RefObject<HTMLButtonElement>}\n                disabled={isDisabled}\n                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n            >\n                {renderedChildren}\n            </button>\n        );\n    }\n    return renderLink(\n        {\n            linkAs,\n            ...forwardedProps,\n            href,\n            target,\n            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n            ref: ref as RefObject<HTMLAnchorElement>,\n        },\n        renderedChildren,\n    );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","renderedChildren","useMemo","isEmpty","classNames","handleBasicClasses","prefix","renderLink","displayName"],"mappings":"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"}
+{"version":3,"file":"Link2.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps {\n    /** Color variant. */\n    color?: Color;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Link href. */\n    href?: HTMLAnchorProps['href'];\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Left icon (SVG path). */\n    leftIcon?: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Right icon (SVG path). */\n    rightIcon?: string;\n    /** Link target. */\n    target?: HTMLAnchorProps['target'];\n    /** Typography variant. */\n    typography?: Typography;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n    switch (typography) {\n        case Typography.display1:\n            return Size.m;\n\n        case Typography.headline:\n        case Typography.title:\n        case Typography.custom.title1:\n        case Typography.custom.title2:\n        case Typography.custom.title3:\n        case Typography.custom.title4:\n        case Typography.custom.title5:\n        case Typography.custom.title6:\n        case Typography.body2:\n        case Typography.subtitle2:\n            return Size.s;\n\n        case Typography.body1:\n        case Typography.subtitle1:\n            return Size.xs;\n\n        case Typography.caption:\n        case Typography.overline:\n            return Size.xxs;\n\n        default:\n            return Size.s;\n    }\n};\n\n/**\n * Link component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        color,\n        colorVariant,\n        disabled,\n        isDisabled = disabled,\n        href,\n        leftIcon,\n        linkAs,\n        rightIcon,\n        target,\n        typography,\n        ...forwardedProps\n    } = props;\n    const renderedChildren = useMemo(\n        () => (\n            <>\n                {leftIcon && !isEmpty(leftIcon) && (\n                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n                )}\n\n                {children && (\n                    <span\n                        className={classNames(`${CLASSNAME}__content`, {\n                            [`lumx-typography-${typography}`]: typography,\n                        })}\n                    >\n                        {children}\n                    </span>\n                )}\n\n                {rightIcon && !isEmpty(rightIcon) && (\n                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n                )}\n            </>\n        ),\n        [leftIcon, typography, children, rightIcon],\n    );\n\n    /**\n     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((!linkAs && isEmpty(href)) || isDisabled) {\n        return (\n            <button\n                type=\"button\"\n                {...forwardedProps}\n                ref={ref as RefObject<HTMLButtonElement>}\n                disabled={isDisabled}\n                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n            >\n                {renderedChildren}\n            </button>\n        );\n    }\n    return renderLink(\n        {\n            linkAs,\n            ...forwardedProps,\n            href,\n            target,\n            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n            ref: ref as RefObject<HTMLAnchorElement>,\n        },\n        renderedChildren,\n    );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","renderedChildren","useMemo","isEmpty","classNames","handleBasicClasses","prefix","renderLink","displayName"],"mappings":"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"}

package/esm/_internal/Thumbnail2.js

@@ -50,23 +50,27 @@ function useImageLoad(imageURL, imgRef) {
 }
 
 // Calculate shift to center the focus point in the container.
-function shiftPosition(scale, focusPoint, imageSize, containerSize) {
+function shiftPosition(_ref) {
+  var scale = _ref.scale,
+      focusPoint = _ref.focusPoint,
+      imageSize = _ref.imageSize,
+      containerSize = _ref.containerSize;
+  if (imageSize === containerSize) return 0;
   var scaledSize = imageSize / scale;
   var scaledFocusHeight = focusPoint * scaledSize;
   var startFocus = scaledFocusHeight - containerSize / 2;
   var shift = startFocus / (scaledSize - containerSize);
   return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
-
 // Compute CSS properties to apply the focus point.
-var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
-  var image = _ref.image,
-      aspectRatio = _ref.aspectRatio,
-      focusPoint = _ref.focusPoint,
-      _ref$imgProps = _ref.imgProps;
-  _ref$imgProps = _ref$imgProps === void 0 ? {} : _ref$imgProps;
-  var width = _ref$imgProps.width,
-      height = _ref$imgProps.height;
+var useFocusPointStyle = function useFocusPointStyle(_ref2, element, isLoaded) {
+  var image = _ref2.image,
+      aspectRatio = _ref2.aspectRatio,
+      focusPoint = _ref2.focusPoint,
+      _ref2$imgProps = _ref2.imgProps;
+  _ref2$imgProps = _ref2$imgProps === void 0 ? {} : _ref2$imgProps;
+  var width = _ref2$imgProps.width,
+      height = _ref2$imgProps.height;
   // Get natural image size from imgProps or img element.
   var imageSize = useMemo(function () {
     // Focus point is not applicable => exit early
@@ -135,10 +139,20 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
     var scale = Math.min(widthScale, heightScale); // Focus Y relative to the top (instead of the center)
 
     var focusPointFromTop = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2;
-    var y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height); // Focus X relative to the left (instead of the center)
+    var y = shiftPosition({
+      scale: scale,
+      focusPoint: focusPointFromTop,
+      imageSize: imageSize.height,
+      containerSize: containerSize.height
+    }); // Focus X relative to the left (instead of the center)
 
     var focusPointFromLeft = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2;
-    var x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);
+    var x = shiftPosition({
+      scale: scale,
+      focusPoint: focusPointFromLeft,
+      imageSize: imageSize.width,
+      containerSize: containerSize.width
+    });
     var objectPosition = "".concat(x, "% ").concat(y, "%"); // Update only if needed.
 
     setStyle(function (oldStyle) {

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, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } 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, HasTheme {\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 | Falsy;\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    /** 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` needs to be here to remove it from `forwardedProps`.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\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(\n                        handleBasicClasses({\n                            prefix: `${CLASSNAME}__image`,\n                            isLoading,\n                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n                        }),\n                        imgProps?.className,\n                    )}\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","hasDefinedSize","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.\nexport function shiftPosition({\n    scale,\n    focusPoint,\n    imageSize,\n    containerSize,\n}: {\n    scale: number;\n    focusPoint: number;\n    imageSize: number;\n    containerSize: number;\n}) {\n    if (imageSize === containerSize) return 0;\n    const scaledSize = imageSize / scale;\n\n    const scaledFocusHeight = focusPoint * scaledSize;\n    const startFocus = scaledFocusHeight - containerSize / 2;\n    const shift = startFocus / (scaledSize - containerSize);\n\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({\n            scale,\n            focusPoint: focusPointFromTop,\n            imageSize: imageSize.height,\n            containerSize: containerSize.height,\n        });\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({\n            scale,\n            focusPoint: focusPointFromLeft,\n            imageSize: imageSize.width,\n            containerSize: containerSize.width,\n        });\n\n        const objectPosition = `${x}% ${y}%`;\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, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } 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, HasTheme {\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 | Falsy;\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    /** 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` needs to be here to remove it from `forwardedProps`.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\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(\n                        handleBasicClasses({\n                            prefix: `${CLASSNAME}__image`,\n                            isLoading,\n                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n                        }),\n                        imgProps?.className,\n                    )}\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","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/components.js

@@ -103,12 +103,12 @@ var TypographyTitleCustom = {
  * List of typographies that can be customized (via CSS variables).
  */
 var TypographyCustom = _objectSpread2({}, TypographyTitleCustom, {
-  intro: 'intro',
-  'body-large': 'body-large',
-  body: 'body',
-  quote: 'quote',
-  'publish-info': 'publish-info',
-  button: 'button'
+  intro: 'custom-intro',
+  'body-large': 'custom-body-large',
+  body: 'custom-body',
+  quote: 'custom-quote',
+  'publish-info': 'custom-publish-info',
+  button: 'custom-button'
 });
 
 /**
@@ -151,5 +151,5 @@ var Kind = {
   error: 'error'
 };
 
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom };
 //# sourceMappingURL=components.js.map

package/esm/_internal/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    medium: 'medium',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nconst TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'intro',\n    'body-large': 'body-large',\n    body: 'body',\n    quote: 'quote',\n    'publish-info': 'publish-info',\n    button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}
+{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    medium: 'medium',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nexport const TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'custom-intro',\n    'body-large': 'custom-body-large',\n    body: 'custom-body',\n    quote: 'custom-quote',\n    'publish-info': 'custom-publish-info',\n    button: 'custom-button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}

package/esm/index.js

@@ -1,5 +1,5 @@
 import './_internal/_rollupPluginBabelHelpers.js';
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
 import 'react';
 import './_internal/getRootClassName.js';
 export { I as Icon } from './_internal/Icon2.js';

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.22-alpha-fix-generic-block.2",
-        "@lumx/icons": "^2.2.22-alpha-fix-generic-block.2",
+        "@lumx/core": "^2.2.23",
+        "@lumx/icons": "^2.2.23",
         "@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.22-alpha-fix-generic-block.2",
-    "gitHead": "4670b30d082cf206ed04d3fc365825d17048b2de"
+    "version": "2.2.23",
+    "gitHead": "51fd4513c5b083425f263464cbb1e739ab61ac18"
 }

package/src/components/index.ts

@@ -119,14 +119,14 @@ export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
 /**
  * List of typographies that can be customized (via CSS variables).
  */
-const TypographyCustom = {
+export const TypographyCustom = {
     ...TypographyTitleCustom,
-    intro: 'intro',
-    'body-large': 'body-large',
-    body: 'body',
-    quote: 'quote',
-    'publish-info': 'publish-info',
-    button: 'button',
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
 } as const;
 export type TypographyCustom = ValueOf<typeof TypographyCustom>;
 

package/src/components/link/Link.stories.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { mdiChevronDown, mdiLink } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import {
+    ColorPalette,
+    ColorVariant,
+    Link,
+    Typography,
+    TypographyCustom,
+    TypographyInterface,
+    TypographyTitleCustom,
+} from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 
@@ -13,7 +21,7 @@ const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 export const SimpleLink = () => (
     <>
         <Link
-            href={text('href', 'https://google.com', 'Link 1')}
+            href={text('href', 'https://example.com', 'Link 1')}
             target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
@@ -51,14 +59,16 @@ export const WithoutHref = () => (
     </div>
 );
 
-const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
+export const WithCustomLink = () => {
+    const CustomLink: React.FC = ({ children, ...props }) =>
+        React.createElement('a', { ...props, style: { color: 'red' } }, children);
 
-export const WithCustomLink = () => (
-    <Link linkAs={CustomLink} href="https://google.com">
-        Custom link
-    </Link>
-);
+    return (
+        <Link linkAs={CustomLink} href="https://example.com">
+            Custom link
+        </Link>
+    );
+};
 
 export const DisabledLink = () => (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -67,36 +77,6 @@ export const DisabledLink = () => (
     </Link>
 );
 
-export const WithIcon = () => (
-    <>
-        {Object.values(linkTypographies).map((typography) => (
-            <Fragment key={typography}>
-                {typography}
-                <p>
-                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography as any}>
-                        With right icon
-                    </Link>
-                </p>
-                <p>
-                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography as any}>
-                        With left icon
-                    </Link>
-                </p>
-                <p>
-                    <Link
-                        leftIcon={mdiChevronDown}
-                        rightIcon={mdiLink}
-                        href="https://www.google.com"
-                        typography={typography as any}
-                    >
-                        With right and left icon
-                    </Link>
-                </p>
-            </Fragment>
-        ))}
-    </>
-);
-
 export const WithCustomizableTypography = () => (
     <>
         <style>{`
@@ -104,8 +84,58 @@ export const WithCustomizableTypography = () => (
             --lumx-typography-custom-title1-font-size: 5px;
         }
         `}</style>
-        <Link typography={Typography.custom.title1} href="https://google.com">
+        <Link typography={Typography.custom.title1} href="https://example.com">
             Link with customizable `body` typography
         </Link>
     </>
 );
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <Link
+                            leftIcon={mdiChevronDown}
+                            rightIcon={mdiLink}
+                            typography={typography}
+                            href="https://example.com"
+                        >
+                            Link text
+                        </Link>
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+export const AllColor = () => {
+    const colorVariants = [undefined, ...Object.values(ColorVariant)];
+    const colors = [undefined, ...Object.values(ColorPalette)];
+    return (
+        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
+            <tr>
+                <td />
+                {colorVariants.map((colorVariant) => (
+                    <td key={colorVariant}>{colorVariant}</td>
+                ))}
+            </tr>
+            {colors.map((color) => (
+                <tr key={color}>
+                    <td>{color}</td>
+                    {colorVariants.map((colorVariant) => (
+                        <td key={colorVariant}>
+                            <Link href="https://example.com" color={color} colorVariant={colorVariant}>
+                                Some text
+                            </Link>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -31,7 +31,7 @@ export interface LinkProps extends GenericProps {
     /** Link target. */
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
-    typography?: TypographyInterface | TypographyTitleCustom;
+    typography?: Typography;
 }
 
 /**

package/src/components/thumbnail/useFocusPointStyle.test.ts

@@ -0,0 +1,92 @@
+import { shiftPosition } from './useFocusPointStyle';
+
+describe('shiftPosition', () => {
+    it('should always return 0% if the imageSize fits the containerSize', () => {
+        expect(
+            shiftPosition({
+                scale: 1.5,
+                focusPoint: 0,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 1,
+                focusPoint: 0.27,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 3,
+                focusPoint: 0.5,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 2.4,
+                focusPoint: 1,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+    });
+
+    describe('with bigger side than container ', () => {
+        // This use case will come, for example, if you have an image in width 100%
+        // but the image after being resized to keep the ratio is higher than the container.
+        // Then we are calculating the y shift.
+
+        const image = { width: 1000, height: 1200 };
+        const container = { width: 1000, height: 300 };
+        // scale is always the minimum scale ratio. Here imagewidth/containerwidth.
+        const scale = image.width / container.width; // 1
+        it('should return 0% if focusPoint equals 0', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(0);
+        });
+
+        it('should return 100% if focusPoint equals 1', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 1,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(100);
+        });
+
+        it('should return 50% if focusPoint equals 0.5', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0.5,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(50);
+        });
+
+        it('should return 16% if focusPoint equals 0.25', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0.25,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(16);
+        });
+    });
+});

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -3,11 +3,24 @@ import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
 
 // Calculate shift to center the focus point in the container.
-function shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {
+export function shiftPosition({
+    scale,
+    focusPoint,
+    imageSize,
+    containerSize,
+}: {
+    scale: number;
+    focusPoint: number;
+    imageSize: number;
+    containerSize: number;
+}) {
+    if (imageSize === containerSize) return 0;
     const scaledSize = imageSize / scale;
+
     const scaledFocusHeight = focusPoint * scaledSize;
     const startFocus = scaledFocusHeight - containerSize / 2;
     const shift = startFocus / (scaledSize - containerSize);
+
     return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
@@ -73,14 +86,23 @@ export const useFocusPointStyle = (
 
         // Focus Y relative to the top (instead of the center)
         const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
-        const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);
+        const y = shiftPosition({
+            scale,
+            focusPoint: focusPointFromTop,
+            imageSize: imageSize.height,
+            containerSize: containerSize.height,
+        });
 
         // Focus X relative to the left (instead of the center)
         const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
-        const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);
+        const x = shiftPosition({
+            scale,
+            focusPoint: focusPointFromLeft,
+            imageSize: imageSize.width,
+            containerSize: containerSize.width,
+        });
 
         const objectPosition = `${x}% ${y}%`;
-
         // Update only if needed.
         setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));
     }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);

package/types.d.ts

@@ -162,13 +162,16 @@ export declare const TypographyTitleCustom: {
 	readonly title6: "custom-title6";
 };
 export declare type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-declare const TypographyCustom: {
-	readonly intro: "intro";
-	readonly "body-large": "body-large";
-	readonly body: "body";
-	readonly quote: "quote";
-	readonly "publish-info": "publish-info";
-	readonly button: "button";
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyCustom: {
+	readonly intro: "custom-intro";
+	readonly "body-large": "custom-body-large";
+	readonly body: "custom-body";
+	readonly quote: "custom-quote";
+	readonly "publish-info": "custom-publish-info";
+	readonly button: "custom-button";
 	readonly title1: "custom-title1";
 	readonly title2: "custom-title2";
 	readonly title3: "custom-title3";
@@ -182,12 +185,12 @@ export declare type TypographyCustom = ValueOf<typeof TypographyCustom>;
  */
 export declare const Typography: {
 	readonly custom: {
-		readonly intro: "intro";
-		readonly "body-large": "body-large";
-		readonly body: "body";
-		readonly quote: "quote";
-		readonly "publish-info": "publish-info";
-		readonly button: "button";
+		readonly intro: "custom-intro";
+		readonly "body-large": "custom-body-large";
+		readonly body: "custom-body";
+		readonly quote: "custom-quote";
+		readonly "publish-info": "custom-publish-info";
+		readonly button: "custom-button";
 		readonly title1: "custom-title1";
 		readonly title2: "custom-title2";
 		readonly title3: "custom-title3";
@@ -1471,7 +1474,7 @@ export interface LinkProps extends GenericProps {
 	/** Link target. */
 	target?: HTMLAnchorProps["target"];
 	/** Typography variant. */
-	typography?: TypographyInterface | TypographyTitleCustom;
+	typography?: Typography;
 }
 /**
  * Link component.