@digital-ai/dot-components 1.7.0 → 1.8.0

package/CHANGE_LOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.8.0](https://github.com/digital-ai/dot-components/tree/1.8.0) (02/02/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.7.0...1.8.0)
+
+**Features:**
+
+- Add option for autocomplete component [\#956](https://github.com/digital-ai/dot-components/issues/956)
+- S-76952: `AutoComplete`: Add dense prop [\#976](https://github.com/digital-ai/dot-components/pull/976) ([dmiletic85](https://github.com/dmiletic85))
+- S-81503: `Autocomplete` Improve functionality for adding new item [\#957](https://github.com/digital-ai/dot-components/pull/957) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-19722: `Table`: Fix Storybook issues by refactoring Table's story. [\#974](https://github.com/digital-ai/dot-components/pull/974) ([dmiletic85](https://github.com/dmiletic85))
+- D-19713: Do not show alert banner close button if onClose not provided [\#973](https://github.com/digital-ai/dot-components/pull/973) ([selsemore](https://github.com/selsemore))
+
+**Merged pull requests:**
+
+- S-76846: update to webpack 5 [\#940](https://github.com/digital-ai/dot-components/pull/940) ([CWSites](https://github.com/CWSites))
+
 ## [1.7.0](https://github.com/digital-ai/dot-components/tree/1.7.0) (01/28/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.6.2...1.7.0)

package/dot-components.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useEffect, useState, Fragment, useRef, useMemo, useContext, createContext } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, Divider, AccordionActions, Toolbar, StylesProvider, MuiThemeProvider, IconButton, Link, Avatar, List, ListItem, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Drawer, ListItemIcon, ListItemText, Collapse, ListSubheader, useMediaQuery, Chip, InputAdornment, TextField, Button, darken, Badge, Breadcrumbs, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogTitle, DialogContent, DialogActions, useTheme, RadioGroup, Radio, Switch, Snackbar, ButtonGroup, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab } from '@material-ui/core';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, Divider, AccordionActions, Toolbar, StylesProvider, MuiThemeProvider, IconButton, Link, Avatar, List, ListItem, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Drawer, ListItemIcon, ListItemText, Collapse, ListSubheader, useMediaQuery, InputAdornment, TextField, Button, darken, Chip, Badge, Breadcrumbs, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogTitle, DialogContent, DialogActions, useTheme, RadioGroup, Radio, Switch, Snackbar, ButtonGroup, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab } from '@material-ui/core';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import { Alert, Autocomplete, AvatarGroup, ToggleButtonGroup, ToggleButton, Skeleton } from '@material-ui/lab';
 import { createTheme, alpha } from '@material-ui/core/styles';
@@ -1024,7 +1024,7 @@ const DotAlertBanner = ({
     },
     "data-testid": dataTestId,
     iconMapping: AlertBannerIconMapping,
-    onClose: event => onClose ? onClose(event) : null,
+    onClose: onClose,
     severity: severity
   }, /*#__PURE__*/React__default.createElement(DotTypography, {
     variant: _textVariant,
@@ -1370,7 +1370,7 @@ const StyledPopper = styled(Popper).withConfig({
   componentId: "sc-134fmqu-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{background:", ";}ul{box-sizing:content-box;min-width:112px;max-height:calc(100vh - 24px);overflow:auto;.dot-li{min-height:auto;&:hover{background:", ";}&:active,&:focus{background:", ";}}.dot-link{color:", ";}}.dot-action-item{height:", "px;border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", "px;.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], popperClassName, levelSecond, rootClassName$J, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, theme.palette.product === 'agility' && theme.palette.agilityInterface.fixedCol, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.product === 'agility' && theme.palette.type === 'dark' ? theme.palette.layer.n200 : theme.palette.layer.n100, theme.spacing(3)));
+}) => css(["&.", "{z-index:", ";}&.", ",&.", "{&.loading .MuiPaper-root{align-items:center;display:flex;justify-content:center;min-height:200px;min-width:200px;}ul,.dot-action-item{background:", ";.dot-action-item-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;}}ul{box-sizing:content-box;min-width:112px;max-height:calc(100vh - 24px);overflow:auto;.dot-li{min-height:auto;&:hover{background:", ";}&:active,&:focus{background:", ";}}.dot-link{color:", ";}}.dot-action-item{height:", "px;border-top:1px solid ", ";line-height:inherit;button.dot-button{border-radius:", ";justify-content:flex-start;height:100%;margin:0;&:focus-visible{background-color:", ";}.MuiButton-label{gap:", "px;.MuiButton-startIcon{margin-left:0;.dot-icon{flex-shrink:0;}}}}}}"], popperClassName, levelSecond, rootClassName$J, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, theme.palette.product === 'agility' && theme.palette.agilityInterface.fixedCol, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.product === 'agility' && theme.palette.type === 'dark' ? theme.palette.layer.n200 : theme.palette.layer.n100, theme.spacing(3)));
 
 const MENU_ITEM_HEIGHT_NORMAL = 33;
 const MENU_ITEM_HEIGHT_DENSE = 28;
@@ -1644,6 +1644,8 @@ const DotDrawer = ({
     }
   }, []);
   const rootClasses = useStylesWithRootClass(rootClassName$I, className);
+  const headerExists = !!drawerHeaderProps;
+  const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return /*#__PURE__*/React__default.createElement(StyledDrawer, {
     ModalProps: ModalProps,
     PaperProps: PaperProps,
@@ -1660,20 +1662,17 @@ const DotDrawer = ({
     variant: _variant,
     width: _width
   }, drawerHeaderProps && /*#__PURE__*/React__default.createElement(DotDrawerHeader, {
-    ariaLabel: drawerHeaderProps.ariaLabel,
     className: drawerHeaderProps.className,
     "data-testid": drawerHeaderProps[`data-testid`],
     onClose: onClose,
     variant: _variant
-  }, drawerHeaderProps.children), drawerBodyProps && /*#__PURE__*/React__default.createElement(DotDrawerBody, {
-    ariaLabel: drawerBodyProps.ariaLabel,
-    className: drawerBodyProps.className,
-    "data-testid": drawerBodyProps[`data-testid`],
-    headerExists: drawerHeaderProps ? true : false,
+  }, drawerHeaderProps.children), /*#__PURE__*/React__default.createElement(DotDrawerBody, {
+    className: drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.className,
+    "data-testid": bodyTestId,
+    headerExists: headerExists,
     onClose: onClose,
     variant: _variant
-  }, drawerBodyProps.children), !drawerBodyProps && children, drawerFooterProps && /*#__PURE__*/React__default.createElement(DotDrawerFooter, {
-    ariaLabel: drawerFooterProps.ariaLabel,
+  }, (drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.children) || children), drawerFooterProps && /*#__PURE__*/React__default.createElement(DotDrawerFooter, {
     className: drawerFooterProps.className,
     "data-testid": drawerFooterProps[`data-testid`]
   }, drawerFooterProps.children));
@@ -2378,58 +2377,16 @@ const DotAppToolbar = ({
 };
 
 const rootClassName$C = 'dot-autocomplete';
+const inputRootClassName = 'dot-input-root';
+const inputMediumClassName = 'dot-input-medium';
 const StyledAutocomplete = styled(Autocomplete).withConfig({
   displayName: "AutoCompletestyles__StyledAutocomplete",
   componentId: "j2sgjy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{}"], rootClassName$C));
-
-const rootClassName$B = 'dot-chip';
-const StyledChip = styled(Chip).withConfig({
-  displayName: "Chipstyles__StyledChip",
-  componentId: "f1tsra-0"
-})(["", ""], ({
-  theme
-}) => css(["&.", "{border-color:", ";.dot-icon i{height:auto;}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}}&.Mui-error{background-color:", ";border-color:", ";.MuiChip-deleteIcon{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon{&:hover{color:", ";}}}.MuiChip-deleteIcon{width:18px;height:18px;color:", ";}}"], rootClassName$B, theme.palette.grey[300], theme.palette.error[50], theme.palette.error.main, theme.palette.error.main, theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[300]));
-
-const DotChip = ({
-  ariaLabel,
-  avatar,
-  children,
-  className,
-  'data-testid': dataTestId,
-  disabled: _disabled = false,
-  error: _error = false,
-  isClickable: _isClickable = false,
-  isDeletable: _isDeletable = true,
-  onClick,
-  onDelete,
-  size: _size = 'medium',
-  startIcon
-}) => {
-  const errorClass = _error ? 'Mui-error' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$B, className, errorClass);
-  return /*#__PURE__*/React__default.createElement(StyledChip, {
-    "aria-label": ariaLabel,
-    avatar: avatar,
-    classes: {
-      root: rootClasses
-    },
-    clickable: _isClickable,
-    color: "default",
-    "data-testid": dataTestId,
-    disabled: _disabled,
-    icon: avatar ? null : startIcon,
-    label: children,
-    onClick: event => onClick && onClick(event),
-    onDelete: _isDeletable && onDelete ? event => onDelete(event) : undefined,
-    size: _size,
-    variant: "outlined"
-  });
-};
+}) => css(["&.", "{.", ".", "{padding-top:", ";padding-bottom:", ";}}"], rootClassName$C, inputRootClassName, inputMediumClassName, theme.spacing(0), theme.spacing(0)));
 
-const rootClassName$A = 'dot-text-field';
+const rootClassName$B = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
 const warningClassName = 'dot-warning';
 const adornmentIconClassName = 'dot-adornment-icon';
@@ -2443,15 +2400,15 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => 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$A, 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$A, 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));
+}) => 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$B, 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$B, 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));
 
