@innovaccer/design-system 2.7.0 → 2.9.0-0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640268335290 
+   * Generated on: 1643701419147 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0
+   *      Version: v2.9.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -491,6 +491,85 @@
       size: 'regular'
     };
 
+    var AvatarCount = function AvatarCount(props) {
+      var _a, _b;
+
+      var hiddenAvatarCount = props.hiddenAvatarCount,
+          avatarStyle = props.avatarStyle;
+      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a));
+      var AvatarVariantsClass = classNames__default["default"]((_b = {
+        Avatar: true
+      }, _b["Avatar--regular"] = true, _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b));
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
+        style: avatarStyle
+      }, /*#__PURE__*/React__namespace.createElement("span", {
+        className: AvatarVariantsClass
+      }, /*#__PURE__*/React__namespace.createElement(Text, {
+        appearance: 'white',
+        className: ContentClass
+      }, "+" + hiddenAvatarCount)));
+    };
+
+    var Avatars = function Avatars(props) {
+      var avatarList = props.avatarList,
+          avatarStyle = props.avatarStyle,
+          tooltipPosition = props.tooltipPosition;
+      var avatars = avatarList.map(function (item, index) {
+        var appearance = item.appearance,
+            firstName = item.firstName,
+            lastName = item.lastName;
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          "data-test": "DesignSystem-AvatarGroup--Avatar",
+          className: "AvatarGroup-item",
+          style: avatarStyle,
+          key: index
+        }, /*#__PURE__*/React__namespace.createElement(Avatar, {
+          appearance: appearance,
+          firstName: firstName,
+          lastName: lastName,
+          withTooltip: true,
+          tooltipPosition: tooltipPosition
+        }));
+      });
+      return avatars;
+    };
+
+    var AvatarPopperBody = function AvatarPopperBody(props) {
+      var hiddenAvatarList = props.hiddenAvatarList,
+          popperRenderer = props.popperRenderer,
+          maxHeight = props.maxHeight,
+          dark = props.dark;
+
+      if (popperRenderer) {
+        return popperRenderer(hiddenAvatarList);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "py-6 pr-4 pl-6"
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "AvatarGroup-TextWrapper",
+        style: {
+          maxHeight: maxHeight
+        }
+      }, hiddenAvatarList.map(function (item, ind) {
+        var _a;
+
+        var _b = item.firstName,
+            firstName = _b === void 0 ? '' : _b,
+            _c = item.lastName,
+            lastName = _c === void 0 ? '' : _c;
+        var name = firstName + " " + lastName;
+        var AvatarTextClass = classNames__default["default"]((_a = {}, _a["mb-5"] = ind < hiddenAvatarList.length - 1, _a));
+        return /*#__PURE__*/React__namespace.createElement(Text, {
+          key: ind,
+          appearance: dark ? 'white' : 'default',
+          className: AvatarTextClass,
+          "data-test": "DesignSystem-AvatarGroup--Text"
+        }, name);
+      })));
+    };
+
     var AvatarGroup = function AvatarGroup(props) {
       var _a, _b;
 
@@ -514,7 +593,7 @@
           _h = popoverOptions.popperClassName,
           popperClassName = _h === void 0 ? '' : _h;
       var baseProps = extractBaseProps(props);
-      var extraAvatars = list.length > max ? list.length - max > 9 ? 9 : list.length - max : 0;
+      var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
       var style = {
         borderRadius: '50%',
         backgroundColor: "" + borderColor,
@@ -523,79 +602,31 @@
       };
       var AvatarGroupClass = classNames__default["default"]((_a = {}, _a['AvatarGroup'] = true, _a), className);
       var popperClass = classNames__default["default"]((_b = {}, _b['AvatarGroup-Popper'] = true, _b), popperClassName);
-      var trigger = /*#__PURE__*/React__namespace.createElement("div", {
-        "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
-        style: style
-      }, /*#__PURE__*/React__namespace.createElement(Avatar, {
-        appearance: "secondary",
-        firstName: "+",
-        lastName: "" + extraAvatars,
-        withTooltip: false
-      }));
-
-      var renderPopper = function renderPopper() {
-        var extraAvatarsList = list.slice(max, list.length);
-
-        if (popperRenderer && typeof renderPopper === 'function') {
-          return popperRenderer(extraAvatarsList);
-        }
-
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "py-6 pr-4 pl-6"
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: "AvatarGroup-TextWrapper",
-          style: {
-            maxHeight: maxHeight
-          }
-        }, extraAvatarsList.map(function (item, ind) {
-          var _a = item.firstName,
-              firstName = _a === void 0 ? '' : _a,
-              _b = item.lastName,
-              lastName = _b === void 0 ? '' : _b;
-          var name = firstName + " " + lastName;
-          return /*#__PURE__*/React__namespace.createElement(Text, {
-            key: ind,
-            appearance: dark ? 'white' : 'default',
-            className: ind < extraAvatars - 1 ? 'mb-5' : '',
-            "data-test": "DesignSystem-AvatarGroup--Text"
-          }, name);
-        })));
-      };
-
-      var renderAvatars = function renderAvatars() {
-        var avatars = list.slice(0, max).map(function (item, index) {
-          var appearance = item.appearance,
-              firstName = item.firstName,
-              lastName = item.lastName;
-          return /*#__PURE__*/React__namespace.createElement("div", {
-            "data-test": "DesignSystem-AvatarGroup--Avatar",
-            className: "AvatarGroup-item",
-            style: style,
-            key: index
-          }, /*#__PURE__*/React__namespace.createElement(Avatar, {
-            appearance: appearance,
-            firstName: firstName,
-            lastName: lastName,
-            withTooltip: true,
-            tooltipPosition: tooltipPosition
-          }));
-        });
-        return avatars;
-      };
-
       return /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-AvatarGroup"
       }, baseProps, {
         className: AvatarGroupClass + " d-inline-flex"
-      }), renderAvatars(), list.length - max > 0 && /*#__PURE__*/React__namespace.createElement(Popover, {
+      }), /*#__PURE__*/React__namespace.createElement(Avatars, {
+        avatarList: list.slice(0, max),
+        avatarStyle: style,
+        tooltipPosition: tooltipPosition
+      }), list.length - max > 0 && /*#__PURE__*/React__namespace.createElement(Popover, {
         on: on,
         dark: dark,
-        trigger: trigger,
+        trigger: /*#__PURE__*/React__namespace.createElement(AvatarCount, {
+          hiddenAvatarCount: hiddenAvatarCount,
+          avatarStyle: style
+        }),
         position: position,
         appendToBody: appendToBody,
         className: popperClass,
         offset: "medium"
-      }, renderPopper()));
+      }, /*#__PURE__*/React__namespace.createElement(AvatarPopperBody, {
+        hiddenAvatarList: list.slice(max, list.length),
+        popperRenderer: popperRenderer,
+        maxHeight: maxHeight,
+        dark: dark
+      })));
     };
     AvatarGroup.displayName = 'AvatarGroup';
     AvatarGroup.defaultProps = {
@@ -928,7 +959,7 @@
         className: "DropdownButton-wrapper"
       }, inlineLabel && /*#__PURE__*/React__namespace.createElement(Text, {
         appearance: "subtle",
-        className: "mr-4"
+        className: "mr-4 white-space-nowrap"
       }, "" + inlineLabel.trim().charAt(0).toUpperCase() + inlineLabel.trim().slice(1)), icon && !inlineLabel && /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
         className: "d-flex align-items-center mr-4",
