@lumx/react 3.20.1-alpha.32 → 3.20.1-alpha.33

package/_internal/{index-d3e86bd8.js → packages/lumx-react/src/components/icon/Icon-21a83e8c.js}

@@ -1,11 +1,10 @@
 import classNames from 'classnames';
 import { getRootClassName, resolveColorWithVariants, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from './forwardRef-8bce732e.js';
-import { u as useTheme } from './ThemeContext-3181f000.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-
-const mdiAlertCircle = 'M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
+import { mdiAlertCircle } from '../../../../lumx-icons/dist/esm/alert-circle-893eb653.js';
 
 /**
  * Component display name.
@@ -100,5 +99,5 @@ Icon.displayName = COMPONENT_NAME;
 Icon.className = CLASSNAME;
 Icon.defaultProps = DEFAULT_PROPS;
 
-export { Icon as I, mdiAlertCircle as m };
-//# sourceMappingURL=index-d3e86bd8.js.map
+export { Icon };
+//# sourceMappingURL=Icon-21a83e8c.js.map

package/_internal/packages/lumx-react/src/components/icon/Icon-21a83e8c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon-21a83e8c.js","sources":["../../../../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { mdiAlertCircle } from '@lumx/icons';\nimport { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nexport type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface IconProps extends GenericProps, HasTheme {\n    /** Color variant. */\n    color?: ColorWithVariants;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Whether the icon has a shape. */\n    hasShape?: boolean;\n    /**\n     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).\n     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n     */\n    icon: string;\n    /** Size variant. */\n    size?: IconSizes;\n    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */\n    alt?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Icon';\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<IconProps> = {};\n\n/**\n * Icon component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const {\n        className,\n        color: propColor,\n        colorVariant: propColorVariant,\n        hasShape,\n        icon,\n        size,\n        theme = defaultTheme,\n        alt,\n        ...forwardedProps\n    } = props;\n    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);\n\n    // Color\n    let iconColor = color;\n    if (!iconColor && (hasShape || theme)) {\n        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;\n    }\n\n    // Color variant\n    let iconColorVariant = colorVariant;\n    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {\n        iconColorVariant = 'L2';\n    }\n\n    // Size\n    let iconSize = size;\n    if (size && hasShape) {\n        if (size === Size.xxs || size === Size.xs) {\n            iconSize = Size.s;\n        } else if (size === Size.xxl) {\n            iconSize = Size.xl;\n        }\n    } else if (hasShape) {\n        iconSize = Size.m;\n    }\n\n    return (\n        <i\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color: iconColor,\n                    colorVariant: iconColorVariant,\n                    hasShape,\n                    prefix: CLASSNAME,\n                    theme,\n                    size: iconSize,\n                }),\n                !hasShape && `${CLASSNAME}--no-shape`,\n                !hasShape &&\n                    iconColor === ColorPalette.yellow &&\n                    icon === mdiAlertCircle &&\n                    `${CLASSNAME}--has-dark-layer`,\n                `${CLASSNAME}--path`,\n            )}\n        >\n            <svg\n                aria-hidden={alt ? undefined : 'true'}\n                role={alt ? 'img' : undefined}\n                aria-label={alt}\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                style={{ verticalAlign: '-0.125em' }}\n                viewBox=\"0 0 24 24\"\n                width=\"1em\"\n            >\n                <path d={icon} fill=\"currentColor\" />\n            </svg>\n        </i>\n    );\n});\nIcon.displayName = COMPONENT_NAME;\nIcon.className = CLASSNAME;\nIcon.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Icon","forwardRef","props","ref","defaultTheme","useTheme","className","color","propColor","colorVariant","propColorVariant","hasShape","icon","size","theme","alt","forwardedProps","resolveColorWithVariants","iconColor","Theme","dark","ColorPalette","light","iconColorVariant","iconSize","Size","xxs","xs","s","xxl","xl","m","_jsx","classNames","handleBasicClasses","prefix","yellow","mdiAlertCircle","children","undefined","role","height","preserveAspectRatio","style","verticalAlign","viewBox","width","d","fill","displayName","defaultProps"],"mappings":"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"}

package/_internal/{components/image-block-4f3fe64c.js → packages/lumx-react/src/components/image-block/ImageBlock-403e75e0.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { I as ImageCaption } from '../ImageCaption-6f2f4131.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { ImageCaption } from './ImageCaption-f59f00d0.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Alignment, Theme } from '@lumx/core/js/constants';
-import { T as Thumbnail } from '../Thumbnail-22bbea7e.js';
+import { Thumbnail } from '../thumbnail/Thumbnail-49bab66c.js';
 
 const ImageBlockCaptionPosition = {
   below: 'below',
@@ -108,4 +108,4 @@ ImageBlock.className = CLASSNAME;
 ImageBlock.defaultProps = DEFAULT_PROPS;
 
 export { ImageBlock, ImageBlockCaptionPosition };
-//# sourceMappingURL=image-block-4f3fe64c.js.map
+//# sourceMappingURL=ImageBlock-403e75e0.js.map

package/_internal/packages/lumx-react/src/components/image-block/ImageBlock-403e75e0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlock-403e75e0.js","sources":["../../../../../../../src/components/image-block/ImageBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';\n\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { ThumbnailProps } from '../thumbnail/Thumbnail';\nimport { ImageCaption, ImageCaptionMetadata } from './ImageCaption';\n\n/**\n * Image block variants.\n */\nexport const ImageBlockCaptionPosition = {\n    below: 'below',\n    over: 'over',\n} as const;\nexport type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;\n\n/**\n *  Image block sizes.\n */\nexport type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Alignment. */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Caption position. */\n    captionPosition?: ImageBlockCaptionPosition;\n    /** Whether the image has to fill its container height or not. */\n    fillHeight?: boolean;\n    /** Image URL. */\n    image: string;\n    /** Size variant. */\n    size?: ImageBlockSize;\n    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */\n    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ImageBlock';\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<ImageBlockProps> = {\n    captionPosition: ImageBlockCaptionPosition.below,\n    align: Alignment.left,\n};\n\n/**\n * ImageBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        align = DEFAULT_PROPS.align,\n        alt,\n        captionPosition = DEFAULT_PROPS.captionPosition,\n        captionStyle,\n        className,\n        description,\n        descriptionProps,\n        fillHeight,\n        image,\n        size,\n        tags,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        titleProps,\n        ...forwardedProps\n    } = props;\n    return (\n        <figure\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    captionPosition,\n                    align,\n                    size,\n                    theme,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <Thumbnail\n                {...thumbnailProps}\n                className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}\n                fillHeight={fillHeight}\n                align={align}\n                image={image}\n                size={size}\n                theme={theme}\n                alt={(alt || title) as string}\n            />\n            <ImageCaption\n                as=\"figcaption\"\n                baseClassName={CLASSNAME}\n                theme={theme}\n                title={title}\n                titleProps={titleProps}\n                description={description}\n                descriptionProps={descriptionProps}\n                tags={tags}\n                captionStyle={captionStyle}\n                align={align}\n                truncate={captionPosition === 'over'}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n        </figure>\n    );\n});\nImageBlock.displayName = COMPONENT_NAME;\nImageBlock.className = CLASSNAME;\nImageBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["ImageBlockCaptionPosition","below","over","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","captionPosition","align","Alignment","left","ImageBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","captionStyle","className","description","descriptionProps","fillHeight","image","size","tags","theme","thumbnailProps","title","titleProps","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","ImageCaption","as","baseClassName","truncate","displayName","defaultProps"],"mappings":"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"}

package/_internal/{ImageCaption-6f2f4131.js → packages/lumx-react/src/components/image-block/ImageCaption-f59f00d0.js}

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { u as useTheme } from './ThemeContext-3181f000.js';
-import { FlexBox } from './components/flex-box-4eeba972.js';
-import { T as Text } from './index-77f213b1.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { FlexBox } from '../flex-box/FlexBox-57fe8191.js';
+import { Text } from '../text/Text-d8efb3ca.js';
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
@@ -71,5 +71,5 @@ const ImageCaption = props => {
   });
 };
 
-export { ImageCaption as I };
-//# sourceMappingURL=ImageCaption-6f2f4131.js.map
+export { ImageCaption };
+//# sourceMappingURL=ImageCaption-f59f00d0.js.map

package/_internal/packages/lumx-react/src/components/image-block/ImageCaption-f59f00d0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCaption-f59f00d0.js","sources":["../../../../../../../src/components/image-block/ImageCaption.tsx"],"sourcesContent":["import { CSSProperties, ReactNode } from 'react';\n\nimport { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';\nimport { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\n\ntype As = 'div' | 'figcaption';\n\ntype ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;\n\nexport type ImageCaptionMetadata = {\n    /** Image title to display in the caption. */\n    title?: string;\n    /** Props to pass to the title. */\n    titleProps?: ForwardedTextProps;\n    /** Image description. Can be either a string, or sanitized html. */\n    description?: string | { __html: string };\n    /** Props to pass to the title. */\n    descriptionProps?: ForwardedTextProps;\n    /** Tag content. */\n    tags?: ReactNode;\n    /** Caption custom CSS style. */\n    captionStyle?: CSSProperties;\n};\n\nexport type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &\n    HasPolymorphicAs<AS> &\n    ImageCaptionMetadata & {\n        /** Base className for sub elements */\n        baseClassName?: string;\n        /** Alignment. */\n        align?: HorizontalAlignment;\n        /** Truncate text on title & description (no line wrapping). */\n        truncate?: TextProps['truncate'];\n    };\n\n/** Internal component used to render image captions */\nexport const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {\n    const defaultTheme = useTheme();\n    const {\n        baseClassName,\n        theme = defaultTheme,\n        as = 'figcaption',\n        title,\n        titleProps,\n        description,\n        descriptionProps,\n        tags,\n        captionStyle,\n        align,\n        truncate,\n    } = props;\n    if (!title && !description && !tags) return null;\n\n    const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;\n    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;\n\n    // Display description as string or HTML\n    const descriptionContent =\n        typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };\n\n    return (\n        <FlexBox\n            as={as}\n            className={classNames(baseClassName && `${baseClassName}__wrapper`)}\n            style={captionStyle}\n            orientation=\"vertical\"\n            vAlign={align}\n            hAlign={align === 'center' ? align : undefined}\n            gap=\"regular\"\n        >\n            {(title || description) && (\n                <Text\n                    as=\"p\"\n                    className={classNames(baseClassName && `${baseClassName}__caption`)}\n                    truncate={truncate}\n                    {...baseColor}\n                >\n                    {title && (\n                        <Text\n                            {...titleProps}\n                            as=\"span\"\n                            className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}\n                            typography=\"subtitle1\"\n                            {...titleColor}\n                        >\n                            {title}\n                        </Text>\n                    )}{' '}\n                    {description && (\n                        <Text\n                            {...descriptionProps}\n                            as=\"span\"\n                            className={classNames(\n                                descriptionProps?.className,\n                                baseClassName && `${baseClassName}__description`,\n                            )}\n                            typography=\"body1\"\n                            {...descriptionContent}\n                        />\n                    )}\n                </Text>\n            )}\n            {tags && (\n                <FlexBox\n                    className={classNames(baseClassName && `${baseClassName}__tags`)}\n                    orientation=\"horizontal\"\n                    vAlign={align}\n                >\n                    {tags}\n                </FlexBox>\n            )}\n        </FlexBox>\n    );\n};\n"],"names":["ImageCaption","props","defaultTheme","useTheme","baseClassName","theme","as","title","titleProps","description","descriptionProps","tags","captionStyle","align","truncate","titleColor","color","baseColor","colorVariant","descriptionContent","children","dangerouslySetInnerHTML","_jsxs","FlexBox","className","classNames","style","orientation","vAlign","hAlign","undefined","gap","Text","_jsx","typography"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/image-lightbox/ImageLightbox-5986e26a.js

@@ -0,0 +1,87 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { ImageSlideshow } from './internal/ImageSlideshow-a185b234.js';
+import { useImageLightbox } from './useImageLightbox-4a785dc6.js';
+import { CLASSNAME, COMPONENT_NAME } from './constants-31b6784b.js';
+import { jsx } from 'react/jsx-runtime';
+import { Lightbox } from '../lightbox/Lightbox-198bb478.js';
+import { ThemeProvider } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { ClickAwayProvider } from '../../utils/ClickAwayProvider/ClickAwayProvider-ec55d284.js';
+
+const Inner = forwardRef((props, ref) => {
+  const {
+    className,
+    isOpen,
+    closeButtonProps,
+    onClose,
+    parentElement,
+    activeImageIndex,
+    slideshowControlsProps,
+    slideGroupLabel,
+    images,
+    zoomOutButtonProps,
+    zoomInButtonProps,
+    activeImageRef: propImageRef,
+    ...forwardedProps
+  } = props;
+  const currentPaginationItemRef = React__default.useRef(null);
+  const footerRef = React__default.useRef(null);
+  const imageRef = React__default.useRef(null);
+  const clickAwayChildrenRefs = React__default.useRef([imageRef, footerRef]);
+  const onClickAway = React__default.useCallback(evt => {
+    const targetElement = evt.target;
+    if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
+
+    // Skip click away if clicking on the scrollbar
+    if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
+    onClose?.();
+  }, [onClose]);
+  return /*#__PURE__*/jsx(Lightbox, {
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    parentElement: parentElement,
+    isOpen: isOpen,
+    onClose: onClose,
+    closeButtonProps: closeButtonProps,
+    focusElement: currentPaginationItemRef,
+    ...forwardedProps,
+    // Disable the close on click away as we want a custom one here
+    preventAutoClose: true,
+    children: /*#__PURE__*/jsx(ClickAwayProvider, {
+      childrenRefs: clickAwayChildrenRefs,
+      callback: onClickAway,
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        value: "dark",
+        children: /*#__PURE__*/jsx(ImageSlideshow, {
+          activeImageIndex: activeImageIndex,
+          slideGroupLabel: slideGroupLabel,
+          slideshowControlsProps: slideshowControlsProps,
+          images: images,
+          zoomInButtonProps: zoomInButtonProps,
+          zoomOutButtonProps: zoomOutButtonProps,
+          footerRef: footerRef,
+          activeImageRef: useMergeRefs(propImageRef, imageRef),
+          currentPaginationItemRef: currentPaginationItemRef
+        })
+      })
+    })
+  });
+});
+Inner.displayName = COMPONENT_NAME;
+Inner.className = CLASSNAME;
+
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageLightbox = Object.assign(Inner, {
+  useImageLightbox
+});
+
+export { ImageLightbox };
+//# sourceMappingURL=ImageLightbox-5986e26a.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/ImageLightbox-5986e26a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLightbox-5986e26a.js","sources":["../../../../../../../src/components/image-lightbox/ImageLightbox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { Lightbox, ThemeProvider } from '@lumx/react';\nimport { ClickAwayProvider } from '@lumx/react/utils';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ImageSlideshow } from './internal/ImageSlideshow';\nimport { useImageLightbox } from './useImageLightbox';\nimport type { ImageLightboxProps } from './types';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\n\nconst Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {\n    const {\n        className,\n        isOpen,\n        closeButtonProps,\n        onClose,\n        parentElement,\n        activeImageIndex,\n        slideshowControlsProps,\n        slideGroupLabel,\n        images,\n        zoomOutButtonProps,\n        zoomInButtonProps,\n        activeImageRef: propImageRef,\n        ...forwardedProps\n    } = props;\n    const currentPaginationItemRef = React.useRef(null);\n    const footerRef = React.useRef(null);\n    const imageRef = React.useRef(null);\n    const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);\n\n    const onClickAway = React.useCallback(\n        (evt: Event) => {\n            const targetElement = evt.target;\n            if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;\n\n            // Skip click away if clicking on the scrollbar\n            if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;\n\n            onClose?.();\n        },\n        [onClose],\n    );\n\n    return (\n        <Lightbox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            parentElement={parentElement}\n            isOpen={isOpen}\n            onClose={onClose}\n            closeButtonProps={closeButtonProps}\n            focusElement={currentPaginationItemRef}\n            {...forwardedProps}\n            // Disable the close on click away as we want a custom one here\n            preventAutoClose\n        >\n            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>\n                <ThemeProvider value=\"dark\">\n                    <ImageSlideshow\n                        activeImageIndex={activeImageIndex}\n                        slideGroupLabel={slideGroupLabel}\n                        slideshowControlsProps={slideshowControlsProps}\n                        images={images}\n                        zoomInButtonProps={zoomInButtonProps}\n                        zoomOutButtonProps={zoomOutButtonProps}\n                        footerRef={footerRef}\n                        activeImageRef={useMergeRefs(propImageRef, imageRef)}\n                        currentPaginationItemRef={currentPaginationItemRef}\n                    />\n                </ThemeProvider>\n            </ClickAwayProvider>\n        </Lightbox>\n    );\n});\nInner.displayName = COMPONENT_NAME;\nInner.className = CLASSNAME;\n\n/**\n * ImageLightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ImageLightbox = Object.assign(Inner, { useImageLightbox });\n"],"names":["Inner","forwardRef","props","ref","className","isOpen","closeButtonProps","onClose","parentElement","activeImageIndex","slideshowControlsProps","slideGroupLabel","images","zoomOutButtonProps","zoomInButtonProps","activeImageRef","propImageRef","forwardedProps","currentPaginationItemRef","React","useRef","footerRef","imageRef","clickAwayChildrenRefs","onClickAway","useCallback","evt","targetElement","target","HTMLElement","MouseEvent","clientWidth","clientX","clientHeight","clientY","_jsx","Lightbox","classNames","CLASSNAME","focusElement","preventAutoClose","children","ClickAwayProvider","childrenRefs","callback","ThemeProvider","value","ImageSlideshow","useMergeRefs","displayName","COMPONENT_NAME","ImageLightbox","Object","assign","useImageLightbox"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/image-lightbox/constants-31b6784b.js