-const rootClassName$z = 'dot-button';
+const rootClassName$A = 'dot-button';
 const StyledButton = styled(Button).withConfig({
   displayName: "Buttonstyles__StyledButton",
   componentId: "sx99hh-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin:", "px;min-width:auto;white-space:nowrap;&.MuiButton-containedPrimary{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}span.dot-icon{padding:0;i{height:auto;}}}"], rootClassName$z, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
+}) => css(["&.", "{margin:", "px;min-width:auto;white-space:nowrap;&.MuiButton-containedPrimary{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}span.dot-icon{padding:0;i{height:auto;}}}"], rootClassName$A, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
 
 /** This component wraps the Button component from @material-ui. */
 
@@ -2475,7 +2432,7 @@ const DotButton = /*#__PURE__*/React__default.forwardRef(({
   tooltip,
   type: _type = 'primary'
 }, ref) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$A, className);
   let color;
   let variant;
 
@@ -2530,6 +2487,50 @@ const DotButton = /*#__PURE__*/React__default.forwardRef(({
   }, children));
 });
 
+const rootClassName$z = 'dot-chip';
+const StyledChip = styled(Chip).withConfig({
+  displayName: "Chipstyles__StyledChip",
+  componentId: "f1tsra-0"
+})(["", ""], ({
+  theme
+}) => css(["&.", "{border-color:", ";.dot-icon i{height:auto;}&.MuiChip-sizeSmall{.dot-icon,.dot-avatar{width:18px;height:18px;}}&.Mui-error{background-color:", ";border-color:", ";.MuiChip-deleteIcon{color:", ";}}&:not(.Mui-error){&:hover{background-color:", ";}.MuiChip-deleteIcon{&:hover{color:", ";}}}.MuiChip-deleteIcon{width:18px;height:18px;color:", ";}}"], rootClassName$z, theme.palette.grey[300], theme.palette.error[50], theme.palette.error.main, theme.palette.error.main, theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[300]));
+
+const DotChip = ({
+  ariaLabel,
+  avatar,
+  children,
+  className,
+  'data-testid': dataTestId,
+  disabled: _disabled = false,
+  error: _error = false,
+  isClickable: _isClickable = false,
+  isDeletable: _isDeletable = true,
+  onClick,
+  onDelete,
+  size: _size = 'medium',
+  startIcon
+}) => {
+  const errorClass = _error ? 'Mui-error' : '';
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className, errorClass);
+  return /*#__PURE__*/React__default.createElement(StyledChip, {
+    "aria-label": ariaLabel,
+    avatar: avatar,
+    classes: {
+      root: rootClasses
+    },
+    clickable: _isClickable,
+    color: "default",
+    "data-testid": dataTestId,
+    disabled: _disabled,
+    icon: avatar ? null : startIcon,
+    label: children,
+    onClick: event => onClick && onClick(event),
+    onDelete: _isDeletable && onDelete ? event => onDelete(event) : undefined,
+    size: _size,
+    variant: "outlined"
+  });
+};
+
 // parses value and returns a string which is saved to state
 
 const parseAutoCompleteValue = value => {
@@ -2555,6 +2556,24 @@ const parseAutoCompleteValue = value => {
 
   return '';
 };
+const getChipsFromAutocomplete = (values, getTagProps, chipSize = 'medium') => {
+  return values.map((option, index) => {
+    const hasStringValue = isString(option);
+    const optionAsString = option;
+    const optionAsObject = option;
+    const chipError = hasStringValue ? undefined : optionAsObject.error;
+    return /*#__PURE__*/React__default.createElement(DotChip, Object.assign({
+      "data-testid": "dot-autocomplete-chip",
+      error: chipError,
+      size: chipSize
+    }, getTagProps({
+      index
+    })), hasStringValue ? optionAsString : optionAsObject.title);
+  });
+};
+const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
+
+const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   actionItem,
   ariaLabel,
@@ -2562,6 +2581,7 @@ const DotAutoComplete = ({
   className,
   'data-testid': dataTestId,
   defaultValue,
+  dense: _dense = true,
   disabled: _disabled = false,
   disablePortal: _disablePortal = true,
   error: _error = false,
@@ -2585,9 +2605,18 @@ const DotAutoComplete = ({
   value
 }) => {
   const [showPlaceholder, setShowPlaceholder] = useState(!value && !defaultValue);
+  const {
+    iconId: actionIconId = 'add',
+    text: actionItemText,
+    onClick: onActionItemClick,
+    preventDuplicateInsertion
+  } = actionItem || {};
+  const isActionItemDefined = onActionItemClick !== undefined;
   const [isOpened, setIsOpened] = useState(false);
+  const [inputText, setInputText] = useState('');
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$A, className);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$B, className);
+  const inputRootClasses = useStylesWithRootClass(inputRootClassName, _dense ? '' : inputMediumClassName);
   let textFieldInput; // Used for focus management while popper is opened
 
   const actionItemRef = useRef();
@@ -2607,22 +2636,6 @@ const DotAutoComplete = ({
     }
   };
 
-  const getChips = (values, getTagProps) => {
-    return values.map((option, index) => {
-      if (typeof option === 'string') {
-        return /*#__PURE__*/React__default.createElement(DotChip, Object.assign({}, getTagProps({
-          index
-        })), option);
-      } else {
-        return /*#__PURE__*/React__default.createElement(DotChip, Object.assign({
-          error: option.error
-        }, getTagProps({
-          index
-        })), option.title);
-      }
-    });
-  };
-
   const valuesChanged = ({
     event,
     val,
@@ -2644,22 +2657,32 @@ const DotAutoComplete = ({
 
 
   const DotPopper = props => {
-    if (!actionItem || Object.keys(actionItem).length === 0) return /*#__PURE__*/React__default.createElement(StyledPopper, Object.assign({}, props, {
+    if (!isActionItemDefined) return /*#__PURE__*/React__default.createElement(StyledPopper, Object.assign({}, props, {
       className: popperClassName,
       disablePortal: _disablePortal
-    }));
-    const {
-      iconId,
-      text,
-      onClick
-    } = actionItem;
+    })); // Disable action if customer explicitly enabled duplicate
+    // item insertion and input text is found inside the 'options'
+
+    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options); // Display warning icon if disabled
+
+    const actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+    const defaultText = inputText ? `Add "${inputText}"` : DEFAULT_ACTION_ITEM_TEXT;
+    const nonDisabledText = actionItemText ? actionItemText : defaultText;
+    const itemText = isActionDisabled ? 'Value already exists' : nonDisabledText; // If simple text, we need to give it a class so that
+    // styling for displaying ellipsis on a long text
+    // can be applied. If it is custom node coming from the
+    // consumer, then leave it as it is.
+
+    const itemTextNode = isString(itemText) ? /*#__PURE__*/React__default.createElement("span", {
+      className: "dot-action-item-text"
+    }, itemText) : itemText;
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
 
     const onActionButtonClick = () => {
       setIsOpened(false);
       textFieldInput.focus();
-      onClick();
+      onActionItemClick(inputText);
     };
 
     return /*#__PURE__*/React__default.createElement(StyledPopper, Object.assign({}, props, {
@@ -2684,15 +2707,17 @@ const DotAutoComplete = ({
     }, /*#__PURE__*/React__default.createElement(DotButton, {
       "data-testid": "dot-action-item-btn",
       disableRipple: true,
+      disabled: isActionDisabled,
       fullWidth: true,
       onClick: onActionButtonClick,
       ref: actionItemRef,
       startIcon: /*#__PURE__*/React__default.createElement(DotIcon, {
+        ariaLabel: actionStartIconId,
         fontSize: "small",
-        iconId: iconId
+        iconId: actionStartIconId
       }),
       type: "text"
-    }, text))));
+    }, itemTextNode))));
   }; // Use passed in onOpen callback (if exists), otherwise create custom function
 
 
@@ -2704,18 +2729,32 @@ const DotAutoComplete = ({
     if (!('relatedTarget' in event) || event.relatedTarget !== actionItemRef.current) {
       setIsOpened(false);
     }
-  }); // Execute it only if 'onInputChange' prop is defined
+  }); // Create handler only if 'onInputChange' or 'actionItem' prop is defined
 
 
-  const handleInputChange = onInputChange && ((event, inputValue, reason) => {
-    onInputChange(event, inputValue, reason);
-  });
+  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, inputValue, reason) => {
+    isActionItemDefined && setInputText(inputValue);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+  }) || undefined; // Create callback when action item click event handler is defined,
+  // free-solo mode is NOT set and 'Enter' key has been pressed
+
+
+  const handleKeyDown = !_freesolo && onActionItemClick && (event => {
+    if (event.key === 'Enter') {
+      // Do NOT execute callback if duplicate item
+      if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options)) return;
+      onActionItemClick(inputText);
+    }
+  }) || undefined;
+
+  const handleRenderChips = (values, getTagProps) => getChipsFromAutocomplete(values, getTagProps, _dense ? 'small' : 'medium');
 
   return /*#__PURE__*/React__default.createElement(StyledAutocomplete, {
     PopperComponent: DotPopper,
     "aria-label": ariaLabel,
     classes: {
-      root: rootClasses
+      root: rootClasses,
+      inputRoot: inputRootClasses
     },
     "data-testid": dataTestId,
     defaultValue: defaultValue,
@@ -2736,9 +2775,10 @@ const DotAutoComplete = ({
       setIsOpened(false);
     },
     onClose: handleClose,
+    onInputChange: handleInputChange,
+    onKeyDown: handleKeyDown,
     // We want to close the popper each time focus is shifted from the autocomplete
     onOpen: handleOpen,
-    onInputChange: handleInputChange,
     open: open || isOpened,
     options: sortOptions(),
     renderInput: params => {
@@ -2789,11 +2829,12 @@ const DotAutoComplete = ({
           },
           placeholder: showPlaceholder ? placeholder : undefined,
           required: _required,
+          size: _dense ? 'small' : 'medium',
           variant: "outlined"
         }))
       );
     },
