@digital-ai/dot-components 3.11.2 → 3.13.0

package/index.esm.js

@@ -104,12 +104,12 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1i = 'dot-icon';
+const rootClassName$1j = 'dot-icon';
 const StyledIcon = styled(Icon)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1j} {
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
@@ -146,7 +146,7 @@ const DotIcon = ({
   iconId,
   tooltip
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
   return jsx(DotTooltip, {
     title: tooltip,
     children: jsx(StyledIcon, {
@@ -207,7 +207,7 @@ const DotTypography = ({
   });
 };
 
-const rootClassName$1h = 'dot-accordion';
+const rootClassName$1i = 'dot-accordion';
 const summaryClassName = 'dot-accordion-summary';
 const detailClassName = 'dot-accordion-details';
 const StyledAccordion = styled(Accordion)`
@@ -218,7 +218,7 @@ const StyledAccordion = styled(Accordion)`
       background: ${theme.palette.figma.background.level1.white};
     }
 
-    &.${rootClassName$1h} .${summaryClassName} {
+    &.${rootClassName$1i} .${summaryClassName} {
       align-items: center;
       background: ${theme.palette.figma.background.level1.white};
       color: ${theme.palette.figma.typography.black};
@@ -263,7 +263,7 @@ const DotAccordion = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1h,
+  'data-pendoid': dataPendoId = rootClassName$1i,
   'data-testid': dataTestId = 'dot-accordion',
   disabled = false,
   expanded,
@@ -274,7 +274,7 @@ const DotAccordion = ({
   summary,
   noWrap = true
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1h, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
   const [elevation, setElevation] = useState();
   useEffect(() => {
     if (onChange && expanded === undefined) {
@@ -390,7 +390,7 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1g = 'dot-text-field';
+const rootClassName$1h = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
@@ -438,7 +438,7 @@ const StyledTextField = styled(TextField)`
   theme,
   InputProps
 }) => css`
-    &.${rootClassName$1g} {
+    &.${rootClassName$1h} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -482,7 +482,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1g} {
+    &.${rootSelectClassName}, &.${rootClassName$1h} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -573,15 +573,15 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
-const rootClassName$1f = 'dot-action-toolbar';
+const rootClassName$1g = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1f} {
+    &.${rootClassName$1g} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1g} .MuiInputBase-root {
+      .${rootClassName$1h} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -595,7 +595,7 @@ const DotActionToolbar = ({
   'data-testid': dataTestId,
   variant = 'dense'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1f, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1g, className);
   return jsx(StyledToolbar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -1665,12 +1665,12 @@ const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
 const checkIfArrowUpPressed = event => event.key === 'ArrowUp';
 const checkIfArrowDownPressed = event => event.key === 'ArrowDown';
 
-const rootClassName$1e = 'dot-alert-banner';
+const rootClassName$1f = 'dot-alert-banner';
 const StyledAlertBanner = styled(Alert)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1e} {
+    &.${rootClassName$1f} {
       align-items: center;
       box-sizing: border-box;
       min-height: 48px;
@@ -1705,7 +1705,7 @@ const DotAlertBanner = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1e,
+  'data-pendoid': dataPendoId = rootClassName$1f,
   'data-testid': dataTestId,
   onClose,
   roundedCorners = true,
@@ -1713,7 +1713,7 @@ const DotAlertBanner = ({
   textVariant = 'body1',
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1e, severity, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1f, severity, className);
   /* For simple string use default component, for everything else use 'div' */
   const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
@@ -2391,7 +2391,7 @@ const useDotCoreApiContext = () => {
   return useContext(DotCoreApiContext);
 };
 
-const rootClassName$1d = 'dot-avatar';
+const rootClassName$1e = 'dot-avatar';
 const avatarSpacing = {
   small: 3,
   medium: 5,
@@ -2401,7 +2401,7 @@ const StyledAvatar = styled(Avatar)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1d} {
+    &.${rootClassName$1e} {
       display: inline-flex;
       background-color: ${({
   color
@@ -2513,7 +2513,7 @@ const DotAvatar = ({
   variant = 'circular',
   style
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1e, className);
   const getAvatarColor = () => {
     if ((style === null || style === void 0 ? void 0 : style.color) !== undefined) return 'inherit';
     if (color) return color;
@@ -2552,12 +2552,12 @@ const DotAvatar = ({
   });
 };
 
-const rootClassName$1c = 'dot-button';
+const rootClassName$1d = 'dot-button';
 const StyledButton = styled(Button)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$1c} {
+    &.${rootClassName$1d} {
       background-color: ${theme.palette.figma.primary.normal};
       margin: ${theme.spacing(0.5)};
       padding: ${theme.spacing(0.75, 2)};
@@ -2641,7 +2641,7 @@ const DotButton = forwardRef(({
   autoFocus = false,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$1c,
+  'data-pendoid': dataPendoId = rootClassName$1d,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -2657,7 +2657,7 @@ const DotButton = forwardRef(({
   tooltipPlacement,
   type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1d, className);
   let color;
   let variant;
   switch (type) {
@@ -2681,7 +2681,7 @@ const DotButton = forwardRef(({
   return jsx(DotTooltip, {
     placement: tooltipPlacement,
     title: tooltip,
-    "data-testid": `${dataTestId || rootClassName$1c}-tooltip`,
+    "data-testid": `${dataTestId || rootClassName$1d}-tooltip`,
     children: jsx(StyledButton, {
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
@@ -2690,7 +2690,7 @@ const DotButton = forwardRef(({
       },
       color: color,
       "data-pendoid": dataPendoId,
-      "data-testid": dataTestId || rootClassName$1c,
+      "data-testid": dataTestId || rootClassName$1d,
       disableRipple: disableRipple,
       disabled: disabled,
       endIcon: endIcon,
@@ -2709,10 +2709,10 @@ const DotButton = forwardRef(({
   });
 });
 
-const rootClassName$1b = 'dot-link';
+const rootClassName$1c = 'dot-link';
 const StyledLink = styled(Link)`
   ${() => css`
-    &.${rootClassName$1b} {
+    &.${rootClassName$1c} {
       cursor: pointer;
 
       &:hover.MuiLink-underlineHover {
@@ -2728,7 +2728,7 @@ const DotLink = ({
   children,
   className,
   color = 'primary',
-  'data-pendoid': dataPendoId = rootClassName$1b,
+  'data-pendoid': dataPendoId = rootClassName$1c,
   'data-testid': dataTestId,
   href,
   onClick,
@@ -2740,7 +2740,7 @@ const DotLink = ({
   tooltip,
   underline = 'always'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
     if (!isString$2(children) && !ariaLabel) {
@@ -2790,7 +2790,7 @@ const CreateUUID = () => {
   });
 };
 
-const rootClassName$1a = 'dot-list';
+const rootClassName$1b = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
 const nestedDrawerClassName = 'dot-nested-drawer';
@@ -2798,7 +2798,7 @@ const StyledList = styled(List)`
   ${({
   theme
 }) => css`
-      &.${rootClassName$1a} {
+      &.${rootClassName$1b} {
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
@@ -2810,13 +2810,13 @@ const StyledList = styled(List)`
         }
 
         .MuiCollapse-root {
-          padding-top: ${theme.spacing(1)};
-          margin-bottom: ${theme.spacing(-1)};
+          &.${nestedListClassName} .${listItemRootClass} {
+            padding-left: ${theme.spacing(6)};
+            padding-right: ${theme.spacing(2)};
+          }
 
           .MuiCollapse-wrapper {
-            margin: ${theme.spacing(0, 2)};
             overflow: hidden;
-            width: calc(100% - ${theme.spacing(4)});
           }
 
           .MuiListSubheader-root .MuiTypography-root {
@@ -2881,12 +2881,12 @@ const DotListDivider = ({
   });
 };
 
-const rootClassName$19 = 'dot-progress';
+const rootClassName$1a = 'dot-progress';
 const StyledProgress = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$19} {
+    &.${rootClassName$1a} {
       line-height: 0;
 
       .dot-progress-with-label-wrapper {
@@ -2937,7 +2937,7 @@ const DotProgress = ({
   value,
   variant = 'indeterminate'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
   useEffect(() => {
     if (!ariaLabel) {
       console.warn('a11y: DotProgress must have an ariaLabel to describe the progress component');
@@ -3003,34 +3003,112 @@ var variables = /*#__PURE__*/Object.freeze({
   levelTop: levelTop
 });
 
-const rootClassName$18 = 'dot-popper';
+const rootClassName$19 = 'dot-popper';
+const arrowClassName = 'MuiPopper-arrow';
 const StyledPopper$1 = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
+
+      &[data-popper-placement='top'],
+      &[data-popper-placement='top-start'],
+      &[data-popper-placement='top-end'] {
+        .${arrowClassName} {
+          bottom: 0;
+          left: 0;
+          margin-bottom: -10px;
+          &::before {
+            transform-origin: 100% 0;
+          }
+        }
+      }
+
+      &[data-popper-placement='right'],
+      &[data-popper-placement='right-start'],
+      &[data-popper-placement='right-end'] {
+        .${arrowClassName} {
+          left: 0;
+          margin-left: -10px;
+          height: 14px;
+          width: 10px;
+          &::before {
+            transform-origin: 100% 100%;
+          }
+        }
+      }
+
+      &[data-popper-placement='bottom'],
+      &[data-popper-placement='bottom-start'],
+      &[data-popper-placement='bottom-end'] {
+        .${arrowClassName} {
+          top: 0;
+          left: 0;
+          margin-top: -10px;
+          &::before {
+            transform-origin: 0 100%;
+          }
+        }
+      }
+
+      &[data-popper-placement='left'],
+      &[data-popper-placement='left-start'],
+      &[data-popper-placement='left-end'] {
+        .${arrowClassName} {
+          right: 0;
+          margin-right: -10px;
+          height: 14px;
+          width: 10px;
+          &::before {
+            transform-origin: 0 0;
+          }
+        }
+      }
     }
 
-    &.${rootClassName$18}, &.${rootClassName$18} > .dot-popper-paper {
+    &.${rootClassName$19}, &.${rootClassName$19} > .dot-popper-paper {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
 `;
+const StyledArrow = styled('span')`
+  ${({
+  theme
+}) => css`
+    &.${arrowClassName} {
+      overflow: hidden;
+      position: absolute;
+      width: 14px;
+      height: 10px;
+      box-sizing: border-box;
+      &::before {
+        content: '';
+        margin: auto;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: ${theme.palette.figma.background.level1.white};
+        box-shadow: ${theme.shadows[1]};
+        transform: rotate(45deg);
+      }
+    }
+  `}
+`;
 
 const flyoutMenuClassName = 'dot-flyout-menu';
-const rootClassName$17 = 'dot-menu';
+const rootClassName$18 = 'dot-menu';
 const StyledPopper = styled(Popper)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$18} {
+    &.${rootClassName$19} {
       font-family: ${theme.typography.fontFamily};
       font-size: ${theme.typography.body1.fontSize}px;
       z-index: ${levelSecond};
     }
-    &.${rootClassName$17}, &.${rootClassName$18} {
+    &.${rootClassName$18}, &.${rootClassName$19} {
       .MuiPaper-root {
         border: 1px solid ${theme.palette.layer.n100};
       }
@@ -3110,14 +3188,14 @@ const MENU_ITEM_HEIGHT_NORMAL = 48;
 const MENU_ITEM_HEIGHT_DENSE = 36;
 const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 
-const rootClassName$16 = 'dot-ul';
+const rootClassName$17 = 'dot-ul';
 const listItemClassName$1 = 'dot-li';
 const listItemWithSubmenuClassName = 'dot-li-with-submenu';
 const StyledMenuList = styled(MenuList)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$16} {
+    &.${rootClassName$17} {
       background: ${theme.palette.figma.background.level1.white};
 
       .dot-li {
@@ -3213,7 +3291,7 @@ const DotMenuList = forwardRef(({
   onSubMenuCreate,
   selectedKey
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$17, className);
   const [activeSubmenu, setActiveSubmenu] = useState(null);
   const [subItemAnchorEl, setSubItemAnchorEl] = useState(null);
   const openSubmenu = (target, itemKey) => {
@@ -3324,7 +3402,7 @@ const DotMenu = ({
   open = false,
   selectedKey
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$17, className, loading ? 'loading' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$18, className, loading ? 'loading' : '');
   const isSubmenu = checkIfSubmenu(anchorEl);
   const hasSubItems = checkForSubItems(menuItems);
   // Timeout object is customizable when Menu component is either submenu
@@ -3412,12 +3490,12 @@ const DotMenu = ({
   });
 };
 
-const rootClassName$15 = 'dot-drawer';
+const rootClassName$16 = 'dot-drawer';
 const StyledDrawer = styled(Drawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$15} .MuiBackdrop-root {
+    &.${rootClassName$16} .MuiBackdrop-root {
       background-color: ${theme.palette.figma.overlay.default};
     }
 
@@ -3436,12 +3514,12 @@ const StyledDrawer = styled(Drawer)`
   `}
 `;
 
-const rootClassName$14 = 'dot-drawer-header';
+const rootClassName$15 = 'dot-drawer-header';
 const StyleDrawerHeader = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$14} {
+    &.${rootClassName$15} {
       padding: ${theme.spacing(0, 0, 2)};
       display: flex;
       align-items: center;
@@ -3452,13 +3530,13 @@ const StyleDrawerHeader = styled.div`
   `}
 `;
 
-const rootClassName$13 = 'dot-icon-btn';
+const rootClassName$14 = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton)`
   ${({
   theme,
   color
 }) => css`
-    &.${rootClassName$13} {
+    &.${rootClassName$14} {
       ${color === 'inherit' ? css`
               color: inherit;
             ` : ''}
@@ -3517,7 +3595,7 @@ const DotIconButton = ({
   ariaRole = 'button',
   className,
   color = 'inherit',
-  'data-pendoid': dataPendoId = rootClassName$13,
+  'data-pendoid': dataPendoId = rootClassName$14,
   'data-testid': dataTestId,
   disableRipple = false,
   disabled = false,
@@ -3530,7 +3608,7 @@ const DotIconButton = ({
   tooltipPlacement
 }) => {
   const rippleClassName = disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$13, rippleClassName, `shape-${shape}`, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$14, rippleClassName, `shape-${shape}`, className);
   return jsx(DotTooltip, {
     "data-testid": "icon-button-tooltip",
     placement: tooltipPlacement,
@@ -3565,7 +3643,7 @@ const DotDrawerHeader = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$14, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
   return jsxs(StyleDrawerHeader, {
     "aria-label": ariaLabel,
     "aria-level": 2,
@@ -3582,10 +3660,10 @@ const DotDrawerHeader = ({
   });
 };
 
-const rootClassName$12 = 'dot-drawer-body';
+const rootClassName$13 = 'dot-drawer-body';
 const StyleDrawerBody = styled.div`
   ${() => css`
-    &.${rootClassName$12} {
+    &.${rootClassName$13} {
       display: flex;
       .dot-drawer-close-button {
         align-self: self-start;
@@ -3606,7 +3684,7 @@ const DotDrawerBody = ({
   onClose,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   return jsxs(StyleDrawerBody, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3621,12 +3699,12 @@ const DotDrawerBody = ({
   });
 };
 
-const rootClassName$11 = 'dot-drawer-footer';
+const rootClassName$12 = 'dot-drawer-footer';
 const StyleDrawerFooter = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$11} {
+    &.${rootClassName$12} {
       padding: ${theme.spacing(2, 0, 0)};
     }
   `}
@@ -3639,7 +3717,7 @@ const DotDrawerFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$11, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$12, className);
   return jsx(StyleDrawerFooter, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -3655,7 +3733,7 @@ const DotDrawer = ({
   ariaRole = 'dialog',
   className,
   children,
-  'data-pendoid': dataPendoId = rootClassName$15,
+  'data-pendoid': dataPendoId = rootClassName$16,
   'data-testid': dataTestId,
   drawerBodyProps,
   drawerFooterProps,
@@ -3678,7 +3756,7 @@ const DotDrawer = ({
       onClose(event);
     }
   };
-  const rootClasses = useStylesWithRootClass(rootClassName$15, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$16, className);
   const backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyPendoId = drawerBodyProps ? drawerBodyProps['data-pendoid'] : 'drawer-body';
@@ -4073,12 +4151,14 @@ const DotList = ({
   items = [],
   menuPlacement = 'right-start',
   nestedDrawerLeftSpacing = 240,
+  nestedListCloseOnClickAway = true,
   nestedListType = 'expandable',
   width = 240
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1a, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1b, className);
   const listWidth = typeof width === 'number' ? `${width}px` : width;
   const listRef = useRef();
+  const disableCloseOnClickAway = !nestedListCloseOnClickAway && nestedListType === 'expandable';
   const [listItemIndex, setListItemIndex] = useState(null);
   const updateSelectedListItem = currentIndex => {
     currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
@@ -4089,93 +4169,94 @@ const DotList = ({
   const handleHrefClick = index => () => {
     updateSelectedListItem(index);
   };
-  return jsx(DotClickAwayListener, {
-    onClickAway: handleClickAway,
-    children: jsxs(StyledList, {
-      "aria-label": ariaLabel,
-      classes: {
-        root: rootClasses
-      },
-      component: component,
-      "data-testid": dataTestId,
-      dense: dense,
-      disablePadding: disablePadding,
-      ref: listRef,
-      role: ariaRole,
-      style: {
-        width: listWidth
-      },
-      children: [items.map((item, index) => {
+  const list = jsxs(StyledList, {
+    "aria-label": ariaLabel,
+    classes: {
+      root: rootClasses
+    },
+    component: component,
+    "data-testid": dataTestId,
+    dense: dense,
+    disablePadding: disablePadding,
+    ref: listRef,
+    role: ariaRole,
+    style: {
+      width: listWidth
+    },
+    children: [items.map((item, index) => {
+      var _a;
+      const handleListItemClick = e => {
         var _a;
-        const handleListItemClick = e => {
-          var _a;
-          const target = e.target;
-          e.stopPropagation();
-          (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-          // If clicking on a nested list item, don't update the selected index
-          // Do nothing if clicking on the drawer itself
-          if (shouldToggleOpen(target.className)) {
-            updateSelectedListItem(index);
-          }
-        };
-        const determineOnClick = item.onClick || ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? handleListItemClick : null;
-        const handleMenuLeave = event => {
-          // TODO: Need to apply animation to open/close
-          var _a, _b;
-          // Remove index only if clicked element is not found within the list
-          if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            setListItemIndex(null);
-            (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
-          }
-        };
-        if (item.child) {
-          return jsx("div", {
-            onClick: item.onClick,
-            role: "listitem",
-            children: item.child
-          }, `item-child-${item.id || CreateUUID()}`);
+        const target = e.target;
+        e.stopPropagation();
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+        // If clicking on a nested list item, don't update the selected index
+        // Do nothing if clicking on the drawer itself
+        if (shouldToggleOpen(target.className)) {
+          updateSelectedListItem(index);
         }
-        if (item.divider) {
-          return jsx(DotListDivider, {
-            index: index,
-            item: item
-          }, `divider-${item.id || CreateUUID()}`);
+      };
+      const determineOnClick = item.onClick || ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? handleListItemClick : null;
+      const handleMenuLeave = event => {
+        // TODO: Need to apply animation to open/close
+        var _a, _b;
+        // Remove index only if clicked element is not found within the list
+        if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+          setListItemIndex(null);
+          (_b = item.onMenuLeave) === null || _b === void 0 ? void 0 : _b.call(item, event);
         }
-        return jsx(DotListItem, {
-          ariaLabel: item.text || item.primaryText,
-          className: item.className,
-          component: item.component,
-          "data-testid": `${dataTestId}-item-${index}`,
-          endIcon: item.endIcon,
-          href: item.href,
-          isOpened: listItemIndex === index,
-          items: item.items,
-          menuPlacement: menuPlacement,
-          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-          nestedListType: nestedListType,
-          onClick: determineOnClick,
-          onHrefClick: item.href ? handleHrefClick(index) : undefined,
-          onMenuLeave: handleMenuLeave,
-          primaryText: item.primaryText,
-          secondaryText: item.secondaryText,
-          selected: item.selected,
-          startIcon: item.startIcon,
-          target: item.target,
-          text: item.text,
-          tooltip: item.tooltip,
-          tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
-        }, item.id || item.text);
-      }), children]
-    })
+      };
+      if (item.child) {
+        return jsx("div", {
+          onClick: item.onClick,
+          role: "listitem",
+          children: item.child
+        }, `item-child-${item.id || CreateUUID()}`);
+      }
+      if (item.divider) {
+        return jsx(DotListDivider, {
+          index: index,
+          item: item
+        }, `divider-${item.id || CreateUUID()}`);
+      }
+      return jsx(DotListItem, {
+        ariaLabel: item.text || item.primaryText,
+        className: item.className,
+        component: item.component,
+        "data-testid": `${dataTestId}-item-${index}`,
+        endIcon: item.endIcon,
+        href: item.href,
+        isOpened: item.isOpened ? item.isOpened : listItemIndex === index,
+        items: item.items,
+        menuPlacement: menuPlacement,
+        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+        nestedListType: nestedListType,
+        onClick: determineOnClick,
+        onHrefClick: item.href ? handleHrefClick(index) : undefined,
+        onMenuLeave: handleMenuLeave,
+        primaryText: item.primaryText,
+        secondaryText: item.secondaryText,
+        selected: item.selected,
+        startIcon: item.startIcon,
+        target: item.target,
+        text: item.text,
+        tooltip: item.tooltip,
+        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
+      }, item.id || item.text);
+    }), children]
+  });
+  return disableCloseOnClickAway ? list : jsx(DotClickAwayListener, {
+    onClickAway: handleClickAway,
+    children: list
   });
 };
 
-const rootClassName$10 = 'dot-copy-button';
+const rootClassName$11 = 'dot-copy-button';
 const StyledCopyButton = styled.span`
   ${({
   theme
 }) => css`
-    &.${rootClassName$10} .copied-to-clipboard {
+    &.${rootClassName$11} .copied-to-clipboard {
       color: ${theme.palette.figma.success.normal};
 
       &.MuiIcon-fontSizeSmall.button-size-small {
@@ -4201,7 +4282,7 @@ const DotCopyButton = ({
   color = 'inherit',
   copiedTooltip = 'Copied!',
   copyTooltip = 'Copy to clipboard',
-  'data-pendoid': dataPendoId = rootClassName$10,
+  'data-pendoid': dataPendoId = rootClassName$11,
   'data-testid': dataTestId = 'dot-copy-button',
   disabled = false,
   disableRipple = false,
@@ -4249,7 +4330,7 @@ const DotCopyButton = ({
     return false;
   }, [value, showCopiedIcon, disabled, onClick]);
   return jsxs(StyledCopyButton, {
-    className: rootClassName$10,
+    className: rootClassName$11,
     "data-testid": dataTestId,
     children: [!timedShowCopiedIcon && jsx(DotIconButton, {
       ariaLabel: ariaLabel,
@@ -4338,7 +4419,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1g,
+  'data-pendoid': dataPendoId = rootClassName$1h,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4384,7 +4465,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1g, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1h, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4520,10 +4601,10 @@ const DotInputText = ({
   });
 };
 
-const rootClassName$$ = 'dot-search-input';
+const rootClassName$10 = 'dot-search-input';
 const StyledSearchInput = styled.span`
   ${() => css`
-    &.${rootClassName$$} {
+    &.${rootClassName$10} {
     }
   `}
 `;
@@ -4540,7 +4621,7 @@ function SearchInput({
   tooltip = null,
   value
 }) {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$10, className);
   const [searchText, setSearchText] = useState(value);
   let previousSearchText = '';
   const handleChange = useCallback(event => {
@@ -4796,12 +4877,12 @@ const recentAppInstancesSetter = (latestInstance, maxRecentItems
   };
 };
 
-const rootClassName$_ = 'dot-app-switcher';
+const rootClassName$$ = 'dot-app-switcher';
 const StyledAppSwitcher = styled(DotDrawer)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$_} {
+    &.${rootClassName$$} {
       .dot-drawer-paper {
         padding: 0;
         width: 382px;
@@ -4911,7 +4992,7 @@ const DotAppSwitcherView = ({
   if (dotCoreApiContext !== null) {
     setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
   }
-  const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
   const [appTypeMap, setAppTypeMap] = useState();
   const [appTypeLabels, setAppTypeLabels] = useState();
   const [appTypeMenuItems, setAppTypeMenuItems] = useState();
@@ -5289,12 +5370,12 @@ var SvgLogoDigitalAiWhite = function SvgLogoDigitalAiWhite(_ref, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgLogoDigitalAiWhite);
 
-const rootClassName$Z = 'dot-sidebar';
+const rootClassName$_ = 'dot-sidebar';
 const StyledSidebar = styled.aside`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Z} {
+    &.${rootClassName$_} {
       align-items: stretch;
       background: ${theme.palette.figma.background.level1.white};
       border-width: 0 1px;
@@ -5588,10 +5669,10 @@ const StyledSidebar = styled.aside`
   `}
 `;
 
-const rootClassName$Y = 'dot-truncate-with-tooltip';
+const rootClassName$Z = 'dot-truncate-with-tooltip';
 const StyledTruncateWithTooltip = styled(Tooltip)`
   ${() => css`
-    &.${rootClassName$Y} {
+    &.${rootClassName$Z} {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -5622,7 +5703,7 @@ const DotTruncateWithTooltip = ({
   label,
   width
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Y, className, charactersLimit ? 'dot-characters-limit' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$Z, className, charactersLimit ? 'dot-characters-limit' : '');
   return jsx(StyledTruncateWithTooltip, {
     "aria-label": ariaLabel,
     arrow: arrow,
@@ -5746,7 +5827,7 @@ const DotSidebar = ({
     };
   }, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
-  const rootClasses = useStylesWithRootClass(rootClassName$Z, openClass, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$_, openClass, className);
   return jsxs(StyledSidebar, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -5802,7 +5883,7 @@ const DotSidebar = ({
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
           "data-testid": "toggle-nav",
-          iconId: isOpen ? 'collapse' : 'expand',
+          iconId: isOpen ? 'push-left' : 'push-right',
           iconSize: "small",
           onClick: toggleNavCollapseState,
           size: "small"
@@ -5814,12 +5895,12 @@ const DotSidebar = ({
   });
 };
 
-const rootClassName$X = 'dot-badge';
+const rootClassName$Y = 'dot-badge';
 const StyledBadge = styled(Badge)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$X} {
+    &.${rootClassName$Y} {
       color: ${theme.palette.figma.typography.black};
       word-break: normal;
 
@@ -5854,7 +5935,7 @@ const DotBadge = ({
   overlap,
   variant = 'dot'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$X, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Y, className);
   return jsx(StyledBadge, {
     "$badgeColor": badgeColor,
     anchorOrigin: {
@@ -5876,7 +5957,7 @@ const DotBadge = ({
   });
 };
 
-const rootClassName$W = 'dot-app-toolbar';
+const rootClassName$X = 'dot-app-toolbar';
 const denseClassName = 'dense';
 const StyledMainMenu = styled(DotDrawer)`
   ${({
@@ -5916,7 +5997,7 @@ const StyledAppToolbar = styled.header`
   ${({
   theme
 }) => css`
-    &.${rootClassName$W} {
+    &.${rootClassName$X} {
       align-items: center;
       background: ${theme.palette.figma.appToolbar.background};
       border-bottom: 4px solid ${theme.palette.figma.border.default};
@@ -6038,7 +6119,7 @@ const DotAppToolbar = ({
   const displayAppLogo = appLogo || appLogoSmall;
   const mainMenuRef = useRef(null);
   const denseClass = dense ? denseClassName : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$W, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
+  const rootClasses = useStylesWithRootClass(rootClassName$X, className, denseClass, showMainMenu ? '' : 'without-menu-icon');
   const mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   const targetBreakpoint = useMediaQuery(theme => theme.breakpoints.up('lg'));
   useEffect(() => {
@@ -6168,14 +6249,14 @@ const DotAppToolbar = ({
   }) : appToolbar;
 };
 
-const rootClassName$V = 'dot-autocomplete';
+const rootClassName$W = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$V} {
+    &.${rootClassName$W} {
       &.${inputMediumClassName} .dot-text-field .${inputRootClassName} {
         height: 56px;
         padding-left: ${theme.spacing(2)};
@@ -6212,12 +6293,12 @@ const StyledAutocomplete = styled(Autocomplete)`
   `}
 `;
 
-const rootClassName$U = 'dot-chip';
+const rootClassName$V = 'dot-chip';
 const StyledChip = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$U} {
+    &.${rootClassName$V} {
       background: ${theme.palette.figma.neutral.normal};
       border-color: ${theme.palette.figma.border.darker};
       color: ${theme.palette.figma.typography.black};
@@ -6323,7 +6404,7 @@ const DotChip = ({
   charactersLimit = DEFAULT_CHARACTERS_LIMIT,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$U,
+  'data-pendoid': dataPendoId = rootClassName$V,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -6336,7 +6417,7 @@ const DotChip = ({
   tabIndex
 }) => {
   const errorClass = error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$U, className, errorClass);
+  const rootClasses = useStylesWithRootClass(rootClassName$V, className, errorClass);
   const getChipLabel = () => {
     if (charactersLimit <= 0 || children.length < charactersLimit) return children;
     const label = `${children.substring(0, charactersLimit)}...`;
@@ -6436,7 +6517,7 @@ const DotAutoComplete = ({
   autoFocus,
   autoHighlight,
   className,
-  'data-pendoid': dataPendoId = rootClassName$V,
+  'data-pendoid': dataPendoId = rootClassName$W,
   'data-testid': dataTestId,
   defaultValue,
   dense = true,
@@ -6468,6 +6549,7 @@ const DotAutoComplete = ({
   persistentLabel,
   placeholder,
   popperClassName,
+  preserveGroupOrder = false,
   readOnly = false,
   renderGroup,
   renderOption,
@@ -6488,10 +6570,10 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(rootClassName$V, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1g, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const rootClasses = useStylesWithRootClass(rootClassName$W, size === 'medium' && inputMediumClassName, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1h, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
-  const popperClasses = useStylesWithRootClass(rootClassName$18, popperClassName);
+  const popperClasses = useStylesWithRootClass(rootClassName$19, popperClassName);
   let highlightedOption = null;
   let textFieldInput;
   const textFieldRef = element => {
@@ -6517,11 +6599,12 @@ const DotAutoComplete = ({
     setShowPlaceholder(parseAutoCompleteValue(val) === '');
   };
   const sortOptions = () => {
-    return group ? options.sort((a, b) => {
+    if (!group || preserveGroupOrder) return options;
+    return options.sort((a, b) => {
       const aGroup = a.group ? a.group : '';
       const bGroup = b.group ? b.group : '';
       return -bGroup.localeCompare(aGroup);
-    }) : options;
+    });
   };
   const handleBlur = event => {
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
@@ -6768,10 +6851,10 @@ const DotAutoComplete = ({
   });
 };
 
-const rootClassName$T = 'dot-avatar-group';
+const rootClassName$U = 'dot-avatar-group';
 const StyledAvatarGroup = styled(AvatarGroup)`
   ${() => css`
-      &.${rootClassName$T} {
+      &.${rootClassName$U} {
         justify-content: flex-end;
 
         .MuiAvatar-root {
@@ -6790,7 +6873,7 @@ const DotAvatarGroup = ({
   max = 3,
   spacing = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$T, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$U, className);
   return jsx(StyledAvatarGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -6805,13 +6888,13 @@ const DotAvatarGroup = ({
   });
 };
 
-const rootClassName$S = 'dot-breadcrumbs';
+const rootClassName$T = 'dot-breadcrumbs';
 const breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
 const StyledBreadcrumbsWrapper = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       overflow: hidden;
 
       .dot-breadcrumbs-menu {
@@ -6831,7 +6914,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$S} {
+    &.${rootClassName$T} {
       margin-bottom: 0;
 
       .MuiBreadcrumbs-ol {
@@ -7159,7 +7242,7 @@ const DotBreadcrumbs = ({
     children: [jsx(StyledBreadcrumbs, {
       "aria-label": "breadcrumb",
       classes: {
-        root: rootClassName$S,
+        root: rootClassName$T,
         ol: 'dot-ol',
         li: 'dot-li'
       },
@@ -7190,14 +7273,14 @@ const DotBreadcrumbs = ({
   });
 };
 
-const rootClassName$R = 'dot-button-toggle';
+const rootClassName$S = 'dot-button-toggle';
 // TODO: need to update ripple color
 // https://github.com/mui/material-ui/issues/28543
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$R} {
+    &.${rootClassName$S} {
       button:not(.MuiToggleButton-sizeLarge):not(.MuiToggleButton-sizeSmall) {
         /* Override height for medium size */
         height: ${theme.spacing(5)};
@@ -7313,7 +7396,7 @@ const DotButtonToggle = ({
   buttonOptions,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$R,
+  'data-pendoid': dataPendoId = rootClassName$S,
   'data-testid': dataTestId = 'dot-toggle',
   disableFocusRipple = false,
   disableRipple = false,
@@ -7323,7 +7406,7 @@ const DotButtonToggle = ({
   size = 'medium',
   value
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, className);
   const renderToggleButton = ({
     ariaLabel: optionAriaLabel,
     badgeContent: optionBadgeContent,
@@ -7406,12 +7489,12 @@ const TooltipToggleButton = forwardRef((_a, ref) => {
   }));
 });
 
-const rootClassName$Q = 'dot-card';
+const rootClassName$R = 'dot-card';
 const StyledCard = styled(Card)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$Q} {
+    &.${rootClassName$R} {
       background-color: ${theme.palette.figma.background.level1.white};
     }
   `}
@@ -7423,7 +7506,7 @@ const DotCard = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$R, className);
   return jsx(StyledCard, {
     "aria-label": ariaLabel,
     classes: {
@@ -7452,12 +7535,12 @@ const DotCardContent = ({
   });
 };
 
-const rootClassName$P = 'dot-card-footer';
+const rootClassName$Q = 'dot-card-footer';
 const StyledDiv = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$P} {
+    &.${rootClassName$Q} {
       padding: ${theme.spacing(2)};
     }
   `}
@@ -7469,7 +7552,7 @@ const DotCardFooter = ({
   className,
   'data-testid': dataTestId
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$Q, className);
   return jsx(StyledDiv, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -7478,6 +7561,23 @@ const DotCardFooter = ({
   });
 };
 
+const rootClassName$P = 'dot-card-header';
+const StyledCardHeader = styled(CardHeader)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$P} {
+      .MuiCardHeader-content {
+        overflow-x: hidden;
+
+        .dot-card-subheader {
+          color: ${theme.palette.figma.typography.gray};
+        }
+      }
+    }
+  `}
+`;
+
 const DotCardHeader = ({
   action,
   ariaLabel,
@@ -7489,16 +7589,11 @@ const DotCardHeader = ({
   title,
   titleSize = 'large'
 }) => {
-  const rootClasses = useStylesWithRootClass('dot-card-header', className);
-  const titleVariant = titleSize === 'small' ? 'h4' : titleSize === 'medium' ? 'h3' : 'h2';
-  const titleTypographyProps = {
-    variant: titleVariant
-  };
+  const rootClasses = useStylesWithRootClass(rootClassName$P, className);
+  const nonSmallTitleSize = titleSize === 'medium' ? 'h3' : 'h2';
+  const titleVariant = titleSize === 'small' ? 'h4' : nonSmallTitleSize;
   const subheaderVariant = subheaderSize === 'small' ? 'body2' : 'body1';
-  const subheaderTypographyProps = {
-    variant: subheaderVariant
-  };
-  return jsx(CardHeader, {
+  return jsx(StyledCardHeader, {
     action: action,
     "aria-label": ariaLabel,
     avatar: avatar,
@@ -7506,10 +7601,26 @@ const DotCardHeader = ({
       root: rootClasses
     },
     "data-testid": dataTestId,
-    subheader: subheader,
-    subheaderTypographyProps: subheaderTypographyProps,
-    title: title,
-    titleTypographyProps: titleTypographyProps
+    subheader: jsx(DotTooltip, {
+      hoverVisibility: "overflow",
+      title: subheader,
+      children: jsx(DotTypography, {
+        className: "dot-card-subheader",
+        children: subheader,
+        noWrap: true,
+        variant: subheaderVariant
+      })
+    }),
+    title: jsx(DotTooltip, {
+      hoverVisibility: "overflow",
+      title: title,
+      children: jsx(DotTypography, {
+        className: "dot-card-header-title",
+        children: title,
+        noWrap: true,
+        variant: titleVariant
+      })
+    })
   });
 };
 
@@ -8806,49 +8917,6 @@ function request(options) {
   });
 }
 
-class CategoriesService {
-  /**
-   * Get a list of Categories by Application type.
-   * Return a list of Categories by Application type.
-   * @returns AllCategoriesResponse OK
-   * @returns Error Default error response
-   * @throws ApiError
-   */
-  static getCategoriesService() {
-    return __awaiter(this, void 0, void 0, function* () {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/categories`,
-        errors: {
-          401: `Could not resolve a valid Tenant from the provided API Token.`
-        }
-      });
-      return result.body;
-    });
-  }
-  /**
-   * Get Categories for a single application type.
-   * Return all Categories for a single application type.
-   * @param appType
-   * @returns CategoriesResponse OK
-   * @returns Error Default error response
-   * @throws ApiError
-   */
-  static getCategoriesService1(appType) {
-    return __awaiter(this, void 0, void 0, function* () {
-      const result = yield request({
-        method: 'GET',
-        path: `/metadata/bi/categories/${appType}`,
-        errors: {
-          400: `Given app type is not valid.`,
-          401: `Could not resolve a valid Tenant from the provided API Token.`
-        }
-      });
-      return result.body;
-    });
-  }
-}
-
 class DashboardsService {
   /**
    * Get a list of Dashboards.
@@ -8858,8 +8926,8 @@ class DashboardsService {
    * @param sort Sort ordering to apply to the query.
    * @param filter List of filters (each filter is a separate query param, and they are OR'ed).
    *
-   * * **Filterable field names**: author_fullname, author_id, bi_type, categories, created_dt, description, external_embedding_id, external_id, id, is_ootb_dashboard, lifecycle_state, name, target_apps, updated_dt
-   * * **Searchable field names**: author_fullname, categories, description, name
+   * * **Filterable field names**: author_fullname, author_id, bi_type, categories, created_dt, description, external_embedding_id, external_id, id, is_ootb_dashboard, lifecycle_state, name, target_apps, updated_by_fullname, updated_by_id, updated_dt
+   * * **Searchable field names**: author_fullname, categories, description, name, updated_by_fullname
    *
    * @param favorite Boolean flag to only return dashboards marked as favorites.
    * @param q Case-insensitive search of all text fields.
@@ -9100,25 +9168,31 @@ class DashboardsService {
   }
   /**
    * Get Metadata (categories and authors)
-   * Return all Metadata for the given query parameters: bi_type, lifecycle_state, target_app, and/or is_ootb_dashboard
+   * Return all Metadata for dashboards optionally filtered by the given parameters
+   * @param filter List of filters (each filter is a separate query param, and they are OR'ed).
+   *
+   * * **Filterable field names**: author_fullname, bi_type, categories, created_dt, description, is_ootb_dashboard, lifecycle_state, name, updated_by_fullname, updated_dt
+   * * **Searchable field names**: author_fullname, categories, description, name
+   *
+   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY', 'RELEASE' or 'TEAMFORGE'.
    * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
    * @param isOotbDashboard Boolean match on Dashboard OOTB status.
    * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
-   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY' or 'RELEASE'.
    * @returns MetadataResponse OK
    * @returns Error Default error response
    * @throws ApiError
    */
-  static getDashboardsService2(biType = 'MICROSTRATEGY', isOotbDashboard = null, lifecycleState = null, targetApp = null) {
+  static getDashboardsMetadata(filter, targetApp = null, biType = 'MICROSTRATEGY', isOotbDashboard = null, lifecycleState = null) {
     return __awaiter(this, void 0, void 0, function* () {
       const result = yield request({
         method: 'GET',
         path: `/metadata/bi/dashboards/metadata`,
         query: {
+          filter: filter,
+          target_app: targetApp,
           bi_type: biType,
           is_ootb_dashboard: isOotbDashboard,
-          lifecycle_state: lifecycleState,
-          target_app: targetApp
+          lifecycle_state: lifecycleState
         },
         errors: {
           400: `Given query params are not valid.`,
@@ -9269,7 +9343,7 @@ const helpContent = {
   id: 'test-help-content-1',
   content: '<html><h1>Test</h1></html>'
 };
-({
+const dashboard1 = {
   author_fullname: 'Dashboard1 Author',
   author_id: 'id1a',
   target_apps: ['AGILITY'],
@@ -9294,8 +9368,8 @@ const helpContent = {
   help_content_id: helpContent.id,
   filter_configuration: [],
   favorite: false
-});
-({
+};
+const dashboard2 = {
   author_fullname: 'Dashboard2 Author',
   author_id: 'id2a',
   target_apps: ['AGILITY'],
@@ -9318,8 +9392,8 @@ const helpContent = {
   help_content_id: helpContent.id,
   filter_configuration: [],
   favorite: true
-});
-({
+};
+const dashboard3 = {
   author_fullname: 'Dashboard3 Author',
   author_id: 'id3a',
   target_apps: ['AGILITY'],
@@ -9342,7 +9416,7 @@ const helpContent = {
   help_content_id: helpContent.id,
   filter_configuration: [],
   favorite: false
-});
+};
 const getCategoriesMock = {
   categories: {
     AGILITY: ['Scrum Master', 'DevOps Manager', 'Release Train Engineer', 'Agility Analytics'],
@@ -9352,6 +9426,16 @@ const getCategoriesMock = {
     TEAMFORGE: ['Scrum Master']
   }
 };
+const getAuthorsMock = [{
+  id: dashboard1.author_id,
+  full_name: dashboard1.author_fullname
+}, {
+  id: dashboard2.author_id,
+  full_name: dashboard2.author_fullname
+}, {
+  id: dashboard3.author_id,
+  full_name: dashboard3.author_fullname
+}];
 const accountId = 'acct1';
 const applicationId = 'app1';
 const nullStr = null;
@@ -9412,6 +9496,9 @@ function updateItemInArray(elements, updatedItem, idProp) {
   }
   return elements;
 }
+const authorSort = (a, b) => a.full_name.localeCompare(b.full_name);
+const categorySort = (a, b) => a.localeCompare(b);
+const metadataKey = isPublishedOnly => isPublishedOnly ? 'published' : 'all';
 const handleUpdateDashboard = (dashboards, updatedDashboard) => {
   updateItemInArray(dashboards, updatedDashboard, ID);
   return dashboards;
@@ -9440,18 +9527,37 @@ const DotMetadataApiProvider = ({
     cancelablePromise
   } = useCancelablePromise();
   const [accountId, setAccountId] = useState(accountOverrideId);
-  const [categories, setCategories] = useState(null);
-  const [categoriesLoading, setCategoriesLoading] = useState(true);
   const [dashboards, setDashboards] = useState();
   const [dashboardsLoading, setDashboardsLoading] = useState(true);
+  const [metadata, setMetadata] = useState(null);
+  const [metadataLoading, setMetadataLoading] = useState(true);
   const [helpContentLoading, setHelpContentLoading] = useState(true);
   const [openedDashboardDetails, setOpenedDashboardDetails] = useState(null);
   const [dashboardsError, setDashboardsError] = useState(null);
   const [platformConsoleUrl, setPlatformConsoleUrl] = useState(null);
   const MOCK_API_URL = 'https://demo-mock-api';
+  const retrieveMetadata = useCallback((appType, isPublishedOnly) => {
+    setMetadataLoading(true);
+    return cancelablePromise(DashboardsService.getDashboardsMetadata(undefined, appType, undefined, undefined, isPublishedOnly ? 'PUBLISHED' : undefined)).then(response => {
+      setMetadataLoading(false);
+      setDashboardsError(null);
+      const key = metadataKey(isPublishedOnly);
+      setMetadata(orig => {
+        const appTypeMetadata = orig && appType in orig ? Object.assign({}, orig[appType]) : {};
+        appTypeMetadata[key] = response;
+        return Object.assign(Object.assign({}, orig), {
+          [appType]: appTypeMetadata
+        });
+      });
+      return response;
+    }).catch(error => {
+      setMetadataLoading(false);
+      setDashboardsError(error);
+      return null;
+    });
+  }, []);
   const memoizedValues = useMemo(() => ({
-    categories,
-    categoriesLoading,
+    metadataLoading,
     dashboardsError,
     dashboardsLoading,
     helpContentLoading,
@@ -9547,25 +9653,64 @@ const DotMetadataApiProvider = ({
         return response;
       }).catch(error => setDashboardsError(error));
     }),
-    getCategories: () => __awaiter(void 0, void 0, void 0, function* () {
-      setCategoriesLoading(true);
-      if (OpenAPI.BASE === MOCK_API_URL) {
+    getAuthors: (appType, isPublishedOnly = false) => {
+      const key = metadataKey(isPublishedOnly);
+      if (metadata && appType in metadata) {
+        const appTypeMetadata = metadata[appType];
+        if (key in appTypeMetadata) {
+          appTypeMetadata[key]['authors'].sort(authorSort);
+          return Promise.resolve(appTypeMetadata[key]['authors']);
+        }
+      } else if (OpenAPI.BASE === MOCK_API_URL) {
         setDashboardsError(null);
-        setCategoriesLoading(false);
-        setCategories(getCategoriesMock);
-        return getCategoriesMock;
-      } else {
-        return cancelablePromise(CategoriesService.getCategoriesService()).then(response => {
-          setDashboardsError(null);
-          setCategoriesLoading(false);
-          setCategories(response);
-          return response;
-        }).catch(error => {
-          setCategoriesLoading(false);
-          setDashboardsError(error);
-          return null;
+        setMetadataLoading(false);
+        return Promise.resolve(appType == 'AGILITY' ? getAuthorsMock : []);
+      }
+      return cancelablePromise(retrieveMetadata(appType, isPublishedOnly)).then(response => {
+        response.authors.sort(authorSort);
+        return response.authors;
+      });
+    },
+    getCategories: (appType, isPublishedOnly = false) => __awaiter(void 0, void 0, void 0, function* () {
+      const key = metadataKey(isPublishedOnly);
+      if (metadata && appType in metadata) {
+        const appTypeMetadata = metadata[appType];
+        if (key in appTypeMetadata) {
+          appTypeMetadata[key]['categories'].sort(categorySort);
+          return Promise.resolve(appTypeMetadata[key]['categories']);
+        }
+      } else if (OpenAPI.BASE === MOCK_API_URL) {
+        setDashboardsError(null);
+        setMetadataLoading(false);
+        const categories = getCategoriesMock.categories[appType];
+        setMetadata(orig => {
+          if (orig && appType in orig) {
+            const appTypeCategories = orig[appType];
+            appTypeCategories[key]['categories'] = categories;
+            return Object.assign(Object.assign({}, orig), {
+              [appType]: appTypeCategories
+            });
+          }
+          return orig ? Object.assign(Object.assign({}, orig), {
+            [appType]: {
+              [key]: {
+                categories
+              }
+            }
+          }) : {
+            [appType]: {
+              [key]: {
+                categories
+              }
+            }
+          };
         });
+        return Promise.resolve(categories);
       }
+      return cancelablePromise(retrieveMetadata(appType, isPublishedOnly)).then(response => {
+        response === null || response === void 0 ? void 0 : response.categories.sort(categorySort);
+        return response === null || response === void 0 ? void 0 : response.categories;
+      });
     }),
     getDashboardHelpContent: helpContentId => __awaiter(void 0, void 0, void 0, function* () {
       setHelpContentLoading(true);
@@ -9584,7 +9729,7 @@ const DotMetadataApiProvider = ({
         });
       }
     })
-  }), [categories, categoriesLoading, dashboardsError, dashboardsLoading, openedDashboardDetails, platformConsoleUrl]);
+  }), [metadata, metadataLoading, dashboardsError, dashboardsLoading, openedDashboardDetails, platformConsoleUrl]);
   if (apiUrl && OpenAPI.BASE !== apiUrl) {
     OpenAPI.BASE = apiUrl;
   }
@@ -9645,7 +9790,7 @@ const StyledSnackbar = styled(Snackbar)`
       .MuiAlert-message {
         word-break: break-word;
       }
-      .${rootClassName$1e} {
+      .${rootClassName$1f} {
         align-items: flex-start;
       }
       &.MuiSnackbar-anchorOriginTopLeft,
@@ -10165,6 +10310,41 @@ const DotDashboardDetails = _a => {
   return null;
 };
 
+function DashboardCategoriesAutoComplete(_a) {
+  var {
+      freesolo: _freesolo,
+      actionItem: _actionItem,
+      onInputChange,
+      onNewCategory
+    } = _a,
+    args = __rest(_a, ["freesolo", "actionItem", "onInputChange", "onNewCategory"]);
+  const getActionItemNode = value => {
+    return value ? jsxs("span", {
+      children: ["Create new ", jsx("strong", {
+        children: value
+      }), " category"]
+    }) : 'Enter a label to create new category';
+  };
+  const [actionItemText, setActionItemText] = useState(getActionItemNode(''));
+  const handleActionItemClick = newItem => {
+    if (newItem && onNewCategory) {
+      onNewCategory(newItem);
+    }
+  };
+  const customActionItem = {
+    text: actionItemText,
+    onClick: handleActionItemClick
+  };
+  return jsx(DotAutoComplete, Object.assign({}, args, {
+    freesolo: false,
+    actionItem: customActionItem,
+    onInputChange: (event, value, reason) => {
+      setActionItemText(getActionItemNode(value));
+      onInputChange && onInputChange(event, value, reason);
+    }
+  }));
+}
+
 const DotInputSelect = ({
   ariaLabel,
   autoFocus,
@@ -10405,6 +10585,12 @@ function DotDashboardDialog({
     }));
     setIsDirty(true);
   }, [formValues]);
+  const handleNewCategory = useCallback(newCategory => {
+    setFormValues(orig => Object.assign(Object.assign({}, orig), {
+      categories: [...categories, newCategory]
+    }));
+    setIsDirty(true);
+  }, [categories]);
   const getCategoryValues = useCallback(() => categories.map(category => ({
     title: category
   })), [categories]);
@@ -10504,11 +10690,12 @@ function DotDashboardDialog({
     }), jsx(DotTypography, {
       variant: "body2",
       children: "Please select the appropriate categories"
-    }), jsx(DotAutoComplete, {
+    }), jsx(DashboardCategoriesAutoComplete, {
       "data-testid": "dashboard-dialog-categories-input",
       filterSelectedOptions: true,
       inputId: "dashboard-dialog-categories-input",
       onChange: handleChangeCategories,
+      onNewCategory: handleNewCategory,
       options: getAvailableCategoryOptions(),
       placeholder: "Select categories",
       label: "Category",
@@ -10598,7 +10785,6 @@ const productNameCategoryMap = {
  */
 function ActivePublishMessage({
   applicationList,
-  categories,
   dashboardName,
   initialCategories,
   published,
@@ -10610,6 +10796,9 @@ function ActivePublishMessage({
   const [appNameMap, setAppNameMap] = useState({});
   const [appNameMapLoading, setAppNameMapLoading] = useState(true);
   const [categoryOptions, setCategoryOptions] = useState([]);
+  const {
+    getCategories
+  } = useDotMetadataApiContext();
   const appOptions = applicationList.map((application, index) => {
     return {
       title: application.name,
@@ -10628,23 +10817,24 @@ function ActivePublishMessage({
     }
   }, [applicationList]);
   useEffect(() => {
-    const selectedCategoryOptions = [];
     if (selectedApp) {
       if (selectedApp.logo_product_name in productNameCategoryMap) {
+        const selectedCategoryOptions = [];
         const categoryKey = productNameCategoryMap[selectedApp.logo_product_name];
-        const appCategories = categories.categories[categoryKey];
-        const newCategoryOptions = appCategories.map(category => ({
-          title: category
-        }));
-        setCategoryOptions(newCategoryOptions);
-        selectedCategoryOptions.push(...newCategoryOptions.filter(o => initialCategories.includes(o.title)));
+        getCategories(categoryKey).then(appCategories => {
+          const newCategoryOptions = appCategories.map(category => ({
+            title: category
+          }));
+          setCategoryOptions(newCategoryOptions);
+          selectedCategoryOptions.push(...newCategoryOptions.filter(o => initialCategories.includes(o.title)));
+          setSelectedCategories(selectedCategoryOptions);
+        });
       } else {
         setCategoryOptions([]);
       }
     } else {
       setCategoryOptions([]);
     }
-    setSelectedCategories(selectedCategoryOptions);
   }, [selectedApp]);
   useEffect(() => {
     const selectedAppCategories = selectedCategories.map(c => c.title);
@@ -10669,6 +10859,11 @@ function ActivePublishMessage({
   const handleChangeCategories = useCallback((_event, options, _reason) => {
     setSelectedCategories(options);
   }, []);
+  const handleNewCategory = useCallback(newCategory => {
+    setSelectedCategories(orig => [...orig, {
+      title: newCategory
+    }]);
+  }, [selectedCategories]);
   if (published) {
     return jsxs(StyledPublishConfirmDiv, {
       children: [jsxs(DotAlertBanner, {
@@ -10745,10 +10940,11 @@ function ActivePublishMessage({
           variant: "circular",
           size: "large"
         })]
-      }), (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.logo_product_name) && selectedApp.logo_product_name in productNameCategoryMap && categories.categories[productNameCategoryMap[selectedApp.logo_product_name]].length > 0 && jsx(DotAutoComplete, {
+      }), (categoryOptions === null || categoryOptions === void 0 ? void 0 : categoryOptions.length) > 0 && jsx(DashboardCategoriesAutoComplete, {
         "data-testid": "publish-categories-input",
         inputId: "publish-categories-input",
         onChange: handleChangeCategories,
+        onNewCategory: handleNewCategory,
         options: categoryOptions,
         placeholder: "Select categories",
         value: selectedCategories,
@@ -10809,7 +11005,6 @@ function ActiveUnpublishMessage({
 }
 function DotDashboardPublishConfirm({
   applicationList,
-  categories,
   dashboardToPublish,
   dashboardToUnpublish,
   onClose,
@@ -10890,6 +11085,7 @@ function DotDashboardPublishConfirm({
     setPublishAppInstance(selectedApplication);
     setPublishCategories(selectedCategories);
   }, []);
+  const canSubmit = publishAppInstance && !((publishAppInstance === null || publishAppInstance === void 0 ? void 0 : publishAppInstance.logo_product_name) && publishAppInstance.logo_product_name in productNameCategoryMap && publishCategories.length === 0);
   return jsxs(Fragment, {
     children: [dashboardToPublish !== null && jsx(DotDialog, {
       cancelButtonVisible: !published,
@@ -10899,14 +11095,13 @@ function DotDashboardPublishConfirm({
       title: "Publish to application",
       submitButtonProps: {
         'data-testid': 'publish-confirm-button',
-        disabled: publishAppInstance === null || (publishAppInstance === null || publishAppInstance === void 0 ? void 0 : publishAppInstance.logo_product_name) && publishAppInstance.logo_product_name in productNameCategoryMap && categories.categories[productNameCategoryMap[publishAppInstance.logo_product_name]].length > 0 && publishCategories.length === 0,
+        disabled: !canSubmit,
         label: published ? 'Got it' : 'Publish'
       },
       onCancel: handleCancelPublish,
       onSubmit: published ? handleCancelPublish : handlePublish,
       children: jsx(ActivePublishMessage, {
         applicationList: filteredApplications,
-        categories: categories,
         dashboardName: dashboardToPublish === null || dashboardToPublish === void 0 ? void 0 : dashboardToPublish.name,
         initialCategories: publishCategories,
         published: published,
@@ -11139,7 +11334,6 @@ function CloseButton({
 }
 function DotDashboardActions({
   applications,
-  categories,
   dashboard,
   isEdit = false,
   canEdit = false,
@@ -11147,8 +11341,7 @@ function DotDashboardActions({
   onFavorite,
   onStatusChanged,
   onDuplicated,
-  onViewMode,
-  onDetails
+  onViewMode
 }) {
   // NOTE:  useState functions need to stay at the top of the file so that
   // they are evaluated before any context imports. If they are evaluated
@@ -11156,10 +11349,20 @@ function DotDashboardActions({
   const [dashboardToCopy, setDashboardToCopy] = useState(null);
   const [dashboardToPublish, setDashboardToPublish] = useState(null);
   const [dashboardToUnpublish, setDashboardToUnpublish] = useState(null);
+  const [appCategories, setAppCategories] = useState(null);
   const {
     duplicateDashboard,
+    getCategories,
     setOpenedDashboardDetails
   } = useDotMetadataApiContext();
+  useEffect(() => {
+    var _a;
+    if (dashboard && ((_a = dashboard.target_apps) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      getCategories(dashboard.target_apps[0]).then(categories => {
+        setAppCategories(categories);
+      });
+    }
+  }, [dashboard]);
   const handlePublishConfirm = useCallback(publishedDashboard => {
     setDashboardToPublish(null);
     setDashboardToUnpublish(null);
@@ -11198,14 +11401,13 @@ function DotDashboardActions({
     "data-testid": "dot-dashboard-actions",
     children: [jsx(DotDashboardPublishConfirm, {
       applicationList: applications,
-      categories: categories,
       dashboardToPublish: dashboardToPublish,
       dashboardToUnpublish: dashboardToUnpublish,
       onClose: handlePublishConfirmClose,
       onStatusChanged: handlePublishConfirm
-    }), categories && dashboardToCopy && jsx(DotDashboardDialog, {
+    }), appCategories && dashboardToCopy && jsx(DotDashboardDialog, {
       title: "Duplicate dashboard",
-      availableCategories: categories === null || categories === void 0 ? void 0 : categories.categories[dashboard.target_apps[0]],
+      availableCategories: appCategories,
       copyDashboard: dashboardToCopy,
       open: true,
       onClose: handleDuplicateClose,
@@ -11258,16 +11460,13 @@ function DotDashboardHeader({
     loadApplications
   } = useDotCoreApiContext();
   const {
-    categories,
-    categoriesLoading,
-    dashboardsError,
-    getCategories
+    metadataLoading,
+    dashboardsError
   } = useDotMetadataApiContext();
   useEnqueueErrorMessage(!applicationsLoading && applicationsError);
-  useEnqueueErrorMessage(!categoriesLoading && dashboardsError);
+  useEnqueueErrorMessage(!metadataLoading && dashboardsError);
   useEffect(() => {
     loadApplications(accountId);
-    getCategories();
   }, []);
   return jsxs(StyledDashboardHeader, {
     children: [jsx(DotTypography, {
@@ -11276,7 +11475,6 @@ function DotDashboardHeader({
       children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
     }), jsx(DotDashboardActions, {
       applications: applications,
-      categories: categories,
       dashboard: dashboard,
       isEdit: isEdit,
       canEdit: canEdit,
@@ -11620,7 +11818,7 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$M},
         .${rootClassName$O},
-        .${rootClassName$1g},
+        .${rootClassName$1h},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
@@ -11628,7 +11826,7 @@ const StyledFormContainer = styled.div`
       }
 
       label
-        + .${rootClassName$1g},
+        + .${rootClassName$1h},
         label
         + .${rootSelectClassName},
         label
@@ -16192,25 +16390,34 @@ const DotPopper = ({
   className,
   'data-testid': dataTestId,
   disablePortal,
+  hasArrow = false,
   modifiers,
   onClickAway,
   open,
   placement
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$18, className);
+  const [arrowRef, setArrowRef] = useState(null);
+  const rootClasses = useStylesWithRootClass(rootClassName$19, className);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleClickAway = event => {
     if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {
       onClickAway(event);
     }
   };
+  const arrowModifier = {
+    name: 'arrow',
+    enabled: true,
+    options: {
+      element: arrowRef
+    }
+  };
   return jsx(StyledPopper$1, {
     anchorEl: anchorEl,
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
     disablePortal: disablePortal,
-    modifiers: modifiers,
+    modifiers: [...(modifiers || []), ...(hasArrow ? [arrowModifier] : [])],
     open: open,
     placement: placement,
     role: "presentation",
@@ -16218,16 +16425,20 @@ const DotPopper = ({
     children: ({
       TransitionProps
     }) => jsx(Fade, Object.assign({}, TransitionProps, {
-      children: jsx(Paper, {
+      children: jsxs(Paper, {
         className: "dot-popper-paper",
-        children: jsx(ClickAwayListener, {
+        children: [hasArrow && jsx(StyledArrow, {
+          className: arrowClassName,
+          "data-testid": "popper-arrow",
+          ref: setArrowRef
+        }), jsx(ClickAwayListener, {
           onClickAway: handleClickAway,
           children: jsx("div", {
             className: "dot-popper-content-wrapper",
             "data-testid": dataTestId && `${dataTestId}-content-wrapper`,
             children: children
           })
-        })
+        })]
       })
     }))
   });