@@ -1612,25 +1643,25 @@
     };
 
     var DropdownList = function DropdownList(props) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
 
-      var _d = props.listOptions,
-          listOptions = _d === void 0 ? [] : _d,
+      var _e = props.listOptions,
+          listOptions = _e === void 0 ? [] : _e,
           inputRef = props.inputRef,
-          _e = props.align,
-          align = _e === void 0 ? 'right' : _e,
-          _f = props.optionType,
-          optionType = _f === void 0 ? 'DEFAULT' : _f,
-          _g = props.applyButtonLabel,
-          applyButtonLabel = _g === void 0 ? 'Apply' : _g,
-          _h = props.cancelButtonLabel,
-          cancelButtonLabel = _h === void 0 ? 'Cancel' : _h,
-          _j = props.truncateOption,
-          truncateOption = _j === void 0 ? true : _j,
-          _k = props.withSelectAll,
-          withSelectAll = _k === void 0 ? true : _k,
-          _l = props.maxHeight,
-          maxHeight = _l === void 0 ? 200 : _l,
+          _f = props.align,
+          align = _f === void 0 ? 'right' : _f,
+          _g = props.optionType,
+          optionType = _g === void 0 ? 'DEFAULT' : _g,
+          _h = props.applyButtonLabel,
+          applyButtonLabel = _h === void 0 ? 'Apply' : _h,
+          _j = props.cancelButtonLabel,
+          cancelButtonLabel = _j === void 0 ? 'Cancel' : _j,
+          _k = props.truncateOption,
+          truncateOption = _k === void 0 ? true : _k,
+          _l = props.withSelectAll,
+          withSelectAll = _l === void 0 ? true : _l,
+          _m = props.maxHeight,
+          maxHeight = _m === void 0 ? 200 : _m,
           customTrigger = props.customTrigger,
           selected = props.selected,
           tempSelected = props.tempSelected,
