@innovaccer/design-system 2.7.0 → 2.9.0-0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640268334979 
+   * Generated on: 1643701418891 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0
+   *      Version: v2.9.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -848,6 +848,83 @@ Avatar.defaultProps = {
   size: 'regular'
 };
 
+var AvatarCount = function AvatarCount(props) {
+  var _classNames2;
+
+  var hiddenAvatarCount = props.hiddenAvatarCount,
+      avatarStyle = props.avatarStyle;
+  var ContentClass = classnames(_defineProperty$2({}, "Avatar-content--secondary", true));
+  var AvatarVariantsClass = classnames((_classNames2 = {
+    Avatar: true
+  }, _defineProperty$2(_classNames2, "Avatar--regular", true), _defineProperty$2(_classNames2, "Avatar--secondary", true), _defineProperty$2(_classNames2, 'Avatar--disabled', true), _classNames2));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
+    style: avatarStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: AvatarVariantsClass
+  }, /*#__PURE__*/React.createElement(Text, {
+    appearance: 'white',
+    className: ContentClass
+  }, "+".concat(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.createElement("div", {
+      "data-test": "DesignSystem-AvatarGroup--Avatar",
+      className: "AvatarGroup-item",
+      style: avatarStyle,
+      key: index
+    }, /*#__PURE__*/React.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.createElement("div", {
+    className: "py-6 pr-4 pl-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "AvatarGroup-TextWrapper",
+    style: {
+      maxHeight: maxHeight
+    }
+  }, hiddenAvatarList.map(function (item, ind) {
+    var _item$firstName = item.firstName,
+        firstName = _item$firstName === void 0 ? '' : _item$firstName,
+        _item$lastName = item.lastName,
+        lastName = _item$lastName === void 0 ? '' : _item$lastName;
+    var name = "".concat(firstName, " ").concat(lastName);
+    var AvatarTextClass = classnames(_defineProperty$2({}, "mb-5", ind < hiddenAvatarList.length - 1));
+    return /*#__PURE__*/React.createElement(Text, {
+      key: ind,
+      appearance: dark ? 'white' : 'default',
+      className: AvatarTextClass,
+      "data-test": "DesignSystem-AvatarGroup--Text"
+    }, name);
+  })));
+};
+
 var AvatarGroup = function AvatarGroup(props) {
   var max = props.max,
       borderColor = props.borderColor,
@@ -869,7 +946,7 @@ var AvatarGroup = function AvatarGroup(props) {
       _popoverOptions$poppe = popoverOptions.popperClassName,
       popperClassName = _popoverOptions$poppe === void 0 ? '' : _popoverOptions$poppe;
   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: "".concat(borderColor),
@@ -878,79 +955,31 @@ var AvatarGroup = function AvatarGroup(props) {
   };
   var AvatarGroupClass = classnames(_defineProperty$2({}, 'AvatarGroup', true), className);
   var popperClass = classnames(_defineProperty$2({}, 'AvatarGroup-Popper', true), popperClassName);
-  var trigger = /*#__PURE__*/React.createElement("div", {
-    "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
-    style: style
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "secondary",
-    firstName: "+",
-    lastName: "".concat(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.createElement("div", {
-      className: "py-6 pr-4 pl-6"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "AvatarGroup-TextWrapper",
-      style: {
-        maxHeight: maxHeight
-      }
-    }, extraAvatarsList.map(function (item, ind) {
-      var _item$firstName = item.firstName,
-          firstName = _item$firstName === void 0 ? '' : _item$firstName,
-          _item$lastName = item.lastName,
-          lastName = _item$lastName === void 0 ? '' : _item$lastName;
-      var name = "".concat(firstName, " ").concat(lastName);
-      return /*#__PURE__*/React.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.createElement("div", {
-        "data-test": "DesignSystem-AvatarGroup--Avatar",
-        className: "AvatarGroup-item",
-        style: style,
-        key: index
-      }, /*#__PURE__*/React.createElement(Avatar, {
-        appearance: appearance,
-        firstName: firstName,
-        lastName: lastName,
-        withTooltip: true,
-        tooltipPosition: tooltipPosition
-      }));
-    });
-    return avatars;
-  };
-
   return /*#__PURE__*/React.createElement("div", _extends$3({
     "data-test": "DesignSystem-AvatarGroup"
   }, baseProps, {
     className: "".concat(AvatarGroupClass, " d-inline-flex")
-  }), renderAvatars(), list.length - max > 0 && /*#__PURE__*/React.createElement(Popover, {
+  }), /*#__PURE__*/React.createElement(Avatars, {
+    avatarList: list.slice(0, max),
+    avatarStyle: style,
+    tooltipPosition: tooltipPosition
+  }), list.length - max > 0 && /*#__PURE__*/React.createElement(Popover, {
     on: on,
     dark: dark,
-    trigger: trigger,
+    trigger: /*#__PURE__*/React.createElement(AvatarCount, {
+      hiddenAvatarCount: hiddenAvatarCount,
+      avatarStyle: style
+    }),
     position: position,
     appendToBody: appendToBody,
     className: popperClass,
     offset: "medium"
-  }, renderPopper()));
+  }, /*#__PURE__*/React.createElement(AvatarPopperBody, {
+    hiddenAvatarList: list.slice(max, list.length),
+    popperRenderer: popperRenderer,
+    maxHeight: maxHeight,
+    dark: dark
+  })));
 };
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.defaultProps = {
@@ -1287,7 +1316,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: "DropdownButton-wrapper"
   }, inlineLabel && /*#__PURE__*/React.createElement(Text, {
     appearance: "subtle",
-    className: "mr-4"
+    className: "mr-4 white-space-nowrap"
   }, "".concat(inlineLabel.trim().charAt(0).toUpperCase()).concat(inlineLabel.trim().slice(1))), icon && !inlineLabel && /*#__PURE__*/React.createElement(Icon, {
     appearance: buttonDisabled,
     className: "d-flex align-items-center mr-4",
@@ -2009,7 +2038,7 @@ var alignmentMapping = {
 };
 
 var DropdownList = function DropdownList(props) {
-  var _classNames4, _classNames5;
+  var _classNames2, _classNames5, _classNames6;
 
   var _props$listOptions = props.listOptions,
       listOptions = _props$listOptions === void 0 ? [] : _props$listOptions,
@@ -2064,8 +2093,10 @@ var DropdownList = function DropdownList(props) {
   var _React$useState3 = React.useState(firstEnabledOption),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       cursor = _React$useState4[0],
-      setCursor = _React$useState4[1];
+      setCursor = _React$useState4[1]; // Re-initializes its value to 0 on every re-render
+
 
+  var animateOrder = 0;
   React.useEffect(function () {
     if (dropdownOpen) {
       var _triggerRef$current;
@@ -2122,15 +2153,24 @@ var DropdownList = function DropdownList(props) {
     return Dropdown;
   };
 
+  var animateClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'fade-in', dropdownOpen), _defineProperty$2(_classNames2, 'opacity-0', dropdownOpen), _defineProperty$2(_classNames2, 'Dropdown-items', true), _classNames2));
+
+  var getAnimateOrderStyle = function getAnimateOrderStyle(order) {
+    var animateStyle = {
+      animationDelay: dropdownOpen ? order * 20 + 'ms' : ''
+    };
+    return animateStyle;
+  };
+
   var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
-    var _classNames2;
+    var _classNames3;
 
-    return classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Dropdown-section', true), _defineProperty$2(_classNames2, 'Dropdown-section--withClear', showClearButton), _classNames2));
+    return classnames((_classNames3 = {}, _defineProperty$2(_classNames3, 'Dropdown-section', true), _defineProperty$2(_classNames3, 'Dropdown-section--withClear', showClearButton), _classNames3), animateClass);
   };
 
   var dropdownClass = classnames(_defineProperty$2({}, 'Dropdown', true), className);
-  var dropdownWrapperClass = classnames((_classNames4 = {}, _defineProperty$2(_classNames4, 'Dropdown-wrapper', true), _defineProperty$2(_classNames4, 'Dropdown-wrapper--wrap', !truncateOption), _classNames4));
-  var SelectAllClass = classnames((_classNames5 = {}, _defineProperty$2(_classNames5, 'Option-checkbox', true), _defineProperty$2(_classNames5, 'Option-checkbox--active', cursor === 0), _defineProperty$2(_classNames5, 'OptionWrapper', true), _classNames5));
+  var dropdownWrapperClass = classnames((_classNames5 = {}, _defineProperty$2(_classNames5, 'Dropdown-wrapper', true), _defineProperty$2(_classNames5, 'Dropdown-wrapper--wrap', !truncateOption), _classNames5));
+  var SelectAllClass = classnames((_classNames6 = {}, _defineProperty$2(_classNames6, 'Option-checkbox', true), _defineProperty$2(_classNames6, 'Option-checkbox--active', cursor === 0), _defineProperty$2(_classNames6, 'OptionWrapper', true), _classNames6), animateClass);
 
   var onToggleDropdown = function onToggleDropdown(open, type) {
     var _dropdownTriggerRef$c;
@@ -2180,7 +2220,8 @@ var DropdownList = function DropdownList(props) {
     var _props$footerLabel = props.footerLabel,
         footerLabel = _props$footerLabel === void 0 ? 'Search for more options' : _props$footerLabel;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'Dropdown-footer'
+      className: "Dropdown-footer ".concat(animateClass),
+      style: getAnimateOrderStyle(++animateOrder)
     }, /*#__PURE__*/React.createElement(Text, {
       size: "small",
       appearance: 'subtle'
@@ -2193,7 +2234,8 @@ var DropdownList = function DropdownList(props) {
       return option.disabled;
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: getDropdownSectionClass(selectedGroup)
+      className: getDropdownSectionClass(selectedGroup),
+      style: getAnimateOrderStyle(++animateOrder)
     }, /*#__PURE__*/React.createElement(Text, {
       size: "small",
       appearance: 'subtle'
@@ -2210,7 +2252,8 @@ var DropdownList = function DropdownList(props) {
     var disable = _isEqual(previousSelected, tempSelected);
 
     return /*#__PURE__*/React.createElement("div", {
-      className: 'Dropdown-buttonWrapper'
+      className: "Dropdown-buttonWrapper ".concat(animateClass),
+      style: getAnimateOrderStyle(++animateOrder)
     }, /*#__PURE__*/React.createElement(Button, {
       ref: dropdownCancelButtonRef,
       className: "mr-4",
@@ -2231,7 +2274,8 @@ var DropdownList = function DropdownList(props) {
 
   var renderSearch = function renderSearch() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'Dropdown-inputWrapper'
+      className: "Dropdown-inputWrapper ".concat(animateClass),
+      style: getAnimateOrderStyle(++animateOrder)
     }, /*#__PURE__*/React.createElement(Input, {
       name: "Dropdown-search",
       icon: 'search',
@@ -2268,6 +2312,7 @@ var DropdownList = function DropdownList(props) {
         onSelectAll = props.onSelectAll;
     var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
     return /*#__PURE__*/React.createElement("div", {
+      style: getAnimateOrderStyle(++animateOrder),
       className: SelectAllClass,
       onMouseEnter: function onMouseEnter() {
         return updateActiveOption(0, true);
@@ -2293,7 +2338,10 @@ var DropdownList = function DropdownList(props) {
     var optionIsSelected = tempSelected.findIndex(function (option) {
       return option.value === item.value;
     }) !== -1;
-    return /*#__PURE__*/React.createElement(Option, {
+    return /*#__PURE__*/React.createElement("div", {
+      style: getAnimateOrderStyle(++animateOrder),
+      className: animateClass
+    }, /*#__PURE__*/React.createElement(Option, {
       optionData: item,
       truncateOption: truncateOption,
       selected: optionIsSelected,
@@ -2310,7 +2358,7 @@ var DropdownList = function DropdownList(props) {
         return props.onSelect(item, e.target.checked);
       },
       optionType: props.optionType
-    });
+    }));
   };
 
   var renderDropdownSection = function renderDropdownSection() {
@@ -3217,7 +3265,8 @@ var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
   large: 20
-};
+}; // eslint-disable-next-line react/display-name
+
 var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -3266,7 +3315,6 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
   })), children));
 });
-ButtonElement.displayName = 'ButtonElement';
 var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var icon = props.icon,
       tooltip = props.tooltip,
@@ -4608,7 +4656,7 @@ var GenericChip = function GenericChip(props) {
     React.createElement("div", _extends$3({
       "data-test": "DesignSystem-GenericChip--GenericChipWrapper"
     }, baseProps, {
-      className: "".concat(className),
+      className: "Chip-wrapper ".concat(className),
       onClick: onClickHandler
     }), icon && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-GenericChip--Icon",
@@ -12155,7 +12203,11 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       return newStyle;
     });
 
-    _this.state = {};
+    _this.state = {
+      animationKeyframe: '',
+      isOpen: _this.props.open || false,
+      uniqueKey: ''
+    };
     _this.hoverableDelay = 100;
     _this.offsetMapping = {
       small: '2px',
@@ -12187,12 +12239,16 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
 
       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
           });
         }
       }
@@ -12326,44 +12382,99 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getPopperChildren",
     value: function getPopperChildren(_ref) {
+      var _this4 = this;
+
       var ref = _ref.ref,
           style = _ref.style,
           placement = _ref.placement,
           outOfBoundaries = _ref.outOfBoundaries;
       var _this$props5 = this.props,
           offset = _this$props5.offset,
-          children = _this$props5.children;
-      var zIndex = this.state.zIndex;
+          children = _this$props5.children,
+          open = _this$props5.open,
+          animationClass = _this$props5.animationClass;
+      var _this$state = this.state,
+          zIndex = _this$state.zIndex,
+          animationKeyframe = _this$state.animationKeyframe,
+          uniqueKey = _this$state.uniqueKey;
       var newStyle = offset ? this.getUpdatedStyle(style, placement, offset) : style;
-      var element = /*#__PURE__*/React.cloneElement(children, {
+
+      var childrenStyles = _objectSpread2(_objectSpread2({}, newStyle), {}, {
+        zIndex: zIndex
+      });
+
+      var classes = '';
+
+      if (!animationClass) {
+        var _this$popupRef$curren, _this$popupRef$curren2;
+
+        var maxHeight = (_this$popupRef$curren = this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.offsetHeight; // we need to check for transformStyles so that we open the popover at correct position (left/right)
+
+        var transformStyles = (_this$popupRef$curren2 = this.popupRef.current) === null || _this$popupRef$curren2 === void 0 ? void 0 : _this$popupRef$curren2.style.getPropertyValue('transform');
+
+        if (transformStyles && maxHeight && placement && !animationKeyframe) {
+          var _uniqueKey = Math.random().toString(36).substring(2, 6);
+
+          var isTop = placement.includes('top');
+          var popperAnimation = "\n        @keyframes popper-open-".concat(_uniqueKey, " {\n          from { \n            max-height: 0;\n            ").concat(isTop ? "margin-top: ".concat(maxHeight, "px") : '', ";\n          }\n          to {\n            max-height: ").concat(maxHeight, "px;\n            ").concat(isTop ? "margin-top: 0px" : '', ";\n          }\n        }\n        @keyframes popper-close-").concat(_uniqueKey, " {\n          from {\n            max-height: ").concat(maxHeight, "px;\n            ").concat(isTop ? "margin-top: 0px" : '', ";\n          }\n          to {\n            max-height: 0;\n            ").concat(isTop ? "margin-top: ".concat(maxHeight, "px") : '', ";\n          }\n        }\n        ");
+          this.setState({
+            animationKeyframe: popperAnimation,
+            uniqueKey: _uniqueKey
+          });
+        } // defining popper-fade-in custom keyframe as it is specific to popover usecase.
+
+
+        var popperAnimationStyles = {
+          animation: open ? "popper-open-".concat(uniqueKey, " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms") : "popper-close-".concat(uniqueKey, " 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms")
+        };
+        childrenStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, childrenStyles), popperAnimationStyles), {}, {
+          overflow: 'hidden'
+        });
+      } else {
+        var _classNames;
+
+        classes = classnames((_classNames = {}, _defineProperty$2(_classNames, "".concat(animationClass.open), open), _defineProperty$2(_classNames, "".concat(animationClass.close), !open), _classNames), children.props.className);
+      }
+
+      var childProps = {
         ref: ref,
-        style: _objectSpread2(_objectSpread2({}, 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) {
+            _this4.setState({
+              isOpen: false
+            });
+          }
+        }
+      };
+      var element = /*#__PURE__*/React.cloneElement(children, animationClass ? _objectSpread2(_objectSpread2({}, childProps), {}, {
+        className: classes
+      }) : _objectSpread2({}, childProps));
       return element;
     }
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props6 = this.props,
           placement = _this$props6.placement,
           appendToBody = _this$props6.appendToBody,
-          open = _this$props6.open,
           hide = _this$props6.hide,
           boundaryElement = _this$props6.boundaryElement;
-      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, {
+      var _this$state2 = this.state,
+          animationKeyframe = _this$state2.animationKeyframe,
+          isOpen = _this$state2.isOpen;
+      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement("style", null, animationKeyframe), /*#__PURE__*/React.createElement(Reference, {
         innerRef: this.triggerRef
       }, function (_ref2) {
         var ref = _ref2.ref;
-        return _this4.getTriggerElement(ref);
-      }), open && appendToBody && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
+        return _this5.getTriggerElement(ref);
+      }), isOpen && appendToBody && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef,
         modifiers: {
@@ -12374,7 +12485,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
             enabled: hide
           }
         }
-      }, this.getPopperChildren), document.body), open && !appendToBody && /*#__PURE__*/React.createElement(Popper, {
+      }, this.getPopperChildren), document.body), isOpen && !appendToBody && /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef
       }, this.getPopperChildren));
