@lumx/react 4.9.0-next.14 → 4.9.0-next.16

package/index.d.ts

@@ -2881,6 +2881,71 @@ interface IconProps extends ReactToJSX<IconProps$1>, GenericProps$1 {
  */
 declare const Icon: Comp<IconProps, HTMLElement>;
 
+type ImageCaptionMetadata$1 = {
+    /** Image title to display in the caption. */
+    title?: string;
+    /** Props to pass to the title. */
+    titleProps?: GenericProps;
+    /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+    description?: JSXElement | {
+        __html: string;
+    };
+    /** Props to pass to the description. */
+    descriptionProps?: GenericProps;
+    /** Tag content. */
+    tags?: JSXElement;
+    /** Caption custom CSS style. */
+    captionStyle?: GenericProps;
+    /** Props to pass to the wrapper FlexBox element. */
+    wrapperProps?: GenericProps;
+    /** FlexBox component injected by the framework wrapper (React or Vue). */
+    FlexBox: any;
+    /** Text component injected by the framework wrapper (React or Vue). */
+    Text: any;
+};
+type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'wrapperProps';
+
+/**
+ * Image block variants.
+ */
+declare const ImageBlockCaptionPosition: {
+    readonly below: "below";
+    readonly over: "over";
+};
+type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+/**
+ *  Image block sizes.
+ */
+type ImageBlockSize$1 = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface ImageBlockProps$1 extends HasClassName, HasTheme, Omit<ImageCaptionMetadata$1, ImageCaptionPropsToOverride> {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** Alignment. */
+    align?: HorizontalAlignment;
+    /** Image alternative text. */
+    alt: string;
+    /** Caption position. */
+    captionPosition?: ImageBlockCaptionPosition;
+    /** Whether the image has to fill its container height or not. */
+    fillHeight?: boolean;
+    /** Image URL. */
+    image: string;
+    /** Size variant. */
+    size?: ImageBlockSize$1;
+    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+    thumbnailProps?: GenericProps;
+    /** reference to the root element */
+    ref?: CommonRef;
+    /** component for rendering the thumbnail */
+    Thumbnail: any;
+    /** component for rendering the image caption */
+    ImageCaption: any;
+}
+type ImageBlockPropsToOverride = 'Thumbnail' | 'ImageCaption' | 'thumbnailProps';
+
 /**
  * Loading attribute is not yet supported in typescript, so we need
  * to add it in order to avoid a ts error.
@@ -3030,44 +3095,6 @@ interface ThumbnailProps extends GenericProps$1, ReactToJSX<ThumbnailProps$1, 'l
  */
 declare const Thumbnail: Comp<ThumbnailProps, HTMLElement>;
 
-type ImageCaptionMetadata$1 = {
-    /** Image title to display in the caption. */
-    title?: string;
-    /** Props to pass to the title. */
-    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?: GenericProps;
-    /** Tag content. */
-    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;
-};
-
-/**
- * Image block variants.
- */
-declare const ImageBlockCaptionPosition: {
-    readonly below: "below";
-    readonly over: "over";
-};
-type ImageBlockCaptionPosition = ValueOf$1<typeof ImageBlockCaptionPosition>;
 /**
  *  Image block sizes.
  */
@@ -3075,21 +3102,7 @@ type ImageBlockSize = Extract<Size$1, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-interface ImageBlockProps extends GenericProps$1, HasTheme$1, ImageCaptionMetadata {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Alignment. */
-    align?: HorizontalAlignment$1;
-    /** Image alternative text. */
-    alt: string;
-    /** Caption position. */
-    captionPosition?: ImageBlockCaptionPosition;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Image URL. */
-    image: string;
-    /** Size variant. */
-    size?: ImageBlockSize;
+interface ImageBlockProps extends GenericProps$1, ReactToJSX<ImageBlockProps$1, ImageBlockPropsToOverride> {
     /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
 }
@@ -3102,6 +3115,16 @@ interface ImageBlockProps extends GenericProps$1, HasTheme$1, ImageCaptionMetada
  */
 declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
 
+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;
+};
+
 type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
 interface ZoomButtonProps {
     /** Zoom in button props */

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment as Alignment$1, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Alignment as Alignment$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -12247,6 +12247,112 @@ Icon.displayName = Icon$1.displayName;
 Icon.className = Icon$1.className;
 Icon.defaultProps = Icon$1.defaultProps;
 
+/**
+ * Image block variants.
+ */
+const ImageBlockCaptionPosition = {
+  below: 'below',
+  over: 'over'
+};
+
+/**
+ *  Image block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$I = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$J = 'lumx-image-block';
+const {
+  block: block$B,
+  element: element$v
+} = bem(CLASSNAME$J);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$F = {
+  captionPosition: ImageBlockCaptionPosition.below,
+  align: Alignment.left
+};
+
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageBlock$1 = props => {
+  const {
+    actions,
+    align = DEFAULT_PROPS$F.align,
+    alt,
+    captionPosition = DEFAULT_PROPS$F.captionPosition,
+    captionStyle,
+    className,
+    description,
+    descriptionProps,
+    fillHeight,
+    image,
+    size,
+    tags,
+    ref,
+    theme,
+    thumbnailProps,
+    title,
+    titleProps,
+    Thumbnail,
+    ImageCaption,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("figure", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$B({
+      [`caption-position-${captionPosition}`]: Boolean(captionPosition),
+      [`align-${align}`]: Boolean(align),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      'fill-height': fillHeight
+    })),
+    children: [/*#__PURE__*/jsx(Thumbnail, {
+      ...thumbnailProps,
+      className: classnames(element$v('image'), thumbnailProps?.className),
+      fillHeight: fillHeight,
+      align: align,
+      image: image,
+      size: size,
+      theme: theme,
+      alt: alt || title
+    }), /*#__PURE__*/jsx(ImageCaption, {
+      as: "figcaption",
+      baseClassName: CLASSNAME$J,
+      theme: theme,
+      title: title,
+      titleProps: titleProps,
+      description: description,
+      descriptionProps: descriptionProps,
+      tags: tags,
+      captionStyle: captionStyle,
+      align: align,
+      truncate: captionPosition === 'over'
+    }), actions && /*#__PURE__*/jsx("div", {
+      className: element$v('actions'),
+      children: actions
+    })]
+  });
+};
+
 /** Internal component used to render image captions */
 const ImageCaption$1 = props => {
   const {
@@ -12262,7 +12368,11 @@ const ImageCaption$1 = props => {
     align,
     truncate,
     FlexBox,
-    Text
+    Text,
+    wrapperProps = {
+      vAlign: align,
+      hAlign: align === 'center' ? align : undefined
+    }
   } = props;
   if (!title && !description && !tags) return null;
   const titleColor = {
@@ -12277,9 +12387,8 @@ const ImageCaption$1 = props => {
     className: classnames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
-    vAlign: align,
-    hAlign: align === 'center' ? align : undefined,
     gap: "regular",
+    ...wrapperProps,
     children: [(title || description) && /*#__PURE__*/jsxs(Text, {
       as: "p",
       className: classnames(baseClassName && `${baseClassName}__caption`),
@@ -12329,11 +12438,6 @@ const ImageCaption = props => {
   });
 };
 
-const ImageBlockCaptionPosition = {
-  below: 'below',
-  over: 'over'
-};
-
 /**
  *  Image block sizes.
  */
@@ -12342,28 +12446,6 @@ const ImageBlockCaptionPosition = {
  * Defines the props of the component.
  */
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$I = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$J = 'lumx-image-block';
-const {
-  block: block$B,
-  element: element$v
-} = classNames.bem(CLASSNAME$J);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$F = {
-  captionPosition: ImageBlockCaptionPosition.below,
-  align: Alignment$1.left
-};
-
 /**
  * ImageBlock component.
  *
@@ -12374,59 +12456,15 @@ const DEFAULT_PROPS$F = {
 const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    actions,
-    align = DEFAULT_PROPS$F.align,
-    alt,
-    captionPosition = DEFAULT_PROPS$F.captionPosition,
-    captionStyle,
-    className,
-    description,
-    descriptionProps,
-    fillHeight,
-    image,
-    size,
-    tags,
     theme = defaultTheme,
-    thumbnailProps,
-    title,
-    titleProps,
     ...forwardedProps
   } = props;
-  return /*#__PURE__*/jsxs("figure", {
-    ref: ref,
+  return ImageBlock$1({
+    ref,
+    theme,
     ...forwardedProps,
-    className: classNames.join(className, block$B({
-      [`caption-position-${captionPosition}`]: Boolean(captionPosition),
-      [`align-${align}`]: Boolean(align),
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme),
-      'fill-height': fillHeight
-    })),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      ...thumbnailProps,
-      className: classNames.join(element$v('image'), thumbnailProps?.className),
-      fillHeight: fillHeight,
-      align: align,
-      image: image,
-      size: size,
-      theme: theme,
-      alt: alt || title
-    }), /*#__PURE__*/jsx(ImageCaption, {
-      as: "figcaption",
-      baseClassName: CLASSNAME$J,
-      theme: theme,
-      title: title,
-      titleProps: titleProps,
-      description: description,
-      descriptionProps: descriptionProps,
-      tags: tags,
-      captionStyle: captionStyle,
-      align: align,
-      truncate: captionPosition === 'over'
-    }), actions && /*#__PURE__*/jsx("div", {
-      className: element$v('actions'),
-      children: actions
-    })]
+    Thumbnail,
+    ImageCaption
   });
 });
 ImageBlock.displayName = COMPONENT_NAME$I;