@@ -1650,8 +1681,8 @@
           cancelOptions = props.cancelOptions,
           toggleDropdown = props.toggleDropdown,
           className = props.className,
-          _m = props.searchPlaceholder,
-          searchPlaceholder = _m === void 0 ? 'Search..' : _m;
+          _o = props.searchPlaceholder,
+          searchPlaceholder = _o === void 0 ? 'Search..' : _o;
       var baseProps = extractBaseProps(props);
       var dropdownRef = /*#__PURE__*/React__namespace.createRef();
       var triggerRef = /*#__PURE__*/React__namespace.createRef();
@@ -1659,14 +1690,15 @@
       var dropdownCancelButtonRef = /*#__PURE__*/React__namespace.createRef();
       var dropdownApplyButtonRef = /*#__PURE__*/React__namespace.createRef();
 
-      var _o = React__namespace.useState(),
-          popoverStyle = _o[0],
-          setPopoverStyle = _o[1];
+      var _p = React__namespace.useState(),
+          popoverStyle = _p[0],
+          setPopoverStyle = _p[1];
 
-      var _p = React__namespace.useState(firstEnabledOption),
-          cursor = _p[0],
-          setCursor = _p[1];
+      var _q = React__namespace.useState(firstEnabledOption),
+          cursor = _q[0],
+          setCursor = _q[1];
 
+      var animateOrder = 0;
       React__namespace.useEffect(function () {
         var _a;
 
@@ -1687,10 +1719,10 @@
       React__namespace.useEffect(function () {
         if (firstEnabledOption !== cursor) setCursor(firstEnabledOption);
       }, [firstEnabledOption]);
-      var _q = props.triggerSize,
-          triggerSize = _q === void 0 ? 'regular' : _q,
-          _r = props.placeholder,
-          placeholder = _r === void 0 ? 'Select' : _r,
+      var _r = props.triggerSize,
+          triggerSize = _r === void 0 ? 'regular' : _r,
+          _s = props.placeholder,
+          placeholder = _s === void 0 ? 'Select' : _s,
           icon = props.icon,
           error = props.error,
           disabled = props.disabled,
@@ -1725,15 +1757,24 @@
         return Dropdown;
       };
 
+      var animateClass = classNames__default["default"]((_a = {}, _a['fade-in'] = dropdownOpen, _a['opacity-0'] = dropdownOpen, _a['Dropdown-items'] = true, _a));
+
+      var getAnimateOrderStyle = function getAnimateOrderStyle(order) {
+        var animateStyle = {
+          animationDelay: dropdownOpen ? order * 20 + 'ms' : ''
+        };
+        return animateStyle;
+      };
+
       var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
         var _a;
 
-        return classNames__default["default"]((_a = {}, _a['Dropdown-section'] = true, _a['Dropdown-section--withClear'] = showClearButton, _a));
+        return classNames__default["default"]((_a = {}, _a['Dropdown-section'] = true, _a['Dropdown-section--withClear'] = showClearButton, _a), animateClass);
       };
 
