@lumx/react 3.7.6-alpha.11 → 3.7.6-alpha.13

package/index.d.ts

@@ -1426,7 +1426,7 @@ declare function useImageLightbox<P extends Partial<ImageLightboxProps>>(initial
         ref: React.Ref<any>;
     };
     /** Props to forward to the ImageLightbox */
-    imageLightboxProps: P & ManagedProps;
+    imageLightboxProps: ManagedProps & P;
 };
 
 /**

package/index.js

@@ -7672,7 +7672,7 @@ const ImageCaption = props => {
   const titleColor = {
     color: theme === 'dark' ? 'light' : 'dark'
   };
-  const descriptionColor = {
+  const baseColor = {
     color: theme === 'dark' ? 'light' : 'dark',
     colorVariant: 'L2'
   };
@@ -7691,16 +7691,16 @@ const ImageCaption = props => {
     vAlign: align,
     hAlign: align === 'center' ? align : undefined,
     gap: "regular"
-  }, (title || description) && /*#__PURE__*/React.createElement(Text, {
+  }, (title || description) && /*#__PURE__*/React.createElement(Text, _extends({
     as: "p",
     truncate: truncate
-  }, title && /*#__PURE__*/React.createElement(Text, _extends({
+  }, baseColor), title && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
     typography: "subtitle1"
   }, titleColor), title), ' ', description && /*#__PURE__*/React.createElement(Text, _extends({
     as: "span",
     typography: "body1"
-  }, descriptionColor, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
+  }, descriptionContent))), tags && /*#__PURE__*/React.createElement(FlexBox, {
     orientation: "horizontal",
     vAlign: align
   }, tags));
@@ -7787,6 +7787,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
     theme: theme,
     alt: alt || title
   })), /*#__PURE__*/React.createElement(ImageCaption, {
+    as: "figcaption",
     className: `${CLASSNAME$u}__wrapper`,
     theme: theme,
     title: title,
@@ -8082,11 +8083,11 @@ const ImageSlide = /*#__PURE__*/React.memo(props => {
   // Get image size
   const imgRef = React.useRef(null);
   const imageSize = useImageSize(imgRef, () => {
-    const initialWidth = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.width, 10);
-    const initialHeight = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.height, 10);
-    return initialWidth && initialHeight ? {
-      width: initialWidth,
-      height: initialHeight
+    const width = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.width, 10);
+    const height = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.height, 10);
+    return width && height ? {
+      width,
+      height
     } : null;
   });
 
@@ -8360,10 +8361,6 @@ function useImageLightbox(initialProps) {
       images = []
     } = initialProps,
     otherProps = _objectWithoutProperties(initialProps, _excluded$A);
-  const basePropsRef = React.useRef(EMPTY_PROPS);
-  React.useEffect(() => {
-    basePropsRef.current = _objectSpread2(_objectSpread2({}, EMPTY_PROPS), otherProps);
-  }, [otherProps]);
   const imagesPropsRef = React.useRef(images);
   React.useEffect(() => {
     imagesPropsRef.current = images.map(props => _objectSpread2({
@@ -8371,10 +8368,10 @@ function useImageLightbox(initialProps) {
     }, props));
   }, [images]);
   const currentImageRef = React.useRef(null);
-  const [imageLightboxProps, setImageLightboxProps] = React.useState(basePropsRef.current);
+  const [imageLightboxProps, setImageLightboxProps] = React.useState(() => _objectSpread2(_objectSpread2({}, EMPTY_PROPS), otherProps));
   const getTriggerProps = React.useMemo(() => {
     const triggerImageRefs = {};
-    async function closeLightbox() {
+    async function close() {
       const currentImage = currentImageRef.current;
       if (!currentImage) {
         return;
@@ -8387,15 +8384,10 @@ function useImageLightbox(initialProps) {
       });
       await startViewTransition({
         changes() {
-          // Close lightbox with reset empty props
-          setImageLightboxProps(_ref2 => {
-            let {
-              parentElement
-            } = _ref2;
-            return _objectSpread2(_objectSpread2({}, basePropsRef.current), {}, {
-              parentElement
-            });
-          });
+          // Close lightbox
+          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2({}, prevProps), {}, {
+            isOpen: false
+          }));
         },
         // Morph from the image in lightbox to the image in trigger
         viewTransitionName: {
@@ -8405,7 +8397,7 @@ function useImageLightbox(initialProps) {
         }
       });
     }
-    async function openLightbox(triggerElement) {
+    async function open(triggerElement) {
       var _triggerImageRefs;
       let {
         activeImageIndex
@@ -8427,13 +8419,17 @@ function useImageLightbox(initialProps) {
       await startViewTransition({
         changes: () => {
           // Open lightbox with setup props
-          setImageLightboxProps(_objectSpread2(_objectSpread2({}, basePropsRef.current), {}, {
+          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2({}, prevProps), {}, {
             activeImageRef: currentImageRef,
             parentElement: {
               current: triggerElement
             },
             isOpen: true,
-            onClose: closeLightbox,
+            onClose: () => {
+              var _prevProps$onClose;
+              close();
+              prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$onClose = prevProps.onClose) === null || _prevProps$onClose === void 0 ? void 0 : _prevProps$onClose.call(prevProps);
+            },
             images: imagesWithFallbackSize,
             activeImageIndex: activeImageIndex || 0
           }));
@@ -8456,7 +8452,7 @@ function useImageLightbox(initialProps) {
         }
       },
       onClick(e) {
-        openLightbox(e.target, options);
+        open(e.target, options);
       }
     }));
   }, []);
@@ -13702,10 +13698,10 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
 
   // 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;
+
+  // Set loading placeholder image as background
   const loadingStyle = loadingPlaceholderImage ? {
-    backgroundImage: `url(${loadingPlaceholderImage.src})`,
-    minWidth: loadingPlaceholderImage.naturalWidth,
-    minHeight: loadingPlaceholderImage.naturalHeight
+    backgroundImage: `url(${loadingPlaceholderImage.src})`
   } : undefined;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
@@ -13727,6 +13723,8 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1f}__background`
   }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
+    width: (imgProps === null || imgProps === void 0 ? void 0 : imgProps.width) || (loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth),
+    height: (imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) || (loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalHeight),
     style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
     ref: mergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({