@lumx/react 4.9.0-next.10 → 4.9.0-next.12

package/index.d.ts

@@ -2458,7 +2458,7 @@ declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1 {
+interface ExpansionPanelProps$1 extends HasClassName, HasCloseMode, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -2467,6 +2467,41 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     isOpen?: boolean;
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
+    /** On open callback. */
+    handleOpen?: (event: any) => void;
+    /** On close callback. */
+    handleClose?: (event: any) => void;
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+    toggleButtonProps: any;
+    /** On toggle open or close callback. */
+    handleToggleOpen?(shouldOpen: boolean, event: any): void;
+    /** Children */
+    children?: JSXElement;
+    /** Ref forwarded to the root `<section>` element. */
+    ref?: CommonRef;
+    /** Ref forwarded to the collapsible wrapper `<div>`. */
+    wrapperRef?: CommonRef;
+    /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+    headerProps: GenericProps;
+    /** Content rendered inside the header content area. */
+    headerContent?: JSXElement;
+    /** Optional drag handle element rendered at the start of the header. */
+    dragHandle?: JSXElement;
+    /** Content rendered inside the collapsible content area. */
+    content?: JSXElement;
+    /** Optional footer element rendered below the content. */
+    footer?: JSXElement;
+    /** IconButton component injected by the framework wrapper (React or Vue). */
+    IconButton: any;
+    /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+    isChildrenVisible?: boolean;
+}
+type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends GenericProps$1, ReactToJSX<ExpansionPanelProps$1, ExpansionPanelPropsToOverride> {
     /** On open callback. */
     onOpen?: (event: React__default.MouseEvent) => void;
     /** On close callback. */
@@ -2475,8 +2510,6 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     toggleButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
     onToggleOpen?(shouldOpen: boolean, event: React__default.MouseEvent): void;
-    /** Children */
-    children?: React__default.ReactNode;
 }
 /**
  * ExpansionPanel component.
@@ -2997,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

@@ -11647,7 +11647,7 @@ const CLASSNAME$P = 'lumx-expansion-panel';
 const {
   block: block$G,
   element: element$x
-} = classNames.bem(CLASSNAME$P);
+} = bem(CLASSNAME$P);
 
 /**
  * Component default props.
@@ -11655,9 +11655,6 @@ const {
 const DEFAULT_PROPS$L = {
   closeMode: 'unmount'
 };
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -11666,48 +11663,45 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-const ExpansionPanel = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ExpansionPanel$1 = props => {
   const {
     className,
-    closeMode = DEFAULT_PROPS$L.closeMode,
     children: anyChildren,
     hasBackground,
+    ref,
     hasHeaderDivider,
     isOpen,
     label,
-    onClose,
-    onOpen,
-    onToggleOpen,
-    theme = defaultTheme,
+    handleClose,
+    handleOpen,
+    handleToggleOpen,
+    theme,
     toggleButtonProps,
+    headerProps,
+    headerContent,
+    dragHandle,
+    wrapperRef,
+    content,
+    isChildrenVisible,
+    IconButton,
+    footer,
+    closeMode,
     ...forwardedProps
   } = props;
-  const children = Children.toArray(anyChildren);
-
-  // Partition children by types.
-  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-  // Either take the header in children or create one with the label.
-  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: element$x('label'),
-    children: label
-  });
   const toggleOpen = event => {
     const shouldOpen = !isOpen;
-    if (onOpen && shouldOpen) {
-      onOpen(event);
+    if (handleOpen && shouldOpen) {
+      handleOpen(event);
     }
-    if (onClose && !shouldOpen) {
-      onClose(event);
+    if (handleClose && !shouldOpen) {
+      handleClose(event);
     }
-    if (onToggleOpen) {
-      onToggleOpen(shouldOpen, event);
+    if (handleToggleOpen) {
+      handleToggleOpen(shouldOpen, event);
     }
   };
-  const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$G({
+  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+  const rootClassName = classnames(className, block$G({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -11716,35 +11710,6 @@ const ExpansionPanel = forwardRef((props, ref) => {
     'is-open': isOpen,
     [`theme-${theme}`]: Boolean(theme)
   }));
-  const wrapperRef = useRef(null);
-
-  // Children stay visible while the open/close transition is running
-  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
-  const isOpenRef = React__default.useRef(isOpen);
-  React__default.useEffect(() => {
-    if (isOpen || closeMode === 'hide') {
-      setChildrenVisible(true);
-    } else if (!IS_BROWSER$1) {
-      // Outside a browser we can't wait for the transition
-      setChildrenVisible(false);
-    }
-    isOpenRef.current = isOpen;
-  }, [closeMode, isOpen]);
-
-  // Change children's visibility on the transition end
-  React__default.useEffect(() => {
-    const {
-      current: wrapper
-    } = wrapperRef;
-    if (!IS_BROWSER$1 || !wrapper) {
-      return undefined;
-    }
-    const onTransitionEnd = () => {
-      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
-    };
-    wrapper.addEventListener('transitionend', onTransitionEnd);
-    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-  }, [closeMode]);
   return /*#__PURE__*/jsxs("section", {
     ref: ref,
     ...forwardedProps,
@@ -11764,7 +11729,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
-          emphasis: Emphasis$1.low,
+          emphasis: Emphasis.low,
           icon: isOpen ? mdiChevronUp : mdiChevronDown,
           "aria-expanded": isOpen || 'false'
         })