-      var dropdownClass = classNames__default["default"]((_a = {}, _a['Dropdown'] = true, _a), className);
-      var dropdownWrapperClass = classNames__default["default"]((_b = {}, _b['Dropdown-wrapper'] = true, _b['Dropdown-wrapper--wrap'] = !truncateOption, _b));
-      var SelectAllClass = classNames__default["default"]((_c = {}, _c['Option-checkbox'] = true, _c['Option-checkbox--active'] = cursor === 0, _c['OptionWrapper'] = true, _c));
+      var dropdownClass = classNames__default["default"]((_b = {}, _b['Dropdown'] = true, _b), className);
+      var dropdownWrapperClass = classNames__default["default"]((_c = {}, _c['Dropdown-wrapper'] = true, _c['Dropdown-wrapper--wrap'] = !truncateOption, _c));
+      var SelectAllClass = classNames__default["default"]((_d = {}, _d['Option-checkbox'] = true, _d['Option-checkbox--active'] = cursor === 0, _d['OptionWrapper'] = true, _d), animateClass);
 
       var onToggleDropdown = function onToggleDropdown(open, type) {
         var _a;
@@ -1783,7 +1824,8 @@
         var _a = props.footerLabel,
             footerLabel = _a === void 0 ? 'Search for more options' : _a;
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: 'Dropdown-footer'
+          className: "Dropdown-footer " + animateClass,
+          style: getAnimateOrderStyle(++animateOrder)
         }, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "small",
           appearance: 'subtle'
@@ -1796,7 +1838,8 @@
           return option.disabled;
         });
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: getDropdownSectionClass(selectedGroup)
+          className: getDropdownSectionClass(selectedGroup),
+          style: getAnimateOrderStyle(++animateOrder)
         }, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "small",
           appearance: 'subtle'
@@ -1813,7 +1856,8 @@
         var disable = _isEqual(previousSelected, tempSelected);
 
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: 'Dropdown-buttonWrapper'
+          className: "Dropdown-buttonWrapper " + animateClass,
+          style: getAnimateOrderStyle(++animateOrder)
         }, /*#__PURE__*/React__namespace.createElement(Button, {
           ref: dropdownCancelButtonRef,
           className: "mr-4",
@@ -1834,7 +1878,8 @@
 
       var renderSearch = function renderSearch() {
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: 'Dropdown-inputWrapper'
+          className: "Dropdown-inputWrapper " + animateClass,
+          style: getAnimateOrderStyle(++animateOrder)
         }, /*#__PURE__*/React__namespace.createElement(Input, {
           name: "Dropdown-search",
           icon: 'search',
@@ -1869,6 +1914,7 @@
             onSelectAll = props.onSelectAll;
         var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
         return /*#__PURE__*/React__namespace.createElement("div", {
+          style: getAnimateOrderStyle(++animateOrder),
           className: SelectAllClass,
           onMouseEnter: function onMouseEnter() {
             return updateActiveOption(0, true);
@@ -1890,7 +1936,10 @@
         var optionIsSelected = tempSelected.findIndex(function (option) {
           return option.value === item.value;
         }) !== -1;
-        return /*#__PURE__*/React__namespace.createElement(Option, {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          style: getAnimateOrderStyle(++animateOrder),
+          className: animateClass
+        }, /*#__PURE__*/React__namespace.createElement(Option, {
           optionData: item,
           truncateOption: truncateOption,
           selected: optionIsSelected,
@@ -1907,7 +1956,7 @@
             return props.onSelect(item, e.target.checked);
           },
           optionType: props.optionType
-        });
+        }));
       };
 
       var renderDropdownSection = function renderDropdownSection() {
@@ -2824,7 +2873,6 @@
         size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
       })), children));
     });
