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

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.3",
-        "@lumx/icons": "^3.7.6-alpha.3",
+        "@lumx/core": "^3.7.6-alpha.4",
+        "@lumx/icons": "^3.7.6-alpha.4",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.3"
+    "version": "3.7.6-alpha.4"
 }

package/src/components/image-lightbox/internal/ImageSlide.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 
+import isEqual from 'lodash/isEqual';
 import { SlideshowItem, Thumbnail } from '@lumx/react';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
-
 import { getPrefersReducedMotion } from '@lumx/react/utils/getPrefersReducedMotion';
+
 import { CLASSNAME } from '../constants';
 import { usePointerZoom } from './usePointerZoom';
 import { useAnimateScroll } from './useAnimateScroll';
-import type { InheritedThumbnailProps } from '../types';
+import type { ImageProps } from '../types';
 
-export interface ImageSlideProps extends InheritedThumbnailProps {
+export interface ImageSlideProps {
+    image: ImageProps;
     isActive?: boolean;
     scale?: number;
     onScaleChange?: (value: number) => void;
@@ -19,7 +21,12 @@ export interface ImageSlideProps extends InheritedThumbnailProps {
 
 /** Internal image slide component for ImageLightbox */
 export const ImageSlide = React.memo((props: ImageSlideProps) => {
-    const { isActive, scale, onScaleChange, image, imgRef: propImgRef, imgProps, alt } = props;
+    const {
+        isActive,
+        scale,
+        onScaleChange,
+        image: { image, imgRef: propImgRef, imgProps, alt },
+    } = props;
 
     // Get scroll area size
     const scrollAreaRef = React.useRef<HTMLDivElement>(null);
@@ -96,4 +103,4 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
             />
         </SlideshowItem>
     );
-});
+}, isEqual);

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -4,12 +4,13 @@ import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
 import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
+import memoize from 'lodash/memoize';
 import { ImageCaption } from '../../image-block/ImageCaption';
 import { CLASSNAME } from '../constants';
-import type { ImagesProps, InheritedSlideShowProps, ZoomProps } from '../types';
+import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
 import { ImageSlide } from './ImageSlide';
 
-export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomProps, ImagesProps {
+export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, ImagesProps {
     currentPaginationItemRef?: React.Ref<HTMLButtonElement>;
     footerRef?: React.Ref<HTMLDivElement>;
 }
@@ -110,6 +111,14 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
         </>
     );
 
+    const getImgRef = React.useMemo(
+        () =>
+            memoize((index: number) =>
+                mergeRefs(images?.[index].imgRef, index === activeImageIndex ? activeImageRef : undefined),
+            ),
+        [images, activeImageIndex, activeImageRef],
+    );
+
     return (
         <>
             <Slides
@@ -122,15 +131,17 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
                 slidesId={slideshowSlidesId}
                 toggleAutoPlay={toggleAutoPlay}
             >
-                {images.map(({ image, imgRef, ...props }, index) => {
+                {images.map(({ image, imgRef, ...imageProps }, index) => {
                     const isActive = index === activeIndex;
                     return (
                         <ImageSlide
-                            {...props}
                             isActive={isActive}
                             key={image}
-                            imgRef={mergeRefs(imgRef, isActive ? activeImageRef : undefined)}
-                            image={image}
+                            image={{
+                                ...imageProps,
+                                image,
+                                imgRef: getImgRef(index),
+                            }}
                             scale={isActive ? scale : undefined}
                             onScaleChange={onScaleChange}
                         />

package/src/components/image-lightbox/types.ts

@@ -4,14 +4,12 @@ import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } f
 import type { HasClassName } from '@lumx/react/utils/type';
 import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';
 
-export type InheritedSlideShowProps = Pick<
-    SlideshowProps,
-    'activeIndex' | 'slideshowControlsProps' | 'slideGroupLabel'
->;
+export type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
 
-export interface ZoomProps {
-    /** */
+export interface ZoomButtonProps {
+    /** Zoom in button props */
     zoomInButtonProps?: IconButtonProps;
+    /** Zoom out button props */
     zoomOutButtonProps?: IconButtonProps;
 }
 
@@ -30,9 +28,10 @@ export interface ImagesProps {
     activeImageRef?: React.Ref<HTMLImageElement>;
 }
 
-export type InheritedLightboxProps = Pick<LightboxProps, 'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps'>;
-
-export type InheritedAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+export type InheritedLightboxProps = Pick<
+    LightboxProps,
+    'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'
+>;
 
 export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
 
@@ -41,9 +40,8 @@ export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
  */
 export interface ImageLightboxProps
     extends HasClassName,
-        ZoomProps,
+        ZoomButtonProps,
         ImagesProps,
         InheritedSlideShowProps,
         InheritedLightboxProps,
-        InheritedAriaAttributes,
         ForwardedProps {}

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -34,7 +34,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
      * Generates trigger props
      * @param index Provide an index to choose which image to display when the image lightbox opens.
      * */
-    getTriggerProps: (options: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
     /** Props to forward to the ImageLightbox */
     imageLightboxProps: P & ManagedProps;
 } {

package/src/hooks/useElementSizeDependentOfWindowSize.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { RectSize } from '@lumx/react/utils/type';
 import throttle from 'lodash/throttle';
+import { RectSize } from '@lumx/react/utils/type';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -18,7 +18,7 @@ export function useElementSizeDependentOfWindowSize(
     const updateSize = React.useMemo(
         () =>
             throttle(() => {
-                const newSize = elementRef?.current?.getBoundingClientRect();
+                const newSize = elementRef.current?.getBoundingClientRect();
                 if (newSize) setSize(newSize);
             }, 10),
         [elementRef],