-    renderTags: _multiple ? (values, getTagProps) => getChips(values, getTagProps) : null,
+    renderTags: _multiple ? handleRenderChips : null,
     size: _size,
     value: value
   });
@@ -3968,7 +4009,7 @@ const StyledFormContainer = styled.div.withConfig({
   componentId: "bbovqo-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin:", ";.", ",.", ",.", ",.", "{margin:", ";}.", ",.", "{.", "{margin:0;}}}"], rootClassName$m, theme.spacing(3, 0), rootClassName$s, rootClassName$u, rootClassName$A, rootSelectClassName, theme.spacing(1, 0), rootClassName$r, groupClassName, rootClassName$u));
+}) => css(["&.", "{margin:", ";.", ",.", ",.", ",.", "{margin:", ";}.", ",.", "{.", "{margin:0;}}}"], rootClassName$m, theme.spacing(3, 0), rootClassName$s, rootClassName$u, rootClassName$B, rootSelectClassName, theme.spacing(1, 0), rootClassName$r, groupClassName, rootClassName$u));
 
 const DotForm = ({
   ariaLabel,
@@ -4234,7 +4275,7 @@ const DotInputText = ({
     iconId: `${iconType}-solid`
   });
 
-  const rootStyles = useStylesWithRootClass(rootClassName$A, className, hasWarning);
+  const rootStyles = useStylesWithRootClass(rootClassName$B, className, hasWarning);
 
   const endAdornmentIcon = endIcon || _error && renderIcon('error') || _warning && renderIcon('warning'); // Used to control text value from the consumer component
   // when debounce feature is enabled
@@ -5808,7 +5849,7 @@ const DotTablePagination = ({
   onChangeRowsPerPage,
   page: _page = 0,
   rowsPerPage: _rowsPerPage = 10,
-  typography
+  typography: _typography = 'body1'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$a, className);
 
@@ -5825,7 +5866,7 @@ const DotTablePagination = ({
 
     /* Container is used to pass 'typography' prop to a styled component */
     React__default.createElement(StyledTablePagination, {
-      typography: typography
+      typography: _typography
     }, /*#__PURE__*/React__default.createElement(TablePagination, {
       "aria-label": ariaLabel,
       classes: {

package/dot-components.umd.js

@@ -1130,9 +1130,7 @@
         },
         "data-testid": dataTestId,
         iconMapping: AlertBannerIconMapping,
-        onClose: function (event) {
-          return onClose ? onClose(event) : null;
-        },
+        onClose: onClose,
         severity: severity
       }, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
         variant: textVariant,
@@ -1510,7 +1508,7 @@
       componentId: "sc-134fmqu-0"
     })(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    &.", " {\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        background: ", ";\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        max-height: calc(100vh - 24px);\n        overflow: auto;\n\n        .dot-li {\n          min-height: auto;\n\n          &:hover {\n            background: ", ";\n          }\n\n          &:active,\n          &:focus {\n            background: ", ";\n          }\n        }\n\n        .dot-link {\n          color: ", ";\n        }\n      }\n\n      .dot-action-item {\n        height: ", "px;\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: ", "px;\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      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        background: ", ";\n      }\n\n      ul {\n        box-sizing: content-box;\n        min-width: 112px;\n        max-height: calc(100vh - 24px);\n        overflow: auto;\n\n        .dot-li {\n          min-height: auto;\n\n          &:hover {\n            background: ", ";\n          }\n\n          &:active,\n          &:focus {\n            background: ", ";\n          }\n        }\n\n        .dot-link {\n          color: ", ";\n        }\n      }\n\n      .dot-action-item {\n        height: ", "px;\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: ", "px;\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), popperClassName, levelSecond, rootClassName$J, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, theme.palette.product === 'agility' && theme.palette.agilityInterface.fixedCol, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.product === 'agility' && theme.palette.type === 'dark' ? theme.palette.layer.n200 : theme.palette.layer.n100, theme.spacing(3));
+      return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    &.", " {\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        background: ", ";\n\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        max-height: calc(100vh - 24px);\n        overflow: auto;\n\n        .dot-li {\n          min-height: auto;\n\n          &:hover {\n            background: ", ";\n          }\n\n          &:active,\n          &:focus {\n            background: ", ";\n          }\n        }\n\n        .dot-link {\n          color: ", ";\n        }\n      }\n\n      .dot-action-item {\n        height: ", "px;\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: ", "px;\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      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        background: ", ";\n\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        max-height: calc(100vh - 24px);\n        overflow: auto;\n\n        .dot-li {\n          min-height: auto;\n\n          &:hover {\n            background: ", ";\n          }\n\n          &:active,\n          &:focus {\n            background: ", ";\n          }\n        }\n\n        .dot-link {\n          color: ", ";\n        }\n      }\n\n      .dot-action-item {\n        height: ", "px;\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: ", "px;\n\n            .MuiButton-startIcon {\n              margin-left: 0;\n\n              .dot-icon {\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  "])), popperClassName, levelSecond, rootClassName$J, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, theme.palette.product === 'agility' && theme.palette.agilityInterface.fixedCol, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.product === 'agility' && theme.palette.type === 'dark' ? theme.palette.layer.n200 : theme.palette.layer.n100, theme.spacing(3));
     });
     var templateObject_1$N, templateObject_2$L;
 
@@ -1801,6 +1799,8 @@
         }
       }, []);
       var rootClasses = useStylesWithRootClass(rootClassName$I, className);
+      var headerExists = !!drawerHeaderProps;
+      var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return /*#__PURE__*/React__default["default"].createElement(StyledDrawer, {
         ModalProps: ModalProps,
         PaperProps: PaperProps,
@@ -1819,20 +1819,17 @@
         variant: variant,
         width: width
       }, drawerHeaderProps && /*#__PURE__*/React__default["default"].createElement(DotDrawerHeader, {
-        ariaLabel: drawerHeaderProps.ariaLabel,
         className: drawerHeaderProps.className,
         "data-testid": drawerHeaderProps["data-testid"],
         onClose: onClose,
         variant: variant
-      }, drawerHeaderProps.children), drawerBodyProps && /*#__PURE__*/React__default["default"].createElement(DotDrawerBody, {
-        ariaLabel: drawerBodyProps.ariaLabel,
-        className: drawerBodyProps.className,
-        "data-testid": drawerBodyProps["data-testid"],
-        headerExists: drawerHeaderProps ? true : false,
+      }, drawerHeaderProps.children), /*#__PURE__*/React__default["default"].createElement(DotDrawerBody, {
+        className: drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.className,
+        "data-testid": bodyTestId,
+        headerExists: headerExists,
         onClose: onClose,
         variant: variant
-      }, drawerBodyProps.children), !drawerBodyProps && children, drawerFooterProps && /*#__PURE__*/React__default["default"].createElement(DotDrawerFooter, {
-        ariaLabel: drawerFooterProps.ariaLabel,
+      }, (drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.children) || children), drawerFooterProps && /*#__PURE__*/React__default["default"].createElement(DotDrawerFooter, {
         className: drawerFooterProps.className,
         "data-testid": drawerFooterProps["data-testid"]
       }, drawerFooterProps.children));
@@ -2595,96 +2592,44 @@
     };
 
     var rootClassName$C = 'dot-autocomplete';
+    var inputRootClassName = 'dot-input-root';
+    var inputMediumClassName = 'dot-input-medium';
     var StyledAutocomplete = styled__default["default"](lab.Autocomplete).withConfig({
       displayName: "AutoCompletestyles__StyledAutocomplete",
       componentId: "j2sgjy-0"
     })(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-      _a.theme;
-      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n    }\n  "], ["\n    &.", " {\n    }\n  "])), rootClassName$C);
-    });
-    var templateObject_1$F, templateObject_2$D;
-
-    var rootClassName$B = 'dot-chip';
-    var StyledChip = styled__default["default"](core.Chip).withConfig({
-      displayName: "Chipstyles__StyledChip",
-      componentId: "f1tsra-0"
-    })(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n    &.", " {\n      border-color: ", ";\n\n      .dot-icon i {\n        height: auto;\n      }\n\n      &.MuiChip-sizeSmall {\n        .dot-icon,\n        .dot-avatar {\n          width: 18px;\n          height: 18px;\n        }\n      }\n\n      &.Mui-error {\n        background-color: ", ";\n        border-color: ", ";\n        .MuiChip-deleteIcon {\n          color: ", ";\n        }\n      }\n\n      &:not(.Mui-error) {\n        &:hover {\n          background-color: ", ";\n        }\n\n        .MuiChip-deleteIcon {\n          &:hover {\n            color: ", ";\n          }\n        }\n      }\n\n      .MuiChip-deleteIcon {\n        width: 18px;\n        height: 18px;\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      border-color: ", ";\n\n      .dot-icon i {\n        height: auto;\n      }\n\n      &.MuiChip-sizeSmall {\n        .dot-icon,\n        .dot-avatar {\n          width: 18px;\n          height: 18px;\n        }\n      }\n\n      &.Mui-error {\n        background-color: ", ";\n        border-color: ", ";\n        .MuiChip-deleteIcon {\n          color: ", ";\n        }\n      }\n\n      &:not(.Mui-error) {\n        &:hover {\n          background-color: ", ";\n        }\n\n        .MuiChip-deleteIcon {\n          &:hover {\n            color: ", ";\n          }\n        }\n      }\n\n      .MuiChip-deleteIcon {\n        width: 18px;\n        height: 18px;\n        color: ", ";\n      }\n    }\n  "])), rootClassName$B, theme.palette.grey[300], theme.palette.error[50], theme.palette.error.main, theme.palette.error.main, theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[300]);
+      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .", ".", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .", ".", " {\n        /* Override only top/bottom, but preserve left/right padding */\n        padding-top: ", ";\n        padding-bottom: ", ";\n      }\n    }\n  "])), rootClassName$C, inputRootClassName, inputMediumClassName, theme.spacing(0), theme.spacing(0));
     });
