@lumx/react 4.9.0-next.11 → 4.9.0-next.13

package/index.d.ts

@@ -3030,20 +3030,32 @@ interface ThumbnailProps extends GenericProps$1, ReactToJSX<ThumbnailProps$1, 'l
  */
 declare const Thumbnail: Comp<ThumbnailProps, HTMLElement>;
 
-type ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;
-type ImageCaptionMetadata = {
+type ImageCaptionMetadata$1 = {
     /** Image title to display in the caption. */
     title?: string;
     /** Props to pass to the title. */
-    titleProps?: ForwardedTextProps;
-    /** Image description. Can be either a string, or sanitized html. */
-    description?: string | {
+    titleProps?: GenericProps;
+    /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+    description?: JSXElement | {
         __html: string;
     };
     /** Props to pass to the title. */
-    descriptionProps?: ForwardedTextProps;
+    descriptionProps?: GenericProps;
     /** Tag content. */
-    tags?: ReactNode;
+    tags?: JSXElement;
+    /** Caption custom CSS style. */
+    captionStyle?: GenericProps;
+    FlexBox: any;
+    Text: any;
+};
+type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'titleProps' | 'descriptionProps' | 'captionStyle';
+
+type ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;
+type ImageCaptionMetadata = Omit<ImageCaptionMetadata$1, ImageCaptionPropsToOverride> & {
+    /** Props to pass to the title. */
+    titleProps?: ForwardedTextProps;
+    /** Props to pass to the title. */
+    descriptionProps?: ForwardedTextProps;
     /** Caption custom CSS style. */
     captionStyle?: CSSProperties;
 };

package/index.js

@@ -12314,11 +12314,10 @@ Icon.className = Icon$1.className;
 Icon.defaultProps = Icon$1.defaultProps;
 
 /** Internal component used to render image captions */
-const ImageCaption = props => {
-  const defaultTheme = useTheme();
+const ImageCaption$1 = props => {
   const {
     baseClassName,
-    theme = defaultTheme,
+    theme,
     as = 'figcaption',
     title,
     titleProps,
@@ -12327,7 +12326,9 @@ const ImageCaption = props => {
     tags,
     captionStyle,
     align,
-    truncate
+    truncate,
+    FlexBox,
+    Text
   } = props;
   if (!title && !description && !tags) return null;
   const titleColor = {
@@ -12337,16 +12338,9 @@ const ImageCaption = props => {
     color: theme === 'dark' ? 'light' : 'dark',
     colorVariant: 'L2'
   };
-
-  // Display description as string or HTML
-  const descriptionContent = typeof description === 'string' ? {
-    children: description
-  } : {
-    dangerouslySetInnerHTML: description
-  };
   return /*#__PURE__*/jsxs(FlexBox, {
     as: as,
-    className: classNames.join(baseClassName && `${baseClassName}__wrapper`),
+    className: classnames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -12354,25 +12348,31 @@ const ImageCaption = props => {
     gap: "regular",
     children: [(title || description) && /*#__PURE__*/jsxs(Text, {
       as: "p",
-      className: classNames.join(baseClassName && `${baseClassName}__caption`),
+      className: classnames(baseClassName && `${baseClassName}__caption`),
       truncate: truncate,
       ...baseColor,
       children: [title && /*#__PURE__*/jsx(Text, {
         ...titleProps,
         as: "span",
-        className: classNames.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
+        className: classnames(titleProps?.className, baseClassName && `${baseClassName}__title`),
         typography: "subtitle1",
         ...titleColor,
         children: title
-      }), ' ', description && /*#__PURE__*/jsx(Text, {
+      }), ' ', description && (typeof description === 'object' && '__html' in description ? /*#__PURE__*/jsx(Text, {
         ...descriptionProps,
         as: "span",
-        className: classNames.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        className: classnames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
         typography: "body1",
-        ...descriptionContent
-      })]
+        dangerouslySetInnerHTML: description
+      }) : /*#__PURE__*/jsx(Text, {
+        ...descriptionProps,
+        as: "span",
+        className: classnames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        typography: "body1",
+        children: description
+      }))]
     }), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: classNames.join(baseClassName && `${baseClassName}__tags`),
+      className: classnames(baseClassName && `${baseClassName}__tags`),
       orientation: "horizontal",
       vAlign: align,
       children: tags
@@ -12380,6 +12380,21 @@ const ImageCaption = props => {
   });
 };
 
+/** Internal component used to render image captions */
+const ImageCaption = props => {
+  const defaultTheme = useTheme();
+  const {
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return ImageCaption$1({
+    FlexBox,
+    Text,
+    theme,
+    ...forwardedProps
+  });
+};
+
 const ImageBlockCaptionPosition = {
   below: 'below',
   over: 'over'