-    ButtonElement.displayName = 'ButtonElement';
     var Button = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var icon = props.icon,
           tooltip = props.tooltip,
@@ -4151,7 +4199,7 @@
       return /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-GenericChip--GenericChipWrapper"
       }, baseProps, {
-        className: "" + className,
+        className: "Chip-wrapper " + className,
         onClick: onClickHandler
       }), icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--Icon",
@@ -6990,7 +7038,11 @@
           return newStyle;
         };
 
-        _this.state = {};
+        _this.state = {
+          animationKeyframe: '',
+          isOpen: _this.props.open || false,
+          uniqueKey: ''
+        };
         _this.hoverableDelay = 100;
         _this.offsetMapping = {
           small: '2px',
@@ -7019,12 +7071,16 @@
 
         if (prevProps.open !== this.props.open) {
           this._throttleWait = false;
+          this.setState({
+            animationKeyframe: ''
+          });
 
           if (this.props.open) {
             var triggerElement = this.triggerRef.current;
             var zIndex = this.getZIndexForLayer(triggerElement);
             this.setState({
-              zIndex: zIndex === undefined ? zIndex : zIndex + 1
+              zIndex: zIndex === undefined ? zIndex : zIndex + 1,
+              isOpen: true
             });
           }
         }
@@ -7148,25 +7204,75 @@
       };
 
       PopperWrapper.prototype.getPopperChildren = function (_a) {
+        var _b;
+
+        var _this = this;
+
+        var _c, _d;
+
         var ref = _a.ref,
             style = _a.style,
             placement = _a.placement,
             outOfBoundaries = _a.outOfBoundaries;
-        var _b = this.props,
-            offset = _b.offset,
-            children = _b.children;
-        var zIndex = this.state.zIndex;
+        var _e = this.props,
+            offset = _e.offset,
+            children = _e.children,
+            open = _e.open,
+            animationClass = _e.animationClass;
+        var _f = this.state,
+            zIndex = _f.zIndex,
+            animationKeyframe = _f.animationKeyframe,
+            uniqueKey = _f.uniqueKey;
         var newStyle = offset ? this.getUpdatedStyle(style, placement, offset) : style;
-        var element = /*#__PURE__*/React__namespace.cloneElement(children, {
+
+        var childrenStyles = __assign(__assign({}, newStyle), {
+          zIndex: zIndex
+        });
+
+        var classes = '';
+
+        if (!animationClass) {
+          var maxHeight = (_c = this.popupRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
+          var transformStyles = (_d = this.popupRef.current) === null || _d === void 0 ? void 0 : _d.style.getPropertyValue('transform');
+
+          if (transformStyles && maxHeight && placement && !animationKeyframe) {
+            var uniqueKey_1 = Math.random().toString(36).substring(2, 6);
+            var isTop = placement.includes('top');
+            var popperAnimation = "\n        @keyframes popper-open-" + uniqueKey_1 + " {\n          from { \n            max-height: 0;\n            " + (isTop ? "margin-top: " + maxHeight + "px" : '') + ";\n          }\n          to {\n            max-height: " + maxHeight + "px;\n            " + (isTop ? "margin-top: 0px" : '') + ";\n          }\n        }\n        @keyframes popper-close-" + uniqueKey_1 + " {\n          from {\n            max-height: " + maxHeight + "px;\n            " + (isTop ? "margin-top: 0px" : '') + ";\n          }\n          to {\n            max-height: 0;\n            " + (isTop ? "margin-top: " + maxHeight + "px" : '') + ";\n          }\n        }\n        ";
+            this.setState({
+              animationKeyframe: popperAnimation,
+              uniqueKey: uniqueKey_1
+            });
+          }
+
+          var popperAnimationStyles = {
+            animation: open ? "popper-open-" + uniqueKey + " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms" : "popper-close-" + uniqueKey + " 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms"
+          };
+          childrenStyles = __assign(__assign(__assign({}, childrenStyles), popperAnimationStyles), {
+            overflow: 'hidden'
+          });
+        } else {
+          classes = classNames__default["default"]((_b = {}, _b["" + animationClass.open] = open, _b["" + animationClass.close] = !open, _b), children.props.className);
+        }
+
+        var childProps = {
           ref: ref,
-          style: __assign(__assign({}, newStyle), {
-            zIndex: zIndex
-          }),
+          style: childrenStyles,
           'data-placement': placement,
           'data-hide': outOfBoundaries,
           onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave
-        });
+          onMouseLeave: this.handleMouseLeave,
+          onAnimationEnd: function onAnimationEnd() {
+            if (!open) {
+              _this.setState({
+                isOpen: false
+              });
+            }
+          }
+        };
+        var element = /*#__PURE__*/React__namespace.cloneElement(children, animationClass ? __assign(__assign({}, childProps), {
+          className: classes
+        }) : __assign({}, childProps));
         return element;
       };
 
@@ -7176,15 +7282,17 @@
         var _a = this.props,
             placement = _a.placement,
             appendToBody = _a.appendToBody,
-            open = _a.open,
             hide = _a.hide,
             boundaryElement = _a.boundaryElement;
-        return /*#__PURE__*/React__namespace.createElement(reactPopper.Manager, null, /*#__PURE__*/React__namespace.createElement(reactPopper.Reference, {
+        var _b = this.state,
+            animationKeyframe = _b.animationKeyframe,
+            isOpen = _b.isOpen;
+        return /*#__PURE__*/React__namespace.createElement(reactPopper.Manager, null, /*#__PURE__*/React__namespace.createElement("style", null, animationKeyframe), /*#__PURE__*/React__namespace.createElement(reactPopper.Reference, {
           innerRef: this.triggerRef
         }, function (_a) {
           var ref = _a.ref;
           return _this.getTriggerElement(ref);
-        }), open && appendToBody && /*#__PURE__*/ReactDOM__namespace.createPortal( /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
+        }), isOpen && appendToBody && /*#__PURE__*/ReactDOM__namespace.createPortal( /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
           placement: placement,
           innerRef: this.popupRef,
           modifiers: {
@@ -7195,7 +7303,7 @@
               enabled: hide
             }
           }
-        }, this.getPopperChildren), document.body), open && !appendToBody && /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
+        }, this.getPopperChildren), document.body), isOpen && !appendToBody && /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
           placement: placement,
           innerRef: this.popupRef
         }, this.getPopperChildren));
