@digital-ai/dot-components 1.9.1 → 1.10.1

package/CHANGE_LOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [1.10.1](https://github.com/digital-ai/dot-components/tree/1.10.1) (03/02/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.10.0...1.10.1)
+
+## [1.10.0](https://github.com/digital-ai/dot-components/tree/1.10.0) (03/01/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/2.0.1-rc.0...1.10.0)
+
+**Features:**
+
+- `Autocomplete` hide/customize chips [\#1023](https://github.com/digital-ai/dot-components/issues/1023)
+- S-82231: `Autocomplete` hide/customize chips [\#1031](https://github.com/digital-ai/dot-components/pull/1031) ([dmiletic85](https://github.com/dmiletic85))
+
+## [2.0.1-rc.0](https://github.com/digital-ai/dot-components/tree/2.0.1-rc.0) (02/25/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.9.1...2.0.1-rc.0)
+
+**Features:**
+
+- Missing disable props on DotMenu component [\#1021](https://github.com/digital-ai/dot-components/issues/1021)
+- `Autocomplete`: allow custom `renderOption` [\#1002](https://github.com/digital-ai/dot-components/issues/1002)
+- S-82227: `DotMenu`: Missing disable prop [\#1022](https://github.com/digital-ai/dot-components/pull/1022) ([dmiletic85](https://github.com/dmiletic85))
+- S-82076: `Autocomplete`: allow custom `renderOption` [\#1013](https://github.com/digital-ai/dot-components/pull/1013) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- `Autocomplete` popper shouldn't take full height of screen [\#1024](https://github.com/digital-ai/dot-components/issues/1024)
+- No default icon for DotList items [\#1009](https://github.com/digital-ai/dot-components/issues/1009)
+- D-20111: `Autocomplete` popper shouldn't take full height of screen [\#1029](https://github.com/digital-ai/dot-components/pull/1029) ([dmiletic85](https://github.com/dmiletic85))
+- D-20010: `DotList `: No default icon for DotList items [\#1014](https://github.com/digital-ai/dot-components/pull/1014) ([dmiletic85](https://github.com/dmiletic85))
+
+**Merged pull requests:**
+
+- S-81949: migrate test into rc workflow to simplify process [\#1030](https://github.com/digital-ai/dot-components/pull/1030) ([CWSites](https://github.com/CWSites))
+- S-81949: attempting branch name instead of sha [\#1028](https://github.com/digital-ai/dot-components/pull/1028) ([CWSites](https://github.com/CWSites))
+- S-81949: simplfying wait step, extend interval to 30s [\#1027](https://github.com/digital-ai/dot-components/pull/1027) ([CWSites](https://github.com/CWSites))
+- S-81949: add release candidate workflow [\#1026](https://github.com/digital-ai/dot-components/pull/1026) ([CWSites](https://github.com/CWSites))
+
 ## [1.9.1](https://github.com/digital-ai/dot-components/tree/1.9.1) (02/17/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.9.0...1.9.1)
@@ -193,6 +231,7 @@
 - `sidebar` Changes on back arrow [\#890](https://github.com/digital-ai/dot-components/issues/890)
 - `Breadcrumbs` Display tooltip on last item \(on hover\) when it is clipped with ellipsis [\#878](https://github.com/digital-ai/dot-components/issues/878)
 - S-80939: `Menu`: Add option to customize item's height [\#902](https://github.com/digital-ai/dot-components/pull/902) ([dmiletic85](https://github.com/dmiletic85))
+- S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
 - S-80855: Display tooltip on last breadcrumb item \(on hover\) when it is clipped with ellipsis [\#883](https://github.com/digital-ai/dot-components/pull/883) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -211,7 +250,6 @@
 **Features:**
 
 - `Sidebar` Ability to view the sub nav items without expanding the DotSidebar [\#787](https://github.com/digital-ai/dot-components/issues/787)
-- S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -313,7 +351,6 @@
 - Extended sidenav drawer should collapse when another drawer option is clicked [\#739](https://github.com/digital-ai/dot-components/issues/739)
 - \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
 - D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
-- D-19151: `DotBadge` generates console warnings [\#827](https://github.com/digital-ai/dot-components/pull/827) ([dmiletic85](https://github.com/dmiletic85))
 
 **Merged pull requests:**
 
@@ -336,6 +373,7 @@
 - Go back item in `Sidebar` is not aligned with rest of items [\#824](https://github.com/digital-ai/dot-components/issues/824)
 - DotBadge generates console warnings [\#816](https://github.com/digital-ai/dot-components/issues/816)
 - Sidebar scrollbar should be positioned on the very right of the sidebar [\#746](https://github.com/digital-ai/dot-components/issues/746)
+- D-19151: `DotBadge` generates console warnings [\#827](https://github.com/digital-ai/dot-components/pull/827) ([dmiletic85](https://github.com/dmiletic85))
 - D-19177: `Go back` item in `DotSidebar` is not aligned with rest of items [\#826](https://github.com/digital-ai/dot-components/pull/826) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.3.4](https://github.com/digital-ai/dot-components/tree/1.3.4) (11/30/2021)

package/index.esm.js

@@ -1365,12 +1365,17 @@ var variables = /*#__PURE__*/Object.freeze({
 const flyoutMenuClassName = 'dot-flyout-menu';
 const rootClassName$M = 'dot-menu';
 const popperClassName = 'dot-popper';
+const getListMaxHeight = maxHeight => isString(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper$1 = styled(Popper).withConfig({
   displayName: "Menustyles__StyledPopper",
   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:", ";.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$M, 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;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$M, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, ({
+  $maxHeight
+}) => $maxHeight !== undefined && `
+          max-height: ${getListMaxHeight($maxHeight)};
+        `, 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;
@@ -1505,6 +1510,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
       ariaLabel: itemAriaLabel,
       children,
       classes,
+      disabled,
       divider,
       height,
       items: subItems,
@@ -1534,6 +1540,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
       autoFocus: hasAutoFocus,
       "aria-label": itemAriaLabel,
       className: menuItemClasses,
+      disabled: disabled,
       disableRipple: hasSubmenu,
       divider: divider,
       key: key,
@@ -1550,7 +1557,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
     }), hasSubmenu && onSubMenuCreate({
       anchorElement: subItemAnchorEl,
       isOpened: isSelected,
-      subMenuId: `${index}-${key}`,
+      subMenuId: key,
       subMenuItems: subItems
     }));
   }));
@@ -1918,7 +1925,7 @@ const DotList = ({
       primaryText: item.primaryText,
       secondaryText: item.secondaryText,
       selected: item.selected,
-      startIconId: item.startIconId || 'block',
+      startIconId: item.startIconId,
       target: item.target,
       text: item.text,
       title: item.title,
@@ -2280,6 +2287,15 @@ const DotSidebar = ({
   const hasBackItem = _goBack && backItem;
   const displayHeader = title || hasAppLogo;
   const openClass = isOpen ? 'open' : 'collapsed';
+
+  const checkPrimaryNavMissingIcons = () => _navItems.some(item => !item.divider && !item.startIconId);
+
+  useEffect(() => {
+    // Incorrect usage warning
+    if (_collapsable && checkPrimaryNavMissingIcons()) {
+      console.warn('When using `collapsable`, please define `startIconId` for each item in primary nav.');
+    }
+  }, []);
   useEffect(() => {
     setIsOpen(_open);
   }, [_open]);
@@ -2724,6 +2740,7 @@ const DotAutoComplete = ({
   disabled: _disabled = false,
   disablePortal: _disablePortal = true,
   error: _error = false,
+  filterSelectedOptions: _filterSelectedOptions = true,
   freesolo: _freesolo = true,
   group: _group = false,
   helperText,
@@ -2731,6 +2748,7 @@ const DotAutoComplete = ({
   inputRef,
   label,
   loading,
+  maxHeight,
   multiple: _multiple = true,
   onChange,
   onClose,
@@ -2739,6 +2757,8 @@ const DotAutoComplete = ({
   open,
   options,
   placeholder,
+  renderOption,
+  renderTags,
   required: _required = false,
   size: _size = 'small',
   value
@@ -2798,7 +2818,8 @@ const DotAutoComplete = ({
   const DotPopper = props => {
     if (!isActionItemDefined) return /*#__PURE__*/React__default.createElement(StyledPopper$1, Object.assign({}, props, {
       className: popperClassName,
-      disablePortal: _disablePortal
+      disablePortal: _disablePortal,
+      "$maxHeight": maxHeight
     })); // Disable action if customer explicitly enabled duplicate
     // item insertion and input text is found inside the 'options'
 
@@ -2826,7 +2847,8 @@ const DotAutoComplete = ({
 
     return /*#__PURE__*/React__default.createElement(StyledPopper$1, Object.assign({}, props, {
       className: popperClassName,
-      disablePortal: _disablePortal
+      disablePortal: _disablePortal,
+      "$maxHeight": maxHeight
     }), /*#__PURE__*/React__default.createElement(Paper, Object.assign({}, paperProps), paperChildren, /*#__PURE__*/React__default.createElement("div", {
       className: "dot-action-item",
 
@@ -2888,6 +2910,11 @@ const DotAutoComplete = ({
 
   const handleRenderChips = (values, getTagProps) => getChipsFromAutocomplete(values, getTagProps, _dense ? 'small' : 'medium');
 
+  const handleTagsRender = () => {
+    if (!_multiple) return;
+    return renderTags || handleRenderChips;
+  };
+
   return /*#__PURE__*/React__default.createElement(StyledAutocomplete, {
     PopperComponent: DotPopper,
     "aria-label": ariaLabel,
@@ -2898,7 +2925,7 @@ const DotAutoComplete = ({
     "data-testid": dataTestId,
     defaultValue: defaultValue,
     disabled: _disabled,
-    filterSelectedOptions: true,
+    filterSelectedOptions: _filterSelectedOptions,
     freeSolo: _freesolo,
     getOptionLabel: option => parseAutoCompleteValue(option),
     groupBy: _group ? option => option.group : undefined,
@@ -2973,7 +3000,8 @@ const DotAutoComplete = ({
         }))
       );
     },
-    renderTags: _multiple ? handleRenderChips : null,
+    renderOption: renderOption,
+    renderTags: handleTagsRender(),
     size: _size,
     value: value
   });

package/index.umd.js

@@ -1507,12 +1507,18 @@
     var flyoutMenuClassName = 'dot-flyout-menu';
     var rootClassName$M = 'dot-menu';
     var popperClassName = 'dot-popper';
+    var getListMaxHeight = function getListMaxHeight(maxHeight) {
+      return isString(maxHeight) ? maxHeight : maxHeight + "px";
+    };
     var StyledPopper$1 = styled__default["default"](core.Popper).withConfig({
       displayName: "Menustyles__StyledPopper",
       componentId: "sc-134fmqu-0"
     })(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$Q || (templateObject_1$Q = __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$M, 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$Q || (templateObject_1$Q = __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        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\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        overflow: auto;\n\n        /* Conditionally setting 'max-height' with transient prop */\n        ", "\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$M, popperClassName, theme.palette.product === 'agility' && theme.palette.agilityInterface.menuBg, function (_a) {
+        var $maxHeight = _a.$maxHeight;
+        return $maxHeight !== undefined && "\n          max-height: " + getListMaxHeight($maxHeight) + ";\n        ";
+      }, 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$Q, templateObject_2$O;
 
@@ -1663,6 +1669,7 @@
         var itemAriaLabel = item.ariaLabel,
             children = item.children,
             classes = item.classes,
+            disabled = item.disabled,
             divider = item.divider,
             height = item.height,
             subItems = item.items,
@@ -1691,6 +1698,7 @@
           autoFocus: hasAutoFocus,
           "aria-label": itemAriaLabel,
           className: menuItemClasses,
+          disabled: disabled,
           disableRipple: hasSubmenu,
           divider: divider,
           key: key,
@@ -1707,7 +1715,7 @@
         }), hasSubmenu && onSubMenuCreate({
           anchorElement: subItemAnchorEl,
           isOpened: isSelected,
-          subMenuId: index + "-" + key,
+          subMenuId: key,
           subMenuItems: subItems
         }));
       }));
@@ -2107,7 +2115,7 @@
           primaryText: item.primaryText,
           secondaryText: item.secondaryText,
           selected: item.selected,
-          startIconId: item.startIconId || 'block',
+          startIconId: item.startIconId,
           target: item.target,
           text: item.text,
           title: item.title,
@@ -2493,6 +2501,19 @@
       var hasBackItem = goBack && backItem;
       var displayHeader = title || hasAppLogo;
       var openClass = isOpen ? 'open' : 'collapsed';
+
+      var checkPrimaryNavMissingIcons = function checkPrimaryNavMissingIcons() {
+        return navItems.some(function (item) {
+          return !item.divider && !item.startIconId;
+        });
+      };
+
+      React.useEffect(function () {
+        // Incorrect usage warning
+        if (collapsable && checkPrimaryNavMissingIcons()) {
+          console.warn('When using `collapsable`, please define `startIconId` for each item in primary nav.');
+        }
+      }, []);
       React.useEffect(function () {
         setIsOpen(open);
       }, [open]);
@@ -2993,17 +3014,20 @@
           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,
+          _f = _a.filterSelectedOptions,
+          filterSelectedOptions = _f === void 0 ? true : _f,
+          _g = _a.freesolo,
+          freesolo = _g === void 0 ? true : _g,
+          _h = _a.group,
+          group = _h === void 0 ? false : _h,
           helperText = _a.helperText,
           inputId = _a.inputId,
           inputRef = _a.inputRef,
           label = _a.label,
           loading = _a.loading,
-          _h = _a.multiple,
-          multiple = _h === void 0 ? true : _h,
+          maxHeight = _a.maxHeight,
+          _j = _a.multiple,
+          multiple = _j === void 0 ? true : _j,
           onChange = _a.onChange,
           onClose = _a.onClose,
           onInputChange = _a.onInputChange,
@@ -3011,32 +3035,34 @@
           open = _a.open,
           options = _a.options,
           placeholder = _a.placeholder,
-          _j = _a.required,
-          required = _j === void 0 ? false : _j,
-          _k = _a.size,
-          size = _k === void 0 ? 'small' : _k,
+          renderOption = _a.renderOption,
+          renderTags = _a.renderTags,
+          _k = _a.required,
+          required = _k === void 0 ? false : _k,
+          _l = _a.size,
+          size = _l === void 0 ? 'small' : _l,
           value = _a.value;
 
-      var _l = React.useState(!value && !defaultValue),
-          showPlaceholder = _l[0],
-          setShowPlaceholder = _l[1];
+      var _m = React.useState(!value && !defaultValue),
+          showPlaceholder = _m[0],
+          setShowPlaceholder = _m[1];
 
-      var _m = actionItem || {},
-          _o = _m.iconId,
-          actionIconId = _o === void 0 ? 'add' : _o,
-          actionItemText = _m.text,
-          onActionItemClick = _m.onClick,
-          preventDuplicateInsertion = _m.preventDuplicateInsertion;
+      var _o = actionItem || {},
+          _p = _o.iconId,
+          actionIconId = _p === void 0 ? 'add' : _p,
+          actionItemText = _o.text,
+          onActionItemClick = _o.onClick,
+          preventDuplicateInsertion = _o.preventDuplicateInsertion;
 
       var isActionItemDefined = onActionItemClick !== undefined;
 
-      var _p = React.useState(false),
-          isOpened = _p[0],
-          setIsOpened = _p[1];
+      var _q = React.useState(false),
+          isOpened = _q[0],
+          setIsOpened = _q[1];
 
-      var _q = React.useState(''),
-          inputText = _q[0],
-          setInputText = _q[1];
+      var _r = React.useState(''),
+          inputText = _r[0],
+          setInputText = _r[1];
 
       var rootClasses = useStylesWithRootClass(rootClassName$E, className);
       var textFieldRootClasses = useStylesWithRootClass(rootClassName$D, className);
@@ -3084,7 +3110,8 @@
       var DotPopper = function DotPopper(props) {
         if (!isActionItemDefined) return /*#__PURE__*/React__default["default"].createElement(StyledPopper$1, __assign({}, props, {
           className: popperClassName,
-          disablePortal: disablePortal
+          disablePortal: disablePortal,
+          "$maxHeight": maxHeight
         })); // Disable action if customer explicitly enabled duplicate
         // item insertion and input text is found inside the 'options'
 
@@ -3112,7 +3139,8 @@
 
         return /*#__PURE__*/React__default["default"].createElement(StyledPopper$1, __assign({}, props, {
           className: popperClassName,
-          disablePortal: disablePortal
+          disablePortal: disablePortal,
+          "$maxHeight": maxHeight
         }), /*#__PURE__*/React__default["default"].createElement(core.Paper, __assign({}, paperProps), paperChildren, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "dot-action-item",
 
@@ -3178,6 +3206,11 @@
         return getChipsFromAutocomplete(values, getTagProps, dense ? 'small' : 'medium');
       };
 
+      var handleTagsRender = function handleTagsRender() {
+        if (!multiple) return;
+        return renderTags || handleRenderChips;
+      };
+
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocomplete, {
         PopperComponent: DotPopper,
         "aria-label": ariaLabel,
@@ -3188,7 +3221,7 @@
         "data-testid": dataTestId,
         defaultValue: defaultValue,
         disabled: disabled,
-        filterSelectedOptions: true,
+        filterSelectedOptions: filterSelectedOptions,
         freeSolo: freesolo,
         getOptionLabel: function (option) {
           return parseAutoCompleteValue(option);
@@ -3267,7 +3300,8 @@
             }))
           );
         },
-        renderTags: multiple ? handleRenderChips : null,
+        renderOption: renderOption,
+        renderTags: handleTagsRender(),
         size: size,
         value: value
       });

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, ReactNode, Ref } from 'react';
-import { AutocompleteCloseReason } from '@material-ui/lab';
+import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState } from '@material-ui/lab';
 import { CommonProps } from '../CommonProps';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
 export interface ActionItem {
@@ -19,7 +19,11 @@ export interface AutoCompleteOption {
     group?: string;
     title: string;
 }
-export interface AutoCompleteProps extends CommonProps {
+/**
+ * AutoCompleteOption can be extended for the use case when customizing
+ * autocomplete option rendering by using `renderOption` prop.
+ */
+export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption> extends CommonProps {
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
     /** This prop helps users to fill forms faster */
@@ -34,6 +38,8 @@ export interface AutoCompleteProps extends CommonProps {
     disabled?: boolean;
     /** If true, the input will be displayed in an error state. */
     error?: boolean;
+    /** If `true`, hide the selected options from the list box. */
+    filterSelectedOptions?: boolean;
     /** If true, any arbitrary value can be typed in the field */
     freesolo?: boolean;
     /** If true, options will be grouped by category */
@@ -48,6 +54,8 @@ export interface AutoCompleteProps extends CommonProps {
     label?: string;
     /** If true, the component will be in a loading state. */
     loading?: boolean;
+    /** Maximum height of Popper's <ul> element */
+    maxHeight?: number | string;
     /** If true, will allow the user to select multiple options */
     multiple?: boolean;
     /** A function that should be executed when the autocomplete value changes */
@@ -61,9 +69,13 @@ export interface AutoCompleteProps extends CommonProps {
     /** Controls the popup's open state. */
     open?: boolean;
     /** pre-defined options available to the user */
-    options?: Array<AutoCompleteOption>;
+    options?: Array<T>;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
+    /** Render the option, use `getOptionLabel` by default. */
+    renderOption?: (option: T, state: AutocompleteRenderOptionState) => ReactNode;
+    /** Render the selected value. */
+    renderTags?: (value: T[], getTagProps: AutocompleteGetTagProps) => ReactNode;
     /** If true, the input will be required and label will display accordingly */
     required?: boolean;
     /** Determines the padding within the input field 'medium' or 'small' */
@@ -71,4 +83,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, 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;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, renderOption, renderTags, required, size, value, }: AutoCompleteProps<T>) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const selectedAutocompleteClassName = "dot-selected-autocomplete-items";
+export declare const autocompleteWithoutChipsClassName = "dot-autocomplete-without-chips";
+export declare const StyledSelectedAutocompleteItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAutocompleteWithoutChips: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,6 @@
-import { ActionItem } from './AutoComplete';
+import { ChangeEvent } from 'react';
+import { ActionItem, AutoCompleteOption, AutoCompleteProps, AutoCompleteValue } from './AutoComplete';
+import { CommonProps } from '../CommonProps';
 export declare const movies: {
     group: string;
     title: string;
@@ -19,3 +21,19 @@ export declare const actionItemArgType: {
     };
     defaultValue: string;
 };
+export interface AutoCompleteWithRenderOption extends AutoCompleteOption {
+    imageUrl: string;
+}
+export declare const fullNameOptions: AutoCompleteWithRenderOption[];
+export interface SelectedAutocompleteItemsProps extends CommonProps {
+    onItemRemove: (optionTitle: string) => void;
+    selectedOptions: AutoCompleteOption[];
+}
+export declare const SelectedAutocompleteItems: ({ className, onItemRemove, selectedOptions, }: SelectedAutocompleteItemsProps) => JSX.Element;
+export interface AutocompleteWithoutChipsProps extends CommonProps {
+    onChange: (event: ChangeEvent, currentlySelectedOptions: AutoCompleteValue) => void;
+    onItemRemove: (optionTitle: string) => void;
+    selectedOptions: AutoCompleteOption[];
+    storyArgs: AutoCompleteProps;
+}
+export declare const AutocompleteWithoutChips: ({ className, onChange, onItemRemove, selectedOptions, storyArgs, }: AutocompleteWithoutChipsProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export { AutocompleteRenderOptionState } from '@material-ui/lab';
+export * from './AutoComplete';
+export { parseAutoCompleteValue } from './utils/helpers';

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 export type { AppToolbarProps } from './app-toolbar/AppToolbar';
-export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, } from './auto-complete/AutoComplete';
+export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderOptionState, } from './auto-complete';
 export type { AvatarProps } from './avatar/Avatar';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps } from './button/Button';
@@ -31,7 +31,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 } from './auto-complete/AutoComplete';
+export { DotAutoComplete, parseAutoCompleteValue } from './auto-complete';
 export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
 export { DotBadge } from './badge/Badge';
@@ -80,6 +80,5 @@ 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';
 export { DotDivider } from './divider';
 export { DotPopper } from './popper';

package/lib/components/list/List.stories.data.d.ts

@@ -1,3 +1,4 @@
 import { ListItemProps } from './utils/models';
 export declare const mockHref = "/?path=/story/components-list--default";
 export declare const mockListItems: Array<ListItemProps>;
+export declare const listItemsWithoutIcons: Array<ListItemProps>;

package/lib/components/menu/Menu.d.ts

@@ -36,6 +36,8 @@ export interface MenuItemProps {
     children?: ReactNode;
     /** Space delimited CSS classes to be attributed to the menu item */
     classes?: string;
+    /** If true, the item will be displayed in a disabled state. */
+    disabled?: boolean;
     /** If true, a 1px light border is added to the bottom of the menu item. */
     divider?: boolean;
     /** Used to set custom item height (in pixels). This value has priority over "menuItemHeight" prop. */

package/lib/components/menu/Menu.styles.d.ts

@@ -2,4 +2,9 @@ import { Popper } from '@material-ui/core';
 export declare const flyoutMenuClassName = "dot-flyout-menu";
 export declare const rootClassName = "dot-menu";
 export declare const popperClassName = "dot-popper";
-export declare const StyledPopper: import("styled-components").StyledComponent<typeof Popper, any, {}, never>;
+interface StyledPopperArgs {
+    $maxHeight?: number | string;
+}
+export declare const getListMaxHeight: (maxHeight: string | number) => string;
+export declare const StyledPopper: import("styled-components").StyledComponent<typeof Popper, any, StyledPopperArgs, never>;
+export {};

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

@@ -41,8 +41,8 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
         text: string;
         divider?: undefined;
     })[];
+    startIconId: string;
     text: string;
-    startIconId?: undefined;
     onClick?: undefined;
     endIconId?: undefined;
     selected?: undefined;

package/package.json

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