@@ -0,0 +1,14 @@
+import { getRootClassName } from '@lumx/core/js/utils/className';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ImageLightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export { CLASSNAME, COMPONENT_NAME };
+//# sourceMappingURL=constants-31b6784b.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/constants-31b6784b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-31b6784b.js","sources":["../../../../../../../src/components/image-lightbox/constants.ts"],"sourcesContent":["import { getRootClassName } from '@lumx/core/js/utils/className';\n\n/**\n * Component display name.\n */\nexport const COMPONENT_NAME = 'ImageLightbox';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName"],"mappings":";;AAEA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,gBAAe;;AAE7C;AACA;AACA;MACaC,SAAS,GAAGC,gBAAgB,CAACF,cAAc;;;;"}

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/ImageSlide-9cfe18c6.js

@@ -0,0 +1,104 @@
+import React__default from 'react';
+import { useMergeRefs } from '../../../utils/react/mergeRefs-27df0cb6.js';
+import { useSizeOnWindowResize } from '../../../hooks/useSizeOnWindowResize-1ee5415f.js';
+import { useImageSize } from '../../../hooks/useImageSize-d672fc0e.js';
+import { isReducedMotion } from '../../../utils/browser/isReducedMotion-aca1229c.js';
+import { isEqual } from '../../../utils/object/isEqual-b1154f4b.js';
+import { CLASSNAME } from '../constants-31b6784b.js';
+import { usePointerZoom } from './usePointerZoom-8d318b2b.js';
+import { useAnimateScroll } from './useAnimateScroll-0db022d6.js';
+import { jsx } from 'react/jsx-runtime';
+import { SlideshowItem } from '../../slideshow/SlideshowItem-59ca2aee.js';
+import { Thumbnail } from '../../thumbnail/Thumbnail-49bab66c.js';
+
+/** Internal image slide component for ImageLightbox */
+const ImageSlide = /*#__PURE__*/React__default.memo(props => {
+  const {
+    isActive,
+    scale,
+    onScaleChange,
+    image: {
+      image,
+      imgRef: propImgRef,
+      imgProps,
+      alt,
+      loadingPlaceholderImageRef
+    }
+  } = props;
+
+  // Get scroll area size
+  const scrollAreaRef = React__default.useRef(null);
+  const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);
+  React__default.useEffect(() => {
+    // Update size when active
+    if (isActive) updateSize();
+  }, [isActive, updateSize]);
+
+  // Get image size
+  const imgRef = React__default.useRef(null);
+  const imageSize = useImageSize(imgRef, () => {
+    const width = Number.parseInt(imgProps?.width, 10);
+    const height = Number.parseInt(imgProps?.height, 10);
+    return width && height ? {
+      width,
+      height
+    } : null;
+  });
+
+  // Calculate new image size with scale
+  const scaledImageSize = React__default.useMemo(() => {
+    if (!scrollAreaSize || !imageSize) {
+      return null;
+    }
+    const horizontalScale = scrollAreaSize.width / imageSize.width;
+    const verticalScale = scrollAreaSize.height / imageSize.height;
+    const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
+    return {
+      width: imageSize.width * baseScale * (scale ?? 1),
+      height: imageSize.height * baseScale * (scale ?? 1)
+    };
+  }, [scrollAreaSize, imageSize, scale]);
+
+  // Animate scroll to preserve the center of the current visible window in the scroll area
+  const animateScroll = useAnimateScroll(scrollAreaRef);
+
+  // Zoom via mouse wheel or multi-touch pinch zoom
+  const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
+
+  // Animate scroll on scale change
+  React__default.useLayoutEffect(() => {
+    if (scale && !isPointerZooming) {
+      animateScroll();
+    }
+  }, [isPointerZooming, scale, animateScroll]);
+  const isScrollable = scaledImageSize && scrollAreaSize && (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
+  return /*#__PURE__*/jsx(SlideshowItem, {
+    ref: scrollAreaRef
+    // Make it accessible to keyboard nav when the zone is scrollable
+    ,
+    tabIndex: isScrollable ? 0 : undefined,
+    className: `${CLASSNAME}__image-slide`,
+    children: /*#__PURE__*/jsx(Thumbnail, {
+      imgRef: useMergeRefs(imgRef, propImgRef),
+      image: image,
+      alt: alt,
+      className: `${CLASSNAME}__thumbnail`,
+      imgProps: {
+        ...imgProps,
+        style: {
+          ...imgProps?.style,
+          ...(scaledImageSize || {
+            maxHeight: scrollAreaSize?.height,
+            maxWidth: scrollAreaSize?.width
+          }),
+          // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
+          transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined
+        }
+      },
+      loadingPlaceholderImageRef: loadingPlaceholderImageRef
+    })
+  });
+}, isEqual);
+
+export { ImageSlide };
+//# sourceMappingURL=ImageSlide-9cfe18c6.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/ImageSlide-9cfe18c6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSlide-9cfe18c6.js","sources":["../../../../../../../../src/components/image-lightbox/internal/ImageSlide.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SlideshowItem, Thumbnail } from '@lumx/react';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';\nimport { useImageSize } from '@lumx/react/hooks/useImageSize';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\nimport { isEqual } from '@lumx/react/utils/object/isEqual';\n\nimport { CLASSNAME } from '../constants';\nimport { usePointerZoom } from './usePointerZoom';\nimport { useAnimateScroll } from './useAnimateScroll';\nimport type { ImageProps } from '../types';\n\nexport interface ImageSlideProps {\n    image: ImageProps;\n    isActive?: boolean;\n    scale?: number;\n    onScaleChange?: (value: number) => void;\n}\n\n/** Internal image slide component for ImageLightbox */\nexport const ImageSlide = React.memo((props: ImageSlideProps) => {\n    const {\n        isActive,\n        scale,\n        onScaleChange,\n        image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef },\n    } = props;\n\n    // Get scroll area size\n    const scrollAreaRef = React.useRef<HTMLDivElement>(null);\n    const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);\n    React.useEffect(() => {\n        // Update size when active\n        if (isActive) updateSize();\n    }, [isActive, updateSize]);\n\n    // Get image size\n    const imgRef = React.useRef<HTMLImageElement>(null);\n    const imageSize = useImageSize(imgRef, () => {\n        const width = Number.parseInt(imgProps?.width as any, 10);\n        const height = Number.parseInt(imgProps?.height as any, 10);\n        return width && height ? { width, height } : null;\n    });\n\n    // Calculate new image size with scale\n    const scaledImageSize = React.useMemo(() => {\n        if (!scrollAreaSize || !imageSize) {\n            return null;\n        }\n        const horizontalScale = scrollAreaSize.width / imageSize.width;\n        const verticalScale = scrollAreaSize.height / imageSize.height;\n        const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));\n        return {\n            width: imageSize.width * baseScale * (scale ?? 1),\n            height: imageSize.height * baseScale * (scale ?? 1),\n        };\n    }, [scrollAreaSize, imageSize, scale]);\n\n    // Animate scroll to preserve the center of the current visible window in the scroll area\n    const animateScroll = useAnimateScroll(scrollAreaRef);\n\n    // Zoom via mouse wheel or multi-touch pinch zoom\n    const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);\n\n    // Animate scroll on scale change\n    React.useLayoutEffect(() => {\n        if (scale && !isPointerZooming) {\n            animateScroll();\n        }\n    }, [isPointerZooming, scale, animateScroll]);\n\n    const isScrollable =\n        scaledImageSize &&\n        scrollAreaSize &&\n        (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);\n\n    return (\n        <SlideshowItem\n            ref={scrollAreaRef}\n            // Make it accessible to keyboard nav when the zone is scrollable\n            tabIndex={isScrollable ? 0 : undefined}\n            className={`${CLASSNAME}__image-slide`}\n        >\n            <Thumbnail\n                imgRef={useMergeRefs(imgRef, propImgRef)}\n                image={image}\n                alt={alt}\n                className={`${CLASSNAME}__thumbnail`}\n                imgProps={{\n                    ...imgProps,\n                    style: {\n                        ...imgProps?.style,\n                        ...(scaledImageSize || {\n                            maxHeight: scrollAreaSize?.height,\n                            maxWidth: scrollAreaSize?.width,\n                        }),\n                        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion\n                        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined,\n                    },\n                }}\n                loadingPlaceholderImageRef={loadingPlaceholderImageRef}\n            />\n        </SlideshowItem>\n    );\n}, isEqual);\n"],"names":["ImageSlide","React","memo","props","isActive","scale","onScaleChange","image","imgRef","propImgRef","imgProps","alt","loadingPlaceholderImageRef","scrollAreaRef","useRef","scrollAreaSize","updateSize","useSizeOnWindowResize","useEffect","imageSize","useImageSize","width","Number","parseInt","height","scaledImageSize","useMemo","horizontalScale","verticalScale","baseScale","Math","min","animateScroll","useAnimateScroll","isPointerZooming","usePointerZoom","useLayoutEffect","isScrollable","_jsx","SlideshowItem","ref","tabIndex","undefined","className","CLASSNAME","children","Thumbnail","useMergeRefs","style","maxHeight","maxWidth","transition","isReducedMotion","isEqual"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/ImageSlideshow-a185b234.js