@@ -7487,7 +7595,8 @@
           hasSubmenu = props.hasSubmenu,
           isChildren = props.isChildren,
           isChildrenVisible = props.isChildrenVisible,
-          onClick = props.onClick;
+          onClick = props.onClick,
+          customItemRenderer = props.customItemRenderer;
       var baseProps = extractBaseProps(props);
 
       var onClickHandler = function onClickHandler() {
@@ -7522,7 +7631,7 @@
       };
 
       if (!expanded && !menu.icon) return null;
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+      return customItemRenderer ? customItemRenderer(props) : /*#__PURE__*/React__namespace.createElement("div", __assign({
         className: ItemClass
       }, baseProps, {
         onClick: onClickHandler
@@ -7551,7 +7660,8 @@
           expanded = props.expanded,
           rounded = props.rounded,
           autoCollapse = props.autoCollapse,
-          className = props.className;
+          className = props.className,
+          customItemRenderer = props.customItemRenderer;
 
       var _b = React__namespace.useState({}),
           menuState = _b[0],
@@ -7629,7 +7739,8 @@
             isChildren: false,
             rounded: rounded,
             isChildrenVisible: isChildrenVisible,
-            onClick: onClickHandler
+            onClick: onClickHandler,
+            customItemRenderer: customItemRenderer
           }), menuState[menu.name] && menu.subMenu && menu.subMenu.map(function (subMenu, id) {
             return /*#__PURE__*/React__namespace.createElement(MenuItem, {
               key: id,
@@ -7639,7 +7750,8 @@
               isChildren: true,
               rounded: rounded,
               onClick: onClickHandler,
-              isActive: isMenuActive(menus, subMenu, active)
+              isActive: isMenuActive(menus, subMenu, active),
+              customItemRenderer: customItemRenderer
             });
           }));
         });
