@digital-ai/dot-components 2.17.2 → 2.18.0

package/index.umd.js

@@ -2141,6 +2141,14 @@
       }), void 0);
     };
 
+    var CreateUUID = function CreateUUID() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0,
+          v = c === 'x' ? r : r & 0x3 | 0x8;
+        return v.toString(16);
+      });
+    };
+
     var rootClassName$$ = 'dot-list';
     var listItemRootClass = 'dot-list-item';
     var nestedListClassName = 'dot-nested-list';
@@ -2150,7 +2158,7 @@
       componentId: "wxwqwr-0"
     })(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .", ".expandable {\n          flex-direction: column;\n\n          .MuiCollapse-root {\n            padding-top: ", ";\n            margin-bottom: ", ";\n          }\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .", ".expandable {\n          flex-direction: column;\n\n          .MuiCollapse-root {\n            padding-top: ", ";\n            margin-bottom: ", ";\n          }\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "])), rootClassName$$, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), listItemRootClass, theme.spacing(1), theme.spacing(-1), theme.spacing(1));
+      return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiCollapse-root {\n          padding-top: ", ";\n          margin-bottom: ", ";\n\n          .MuiCollapse-wrapper {\n            margin: ", ";\n            overflow: hidden;\n            width: calc(100% - ", ");\n          }\n\n          .MuiListSubheader-root .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        background: ", ";\n\n        .dot-icon {\n          color: ", ";\n        }\n\n        &.", " .", " {\n          padding-left: ", ";\n        }\n\n        .MuiCollapse-root {\n          padding-top: ", ";\n          margin-bottom: ", ";\n\n          .MuiCollapse-wrapper {\n            margin: ", ";\n            overflow: hidden;\n            width: calc(100% - ", ");\n          }\n\n          .MuiListSubheader-root .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n\n        .MuiListSubheader-root {\n          padding: 0;\n\n          .MuiTypography-root {\n            padding: ", ";\n          }\n        }\n      }\n    "])), rootClassName$$, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1), theme.spacing(-1), theme.spacing(0, 2), theme.spacing(4), theme.spacing(1, 0), theme.spacing(1));
     });
     var templateObject_1$14, templateObject_2$10;
 
@@ -2163,29 +2171,48 @@
       }
       return 'chevron-down';
     };
