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

package/index.d.ts

@@ -1376,10 +1376,11 @@ interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {
  */
 declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
 
-type InheritedSlideShowProps = Pick<SlideshowProps, 'activeIndex' | 'slideshowControlsProps' | 'slideGroupLabel'>;
-interface ZoomProps {
-    /** */
+type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
+interface ZoomButtonProps {
+    /** Zoom in button props */
     zoomInButtonProps?: IconButtonProps;
+    /** Zoom out button props */
     zoomOutButtonProps?: IconButtonProps;
 }
 type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef'>;
@@ -1393,17 +1394,17 @@ interface ImagesProps {
     /** Ref of the active image when the lightbox is open */
     activeImageRef?: React.Ref<HTMLImageElement>;
 }
-type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps'>;
-type InheritedAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'>;
 type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
 /**
  * ImageLightbox component props
  */
-interface ImageLightboxProps extends HasClassName, ZoomProps, ImagesProps, InheritedSlideShowProps, InheritedLightboxProps, InheritedAriaAttributes, ForwardedProps {
+interface ImageLightboxProps extends HasClassName, ZoomButtonProps, ImagesProps, InheritedSlideShowProps, InheritedLightboxProps, ForwardedProps {
 }
 
 /** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
 type ManagedProps = Pick<ImageLightboxProps, 'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'>;
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
 /**
  * Set up an ImageLightbox with images and triggers.
  *
@@ -1418,7 +1419,7 @@ declare function useImageLightbox<P extends Partial<ImageLightboxProps>>(initial
      * Generates trigger props
      * @param index Provide an index to choose which image to display when the image lightbox opens.
      * */
-    getTriggerProps: (index?: number) => {
+    getTriggerProps: (options?: TriggerOptions) => {
         onClick: React.MouseEventHandler;
         ref: React.Ref<any>;
     };

package/index.js

@@ -17,6 +17,7 @@ import memoize from 'lodash/memoize';
 import castArray from 'lodash/castArray';
 import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
+import isEqual from 'lodash/isEqual';
 import throttle from 'lodash/throttle';
 import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
@@ -7817,7 +7818,7 @@ function useElementSizeDependentOfWindowSize(elementRef) {
   const [size, setSize] = React.useState(null);
   const updateSize = React.useMemo(() => throttle(() => {
     var _elementRef$current;
-    const newSize = elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+    const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
     if (newSize) setSize(newSize);
   }, 10), [elementRef]);
   React.useEffect(() => {
@@ -8054,10 +8055,12 @@ const ImageSlide = /*#__PURE__*/React.memo(props => {
     isActive,
     scale,
     onScaleChange,
-    image,
-    imgRef: propImgRef,
-    imgProps,
-    alt
+    image: {
+      image,
+      imgRef: propImgRef,
+      imgProps,
+      alt
+    }
   } = props;
 
   // Get scroll area size
@@ -8127,7 +8130,7 @@ const ImageSlide = /*#__PURE__*/React.memo(props => {
       })
     })
   }));
-});
+}, isEqual);
 
 const _excluded$z = ["image", "imgRef"];
 /** Internal image slideshow component for ImageLightbox */
@@ -8222,6 +8225,7 @@ const ImageSlideshow = _ref => {
     icon: mdiMagnifyMinusOutline,
     onClick: zoomOut
   })));
+  const getImgRef = React.useMemo(() => memoize(index => mergeRefs(images === null || images === void 0 ? void 0 : images[index].imgRef, index === activeImageIndex ? activeImageRef : undefined)), [images, activeImageIndex, activeImageRef]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slides, {
     activeIndex: activeIndex,
     theme: "dark",
@@ -8236,16 +8240,18 @@ const ImageSlideshow = _ref => {
         image,
         imgRef
       } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$z);
+      imageProps = _objectWithoutProperties(_ref2, _excluded$z);
     const isActive = index === activeIndex;
-    return /*#__PURE__*/React.createElement(ImageSlide, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(ImageSlide, {
       isActive: isActive,
       key: image,
-      imgRef: mergeRefs(imgRef, isActive ? activeImageRef : undefined),
-      image: image,
+      image: _objectSpread2(_objectSpread2({}, imageProps), {}, {
+        image,
+        imgRef: getImgRef(index)
+      }),
       scale: isActive ? scale : undefined,
       onScaleChange: onScaleChange
-    }));
+    });
   })), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/React.createElement(FlexBox, {
     ref: footerRef,
     className: `${CLASSNAME$v}__footer`,
@@ -8322,7 +8328,6 @@ const EMPTY_PROPS = {
   images: [],
   parentElement: /*#__PURE__*/React.createRef()
 };
-
 /**
  * Set up an ImageLightbox with images and triggers.
  *
@@ -8377,21 +8382,23 @@ function useImageLightbox(initialProps) {
         // Morph from the image in lightbox to the image in trigger
         viewTransitionName: {
           source: currentImageRef,
-          //source: imageIsVisible ? currentImageRef : null,
           target: triggerImageRefs[currentIndex],
           name: CLASSNAME$v
         }
       });
     }
-    async function openLightbox(triggerElement, index) {
+    async function openLightbox(triggerElement) {
       var _triggerImageRefs;
+      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[index]) === null || _triggerImageRefs === void 0 ? void 0 : _triggerImageRefs.current) || findImage(triggerElement);
+      const triggerImage = ((_triggerImageRefs = triggerImageRefs[activeImageIndex]) === null || _triggerImageRefs === void 0 ? void 0 : _triggerImageRefs.current) || findImage(triggerElement);
 
       // Inject the trigger image size as a fallback for better loading state
       const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
         var _image$imgProps, _image$imgProps2;
-        if (triggerImage && idx === index && !((_image$imgProps = image.imgProps) !== null && _image$imgProps !== void 0 && _image$imgProps.width) && !((_image$imgProps2 = image.imgProps) !== null && _image$imgProps2 !== void 0 && _image$imgProps2.height)) {
+        if (triggerImage && idx === activeImageIndex && !((_image$imgProps = image.imgProps) !== null && _image$imgProps !== void 0 && _image$imgProps.width) && !((_image$imgProps2 = image.imgProps) !== null && _image$imgProps2 !== void 0 && _image$imgProps2.height)) {
           const imgProps = _objectSpread2(_objectSpread2({}, image.imgProps), {}, {
             height: triggerImage.naturalHeight,
             width: triggerImage.naturalWidth
@@ -8413,7 +8420,7 @@ function useImageLightbox(initialProps) {
             isOpen: true,
             onClose: closeLightbox,
             images: imagesWithFallbackSize,
-            activeImageIndex: index || 0
+            activeImageIndex: activeImageIndex || 0
           }));
         },
         // Morph from the image in trigger to the image in lightbox
@@ -8424,15 +8431,15 @@ function useImageLightbox(initialProps) {
         }
       });
     }
-    return memoize(index => ({
+    return memoize(options => ({
       ref(element) {
         const triggerImage = findImage(element);
-        if (index !== undefined && triggerImage) triggerImageRefs[index] = {
+        if ((options === null || options === void 0 ? void 0 : options.activeImageIndex) !== undefined && triggerImage) triggerImageRefs[options.activeImageIndex] = {
           current: triggerImage
         };
       },
       onClick(e) {
-        openLightbox(e.target, index);
+        openLightbox(e.target, options);
       }
     }));
   }, []);