@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.17

package/_internal/{Thumbnail-30d2a781.js → Thumbnail-b5dea0af.js}

@@ -1,13 +1,14 @@
-import { f as forwardRef, _ as _extends, c as classNames } from './forwardRef-49d2bb84.js';
 import React__default, { useState, useEffect, useMemo } from 'react';
+import { f as forwardRef, c as classNames } from './forwardRef-15f62847.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mdiImageBroken } from '@lumx/icons';
 import { u as useMergeRefs } from './mergeRefs-f0d7d6ea.js';
 import { AspectRatio, Theme, Size } from '@lumx/core/js/constants';
 import { u as useTheme } from './ThemeContext-3181f000.js';
-import { R as RawClickable } from './RawClickable-c76bbc4c.js';
-import { u as useDisableStateProps } from './useDisableStateProps-fffc365f.js';
-import { Icon } from './components/icon-2e7345ad.js';
+import { R as RawClickable } from './RawClickable-2c2b6a89.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { u as useDisableStateProps } from './useDisableStateProps-69e16b7c.js';
+import { Icon } from './components/icon-b708cca4.js';
 
 function getState(img, event) {
   // Error event occurred or image has no source.
@@ -146,10 +147,6 @@ const useFocusPointStyle = ({
   return style;
 };
 
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component display name.
  */
@@ -252,7 +249,8 @@ const Thumbnail = forwardRef((props, ref) => {
   const loadingStyle = loadingPlaceholderImage ? {
     backgroundImage: `url(${loadingPlaceholderImage.src})`
   } : undefined;
-  return /*#__PURE__*/React__default.createElement(Wrapper, _extends({}, wrapperProps, {
+  return /*#__PURE__*/jsxs(Wrapper, {
+    ...wrapperProps,
     ref: ref,
     className: classNames(linkProps?.className, className, handleBasicClasses({
       align,
@@ -268,45 +266,48 @@ const Thumbnail = forwardRef((props, ref) => {
       isLoading,
       objectFit,
       hasBadge: !!badge
-    }), fillHeight && `${CLASSNAME}--fill-height`)
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: `${CLASSNAME}__background`
-  }, /*#__PURE__*/React__default.createElement("img", _extends({
-    // Use placeholder image size
-    width: loadingPlaceholderImage?.naturalWidth,
-    height: loadingPlaceholderImage?.naturalHeight
-  }, imgProps, {
-    style: {
-      // Reserve space while loading (when possible)
-      width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
-      ...imgProps?.style,
-      ...imageErrorStyle,
-      ...focusPointStyle,
-      ...loadingStyle
-    },
-    ref: useMergeRefs(setImgElement, propImgRef),
-    className: classNames(handleBasicClasses({
-      prefix: `${CLASSNAME}__image`,
-      isLoading,
-      hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
-    }), imgProps?.className),
-    crossOrigin: crossOrigin,
-    src: image,
-    alt: alt,
-    loading: loading
-  })), !isLoading && hasError && /*#__PURE__*/React__default.createElement("span", {
-    className: `${CLASSNAME}__fallback`
-  }, hasIconErrorFallback ? /*#__PURE__*/React__default.createElement(Icon, {
-    icon: fallback,
-    size: Size.xxs,
-    theme: theme
-  }) : fallback)), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-    className: classNames(`${CLASSNAME}__badge`, badge.props.className)
-  }));
+    }), fillHeight && `${CLASSNAME}--fill-height`),
+    children: [/*#__PURE__*/jsxs("span", {
+      className: `${CLASSNAME}__background`,
+      children: [/*#__PURE__*/jsx("img", {
+        // Use placeholder image size
+        width: loadingPlaceholderImage?.naturalWidth,
+        height: loadingPlaceholderImage?.naturalHeight,
+        ...imgProps,
+        style: {
+          // Reserve space while loading (when possible)
+          width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
+          ...imgProps?.style,
+          ...imageErrorStyle,
+          ...focusPointStyle,
+          ...loadingStyle
+        },
+        ref: useMergeRefs(setImgElement, propImgRef),
+        className: classNames(handleBasicClasses({
+          prefix: `${CLASSNAME}__image`,
+          isLoading,
+          hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
+        }), imgProps?.className),
+        crossOrigin: crossOrigin,
+        src: image,
+        alt: alt,
+        loading: loading
+      }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
+        className: `${CLASSNAME}__fallback`,
+        children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
+          icon: fallback,
+          size: Size.xxs,
+          theme: theme
+        }) : fallback
+      })]
+    }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
+      className: classNames(`${CLASSNAME}__badge`, badge.props.className)
+    })]
+  });
 });
 Thumbnail.displayName = COMPONENT_NAME;
 Thumbnail.className = CLASSNAME;
 Thumbnail.defaultProps = DEFAULT_PROPS;
 
 export { Thumbnail as T, useFocusPointStyle as u };