-
-    var flyoutListItemClassName = 'dot-flyout-list-item';
-    var flyoutItemLinkClassName = 'dot-flyout-item-link';
-    var listItemLinkClassName = 'dot-list-item-link';
-    var styledListItemElement = function styledListItemElement(elementType) {
-      return styled__default["default"](elementType).withConfig({
-        displayName: "ListItemstyles",
-        componentId: "sc-1fawh8v-0"
-      })(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), function (_a) {
-        var theme = _a.theme;
-        return styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "], ["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
+    // Used in DotSidebar, DotList, DotListItem to determine
+    // if the sidebar should be open or closed based on what target the user clicks
+    var excludedClassNames = ['MuiPaper-root', 'MuiTypography-overline'];
+    var shouldToggleOpen = function shouldToggleOpen(classNames) {
+      return !excludedClassNames.some(function (className) {
+        return classNames.includes(className);
       });
     };
-    var StyledListItem = styledListItemElement(material.ListItem);
-    var StyledListItemButton = styledListItemElement(material.ListItemButton);
-    var templateObject_1$13, templateObject_2$$;
+
+    var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
+
+    var DotListDivider = function DotListDivider(_a) {
+      var item = _a.item,
+        index = _a.index;
+      if (item.text) {
+        return jsxRuntime.jsx(material.ListSubheader, __assign({
+          disableSticky: true
+        }, {
+          children: jsxRuntime.jsx(DotTypography, __assign({
+            ariaRole: "heading",
+            ariaLevel: 3,
+            variant: "overline"
+          }, {
+            children: item.text
+          }), void 0)
+        }), void 0);
+      }
+      return jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsx(material.Divider, {
+          "aria-hidden": true,
+          "data-testid": "divider-" + index,
+          role: "separator"
+        }, void 0)
+      }, void 0);
+    };
 
     var rootClassName$_ = 'dot-progress';
     var StyledCircularProgress = styled__default["default"](material.CircularProgress).withConfig({
       displayName: "Progressstyles__StyledCircularProgress",
       componentId: "sc-1gs77rb-0"
-    })(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"], ["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"])), rootClassName$_);
-    var templateObject_1$12;
+    })(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"], ["\n  &.", " {\n    &.MuiCircularProgress-colorSecondary {\n      color: #649a3d;\n    }\n  }\n"])), rootClassName$_);
+    var templateObject_1$13;
 
     var DotProgress = function DotProgress(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -2248,11 +2275,11 @@
     var StyledPopper$1 = styled__default["default"](material.Popper).withConfig({
       displayName: "Popperstyles__StyledPopper",
       componentId: "sd1h8p-0"
-    })(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "])), rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize);
+      return styled.css(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n    }\n  "])), rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize);
     });
-    var templateObject_1$11, templateObject_2$_;
+    var templateObject_1$12, templateObject_2$$;
 
     var flyoutMenuClassName = 'dot-flyout-menu';
     var rootClassName$Y = 'dot-menu';
@@ -2262,14 +2289,14 @@
     var StyledPopper = styled__default["default"](material.Popper).withConfig({
       displayName: "Menustyles__StyledPopper",
       componentId: "sc-134fmqu-0"
-    })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$Y, rootClassName$Z, function (_a) {
+      return styled.css(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      font-family: ", ";\n      font-size: ", "px;\n      z-index: ", ";\n    }\n    &.", ", &.", " {\n      &.loading .MuiPaper-root {\n        align-items: center;\n        display: flex;\n        justify-content: center;\n        min-height: 200px;\n        min-width: 200px;\n      }\n\n      ul,\n      .dot-action-item {\n        .dot-action-item-text {\n          white-space: nowrap;\n          overflow-x: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\n\n        .dot-li {\n          min-height: auto;\n        }\n      }\n\n      .dot-action-item {\n        height: ", ";\n        border-top: 1px solid ", ";\n        line-height: inherit;\n\n        button.dot-button {\n          border-radius: ", ";\n          justify-content: flex-start;\n          height: 100%;\n          margin: 0;\n\n          &:focus-visible {\n            background-color: ", ";\n          }\n\n          .MuiButton-label {\n            gap: ", ";\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), rootClassName$Z, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$Y, rootClassName$Z, function (_a) {
         var $maxHeight = _a.$maxHeight;
         return $maxHeight !== undefined && "\n          max-height: " + getListMaxHeight($maxHeight) + ";\n        ";
       }, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3));
     });
-    var templateObject_1$10, templateObject_2$Z;
+    var templateObject_1$11, templateObject_2$_;
 
     var MENU_ITEM_HEIGHT_NORMAL = 48;
     var MENU_ITEM_HEIGHT_DENSE = 36;
@@ -2281,11 +2308,11 @@
     var StyledMenuList = styled__default["default"](material.MenuList).withConfig({
       displayName: "MenuListstyles__StyledMenuList",
       componentId: "yqdwwg-0"
-    })(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "])), rootClassName$X, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
+      return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-li {\n        font-size: ", "px;\n        justify-content: space-between;\n        gap: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &.Mui-selected,\n        &.Mui-selected:hover {\n          background: ", ";\n        }\n\n        &.", " {\n          padding-right: ", ";\n        }\n      }\n    }\n  "])), rootClassName$X, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
     });
-    var templateObject_1$$, templateObject_2$Y;
+    var templateObject_1$10, templateObject_2$Z;
 
     var getDefaultItemHeight = function getDefaultItemHeight(isDense) {
       return isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
@@ -2576,21 +2603,13 @@
       }), void 0);
     };
 
-    var CreateUUID = function CreateUUID() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0,
-          v = c === 'x' ? r : r & 0x3 | 0x8;
-        return v.toString(16);
-      });
-    };
-
     var rootClassName$W = 'dot-drawer';
     var StyledDrawer = styled__default["default"](material.Drawer).withConfig({
       displayName: "Drawerstyles__StyledDrawer",
       componentId: "sc-1uiowy0-0"
-    })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "], ["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "])), rootClassName$W, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
+      return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "], ["\n    &.", " .MuiBackdrop-root {\n      background-color: ", ";\n    }\n\n    .dot-drawer-paper {\n      height: ", ";\n      padding: ", ";\n      width: ", ";\n    }\n  "])), rootClassName$W, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
         var height = _a.height,
           anchor = _a.anchor;
         return anchor === 'left' || anchor === 'right' ? '100%' : height;
@@ -2600,27 +2619,27 @@
         return anchor === 'bottom' || anchor === 'top' ? 'auto' : width;
       });
     });
