@digital-ai/dot-components 3.21.0 → 3.22.0

package/index.esm.js

@@ -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%"
@@ -11749,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
@@ -11870,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
@@ -11894,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;
+    }
   `}
 `;
 
@@ -11902,11 +11945,14 @@ function DotDashboardHeader({
   dashboard,
   isEdit = false,
   canEdit = false,
+  isFullscreen = false,
+  onBack,
   onClose,
   onFavorite,
   onStatusChanged,
   onDeleted,
   onDuplicated,
+  onToggleFullscreen,
   onViewMode,
   showStatus = false
 }) {
@@ -11925,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
       })]
@@ -11939,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.21.0",
+  "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/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;