@digital-ai/dot-components 3.20.3 → 3.21.0

package/index.esm.js

@@ -31,7 +31,7 @@ function useStylesWithRootClass(name, className, ...args) {
 }
 
 const checkIfOverflowPresentInElementTree = element => {
-  if (element.scrollWidth > element.clientWidth) {
+  if (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight) {
     return true;
   }
   for (const child of Array.from(element.children)) {
@@ -7654,7 +7654,8 @@ const DotCardFooter = ({
 const rootClassName$Q = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
-  theme
+  theme,
+  $maxTitleLines
 }) => css`
     &.${rootClassName$Q} {
       .MuiCardHeader-content {
@@ -7663,6 +7664,14 @@ const StyledCardHeader = styled(CardHeader)`
         .dot-card-subheader {
           color: ${theme.palette.figma.typography.gray};
         }
+
+        .dot-card-header-title {
+          display: -webkit-box;
+          -webkit-line-clamp: ${$maxTitleLines};
+          -webkit-box-orient: vertical;
+          white-space: normal;
+          overflow-wrap: break-word;
+        }
       }
     }
   `}
@@ -7677,6 +7686,7 @@ const DotCardHeader = ({
   subheader,
   subheaderSize = 'large',
   title,
+  titleMaxLines = 1,
   titleSize = 'large'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
@@ -7710,7 +7720,8 @@ const DotCardHeader = ({
         noWrap: true,
         variant: titleVariant
       })
-    })
+    }),
+    "$maxTitleLines": titleMaxLines
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "3.20.3",
+  "version": "3.21.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/card/CardHeader.d.ts

@@ -13,7 +13,9 @@ export interface CardHeaderProps extends CommonProps {
     subheaderSize?: SubheaderSize;
     /** Card title */
     title?: string;
+    /** Card title maximum number of lines (default is 1) */
+    titleMaxLines?: number;
     /** Card title size */
     titleSize?: TitleSize;
 }
-export declare const DotCardHeader: ({ action, ariaLabel, avatar, className, "data-testid": dataTestId, subheader, subheaderSize, title, titleSize, }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCardHeader: ({ action, ariaLabel, avatar, className, "data-testid": dataTestId, subheader, subheaderSize, title, titleMaxLines, titleSize, }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/card/CardHeader.styles.d.ts

@@ -1,2 +1,6 @@
 export declare const rootClassName = "dot-card-header";
-export declare const StyledCardHeader: import("styled-components").StyledComponent<import("@mui/material").OverridableCardHeader, any, {}, never>;
+interface StyledCardHeaderProps {
+    $maxTitleLines: number;
+}
+export declare const StyledCardHeader: import("styled-components").StyledComponent<import("@mui/material").OverridableCardHeader, any, StyledCardHeaderProps, never>;
+export {};