@lumx/react 3.10.1-alpha.2 → 3.10.1-alpha.4

package/_internal/components/image-lightbox/index.ts-137f85a8.js

@@ -1,765 +0,0 @@
-import { h as getRootClassName, m as WINDOW, k as _objectSpread2, _ as _extends, j as _objectWithoutProperties, i as forwardRef, g as classNames } from '../../1da25128.js';
-import React__default from 'react';
-import { u as useMergeRefs, m as mergeRefs } from '../../f52adbae.js';
-import memoize from 'lodash/memoize';
-import { I as ImageCaption } from '../../524b1d04.js';
-import throttle from 'lodash/throttle';
-import { S as SlideshowItem, a as SlideshowControls, b as Slides } from '../../b8f2948d.js';
-import { T as Thumbnail } from '../../4c28d012.js';
-import { p as mdiMagnifyPlusOutline, q as mdiMagnifyMinusOutline } from '../../c6c99f76.js';
-import { I as IconButton } from '../../23bdba2d.js';
-import { FlexBox } from '../flex-box/index.ts-c216e957.js';
-import ReactDOM from 'react-dom';
-import { Lightbox } from '../lightbox/index.ts-7a16cdc7.js';
-import { ClickAwayProvider } from '../../../utils/index.js';
-
-/**
- * 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(() => {
-    var _elementRef$current;
-    const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _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;
-}
-
-/** Check if user prefers reduced motion */
-function getPrefersReducedMotion() {
-  var _WINDOW$matchMedia;
-  return WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$matchMedia = WINDOW.matchMedia) === null || _WINDOW$matchMedia === void 0 ? void 0 : _WINDOW$matchMedia.call(WINDOW, '(prefers-reduced-motion: reduce)').matches;
-}
-
-/** 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 === null || onScaleChange === void 0 ? void 0 : 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) {
-      var _pointers$;
-      // 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$ = pointers[0]) === null || _pointers$ === void 0 ? void 0 : _pointers$.pointerId) !== event.pointerId) {
-        return;
-      }
-
-      // Centered point between all pointers
-      const centerPoint = {
-        x: pointers.reduce((x, _ref) => {
-          let {
-            clientX
-          } = _ref;
-          return x + clientX;
-        }, 0) / pointers.length,
-        y: pointers.reduce((y, _ref2) => {
-          let {
-            clientY
-          } = _ref2;
-          return 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 !== null && centerPoint !== void 0 && centerPoint.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
-      const clientWidthRatio = centerPoint !== null && centerPoint !== void 0 && centerPoint.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
-      const initialScrollHeight = (initialScrollAreaSize === null || initialScrollAreaSize === void 0 ? void 0 : initialScrollAreaSize.height) || scrollArea.scrollHeight;
-      const initialScrollWidth = (initialScrollAreaSize === null || initialScrollAreaSize === void 0 ? void 0 : 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 === null || imgProps === void 0 ? void 0 : imgProps.width, 10);
-    const height = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : 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 !== null && scale !== void 0 ? scale : 1),
-      height: imageSize.height * baseScale * (scale !== null && scale !== void 0 ? 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__*/React__default.createElement(SlideshowItem, {
-    ref: scrollAreaRef
-    // Make it accessible to keyboard nav when the zone is scrollable
-    ,
-    tabIndex: isScrollable ? 0 : undefined,
-    className: `${CLASSNAME}__image-slide`
-  }, /*#__PURE__*/React__default.createElement(Thumbnail, {
-    imgRef: useMergeRefs(imgRef, propImgRef),
-    image: image,
-    alt: alt,
-    className: `${CLASSNAME}__thumbnail`,
-    imgProps: _objectSpread2(_objectSpread2({}, imgProps), {}, {
-      style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), scaledImageSize || {
-        maxHeight: scrollAreaSize === null || scrollAreaSize === void 0 ? void 0 : scrollAreaSize.height,
-        maxWidth: scrollAreaSize === null || scrollAreaSize === void 0 ? void 0 : 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 && !getPrefersReducedMotion() ? 'all 250ms' : undefined
-      })
-    }),
-    loadingPlaceholderImageRef: loadingPlaceholderImageRef
-  }));
-}, isEqual);
-
-const _excluded$1 = ["image", "imgRef"];
-/** Internal image slideshow component for ImageLightbox */
-const ImageSlideshow = _ref => {
-  var _images$activeIndex, _images$activeIndex2, _images$activeIndex3;
-  let {
-    activeImageIndex,
-    images,
-    slideGroupLabel,
-    zoomInButtonProps,
-    zoomOutButtonProps,
-    slideshowControlsProps,
-    currentPaginationItemRef,
-    footerRef,
-    activeImageRef
-  } = _ref;
-  const {
-    activeIndex,
-    slideshowId,
-    setSlideshow,
-    slideshowSlidesId,
-    slidesCount,
-    onNextClick,
-    onPaginationClick,
-    onPreviousClick,
-    toggleAutoPlay
-  } = SlideshowControls.useSlideshowControls({
-    itemsCount: images.length,
-    activeIndex: activeImageIndex
-  });
-
-  // Image metadata (caption)
-  const title = (_images$activeIndex = images[activeIndex]) === null || _images$activeIndex === void 0 ? void 0 : _images$activeIndex.title;
-  const description = (_images$activeIndex2 = images[activeIndex]) === null || _images$activeIndex2 === void 0 ? void 0 : _images$activeIndex2.description;
-  const tags = (_images$activeIndex3 = images[activeIndex]) === null || _images$activeIndex3 === void 0 ? void 0 : _images$activeIndex3.tags;
-  const metadata = title || description || tags ? /*#__PURE__*/React__default.createElement(ImageCaption, {
-    theme: "dark",
-    as: "div",
-    title: title,
-    description: description,
-    tags: tags,
-    align: "center"
-  }) : null;
-
-  // Slideshow controls
-  const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/React__default.createElement(SlideshowControls, _extends({
-    theme: "dark",
-    activeIndex: activeIndex,
-    slidesCount: slidesCount,
-    onNextClick: onNextClick,
-    onPreviousClick: onPreviousClick,
-    onPaginationClick: onPaginationClick
-  }, slideshowControlsProps, {
-    paginationItemProps: index => {
-      var _slideshowControlsPro;
-      const props = (slideshowControlsProps === null || slideshowControlsProps === void 0 ? void 0 : (_slideshowControlsPro = slideshowControlsProps.paginationItemProps) === null || _slideshowControlsPro === void 0 ? void 0 : _slideshowControlsPro.call(slideshowControlsProps, index)) || {};
-      return _objectSpread2(_objectSpread2({}, props), {}, {
-        ref: mergeRefs(props === null || props === void 0 ? void 0 : 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(function () {
-        let prevScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-        return Math.max(1, newScale * prevScale);
-      });
-    };
-  }, [zoomEnabled]);
-  const zoomIn = React__default.useCallback(() => onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(1.5), [onScaleChange]);
-  const zoomOut = React__default.useCallback(() => onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(0.5), [onScaleChange]);
-  React__default.useEffect(() => {
-    // Reset scale on slide change
-    if (typeof activeIndex === 'number') setScale(undefined);
-  }, [activeIndex]);
-  const zoomControls = zoomEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomInButtonProps, {
-    theme: "dark",
-    emphasis: "low",
-    icon: mdiMagnifyPlusOutline,
-    onClick: zoomIn
-  })), /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomOutButtonProps, {
-    theme: "dark",
-    emphasis: "low",
-    isDisabled: !scale || scale <= 1,
-    icon: mdiMagnifyMinusOutline,
-    onClick: zoomOut
-  })));
-  const getImgRef = React__default.useMemo(() => memoize((index, isActive) => {
-    return mergeRefs(images === null || images === void 0 ? void 0 : images[index].imgRef, isActive ? activeImageRef : undefined);
-  },
-  // memoize based on both arguments
-  function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return args.join();
-  }), [images, activeImageRef]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slides, {
-    activeIndex: activeIndex,
-    theme: "dark",
-    slideGroupLabel: slideGroupLabel,
-    fillHeight: true,
-    id: slideshowId,
-    ref: setSlideshow,
-    slidesId: slideshowSlidesId,
-    toggleAutoPlay: toggleAutoPlay
-  }, images.map((_ref2, index) => {
-    let {
-        image,
-        imgRef
-      } = _ref2,
-      imageProps = _objectWithoutProperties(_ref2, _excluded$1);
-    const isActive = index === activeIndex;
-    return /*#__PURE__*/React__default.createElement(ImageSlide, {
-      isActive: isActive,
-      key: image,
-      image: _objectSpread2(_objectSpread2({}, imageProps), {}, {
-        image,
-        imgRef: getImgRef(index, isActive)
-      }),
-      scale: isActive ? scale : undefined,
-      onScaleChange: onScaleChange
-    });
-  })), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/React__default.createElement(FlexBox, {
-    ref: footerRef,
-    className: `${CLASSNAME}__footer`,
-    orientation: "vertical",
-    vAlign: "center",
-    gap: "big"
-  }, metadata, /*#__PURE__*/React__default.createElement(FlexBox, {
-    className: `${CLASSNAME}__footer-actions`,
-    orientation: "horizontal",
-    gap: "regular"
-  }, slideShowControls, zoomControls)));
-};
-
-/** Unref a react ref or element */
-function unref(maybeElement) {
-  if (maybeElement instanceof HTMLElement) return maybeElement;
-  return maybeElement === null || maybeElement === void 0 ? void 0 : 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(_ref) {
-  var _document, _document$startViewTr;
-  let {
-    changes,
-    viewTransitionName
-  } = _ref;
-  const start = (_document = document) === null || _document === void 0 ? void 0 : (_document$startViewTr = _document.startViewTransition) === null || _document$startViewTr === void 0 ? void 0 : _document$startViewTr.bind(document);
-  const prefersReducedMotion = getPrefersReducedMotion();
-  const {
-    flushSync
-  } = ReactDOM;
-  if (prefersReducedMotion || !start || !flushSync || !(viewTransitionName !== null && viewTransitionName !== void 0 && viewTransitionName.source) || !(viewTransitionName !== null && viewTransitionName !== void 0 && 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 !== null && element !== void 0 && element.matches('img') ? element : (element === null || element === void 0 ? void 0 : 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(() => _objectSpread2(_objectSpread2({}, 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 => _objectSpread2(_objectSpread2({}, 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) {
-      var _triggerImageRefs, _propsRef$current, _propsRef$current$ima;
-      let {
-        activeImageIndex
-      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      // If we find an image inside the trigger, animate it in transition with the opening image
-      const triggerImage = ((_triggerImageRefs = triggerImageRefs[activeImageIndex]) === null || _triggerImageRefs === void 0 ? void 0 : _triggerImageRefs.current) || findImage(triggerElement);
-
-      // Inject refs to improve transition and loading style
-      const images = (_propsRef$current = propsRef.current) === null || _propsRef$current === void 0 ? void 0 : (_propsRef$current$ima = _propsRef$current.images) === null || _propsRef$current$ima === void 0 ? void 0 : _propsRef$current$ima.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 _objectSpread2(_objectSpread2({
-          loadingPlaceholderImageRef
-        }, image), {}, {
-          imgRef
-        });
-      });
-      await startViewTransition({
-        changes: () => {
-          // Open lightbox with setup props
-          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2(_objectSpread2({}, prevProps), propsRef.current), {}, {
-            activeImageRef: currentImageRef,
-            parentElement: {
-              current: triggerElement
-            },
-            isOpen: true,
-            onClose: () => {
-              var _propsRef$current2, _propsRef$current2$on;
-              close();
-              (_propsRef$current2 = propsRef.current) === null || _propsRef$current2 === void 0 ? void 0 : (_propsRef$current2$on = _propsRef$current2.onClose) === null || _propsRef$current2$on === void 0 ? void 0 : _propsRef$current2$on.call(_propsRef$current2);
-            },
-            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 === null || options === void 0 ? void 0 : options.activeImageIndex) !== undefined && element) {
-          triggerImageRefs[options.activeImageIndex] = {
-            current: findImage(element)
-          };
-        }
-      },
-      onClick(e) {
-        open(e.target, options);
-      }
-    }));
-  }, []);
-  return {
-    getTriggerProps,
-    imageLightboxProps
-  };
-}
-
-const _excluded = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
-const Inner = forwardRef((props, ref) => {
-  const {
-      className,
-      isOpen,
-      closeButtonProps,
-      onClose,
-      parentElement,
-      activeImageIndex,
-      slideshowControlsProps,
-      slideGroupLabel,
-      images,
-      zoomOutButtonProps,
-      zoomInButtonProps,
-      activeImageRef: propImageRef
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  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 === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  return /*#__PURE__*/React__default.createElement(Lightbox, _extends({
-    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
-  }), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
-    childrenRefs: clickAwayChildrenRefs,
-    callback: onClickAway
-  }, /*#__PURE__*/React__default.createElement(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=index.ts-137f85a8.js.map