@digital-ai/dot-components 3.20.3 → 3.22.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)) {
@@ -4221,6 +4221,22 @@ const DotClickAwayListener = ({
   });
 };
 
+const useKeyPress = (key, callback, dependencies) => {
+  useEffect(() => {
+    if (!key) return;
+    const handleKeyPress = event => {
+      const element = event.target;
+      if (event.key === key && !['INPUT', 'TEXTAREA'].includes(element.nodeName) && !element.isContentEditable) {
+        callback();
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [key, ...dependencies]);
+};
+
 const DotList = ({
   ariaLabel,
   ariaRole = 'list',
@@ -4231,6 +4247,7 @@ const DotList = ({
   dense = false,
   disablePadding = false,
   items = [],
+  keyForNestedReset,
   menuPlacement = 'right-start',
   nestedDrawerLeftSpacing = 240,
   nestedListCloseOnClickAway = true,
@@ -4251,6 +4268,7 @@ const DotList = ({
   const handleHrefClick = index => () => {
     updateSelectedListItem(index);
   };
+  useKeyPress(keyForNestedReset, handleClickAway, []);
   const list = jsxs(StyledList, {
     "aria-label": ariaLabel,
     classes: {
@@ -5902,19 +5920,7 @@ const DotSidebar = ({
     onCollapseChange && onCollapseChange(isOpen);
     setIsOpen(!isOpen);
   };
-  useEffect(() => {
-    if (!collapsable) return;
-    const handleKeyPress = event => {
-      const element = event.target;
-      if (event.key === collapseKey && !['INPUT', 'TEXTAREA'].includes(element.nodeName) && !element.isContentEditable) {
-        toggleNavCollapseState();
-      }
-    };
-    window.addEventListener('keydown', handleKeyPress);
-    return () => {
-      window.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [isOpen, collapsable]);
+  useKeyPress(collapsable && collapseKey, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
   const rootClasses = useStylesWithRootClass(rootClassName$$, openClass, className);
   return jsxs(StyledSidebar, {
@@ -5958,6 +5964,7 @@ const DotSidebar = ({
       dense: true,
       disablePadding: true,
       items: navItems,
+      keyForNestedReset: collapseKey,
       nestedDrawerLeftSpacing: sidebarWidth,
       nestedListType: nestedListType,
       width: "100%"
@@ -7654,7 +7661,8 @@ const DotCardFooter = ({
 const rootClassName$Q = 'dot-card-header';
 const StyledCardHeader = styled(CardHeader)`
   ${({
-  theme
+  theme,
+  $maxTitleLines
 }) => css`
     &.${rootClassName$Q} {
       .MuiCardHeader-content {
@@ -7663,6 +7671,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 +7693,7 @@ const DotCardHeader = ({
   subheader,
   subheaderSize = 'large',
   title,
+  titleMaxLines = 1,
   titleSize = 'large'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
@@ -7710,7 +7727,8 @@ const DotCardHeader = ({
         noWrap: true,
         variant: titleVariant
       })
-    })
+    }),
+    "$maxTitleLines": titleMaxLines
   });
 };
 
@@ -11738,16 +11756,38 @@ function CloseButton({
     onClick: () => onClose(dashboard)
   }) : null;
 }
+function FullscreenButton({
+  dashboard,
+  isFullscreen = false,
+  onToggleFullscreen
+}) {
+  if (!onToggleFullscreen) {
+    return null;
+  }
+  return isFullscreen ? jsx(DotIconButton, {
+    iconId: "fullscreen-exit",
+    "data-testid": 'dashboard-exit-fullscreen-button',
+    tooltip: "Exit fullscreen mode",
+    onClick: () => onToggleFullscreen(false)
+  }) : jsx(DotIconButton, {
+    iconId: "fullscreen-enter",
+    "data-testid": 'dashboard-enter-fullscreen-button',
+    tooltip: "Show dashboard in fullscreen mode",
+    onClick: () => onToggleFullscreen(true)
+  });
+}
 function DotDashboardActions({
   applications,
   dashboard,
   isEdit = false,
   canEdit = false,
+  isFullscreen = false,
   onClose,
   onFavorite,
   onStatusChanged,
   onDeleted,
   onDuplicated,
+  onToggleFullscreen,
   onViewMode
 }) {
   // NOTE:  useState functions need to stay at the top of the file so that
@@ -11859,6 +11899,10 @@ function DotDashboardActions({
       onStartDuplicate: handleStartDuplicateIfConfig,
       onStartDelete: handleStartDeleteIfConfig,
       onDetails: () => setOpenedDashboardDetails(dashboard)
+    }), onToggleFullscreen && jsx(FullscreenButton, {
+      dashboard: dashboard,
+      isFullscreen: isFullscreen,
+      onToggleFullscreen: onToggleFullscreen
     }), onClose && jsx(CloseButton, {
       dashboard: dashboard,
       onClose: onClose
@@ -11883,6 +11927,16 @@ const StyledDashboardHeaderTitleSection = styled.div`
     display: flex;
     align-items: center;
     gap: ${theme.spacing(2)};
+
+    h2 {
+      display: flex;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+    }
+
+    .dashboard-header-back-button .dot-icon {
+      font-size: 20px;
+    }
   `}
 `;
 
@@ -11891,11 +11945,14 @@ function DotDashboardHeader({
   dashboard,
   isEdit = false,
   canEdit = false,
+  isFullscreen = false,
+  onBack,
   onClose,
   onFavorite,
   onStatusChanged,
   onDeleted,
   onDuplicated,
+  onToggleFullscreen,
   onViewMode,
   showStatus = false
 }) {
@@ -11914,12 +11971,18 @@ function DotDashboardHeader({
   useEffect(() => {
     loadApplications(accountId);
   }, []);
+  const backButton = onBack && jsx(DotIconButton, {
+    className: "dashboard-header-back-button",
+    "data-testid": "dashboard-header-back-button",
+    iconId: "back-solid",
+    onClick: () => onBack(dashboard.id)
+  });
   return jsxs(StyledDashboardHeader, {
     children: [jsxs(StyledDashboardHeaderTitleSection, {
-      children: [jsx(DotTypography, {
+      children: [jsxs(DotTypography, {
         component: "h2",
         variant: "h2",
-        children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
+        children: [backButton, dashboard === null || dashboard === void 0 ? void 0 : dashboard.name]
       }), showStatus && jsx(DotDashboardStatusPill, {
         status: dashboard.lifecycle_state
       })]
@@ -11928,11 +11991,13 @@ function DotDashboardHeader({
       canEdit: canEdit,
       dashboard: dashboard,
       isEdit: isEdit,
+      isFullscreen: isFullscreen,
       onClose: onClose,
       onFavorite: onFavorite,
       onStatusChanged: onStatusChanged,
       onDeleted: onDeleted,
       onDuplicated: onDuplicated,
+      onToggleFullscreen: onToggleFullscreen,
       onViewMode: onViewMode
     })]
   });

package/package.json

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

package/src/lib/components/analytics/dashboard-actions/DashboardActions.d.ts

@@ -4,15 +4,17 @@ interface DashboardActionsCommonProps {
     canEdit?: boolean;
     dashboard: DashboardView;
     isEdit?: boolean;
+    isFullscreen?: boolean;
     onClose?: (dashboard: DashboardView) => void;
     onDeleted?: (id: string, result: boolean) => void;
     onDuplicated?: (dashboard: DashboardView, isDone?: boolean) => void;
     onFavorite?: (id: string, value: boolean) => void;
     onStatusChanged?: (dashboard: DashboardView) => void;
+    onToggleFullscreen?: (newValue: boolean) => void;
     onViewMode?: (dashboard: DashboardView, mode: string) => void;
 }
 interface DashboardActionsProps extends DashboardActionsCommonProps {
     applications: ApplicationModel[];
 }
-declare function DotDashboardActions({ applications, dashboard, isEdit, canEdit, onClose, onFavorite, onStatusChanged, onDeleted, onDuplicated, onViewMode, }: DashboardActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function DotDashboardActions({ applications, dashboard, isEdit, canEdit, isFullscreen, onClose, onFavorite, onStatusChanged, onDeleted, onDuplicated, onToggleFullscreen, onViewMode, }: DashboardActionsProps): import("react/jsx-runtime").JSX.Element;
 export { DashboardActionsCommonProps, DotDashboardActions };

package/src/lib/components/analytics/dashboard-header/DashboardHeader.d.ts

@@ -1,7 +1,8 @@
 import { DashboardActionsCommonProps } from '../dashboard-actions/DashboardActions';
 interface DashboardHeaderProps extends DashboardActionsCommonProps {
     accountId?: string;
+    onBack?: (dashboardId?: string) => void;
     showStatus?: boolean;
 }
-declare function DotDashboardHeader({ accountId, dashboard, isEdit, canEdit, onClose, onFavorite, onStatusChanged, onDeleted, onDuplicated, onViewMode, showStatus, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DotDashboardHeader({ accountId, dashboard, isEdit, canEdit, isFullscreen, onBack, onClose, onFavorite, onStatusChanged, onDeleted, onDuplicated, onToggleFullscreen, onViewMode, showStatus, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { DashboardHeaderProps, DotDashboardHeader };

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 {};

package/src/lib/components/list/List.d.ts

@@ -1,2 +1,2 @@
 import { ListProps } from './utils/models';
-export declare const DotList: ({ ariaLabel, ariaRole, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListCloseOnClickAway, nestedListType, width, }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotList: ({ ariaLabel, ariaRole, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, keyForNestedReset, menuPlacement, nestedDrawerLeftSpacing, nestedListCloseOnClickAway, nestedListType, width, }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/utils/models.d.ts

@@ -17,6 +17,8 @@ export interface ListProps extends CommonProps {
     disablePadding?: boolean;
     /** Array of list items displayed */
     items?: Array<ListItemProps>;
+    /** If defined, list selection will reset when key is pressed */
+    keyForNestedReset?: string;
     /** If nested list type is 'menu', determines the placement of the menu */
     menuPlacement?: PopperPlacement;
     /** If nested type is 'drawer', determines the width of the left spacing */

package/src/lib/hooks/useKeyPress.d.ts

@@ -0,0 +1 @@
+export declare const useKeyPress: (key: string, callback: () => void, dependencies: unknown[]) => void;