-    var templateObject_1$_, templateObject_2$X;
+    var templateObject_1$$, templateObject_2$Y;
 
     var rootClassName$V = 'dot-drawer-header';
     var StyleDrawerHeader = styled__default["default"].div.withConfig({
       displayName: "DrawerHeaderstyles__StyleDrawerHeader",
       componentId: "sc-2d2xd3-0"
-    })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$V, theme.spacing(0, 0, 2));
+      return styled.css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n      display: flex;\n      align-items: center;\n      .close-button {\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$V, theme.spacing(0, 0, 2));
     });
-    var templateObject_1$Z, templateObject_2$W;
+    var templateObject_1$_, templateObject_2$X;
 
     var rootClassName$U = 'dot-icon-btn';
     var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
       displayName: "IconButtonstyles__StyledIconButton",
       componentId: "eko0kb-0"
-    })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$U, theme.palette.grey[300], theme.spacing(1), hoverGray);
+      return styled.css(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$U, theme.palette.grey[300], theme.spacing(1), hoverGray);
     });
-    var templateObject_1$Y, templateObject_2$V;
+    var templateObject_1$Z, templateObject_2$W;
 
     var DotIconButton = function DotIconButton(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -2702,10 +2721,10 @@
     var StyleDrawerBody = styled__default["default"].div.withConfig({
       displayName: "DrawerBodystyles__StyleDrawerBody",
       componentId: "sc-1mpmjdk-0"
-    })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$T);
+    })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
+      return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      .dot-drawer-close-button {\n        align-self: self-start;\n        padding: 0;\n        margin-left: auto;\n      }\n    }\n  "])), rootClassName$T);
     });
-    var templateObject_1$X, templateObject_2$U;
+    var templateObject_1$Y, templateObject_2$V;
 
     var DotDrawerBody = function DotDrawerBody(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -2737,11 +2756,11 @@
     var StyleDrawerFooter = styled__default["default"].div.withConfig({
       displayName: "DrawerFooterstyles__StyleDrawerFooter",
       componentId: "sc-1ki05ze-0"
-    })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n    }\n  "])), rootClassName$S, theme.spacing(2, 0, 0));
+      return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    &.", " {\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      padding: ", ";\n    }\n  "])), rootClassName$S, theme.spacing(2, 0, 0));
     });
-    var templateObject_1$W, templateObject_2$T;
+    var templateObject_1$X, templateObject_2$U;
 
     var DotDrawerFooter = function DotDrawerFooter(_a) {
       var ariaLabel = _a.ariaLabel,
@@ -2841,255 +2860,32 @@
       }), void 0);
     };
 
-    var fadeIn = styled.keyframes(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+    var fadeIn = styled.keyframes(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
     var StyledDotDrawer = styled__default["default"](DotDrawer).withConfig({
       displayName: "NestedListstyles__StyledDotDrawer",
       componentId: "sc-1wwoqos-0"
     })(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var open = _a.open;
-      return styled.css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "], ["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "])), fadeIn));
+      return styled.css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-drawer-paper {\n        z-index: ", ";\n        animation: ", ";\n      }\n    }\n  "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "], ["\n          ", " 0.2s cubic-bezier(1,0,1,.01);\n        "])), fadeIn));
     });
-    var templateObject_1$V, templateObject_2$S, templateObject_3$b, templateObject_4$9;
+    var templateObject_1$W, templateObject_2$T, templateObject_3$b, templateObject_4$9;
 