-    var templateObject_1$E, templateObject_2$C;
-
-    var DotChip = function DotChip(_a) {
-      var ariaLabel = _a.ariaLabel,
-          avatar = _a.avatar,
-          children = _a.children,
-          className = _a.className,
-          dataTestId = _a["data-testid"],
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
-          _c = _a.error,
-          error = _c === void 0 ? false : _c,
-          _d = _a.isClickable,
-          isClickable = _d === void 0 ? false : _d,
-          _e = _a.isDeletable,
-          isDeletable = _e === void 0 ? true : _e,
-          onClick = _a.onClick,
-          onDelete = _a.onDelete,
-          _f = _a.size,
-          size = _f === void 0 ? 'medium' : _f,
-          startIcon = _a.startIcon;
-      var errorClass = error ? 'Mui-error' : '';
-      var rootClasses = useStylesWithRootClass(rootClassName$B, className, errorClass);
-      return /*#__PURE__*/React__default["default"].createElement(StyledChip, {
-        "aria-label": ariaLabel,
-        avatar: avatar,
-        classes: {
-          root: rootClasses
-        },
-        clickable: isClickable,
-        color: "default",
-        "data-testid": dataTestId,
-        disabled: disabled,
-        icon: avatar ? null : startIcon,
-        label: children,
-        onClick: function (event) {
-          return onClick && onClick(event);
-        },
-        onDelete: isDeletable && onDelete ? function (event) {
-          return onDelete(event);
-        } : undefined,
-        size: size,
-        variant: "outlined"
-      });
-    };
+    var templateObject_1$F, templateObject_2$D;
 