@@ -0,0 +1,150 @@
+import React__default from 'react';
+import { mergeRefs } from '../../../utils/react/mergeRefs-27df0cb6.js';
+import memoize from 'lodash/memoize';
+import { ImageCaption } from '../../image-block/ImageCaption-f59f00d0.js';
+import { CLASSNAME } from '../constants-31b6784b.js';
+import { ImageSlide } from './ImageSlide-9cfe18c6.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SlideshowControls } from '../../slideshow/SlideshowControls-ecca54c4.js';
+import { mdiMagnifyPlusOutline } from '../../../../../lumx-icons/dist/esm/magnify-plus-outline-341ceaa9.js';
+import { mdiMagnifyMinusOutline } from '../../../../../lumx-icons/dist/esm/magnify-minus-outline-2d69d0f5.js';
+import { Slides } from '../../slideshow/Slides-c8517dcb.js';
+import { IconButton } from '../../button/IconButton-a740ce59.js';
+import { FlexBox } from '../../flex-box/FlexBox-57fe8191.js';
+
+/** Internal image slideshow component for ImageLightbox */
+const ImageSlideshow = ({
+  activeImageIndex,
+  images,
+  slideGroupLabel,
+  zoomInButtonProps,
+  zoomOutButtonProps,
+  slideshowControlsProps,
+  currentPaginationItemRef,
+  footerRef,
+  activeImageRef
+}) => {
+  const {
+    activeIndex,
+    slideshowId,
+    setSlideshow,
+    slideshowSlidesId,
+    slidesCount,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    toggleAutoPlay
+  } = SlideshowControls.useSlideshowControls({
+    itemsCount: images.length,
+    activeIndex: activeImageIndex
+  });
+
+  // Image metadata (caption)
+  const title = images[activeIndex]?.title;
+  const description = images[activeIndex]?.description;
+  const tags = images[activeIndex]?.tags;
+  const metadata = title || description || tags ? /*#__PURE__*/jsx(ImageCaption, {
+    as: "div",
+    title: title,
+    description: description,
+    tags: tags,
+    align: "center"
+  }) : null;
+
+  // Slideshow controls
+  const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/jsx(SlideshowControls, {
+    activeIndex: activeIndex,
+    slidesCount: slidesCount,
+    onNextClick: onNextClick,
+    onPreviousClick: onPreviousClick,
+    onPaginationClick: onPaginationClick,
+    ...slideshowControlsProps,
+    paginationItemProps: index => {
+      const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
+      return {
+        ...props,
+        ref: mergeRefs(props?.ref,
+        // Focus the active pagination item once on mount
+        activeIndex === index ? currentPaginationItemRef : undefined)
+      };
+    }
+  }) : null;
+
+  // Zoom controls
+  const [scale, setScale] = React__default.useState(undefined);
+  const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
+  const onScaleChange = React__default.useMemo(() => {
+    if (!zoomEnabled) return undefined;
+    return newScale => {
+      setScale((prevScale = 1) => Math.max(1, newScale * prevScale));
+    };
+  }, [zoomEnabled]);
+  const zoomIn = React__default.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);
+  const zoomOut = React__default.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);
+  React__default.useEffect(() => {
+    // Reset scale on slide change
+    if (typeof activeIndex === 'number') setScale(undefined);
+  }, [activeIndex]);
+  const zoomControls = zoomEnabled && /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(IconButton, {
+      ...zoomInButtonProps,
+      emphasis: "low",
+      icon: mdiMagnifyPlusOutline,
+      onClick: zoomIn
+    }), /*#__PURE__*/jsx(IconButton, {
+      ...zoomOutButtonProps,
+      emphasis: "low",
+      isDisabled: !scale || scale <= 1,
+      icon: mdiMagnifyMinusOutline,
+      onClick: zoomOut
+    })]
+  });
+  const getImgRef = React__default.useMemo(() => memoize((index, isActive) => {
+    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+  },
+  // memoize based on both arguments
+  (...args) => args.join()), [images, activeImageRef]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Slides, {
+      activeIndex: activeIndex,
+      slideGroupLabel: slideGroupLabel,
+      fillHeight: true,
+      id: slideshowId,
+      ref: setSlideshow,
+      slidesId: slideshowSlidesId,
+      toggleAutoPlay: toggleAutoPlay,
+      children: images.map(({
+        image,
+        imgRef,
+        ...imageProps
+      }, index) => {
+        const isActive = index === activeIndex;
+        return /*#__PURE__*/jsx(ImageSlide, {
+          isActive: isActive,
+          image: {
+            ...imageProps,
+            image,
+            imgRef: getImgRef(index, isActive)
+          },
+          scale: isActive ? scale : undefined,
+          onScaleChange: onScaleChange
+        }, image);
+      })
+    }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
+      ref: footerRef,
+      className: `${CLASSNAME}__footer`,
+      orientation: "vertical",
+      vAlign: "center",
+      gap: "big",
+      children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
+        className: `${CLASSNAME}__footer-actions`,
+        orientation: "horizontal",
+        gap: "regular",
+        children: [slideShowControls, zoomControls]
+      })]
+    })]
+  });
+};
+
+export { ImageSlideshow };
+//# sourceMappingURL=ImageSlideshow-a185b234.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/ImageSlideshow-a185b234.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSlideshow-a185b234.js","sources":["../../../../../../../../src/components/image-lightbox/internal/ImageSlideshow.tsx"],"sourcesContent":["import React from 'react';\n\nimport { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';\nimport { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\nimport memoize from 'lodash/memoize';\nimport { ImageCaption } from '../../image-block/ImageCaption';\nimport { CLASSNAME } from '../constants';\nimport type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';\nimport { ImageSlide } from './ImageSlide';\n\nexport interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, ImagesProps {\n    currentPaginationItemRef?: React.Ref<HTMLButtonElement>;\n    footerRef?: React.Ref<HTMLDivElement>;\n}\n\n/** Internal image slideshow component for ImageLightbox */\nexport const ImageSlideshow: React.FC<ImageSlideshowProps> = ({\n    activeImageIndex,\n    images,\n    slideGroupLabel,\n    zoomInButtonProps,\n    zoomOutButtonProps,\n    slideshowControlsProps,\n    currentPaginationItemRef,\n    footerRef,\n    activeImageRef,\n}) => {\n    const {\n        activeIndex,\n        slideshowId,\n        setSlideshow,\n        slideshowSlidesId,\n        slidesCount,\n        onNextClick,\n        onPaginationClick,\n        onPreviousClick,\n        toggleAutoPlay,\n    } = SlideshowControls.useSlideshowControls({\n        itemsCount: images.length,\n        activeIndex: activeImageIndex,\n    });\n\n    // Image metadata (caption)\n    const title = images[activeIndex]?.title;\n    const description = images[activeIndex]?.description;\n    const tags = images[activeIndex]?.tags;\n    const metadata =\n        title || description || tags ? (\n            <ImageCaption as=\"div\" title={title} description={description} tags={tags} align=\"center\" />\n        ) : null;\n\n    // Slideshow controls\n    const slideShowControls =\n        slidesCount > 1 && slideshowControlsProps ? (\n            <SlideshowControls\n                activeIndex={activeIndex}\n                slidesCount={slidesCount}\n                onNextClick={onNextClick}\n                onPreviousClick={onPreviousClick}\n                onPaginationClick={onPaginationClick}\n                {...slideshowControlsProps}\n                paginationItemProps={(index: number) => {\n                    const props = slideshowControlsProps?.paginationItemProps?.(index) || {};\n                    return {\n                        ...props,\n                        ref: mergeRefs(\n                            (props as any)?.ref,\n                            // Focus the active pagination item once on mount\n                            activeIndex === index ? currentPaginationItemRef : undefined,\n                        ),\n                    };\n                }}\n            />\n        ) : null;\n\n    // Zoom controls\n    const [scale, setScale] = React.useState<number | undefined>(undefined);\n    const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;\n    const onScaleChange = React.useMemo(() => {\n        if (!zoomEnabled) return undefined;\n        return (newScale: number) => {\n            setScale((prevScale = 1) => Math.max(1, newScale * prevScale));\n        };\n    }, [zoomEnabled]);\n    const zoomIn = React.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);\n    const zoomOut = React.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);\n    React.useEffect(() => {\n        // Reset scale on slide change\n        if (typeof activeIndex === 'number') setScale(undefined);\n    }, [activeIndex]);\n    const zoomControls = zoomEnabled && (\n        <>\n            <IconButton {...zoomInButtonProps} emphasis=\"low\" icon={mdiMagnifyPlusOutline} onClick={zoomIn} />\n            <IconButton\n                {...zoomOutButtonProps}\n                emphasis=\"low\"\n                isDisabled={!scale || scale <= 1}\n                icon={mdiMagnifyMinusOutline}\n                onClick={zoomOut}\n            />\n        </>\n    );\n\n    const getImgRef = React.useMemo(\n        () =>\n            memoize(\n                (index: number, isActive: boolean) => {\n                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);\n                },\n                // memoize based on both arguments\n                (...args) => args.join(),\n            ),\n        [images, activeImageRef],\n    );\n\n    return (\n        <>\n            <Slides\n                activeIndex={activeIndex}\n                slideGroupLabel={slideGroupLabel}\n                fillHeight\n                id={slideshowId}\n                ref={setSlideshow}\n                slidesId={slideshowSlidesId}\n                toggleAutoPlay={toggleAutoPlay}\n            >\n                {images.map(({ image, imgRef, ...imageProps }, index) => {\n                    const isActive = index === activeIndex;\n                    return (\n                        <ImageSlide\n                            isActive={isActive}\n                            key={image}\n                            image={{\n                                ...imageProps,\n                                image,\n                                imgRef: getImgRef(index, isActive),\n                            }}\n                            scale={isActive ? scale : undefined}\n                            onScaleChange={onScaleChange}\n                        />\n                    );\n                })}\n            </Slides>\n            {(metadata || slideShowControls || zoomControls) && (\n                <FlexBox\n                    ref={footerRef}\n                    className={`${CLASSNAME}__footer`}\n                    orientation=\"vertical\"\n                    vAlign=\"center\"\n                    gap=\"big\"\n                >\n                    {metadata}\n\n                    <FlexBox className={`${CLASSNAME}__footer-actions`} orientation=\"horizontal\" gap=\"regular\">\n                        {slideShowControls}\n                        {zoomControls}\n                    </FlexBox>\n                </FlexBox>\n            )}\n        </>\n    );\n};\n"],"names":["ImageSlideshow","activeImageIndex","images","slideGroupLabel","zoomInButtonProps","zoomOutButtonProps","slideshowControlsProps","currentPaginationItemRef","footerRef","activeImageRef","activeIndex","slideshowId","setSlideshow","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","toggleAutoPlay","SlideshowControls","useSlideshowControls","itemsCount","length","title","description","tags","metadata","_jsx","ImageCaption","as","align","slideShowControls","paginationItemProps","index","props","ref","mergeRefs","undefined","scale","setScale","React","useState","zoomEnabled","onScaleChange","useMemo","newScale","prevScale","Math","max","zoomIn","useCallback","zoomOut","useEffect","zoomControls","_jsxs","_Fragment","children","IconButton","emphasis","icon","mdiMagnifyPlusOutline","onClick","isDisabled","mdiMagnifyMinusOutline","getImgRef","memoize","isActive","imgRef","args","join","Slides","fillHeight","id","slidesId","map","image","imageProps","ImageSlide","FlexBox","className","CLASSNAME","orientation","vAlign","gap"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/useAnimateScroll-0db022d6.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+function useAnimateScroll(scrollAreaRef) {
+  return React__default.useMemo(() => {
+    let animationFrame = null;
+    return function animate(centerPoint, initialScrollAreaSize) {
+      const scrollArea = scrollAreaRef.current;
+      if (!scrollArea) {
+        return;
+      }
+
+      // Cancel previously running animation
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Center on the given point or else on the scroll area visual center
+      const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+      const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+      const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+      const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+      const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+      const heightRatio = heightCenter / initialScrollHeight;
+      const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+      const widthRatio = widthCenter / initialScrollWidth;
+      let prevScrollHeight = 0;
+      let prevScrollWidth = 0;
+      function nextFrame() {
+        const {
+          scrollHeight,
+          scrollWidth,
+          clientHeight,
+          clientWidth
+        } = scrollArea;
+
+        // Scroll area stopped expanding => stop animation
+        if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+          animationFrame = null;
+          return;
+        }
+
+        // Compute next scroll position
+        const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+        const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+        scrollArea.scrollTo({
+          top,
+          left
+        });
+        prevScrollHeight = scrollHeight;
+        prevScrollWidth = scrollWidth;
+        animationFrame = requestAnimationFrame(nextFrame);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+    };
+  }, [scrollAreaRef]);
+}
+
+export { useAnimateScroll };
+//# sourceMappingURL=useAnimateScroll-0db022d6.js.map

