@innovaccer/design-system 2.7.0 → 2.8.0-0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640268334979 
+   * Generated on: 1642005068063 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0
+   *      Version: v2.8.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",
@@ -4608,7 +4637,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",
@@ -12115,6 +12144,8 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty$2(_assertThisInitialized$2(_this), "offsetMapping", void 0);
 
+    _defineProperty$2(_assertThisInitialized$2(_this), "positionOffset", void 0);
+
     _defineProperty$2(_assertThisInitialized$2(_this), "togglePopper", function (type, newValue) {
       var _this$props = _this.props,
           open = _this$props.open,
@@ -12155,13 +12186,34 @@ 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',
       medium: '4px',
       large: '8px'
     };
+    _this.positionOffset = {
+      'auto-start': 'top left',
+      auto: 'top',
+      'auto-end': 'top right',
+      'top-start': 'bottom left',
+      top: 'bottom',
+      'top-end': 'bottom right',
+      'right-start': 'top right',
+      right: 'top right',
+      'right-end': 'top right',
+      'bottom-end': 'top right',
+      bottom: 'top',
+      'bottom-start': 'top left',
+      'left-end': 'top left',
+      left: 'top left',
+      'left-start': 'top left'
+    };
     _this.triggerRef = /*#__PURE__*/React.createRef();
     _this.popupRef = /*#__PURE__*/React.createRef();
     _this.getPopperChildren = _this.getPopperChildren.bind(_assertThisInitialized$2(_this));
@@ -12180,6 +12232,8 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
       if (!prevProps.boundaryElement && this.props.boundaryElement) {
         this.removeBoundaryScrollHandler();
         this.addBoundaryScrollHandler();
@@ -12187,13 +12241,23 @@ 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
           });
+        } else {
+          setTimeout(function () {
+            _this2.setState({
+              isOpen: false
+            });
+          }, 120);
         }
       }
     }
@@ -12236,11 +12300,11 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "mouseMoveHandler",
     value: function mouseMoveHandler() {
-      var _this2 = this;
+      var _this3 = this;
 
       if (this._timer) clearTimeout(this._timer);
       this._timer = window.setTimeout(function () {
-        var onToggle = _this2.props.onToggle;
+        var onToggle = _this3.props.onToggle;
         onToggle(false, 'mouseLeave');
       }, this.hoverableDelay);
     }
@@ -12286,7 +12350,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getTriggerElement",
     value: function getTriggerElement(ref) {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props4 = this.props,
           trigger = _this$props4.trigger,
@@ -12301,19 +12365,19 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(ev) {
           ev.stopPropagation();
 
-          _this3.togglePopper('onClick');
+          _this4.togglePopper('onClick');
         }
       };
       var classes = classnames('PopperWrapper-trigger', triggerClass);
 
       var onOutsideClickHandler = function onOutsideClickHandler(event) {
-        var _this3$props = _this3.props,
-            open = _this3$props.open,
-            closeOnBackdropClick = _this3$props.closeOnBackdropClick;
+        var _this4$props = _this4.props,
+            open = _this4$props.open,
+            closeOnBackdropClick = _this4$props.closeOnBackdropClick;
 
         if (open && closeOnBackdropClick) {
-          if (!_this3.doesEventContainsElement(event, _this3.popupRef)) {
-            _this3.togglePopper('outsideClick');
+          if (!_this4.doesEventContainsElement(event, _this4.popupRef)) {
+            _this4.togglePopper('outsideClick');
           }
         }
       };
@@ -12332,38 +12396,79 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           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;
+
+        var transformStyles = (_this$popupRef$curren = this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.style.getPropertyValue('transform');
+
+        if (transformStyles && !animationKeyframe) {
+          var _uniqueKey = Math.random().toString(36).substring(2, 6);
+
+          var popperAnimation = "\n        @keyframes popper-open-".concat(_uniqueKey, " {\n          from { \n            transform: ").concat(transformStyles, " scaleY(0.5);\n            opacity: 0.5;\n          }\n          to {\n            transform: ").concat(transformStyles, " scaleY(1);\n            opacity: 1\n          }\n        }\n        @keyframes popper-close-").concat(_uniqueKey, " {\n          from {\n            transform: ").concat(transformStyles, " scaleY(1);\n            opacity: 1\n          }\n          to {\n            transform: ").concat(transformStyles, " scaleY(0);\n            opacity: 0.5\n          }\n        }");
+          this.setState({
+            animationKeyframe: popperAnimation,
+            uniqueKey: _uniqueKey
+          });
+        }
+
+        var popperAnimationStyles = {
+          transformOrigin: this.positionOffset[this.props.placement],
+          animation: open ? "popper-open-".concat(uniqueKey, " 120ms cubic-bezier(0, 0, 0.38, 0.9)") : "popper-close-".concat(uniqueKey, " 120ms cubic-bezier(0.2, 0, 1, 0.9)")
+        };
+        childrenStyles = _objectSpread2(_objectSpread2({}, childrenStyles), popperAnimationStyles);
+      } 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
-      });
+      };
+      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 +12479,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));
@@ -20346,6 +20451,6 @@ Divider.defaultProps = {
   vertical: false
 };
 
-var version = "2.7.0";
+var version = "2.8.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 };