-    var rootClassName$A = 'dot-text-field';
+    var rootClassName$B = 'dot-text-field';
     var rootSelectClassName = 'dot-select-field';
     var warningClassName = 'dot-warning';
     var adornmentIconClassName = 'dot-adornment-icon';
     var StyledAdornment = styled__default["default"](core.InputAdornment).withConfig({
       displayName: "InputFormFieldsstyles__StyledAdornment",
       componentId: "sc-1mbn9f0-0"
-    })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"], ["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"])));
+    })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"], ["\n  .dot-icon {\n    font-size: 24px;\n    height: 24px;\n    padding: 0;\n    width: 24px;\n  }\n"])));
     var StyledTextField = styled__default["default"](core.TextField).withConfig({
       displayName: "InputFormFieldsstyles__StyledTextField",
       componentId: "sc-1mbn9f0-1"
     })(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           InputProps = _a.InputProps;
-      return styled.css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$A, 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$A, 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);
+      return styled.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$B, 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$B, 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);
     });
-    var templateObject_1$D, templateObject_2$B, templateObject_3$6;
+    var templateObject_1$E, templateObject_2$C, templateObject_3$6;
 
-    var rootClassName$z = 'dot-button';
+    var rootClassName$A = 'dot-button';
     var StyledButton = styled__default["default"](core.Button).withConfig({
       displayName: "Buttonstyles__StyledButton",
       componentId: "sx99hh-0"
-    })(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    })(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "])), rootClassName$z, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, core.darken(theme.palette.error.main, 0.2));
+      return styled.css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", "px;\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-containedPrimary {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      span.dot-icon {\n        padding: 0;\n\n        i {\n          height: auto;\n        }\n      }\n    }\n  "])), rootClassName$A, theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen, theme.palette.error.main, core.darken(theme.palette.error.main, 0.2));
     });
-    var templateObject_1$C, templateObject_2$A;
+    var templateObject_1$D, templateObject_2$B;
 
     /** This component wraps the Button component from @material-ui. */
 
@@ -2714,7 +2659,7 @@
           tooltip = _a.tooltip,
           _h = _a.type,
           type = _h === void 0 ? 'primary' : _h;
-      var rootClasses = useStylesWithRootClass(rootClassName$z, className);
+      var rootClasses = useStylesWithRootClass(rootClassName$A, className);
       var color;
       var variant;
 
@@ -2771,6 +2716,60 @@
       }, children));
     });
 
