@digital-ai/dot-components 2.17.2 → 2.18.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, ListItemButton, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -1893,6 +1893,14 @@ const DotLink = ({
   }), void 0);
 };
 
+const CreateUUID = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = Math.random() * 16 | 0,
+      v = c === 'x' ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+};
+
 const rootClassName$$ = 'dot-list';
 const listItemRootClass = 'dot-list-item';
 const nestedListClassName = 'dot-nested-list';
@@ -1902,7 +1910,7 @@ const StyledList = styled(List).withConfig({
   componentId: "wxwqwr-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.", ".expandable{flex-direction:column;.MuiCollapse-root{padding-top:", ";margin-bottom:", ";}}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], rootClassName$$, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), listItemRootClass, theme.spacing(1), theme.spacing(-1), theme.spacing(1)));
+}) => css(["&.", "{background:", ";.dot-icon{color:", ";}&.", " .", "{padding-left:", ";}.MuiCollapse-root{padding-top:", ";margin-bottom:", ";.MuiCollapse-wrapper{margin:", ";overflow:hidden;width:calc(100% - ", ");}.MuiListSubheader-root .MuiTypography-root{padding:", ";}}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", ";}}}"], 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)));
 
 const getChevronIcon = (nestedListType, isOpened) => {
   if (nestedListType !== 'expandable') {
@@ -1913,20 +1921,40 @@ const getChevronIcon = (nestedListType, isOpened) => {
   }
   return 'chevron-down';
 };
+// Used in DotSidebar, DotList, DotListItem to determine
+// if the sidebar should be open or closed based on what target the user clicks
+const excludedClassNames = ['MuiPaper-root', 'MuiTypography-overline'];
+const shouldToggleOpen = classNames => {
+  return !excludedClassNames.some(className => classNames.includes(className));
+};
 
-const flyoutListItemClassName = 'dot-flyout-list-item';
-const flyoutItemLinkClassName = 'dot-flyout-item-link';
-const listItemLinkClassName = 'dot-list-item-link';
-const styledListItemElement = elementType => {
-  return styled(elementType).withConfig({
-    displayName: "ListItemstyles",
-    componentId: "sc-1fawh8v-0"
-  })(["", ""], ({
-    theme
-  }) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
+const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
+
+const DotListDivider = ({
+  item,
+  index
+}) => {
+  if (item.text) {
+    return jsx(ListSubheader, Object.assign({
+      disableSticky: true
+    }, {
+      children: jsx(DotTypography, Object.assign({
+        ariaRole: "heading",
+        ariaLevel: 3,
+        variant: "overline"
+      }, {
+        children: item.text
+      }), void 0)
+    }), void 0);
+  }
+  return jsx("li", {
+    children: jsx(Divider, {
+      "aria-hidden": true,
+      "data-testid": `divider-${index}`,
+      role: "separator"
+    }, void 0)
+  }, void 0);
 };
-const StyledListItem = styledListItemElement(ListItem);
-const StyledListItemButton = styledListItemElement(ListItemButton);
 
 const rootClassName$_ = 'dot-progress';
 const StyledCircularProgress = styled(CircularProgress).withConfig({
@@ -2295,14 +2323,6 @@ const DotMenu = ({
   }), void 0);
 };
 
-const CreateUUID = () => {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = Math.random() * 16 | 0,
-      v = c === 'x' ? r : r & 0x3 | 0x8;
-    return v.toString(16);
-  });
-};
-
 const rootClassName$W = 'dot-drawer';
 const StyledDrawer = styled(Drawer).withConfig({
   displayName: "Drawerstyles__StyledDrawer",
@@ -2545,224 +2565,20 @@ const StyledDotDrawer = styled(DotDrawer).withConfig({
   open
 }) => css(["&.", "{.dot-drawer-paper{z-index:", ";animation:", ";}}"], nestedDrawerClassName, open ? levelFirst : levelBottom, open && css(["", " 0.2s cubic-bezier(1,0,1,.01);"], fadeIn)));
 
-const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
-const DotListDivider = ({
-  item,
-  index
-}) => {
-  if (item.text) {
-    return jsx(ListSubheader, Object.assign({
-      disableSticky: true
-    }, {
-      children: jsx(DotTypography, Object.assign({
-        ariaRole: "heading",
-        ariaLevel: 3,
-        variant: "overline"
-      }, {
-        children: item.text
-      }), void 0)
-    }), void 0);
-  }
-  return jsx("li", {
-    children: jsx(Divider, {
-      "aria-hidden": true,
-      "data-testid": `divider-${index}`,
-      role: "separator"
-    }, void 0)
-  }, void 0);
-};
-const DotList = ({
-  ariaLabel,
-  ariaRole: _ariaRole = 'list',
-  children,
-  className,
-  component: _component = 'ul',
-  'data-testid': dataTestId,
-  dense: _dense = false,
-  disablePadding: _disablePadding = false,
-  items: _items = [],
-  menuPlacement: _menuPlacement = 'right-start',
-  nestedDrawerLeftSpacing: _nestedDrawerLeftSpacing = 240,
-  nestedListType: _nestedListType = 'expandable',
-  width: _width = 240
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
-  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
-  const listRef = useRef();
-  const [listItemIndex, setListItemIndex] = useState(null);
-  const updateSelectedListItem = currentIndex => {
-    currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
-  };
-  return jsxs(StyledList, Object.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((item, index) => {
-      const handleListItemClick = e => {
-        var _a;
-        updateSelectedListItem(index);
-        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-      };
-      const 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 jsx("div", Object.assign({
-          role: "listitem"
-        }, {
-          children: item.child
-        }), `item-child-${index}`);
-      }
-      if (item.divider) {
-        return jsx(DotListDivider, {
-          index: index,
-          item: item
-        }, `divider-${index}`);
-      }
-      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: 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);
-};
-const DotListItem = ({
-  ariaLabel,
-  ariaRole: _ariaRole2 = 'listitem',
-  className,
-  component: _component2 = 'li',
-  'data-testid': dataTestId,
-  divider: _divider = false,
-  endIcon,
-  href,
-  isOpened,
-  onClick,
-  onMenuLeave,
-  items: _items2 = [],
-  menuPlacement,
-  nestedDrawerLeftSpacing,
-  nestedListType,
-  primaryText,
-  secondaryText,
-  selected,
-  startIcon,
-  target,
-  text,
-  tooltip,
-  tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
-}) => {
-  const hasChildren = _items2.length > 0;
-  const isFlyout = nestedListType === 'menu' && hasChildren;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const showEndIcon = endIcon || hasChildren;
-  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', isOpened ? 'open' : '');
-  const toggleOpen = event => setAnchorEl(event.currentTarget);
-  const handleClick = event => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    toggleOpen(event);
-  };
-  const handleMenuLeave = event => onMenuLeave(event);
-  const renderListItemText = () => primaryText && secondaryText ? jsx(ListItemText, {
-    primary: primaryText,
-    secondary: secondaryText
-  }, void 0) : jsx(DotTypography, Object.assign({
-    variant: "body1"
-  }, {
-    children: text
-  }), void 0);
-  const renderListItemEndIcon = () => {
-    if (hasChildren || !endIcon) {
-      return jsx(DotIcon, {
-        iconId: hasChildren && getChevronIcon(nestedListType, isOpened)
-      }, void 0);
-    }
-    return endIcon;
-  };
-  const renderListItemLink = jsxs(DotLink, Object.assign({
-    className: listItemLinkClassName,
-    href: href,
-    target: target,
-    underline: "none"
-  }, {
-    children: [startIcon && jsx(ListItemIcon, {
-      children: startIcon
-    }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
-  }), void 0);
-  const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
-  return jsx(ListItem, Object.assign({
-    "aria-label": ariaLabel || tooltip,
-    classes: {
-      root: rootClasses
-    },
-    component: _component2,
-    "data-testid": dataTestId,
-    divider: _divider,
-    href: onClick ? null : href,
-    onClick: onClick || !href ? handleClick : null,
-    role: _ariaRole2,
-    selected: isFlyout ? isOpened : selected,
-    target: target
-  }, {
-    children: jsxs(Fragment, {
-      children: [jsx(DotTooltip, Object.assign({
-        "data-testid": `${dataTestId}-tooltip`,
-        placement: _tooltipPlacement,
-        title: tooltip
-      }, {
-        children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
-          children: [startIcon && jsx(ListItemIcon, {
-            children: startIcon
-          }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
-        }, void 0)
-      }), void 0), hasChildren && jsx(NestedList, {
-        anchorEl: anchorEl,
-        ariaLabel: "nested list",
-        "data-testid": "nestedList",
-        items: _items2,
-        menuPlacement: menuPlacement,
-        nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
-        onMenuLeave: handleMenuLeave,
-        open: isOpened,
-        type: nestedListType
-      }, void 0)]
-    }, void 0)
-  }), void 0);
+const flyoutListItemClassName = 'dot-flyout-list-item';
+const flyoutItemLinkClassName = 'dot-flyout-item-link';
+const listItemLinkClassName = 'dot-list-item-link';
+const styledListItemElement = elementType => {
+  return styled(elementType).withConfig({
+    displayName: "ListItemstyles",
+    componentId: "sc-1fawh8v-0"
+  })(["", ""], ({
+    theme
+  }) => css(["&.", "{&.", "{padding:0;}.dot-tooltip{display:flex;width:100%;}p.MuiTypography-root{flex-grow:2;margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", ";}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary));
 };
+const StyledListItem = styledListItemElement(ListItem);
+const StyledListItemButton = styledListItemElement(ListItemButton);
+
 const NestedList = ({
   ariaLabel,
   anchorEl,
@@ -2789,7 +2605,8 @@ const NestedList = ({
         component: "div",
         "data-testid": dataTestId,
         disablePadding: true,
-        items: items
+        items: items,
+        width: '100%'
       }, parentItemIndex)
     }), void 0);
   }
@@ -2825,8 +2642,8 @@ const NestedList = ({
                 children: text
               }), void 0)]
             }), void 0)
-          }), `${parentItemIndex}-${index}-tooltip`)
-        }), `${parentItemIndex}-${index}`),
+          }), `${parentItemIndex}-${CreateUUID()}-tooltip`)
+        }), `${parentItemIndex}-${CreateUUID()}`),
         classes: '',
         key: String(index)
       };
