@lumx/react 3.7.6-alpha.1 → 3.7.6-alpha.10

package/index.d.ts

@@ -1301,6 +1301,8 @@ interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -1376,34 +1378,35 @@ 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'>;
+type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'>;
 type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
 type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
 interface ImagesProps {
-    /** Index of the active thumbnail to show on open */
+    /** Index of the active image to show on open */
     activeImageIndex?: number;
     /** List of images to display */
     images: Array<ImageProps>;
     /** 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.
  *
@@ -1411,19 +1414,19 @@ type ManagedProps = Pick<ImageLightboxProps, 'isOpen' | 'images' | 'parentElemen
  * - 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 images Images to display in the image lightbox
+ * @param initialProps Images to display in the image lightbox
  */
-declare function useImageLightbox(images?: ImageLightboxProps['images']): {
+declare function useImageLightbox<P extends Partial<ImageLightboxProps>>(initialProps: P): {
     /**
      * 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>;
     };
     /** Props to forward to the ImageLightbox */
-    imageLightboxProps: ManagedProps;
+    imageLightboxProps: P & ManagedProps;
 };
 
 /**