-    var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
-    var DotListDivider = function DotListDivider(_a) {
-      var item = _a.item,
-        index = _a.index;
-      if (item.text) {
-        return jsxRuntime.jsx(material.ListSubheader, __assign({
-          disableSticky: true
-        }, {
-          children: jsxRuntime.jsx(DotTypography, __assign({
-            ariaRole: "heading",
-            ariaLevel: 3,
-            variant: "overline"
-          }, {
-            children: item.text
-          }), void 0)
-        }), void 0);
-      }
-      return jsxRuntime.jsx("li", {
-        children: jsxRuntime.jsx(material.Divider, {
-          "aria-hidden": true,
-          "data-testid": "divider-" + index,
-          role: "separator"
-        }, void 0)
-      }, void 0);
-    };
-    var DotList = function DotList(_a) {
-      var ariaLabel = _a.ariaLabel,
-        _b = _a.ariaRole,
-        ariaRole = _b === void 0 ? 'list' : _b,
-        children = _a.children,
-        className = _a.className,
-        _c = _a.component,
-        component = _c === void 0 ? 'ul' : _c,
-        dataTestId = _a["data-testid"],
-        _d = _a.dense,
-        dense = _d === void 0 ? false : _d,
-        _e = _a.disablePadding,
-        disablePadding = _e === void 0 ? false : _e,
-        _f = _a.items,
-        items = _f === void 0 ? [] : _f,
-        _g = _a.menuPlacement,
-        menuPlacement = _g === void 0 ? 'right-start' : _g,
-        _h = _a.nestedDrawerLeftSpacing,
-        nestedDrawerLeftSpacing = _h === void 0 ? 240 : _h,
-        _j = _a.nestedListType,
-        nestedListType = _j === void 0 ? 'expandable' : _j,
-        _k = _a.width,
-        width = _k === void 0 ? 240 : _k;
-      var rootClasses = useStylesWithRootClass(rootClassName$$, className);
-      var listWidth = typeof width === 'number' ? width + "px" : width;
-      var listRef = React.useRef();
-      var _l = React.useState(null),
-        listItemIndex = _l[0],
-        setListItemIndex = _l[1];
-      var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
-        currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
-      };
-      return jsxRuntime.jsxs(StyledList, __assign({
-        "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(function (item, index) {
-          var handleListItemClick = function handleListItemClick(e) {
-            var _a;
-            updateSelectedListItem(index);
-            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-          };
-          var handleMenuLeave = function handleMenuLeave(event) {
-            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 jsxRuntime.jsx("div", __assign({
-              role: "listitem"
-            }, {
-              children: item.child
-            }), "item-child-" + index);
-          }
-          if (item.divider) {
-            return jsxRuntime.jsx(DotListDivider, {
-              index: index,
-              item: item
-            }, "divider-" + index);
-          }
-          return jsxRuntime.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: item.href && !item.onClick ? null : handleListItemClick,
-            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
-          }, index);
-        }), children]
-      }), void 0);
-    };
-    var DotListItem = function DotListItem(_a) {
-      var ariaLabel = _a.ariaLabel,
-        _b = _a.ariaRole,
-        ariaRole = _b === void 0 ? 'listitem' : _b,
-        className = _a.className,
-        _c = _a.component,
-        component = _c === void 0 ? 'li' : _c,
-        dataTestId = _a["data-testid"],
-        _d = _a.divider,
-        divider = _d === void 0 ? false : _d,
-        endIcon = _a.endIcon,
-        href = _a.href,
-        isOpened = _a.isOpened,
-        onClick = _a.onClick,
-        onMenuLeave = _a.onMenuLeave,
-        _e = _a.items,
-        items = _e === void 0 ? [] : _e,
-        menuPlacement = _a.menuPlacement,
-        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
-        nestedListType = _a.nestedListType,
-        primaryText = _a.primaryText,
-        secondaryText = _a.secondaryText,
-        selected = _a.selected,
-        startIcon = _a.startIcon,
-        target = _a.target,
-        text = _a.text,
-        tooltip = _a.tooltip,
-        _f = _a.tooltipPlacement,
-        tooltipPlacement = _f === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _f;
-      var hasChildren = items.length > 0;
-      var isFlyout = nestedListType === 'menu' && hasChildren;
-      var _g = React.useState(null),
-        anchorEl = _g[0],
-        setAnchorEl = _g[1];
-      var showEndIcon = endIcon || hasChildren;
-      var rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
-      var toggleOpen = function toggleOpen(event) {
-        return setAnchorEl(event.currentTarget);
-      };
-      var handleClick = function handleClick(event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        toggleOpen(event);
-      };
-      var handleMenuLeave = function handleMenuLeave(event) {
-        return onMenuLeave(event);
-      };
-      var renderListItemText = function renderListItemText() {
-        return primaryText && secondaryText ? jsxRuntime.jsx(material.ListItemText, {
-          primary: primaryText,
-          secondary: secondaryText
-        }, void 0) : jsxRuntime.jsx(DotTypography, __assign({
-          variant: "body1"
-        }, {
-          children: text
-        }), void 0);
-      };
-      var renderListItemEndIcon = function renderListItemEndIcon() {
-        if (hasChildren || !endIcon) {
-          return jsxRuntime.jsx(DotIcon, {
-            iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
-          }, void 0);
-        }
-        return endIcon;
-      };
-      var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
-        className: listItemLinkClassName,
-        href: href,
-        target: target,
-        underline: "none"
-      }, {
-        children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
-          children: startIcon
-        }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
-      }), void 0);
-      var ListItem = onClick || href ? StyledListItemButton : StyledListItem;
-      return jsxRuntime.jsx(ListItem, __assign({
-        "aria-label": ariaLabel || tooltip,
-        classes: {
-          root: rootClasses
-        },
-        component: component,
-        "data-testid": dataTestId,
-        divider: divider,
-        href: onClick ? null : href,
-        onClick: onClick || !href ? handleClick : null,
-        role: ariaRole,
-        selected: isFlyout ? isOpened : selected,
-        target: target
-      }, {
-        children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(DotTooltip, __assign({
-            "data-testid": dataTestId + "-tooltip",
-            placement: tooltipPlacement,
-            title: tooltip
-          }, {
-            children: href && !onClick ? renderListItemLink : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
-                children: startIcon
-              }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
-            }, void 0)
-          }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
-            anchorEl: anchorEl,
-            ariaLabel: "nested list",
-            "data-testid": "nestedList",
-            items: items,
-            menuPlacement: menuPlacement,
-            nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-            onMenuLeave: handleMenuLeave,
-            open: isOpened,
-            type: nestedListType
-          }, void 0)]
-        }, void 0)
-      }), void 0);
+    var flyoutListItemClassName = 'dot-flyout-list-item';
+    var flyoutItemLinkClassName = 'dot-flyout-item-link';
+    var listItemLinkClassName = 'dot-list-item-link';
+    var styledListItemElement = function styledListItemElement(elementType) {
+      return styled__default["default"](elementType).withConfig({
+        displayName: "ListItemstyles",
+        componentId: "sc-1fawh8v-0"
+      })(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), function (_a) {
+        var theme = _a.theme;
+        return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "], ["\n      &.", " {\n        &.", " {\n          padding: 0;\n        }\n\n        .dot-tooltip {\n          display: flex;\n          width: 100%;\n        }\n\n        p.MuiTypography-root {\n          flex-grow: 2;\n          margin-bottom: 0;\n        }\n\n        .", " {\n          align-items: center;\n          display: flex;\n          flex-grow: 2;\n        }\n\n        .", " .MuiIcon-root {\n          margin-right: ", ";\n        }\n\n        .dot-icon i:before {\n          color: ", ";\n        }\n      }\n    "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
+      });
     };
