@digital-ai/dot-components 3.19.0 → 3.20.1

package/index.esm.js

@@ -11602,13 +11602,15 @@ function DotDashboardOptionsMenu({
     });
   }
   if (onDetails) {
-    menuItems.push({
-      children: jsx("div", {
-        className: "dashboard-details-border"
-      }),
-      disabled: true,
-      key: 'dashboard-details-border'
-    });
+    if (menuItems.length > 0) {
+      menuItems.push({
+        children: jsx("div", {
+          className: "dashboard-details-border"
+        }),
+        disabled: true,
+        key: 'dashboard-details-border'
+      });
+    }
     menuItems.push({
       children: jsxs(DotLink, {
         ariaLabel: "Dashboard details",
@@ -11817,6 +11819,7 @@ function DotDashboardActions({
   const handleStartDuplicateIfConfig = onDuplicated ? handleStartDuplicate : undefined;
   const handleStartStatusChangeIfConfig = onStatusChanged ? handleStartStatusChange : undefined;
   const handleStartDeleteIfConfig = onDeleted ? handleStartDelete : undefined;
+  const handleViewModeIfConfig = onViewMode && canEdit ? onViewMode : undefined;
   return jsxs(StyledDashboardActions, {
     "data-testid": "dot-dashboard-actions",
     children: [jsx(DotDashboardPublishConfirm, {
@@ -11843,11 +11846,11 @@ function DotDashboardActions({
     }), onFavorite && jsx(FavoriteButton, {
       dashboard: dashboard,
       onFavorite: onFavorite
-    }), canEdit && jsx(DotDashboardOptionsMenu, {
+    }), jsx(DotDashboardOptionsMenu, {
       dashboard: dashboard,
       isEdit: isEdit,
       menuPlacement: "bottom-start",
-      onViewMode: onViewMode,
+      onViewMode: handleViewModeIfConfig,
       onStartStatusChange: handleStartStatusChangeIfConfig,
       onStartDuplicate: handleStartDuplicateIfConfig,
       onStartDelete: handleStartDeleteIfConfig,
@@ -11869,6 +11872,15 @@ const StyledDashboardHeader = styled(DotActionToolbar)`
     padding: ${theme.spacing(0, 2)};
   `}
 `;
+const StyledDashboardHeaderTitleSection = styled.div`
+  ${({
+  theme
+}) => css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacing(2)};
+  `}
+`;
 
 function DotDashboardHeader({
   accountId,
@@ -11880,7 +11892,8 @@ function DotDashboardHeader({
   onStatusChanged,
   onDeleted,
   onDuplicated,
-  onViewMode
+  onViewMode,
+  showStatus = false
 }) {
   const {
     applications,
@@ -11898,10 +11911,14 @@ function DotDashboardHeader({
     loadApplications(accountId);
   }, []);
   return jsxs(StyledDashboardHeader, {
-    children: [jsx(DotTypography, {
-      component: "h2",
-      variant: "h2",
-      children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
+    children: [jsxs(StyledDashboardHeaderTitleSection, {
+      children: [jsx(DotTypography, {
+        component: "h2",
+        variant: "h2",
+        children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
+      }), showStatus && jsx(DotDashboardStatusPill, {
+        status: dashboard.lifecycle_state
+      })]
     }), jsx(DotDashboardActions, {
       applications: applications,
       canEdit: canEdit,
@@ -16208,7 +16225,16 @@ const DotTableActions = ({
   const [anchorEl, setAnchorEl] = useState(null);
   const [showMenu, setShowMenu] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [_resizeListener, setResizeListener] = useState(null);
   useEffect(() => {
+    const checkForOverflowing = () => {
+      if (actions.length > 1) {
+        const actionIcons = document.getElementsByClassName('dot-table-action-icon');
+        const actionTableCellWidth = 3 * (actionIcons.length > 0 && actionIcons[0].clientWidth);
+        const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
+        setShowMenu(isOverflowing);
+      }
+    };
     const items = actions.map(action => ({
       ariaLabel: action.ariaLabel,
       children: getMenuItem(action),
@@ -16222,35 +16248,33 @@ const DotTableActions = ({
     });
     setSelectionMap(map);
     checkForOverflowing();
-    window.addEventListener('resize', checkForOverflowing);
+    setResizeListener(orig => {
+      if (orig) {
+        window.removeEventListener('resize', orig);
+      }
+      window.addEventListener('resize', checkForOverflowing);
+      return checkForOverflowing;
+    });
     return () => {
       window.removeEventListener('resize', checkForOverflowing);
     };
-  }, []);
-  const checkForOverflowing = () => {
-    if (actions.length > 1) {
-      const actionIcons = document.getElementsByClassName('dot-table-action-icon');
-      const actionTableCellWidth = 3 * (actionIcons.length > 0 && actionIcons[0].clientWidth);
-      const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
-      setShowMenu(isOverflowing);
-    }
-  };
-  const toggleMenu = event => {
+  }, [actions]);
+  const toggleMenu = useCallback(event => {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
-    setMenuOpen(!menuOpen);
-  };
-  const onSelect = (event, _menuId, itemKey) => {
+    setMenuOpen(wasOpen => !wasOpen);
+  }, []);
+  const onSelect = useCallback((event, _menuId, itemKey) => {
     event.stopPropagation();
     selectionMap[itemKey].onClick(null);
-  };
-  const onLeave = () => {
+  }, [selectionMap]);
+  const onLeave = useCallback(() => {
     setMenuOpen(false);
-  };
-  const handleTableActionClick = (event, action) => {
+  }, []);
+  const handleTableActionClick = useCallback((event, action) => {
     event.stopPropagation();
     action.onClick(event);
-  };
+  }, []);
   const renderTableActions = () => {
     return actions && actions.map((action, index) => index < 2 && jsx(DotTableAction, {
       "data-testid": action['data-testid'],

package/package.json

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

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

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

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

@@ -1 +1,2 @@
 export declare const StyledDashboardHeader: import("styled-components").StyledComponent<({ ariaLabel, children, className, "data-testid": dataTestId, variant, }: import("../../action-toolbar/ActionToolbar").DotActionBarProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledDashboardHeaderTitleSection: import("styled-components").StyledComponent<"div", any, {}, never>;