@@ -12688,7 +12799,8 @@ var MenuItem = function MenuItem(props) {
       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() {
@@ -12723,26 +12835,25 @@ var MenuItem = function MenuItem(props) {
   };
 
   if (!expanded && !menu.icon) return null;
-  return (
-    /*#__PURE__*/
-    // TODO(a11y)
-    // eslint-disable-next-line
-    React.createElement("div", _extends$3({
-      className: ItemClass
-    }, baseProps, {
-      onClick: onClickHandler
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "d-flex align-items-center overflow-hidden"
-    }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
-      "data-test": "DesignSystem-VerticalNav--Icon",
-      className: expanded ? 'mr-4' : '',
-      name: menu.icon,
-      appearance: getIconAppearance(isActive, menu.disabled)
-    }), expanded && /*#__PURE__*/React.createElement(Text, {
-      "data-test": "DesignSystem-VerticalNav--Text",
-      appearance: getTextAppearance(isActive, menu.disabled)
-    }, menu.label)), expanded && renderSubMenu())
-  );
+  return customItemRenderer ? customItemRenderer(props) :
+  /*#__PURE__*/
+  // TODO(a11y)
+  // eslint-disable-next-line
+  React.createElement("div", _extends$3({
+    className: ItemClass
+  }, baseProps, {
+    onClick: onClickHandler
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center overflow-hidden"
+  }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
+    "data-test": "DesignSystem-VerticalNav--Icon",
+    className: expanded ? 'mr-4' : '',
+    name: menu.icon,
+    appearance: getIconAppearance(isActive, menu.disabled)
+  }), expanded && /*#__PURE__*/React.createElement(Text, {
+    "data-test": "DesignSystem-VerticalNav--Text",
+    appearance: getTextAppearance(isActive, menu.disabled)
+  }, menu.label)), expanded && renderSubMenu());
 };
 MenuItem.defaultProps = {
   isActive: false
@@ -12758,7 +12869,8 @@ var VerticalNav = function VerticalNav(props) {
       expanded = props.expanded,
       rounded = props.rounded,
       autoCollapse = props.autoCollapse,
-      className = props.className;
+      className = props.className,
+      customItemRenderer = props.customItemRenderer;
 
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12835,7 +12947,8 @@ var VerticalNav = function VerticalNav(props) {
         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.createElement(MenuItem, {
           key: id,
@@ -12845,7 +12958,8 @@ var VerticalNav = function VerticalNav(props) {
           isChildren: true,
           rounded: rounded,
           onClick: onClickHandler,
-          isActive: isMenuActive(menus, subMenu, active)
+          isActive: isMenuActive(menus, subMenu, active),
+          customItemRenderer: customItemRenderer
         });
       }));
     });
