@digital-ai/dot-components 1.4.0 → 1.5.0

package/dot-components.esm.js

@@ -127,12 +127,10 @@ var DotAccordion = function DotAccordion(_ref) {
       className = _ref.className,
       _ref$dataTestid = _ref['data-testid'],
       dataTestId = _ref$dataTestid === void 0 ? 'dot-accordion' : _ref$dataTestid,
-      _ref$defaultExpanded = _ref.defaultExpanded,
-      defaultExpanded = _ref$defaultExpanded === void 0 ? null : _ref$defaultExpanded,
+      defaultExpanded = _ref.defaultExpanded,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$expanded = _ref.expanded,
-      expanded = _ref$expanded === void 0 ? null : _ref$expanded,
+      expanded = _ref.expanded,
       _ref$hasElevation = _ref.hasElevation,
       hasElevation = _ref$hasElevation === void 0 ? false : _ref$hasElevation,
       onChange = _ref.onChange,
@@ -149,11 +147,11 @@ var DotAccordion = function DotAccordion(_ref) {
       setElevation = _useState[1];
 
   useEffect(function () {
-    if (defaultExpanded !== null) {
+    if (defaultExpanded !== undefined) {
       console.warn('The use of `defaultExpanded` is deprecated and will be removed in the next major release, please use `expanded` instead.');
     }
 
-    if (onChange && expanded === null) {
+    if (onChange && expanded === undefined) {
       console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
     }
   }, []);
@@ -162,8 +160,8 @@ var DotAccordion = function DotAccordion(_ref) {
   }, [hasElevation]);
   var dftExpanded = defaultExpanded;
 
-  if (dftExpanded === null) {
-    dftExpanded = expanded === null ? false : expanded;
+  if (dftExpanded === undefined) {
+    dftExpanded = expanded === undefined ? false : expanded;
   }
 
   return /*#__PURE__*/React__default.createElement(StyledAccordion, {
@@ -172,8 +170,8 @@ var DotAccordion = function DotAccordion(_ref) {
     "data-testid": dataTestId,
     defaultExpanded: dftExpanded,
     disabled: disabled,
-    expanded: onChange ? expanded : null,
     elevation: elevation,
+    expanded: onChange ? expanded : undefined,
     onChange: onChange,
     square: square
   }, /*#__PURE__*/React__default.createElement(AccordionSummary, {
@@ -183,8 +181,8 @@ var DotAccordion = function DotAccordion(_ref) {
       iconId: "chevron-down"
     })
   }, startIcon, /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: "body1",
-    noWrap: noWrap
+    noWrap: noWrap,
+    variant: "body1"
   }, /*#__PURE__*/React__default.createElement(DotTooltip, {
     title: noWrap ? summary : ''
   }, summary))), /*#__PURE__*/React__default.createElement(AccordionDetails, {
@@ -548,8 +546,8 @@ var DotIconButton = function DotIconButton(_ref) {
     },
     color: color,
     "data-testid": dataTestId,
-    disabled: disabled,
     disableRipple: disableRipple,
+    disabled: disabled,
     onClick: function onClick(event) {
       return _onClick && _onClick(event);
     },
@@ -613,8 +611,8 @@ var DotLink = function DotLink(_ref) {
     "data-testid": dataTestId,
     href: href,
     onClick: onClick,
-    onMouseEnter: onMouseEnter,
     onKeyPress: handleKeyPress,
+    onMouseEnter: onMouseEnter,
     rel: rel,
     tabIndex: tabIndex,
     target: target,
@@ -1179,34 +1177,13 @@ var getAvatarColorForInputText = function getAvatarColorForInputText(value) {
   return colorOptions[numberFromValue % colorOptions.length];
 };
 
-var DotAvatar = function DotAvatar(_ref) {
-  var alt = _ref.alt,
-      ariaLabel = _ref.ariaLabel,
-      className = _ref.className,
-      _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'div' : _ref$component,
-      color = _ref.color,
-      dataTestId = _ref['data-testid'],
+var AvatarContent = function AvatarContent(_ref) {
+  var dataTestId = _ref['data-testid'],
       iconId = _ref.iconId,
       imageSrc = _ref.imageSrc,
-      _onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? alt : _ref$text,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'image' : _ref$type,
-      tooltip = _ref.tooltip,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'circular' : _ref$variant,
-      style = _ref.style;
-  var rootClasses = useStylesWithRootClass(rootClassName$C, className);
-
-  var getAvatarColor = function getAvatarColor() {
-    if (color) return color;
-    if (text && text !== alt) return getAvatarColorForInputText(text);
-    return 'default';
-  };
+      size = _ref.size,
+      text = _ref.text,
+      type = _ref.type;
 
   var parsedText = function parsedText() {
     var textArray = text.split(' ');
@@ -1228,32 +1205,79 @@ var DotAvatar = function DotAvatar(_ref) {
     return size === 'small' ? size : 'medium';
   };
 
+  if (type === 'icon' || type === 'image' && !imageSrc) {
+    return /*#__PURE__*/React__default.createElement(DotIcon, {
+      "data-testid": dataTestId + "-icon",
+      fontSize: getIconFontSizeFromAvatarSize(),
+      iconId: iconId || 'user'
+    });
+  }
+
+  if (type === 'text') {
+    return /*#__PURE__*/React__default.createElement(DotTypography, {
+      variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
+    }, parsedText());
+  }
+
+  return null;
+};
+
+var DotAvatar = function DotAvatar(_ref2) {
+  var alt = _ref2.alt,
+      ariaLabel = _ref2.ariaLabel,
+      className = _ref2.className,
+      _ref2$component = _ref2.component,
+      component = _ref2$component === void 0 ? 'div' : _ref2$component,
+      color = _ref2.color,
+      dataTestId = _ref2['data-testid'],
+      iconId = _ref2.iconId,
+      imageSrc = _ref2.imageSrc,
+      _onClick = _ref2.onClick,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+      _ref2$text = _ref2.text,
+      text = _ref2$text === void 0 ? alt : _ref2$text,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'image' : _ref2$type,
+      tooltip = _ref2.tooltip,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'circular' : _ref2$variant,
+      style = _ref2.style;
+  var rootClasses = useStylesWithRootClass(rootClassName$C, className);
+
+  var getAvatarColor = function getAvatarColor() {
+    if (color) return color;
+    if (text && text !== alt) return getAvatarColorForInputText(text);
+    return 'default';
+  };
+
   return /*#__PURE__*/React__default.createElement(DotTooltip, {
     title: tooltip
   }, /*#__PURE__*/React__default.createElement(StyledAvatar, {
     alt: alt,
     "aria-label": ariaLabel,
     className: size,
-    color: getAvatarColor(),
-    component: _onClick ? 'button' : component,
     classes: {
       root: rootClasses,
       img: 'dot-img'
     },
+    color: getAvatarColor(),
+    component: _onClick ? 'button' : component,
     "data-testid": dataTestId,
     onClick: function onClick(event) {
       return _onClick ? _onClick(event) : null;
     },
     src: type === 'image' ? imageSrc : null,
-    variant: variant,
-    style: style
-  }, type === 'icon' || type === 'image' && !imageSrc ? /*#__PURE__*/React__default.createElement(DotIcon, {
-    "data-testid": dataTestId + "-icon",
-    iconId: iconId ? iconId : 'user',
-    fontSize: getIconFontSizeFromAvatarSize()
-  }) : type === 'text' ? /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
-  }, parsedText()) : null));
+    style: style,
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(AvatarContent, {
+    "data-testid": dataTestId,
+    iconId: iconId,
+    imageSrc: imageSrc,
+    text: text,
+    type: type,
+    size: size
+  })));
 };
 
 var _templateObject$E;
@@ -1290,16 +1314,16 @@ var DotDrawer = function DotDrawer(_ref) {
       width = _ref$width === void 0 ? '256px' : _ref$width;
   var rootClasses = useStylesWithRootClass(rootClassName$B, className);
   return /*#__PURE__*/React__default.createElement(StyledDrawer, {
-    "aria-label": ariaLabel,
-    "data-testid": dataTestId,
+    ModalProps: ModalProps,
+    PaperProps: PaperProps,
     anchor: anchor,
+    "aria-label": ariaLabel,
     classes: {
       root: rootClasses,
       paper: 'dot-drawer-paper'
     },
+    "data-testid": dataTestId,
     height: height,
-    ModalProps: ModalProps,
-    PaperProps: PaperProps,
     onClose: function onClose(event) {
       return _onClose && _onClose(event);
     },
@@ -1490,10 +1514,10 @@ var DotMenu = function DotMenu(_ref) {
       return /*#__PURE__*/React__default.createElement(MenuItem, {
         "aria-label": item.ariaLabel,
         className: "dot-li " + (item.classes ? item.classes : ''),
+        key: index,
         onClick: function onClick(event) {
           return handleSelect(event, item.key);
         },
-        key: index,
         style: {
           height: calculateItemHeight()
         }
@@ -1502,7 +1526,7 @@ var DotMenu = function DotMenu(_ref) {
   });
 };
 
-var _templateObject$B, _templateObject2$7;
+var _templateObject$B, _templateObject2$8;
 var rootClassName$y = 'dot-list';
 var listItemRootClass = 'dot-list-item';
 var nestedListClassName = 'dot-nested-list';
@@ -1514,7 +1538,7 @@ var StyledList = styled(List)(_templateObject$B || (_templateObject$B = _taggedT
   var theme = _ref.theme;
   return css(["&.", "{background:", ";&.", " .", "{padding-left:", "px;}.", " .dot-drawer-paper{z-index:", ";}.MuiListSubheader-root{padding:0;.MuiTypography-root{padding:", "px;}}}"], rootClassName$y, theme.palette.layer.n0, nestedListClassName, listItemRootClass, theme.spacing(4), nestedDrawerClassName, levelBottom, theme.spacing(1));
 });
-var StyledListItem = styled(ListItem)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+var StyledListItem = styled(ListItem)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", "px;}.dot-list-item-end-icon{min-width:auto;}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
 });
@@ -1577,8 +1601,8 @@ var NestedList = function NestedList(_ref) {
           component: href && !onClick ? 'a' : null,
           href: href,
           key: parentItemIndex + "-" + index,
-          target: target,
-          onClick: onClick
+          onClick: onClick,
+          target: target
         }, /*#__PURE__*/React__default.createElement("span", {
           className: flyoutSpanClasses
         }, startIconId && startIcon, /*#__PURE__*/React__default.createElement(DotTypography, {
@@ -1589,30 +1613,30 @@ var NestedList = function NestedList(_ref) {
       };
     });
     return /*#__PURE__*/React__default.createElement(DotMenu, {
-      ariaLabel: ariaLabel,
       anchorEl: anchorEl,
+      ariaLabel: ariaLabel,
       className: flyoutMenuClassName,
       id: CreateUUID(),
+      key: parentItemIndex,
       menuItemHeight: "auto",
       menuItems: menuItems,
       menuPlacement: menuPlacement,
       onLeave: onMenuLeave,
-      open: open,
-      key: parentItemIndex
+      open: open
     });
   }
 
   if (type === 'drawer') {
     return /*#__PURE__*/React__default.createElement(DotDrawer, {
-      anchor: "left",
-      className: nestedDrawerClassName,
-      "data-testid": "nested-drawer",
-      open: open,
       PaperProps: {
         style: {
           left: nestedDrawerLeftSpacing + "px"
         }
       },
+      anchor: "left",
+      className: nestedDrawerClassName,
+      "data-testid": "nested-drawer",
+      open: open,
       variant: "persistent"
     }, /*#__PURE__*/React__default.createElement(DotList, {
       ariaLabel: ariaLabel,
@@ -1705,8 +1729,8 @@ var DotList = function DotList(_ref3) {
 
     if (item.divider) {
       return /*#__PURE__*/React__default.createElement(DotListDivider, {
-        item: item,
         index: index,
+        item: item,
         key: "divider-" + index
       });
     }
@@ -1719,12 +1743,12 @@ var DotList = function DotList(_ref3) {
       href: item.href,
       isOpened: listItemIndex === index,
       items: item.items,
-      onClick: item.href && !item.onClick ? null : handleListItemClick,
-      onMenuLeave: handleMenuLeave,
       key: index,
       menuPlacement: menuPlacement,
       nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
       nestedListType: nestedListType,
+      onClick: item.href && !item.onClick ? null : handleListItemClick,
+      onMenuLeave: handleMenuLeave,
       primaryText: item.primaryText,
       secondaryText: item.secondaryText,
       selected: item.selected,
@@ -1857,11 +1881,11 @@ var DotListItem = function DotListItem(_ref4) {
     className: "toggle-display",
     iconId: getChevronIcon()
   })) : endIconId && endIcon)), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
-    ariaLabel: "nested list",
     anchorEl: anchorEl,
+    ariaLabel: "nested list",
     items: items,
-    nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
     menuPlacement: menuPlacement,
+    nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
     onMenuLeave: handleMenuLeave,
     open: isOpened,
     type: nestedListType
@@ -2134,13 +2158,13 @@ function SvgLogoDigitalAiWhite(_ref, svgRef) {
 
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgLogoDigitalAiWhite);
 
-var _templateObject$z, _templateObject2$6;
+var _templateObject$z, _templateObject2$7;
 var rootClassName$w = 'dot-app-toolbar';
 var denseClassName = 'dense';
 var StyledMainMenu = styled(DotDrawer)(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function () {
   return css(["&.dot-main-menu{&.", " .dot-drawer-paper{top:48px;.dot-sidebar{height:calc(100vh - 48px);}}.dot-drawer-paper{top:64px;padding:0;.dot-sidebar{height:calc(100vh - 64px);}}}"], denseClassName);
 });
-var StyledAppToolbar = styled.header(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var StyledAppToolbar = styled.header(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return css(["&.", "{align-items:center;background:", ";border-bottom:4px solid ", ";box-sizing:border-box;color:", ";display:flex;height:64px;padding:", ";position:fixed;width:100%;z-index:", ";top:0;left:0;right:0;&.", "{height:48px;.divider{height:32px;}}.divider{height:36px;width:1px;background:", ";}.dot-icon-btn{border:", ";color:", ";&:hover,&:active,&:focus{background:", ";}}.dot-main-menu-btn{padding:", ";text-align:center;}.dot-branding{align-items:center;display:flex;padding:", ";.primary-logo,.app-logo{margin-right:", "px;}.primary-logo,.dot-app-logo{display:flex;max-width:200px;svg,img{max-height:36px;max-width:200px;}}a{line-height:0;}.dot-product-name{color:", ";font-size:18px;margin:", ";}.divider{margin-left:", "px;}}div.dot-right-side{display:flex;flex-grow:2;justify-content:flex-end;}.avatar-wrapper{display:flex;align-items:center;justify-content:center;width:40px;button.dot-avatar:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";}}}"], rootClassName$w, theme.palette.product === 'agility' ? theme.palette.agilityInterface.headerBg : theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(1.5, 2, 1.5, 0), levelFourth, denseClassName, n400$2, theme.palette.product === 'agility' && 'none', theme.palette.grey[100], theme.palette.product === 'agility' && theme.palette.agilityInterface.topBarIconHoverBg, theme.spacing(0, 1), theme.spacing(0, 2), theme.spacing(1.5), theme.palette.grey[100], theme.spacing(0, 1.5), theme.spacing(2), theme.palette.layer.n900, theme.palette.layer.n0);
 });
@@ -2172,8 +2196,9 @@ var DotAppToolbar = function DotAppToolbar(_ref) {
   var showMainMenu = mainMenu || mainMenuItems;
   var displayAppLogo = appLogo || appLogoSmall;
   var mainMenuRef = useRef(null);
-  var rootClasses = useStylesWithRootClass(rootClassName$w, className, dense ? denseClassName : '');
-  var mainMenuClasses = useStylesWithRootClass('dot-main-menu', dense ? denseClassName : '', menuOpen ? 'open' : '');
+  var denseClass = dense ? denseClassName : '';
+  var rootClasses = useStylesWithRootClass(rootClassName$w, className, denseClass);
+  var mainMenuClasses = useStylesWithRootClass('dot-main-menu', denseClass, menuOpen ? 'open' : '');
   var targetBreakpoint = useMediaQuery(function (theme) {
     return theme.breakpoints.up('md');
   });
@@ -2230,8 +2255,8 @@ var DotAppToolbar = function DotAppToolbar(_ref) {
       return updateMenuOpen(false);
     },
     open: menuOpen,
-    width: mainMenuWidth + 'px',
-    variant: "persistent"
+    variant: "persistent",
+    width: mainMenuWidth + 'px'
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: mainMenuRef
   }, mainMenuItems ? /*#__PURE__*/React__default.createElement(DotSidebar, {
@@ -2265,10 +2290,10 @@ var DotAppToolbar = function DotAppToolbar(_ref) {
       className: item.className,
       iconId: item.iconId,
       iconSize: "default",
+      key: index,
       onClick: function onClick(event) {
         return item.onClick && item.onClick(event);
       },
-      key: index,
       size: "medium",
       tooltip: item.tooltip
     });
@@ -2335,13 +2360,13 @@ var DotChip = function DotChip(_ref) {
   });
 };
 
-var _templateObject$w, _templateObject2$5;
+var _templateObject$w, _templateObject2$6;
 var rootClassName$t = 'dot-text-field';
 var rootSelectClassName = 'dot-select-field';
 var warningClassName = 'dot-warning';
 var adornmentIconClassName = 'dot-adornment-icon';
 var StyledAdornment = styled(InputAdornment)(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"])));
-var StyledTextField = styled(TextField)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var StyledTextField = styled(TextField)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       InputProps = _ref.InputProps;
   return css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$t, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$t, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
@@ -2422,18 +2447,18 @@ var DotButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     },
     color: color,
     "data-testid": dataTestId,
-    disabled: disabled,
     disableRipple: disableRipple,
+    disabled: disabled,
     endIcon: endIcon,
     fullWidth: fullWidth,
     onClick: function onClick(event) {
       return _onClick && _onClick(event);
     },
     ref: ref,
-    variant: variant,
     size: size,
     startIcon: startIcon,
-    type: isSubmit ? 'submit' : 'button'
+    type: isSubmit ? 'submit' : 'button',
+    variant: variant
   }, children));
 });
 
