@digital-ai/dot-components 4.0.0 → 4.1.0

package/index.esm.js

@@ -3151,7 +3151,12 @@ const StyledPopper = styled(Popper)`
     &.${rootClassName$1a} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
-      z-index: ${levelSecond};
+
+      /* Conditionally setting popper's 'z-index' */
+      ${({
+  $zIndex
+}) => $zIndex === undefined ? `z-index: ${levelSecond};` : `z-index: ${$zIndex};`}      
+      }
     }
     &.${rootClassName$19}, &.${rootClassName$1a} {
       .MuiPaper-root:not(:empty) {
@@ -6669,6 +6674,7 @@ const DotAutoComplete = ({
   placeholder,
   popperClassName,
   popperPlacement,
+  popperZIndex,
   preserveGroupOrder = false,
   readOnly = false,
   renderGroup,
@@ -6740,7 +6746,8 @@ const DotAutoComplete = ({
     if (!isActionItemDefined) return jsx(StyledPopper, Object.assign({}, props, {
       className: popperClasses,
       disablePortal: disablePortal,
-      "$maxHeight": maxHeight
+      "$maxHeight": maxHeight,
+      "$zIndex": popperZIndex
     }));
     // Disable action if customer explicitly enabled duplicate
     // item insertion and input text is found inside the 'options'
@@ -6763,6 +6770,7 @@ const DotAutoComplete = ({
       className: popperClasses,
       disablePortal: disablePortal,
       "$maxHeight": maxHeight,
+      "$zIndex": popperZIndex,
       placement: popperPlacement,
       children: jsxs(Paper, Object.assign({}, paperProps, {
         children: [paperChildren, jsx("div", {
@@ -11313,6 +11321,9 @@ const StyledAppSelectAutoCompleteOption = styled.li`
     &:focus {
       background: ${theme.palette.grey[500]};
     }
+    .dot-avatar {
+      margin-bottom: 0px;
+    }
   `}
 `;
 
@@ -11468,6 +11479,9 @@ function ActivePublishMessage({
           options: appOptions,
           required: true,
           dense: false,
+          popperPlacement: "auto",
+          popperZIndex: levelTop,
+          disablePortal: false,
           size: "medium",
           renderOption: (props, option) => {
             return jsxs(StyledAppSelectAutoCompleteOption, Object.assign({}, props, {
@@ -11477,7 +11491,7 @@ function ActivePublishMessage({
                 iconId: "file-image",
                 type: "image",
                 variant: "circular",
-                size: "large"
+                size: "medium"
               }), jsx("div", {
                 children: option.title
               })]
@@ -11771,133 +11785,92 @@ function DotDashboardOptionsMenu({
   const menuItems = [];
   if (!isEdit && onViewMode && !dashboard.is_ootb_dashboard && !dashboardLocked) {
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Edit dashboard",
-        color: "inherit",
-        onClick: handleEditClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "edit"
-        }), " Edit"]
+        }),
+        children: "Edit"
       }),
-      key: 'edit',
-      onclick: handleEditClick
+      key: 'edit'
     });
   }
   if (onStartStatusChange && !dashboard.is_ootb_dashboard && isDraft) {
     menuItems.push({
       key: 'publish',
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Publish dashboard",
-        color: "inherit",
+        type: "text",
         "data-testid": `publish-dashboard-button-${dashboard.id}`,
-        onClick: () => {
-          handleMenuClose();
-          onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
-        },
-        underline: "none",
-        children: [jsx(DotIcon, {
+        startIcon: jsx(DotIcon, {
           iconId: "send-airplane"
-        }), " ", 'Publish']
-      }),
-      onclick: () => {
-        handleMenuClose();
-        onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
-      }
+        }),
+        children: "Publish"
+      })
     });
   }
   if (onStartDuplicate) {
-    const handleDuplicateClick = () => {
-      handleMenuClose();
-      onStartDuplicate(dashboard);
-    };
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Duplicate dashboard",
-        color: "inherit",
-        onClick: handleDuplicateClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "duplicate"
-        }), " Duplicate"]
+        }),
+        children: "Duplicate"
       }),
-      key: 'duplicate',
-      onclick: handleDuplicateClick
+      key: 'duplicate'
     });
   }
   if (onStartDelete && !dashboard.is_ootb_dashboard && !dashboardLocked) {
-    const handleDeleteClick = () => {
-      handleMenuClose();
-      onStartDelete(dashboard);
-    };
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Delete dashboard",
-        color: "inherit",
-        onClick: handleDeleteClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "delete"
-        }), " Delete"]
+        }),
+        children: "Delete"
       }),