+    var StyledListItem = styledListItemElement(material.ListItem);
+    var StyledListItemButton = styledListItemElement(material.ListItemButton);
+    var templateObject_1$V, templateObject_2$S;
+
     var NestedList = function NestedList(_a) {
       var ariaLabel = _a.ariaLabel,
         anchorEl = _a.anchorEl,
@@ -3115,7 +2911,8 @@
             component: "div",
             "data-testid": dataTestId,
             disablePadding: true,
-            items: items
+            items: items,
+            width: '100%'
           }, parentItemIndex)
         }), void 0);
       }
@@ -3150,8 +2947,8 @@
                     children: text
                   }), void 0)]
                 }), void 0)
-              }), parentItemIndex + "-" + index + "-tooltip")
-            }), parentItemIndex + "-" + index),
+              }), parentItemIndex + "-" + CreateUUID() + "-tooltip")
+            }), parentItemIndex + "-" + CreateUUID()),
             classes: '',
             key: String(index)
           };
@@ -3195,6 +2992,261 @@
       }
     };
 
+    var DotListItem = function DotListItem(_a) {
+      var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'listitem' : _b,
+        className = _a.className,
+        _c = _a.component,
+        component = _c === void 0 ? 'li' : _c,
+        dataTestId = _a["data-testid"],
+        _d = _a.divider,
+        divider = _d === void 0 ? false : _d,
+        endIcon = _a.endIcon,
+        href = _a.href,
+        _e = _a.isOpened,
+        isOpened = _e === void 0 ? false : _e,
+        onClick = _a.onClick,
+        onMenuLeave = _a.onMenuLeave,
+        _f = _a.items,
+        items = _f === void 0 ? [] : _f,
+        menuPlacement = _a.menuPlacement,
+        nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
+        nestedListType = _a.nestedListType,
+        primaryText = _a.primaryText,
+        secondaryText = _a.secondaryText,
+        selected = _a.selected,
+        startIcon = _a.startIcon,
+        target = _a.target,
+        text = _a.text,
+        tooltip = _a.tooltip,
+        _g = _a.tooltipPlacement,
+        tooltipPlacement = _g === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _g;
+      var _h = React.useState(null),
+        anchorEl = _h[0],
+        setAnchorEl = _h[1];
+      var _j = React.useState(isOpened),
+        navIsOpened = _j[0],
+        setNavIsOpened = _j[1];
+      var hasChildren = items.length > 0;
+      var isFlyout = nestedListType === 'menu' && hasChildren;
+      var showEndIcon = endIcon || hasChildren;
+      var rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '');
+      var toggleOpen = function toggleOpen(event) {
+        setAnchorEl(event.currentTarget);
+        setNavIsOpened(!navIsOpened);
+      };
+      var handleClick = function handleClick(event) {
+        var eventTarget = event.target;
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        // only toggle open if clicking on a link
+        if (shouldToggleOpen(eventTarget.className)) {
+          toggleOpen(event);
+        }
+      };
+      var handleMenuLeave = function handleMenuLeave(event) {
+        onMenuLeave(event);
+      };
+      var renderListItemText = function renderListItemText() {
+        return primaryText && secondaryText ? jsxRuntime.jsx(material.ListItemText, {
+          primary: primaryText,
+          secondary: secondaryText
+        }, void 0) : jsxRuntime.jsx(DotTypography, __assign({
+          variant: "body1"
+        }, {
+          children: text
+        }), void 0);
+      };
+      var renderListItemEndIcon = function renderListItemEndIcon() {
+        if (hasChildren || !endIcon) {
+          return jsxRuntime.jsx(DotIcon, {
+            iconId: hasChildren && getChevronIcon(nestedListType, navIsOpened)
+          }, void 0);
+        }
+        return endIcon;
+      };
+      var renderListItemLink = jsxRuntime.jsxs(DotLink, __assign({
+        ariaLabel: ariaLabel || tooltip,
+        className: listItemLinkClassName,
+        href: href,
+        target: target,
+        underline: "none"
+      }, {
+        children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
+          children: startIcon
+        }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+      }), void 0);
+      var ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(ListItem, __assign({
+          "aria-label": ariaLabel || tooltip,
+          classes: {
+            root: rootClasses
+          },
+          component: component,
+          "data-testid": dataTestId,
+          divider: divider,
+          href: onClick ? null : href,
+          onClick: onClick || !href ? handleClick : null,
+          role: ariaRole,
+          selected: isFlyout ? navIsOpened : selected,
+          target: target
+        }, {
+          children: jsxRuntime.jsx(DotTooltip, __assign({
+            "data-testid": dataTestId + "-tooltip",
+            placement: tooltipPlacement,
+            title: tooltip
+          }, {
+            children: href && !onClick ? renderListItemLink : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [startIcon && jsxRuntime.jsx(material.ListItemIcon, {
+                children: startIcon
+              }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+            }, void 0)
+          }), void 0)
+        }), void 0), hasChildren && jsxRuntime.jsx(NestedList, {
+          anchorEl: anchorEl,
+          ariaLabel: "nested list",
+          "data-testid": "nestedList",
+          items: items,
+          menuPlacement: menuPlacement,
+          nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
+          onMenuLeave: handleMenuLeave,
+          open: navIsOpened,
+          type: nestedListType
+        }, void 0)]
+      }, void 0);
+    };
+
+    var DotClickAwayListener = function DotClickAwayListener(_a) {
+      var children = _a.children,
+        _b = _a.disableReactTree,
+        disableReactTree = _b === void 0 ? false : _b,
+        onClickAway = _a.onClickAway;
+      return jsxRuntime.jsx(material.ClickAwayListener, {
+        children: children,
+        disableReactTree: disableReactTree,
+        onClickAway: onClickAway
+      }, void 0);
+    };
+
+    var DotList = function DotList(_a) {
+      var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'list' : _b,
+        children = _a.children,
+        className = _a.className,
+        _c = _a.component,
+        component = _c === void 0 ? 'ul' : _c,
+        dataTestId = _a["data-testid"],
+        _d = _a.dense,
+        dense = _d === void 0 ? false : _d,
+        _e = _a.disablePadding,
+        disablePadding = _e === void 0 ? false : _e,
+        _f = _a.items,
+        items = _f === void 0 ? [] : _f,
+        _g = _a.menuPlacement,
+        menuPlacement = _g === void 0 ? 'right-start' : _g,
+        _h = _a.nestedDrawerLeftSpacing,
+        nestedDrawerLeftSpacing = _h === void 0 ? 240 : _h,
+        _j = _a.nestedListType,
+        nestedListType = _j === void 0 ? 'expandable' : _j,
+        _k = _a.width,
+        width = _k === void 0 ? 240 : _k;
+      var rootClasses = useStylesWithRootClass(rootClassName$$, className);
+      var listWidth = typeof width === 'number' ? width + "px" : width;
+      var listRef = React.useRef();
+      var _l = React.useState(null),
+        listItemIndex = _l[0],
+        setListItemIndex = _l[1];
+      var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
+        currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
+      };
+      var handleClickAway = function handleClickAway() {
+        setListItemIndex(null);
+      };
+      return jsxRuntime.jsx(DotClickAwayListener, __assign({
+        onClickAway: handleClickAway
+      }, {
+        children: jsxRuntime.jsxs(StyledList, __assign({
+          "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(function (item, index) {
+            var handleListItemClick = function handleListItemClick(e) {
+              var _a;
+              var 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);
+              }
+            };
+            var determineOnClick = item.href && !item.onClick ? null : handleListItemClick;
+            var handleMenuLeave = function 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 jsxRuntime.jsx("div", __assign({
+                onClick: item.onClick,
+                role: "listitem"
+              }, {
+                children: item.child
+              }), "item-child-" + CreateUUID());
+            }
+            if (item.divider) {
+              return jsxRuntime.jsx(DotListDivider, {
+                index: index,
+                item: item
+              }, "divider-" + CreateUUID());
+            }
+            return jsxRuntime.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,
+              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
+            }, CreateUUID());
+          }), children]
+        }), void 0)
+      }), void 0);
+    };
+
     var DotInputLabel = function DotInputLabel(_a) {
       var dataTestId = _a["data-testid"],
         _b = _a.disabled,
@@ -9464,22 +9516,24 @@
      * to determine the functionality of the table.
      */
     var DotTableBody = function DotTableBody(_a) {
-      var collapsibleTableBody = _a.collapsibleTableBody,
+      var _b = _a.actionsMenuPlacement,
+        actionsMenuPlacement = _b === void 0 ? 'bottom-end' : _b,
+        collapsibleTableBody = _a.collapsibleTableBody,
         columns = _a.columns,
         data = _a.data,
         emptyMessage = _a.emptyMessage,
         multiSelectBody = _a.multiSelectBody,
         onRowClick = _a.onRowClick,
         typography = _a.typography;
-      var _b = React.useState(null),
-        anchorEl = _b[0],
-        setAnchorEl = _b[1];
-      var _c = React.useState([]),
-        menuProps = _c[0],
-        setMenuProps = _c[1];
-      var _d = React.useState(false),
-        open = _d[0],
-        setOpen = _d[1];
+      var _c = React.useState(null),
+        anchorEl = _c[0],
+        setAnchorEl = _c[1];
+      var _d = React.useState([]),
+        menuProps = _d[0],
+        setMenuProps = _d[1];
+      var _e = React.useState(false),
+        open = _e[0],
+        setOpen = _e[1];
       var handleActionMenuTrigger = function handleActionMenuTrigger(el, menuItem) {
         setAnchorEl(el);
         setMenuProps(menuItem);
@@ -9522,7 +9576,7 @@
           disablePortal: true,
           id: menuId,
           menuItems: menuProps,
-          menuPlacement: "bottom-end",
+          menuPlacement: actionsMenuPlacement,
           onLeave: onLeave,
           open: open
         }, void 0)]
