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

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,13 +1394,12 @@ 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 */
@@ -1419,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: (options: TriggerOptions) => {
+    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,16 @@ const ImageSlideshow = _ref => {
     icon: mdiMagnifyMinusOutline,
     onClick: zoomOut
   })));
+  const getImgRef = React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slides, {
     activeIndex: activeIndex,
     theme: "dark",
@@ -8236,16 +8249,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, isActive)
+      }),
       scale: isActive ? scale : undefined,
       onScaleChange: onScaleChange
-    }));
+    });
   })), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/React.createElement(FlexBox, {
     ref: footerRef,
     className: `${CLASSNAME$v}__footer`,
@@ -8311,7 +8326,7 @@ async function startViewTransition(_ref) {
 }
 
 /** 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');
+const findImage = element => element !== null && element !== void 0 && element.matches('img') ? element : (element === null || element === void 0 ? void 0 : element.querySelector('img')) || null;
 
 const _excluded$A = ["images"];
 
@@ -8427,10 +8442,12 @@ function useImageLightbox(initialProps) {
     }
     return memoize(options => ({
       ref(element) {
-        const triggerImage = findImage(element);
-        if ((options === null || options === void 0 ? void 0 : options.activeImageIndex) !== undefined && triggerImage) triggerImageRefs[options.activeImageIndex] = {
-          current: triggerImage
-        };
+        // 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) {
         openLightbox(e.target, options);