-      key: 'delete',
-      onclick: handleDeleteClick
+      key: 'delete'
     });
   }
   // If this is a published dashboard, with in-progress changes, and the user is the author of the changes,
   // show the republish, revert, and view original options.
   if (isPublished && currentUser && dashboard.is_being_modified && dashboard.modified_author_id === currentUser.id) {
-    const handlePublishChangesClick = () => {
-      handleMenuClose();
-      onStartStatusChange && onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
-    };
-    const handleRevertChangesClick = () => {
-      handleMenuClose();
-      onStartRevert && onStartRevert(dashboard);
-    };
-    const handleViewOriginalClick = () => {
-      handleMenuClose();
-      // Move to view mode and display the original dashboard without the changes
-      onViewOriginal && onViewOriginal(dashboard);
-    };
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Publish changes",
-        color: "inherit",
-        onClick: handlePublishChangesClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "send-airplane"
-        }), " Publish changes"]
+        }),
+        children: "Publish changes"
       }),
-      key: 'republish',
-      onclick: handlePublishChangesClick
+      key: 'republish'
     });
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Revert to original",
-        color: "inherit",
-        onClick: handleRevertChangesClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "undo"
-        }), " Revert to original"]
+        }),
+        children: "Revert to original"
       }),
-      key: 'revert',
-      onclick: handleRevertChangesClick
+      key: 'revert'
     });
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Open published dashboard",
-        color: "inherit",
-        onClick: handleViewOriginalClick,
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "visibility-on"
-        }), " Open published dashboard"]
+        }),
+        children: "Open published dashboard"
       }),
-      key: 'original',
-      onclick: handleViewOriginalClick
+      key: 'original'
     });
   }
   if (onDetails) {
@@ -11911,18 +11884,16 @@ function DotDashboardOptionsMenu({
       });
     }
     menuItems.push({
-      children: jsxs(DotLink, {
+      children: jsx(DotButton, {
         ariaLabel: "Dashboard details",
-        color: "inherit",
-        onClick: () => onDetails(dashboard),
-        underline: "none",
-        children: [jsx(DotIcon, {
+        type: "text",
+        startIcon: jsx(DotIcon, {
           iconId: "file-lines"
-        }), " Details"]
+        }),
+        children: "Details"
       }),
       classes: 'dashboard-details',
-      key: 'dashboard-details',
-      onClick: () => onDetails(dashboard)
+      key: 'dashboard-details'
     });
   }
   // useful since most of the screen is generally an iframe
@@ -11935,6 +11906,33 @@ function DotDashboardOptionsMenu({
       window.removeEventListener('blur', blurHandler);
     };
   }, []);
+  const handleSelectMenuItem = useCallback((event, menuId, itemKey) => {
+    switch (itemKey) {
+      case 'edit':
+        handleEditClick();
+        break;
+      case 'duplicate':
+        onStartDuplicate(dashboard);
+        break;
+      case 'delete':
+        onStartDelete(dashboard);
+        break;
+      case 'revert':
+        onStartRevert(dashboard);
+        break;
+      case 'original':
+        onViewOriginal(dashboard);
+        break;
+      case 'dashboard-details':
+        onDetails(dashboard);
+        break;
+      case 'republish':
+      case 'publish':
+        onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
+        break;
+    }
+    handleMenuClose();
+  }, [menuItems, handleMenuClose]);
   return menuItems.length > 0 ? jsxs(Fragment, {
     children: [jsx(DotIconButton, {
       className: "expand-button",
@@ -11951,6 +11949,7 @@ function DotDashboardOptionsMenu({
       menuItems: menuItems,
       menuPlacement: menuPlacement,
       open: open,
+      onSelect: handleSelectMenuItem,
       onLeave: handleMenuClose
     })]
   }) : null;

package/package.json

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

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

@@ -2,5 +2,5 @@ export declare const dashboardCategoriesContainerClassName = "dashboard-categori
 export declare const InlineMessage: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
+export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;
 export declare const StyledAppSelectAutoCompleteOption: import("styled-components").StyledComponent<"li", any, {}, never>;

package/src/lib/components/auto-complete/AutoComplete.d.ts

@@ -79,6 +79,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     popperClassName?: string;
     /** Placement of the popper */
     popperPlacement?: PopperPlacementType;
+    /** Custom Z-index of the popper */
+    popperZIndex?: number;
     /** If true, group order (as specified by the consumer) will be preserved. Default group sorting is used when not specified. */
     preserveGroupOrder?: boolean;
     /** If true: popper cannot be opened, TextField is in read only mode, change is not allowed  */
@@ -98,4 +100,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/menu/Menu.styles.d.ts

@@ -13,6 +13,7 @@ export declare const StyledPopper: import("styled-components").StyledComponent<i
 } & import("react").RefAttributes<HTMLDivElement>>, any, StyledPopperArgs, never>;
 interface StyledPopperArgs {
     $maxHeight?: number | string;
+    $zIndex?: number;
 }
 export declare const getListMaxHeight: (maxHeight: string | number) => string;
 export {};