@@ -7728,6 +7840,16 @@
     };
 
     var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
+    var positionValue = {
+      bottom: 'bottom',
+      top: 'top',
+      'top-start': 'top',
+      'top-end': 'top',
+      'bottom-start': 'bottom',
+      'bottom-end': 'bottom',
+      left: 'left',
+      right: 'right'
+    };
     var Tooltip = function Tooltip(props) {
       var children = props.children,
           tooltip = props.tooltip,
@@ -7743,7 +7865,12 @@
         trigger: children,
         on: 'hover',
         offset: 'medium'
-      }, rest), tooltipWrapper);
+      }, rest, {
+        animationClass: {
+          open: "Tooltip-animation-open-" + positionValue[props.position],
+          close: "Tooltip-animation-close-" + positionValue[props.position]
+        }
+      }), tooltipWrapper);
     };
     Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
       hoverable: false
@@ -8136,6 +8263,9 @@
           "data-test": "DesignSystem-Modal--header"
         }, headerOptions)), !!header && header), /*#__PURE__*/React__namespace.createElement(Column, {
           className: "flex-grow-0"
+        }, /*#__PURE__*/React__namespace.createElement(Tooltip, {
+          tooltip: "Close",
+          position: "top"
         }, /*#__PURE__*/React__namespace.createElement(Button, {
           icon: "close",
           appearance: "transparent",
@@ -8143,7 +8273,7 @@
           onClick: function onClick(event) {
             if (onClose) onClose(event, 'IconClick');
           }
-        }))), children && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, headerOptions || footerOptions || footer || header ? /*#__PURE__*/React__namespace.createElement(OverlayBody, {
+        })))), children && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, headerOptions || footerOptions || footer || header ? /*#__PURE__*/React__namespace.createElement(OverlayBody, {
           className: bodyClass
         }, this.props.children) : children), (!!footer || !!footerOptions) && /*#__PURE__*/React__namespace.createElement(OverlayFooter, __assign({
           "data-test": "DesignSystem-Modal--footer"
@@ -8339,7 +8469,6 @@
             onClose = _c.onClose;
         var classes = classNames__default["default"]({
           FullscreenModal: true,
-          'FullscreenModal--open': open,
           'FullscreenModal-animation--open': animate,
           'FullscreenModal-animation--close': !animate
         }, className);
@@ -8359,7 +8488,7 @@
             sizeXS: '12'
           }
         };
-        var ModalContainer = /*#__PURE__*/React__namespace.createElement("div", {
+        var ModalContainer = open ? /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-FullscreenModalContainer",
           className: ContainerClass,
           "data-layer": true,
@@ -8379,6 +8508,8 @@
           "data-test": "DesignSystem-FullscreenModal--header"
         }, headerOptions)), !!header && header), /*#__PURE__*/React__namespace.createElement(Column, {
           className: "flex-grow-0"
+        }, /*#__PURE__*/React__namespace.createElement(Tooltip, {
+          tooltip: "Close"
         }, /*#__PURE__*/React__namespace.createElement(Button, {
           icon: "close",
           appearance: "transparent",
@@ -8386,7 +8517,7 @@
           onClick: function onClick(event) {
             if (onClose) onClose(event, 'IconClick');
           }
-        }))), /*#__PURE__*/React__namespace.createElement(OverlayBody, {
+        })))), /*#__PURE__*/React__namespace.createElement(OverlayBody, {
           "data-test": "DesignSystem-FullscreenModal--Body",
           className: "FullscreenModal-body"
         }, children), (!!footer || !!footerOptions) && /*#__PURE__*/React__namespace.createElement(OverlayFooter, __assign({
@@ -8394,7 +8525,7 @@
         }, footerOptions, {
           open: open,
           className: "FullscreenModal-footer"
-        }), footer)))));
+        }), footer))))) : null;
         var WrapperElement = /*#__PURE__*/ReactDOM__namespace.createPortal(ModalContainer, this.element);
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, WrapperElement);
       };