@@ -2583,9 +2608,7 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
 
       /* Add this to short circuit blur event (otherwise button click will not work):
        * https://github.com/mui-org/material-ui/issues/19038 */
-      onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
-      },
+      onBlur: handleBlur,
       onKeyDown: function onKeyDown(event) {
         if (event.key === 'Tab' && textFieldInput) {
           event.preventDefault();
@@ -2593,7 +2616,9 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
         }
       },
       // We want to close the popper each time focus is shifted from action item
-      onBlur: handleBlur
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      }
     }, /*#__PURE__*/React__default.createElement(DotButton, {
       "data-testid": "dot-action-item-btn",
       disableRipple: true,
@@ -2609,6 +2634,7 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(StyledAutocomplete, {
+    PopperComponent: DotPopper,
     "aria-label": ariaLabel,
     classes: {
       root: rootClasses
@@ -2625,6 +2651,7 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
       return option.group;
     } : undefined,
     multiple: multiple,
+    onBlur: handleBlur,
     onChange: function onChange(event, val, reason) {
       valuesChanged({
         event: event,
@@ -2633,20 +2660,18 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
       });
       setIsOpened(false);
     },
-    open: isOpened,
-    options: sortOptions(),
-    PopperComponent: DotPopper,
-    // We want to close the popper each time focus is shifted from the autocomplete
-    onBlur: handleBlur,
     onClose: function onClose(event) {
       // We want to close popper in each occasion where focus isn't set to action item
       if (!('relatedTarget' in event) || event.relatedTarget !== actionItemRef.current) {
         setIsOpened(false);
       }
     },
+    // We want to close the popper each time focus is shifted from the autocomplete
     onOpen: function onOpen() {
       return setIsOpened(true);
     },
+    open: isOpened,
+    options: sortOptions(),
     renderInput: function renderInput(params) {
       return (
         /*#__PURE__*/
@@ -2670,9 +2695,6 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
           inputRef: textFieldRef,
           label: label,
           name: label,
-          placeholder: showPlaceholder ? placeholder : undefined,
-          required: false,
-          variant: "outlined",
           onKeyDown: function onKeyDown(event) {
             var _a; // Intercept 'tab' key press while action item element exists
 
@@ -2681,7 +2703,10 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
               event.preventDefault();
               (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
-          }
+          },
+          placeholder: showPlaceholder ? placeholder : undefined,
+          required: false,
+          variant: "outlined"
         }))
       );
     },
@@ -2754,28 +2779,221 @@ var DotBadge = function DotBadge(_ref) {
   }, children);
 };
 
