@lumx/react 3.7.6-alpha.7 → 3.7.6-alpha.9

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. */
@@ -1383,7 +1385,7 @@ interface ZoomButtonProps {
     /** 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 {

package/index.js

@@ -7655,35 +7655,27 @@ Icon.displayName = COMPONENT_NAME$w;
 Icon.className = CLASSNAME$t;
 Icon.defaultProps = DEFAULT_PROPS$p;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$x = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
-
 /** Internal component used to render image captions */
 const ImageCaption = props => {
   const {
+    className,
     theme,
     as = 'figcaption',
     title,
     description,
     tags,
     captionStyle,
-    align
+    align,
+    truncate
   } = props;
   if (!title && !description && !tags) return null;
-  const titleColor = theme === 'dark' ? {
-    color: 'light'
-  } : undefined;
-  const descriptionColor = theme === 'dark' ? {
-    color: 'light',
+  const titleColor = {
+    color: theme === 'dark' ? 'light' : 'dark'
+  };
+  const descriptionColor = {
+    color: theme === 'dark' ? 'light' : 'dark',
     colorVariant: 'L2'
-  } : undefined;
+  };
 
   // Display description as string or HTML
   const descriptionContent = typeof description === 'string' ? {
@@ -7693,22 +7685,24 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/React.createElement(FlexBox, {
     as: as,
-    className: `${CLASSNAME$u}__wrapper`,
+    className: className,
     style: captionStyle,
-    orientation: "horizontal",
-    vAlign: align
-  }, (title || description) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$u}__caption`
+    orientation: "vertical",
+    vAlign: align,
+    hAlign: align === 'center' ? align : undefined,
+    gap: "regular"
+  }, (title || description) && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    truncate: truncate
   }, title && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
-    className: `${CLASSNAME$u}__title`
-  }, titleColor), title), title && description && '\u00A0', description && /*#__PURE__*/React.createElement(Text, _extends({
+    typography: "subtitle1"
+  }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
-    className: `${CLASSNAME$u}__description`
+    typography: "body1"
   }, descriptionColor, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
     orientation: "horizontal",
-    vAlign: align,
-    className: `${CLASSNAME$u}__tags`
+    vAlign: align
   }, tags));
 };
 
@@ -7730,6 +7724,16 @@ const ImageBlockCaptionPosition = {
  * Defines the props of the component.
  */
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$x = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
+
 /**
  * Component default props.
  */
@@ -7783,11 +7787,14 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
     theme: theme,
     alt: alt || title
   })), /*#__PURE__*/React.createElement(ImageCaption, {
+    className: `${CLASSNAME$u}__wrapper`,
+    theme: theme,
     title: title,
     description: description,
     tags: tags,
     captionStyle: captionStyle,
-    align: align
+    align: align,
+    truncate: captionPosition === 'over'
   }), actions && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$u}__actions`
   }, actions));
@@ -8404,16 +8411,13 @@ function useImageLightbox(initialProps) {
       // If we find an image inside the trigger, animate it in transition with the opening image
       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
+      // Inject the trigger image as loading placeholder for better loading state
       const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
-        var _image$imgProps, _image$imgProps2;
-        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
-          });
+        if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
           return _objectSpread2(_objectSpread2({}, image), {}, {
-            imgProps
+            loadingPlaceholderImageRef: {
+              current: triggerImage
+            }
           });
         }
         return image;
@@ -13600,7 +13604,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1p = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1p = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "loadingPlaceholderImageRef", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -13633,6 +13637,7 @@ const DEFAULT_PROPS$$ = {
  * @return React element.
  */
 const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
+  var _loadingPlaceholderIm;
   const {
       align,
       alt,
@@ -13651,6 +13656,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading: isLoadingProp,
       objectFit,
       loading,
+      loadingPlaceholderImageRef,
       size,
       theme,
       variant,
@@ -13691,6 +13697,14 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     wrapperProps.type = forwardedProps.type || 'button';
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
+
+  // If we have a loading placeholder image that is really loaded (complete)
+  const loadingPlaceholderImage = isLoading && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : (_loadingPlaceholderIm = loadingPlaceholderImageRef.current) === null || _loadingPlaceholderIm === void 0 ? void 0 : _loadingPlaceholderIm.complete) && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : loadingPlaceholderImageRef.current) || undefined;
+  const loadingStyle = loadingPlaceholderImage ? {
+    backgroundImage: `url(${loadingPlaceholderImage.src})`,
+    minWidth: loadingPlaceholderImage.naturalWidth,
+    minHeight: loadingPlaceholderImage.naturalHeight
+  } : undefined;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
@@ -13711,7 +13725,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1f}__background`
   }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle),
+    style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
     ref: mergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({
       prefix: `${CLASSNAME$1f}__image`,