-//# sourceMappingURL=Thumbnail-30d2a781.js.map
+//# sourceMappingURL=Thumbnail-b5dea0af.js.map

package/_internal/{Thumbnail-30d2a781.js.map → Thumbnail-b5dea0af.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail-30d2a781.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 has no source.\n    if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {\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/core/js/constants';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\nimport { RectSize } from '@lumx/react/utils/type';\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    const scaledSize = imageSize / scale;\n    if (scaledSize === containerSize) return 0;\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\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: RectSize | 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<RectSize | 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: CSSProperties = useMemo(() => {\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            return { visibility: 'hidden' };\n        }\n        if (!containerSize || !imageSize.height || !imageSize.width) {\n            // Missing container or image size abort focus point compute.\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\n        return { objectPosition };\n    }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n    return style;\n};\n","import React, {\n    CSSProperties,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\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    /** Set how the image should fit when its aspect ratio is constrained */\n    objectFit?: ThumbnailObjectFit;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** Ref of an existing placeholder image to display while loading. */\n    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\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};\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback = DEFAULT_PROPS.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        objectFit,\n        loading = DEFAULT_PROPS.loading,\n        loadingPlaceholderImageRef,\n        size,\n        theme = defaultTheme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = otherProps;\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 isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n    const Wrapper: any = isClickable ? RawClickable : 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isClickable) {\n        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n        if (isLink) {\n            Object.assign(wrapperProps, linkProps);\n        } else {\n            wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n        }\n    }\n\n    // If we have a loading placeholder image that is really loaded (complete)\n    const loadingPlaceholderImage =\n        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n        undefined;\n\n    // Set loading placeholder image as background\n    const loadingStyle = loadingPlaceholderImage\n        ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n        : undefined;\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                    objectFit,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <span className={`${CLASSNAME}__background`}>\n                <img\n                    // Use placeholder image size\n                    width={loadingPlaceholderImage?.naturalWidth}\n                    height={loadingPlaceholderImage?.naturalHeight}\n                    {...imgProps}\n                    style={{\n                        // Reserve space while loading (when possible)\n                        width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        ...focusPointStyle,\n                        ...loadingStyle,\n                    }}\n                    ref={useMergeRefs(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                    <span className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </span>\n                )}\n            </span>\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","getAttribute","useImageLoad","imageURL","imgRef","state","setState","useState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","image","aspectRatio","imgProps","width","height","element","isLoaded","useMemo","AspectRatio","original","x","y","naturalWidth","naturalHeight","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","loadingStyle","backgroundImage","React","createElement","_extends","classNames","handleBasicClasses","prefix","hasBadge","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","cloneElement","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Thumbnail-b5dea0af.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 has no source.\n    if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {\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/core/js/constants';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\nimport { RectSize } from '@lumx/react/utils/type';\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    const scaledSize = imageSize / scale;\n    if (scaledSize === containerSize) return 0;\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\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: RectSize | 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<RectSize | 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: CSSProperties = useMemo(() => {\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            return { visibility: 'hidden' };\n        }\n        if (!containerSize || !imageSize.height || !imageSize.width) {\n            // Missing container or image size abort focus point compute.\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\n        return { objectPosition };\n    }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n    return style;\n};\n","import React, {\n    CSSProperties,\n    ImgHTMLAttributes,\n    KeyboardEventHandler,\n    MouseEventHandler,\n    ReactElement,\n    ReactNode,\n    Ref,\n    useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\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    /** Set how the image should fit when its aspect ratio is constrained */\n    objectFit?: ThumbnailObjectFit;\n    /** Size variant of the component. */\n    size?: ThumbnailSize;\n    /** Image loading mode. */\n    loading?: ImgHTMLProps['loading'];\n    /** Ref of an existing placeholder image to display while loading. */\n    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\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};\n\n/**\n * Thumbnail component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        align,\n        alt,\n        aspectRatio = AspectRatio.original,\n        badge,\n        className,\n        crossOrigin,\n        fallback = DEFAULT_PROPS.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        objectFit,\n        loading = DEFAULT_PROPS.loading,\n        loadingPlaceholderImageRef,\n        size,\n        theme = defaultTheme,\n        variant,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = otherProps;\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 isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n    const Wrapper: any = isClickable ? RawClickable : 'div';\n    const wrapperProps = { ...forwardedProps };\n    if (isClickable) {\n        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n        if (isLink) {\n            Object.assign(wrapperProps, linkProps);\n        } else {\n            wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n        }\n    }\n\n    // If we have a loading placeholder image that is really loaded (complete)\n    const loadingPlaceholderImage =\n        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n        undefined;\n\n    // Set loading placeholder image as background\n    const loadingStyle = loadingPlaceholderImage\n        ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n        : undefined;\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                    objectFit,\n                    hasBadge: !!badge,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <span className={`${CLASSNAME}__background`}>\n                <img\n                    // Use placeholder image size\n                    width={loadingPlaceholderImage?.naturalWidth}\n                    height={loadingPlaceholderImage?.naturalHeight}\n                    {...imgProps}\n                    style={{\n                        // Reserve space while loading (when possible)\n                        width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n                        ...imgProps?.style,\n                        ...imageErrorStyle,\n                        ...focusPointStyle,\n                        ...loadingStyle,\n                    }}\n                    ref={useMergeRefs(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                    <span className={`${CLASSNAME}__fallback`}>\n                        {hasIconErrorFallback ? (\n                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n                        ) : (\n                            fallback\n                        )}\n                    </span>\n                )}\n            </span>\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","getAttribute","useImageLoad","imageURL","imgRef","state","setState","useState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","image","aspectRatio","imgProps","width","height","element","isLoaded","useMemo","AspectRatio","original","x","y","naturalWidth","naturalHeight","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","loadingStyle","backgroundImage","_jsxs","classNames","handleBasicClasses","prefix","hasBadge","children","_jsx","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/{alert-dialog-8f1c163c.js → alert-dialog-b284b191.js}

@@ -1,12 +1,13 @@
-import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
 import React__default from 'react';
+import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
 import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle } from '@lumx/icons';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { u as useId } from '../useId-3a1facc0.js';
-import { Dialog } from './dialog-7dbcb485.js';
-import { Toolbar } from './toolbar-155562be.js';
-import { Icon } from './icon-2e7345ad.js';
-import { a as Button } from '../Button-f19e18df.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Dialog } from './dialog-ebdb9500.js';
+import { Toolbar } from './toolbar-a43533a2.js';
+import { Icon } from './icon-b708cca4.js';
+import { a as Button } from '../Button-1f227024.js';
 import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
 
 /**
@@ -96,7 +97,7 @@ const AlertDialog = forwardRef((props, ref) => {
     onClick: cancelOnClick,
     ...forwardedCancelProps
   } = cancelProps || {};
-  return /*#__PURE__*/React__default.createElement(Dialog, _extends({
+  return /*#__PURE__*/jsxs(Dialog, {
     ref: ref,
     focusElement: cancelProps ? cancelButtonRef : confirmationButtonRef,
     size: size,
@@ -110,38 +111,52 @@ const AlertDialog = forwardRef((props, ref) => {
     className: classNames(className, handleBasicClasses({
       kind,
       prefix: CLASSNAME
-    }))
-  }, forwardedProps), /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Toolbar, {
-    className: "lumx-spacing-margin-horizontal",
-    before: /*#__PURE__*/React__default.createElement(Icon, {
-      icon: icon,
-      size: Size.s,
-      color: color
-    }),
-    label: /*#__PURE__*/React__default.createElement("h2", {
-      id: titleId,
-      className: "lumx-typography-title"
-    }, title)
-  })), children && /*#__PURE__*/React__default.createElement(DescriptionElement, {
-    id: descriptionId,
-    className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
-  }, children), /*#__PURE__*/React__default.createElement("footer", null, /*#__PURE__*/React__default.createElement(Toolbar, {
-    className: "lumx-spacing-margin-horizontal",
-    after: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelProps && /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedCancelProps, {
-      ref: cancelButtonRef,
-      emphasis: Emphasis.medium,
-      onClick: cancelOnClick
-    }), cancelLabel), /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedConfirmProps, {
-      ref: confirmationButtonRef,
-      color: color,
-      className: "lumx-spacing-margin-left-regular",
-      onClick: confirmOnClick
-    }), confirmLabel))
-  })));
+    })),
+    ...forwardedProps,
+    children: [/*#__PURE__*/jsx("header", {
+      children: /*#__PURE__*/jsx(Toolbar, {
+        className: "lumx-spacing-margin-horizontal",
+        before: /*#__PURE__*/jsx(Icon, {
+          icon: icon,
+          size: Size.s,
+          color: color
+        }),
+        label: /*#__PURE__*/jsx("h2", {
+          id: titleId,
+          className: "lumx-typography-title",
+          children: title
+        })
+      })
+    }), children && /*#__PURE__*/jsx(DescriptionElement, {
+      id: descriptionId,
+      className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge",
+      children: children
+    }), /*#__PURE__*/jsx("footer", {
+      children: /*#__PURE__*/jsx(Toolbar, {
+        className: "lumx-spacing-margin-horizontal",
+        after: /*#__PURE__*/jsxs(Fragment, {
+          children: [cancelProps && /*#__PURE__*/jsx(Button, {
+            ...forwardedCancelProps,
+            ref: cancelButtonRef,
+            emphasis: Emphasis.medium,
+            onClick: cancelOnClick,
+            children: cancelLabel
+          }), /*#__PURE__*/jsx(Button, {
+            ...forwardedConfirmProps,
+            ref: confirmationButtonRef,
+            color: color,
+            className: "lumx-spacing-margin-left-regular",
+            onClick: confirmOnClick,
+            children: confirmLabel
+          })]
+        })
+      })
+    })]
+  });
 });
 AlertDialog.displayName = COMPONENT_NAME;
 AlertDialog.className = CLASSNAME;
 AlertDialog.defaultProps = DEFAULT_PROPS;
 
 export { AlertDialog };
-//# sourceMappingURL=alert-dialog-8f1c163c.js.map
+//# sourceMappingURL=alert-dialog-b284b191.js.map

package/_internal/components/{alert-dialog-8f1c163c.js.map → alert-dialog-b284b191.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-8f1c163c.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    DialogProps,\n    Dialog,\n    Button,\n    Emphasis,\n    ColorPalette,\n    Icon,\n    Size,\n    Kind,\n    Toolbar,\n    ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n    /** Message variant. */\n    kind?: Kind;\n    /** Dialog title. */\n    title?: string;\n    /** Props forwarded to the confirm button */\n    confirmProps: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Props forwarded to the cancel button.\n     * Will not render a cancel button if undefined.\n     */\n    cancelProps?: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\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<DialogProps> = {\n    size: Size.tiny,\n    kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n    const {\n        id,\n        title,\n        className,\n        cancelProps,\n        confirmProps,\n        kind = DEFAULT_PROPS.kind,\n        size = DEFAULT_PROPS.size,\n        dialogProps,\n        children,\n        ...forwardedProps\n    } = props;\n\n    const cancelButtonRef = React.useRef(null);\n    const confirmationButtonRef = React.useRef(null);\n    const { color, icon } = CONFIG[kind as Kind] || {};\n\n    // Define a unique ID to target title and description for aria attributes.\n    const generatedId = useId();\n    const uniqueId = id || generatedId;\n    const titleId = `${uniqueId}-title`;\n    const descriptionId = `${uniqueId}-description`;\n\n    // If content is a string, set in a paragraph.\n    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n    return (\n        <Dialog\n            ref={ref}\n            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n            size={size}\n            dialogProps={{\n                id: uniqueId,\n                role: 'alertdialog',\n                'aria-labelledby': titleId,\n                'aria-describedby': descriptionId,\n                ...dialogProps,\n            }}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    kind,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            <header>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    before={<Icon icon={icon} size={Size.s} color={color} />}\n                    label={\n                        <h2 id={titleId} className=\"lumx-typography-title\">\n                            {title}\n                        </h2>\n                    }\n                />\n            </header>\n\n            {children && (\n                <DescriptionElement\n                    id={descriptionId}\n                    className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n                >\n                    {children}\n                </DescriptionElement>\n            )}\n\n            <footer>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    after={\n                        <>\n                            {cancelProps && (\n                                <Button\n                                    {...forwardedCancelProps}\n                                    ref={cancelButtonRef}\n                                    emphasis={Emphasis.medium}\n                                    onClick={cancelOnClick}\n                                >\n                                    {cancelLabel}\n                                </Button>\n                            )}\n                            <Button\n                                {...forwardedConfirmProps}\n                                ref={confirmationButtonRef}\n                                color={color}\n                                className=\"lumx-spacing-margin-left-regular\"\n                                onClick={confirmOnClick}\n                            >\n                                {confirmLabel}\n                            </Button>\n                        </>\n                    }\n                />\n            </footer>\n        </Dialog>\n    );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","createElement","Dialog","_extends","focusElement","role","classNames","handleBasicClasses","prefix","Toolbar","before","Icon","s","after","Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"alert-dialog-b284b191.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    DialogProps,\n    Dialog,\n    Button,\n    Emphasis,\n    ColorPalette,\n    Icon,\n    Size,\n    Kind,\n    Toolbar,\n    ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n    /** Message variant. */\n    kind?: Kind;\n    /** Dialog title. */\n    title?: string;\n    /** Props forwarded to the confirm button */\n    confirmProps: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Props forwarded to the cancel button.\n     * Will not render a cancel button if undefined.\n     */\n    cancelProps?: ButtonProps & {\n        onClick(): void;\n        label: string;\n    };\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\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<DialogProps> = {\n    size: Size.tiny,\n    kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n    const {\n        id,\n        title,\n        className,\n        cancelProps,\n        confirmProps,\n        kind = DEFAULT_PROPS.kind,\n        size = DEFAULT_PROPS.size,\n        dialogProps,\n        children,\n        ...forwardedProps\n    } = props;\n\n    const cancelButtonRef = React.useRef(null);\n    const confirmationButtonRef = React.useRef(null);\n    const { color, icon } = CONFIG[kind as Kind] || {};\n\n    // Define a unique ID to target title and description for aria attributes.\n    const generatedId = useId();\n    const uniqueId = id || generatedId;\n    const titleId = `${uniqueId}-title`;\n    const descriptionId = `${uniqueId}-description`;\n\n    // If content is a string, set in a paragraph.\n    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n    return (\n        <Dialog\n            ref={ref}\n            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n            size={size}\n            dialogProps={{\n                id: uniqueId,\n                role: 'alertdialog',\n                'aria-labelledby': titleId,\n                'aria-describedby': descriptionId,\n                ...dialogProps,\n            }}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    kind,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            <header>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    before={<Icon icon={icon} size={Size.s} color={color} />}\n                    label={\n                        <h2 id={titleId} className=\"lumx-typography-title\">\n                            {title}\n                        </h2>\n                    }\n                />\n            </header>\n\n            {children && (\n                <DescriptionElement\n                    id={descriptionId}\n                    className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n                >\n                    {children}\n                </DescriptionElement>\n            )}\n\n            <footer>\n                <Toolbar\n                    className=\"lumx-spacing-margin-horizontal\"\n                    after={\n                        <>\n                            {cancelProps && (\n                                <Button\n                                    {...forwardedCancelProps}\n                                    ref={cancelButtonRef}\n                                    emphasis={Emphasis.medium}\n                                    onClick={cancelOnClick}\n                                >\n                                    {cancelLabel}\n                                </Button>\n                            )}\n                            <Button\n                                {...forwardedConfirmProps}\n                                ref={confirmationButtonRef}\n                                color={color}\n                                className=\"lumx-spacing-margin-left-regular\"\n                                onClick={confirmOnClick}\n                            >\n                                {confirmLabel}\n                            </Button>\n                        </>\n                    }\n                />\n            </footer>\n        </Dialog>\n    );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","_jsxs","Dialog","focusElement","role","classNames","handleBasicClasses","prefix","_jsx","Toolbar","before","Icon","s","after","_Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/{autocomplete-bfbdeb3c.js → autocomplete-8d3f37ea.js}

@@ -1,21 +1,18 @@
-import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
 import { useRef } from 'react';
+import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { u as useFocus } from '../index-f415b08e.js';
+import { u as useFocus } from '../index-9df37c0d.js';
 import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
 import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
-import { TextField } from './text-field-82733568.js';
-import { Dropdown } from './dropdown-38b0b6a0.js';
+import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextField } from './text-field-478acd86.js';
+import { Dropdown } from './dropdown-0baed51b.js';
 import { mdiClose } from '@lumx/icons';
-import { C as Chip } from '../Chip-4c572eec.js';
-import { Icon } from './icon-2e7345ad.js';
+import { C as Chip } from '../Chip-a34f6905.js';
+import { Icon } from './icon-b708cca4.js';
 import { Size } from '@lumx/core/js/constants';
 
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component display name.
  */
@@ -88,54 +85,53 @@ const Autocomplete = forwardRef((props, ref) => {
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
-    className: classNames(className, CLASSNAME$1)
-  }), /*#__PURE__*/React.createElement(TextField, _extends({}, textFieldProps, {
-    chips: chips,
-    error: error,
-    hasError: hasError,
-    helper: helper,
-    icon: icon,
-    inputRef: mergeRefs(inputAnchorRef, inputRef),
-    clearButtonProps: clearButtonProps
-  }, disabledStateProps, {
-    isRequired: isRequired,
-    isValid: isValid,
-    label: label,
-    name: name,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    placeholder: placeholder,
-    textFieldRef: textFieldRef,
-    theme: theme,
-    value: value
-  })), /*#__PURE__*/React.createElement(Dropdown, {
-    anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
-    closeOnClick: closeOnClick,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    focusAnchorOnClose: focusAnchorOnClose,
-    fitToAnchorWidth: fitToAnchorWidth,
-    isOpen: isOpen,
-    offset: offset,
-    onClose: onClose,
-    onInfiniteScroll: onInfiniteScroll,
-    placement: placement,
-    shouldFocusOnOpen: false,
-    theme: theme
-  }, children));
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME$1),
+    children: [/*#__PURE__*/jsx(TextField, {
+      ...textFieldProps,
+      chips: chips,
+      error: error,
+      hasError: hasError,
+      helper: helper,
+      icon: icon,
+      inputRef: mergeRefs(inputAnchorRef, inputRef),
+      clearButtonProps: clearButtonProps,
+      ...disabledStateProps,
+      isRequired: isRequired,
+      isValid: isValid,
+      label: label,
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      placeholder: placeholder,
+      textFieldRef: textFieldRef,
+      theme: theme,
+      value: value
+    }), /*#__PURE__*/jsx(Dropdown, {
+      anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
+      closeOnClick: closeOnClick,
+      closeOnClickAway: closeOnClickAway,
+      closeOnEscape: closeOnEscape,
+      focusAnchorOnClose: focusAnchorOnClose,
+      fitToAnchorWidth: fitToAnchorWidth,
+      isOpen: isOpen,
+      offset: offset,
+      onClose: onClose,
+      onInfiniteScroll: onInfiniteScroll,
+      placement: placement,
+      shouldFocusOnOpen: false,
+      theme: theme,
+      children: children
+    })]
+  });
 });
 Autocomplete.displayName = COMPONENT_NAME$1;
 Autocomplete.className = CLASSNAME$1;
 Autocomplete.defaultProps = DEFAULT_PROPS$1;
 
