@digital-ai/dot-components 3.17.0 → 3.18.0

package/index.esm.js

@@ -3933,6 +3933,38 @@ const styledListItemElement = elementType => {
         .dot-icon i:before {
           color: ${theme.palette.figma.icon.black};
         }
+
+        .left-border-with-arrow {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 3px 0;
+          gap: 0;
+
+          .left-border,
+          .left-arrow {
+            width: 3px;
+            background-color: ${({
+    leftBorderAndArrow: color
+  }) => {
+    return color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.figma.typography.disabled; // grey
+  }};
+          }
+
+          .left-border {
+            height: 100%;
+            border-radius: ${theme.spacing(0, 0.5, 0.5, 0)};
+          }
+
+          .left-arrow {
+            height: 6px;
+            clip-path: polygon(0 0, 0 100%, 100% 50%);
+          }
+        }
       }
     `}
   `;
@@ -4059,6 +4091,7 @@ const DotListItem = ({
   onHrefClick,
   onMenuLeave,
   items = [],
+  leftBorderAndArrow,
   menuPlacement,
   nestedDrawerLeftSpacing,
   nestedListType,
@@ -4125,7 +4158,7 @@ const DotListItem = ({
   });
   const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
   return jsxs(Fragment, {
-    children: [jsx(ListItem, {
+    children: [jsxs(ListItem, {
       "aria-label": ariaLabel || tooltip,
       autoFocus: autoFocus,
       classes: {
@@ -4136,13 +4169,21 @@ const DotListItem = ({
       "data-testid": dataTestId,
       divider: divider,
       href: onClick ? null : href,
+      leftBorderAndArrow: leftBorderAndArrow,
       onClick: !isLink ? handleClick : null,
       onKeyDown: onKeyDown,
       role: ariaRole,
       selected: isFlyout ? false : selected,
       tabIndex: isLink ? -1 : 0,
       target: target,
-      children: jsx(DotTooltip, {
+      children: [leftBorderAndArrow && jsxs("div", {
+        className: "left-border-with-arrow",
+        children: [jsx("div", {
+          className: "left-border"
+        }), jsx("div", {
+          className: "left-arrow"
+        })]
+      }), jsx(DotTooltip, {
         "data-testid": `${dataTestId}-tooltip`,
         placement: tooltipPlacement,
         title: tooltip,
@@ -4151,7 +4192,7 @@ const DotListItem = ({
             children: startIcon
           }), renderListItemText(), showEndIcon && renderListItemEndIcon()]
         })
-      })
+      })]
     }), hasChildren && jsx(NestedList, {
       anchorEl: anchorEl,
       ariaLabel: "nested list",
@@ -4280,7 +4321,8 @@ const DotList = ({
         target: item.target,
         text: item.text,
         tooltip: item.tooltip,
-        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
+        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT,
+        leftBorderAndArrow: item.leftBorderAndArrow
       }, item.id || item.text);
     }), children]
   });
@@ -9715,7 +9757,9 @@ const DotMetadataApiProvider = ({
       setAccountIdHeader(accountId);
       return cancelablePromise(DashboardsService.deleteDashboardsService(dashboardId)).then(() => {
         setDashboardsError(null);
-        setDashboards(dashboards.filter(dashboard => dashboard.id !== dashboardId));
+        if (dashboards) {
+          setDashboards(dashboards.filter(dashboard => dashboard.id !== dashboardId));
+        }
         return true;
       }).catch(error => {
         setDashboardsError(error);
@@ -10892,7 +10936,7 @@ function HighImpact({
   const defaultMessage = useMemo(() => jsxs(DotTypography, {
     className: "high-impact-default-content",
     variant: "body1",
-    children: ["This action cannot be undone. This will permanently", ' ', action.toUpperCase(), objectType && ' the ', jsx("span", {
+    children: ["This action cannot be undone. This will permanently", ' ', action.toUpperCase(), objectType ? ' the ' : ' ', jsx("span", {
       className: "item-name",
       children: record
     }), objectType && ` ${objectType}`, ". Some data may be lost."]
@@ -11457,6 +11501,7 @@ const StyledDotMenu = styled(DotMenu)`
 function DotDashboardOptionsMenu({
   dashboard,
   isEdit = false,
+  menuPlacement,
   onStartDelete,
   onStartDuplicate,
   onStartStatusChange,
@@ -11577,6 +11622,16 @@ function DotDashboardOptionsMenu({
       onClick: () => onDetails(dashboard)
     });
   }
+  // useful since most of the screen is generally an iframe
+  const blurHandler = useCallback(() => {
+    setOpen(false);
+  }, []);
+  useEffect(() => {
+    window.addEventListener('blur', blurHandler);
+    return () => {
+      window.removeEventListener('blur', blurHandler);
+    };
+  }, []);
   return menuItems.length > 0 ? jsxs(Fragment, {
     children: [jsx(DotIconButton, {
       className: "expand-button",
@@ -11591,6 +11646,7 @@ function DotDashboardOptionsMenu({
       id: "card-header-action-menu",
       menuItemHeight: "auto",
       menuItems: menuItems,
+      menuPlacement: menuPlacement,
       open: open,
       onLeave: handleMenuClose
     })]
@@ -11777,7 +11833,8 @@ function DotDashboardActions({
     }), dashboardToDelete && jsx(DotImpactDialog, {
       onCancel: handleDeleteClose,
       onSubmit: handleDeleteSubmit,
-      record: dashboardToDelete === null || dashboardToDelete === void 0 ? void 0 : dashboardToDelete.name,
+      record: dashboardToDelete.name,
+      impact: dashboardToDelete.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED ? 'high' : 'medium',
       open: true
     }), jsx(HelpButton, {
       dashboard: dashboard
@@ -11787,6 +11844,7 @@ function DotDashboardActions({
     }), canEdit && jsx(DotDashboardOptionsMenu, {
       dashboard: dashboard,
       isEdit: isEdit,
+      menuPlacement: "bottom-start",
       onViewMode: onViewMode,
       onStartStatusChange: handleStartStatusChangeIfConfig,
       onStartDuplicate: handleStartDuplicateIfConfig,

package/package.json

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

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

@@ -1,12 +1,14 @@
+import { PopperPlacement } from '../../menu/Menu';
 import { DashboardView } from '../metadata-api/openapi';
 interface DashboardOptionsMenuProps {
     dashboard: DashboardView;
     isEdit?: boolean;
+    menuPlacement?: PopperPlacement;
     onDetails?: (dashboard: DashboardView) => void;
     onStartDelete?: (dashboard: DashboardView) => void;
     onStartDuplicate?: (dashboard: DashboardView) => void;
     onStartStatusChange?: (dashboard: DashboardView, status: DashboardView.lifecycle_state) => void;
     onViewMode?: (dashboard: DashboardView, mode: string) => void;
 }
-export declare function DotDashboardOptionsMenu({ dashboard, isEdit, onStartDelete, onStartDuplicate, onStartStatusChange, onViewMode, onDetails, }: DashboardOptionsMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DotDashboardOptionsMenu({ dashboard, isEdit, menuPlacement, onStartDelete, onStartDuplicate, onStartStatusChange, onViewMode, onDetails, }: DashboardOptionsMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/index.d.ts

@@ -15,7 +15,7 @@ export type { ConditionFunction, ControlClickHandler, DisabledConditionFunction,
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps, InputSelectOption, OptionType, } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
-export type { ListItemProps } from './list';
+export type { LeftBorderAndArrowColor, ListItemProps } from './list';
 export type { MenuItemProps } from './menu/Menu';
 export type { RailItem, RailItemsPosition } from './navigation-rail';
 export type { RadioButtonProps } from './radio/RadioButton';

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

@@ -1,2 +1,2 @@
 import { ListItemProps } from './utils/models';
-export declare const DotListItem: ({ ariaLabel, ariaRole, autoFocus, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onKeyDown, onHrefClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotListItem: ({ ariaLabel, ariaRole, autoFocus, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onKeyDown, onHrefClick, onMenuLeave, items, leftBorderAndArrow, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ import { LinkTarget } from '../../link/Link';
 import { TooltipPlacement } from '../../tooltip';
 export declare const DEFAULT_TOOLTIP_PLACEMENT = "top-start";
 export type NestedListType = 'drawer' | 'expandable' | 'menu';
+export type LeftBorderAndArrowColor = 'blue' | 'red' | 'orange' | 'green' | 'grey' | 'purple' | 'yellow';
 export interface ListProps extends CommonProps {
     /** string or JSX element that is displayed inside the list */
     children?: ReactNode;
@@ -44,6 +45,8 @@ export interface ListItemProps extends CommonProps {
     isOpened?: boolean;
     /** If provided, the menu item will display a nested list */
     items?: Array<ListItemProps>;
+    /** If defined, shows border with arrow on the left side of the list element */
+    leftBorderAndArrow?: LeftBorderAndArrowColor;
     /** 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 */