@@ -9806,9 +9860,11 @@
      *  creating a common structure for tables in the system.
      */
     var DotTable = function DotTable(_a) {
-      var ariaLabel = _a.ariaLabel,
-        _b = _a.bodyTypography,
-        bodyTypography = _b === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _b,
+      var _b = _a.actionsMenuPlacement,
+        actionsMenuPlacement = _b === void 0 ? 'bottom-end' : _b,
+        ariaLabel = _a.ariaLabel,
+        _c = _a.bodyTypography,
+        bodyTypography = _c === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _c,
         className = _a.className,
         collapsibleTableOptions = _a.collapsibleTableOptions,
         columns = _a.columns,
@@ -9816,53 +9872,53 @@
         data = _a.data,
         dataTestId = _a["data-testid"],
         emptyMessage = _a.emptyMessage,
-        _c = _a.footerTypography,
-        footerTypography = _c === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _c,
-        _d = _a.headerTypography,
-        headerTypography = _d === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _d,
+        _d = _a.footerTypography,
+        footerTypography = _d === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _d,
+        _e = _a.headerTypography,
+        headerTypography = _e === void 0 ? TABLE_TYPOGRAPHY_VARIANT : _e,
         labelRowsPerPage = _a.labelRowsPerPage,
-        _e = _a.loading,
-        loading = _e === void 0 ? false : _e,
+        _f = _a.loading,
+        loading = _f === void 0 ? false : _f,
         maxHeight = _a.maxHeight,
         multiSelect = _a.multiSelect,
-        _f = _a.order,
-        order = _f === void 0 ? 'asc' : _f,
+        _g = _a.order,
+        order = _g === void 0 ? 'asc' : _g,
         orderBy = _a.orderBy,
         onRowClick = _a.onRowClick,
         onUpdateData = _a.onUpdateData,
-        _g = _a.page,
-        page = _g === void 0 ? 0 : _g,
+        _h = _a.page,
+        page = _h === void 0 ? 0 : _h,
         rowsPerPage = _a.rowsPerPage,
         rowsPerPageOptions = _a.rowsPerPageOptions,
-        _h = _a.stickyHeader,
-        stickyHeader = _h === void 0 ? true : _h,
-        _j = _a.sortable,
-        sortable = _j === void 0 ? true : _j,
+        _j = _a.stickyHeader,
+        stickyHeader = _j === void 0 ? true : _j,
+        _k = _a.sortable,
+        sortable = _k === void 0 ? true : _k,
         toolbar = _a.toolbar;
-      var _k = React.useState(order),
-        tableOrder = _k[0],
-        setOrder = _k[1];
-      var _l = React.useState(orderBy),
-        tableOrderBy = _l[0],
-        setOrderBy = _l[1];
-      var _m = React.useState(page),
-        tablePage = _m[0],
-        setPage = _m[1];
-      var _o = React.useState(rowsPerPage),
-        tableRowsPerPage = _o[0],
-        setRowsPerPage = _o[1];
-      var _p = React.useState([]),
-        selectedRowIds = _p[0],
-        setSelectedRowIds = _p[1];
+      var _l = React.useState(order),
+        tableOrder = _l[0],
+        setOrder = _l[1];
+      var _m = React.useState(orderBy),
+        tableOrderBy = _m[0],
+        setOrderBy = _m[1];
+      var _o = React.useState(page),
+        tablePage = _o[0],
+        setPage = _o[1];
+      var _p = React.useState(rowsPerPage),
+        tableRowsPerPage = _p[0],
+        setRowsPerPage = _p[1];
       var _q = React.useState([]),
-        expandedRowIds = _q[0],
-        setExpandedRowIds = _q[1];
+        selectedRowIds = _q[0],
+        setSelectedRowIds = _q[1];
+      var _r = React.useState([]),
+        expandedRowIds = _r[0],
+        setExpandedRowIds = _r[1];
       var getSortedData = function getSortedData() {
         return onUpdateData ? data : stableSort(data, getComparator(order, orderBy));
       };
-      var _r = React.useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length)),
-        pageData = _r[0],
-        setPageData = _r[1];
+      var _s = React.useState(getSortedData().slice(0, rowsPerPage ? rowsPerPage : data.length)),
+        pageData = _s[0],
+        setPageData = _s[1];
       var rootClasses = useStylesWithRootClass(rootClassName$i, className, loading ? 'loading' : '');
       var updateData = function updateData(newOrder, newOrderBy, newPage, newRowsPerPage) {
         var newData = stableSort(data, getComparator(newOrder, newOrderBy));
@@ -10006,6 +10062,7 @@
               sortable: sortable,
               typography: headerTypography
             }, void 0), jsxRuntime.jsx(DotTableBody, {
+              actionsMenuPlacement: actionsMenuPlacement,
               collapsibleTableBody: collapsibleTableBody,
               columns: columns,
               data: tableData,
@@ -11545,18 +11602,6 @@
       }), void 0);
     };
 
-    var DotClickAwayListener = function DotClickAwayListener(_a) {
-      var children = _a.children,
-        _b = _a.disableReactTree,
-        disableReactTree = _b === void 0 ? false : _b,
-        onClickAway = _a.onClickAway;
-      return jsxRuntime.jsx(material.ClickAwayListener, {
-        children: children,
-        disableReactTree: disableReactTree,
-        onClickAway: onClickAway
-      }, void 0);
-    };
-
     exports.Cell = Cell;
     exports.CreateUUID = CreateUUID;
     exports.CssCell = CssCell;