@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/components/image-lightbox/index-27017547.js

@@ -0,0 +1,759 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { u as useMergeRefs, m as mergeRefs } from '../../f0d7d6ea.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import memoize from 'lodash/memoize';
+import { I as ImageCaption } from '../../5cef5e8c.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import throttle from 'lodash/throttle';
+import { i as isReducedMotion } from '../../a38bdcd0.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { S as SlideshowItem, a as SlideshowControls, b as Slides } from '../../b326655a.js';
+import { T as Thumbnail } from '../../035c132d.js';
+import { I as IconButton } from '../../b83e864b.js';
+import { FlexBox } from '../flex-box/index-0d6b6b43.js';
+import ReactDOM from 'react-dom';
+import { Lightbox } from '../lightbox/index-fad5a9f2.js';
+import { T as ThemeProvider } from '../../3181f000.js';
+import { ClickAwayProvider } from '../../utils/ClickAwayProvider/index-1234ce76.js';
+
+const mdiMagnifyMinusOutline = 'M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';
+
+const mdiMagnifyPlusOutline = 'm15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ImageLightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+function useSizeOnWindowResize(elementRef) {
+  const [size, setSize] = React__default.useState(null);
+  const updateSize = React__default.useMemo(() => throttle(() => {
+    const newSize = elementRef.current?.getBoundingClientRect();
+    if (newSize) setSize(newSize);
+  }, 10), [elementRef]);
+  React__default.useEffect(() => {
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, [updateSize]);
+  return [size, updateSize];
+}
+
+/** Get natural image size after load. */
+function useImageSize(imgRef, getInitialSize) {
+  const [imageSize, setImageSize] = React__default.useState(getInitialSize || null);
+  React__default.useEffect(() => {
+    const {
+      current: img
+    } = imgRef;
+    if (!img) {
+      return undefined;
+    }
+    const onLoad = () => setImageSize({
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+    img.addEventListener('load', onLoad);
+    return () => img.removeEventListener('load', onLoad);
+  }, [imgRef]);
+  return imageSize;
+}
+
+/** Minimal recursive deep equal of JS values */
+function isEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+  if (typeof obj1 === 'object' && typeof obj2 === 'object') {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every(key1 => isEqual(obj1[key1], obj2[key1]));
+  }
+  return false;
+}
+
+/**
+ * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+ */
+function usePointerZoom(scrollAreaRef, onScaleChange, animateScroll) {
+  const [isPointerZooming, setPointerZooming] = React__default.useState(false);
+  React__default.useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea || !onScaleChange) {
+      return undefined;
+    }
+    let animationFrame;
+    let zoomStateTimeoutId;
+    function updateScaleOnNextFrame(newScale, mousePosition) {
+      // Cancel previously scheduled frame
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Cancel previously scheduled zoom state change
+      if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+      function nextFrame() {
+        setPointerZooming(true);
+        onScaleChange?.(newScale);
+        animationFrame = null;
+        // Wait a bit before indicating the pointer zooming is finished
+        zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+
+      // Animate scroll in parallel (centering on the current mouse position)
+      animateScroll(mousePosition, {
+        width: scrollArea.scrollWidth,
+        height: scrollArea.scrollHeight
+      });
+    }
+    function onWheel(event) {
+      if (!event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      const newScale = Math.exp(-event.deltaY / 50);
+
+      // Update scale on next frame (focused on the mouse position)
+      updateScaleOnNextFrame(newScale, {
+        x: event.clientX,
+        y: event.clientY
+      });
+    }
+    const activePointers = {};
+    let prevDistance = null;
+    let previousCenterPoint = null;
+    function onPointerDown(event) {
+      activePointers[event.pointerId] = event;
+    }
+    function onPointerMove(event) {
+      // Update pointer in cache
+      if (activePointers[event.pointerId]) {
+        activePointers[event.pointerId] = event;
+      }
+      const pointers = Object.values(activePointers);
+
+      // Make sure we run computation on one of the pointer in the group
+      if (pointers[0]?.pointerId !== event.pointerId) {
+        return;
+      }
+
+      // Centered point between all pointers
+      const centerPoint = {
+        x: pointers.reduce((x, {
+          clientX
+        }) => x + clientX, 0) / pointers.length,
+        y: pointers.reduce((y, {
+          clientY
+        }) => y + clientY, 0) / pointers.length
+      };
+
+      // Movement of the center point
+      const deltaCenterPoint = previousCenterPoint && {
+        left: previousCenterPoint.x - centerPoint.x,
+        top: previousCenterPoint.y - centerPoint.y
+      };
+
+      // Pan X & Y
+      if (deltaCenterPoint) {
+        // Apply movement of the center point to the scroll
+        scrollArea.scrollBy({
+          top: deltaCenterPoint.top / 2,
+          left: deltaCenterPoint.left / 2
+        });
+      }
+
+      // Pinch to zoom
+      if (pointers.length === 2) {
+        const [pointer1, pointer2] = pointers;
+        const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+        if (prevDistance && deltaCenterPoint) {
+          const delta = prevDistance - distance;
+          const absDelta = Math.abs(delta);
+
+          // Zoom only if we are "pinching" more than we are moving the pointers
+          if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
+            // Update scale on next frame (focused on the center point between the two pointers)
+            const newScale = Math.exp(-delta / 100);
+            updateScaleOnNextFrame(newScale, centerPoint);
+          }
+        }
+        prevDistance = distance;
+      }
+      previousCenterPoint = centerPoint;
+    }
+    function onPointerUp(event) {
+      prevDistance = null;
+      previousCenterPoint = null;
+      delete activePointers[event.pointerId];
+    }
+    scrollArea.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    const isMultiTouch = navigator.maxTouchPoints >= 2;
+    if (isMultiTouch) {
+      scrollArea.addEventListener('pointerdown', onPointerDown);
+      scrollArea.addEventListener('pointermove', onPointerMove);
+      scrollArea.addEventListener('pointerup', onPointerUp);
+    }
+    return () => {
+      scrollArea.removeEventListener('wheel', onWheel);
+      if (isMultiTouch) {
+        scrollArea.removeEventListener('pointerdown', onPointerDown);
+        scrollArea.removeEventListener('pointermove', onPointerMove);
+        scrollArea.removeEventListener('pointerup', onPointerUp);
+      }
+    };
+  }, [animateScroll, onScaleChange, scrollAreaRef]);
+  return isPointerZooming;
+}
+
+/** 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]);
+}
+
+/** 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);
+
+/** 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]
+      })]
+    })]
+  });
+};
+
+/** Unref a react ref or element */
+function unref(maybeElement) {
+  if (maybeElement instanceof HTMLElement) return maybeElement;
+  return maybeElement?.current;
+}
+
+function setupViewTransitionName(elementRef, name) {
+  let originalName = null;
+  return {
+    set() {
+      const element = unref(elementRef);
+      if (!element) return;
+      originalName = element.style.viewTransitionName;
+      element.style.viewTransitionName = name;
+    },
+    unset() {
+      const element = unref(elementRef);
+      if (!element || originalName === null) return;
+      element.style.viewTransitionName = originalName;
+    }
+  };
+}
+
+/**
+ * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+ * user preference.
+ *
+ * @param changes                callback containing the changes to apply within the view transition.
+ * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
+ */
+async function startViewTransition({
+  changes,
+  viewTransitionName
+}) {
+  const start = document?.startViewTransition?.bind(document);
+  const prefersReducedMotion = isReducedMotion();
+  const {
+    flushSync
+  } = ReactDOM;
+  if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+    // Skip, apply changes without a transition
+    changes();
+    return;
+  }
+
+  // Setup set/unset transition name on source & target
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  sourceTransitionName.set();
+
+  // Start view transition, apply changes & flush to DOM
+  await start(() => {
+    sourceTransitionName.unset();
+    flushSync(changes);
+    targetTransitionName.set();
+  }).updateCallbackDone;
+  targetTransitionName.unset();
+}
+
+/** Find image in element including the element */
+const findImage = element => element?.matches('img') ? element : element?.querySelector('img') || null;
+
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+
+const EMPTY_PROPS = {
+  isOpen: false,
+  images: [],
+  parentElement: /*#__PURE__*/React__default.createRef()
+};
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param props Images to display in the image lightbox
+ */
+function useImageLightbox(props) {
+  const propsRef = React__default.useRef(props);
+  React__default.useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+
+  // Keep reference for each image elements
+  const imageRefsRef = React__default.useRef([]);
+  const currentImageRef = React__default.useRef(null);
+  const [imageLightboxProps, setImageLightboxProps] = React__default.useState(() => ({
+    ...EMPTY_PROPS,
+    ...props
+  }));
+  const getTriggerProps = React__default.useMemo(() => {
+    const triggerImageRefs = {};
+    async function close() {
+      const currentImage = currentImageRef.current;
+      if (!currentImage) {
+        return;
+      }
+      const currentIndex = imageRefsRef.current.findIndex(imageRef => imageRef.current === currentImage);
+      await startViewTransition({
+        changes() {
+          // Close lightbox
+          setImageLightboxProps(prevProps => ({
+            ...prevProps,
+            isOpen: false
+          }));
+        },
+        // Morph from the image in lightbox to the image in trigger
+        viewTransitionName: {
+          source: currentImageRef,
+          target: triggerImageRefs[currentIndex],
+          name: CLASSNAME
+        }
+      });
+    }
+    async function open(triggerElement, {
+      activeImageIndex
+    } = {}) {
+      // If we find an image inside the trigger, animate it in transition with the opening image
+      const triggerImage = triggerImageRefs[activeImageIndex]?.current || findImage(triggerElement);
+
+      // Inject refs to improve transition and loading style
+      const images = propsRef.current?.images?.map((image, idx) => {
+        // Get or create image reference
+        let imgRef = imageRefsRef.current[idx];
+        if (!imgRef) {
+          imgRef = /*#__PURE__*/React__default.createRef();
+          imageRefsRef.current[idx] = imgRef;
+        }
+
+        // Try to use the trigger image as the loading placeholder
+        const loadingPlaceholderImageRef = triggerImage && idx === activeImageIndex ? {
+          current: triggerImage
+        } : undefined;
+        return {
+          loadingPlaceholderImageRef,
+          ...image,
+          imgRef
+        };
+      });
+      await startViewTransition({
+        changes: () => {
+          // Open lightbox with setup props
+          setImageLightboxProps(prevProps => ({
+            ...prevProps,
+            ...propsRef.current,
+            activeImageRef: currentImageRef,
+            parentElement: {
+              current: triggerElement
+            },
+            isOpen: true,
+            onClose: () => {
+              close();
+              propsRef.current?.onClose?.();
+            },
+            images,
+            activeImageIndex: activeImageIndex || 0
+          }));
+        },
+        // Morph from the image in trigger to the image in lightbox
+        viewTransitionName: {
+          source: triggerImage,
+          target: currentImageRef,
+          name: CLASSNAME
+        }
+      });
+    }
+    return memoize(options => ({
+      ref(element) {
+        // Track trigger image ref if any
+        if (options?.activeImageIndex !== undefined && element) {
+          triggerImageRefs[options.activeImageIndex] = {
+            current: findImage(element)
+          };
+        }
+      },
+      onClick(e) {
+        open(e.target, options);
+      }
+    }));
+  }, []);
+  return {
+    getTriggerProps,
+    imageLightboxProps
+  };
+}
+
+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 };