+    var rootClassName$z = 'dot-chip';
+    var StyledChip = styled__default["default"](core.Chip).withConfig({
+      displayName: "Chipstyles__StyledChip",
+      componentId: "f1tsra-0"
+    })(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n    &.", " {\n      border-color: ", ";\n\n      .dot-icon i {\n        height: auto;\n      }\n\n      &.MuiChip-sizeSmall {\n        .dot-icon,\n        .dot-avatar {\n          width: 18px;\n          height: 18px;\n        }\n      }\n\n      &.Mui-error {\n        background-color: ", ";\n        border-color: ", ";\n        .MuiChip-deleteIcon {\n          color: ", ";\n        }\n      }\n\n      &:not(.Mui-error) {\n        &:hover {\n          background-color: ", ";\n        }\n\n        .MuiChip-deleteIcon {\n          &:hover {\n            color: ", ";\n          }\n        }\n      }\n\n      .MuiChip-deleteIcon {\n        width: 18px;\n        height: 18px;\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      border-color: ", ";\n\n      .dot-icon i {\n        height: auto;\n      }\n\n      &.MuiChip-sizeSmall {\n        .dot-icon,\n        .dot-avatar {\n          width: 18px;\n          height: 18px;\n        }\n      }\n\n      &.Mui-error {\n        background-color: ", ";\n        border-color: ", ";\n        .MuiChip-deleteIcon {\n          color: ", ";\n        }\n      }\n\n      &:not(.Mui-error) {\n        &:hover {\n          background-color: ", ";\n        }\n\n        .MuiChip-deleteIcon {\n          &:hover {\n            color: ", ";\n          }\n        }\n      }\n\n      .MuiChip-deleteIcon {\n        width: 18px;\n        height: 18px;\n        color: ", ";\n      }\n    }\n  "])), rootClassName$z, theme.palette.grey[300], theme.palette.error[50], theme.palette.error.main, theme.palette.error.main, theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[300]);
+    });
+    var templateObject_1$C, templateObject_2$A;
+
+    var DotChip = function DotChip(_a) {
+      var ariaLabel = _a.ariaLabel,
+          avatar = _a.avatar,
+          children = _a.children,
+          className = _a.className,
+          dataTestId = _a["data-testid"],
+          _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.error,
+          error = _c === void 0 ? false : _c,
+          _d = _a.isClickable,
+          isClickable = _d === void 0 ? false : _d,
+          _e = _a.isDeletable,
+          isDeletable = _e === void 0 ? true : _e,
+          onClick = _a.onClick,
+          onDelete = _a.onDelete,
+          _f = _a.size,
+          size = _f === void 0 ? 'medium' : _f,
+          startIcon = _a.startIcon;
+      var errorClass = error ? 'Mui-error' : '';
+      var rootClasses = useStylesWithRootClass(rootClassName$z, className, errorClass);
+      return /*#__PURE__*/React__default["default"].createElement(StyledChip, {
+        "aria-label": ariaLabel,
+        avatar: avatar,
+        classes: {
+          root: rootClasses
+        },
+        clickable: isClickable,
+        color: "default",
+        "data-testid": dataTestId,
+        disabled: disabled,
+        icon: avatar ? null : startIcon,
+        label: children,
+        onClick: function (event) {
+          return onClick && onClick(event);
+        },
+        onDelete: isDeletable && onDelete ? function (event) {
+          return onDelete(event);
+        } : undefined,
+        size: size,
+        variant: "outlined"
+      });
+    };
+
     // parses value and returns a string which is saved to state
 
     var parseAutoCompleteValue = function parseAutoCompleteValue(value) {
@@ -2796,6 +2795,32 @@
 
       return '';
     };
+    var getChipsFromAutocomplete = function getChipsFromAutocomplete(values, getTagProps, chipSize) {
+      if (chipSize === void 0) {
+        chipSize = 'medium';
+      }
+
+      return values.map(function (option, index) {
+        var hasStringValue = isString(option);
+        var optionAsString = option;
+        var optionAsObject = option;
+        var chipError = hasStringValue ? undefined : optionAsObject.error;
+        return /*#__PURE__*/React__default["default"].createElement(DotChip, __assign({
+          "data-testid": "dot-autocomplete-chip",
+          error: chipError,
+          size: chipSize
+        }, getTagProps({
+          index: index
+        })), hasStringValue ? optionAsString : optionAsObject.title);
+      });
+    };
+    var checkIfDuplicateItem = function checkIfDuplicateItem(itemText, autocompleteOptions) {
+      return autocompleteOptions.some(function (autocompleteOption) {
+        return autocompleteOption.title === itemText;
+      });
+    };
+
+    var DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
     var DotAutoComplete = function DotAutoComplete(_a) {
       var actionItem = _a.actionItem,
           ariaLabel = _a.ariaLabel,
@@ -2803,23 +2828,25 @@
           className = _a.className,
           dataTestId = _a["data-testid"],
           defaultValue = _a.defaultValue,
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
-          _c = _a.disablePortal,
-          disablePortal = _c === void 0 ? true : _c,
-          _d = _a.error,
-          error = _d === void 0 ? false : _d,
-          _e = _a.freesolo,
-          freesolo = _e === void 0 ? true : _e,
-          _f = _a.group,
-          group = _f === void 0 ? false : _f,
+          _b = _a.dense,
+          dense = _b === void 0 ? true : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
+          _d = _a.disablePortal,
+          disablePortal = _d === void 0 ? true : _d,
+          _e = _a.error,
+          error = _e === void 0 ? false : _e,
+          _f = _a.freesolo,
+          freesolo = _f === void 0 ? true : _f,
+          _g = _a.group,
+          group = _g === void 0 ? false : _g,
           helperText = _a.helperText,
           inputId = _a.inputId,
           inputRef = _a.inputRef,
           label = _a.label,
           loading = _a.loading,
-          _g = _a.multiple,
-          multiple = _g === void 0 ? true : _g,
+          _h = _a.multiple,
+          multiple = _h === void 0 ? true : _h,
           onChange = _a.onChange,
           onClose = _a.onClose,
           onInputChange = _a.onInputChange,
@@ -2827,22 +2854,36 @@
           open = _a.open,
           options = _a.options,
           placeholder = _a.placeholder,
-          _h = _a.required,
-          required = _h === void 0 ? false : _h,
-          _j = _a.size,
-          size = _j === void 0 ? 'small' : _j,
+          _j = _a.required,
+          required = _j === void 0 ? false : _j,
+          _k = _a.size,
+          size = _k === void 0 ? 'small' : _k,
           value = _a.value;
 
-      var _k = React.useState(!value && !defaultValue),
-          showPlaceholder = _k[0],
-          setShowPlaceholder = _k[1];
+      var _l = React.useState(!value && !defaultValue),
+          showPlaceholder = _l[0],
+          setShowPlaceholder = _l[1];
 
-      var _l = React.useState(false),
-          isOpened = _l[0],
-          setIsOpened = _l[1];
+      var _m = actionItem || {},
+          _o = _m.iconId,
+          actionIconId = _o === void 0 ? 'add' : _o,
+          actionItemText = _m.text,
+          onActionItemClick = _m.onClick,
+          preventDuplicateInsertion = _m.preventDuplicateInsertion;
+
+      var isActionItemDefined = onActionItemClick !== undefined;
+
+      var _p = React.useState(false),
+          isOpened = _p[0],
+          setIsOpened = _p[1];
+
+      var _q = React.useState(''),
+          inputText = _q[0],
+          setInputText = _q[1];
 
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
-      var textFieldRootClasses = useStylesWithRootClass(rootClassName$A, className);
+      var textFieldRootClasses = useStylesWithRootClass(rootClassName$B, className);
+      var inputRootClasses = useStylesWithRootClass(inputRootClassName, dense ? '' : inputMediumClassName);
       var textFieldInput; // Used for focus management while popper is opened
 
       var actionItemRef = React.useRef();
@@ -2862,22 +2903,6 @@
         }
       };
 