@@ -2870,6 +2687,240 @@ const NestedList = ({
   }
 };
 
+const DotListItem = ({
+  ariaLabel,
+  ariaRole: _ariaRole = 'listitem',
+  className,
+  component: _component = 'li',
+  'data-testid': dataTestId,
+  divider: _divider = false,
+  endIcon,
+  href,
+  isOpened: _isOpened = false,
+  onClick,
+  onMenuLeave,
+  items: _items = [],
+  menuPlacement,
+  nestedDrawerLeftSpacing,
+  nestedListType,
+  primaryText,
+  secondaryText,
+  selected,
+  startIcon,
+  target,
+  text,
+  tooltip,
+  tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [navIsOpened, setNavIsOpened] = useState(_isOpened);
+  const hasChildren = _items.length > 0;
+  const isFlyout = nestedListType === 'menu' && hasChildren;
+  const showEndIcon = endIcon || hasChildren;
+  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '');
+  const toggleOpen = event => {
+    setAnchorEl(event.currentTarget);
+    setNavIsOpened(!navIsOpened);
+  };
+  const handleClick = event => {
+    const 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);
+    }
+  };
+  const handleMenuLeave = event => {
+    onMenuLeave(event);
+  };
+  const renderListItemText = () => primaryText && secondaryText ? jsx(ListItemText, {
+    primary: primaryText,
+    secondary: secondaryText
+  }, void 0) : jsx(DotTypography, Object.assign({
+    variant: "body1"
+  }, {
+    children: text
+  }), void 0);
+  const renderListItemEndIcon = () => {
+    if (hasChildren || !endIcon) {
+      return jsx(DotIcon, {
+        iconId: hasChildren && getChevronIcon(nestedListType, navIsOpened)
+      }, void 0);
+    }
+    return endIcon;
+  };
+  const renderListItemLink = jsxs(DotLink, Object.assign({
+    ariaLabel: ariaLabel || tooltip,
+    className: listItemLinkClassName,
+    href: href,
+    target: target,
+    underline: "none"
+  }, {
+    children: [startIcon && jsx(ListItemIcon, {
+      children: startIcon
+    }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+  }), void 0);
+  const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
+  return jsxs(Fragment, {
+    children: [jsx(ListItem, Object.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: jsx(DotTooltip, Object.assign({
+        "data-testid": `${dataTestId}-tooltip`,
+        placement: _tooltipPlacement,
+        title: tooltip
+      }, {
+        children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
+          children: [startIcon && jsx(ListItemIcon, {
+            children: startIcon
+          }, void 0), renderListItemText(), showEndIcon && renderListItemEndIcon()]
+        }, void 0)
+      }), void 0)
+    }), void 0), hasChildren && 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);
+};
+
+const DotClickAwayListener = ({
+  children,
+  disableReactTree: _disableReactTree = false,
+  onClickAway
+}) => {
+  return jsx(ClickAwayListener, {
+    children: children,
+    disableReactTree: _disableReactTree,
+    onClickAway: onClickAway
+  }, void 0);
+};
+
+const DotList = ({
+  ariaLabel,
+  ariaRole: _ariaRole = 'list',
+  children,
+  className,
+  component: _component = 'ul',
+  'data-testid': dataTestId,
+  dense: _dense = false,
+  disablePadding: _disablePadding = false,
+  items: _items = [],
+  menuPlacement: _menuPlacement = 'right-start',
+  nestedDrawerLeftSpacing: _nestedDrawerLeftSpacing = 240,
+  nestedListType: _nestedListType = 'expandable',
+  width: _width = 240
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$$, className);
+  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
+  const listRef = useRef();
+  const [listItemIndex, setListItemIndex] = useState(null);
+  const updateSelectedListItem = currentIndex => {
+    currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
+  };
+  const handleClickAway = () => {
+    setListItemIndex(null);
+  };
+  return jsx(DotClickAwayListener, Object.assign({
+    onClickAway: handleClickAway
+  }, {
+    children: jsxs(StyledList, Object.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((item, index) => {
+        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.href && !item.onClick ? null : handleListItemClick;
+        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", Object.assign({
+            onClick: item.onClick,
+            role: "listitem"
+          }, {
+            children: item.child
+          }), `item-child-${CreateUUID()}`);
+        }
+        if (item.divider) {
+          return jsx(DotListDivider, {
+            index: index,
+            item: item
+          }, `divider-${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: 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);
+};
+
 const DotInputLabel = ({
   'data-testid': dataTestId,
   disabled: _disabled = false,
@@ -8709,6 +8760,7 @@ const StyledTableBody = styled(TableBody).withConfig({
  * to determine the functionality of the table.
  */
 const DotTableBody = ({
+  actionsMenuPlacement: _actionsMenuPlacement = 'bottom-end',
   collapsibleTableBody,
   columns,
   data,
@@ -8762,7 +8814,7 @@ const DotTableBody = ({
       disablePortal: true,
       id: menuId,
       menuItems: menuProps,
-      menuPlacement: "bottom-end",
+      menuPlacement: _actionsMenuPlacement,
       onLeave: onLeave,
       open: open
     }, void 0)]
@@ -9029,6 +9081,7 @@ function stableSort(array, comparator) {
  *  creating a common structure for tables in the system.
  */
 const DotTable = ({
+  actionsMenuPlacement: _actionsMenuPlacement = 'bottom-end',
   ariaLabel,
   bodyTypography: _bodyTypography = TABLE_TYPOGRAPHY_VARIANT,
   className,
@@ -9210,6 +9263,7 @@ const DotTable = ({
           sortable: _sortable,
           typography: _headerTypography
         }, void 0), jsx(DotTableBody, {
+          actionsMenuPlacement: _actionsMenuPlacement,
           collapsibleTableBody: collapsibleTableBody,
           columns: columns,
           data: tableData,
@@ -10581,16 +10635,4 @@ const DotTimePicker = ({
   }), void 0);
 };
 
-const DotClickAwayListener = ({
-  children,
-  disableReactTree: _disableReactTree = false,
-  onClickAway
-}) => {
-  return jsx(ClickAwayListener, {
-    children: children,
-    disableReactTree: _disableReactTree,
-    onClickAway: onClickAway
-  }, void 0);
-};
-
 export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, checkIfValidDate, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };