@innovaccer/design-system 2.7.0 → 2.8.0-0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640268335290 
+   * Generated on: 1642005068367 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0
+   *      Version: v2.8.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",
@@ -4151,7 +4182,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,13 +7021,34 @@
           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__namespace.createRef();
         _this.popupRef = /*#__PURE__*/React__namespace.createRef();
         _this.getPopperChildren = _this.getPopperChildren.bind(_this);
@@ -7012,6 +7064,8 @@
       };
 
       PopperWrapper.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+
         if (!prevProps.boundaryElement && this.props.boundaryElement) {
           this.removeBoundaryScrollHandler();
           this.addBoundaryScrollHandler();
@@ -7019,13 +7073,23 @@
 
         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 () {
+              _this.setState({
+                isOpen: false
+              });
+            }, 120);
           }
         }
       };
@@ -7148,25 +7212,63 @@
       };
 
       PopperWrapper.prototype.getPopperChildren = function (_a) {
+        var _b;
+
+        var _c;
+
         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 _d = this.props,
+            offset = _d.offset,
+            children = _d.children,
+            open = _d.open,
+            animationClass = _d.animationClass;
+        var _e = this.state,
+            zIndex = _e.zIndex,
+            animationKeyframe = _e.animationKeyframe,
+            uniqueKey = _e.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 transformStyles = (_c = this.popupRef.current) === null || _c === void 0 ? void 0 : _c.style.getPropertyValue('transform');
+
+          if (transformStyles && !animationKeyframe) {
+            var uniqueKey_1 = Math.random().toString(36).substring(2, 6);
+            var popperAnimation = "\n        @keyframes popper-open-" + uniqueKey_1 + " {\n          from { \n            transform: " + transformStyles + " scaleY(0.5);\n            opacity: 0.5;\n          }\n          to {\n            transform: " + transformStyles + " scaleY(1);\n            opacity: 1\n          }\n        }\n        @keyframes popper-close-" + uniqueKey_1 + " {\n          from {\n            transform: " + transformStyles + " scaleY(1);\n            opacity: 1\n          }\n          to {\n            transform: " + transformStyles + " scaleY(0);\n            opacity: 0.5\n          }\n        }";
+            this.setState({
+              animationKeyframe: popperAnimation,
+              uniqueKey: uniqueKey_1
+            });
+          }
+
+          var popperAnimationStyles = {
+            transformOrigin: this.positionOffset[this.props.placement],
+            animation: open ? "popper-open-" + uniqueKey + " 120ms cubic-bezier(0, 0, 0.38, 0.9)" : "popper-close-" + uniqueKey + " 120ms cubic-bezier(0.2, 0, 1, 0.9)"
+          };
+          childrenStyles = __assign(__assign({}, childrenStyles), popperAnimationStyles);
+        } 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
-        });
+        };
+        var element = /*#__PURE__*/React__namespace.cloneElement(children, animationClass ? __assign(__assign({}, childProps), {
+          className: classes
+        }) : __assign({}, childProps));
         return element;
       };
 
@@ -7176,15 +7278,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 +7299,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));
@@ -14791,7 +14895,7 @@
       vertical: false
     };
 
-    var version = "2.7.0";
+    var version = "2.8.0-0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;