-var _templateObject$t;
+var _templateObject$t, _templateObject2$5;
 var rootClassName$q = 'dot-breadcrumbs';
-var StyledBreadcrumbs = styled(Breadcrumbs)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var breadcrumbsWrapperClass = 'dot-breadcrumbs-wrapper';
+var StyledBreadcrumbsWrapper = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}"], rootClassName$q, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+  return css(["&.", "{overflow:hidden;.dot-breadcrumbs-menu{.MuiMenuItem-root{padding:0;}a.breadcrumb{width:100%;padding:", ";}}}"], rootClassName$q, theme.spacing(0.5, 2));
+});
+var StyledBreadcrumbs = styled(Breadcrumbs)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$q, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
 });
 
 var compareWidth = function compareWidth(parentEl, childEl) {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
 };
 
+var getItemsAfterCollapse = function getItemsAfterCollapse(adjustMaxItems, visibleItemsNumber, maxItems) {
+  // Check if maximum number of items is defined via prop
+  if (maxItems) {
+    return adjustMaxItems ? 1 : 2;
+  }
+
+  if (visibleItemsNumber > 1) return visibleItemsNumber - 1;
+  if (visibleItemsNumber === 1) return visibleItemsNumber;
+  return undefined;
+};
+var getMaxItems = function getMaxItems(adjustMaxItems, visibleItemsNumber, maxItems) {
+  // Check if maximum number of items is defined via prop
+  if (maxItems) {
+    return adjustMaxItems ? 2 : maxItems;
+  }
+
+  return visibleItemsNumber > 0 ? visibleItemsNumber : undefined;
+};
+var getWidthFromRef = function getWidthFromRef(ref) {
+  var _a;
+
+  return (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+};
+var checkIfFirstItemAfterCollapse = function checkIfFirstItemAfterCollapse(currentIndex, items, itemsAfterCollapse) {
+  return currentIndex === items.length - itemsAfterCollapse;
+};
+var getExpandElement = function getExpandElement(breadcrumbElement) {
+  var elements = breadcrumbElement.getElementsByClassName('MuiBreadcrumbs-ol');
+  if (!elements || elements.length !== 1) return null;
+  return elements[0].getElementsByClassName('MuiButtonBase-root')[0];
+};
+var getInitialMaxVisibleItems = function getInitialMaxVisibleItems(items, maxItems) {
+  return maxItems || items && Array.isArray(items) && items.length || 0;
+};
+var getMenuItems = function getMenuItems(items, itemsAfterCollapse) {
+  if (!items || !items.length || !isFinite(itemsAfterCollapse) || itemsAfterCollapse < 1 || itemsAfterCollapse >= items.length - 1) return [];
+  var sliceEnd = items.length - itemsAfterCollapse;
+  var menuItems = items.slice(1, sliceEnd);
+  if (!menuItems.length) return [];
+  return menuItems.map(function (item, index) {
+    var itemChildren = /*#__PURE__*/React__default.createElement(DotLink, {
+      ariaLabel: item.ariaLabel,
+      className: "breadcrumb",
+      color: "inherit",
+      href: item.href,
+      key: index,
+      onClick: item.onClick,
+      tabIndex: 0,
+      underline: "none"
+    }, item.text);
+    return {
+      children: itemChildren,
+      key: index.toString()
+    };
+  });
+};
+var addListenersToMenu = function addListenersToMenu(expandElement, eventListener) {
+  expandElement.addEventListener('click', eventListener);
+  expandElement.addEventListener('keydown', eventListener);
+};
+var removeListenersFromMenu = function removeListenersFromMenu(expandElement, eventListener) {
+  expandElement.removeEventListener('click', eventListener);
+  expandElement.removeEventListener('keydown', eventListener);
+};
+var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, itemsAfterCollapse) {
+  var firstItemRef = refs.firstItemRef,
+      lastItemRef = refs.lastItemRef;
+  return items.map(function (item, index) {
+    var ariaLabel = item.ariaLabel,
+        href = item.href,
+        onClick = item.onClick,
+        text = item.text,
+        underline = item.underline;
+
+    if (index === items.length - 1) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        "aria-label": ariaLabel,
+        className: "breadcrumb current-page",
+        key: index,
+        ref: lastItemRef
+      }, text);
+    } else {
+      var isFirstItemAfterCollapse = checkIfFirstItemAfterCollapse(index, items, itemsAfterCollapse);
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: index,
+        ref: isFirstItemAfterCollapse ? firstItemRef : undefined
+      }, /*#__PURE__*/React__default.createElement(DotLink, {
+        ariaLabel: ariaLabel,
+        className: "breadcrumb",
+        color: "inherit",
+        href: href,
+        onClick: onClick,
+        tabIndex: 0,
+        underline: underline
+      }, text));
+    }
+  });
+};
+
+var useBreadcrumbsResizer = function useBreadcrumbsResizer(breadcrumbsRightCoord, breadcrumbItemsProps, refs) {
+  var firstItemRef = refs.firstItemRef,
+      lastItemRef = refs.lastItemRef;
+  var items = breadcrumbItemsProps.items,
+      maxItems = breadcrumbItemsProps.maxItems;
+  var initialMaxVisibleItems = {
+    maxVisibleItems: getInitialMaxVisibleItems(items, maxItems),
+    lastRemovedItemWidth: undefined
+  };
+
+  var _useState = useState(initialMaxVisibleItems),
+      breadcrumbsSettings = _useState[0],
+      setBreadcrumbsSettings = _useState[1];
+  /* Adjust number of visible items after collapse */
+
+
+  useEffect(function () {
+    // Automatic resizing is performed only when 'maxItem' is NOT set
+    if (maxItems !== undefined || !(lastItemRef === null || lastItemRef === void 0 ? void 0 : lastItemRef.current) || !breadcrumbsRightCoord) return; // Get width of breadcrumb's last item
+
+    var lastItemWidth = getWidthFromRef(lastItemRef); // Get width of breadcrumb's first item after collapse
+    // Sometimes first item can also be last item
+
+    var firstItemWidth = getWidthFromRef(firstItemRef) || lastItemWidth; // Get left coordinate of the last item
+
+    var lastItemLeftCoord = lastItemRef.current.getBoundingClientRect().left;
+    var lastRemovedItemWidth = breadcrumbsSettings.lastRemovedItemWidth,
+        maxVisibleItems = breadcrumbsSettings.maxVisibleItems;
+    var availableSpace = breadcrumbsRightCoord - lastItemLeftCoord;
+    var hasHiddenItems = maxVisibleItems < items.length;
+    var isLastRemovedItemSuitable = lastRemovedItemWidth !== undefined ? availableSpace - lastRemovedItemWidth > MIN_AVAILABLE_SPACE : false;
+
+    if (availableSpace < MIN_AVAILABLE_SPACE && maxVisibleItems > 2) {
+      setBreadcrumbsSettings(function (prevValue) {
+        return {
+          maxVisibleItems: prevValue.maxVisibleItems - 1,
+          lastRemovedItemWidth: firstItemWidth + ITEMS_SEPARATOR_SPACE
+        };
+      });
+    } else if (hasHiddenItems && (lastRemovedItemWidth === undefined || isLastRemovedItemSuitable)) {
+      setBreadcrumbsSettings(function (prevValue) {
+        return {
+          maxVisibleItems: prevValue.maxVisibleItems + 1,
+          lastRemovedItemWidth: undefined
+        };
+      });
+    }
+  }, [maxItems, breadcrumbsRightCoord, lastItemRef === null || lastItemRef === void 0 ? void 0 : lastItemRef.current, firstItemRef === null || firstItemRef === void 0 ? void 0 : firstItemRef.current, breadcrumbsSettings]);
+  return [breadcrumbsSettings];
+};
+
+var MIN_AVAILABLE_SPACE = 60;
+var ITEMS_SEPARATOR_SPACE = 20;
+var useBreadcrumbsObserver = function useBreadcrumbsObserver(items, maxItems) {
+  var breadcrumbRef = useRef();
+  var firstItemRef = useRef();
+  var lastItemRef = useRef();
+
+  var _useState = useState(null),
+      breadcrumbsRightCoord = _useState[0],
+      setBreadcrumbsRightCoord = _useState[1];
+
+  var _useBreadcrumbsResize = useBreadcrumbsResizer(breadcrumbsRightCoord, {
+    items: items,
+    maxItems: maxItems
+  }, {
+    firstItemRef: firstItemRef,
+    lastItemRef: lastItemRef
+  }),
+      breadcrumbsSettings = _useBreadcrumbsResize[0];
+  /* Observe breadcrumbs width change and store it in state */
+
+
+  useEffect(function () {
+    // Automatic resizing is performed only when 'maxItem' is NOT set
+    if (maxItems !== undefined) return;
+    var breadcrumbsObserver = new ResizeObserver(function (entries) {
+      setBreadcrumbsRightCoord(entries[0].target.getBoundingClientRect().right);
+    });
+    breadcrumbsObserver.observe(breadcrumbRef.current);
+    return function () {
+      breadcrumbRef.current && breadcrumbsObserver.unobserve(breadcrumbRef.current);
+    };
+  }, [maxItems, breadcrumbRef, setBreadcrumbsRightCoord]);
+  return [{
+    breadcrumbRef: breadcrumbRef,
+    firstItemRef: firstItemRef,
+    lastItemRef: lastItemRef
+  }, breadcrumbsSettings.maxVisibleItems];
+};
+
 var DotBreadcrumbs = function DotBreadcrumbs(_ref) {
   var className = _ref.className,
       dataTestId = _ref['data-testid'],
       _ref$expansionMenu = _ref.expansionMenu,
       expansionMenu = _ref$expansionMenu === void 0 ? false : _ref$expansionMenu,
       items = _ref.items,
-      _ref$maxItems = _ref.maxItems,
-      maxItems = _ref$maxItems === void 0 ? 3 : _ref$maxItems,
+      maxItems = _ref.maxItems,
       minWidth = _ref.minWidth;
-  var rootClasses = useStylesWithRootClass(rootClassName$q, className);
-  var breadcrumbRef = useRef();
+  var wrapperRootClasses = useStylesWithRootClass(breadcrumbsWrapperClass, className);
   var wrapperRef = useRef();
 
   var _useState = useState(null),
@@ -2790,111 +3008,80 @@ var DotBreadcrumbs = function DotBreadcrumbs(_ref) {
       adjustMaxItems = _useState3[0],
       setAdjustMaxItems = _useState3[1];
 
+  var _useBreadcrumbsObserv = useBreadcrumbsObserver(items, maxItems),
+      _useBreadcrumbsObserv2 = _useBreadcrumbsObserv[0],
+      breadcrumbRef = _useBreadcrumbsObserv2.breadcrumbRef,
+      firstItemRef = _useBreadcrumbsObserv2.firstItemRef,
+      lastItemRef = _useBreadcrumbsObserv2.lastItemRef,
+      maxVisibleItems = _useBreadcrumbsObserv[1];
+
+  var itemsAfterCollapse = getItemsAfterCollapse(adjustMaxItems, maxVisibleItems, maxItems);
+  var menuItems = items.length > maxVisibleItems ? getMenuItems(items, itemsAfterCollapse) : [];
+  var breadcrumbItemRefs = {
+    firstItemRef: firstItemRef,
+    lastItemRef: lastItemRef
+  };
+
   var clickListener = function clickListener(event) {
+    if (event instanceof KeyboardEvent && event.key !== 'Enter') return;
     event.stopPropagation();
     setMenuOpen(function (currentMenuOpen) {
       return !currentMenuOpen;
     });
   };
 
-  var getExpandElement = function getExpandElement() {
-    var elements = document.getElementsByClassName('MuiBreadcrumbs-ol');
-    return elements.length === 1 ? elements[0].getElementsByClassName('MuiButtonBase-root')[0] : null;
-  };
-
-  var getMenuItems = function getMenuItems() {
-    return items.slice(1, items.length - 2).map(function (item, index) {
-      var itemChildren = /*#__PURE__*/React__default.createElement(DotLink, {
-        ariaLabel: item.ariaLabel,
-        className: "breadcrumb",
-        color: "inherit",
-        href: item.href,
-        key: index,
-        onClick: item.onClick,
-        tabIndex: 0,
-        underline: item.underline
-      }, item.text);
-      return {
-        children: itemChildren,
-        key: index.toString()
-      };
-    });
-  };
-
-  var menuItems = items.length > maxItems ? getMenuItems() : null;
-
   var onMenuLeave = function onMenuLeave(_event) {
     setMenuOpen(false);
   };
+  /* Build and connect expansion menu if 'expansionMenu' is set to true.
+    In order for this to be functioning properly we need to set 'items' in
+    the dependencies list as it will re-trigger hook if items array change.
+   */
+
 
   useEffect(function () {
-    if (expansionMenu) {
-      var expandElement = getExpandElement();
-
-      if (expandElement) {
-        setAnchorEl(expandElement);
-        expandElement.addEventListener('click', clickListener);
-        return function () {
-          expandElement.removeEventListener('click', clickListener);
-        };
-      }
+    if (!expansionMenu || !breadcrumbRef || !breadcrumbRef.current) return;
+    var expandElement = getExpandElement(breadcrumbRef.current);
+
+    if (expandElement) {
+      setAnchorEl(expandElement);
+      addListenersToMenu(expandElement, clickListener);
+      return function () {
+        return removeListenersFromMenu(expandElement, clickListener);
+      };
     }
-  }, []);
+  }, [expansionMenu, maxVisibleItems, adjustMaxItems, items]);
   useEffect(function () {
-    if ((breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) && (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+    if (maxItems && (breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) && (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
       setAdjustMaxItems(compareWidth(wrapperRef.current, breadcrumbRef.current));
     }
-  }, [breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current, wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: wrapperRef,
-    style: {
-      overflow: 'hidden'
-    }
+  }, [maxItems, breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current, wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
+  return /*#__PURE__*/React__default.createElement(StyledBreadcrumbsWrapper, {
+    className: wrapperRootClasses,
+    "data-testid": dataTestId && dataTestId + "-wrapper",
+    ref: wrapperRef
   }, /*#__PURE__*/React__default.createElement(StyledBreadcrumbs, {
     "aria-label": "breadcrumb",
     classes: {
-      root: rootClasses,
+      root: rootClassName$q,
       ol: 'dot-ol',
       li: 'dot-li'
     },
     "data-testid": dataTestId,
-    itemsAfterCollapse: adjustMaxItems ? 1 : 2,
-    maxItems: adjustMaxItems ? 2 : maxItems,
+    itemsAfterCollapse: itemsAfterCollapse,
+    maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
     ref: breadcrumbRef,
     separator: /*#__PURE__*/React__default.createElement(DotIcon, {
-      iconId: "chevron-right",
-      className: "separator"
+      className: "separator",
+      iconId: "chevron-right"
     }),
     style: {
       width: minWidth
     }
-  }, items.map(function (item, index) {
-    var ariaLabel = item.ariaLabel,
-        href = item.href,
-        onClick = item.onClick,
-        text = item.text,
-        underline = item.underline;
-
-    if (index === items.length - 1) {
-      return /*#__PURE__*/React__default.createElement("span", {
-        "aria-label": ariaLabel,
-        className: "breadcrumb current-page",
-        key: index
-      }, text);
-    } else {
-      return /*#__PURE__*/React__default.createElement(DotLink, {
-        ariaLabel: ariaLabel,
-        className: "breadcrumb",
-        color: "inherit",
-        href: href,
-        key: index,
-        onClick: onClick,
-        tabIndex: 0,
-        underline: underline
-      }, text);
-    }
-  })), /*#__PURE__*/React__default.createElement(DotMenu, {
+  }, mapBreadcrumbItems(items, breadcrumbItemRefs, itemsAfterCollapse)), /*#__PURE__*/React__default.createElement(DotMenu, {
     anchorEl: anchorEl,
+    className: "dot-breadcrumbs-menu",
+    disablePortal: true,
     id: "expand-menu",
     menuItems: menuItems,
     menuPlacement: "bottom-start",
@@ -2943,9 +3130,9 @@ var DotButtonToggle = function DotButtonToggle(_ref) {
   }, buttonOptions.map(function (option, key) {
     return /*#__PURE__*/React__default.createElement(ToggleButton, {
       "aria-label": option.ariaLabel,
-      disabled: option.disabled,
       disableFocusRipple: disableFocusRipple,
       disableRipple: disableRipple,
+      disabled: option.disabled,
       key: key,
       value: option.value
     }, option.iconId && /*#__PURE__*/React__default.createElement(DotIcon, {
@@ -3080,16 +3267,15 @@ function DotCheckbox(_ref) {
 
   return /*#__PURE__*/React__default.createElement(StyledFormControlLabel, {
     className: rootClasses,
-    labelPlacement: labelPlacement,
     control: /*#__PURE__*/React__default.createElement(StyledCheckbox, {
+      checked: checked,
       classes: {
         root: rootClassName$m
       },
-      checked: checked,
       color: "primary",
       "data-testid": dataTestId,
-      disabled: disabled,
       disableRipple: disableRipple,
+      disabled: disabled,
       id: id,
       indeterminate: indeterminate,
       inputProps: {
@@ -3103,7 +3289,8 @@ function DotCheckbox(_ref) {
       size: size,
       value: value
     }),
-    label: label
+    label: label,
+    labelPlacement: labelPlacement
   });
 }
 
@@ -3142,10 +3329,10 @@ function DotFormGroup(_ref) {
   var rootClasses = useStylesWithRootClass(rootClassName$l, className);
   return /*#__PURE__*/React__default.createElement(StyledFormGroup, {
     "aria-label": ariaLabel,
-    "data-testid": dataTestId,
     classes: {
       root: rootClasses
     },
+    "data-testid": dataTestId,
     role: "group",
     row: row
   }, children);
@@ -3223,15 +3410,15 @@ function DotCheckboxGroup(_ref) {
         disabled = _ref2.disabled,
         value = _ref2.value;
     return /*#__PURE__*/React__default.createElement(DotCheckbox, {
-      className: checkboxListItemClassName,
       checked: selectedOptions.some(function (option) {
         return option && option.value === value;
       }) || allChecked,
+      className: checkboxListItemClassName,
       disabled: disabled || disableGroup,
-      name: name,
       key: value,
       label: label,
       labelPlacement: labelPlacement,
+      name: name,
       onChange: function onChange(event) {
         return handleChange(event, {
           label: label,
@@ -3244,15 +3431,15 @@ function DotCheckboxGroup(_ref) {
   }) : null;
   return /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, {
     "aria-label": ariaLabel,
-    "data-testid": dataTestId,
-    className: wrapperClassName$1
+    className: wrapperClassName$1,
+    "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(StyledFormControl, {
     classes: {
       root: rootClasses
     },
+    component: "fieldset",
     disabled: disableGroup,
     error: error,
-    component: "fieldset",
     required: required
   }, groupLabel && /*#__PURE__*/React__default.createElement(FormLabel, {
     component: "legend"
@@ -3265,8 +3452,8 @@ function DotCheckboxGroup(_ref) {
   }, endIcon)), showSelectAll && /*#__PURE__*/React__default.createElement(DotCheckbox, {
     checked: selectedOptions.length === options.length,
     indeterminate: selectedOptions.length > 0 && selectedOptions.length < options.length,
-    name: name ? name + "-select-all" : 'dot-select-all',
     label: selectAllLabel,
+    name: name ? name + "-select-all" : 'dot-select-all',
     onChange: handleSelectAll,
     size: size,
     value: "select-all"
@@ -3338,13 +3525,13 @@ var DotDialog = function DotDialog(_ref) {
 
   return /*#__PURE__*/React__default.createElement(StyledDialog, {
     "aria-label": ariaLabel,
+    "aria-labelledby": "MuiDialogTitle-root",
     classes: {
       root: rootClasses
     },
     "data-testid": dataTestId,
-    open: isOpen,
     onClose: handleClickAway,
-    "aria-labelledby": "MuiDialogTitle-root"
+    open: isOpen
   }, /*#__PURE__*/React__default.createElement(DialogTitle, {
     disableTypography: true
   }, /*#__PURE__*/React__default.createElement(DotTypography, {
@@ -3365,22 +3552,22 @@ var DotDialog = function DotDialog(_ref) {
     autoFocus: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.autoFocus,
     className: cancelClasses,
     "data-testid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-testid'],
-    disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
     disableRipple: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableRipple,
+    disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
     endIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.endIcon,
-    startIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.startIcon,
     onClick: handleCancel,
+    startIcon: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.startIcon,
     titleTooltip: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.tooltip,
     type: "text"
   }, (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.label) || 'Cancel'), hasPrimaryAction && /*#__PURE__*/React__default.createElement(DotButton, {
     autoFocus: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.autoFocus,
     className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
     "data-testid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-testid'],
-    disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
     disableRipple: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableRipple,
+    disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
     endIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.endIcon,
-    startIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.startIcon,
     onClick: handleSubmit,
+    startIcon: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.startIcon,
     titleTooltip: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.tooltip,
     type: (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.type) || 'primary'
   }, (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.label) || 'OK')));
@@ -3590,13 +3777,13 @@ var CssGridDebug = function CssGridDebug(_ref) {
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "message"
   }, "NOT FOR PRODUCTION")), /*#__PURE__*/React__default.createElement(StyledGridOverlay, {
-    rows: "minmax(100vh, 100%)",
-    className: gridClassName
+    className: gridClassName,
+    rows: "minmax(100vh, 100%)"
   }, [].concat(Array(columns)).map(function (item, i) {
     return /*#__PURE__*/React__default.createElement(CssCell, {
-      start: i + 1,
       className: "" + cellClassName,
       key: i,
+      start: i + 1,
       width: 1
     });
   })));
@@ -3624,10 +3811,10 @@ var DotEmptyState = function DotEmptyState(_ref) {
     className: rootClasses,
     "data-testid": dataTestId
   }, imageSrc && /*#__PURE__*/React__default.createElement("img", {
-    className: "empty-state-image",
-    title: imageAltText || title,
     alt: imageAltText || title,
-    src: imageSrc
+    className: "empty-state-image",
+    src: imageSrc,
+    title: imageAltText || title
   }), /*#__PURE__*/React__default.createElement(DotTypography, {
     variant: "h2"
   }, title), subtitle && /*#__PURE__*/React__default.createElement(DotTypography, {
@@ -3985,7 +4172,16 @@ var DotInputText = function DotInputText(_ref) {
 
   var defaultInputValue = hasDebounce ? undefined : defaultValue;
   return /*#__PURE__*/React__default.createElement(StyledTextField, {
-    id: id,
+    InputProps: {
+      startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
+        className: adornmentIconClassName + " start",
+        position: "start"
+      }, startIcon),
+      endAdornment: endAdornmentIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
+        className: adornmentIconClassName + " end",
+        position: "end"
+      }, endAdornmentIcon)
+    },
     "aria-label": name,
     autoComplete: "off",
     autoFocus: autoFocus,
@@ -3997,21 +4193,12 @@ var DotInputText = function DotInputText(_ref) {
     error: error,
     fullWidth: fullWidth,
     helperText: helperText,
+    id: id,
     inputProps: {
       'data-testid': dataTestId,
       className: 'dot-input',
       readOnly: readOnly
     },
-    InputProps: {
-      startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: adornmentIconClassName + " start",
-        position: "start"
-      }, startIcon),
-      endAdornment: endAdornmentIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: adornmentIconClassName + " end",
-        position: "end"
-      }, endAdornmentIcon)
-    },
     inputRef: inputRef,
     label: label,
     multiline: multiline,
@@ -4026,8 +4213,8 @@ var DotInputText = function DotInputText(_ref) {
     rowsMax: multiline ? rowsMax : null,
     size: size,
     type: type,
-    variant: "outlined",
-    value: inputTextValue
+    value: inputTextValue,
+    variant: "outlined"
   });
 };
 
@@ -4065,11 +4252,23 @@ var DotInputSelect = function DotInputSelect(_ref) {
   var rootStyles = useStylesWithRootClass(rootSelectClassName, className);
   var hasWarning = !error && warning && warningClassName;
   return /*#__PURE__*/React__default.createElement(StyledTextField, {
+    InputProps: {
+      startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
+        className: adornmentIconClassName + " start",
+        position: "start"
+      }, startIcon),
+      endAdornment: endIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
+        className: adornmentIconClassName + " end",
+        position: "end"
+      }, endIcon)
+    },
+    SelectProps: {
+      "native": true
+    },
     autoFocus: autoFocus,
     className: rootStyles + " " + hasWarning,
     defaultValue: defaultValue,
     disabled: disabled,
-    value: value,
     error: error,
     fullWidth: fullWidth,
     helperText: helperText,
@@ -4079,16 +4278,6 @@ var DotInputSelect = function DotInputSelect(_ref) {
       'data-testid': dataTestId,
       className: 'dot-select'
     },
-    InputProps: {
-      startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: adornmentIconClassName + " start",
-        position: "start"
-      }, startIcon),
-      endAdornment: endIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: adornmentIconClassName + " end",
-        position: "end"
-      }, endIcon)
-    },
     inputRef: inputRef,
     label: label,
     multiline: false,
@@ -4099,10 +4288,8 @@ var DotInputSelect = function DotInputSelect(_ref) {
     onKeyDown: onKeyDown,
     required: required,
     select: true,
-    SelectProps: {
-      "native": true
-    },
     size: size,
+    value: value,
     variant: "outlined"
   }, options.map(function (option) {
     return /*#__PURE__*/React__default.createElement("option", {
@@ -4199,14 +4386,12 @@ function DotRadioButton(_ref) {
 
   return /*#__PURE__*/React__default.createElement(StyledFormControlLabel, {
     className: rootClasses,
-    labelPlacement: labelPlacement,
-    value: value,
     control: /*#__PURE__*/React__default.createElement(StyledRadioButton, {
       "aria-label": ariaLabel,
+      checked: checked,
       classes: {
         root: rootClassName$c
       },
-      checked: checked,
       color: "primary",
       "data-testid": dataTestId,
       disabled: disabled,
@@ -4217,7 +4402,9 @@ function DotRadioButton(_ref) {
       required: required,
       size: size
     }),
-    label: label
+    label: label,
+    labelPlacement: labelPlacement,
+    value: value
   });
 }
 
@@ -4266,9 +4453,9 @@ var DotRadioGroup = function DotRadioGroup(_ref) {
         value = _ref2.value,
         disabled = _ref2.disabled;
     return /*#__PURE__*/React__default.createElement(DotRadioButton, {
-      key: value,
       checked: selectedValue === value,
       disabled: disabled || disableGroup,
+      key: value,
       label: label,
       labelPlacement: labelPlacement,
       size: size,
@@ -4281,8 +4468,8 @@ var DotRadioGroup = function DotRadioGroup(_ref) {
     classes: {
       root: rootClasses
     },
-    error: error,
     component: "fieldset",
+    error: error,
     required: required
   }, groupLabel && /*#__PURE__*/React__default.createElement(FormLabel, {
     component: "legend"
@@ -4336,24 +4523,24 @@ var DotSwitch = function DotSwitch(_ref) {
 
   return /*#__PURE__*/React__default.createElement(StyledFormControlLabel, {
     className: rootClassName$n,
-    labelPlacement: labelPlacement,
     control: /*#__PURE__*/React__default.createElement(StyledSwitch, {
+      checked: checked,
       classes: {
         root: rootClasses
       },
-      checked: checked,
       color: color,
       "data-testid": dataTestId,
       disabled: disabled,
       id: id,
-      inputRef: inputRef,
       inputProps: {
         'aria-label': ariaLabel ? ariaLabel : label
       },
+      inputRef: inputRef,
       onChange: handleChange,
       size: size
     }),
-    label: label
+    label: label,
+    labelPlacement: labelPlacement
   });
 };
 
@@ -5139,6 +5326,13 @@ var DotInlineEdit = function DotInlineEdit(_ref) {
       return onKeyPress(event);
     }
   }, /*#__PURE__*/React__default.createElement(TextField, {
+    InputProps: {
+      endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React__default.createElement(DotIcon, {
+        iconId: "edit"
+      }))
+    },
     "aria-label": name,
     autoComplete: "off",
     autoFocus: autoFocus,
@@ -5151,13 +5345,6 @@ var DotInlineEdit = function DotInlineEdit(_ref) {
       className: 'dot-input',
       readOnly: readOnly
     },
-    InputProps: {
-      endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/React__default.createElement(DotIcon, {
-        iconId: "edit"
-      }))
-    },
     multiline: false,
     name: name,
     onChange: function onChange(event) {
@@ -5316,8 +5503,8 @@ var DotSkeleton = function DotSkeleton(_ref) {
     },
     "data-testid": dataTestId,
     height: height,
-    width: width,
-    variant: skeletonVariant
+    variant: skeletonVariant,
+    width: width
   }, children);
 };
 
@@ -5414,14 +5601,14 @@ var DotSnackbarContainer = function DotSnackbarContainer() {
   return /*#__PURE__*/React__default.createElement(StyledSnackbarContainer, {
     className: rootClassName$5
   }, /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": rootClassName$5,
-    className: rootClassName$5
+    className: rootClassName$5,
+    "data-testid": rootClassName$5
   }, alerts.slice().reverse().map(function (alert) {
     return /*#__PURE__*/React__default.createElement(DotSnackbar, {
       key: alert.id,
-      severity: alert.severity,
       onClose: handleClose(alert.id),
-      open: alert.open
+      open: alert.open,
+      severity: alert.severity
     }, alert.message);
   })));
 };
@@ -5542,8 +5729,8 @@ var DotSplitButton = function DotSplitButton(_ref) {
     autoFocus: autoFocus,
     className: "label-button",
     "data-testid": dataTestId,
-    disabled: disabled,
     disableRipple: disableRipple,
+    disabled: disabled,
     isSubmit: isSubmit,
     onClick: function onClick(event) {
       return handleClick(event);
@@ -5554,8 +5741,8 @@ var DotSplitButton = function DotSplitButton(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(DotButton, {
     className: "expand-button",
     "data-testid": dataTestId,
-    disabled: disabled,
     disableRipple: disableRipple,
+    disabled: disabled,
     onClick: function onClick() {
       return setOpen(!open);
     },
@@ -5574,8 +5761,8 @@ var DotSplitButton = function DotSplitButton(_ref) {
     onLeave: function onLeave() {
       return setOpen(false);
     },
-    open: open,
-    onSelect: handleClick
+    onSelect: handleClick,
+    open: open
   }));
 };
 
@@ -5643,8 +5830,8 @@ var DotBodyCell = function DotBodyCell(_ref) {
   var getTableCellValue = function getTableCellValue() {
     if (Array.isArray(value)) {
       return /*#__PURE__*/React__default.createElement("div", {
-        ref: wrapperRef,
-        className: "action-cell-wrapper"
+        className: "action-cell-wrapper",
+        ref: wrapperRef
       }, showMenu ? /*#__PURE__*/React__default.createElement(DotIconButton, {
         className: "dot-table-action-icon",
         iconId: "options",
@@ -5672,8 +5859,8 @@ var DotBodyCell = function DotBodyCell(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(TableCell, {
-    "aria-label": ariaLabel,
     align: align,
+    "aria-label": ariaLabel,
     classes: {
       root: rootClasses
     },
@@ -5785,8 +5972,8 @@ var DotTableBody = function DotTableBody(_ref) {
     }
   }, data.map(function (row, index) {
     return /*#__PURE__*/React__default.createElement(DotTableRow, {
-      columns: columns,
       className: row.className,
+      columns: columns,
       data: row,
       key: index,
       onActionMenuTrigger: handleActionMenuTrigger,
@@ -5838,9 +6025,9 @@ var DotHeaderRow = function DotHeaderRow(_ref) {
       key: CreateUUID(),
       order: order,
       orderBy: orderBy,
-      truncate: cell.truncate,
-      sortable: sortable && cell.sortable,
       sortDirection: orderBy === cell.id ? order : undefined,
+      sortable: sortable && cell.sortable,
+      truncate: cell.truncate,
       uid: CreateUUID(),
       value: cell.label,
       width: cell.width
@@ -5889,10 +6076,10 @@ var DotHeaderCell = function DotHeaderCell(_ref2) {
   return /*#__PURE__*/React__default.createElement(TableCell, {
     align: align,
     key: uid,
-    title: headerTitle,
     style: {
       width: width ? width : ''
-    }
+    },
+    title: headerTitle
   }, value);
 };
 
@@ -6185,8 +6372,8 @@ var DotTabs = function DotTabs(_ref) {
     var tabElement = /*#__PURE__*/React__default.createElement(Tab, {
       "aria-label": tab.ariaLabel,
       "data-testid": tab['data-testid'],
-      disabled: tab.disabled,
       disableRipple: true,
+      disabled: tab.disabled,
       key: index,
       label: label,
       value: tab.value