-/**
- * Defines the props of the component.
- */
-
 /**
  * Component display name.
  */
@@ -154,17 +150,17 @@ const DEFAULT_PROPS = {
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
     const onClick = event => onClear && onClear(event, choice);
-    return /*#__PURE__*/React.createElement(Chip, {
-      key: index,
-      after: onClear && /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/jsx(Chip, {
+      after: onClear && /*#__PURE__*/jsx(Icon, {
         icon: mdiClose,
         size: Size.xxs
       }),
       isDisabled: isDisabled,
       size: Size.s,
       onAfterClick: onClick,
-      onClick: onClick
-    }, choice);
+      onClick: onClick,
+      children: choice
+    }, index);
   },
   values: []
 };
@@ -220,9 +216,9 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     values = DEFAULT_PROPS.values,
     ...forwardedProps
   } = otherProps;
-  return /*#__PURE__*/React.createElement(Autocomplete, _extends({
-    ref: ref
-  }, forwardedProps, {
+  return /*#__PURE__*/jsx(Autocomplete, {
+    ref: ref,
+    ...forwardedProps,
     anchorToInput: anchorToInput,
     className: classNames(className, CLASSNAME),
     name: name,
@@ -236,8 +232,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     helper: helper,
     icon: icon,
     inputRef: inputRef,
-    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear))
-  }, disabledStateProps, {
+    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
+    ...disabledStateProps,
     isRequired: isRequired,
     clearButtonProps: clearButtonProps,
     isValid: isValid,
@@ -253,12 +249,13 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     offset: offset,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
-    onInfiniteScroll: onInfiniteScroll
-  }), children);
+    onInfiniteScroll: onInfiniteScroll,
+    children: children
+  });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME;
 AutocompleteMultiple.className = CLASSNAME;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
 
 export { Autocomplete, AutocompleteMultiple };
-//# sourceMappingURL=autocomplete-bfbdeb3c.js.map
+//# sourceMappingURL=autocomplete-8d3f37ea.js.map