@@ -8449,8 +8580,6 @@
       };
 
       Sidesheet.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-
         if (prevProps.open !== this.props.open) {
           if (this.props.open) {
             var zIndex = getUpdatedZIndex({
@@ -8467,12 +8596,6 @@
           } else {
             this.setState({
               animate: false
-            }, function () {
-              window.setTimeout(function () {
-                _this.setState({
-                  open: false
-                });
-              }, 120);
             });
             if (this.props.closeOnEscape) instance.remove(this.sidesheetRef.current);
           }
@@ -8489,6 +8612,14 @@
         }
       };
 
+      Sidesheet.prototype.handleAnimationEnd = function () {
+        if (!this.state.animate) {
+          this.setState({
+            open: false
+          });
+        }
+      };
+
       Sidesheet.prototype.render = function () {
         var _a, _b, _c, _d, _e;
 
@@ -8514,7 +8645,7 @@
           'Sidesheet-animation--open': animate,
           'Sidesheet-animation--close': !animate
         }, className);
-        var ContainerClass = classNames__default["default"]((_a = {}, _a['Overlay-container'] = true, _a['fade-in'] = animate, _a['Overlay-container--open'] = animate, _a['fade-out'] = !animate, _a['Overlay-container--close'] = !animate, _a));
+        var ContainerClass = classNames__default["default"]((_a = {}, _a['Overlay-container'] = true, _a['fade-in'] = animate, _a['Overlay-container--open'] = animate, _a['Overlay-container--close'] = !animate, _a));
         var headerClass = classNames__default["default"]((_b = {}, _b['Sidesheet-header'] = true, _b['Sidesheet-header--withSeperator'] = seperator, _b));
         var footerClass = classNames__default["default"]((_c = {}, _c['Sidesheet-footer'] = true, _c['Sidesheet-footer--withSeperator'] = seperator, _c['Sidesheet-footer--stickToBottom'] = stickFooter, _c));
         var bodyClass = classNames__default["default"]((_d = {}, _d['Sidesheet-body'] = true, _d['Sidesheet-body--withMargin'] = !!footer && stickFooter, _d));
@@ -8527,7 +8658,8 @@
           style: {
             zIndex: zIndex
           },
-          ref: this.sidesheetRef
+          ref: this.sidesheetRef,
+          onAnimationEnd: this.handleAnimationEnd
         }, /*#__PURE__*/React__namespace.createElement(Column, __assign({
           "data-test": "DesignSystem-Sidesheet"
         }, baseProps, {
@@ -8541,6 +8673,8 @@
           headingClass: headingClass
         }, headerOptions)), !!header && header), /*#__PURE__*/React__namespace.createElement(Column, {
           className: "flex-grow-0"
+        }, /*#__PURE__*/React__namespace.createElement(Tooltip, {
+          tooltip: "Close"
         }, /*#__PURE__*/React__namespace.createElement(Button, {
           icon: "close",
           appearance: "transparent",
@@ -8548,7 +8682,7 @@
           onClick: function onClick(event) {
             if (onClose) onClose(event, 'IconClick');
           }
-        }))), /*#__PURE__*/React__namespace.createElement(OverlayBody, {
+        })))), /*#__PURE__*/React__namespace.createElement(OverlayBody, {
           "data-test": "DesignSystem-Sidesheet--OverlayBody",
           className: bodyClass
         }, this.props.children), (!!footer || !!footerOptions) && /*#__PURE__*/React__namespace.createElement(OverlayFooter, __assign({
@@ -12806,8 +12940,7 @@
         className: "Grid-body",
         minItemHeight: minRowHeight[size],
         totalLength: dataLength,
-        length: 20,
-        buffer: 7,
+        length: dataLength,
         renderItem: renderRow
       }));
     };
@@ -14791,7 +14924,7 @@
       vertical: false
     };
 
-    var version = "2.7.0";
+    var version = "2.9.0-0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;