@@ -11784,6 +11749,92 @@ const ExpansionPanel = forwardRef((props, ref) => {
       })
     })]
   });
+};
+
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ExpansionPanel = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    closeMode = DEFAULT_PROPS$L.closeMode,
+    children: anyChildren,
+    isOpen,
+    label,
+    onClose,
+    onOpen,
+    onToggleOpen,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const children = Children.toArray(anyChildren);
+
+  // Partition children by types.
+  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
+
+  // Either take the header in children or create one with the label.
+  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
+    className: element$x('label'),
+    children: label
+  });
+  const wrapperRef = useRef(null);
+
+  // Children stay visible while the open/close transition is running
+  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
+  const isOpenRef = React__default.useRef(isOpen);
+  React__default.useEffect(() => {
+    if (isOpen || closeMode === 'hide') {
+      setChildrenVisible(true);
+    } else if (!IS_BROWSER$1) {
+      // Outside a browser we can't wait for the transition
+      setChildrenVisible(false);
+    }
+    isOpenRef.current = isOpen;
+  }, [closeMode, isOpen]);
+
+  // Change children's visibility on the transition end
+  React__default.useEffect(() => {
+    const {
+      current: wrapper
+    } = wrapperRef;
+    if (!IS_BROWSER$1 || !wrapper) {
+      return undefined;
+    }
+    const onTransitionEnd = () => {
+      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
+    };
+    wrapper.addEventListener('transitionend', onTransitionEnd);
+    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
+  }, [closeMode]);
+  return ExpansionPanel$1({
+    content,
+    dragHandle,
+    footer,
+    headerContent,
+    ref,
+    headerProps,
+    wrapperRef,
+    IconButton,
+    isOpen,
+    handleClose: onClose,
+    handleToggleOpen: onToggleOpen,
+    handleOpen: onOpen,
+    theme,
+    isChildrenVisible,
+    children,
+    closeMode,
+    label,
+    ...forwardedProps
+  });
 });
 ExpansionPanel.displayName = COMPONENT_NAME$O;
 ExpansionPanel.className = CLASSNAME$P;
@@ -12263,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,
@@ -12276,7 +12326,9 @@ const ImageCaption = props => {
     tags,
     captionStyle,
     align,
-    truncate
+    truncate,
+    FlexBox,
+    Text
   } = props;
   if (!title && !description && !tags) return null;
   const titleColor = {
@@ -12286,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,
@@ -12303,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
@@ -12329,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'