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

package/index.d.ts

@@ -1404,6 +1404,7 @@ interface ImageLightboxProps extends HasClassName, ZoomProps, ImagesProps, Inher
 
 /** 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

@@ -8322,7 +8322,6 @@ const EMPTY_PROPS = {
   images: [],
   parentElement: /*#__PURE__*/React.createRef()
 };
-
 /**
  * Set up an ImageLightbox with images and triggers.
  *
@@ -8377,21 +8376,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 +8414,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 +8425,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);
       }
     }));
   }, []);