@@ -12938,6 +13052,16 @@ var HorizontalNav = function HorizontalNav(props) {
 
 var _excluded$7 = ["children", "tooltip"];
 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,
@@ -12953,7 +13077,12 @@ var Tooltip = function Tooltip(props) {
     trigger: children,
     on: 'hover',
     offset: 'medium'
-  }, rest), tooltipWrapper);
+  }, rest, {
+    animationClass: {
+      open: "Tooltip-animation-open-".concat(positionValue[props.position]),
+      close: "Tooltip-animation-close-".concat(positionValue[props.position])
+    }
+  }), tooltipWrapper);
 }; // Tooltip.defaultProps = filterProps({
 //   ...Popover.defaultProps,
 //   hoverable: false
@@ -13380,6 +13509,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         "data-test": "DesignSystem-Modal--header"
       }, headerOptions)), !!header && header), /*#__PURE__*/React.createElement(Column, {
         className: "flex-grow-0"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        tooltip: "Close",
+        position: "top"
       }, /*#__PURE__*/React.createElement(Button, {
         icon: "close",
         appearance: "transparent",
@@ -13387,7 +13519,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(event) {
           if (onClose) onClose(event, 'IconClick');
         }
-      }))), children && /*#__PURE__*/React.createElement(React.Fragment, null, headerOptions || footerOptions || footer || header ? /*#__PURE__*/React.createElement(OverlayBody, {
+      })))), children && /*#__PURE__*/React.createElement(React.Fragment, null, headerOptions || footerOptions || footer || header ? /*#__PURE__*/React.createElement(OverlayBody, {
         className: bodyClass
       }, this.props.children) : children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$3({
         "data-test": "DesignSystem-Modal--footer"
@@ -13596,7 +13728,6 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
           onClose = _this$props.onClose;
       var classes = classnames({
         FullscreenModal: true,
-        'FullscreenModal--open': open,
         'FullscreenModal-animation--open': animate,
         'FullscreenModal-animation--close': !animate
       }, className);
@@ -13616,7 +13747,7 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
           sizeXS: '12'
         }
       };
-      var ModalContainer = /*#__PURE__*/React.createElement("div", {
+      var ModalContainer = open ? /*#__PURE__*/React.createElement("div", {
         "data-test": "DesignSystem-FullscreenModalContainer",
         className: ContainerClass,
         "data-layer": true,
@@ -13636,6 +13767,8 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
         "data-test": "DesignSystem-FullscreenModal--header"
       }, headerOptions)), !!header && header), /*#__PURE__*/React.createElement(Column, {
         className: "flex-grow-0"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        tooltip: "Close"
       }, /*#__PURE__*/React.createElement(Button, {
         icon: "close",
         appearance: "transparent",
@@ -13643,7 +13776,7 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(event) {
           if (onClose) onClose(event, 'IconClick');
         }
-      }))), /*#__PURE__*/React.createElement(OverlayBody, {
+      })))), /*#__PURE__*/React.createElement(OverlayBody, {
         "data-test": "DesignSystem-FullscreenModal--Body",
         className: "FullscreenModal-body"
       }, children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$3({
@@ -13651,7 +13784,7 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
       }, footerOptions, {
         open: open,
         className: "FullscreenModal-footer"
-      }), footer)))));
+      }), footer))))) : null;
       var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(ModalContainer, this.element);
       return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement);
     }