package/_internal/packages/lumx-react/src/components/image-lightbox/internal/useAnimateScroll-0db022d6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimateScroll-0db022d6.js","sources":["../../../../../../../../src/components/image-lightbox/internal/useAnimateScroll.ts"],"sourcesContent":["import React from 'react';\nimport type { Point, RectSize } from '@lumx/react/utils/type';\n\n/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */\nexport function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {\n    return React.useMemo(() => {\n        let animationFrame: number | null = null;\n\n        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {\n            const scrollArea = scrollAreaRef.current as HTMLDivElement;\n            if (!scrollArea) {\n                return;\n            }\n\n            // Cancel previously running animation\n            if (animationFrame) cancelAnimationFrame(animationFrame);\n\n            // Center on the given point or else on the scroll area visual center\n            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;\n            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;\n\n            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;\n            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;\n\n            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;\n            const heightRatio = heightCenter / initialScrollHeight;\n\n            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;\n            const widthRatio = widthCenter / initialScrollWidth;\n\n            let prevScrollHeight = 0;\n            let prevScrollWidth = 0;\n\n            function nextFrame() {\n                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;\n\n                // Scroll area stopped expanding => stop animation\n                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {\n                    animationFrame = null;\n                    return;\n                }\n\n                // Compute next scroll position\n                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;\n                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;\n\n                scrollArea.scrollTo({ top, left });\n                prevScrollHeight = scrollHeight;\n                prevScrollWidth = scrollWidth;\n                animationFrame = requestAnimationFrame(nextFrame);\n            }\n            animationFrame = requestAnimationFrame(nextFrame);\n        };\n    }, [scrollAreaRef]);\n}\n"],"names":["useAnimateScroll","scrollAreaRef","React","useMemo","animationFrame","animate","centerPoint","initialScrollAreaSize","scrollArea","current","cancelAnimationFrame","clientHeightRatio","y","clientHeight","clientWidthRatio","x","clientWidth","initialScrollHeight","height","scrollHeight","initialScrollWidth","width","scrollWidth","heightCenter","scrollTop","heightRatio","widthCenter","scrollLeft","widthRatio","prevScrollHeight","prevScrollWidth","nextFrame","top","left","scrollTo","requestAnimationFrame"],"mappings":";;AAGA;AACO,SAASA,gBAAgBA,CAACC,aAA8C,EAAE;AAC7E,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;IACvB,IAAIC,cAA6B,GAAG,IAAI,CAAA;AAExC,IAAA,OAAO,SAASC,OAAOA,CAACC,WAAmB,EAAEC,qBAAgC,EAAE;AAC3E,MAAA,MAAMC,UAAU,GAAGP,aAAa,CAACQ,OAAyB,CAAA;MAC1D,IAAI,CAACD,UAAU,EAAE;AACb,QAAA,OAAA;AACJ,OAAA;;AAEA;AACA,MAAA,IAAIJ,cAAc,EAAEM,oBAAoB,CAACN,cAAc,CAAC,CAAA;;AAExD;AACA,MAAA,MAAMO,iBAAiB,GAAGL,WAAW,EAAEM,CAAC,GAAGN,WAAW,CAACM,CAAC,GAAGJ,UAAU,CAACK,YAAY,GAAG,GAAG,CAAA;AACxF,MAAA,MAAMC,gBAAgB,GAAGR,WAAW,EAAES,CAAC,GAAGT,WAAW,CAACS,CAAC,GAAGP,UAAU,CAACQ,WAAW,GAAG,GAAG,CAAA;MAEtF,MAAMC,mBAAmB,GAAGV,qBAAqB,EAAEW,MAAM,IAAIV,UAAU,CAACW,YAAY,CAAA;MACpF,MAAMC,kBAAkB,GAAGb,qBAAqB,EAAEc,KAAK,IAAIb,UAAU,CAACc,WAAW,CAAA;MAEjF,MAAMC,YAAY,GAAGf,UAAU,CAACgB,SAAS,GAAGhB,UAAU,CAACK,YAAY,GAAGF,iBAAiB,CAAA;AACvF,MAAA,MAAMc,WAAW,GAAGF,YAAY,GAAGN,mBAAmB,CAAA;MAEtD,MAAMS,WAAW,GAAGlB,UAAU,CAACmB,UAAU,GAAGnB,UAAU,CAACQ,WAAW,GAAGF,gBAAgB,CAAA;AACrF,MAAA,MAAMc,UAAU,GAAGF,WAAW,GAAGN,kBAAkB,CAAA;MAEnD,IAAIS,gBAAgB,GAAG,CAAC,CAAA;MACxB,IAAIC,eAAe,GAAG,CAAC,CAAA;MAEvB,SAASC,SAASA,GAAG;QACjB,MAAM;UAAEZ,YAAY;UAAEG,WAAW;UAAET,YAAY;AAAEG,UAAAA,WAAAA;AAAY,SAAC,GAAGR,UAAU,CAAA;;AAE3E;AACA,QAAA,IAAIW,YAAY,KAAKU,gBAAgB,IAAIP,WAAW,KAAKQ,eAAe,EAAE;AACtE1B,UAAAA,cAAc,GAAG,IAAI,CAAA;AACrB,UAAA,OAAA;AACJ,SAAA;;AAEA;QACA,MAAM4B,GAAG,GAAGP,WAAW,GAAGN,YAAY,GAAGN,YAAY,GAAGF,iBAAiB,CAAA;QACzE,MAAMsB,IAAI,GAAGL,UAAU,GAAGN,WAAW,GAAGN,WAAW,GAAGF,gBAAgB,CAAA;QAEtEN,UAAU,CAAC0B,QAAQ,CAAC;UAAEF,GAAG;AAAEC,UAAAA,IAAAA;AAAK,SAAC,CAAC,CAAA;AAClCJ,QAAAA,gBAAgB,GAAGV,YAAY,CAAA;AAC/BW,QAAAA,eAAe,GAAGR,WAAW,CAAA;AAC7BlB,QAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;AACrD,OAAA;AACA3B,MAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;KACpD,CAAA;AACL,GAAC,EAAE,CAAC9B,aAAa,CAAC,CAAC,CAAA;AACvB;;;;"}