-      var getChips = function getChips(values, getTagProps) {
-        return values.map(function (option, index) {
-          if (typeof option === 'string') {
-            return /*#__PURE__*/React__default["default"].createElement(DotChip, __assign({}, getTagProps({
-              index: index
-            })), option);
-          } else {
-            return /*#__PURE__*/React__default["default"].createElement(DotChip, __assign({
-              error: option.error
-            }, getTagProps({
-              index: index
-            })), option.title);
-          }
-        });
-      };
-
       var valuesChanged = function valuesChanged(_a) {
         var event = _a.event,
             val = _a.val,
@@ -2900,20 +2925,32 @@
 
 
       var DotPopper = function DotPopper(props) {
-        if (!actionItem || Object.keys(actionItem).length === 0) return /*#__PURE__*/React__default["default"].createElement(StyledPopper, __assign({}, props, {
+        if (!isActionItemDefined) return /*#__PURE__*/React__default["default"].createElement(StyledPopper, __assign({}, props, {
           className: popperClassName,
           disablePortal: disablePortal
-        }));
-        var iconId = actionItem.iconId,
-            text = actionItem.text,
-            onClick = actionItem.onClick;
+        })); // Disable action if customer explicitly enabled duplicate
+        // item insertion and input text is found inside the 'options'
+
+        var isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options); // Display warning icon if disabled
+
+        var actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+        var defaultText = inputText ? "Add \"" + inputText + "\"" : DEFAULT_ACTION_ITEM_TEXT;
+        var nonDisabledText = actionItemText ? actionItemText : defaultText;
+        var itemText = isActionDisabled ? 'Value already exists' : nonDisabledText; // If simple text, we need to give it a class so that
+        // styling for displaying ellipsis on a long text
+        // can be applied. If it is custom node coming from the
+        // consumer, then leave it as it is.
+
+        var itemTextNode = isString(itemText) ? /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "dot-action-item-text"
+        }, itemText) : itemText;
         var paperProps = props.children.props;
         var paperChildren = paperProps.children;
 
         var onActionButtonClick = function onActionButtonClick() {
           setIsOpened(false);
           textFieldInput.focus();
-          onClick();
+          onActionItemClick(inputText);
         };
 
         return /*#__PURE__*/React__default["default"].createElement(StyledPopper, __assign({}, props, {
@@ -2938,15 +2975,17 @@
         }, /*#__PURE__*/React__default["default"].createElement(DotButton, {
           "data-testid": "dot-action-item-btn",
           disableRipple: true,
+          disabled: isActionDisabled,
           fullWidth: true,
           onClick: onActionButtonClick,
           ref: actionItemRef,
           startIcon: /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+            ariaLabel: actionStartIconId,
             fontSize: "small",
-            iconId: iconId
+            iconId: actionStartIconId
           }),
           type: "text"
-        }, text))));
+        }, itemTextNode))));
       }; // Use passed in onOpen callback (if exists), otherwise create custom function
 
 
@@ -2960,18 +2999,34 @@
         if (!('relatedTarget' in event) || event.relatedTarget !== actionItemRef.current) {
           setIsOpened(false);
         }
-      }; // Execute it only if 'onInputChange' prop is defined
+      }; // Create handler only if 'onInputChange' or 'actionItem' prop is defined
 
 
-      var handleInputChange = onInputChange && function (event, inputValue, reason) {
-        onInputChange(event, inputValue, reason);
+      var handleInputChange = (onInputChange || isActionItemDefined) && function (event, inputValue, reason) {
+        isActionItemDefined && setInputText(inputValue);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+      } || undefined; // Create callback when action item click event handler is defined,
+      // free-solo mode is NOT set and 'Enter' key has been pressed
+
+
+      var handleKeyDown = !freesolo && onActionItemClick && function (event) {
+        if (event.key === 'Enter') {
+          // Do NOT execute callback if duplicate item
+          if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options)) return;
+          onActionItemClick(inputText);
+        }
+      } || undefined;
+
+      var handleRenderChips = function handleRenderChips(values, getTagProps) {
+        return getChipsFromAutocomplete(values, getTagProps, dense ? 'small' : 'medium');
       };
 
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocomplete, {
         PopperComponent: DotPopper,
         "aria-label": ariaLabel,
         classes: {
-          root: rootClasses
+          root: rootClasses,
+          inputRoot: inputRootClasses
         },
         "data-testid": dataTestId,
         defaultValue: defaultValue,
@@ -2996,9 +3051,10 @@
           setIsOpened(false);
         },
         onClose: handleClose,
+        onInputChange: handleInputChange,
+        onKeyDown: handleKeyDown,
         // We want to close the popper each time focus is shifted from the autocomplete
         onOpen: handleOpen,
-        onInputChange: handleInputChange,
         open: open || isOpened,
         options: sortOptions(),
         renderInput: function (params) {
@@ -3049,13 +3105,12 @@
               },
               placeholder: showPlaceholder ? placeholder : undefined,
               required: required,
+              size: dense ? 'small' : 'medium',
               variant: "outlined"
             }))
           );
         },
-        renderTags: multiple ? function (values, getTagProps) {
-          return getChips(values, getTagProps);
-        } : null,
+        renderTags: multiple ? handleRenderChips : null,
         size: size,
         value: value
       });
@@ -4287,7 +4342,7 @@
       componentId: "bbovqo-0"
     })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    &.", " {\n      margin: ", ";\n\n      .", ",\n        .", ",\n        .", ",\n        .", " {\n        margin: ", ";\n      }\n\n      .", ", .", " {\n        .", " {\n          margin: 0;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", ";\n\n      .", ",\n        .", ",\n        .", ",\n        .", " {\n        margin: ", ";\n      }\n\n      .", ", .", " {\n        .", " {\n          margin: 0;\n        }\n      }\n    }\n  "])), rootClassName$m, theme.spacing(3, 0), rootClassName$s, rootClassName$u, rootClassName$A, rootSelectClassName, theme.spacing(1, 0), rootClassName$r, groupClassName, rootClassName$u);
+      return styled.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    &.", " {\n      margin: ", ";\n\n      .", ",\n        .", ",\n        .", ",\n        .", " {\n        margin: ", ";\n      }\n\n      .", ", .", " {\n        .", " {\n          margin: 0;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", ";\n\n      .", ",\n        .", ",\n        .", ",\n        .", " {\n        margin: ", ";\n      }\n\n      .", ", .", " {\n        .", " {\n          margin: 0;\n        }\n      }\n    }\n  "])), rootClassName$m, theme.spacing(3, 0), rootClassName$s, rootClassName$u, rootClassName$B, rootSelectClassName, theme.spacing(1, 0), rootClassName$r, groupClassName, rootClassName$u);
     });
     var templateObject_1$m, templateObject_2$m;
 
@@ -4594,7 +4649,7 @@
         });
       };
 
-      var rootStyles = useStylesWithRootClass(rootClassName$A, className, hasWarning);
+      var rootStyles = useStylesWithRootClass(rootClassName$B, className, hasWarning);
       var endAdornmentIcon = endIcon || error && renderIcon('error') || warning && renderIcon('warning'); // Used to control text value from the consumer component
       // when debounce feature is enabled
 
@@ -6270,7 +6325,8 @@
           page = _b === void 0 ? 0 : _b,
           _c = _a.rowsPerPage,
           rowsPerPage = _c === void 0 ? 10 : _c,
-          typography = _a.typography;
+          _d = _a.typography,
+          typography = _d === void 0 ? 'body1' : _d;
       var rootClasses = useStylesWithRootClass(rootClassName$a, className);
 
       var handlePageChange = function handlePageChange(event, newPage) {

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

@@ -1,13 +1,16 @@
 import { ChangeEvent, ReactNode, Ref } from 'react';
 import { AutocompleteCloseReason } from '@material-ui/lab';
 import { CommonProps } from '../CommonProps';
+export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
 export interface ActionItem {
     /** The icon to display on the button */
-    iconId: string;
+    iconId?: string;
     /** Event callback */
-    onClick: () => void;
+    onClick: (inputText?: string) => void;
+    /** If set to true, it will prevent duplicate item insertion */
+    preventDuplicateInsertion?: boolean;
     /** Text/Node displayed */
-    text: string | ReactNode;
+    text?: string | ReactNode;
 }
 export declare type autoCompleteSize = 'medium' | 'small';
 export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
@@ -16,7 +19,6 @@ export interface AutoCompleteOption {
     group?: string;
     title: string;
 }
-export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface AutoCompleteProps extends CommonProps {
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
@@ -24,6 +26,8 @@ export interface AutoCompleteProps extends CommonProps {
     autoFocus?: boolean;
     /** default option that is selected */
     defaultValue?: AutoCompleteValue;
+    /** When `true` input textbox will be small size, when `false` it will be medium size. Default value is `true`. **/
+    dense?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
     /** If true, the input will be disabled. */
@@ -67,4 +71,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, disablePortal, error, freesolo, group, helperText, inputId, inputRef, label, loading, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, required, size, value, }: AutoCompleteProps) => JSX.Element;
+export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, freesolo, group, helperText, inputId, inputRef, label, loading, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, required, size, value, }: AutoCompleteProps) => JSX.Element;

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

@@ -1,3 +1,5 @@
 import { Autocomplete } from '@material-ui/lab';
 export declare const rootClassName = "dot-autocomplete";
+export declare const inputRootClassName = "dot-input-root";
+export declare const inputMediumClassName = "dot-input-medium";
 export declare const StyledAutocomplete: import("styled-components").StyledComponent<typeof Autocomplete, any, {}, never>;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -1,5 +1,21 @@
+import { ActionItem } from './AutoComplete';
 export declare const movies: {
     group: string;
     title: string;
     error: boolean;
 }[];
+export declare const handleActionItemClick: (newItem?: string) => void;
+export declare const actionItemOptions: ActionItem[];
+export declare const actionItemArgType: {
+    options: string[];
+    mapping: ActionItem[];
+    control: {
+        type: string;
+        labels: {
+            0: string;
+            1: string;
+            2: string;
+        };
+    };
+    defaultValue: string;
+};

package/lib/components/auto-complete/utils/helpers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AutocompleteGetTagProps } from '@material-ui/lab';
+import { ChipSize } from '../../chip/Chip';
+import { AutoCompleteOption, AutoCompleteValue } from '../AutoComplete';
+export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
+export declare const getChipsFromAutocomplete: (values: Array<AutoCompleteOption | string>, getTagProps: AutocompleteGetTagProps, chipSize?: ChipSize) => JSX.Element[];
+export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;

package/lib/components/drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, CSSProperties } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
 export declare type DrawerVariant = 'permanent' | 'persistent' | 'temporary';
@@ -23,11 +23,11 @@ export interface DrawerProps extends CommonProps {
     /** string or JSX element that is displayed inside the drawer */
     children?: ReactNode;
     /** Props applied to drawer body */
-    drawerBodyProps?: DrawerSection;
+    drawerBodyProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** Props applied to drawer footer */
-    drawerFooterProps?: DrawerSection;
+    drawerFooterProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** Props applied to drawer header */
-    drawerHeaderProps?: DrawerSection;
+    drawerHeaderProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** The height of the drawer when anchor is 'top' or 'bottom' */
     height?: string;
     /** Callback fired when the component requests to be closed. */

package/lib/components/index.d.ts

@@ -28,7 +28,7 @@ export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
 export { DotAppLogo } from './app-logo/AppLogo';
 export { DotAppToolbar } from './app-toolbar/AppToolbar';
-export { DotAutoComplete, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
+export { DotAutoComplete } from './auto-complete/AutoComplete';
 export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
 export { DotBadge } from './badge/Badge';
@@ -77,3 +77,4 @@ export { DotTooltip } from './tooltip/Tooltip';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
 export { DotFileUpload } from './file-upload/FileUpload';
+export { parseAutoCompleteValue } from './auto-complete/utils/helpers';

package/lib/components/sidebar/Sidebar.stories.data.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
 import { ListItemProps } from '../list/utils/models';
+export declare const childElement: JSX.Element;
 export declare const getNavigationItems: (isSelected: (key: number) => boolean, handleClick: (key: number) => void) => ({
     startIconId: string;
     onClick: import("@storybook/addon-actions").HandlerFunction;

package/lib/components/table/Table.stories.data.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextAlignment } from './TableCell';
+import { TableProps } from './Table';
 export declare const actionMenuColumns: ({
     id: string;
     label: string;
@@ -119,3 +120,4 @@ export declare const paginatedData: {
         hit: string;
     };
 }[];
+export declare const MultiSelectTable: (props: TableProps) => JSX.Element;

package/package.json

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