@@ -13720,8 +13853,6 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
       if (prevProps.open !== this.props.open) {
         if (this.props.open) {
           var zIndex = getUpdatedZIndex({
@@ -13738,12 +13869,6 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         } else {
           this.setState({
             animate: false
-          }, function () {
-            window.setTimeout(function () {
-              _this2.setState({
-                open: false
-              });
-            }, 120);
           });
           if (this.props.closeOnEscape) instance.remove(this.sidesheetRef.current);
         }
@@ -13760,6 +13885,15 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         if (onClose) onClose(event, 'OutsideClick');
       }
     }
+  }, {
+    key: "handleAnimationEnd",
+    value: function handleAnimationEnd() {
+      if (!this.state.animate) {
+        this.setState({
+          open: false
+        });
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -13787,7 +13921,7 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         'Sidesheet-animation--open': animate,
         'Sidesheet-animation--close': !animate
       }, className);
-      var ContainerClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Overlay-container', true), _defineProperty$2(_classNames, 'fade-in', animate), _defineProperty$2(_classNames, 'Overlay-container--open', animate), _defineProperty$2(_classNames, 'fade-out', !animate), _defineProperty$2(_classNames, 'Overlay-container--close', !animate), _classNames));
+      var ContainerClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Overlay-container', true), _defineProperty$2(_classNames, 'fade-in', animate), _defineProperty$2(_classNames, 'Overlay-container--open', animate), _defineProperty$2(_classNames, 'Overlay-container--close', !animate), _classNames));
       var headerClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Sidesheet-header', true), _defineProperty$2(_classNames2, 'Sidesheet-header--withSeperator', seperator), _classNames2));
       var footerClass = classnames((_classNames3 = {}, _defineProperty$2(_classNames3, 'Sidesheet-footer', true), _defineProperty$2(_classNames3, 'Sidesheet-footer--withSeperator', seperator), _defineProperty$2(_classNames3, 'Sidesheet-footer--stickToBottom', stickFooter), _classNames3));
       var bodyClass = classnames((_classNames4 = {}, _defineProperty$2(_classNames4, 'Sidesheet-body', true), _defineProperty$2(_classNames4, 'Sidesheet-body--withMargin', !!footer && stickFooter), _classNames4));
@@ -13800,7 +13934,8 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         style: {
           zIndex: zIndex
         },
-        ref: this.sidesheetRef
+        ref: this.sidesheetRef,
+        onAnimationEnd: this.handleAnimationEnd
       }, /*#__PURE__*/React.createElement(Column, _extends$3({
         "data-test": "DesignSystem-Sidesheet"
       }, baseProps, {
@@ -13814,6 +13949,8 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         headingClass: headingClass
       }, headerOptions)), !!header && header), /*#__PURE__*/React.createElement(Column, {
         className: "flex-grow-0"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        tooltip: "Close"
       }, /*#__PURE__*/React.createElement(Button, {
         icon: "close",
         appearance: "transparent",
@@ -13821,7 +13958,7 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(event) {
           if (onClose) onClose(event, 'IconClick');
         }
-      }))), /*#__PURE__*/React.createElement(OverlayBody, {
+      })))), /*#__PURE__*/React.createElement(OverlayBody, {
         "data-test": "DesignSystem-Sidesheet--OverlayBody",
         className: bodyClass
       }, this.props.children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$3({
@@ -18266,8 +18403,7 @@ var GridBody = function GridBody(props) {
     className: "Grid-body",
     minItemHeight: minRowHeight[size],
     totalLength: dataLength,
-    length: 20,
-    buffer: 7,
+    length: dataLength,
     renderItem: renderRow
   }));
 };
@@ -20346,6 +20482,6 @@ Divider.defaultProps = {
   vertical: false
 };
 
-var version = "2.7.0";
+var version = "2.9.0-0";
 
 export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };