@atlaskit/profilecard 16.6.1 → 16.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/profilecard
 
+## 16.7.0
+
+### Minor Changes
+
+- [`4e9fbfb9e85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e9fbfb9e85) - [ux] Adding meatballs overflow menu when the profile card has more than two action buttons
+
 ## 16.6.1
 
 ### Patch Changes

package/dist/cjs/components/User/OverflowProfileCardButtons.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowProfileCardButtons = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+
+var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
+
+var _messages = _interopRequireDefault(require("../../messages"));
+
+var _Card = require("../../styled/Card");
+
+var _excluded = ["triggerRef", "isSelected", "testId"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_Card.OverflowActionButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    placement: 'bottom-end',
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+          isSelected = _ref.isSelected,
+          testId = _ref.testId,
+          providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_more.default, {
+          label: intl.formatMessage(_messages.default.profileCardMoreIconLabel)
+        })
+      }));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, props.actions.map(function (action) {
+    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+      key: action.id,
+      onClick: function onClick(event) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        props.onItemClick(action, args, event);
+      },
+      href: action.link
+    }, action.label);
+  }))));
+};
+
+exports.OverflowProfileCardButtons = OverflowProfileCardButtons;

package/dist/cjs/components/User/ProfileCard.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -55,6 +57,8 @@ var _Error = require("../Error");
 
 var _Icon = require("../Icon");
 
+var _OverflowProfileCardButtons = require("./OverflowProfileCardButtons");
+
 var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
 
 var _excluded = ["text"];
@@ -106,20 +110,11 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         appearance: idx === 0 ? 'default' : 'subtle',
         key: action.id || idx,
         onClick: function onClick(event) {
-          _this.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
-            id: action.id || null,
-            duration: _this.durationSince(_this.timeOpen)
-          });
-
-          if (action.callback && (0, _click.isBasicClick)(event)) {
-            event.preventDefault();
-
-            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-              args[_key - 1] = arguments[_key];
-            }
-
-            action.callback.apply(action, [event].concat(args));
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
           }
+
+          return _this.onActionClick(action, args, event);
         },
         href: action.link
       }, action.label);
@@ -182,10 +177,30 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var actions = this.getActions();
-      return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, null, actions.map(function (action, idx) {
+      var firstTwoActions = actions.slice(0, 2);
+      var restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
+      return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, null, firstTwoActions.map(function (action, idx) {
         return _this4.renderButton(action, idx);
+      }), restOfActions && /*#__PURE__*/_react.default.createElement(_OverflowProfileCardButtons.OverflowProfileCardButtons, {
+        actions: restOfActions,
+        onItemClick: function onItemClick(action, args, event) {
+          return _this4.onActionClick(action, args, event);
+        }
       }));
     }
+  }, {
+    key: "onActionClick",
+    value: function onActionClick(action, args, event) {
+      this.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
+        id: action.id || null,
+        duration: this.durationSince(this.timeOpen)
+      });
+
+      if (action.callback && (0, _click.isBasicClick)(event)) {
+        event.preventDefault();
+        action.callback.apply(action, [event].concat((0, _toConsumableArray2.default)(args)));
+      }
+    }
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {

package/dist/cjs/messages.js

@@ -152,6 +152,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',
     description: 'Title for the button on the profile card for a user to give a kudos'
+  },
+  profileCardMoreIconLabel: {
+    id: 'pt.profile-card.more-icon-label',
+    defaultMessage: 'More',
+    description: 'Label for the meatballs icon on the profile card, which when clicked will provide more options'
   }
 });
 var _default = messages;

package/dist/cjs/styled/Card.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpinnerContainer = exports.ProfileImage = exports.LozengeWrapper = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
+exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _constants2 = require("../styled/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -47,19 +47,23 @@ var ActionButtonGroup = _styledComponents.default.div(_templateObject5 || (_temp
 
 exports.ActionButtonGroup = ActionButtonGroup;
 
-var CardContent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
+var OverflowActionButtonsWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), _constants.gridSize);
+
+exports.OverflowActionButtonsWrapper = OverflowActionButtonsWrapper;
+
+var CardContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
 
 exports.CardContent = CardContent;
 
-var DetailsGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
+var DetailsGroup = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
 
 exports.DetailsGroup = DetailsGroup;
 
-var DisabledInfo = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
+var DisabledInfo = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
 
 exports.DisabledInfo = DisabledInfo;
 
-var FullNameLabel = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
+var FullNameLabel = _styledComponents.default.span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
   return props.isDisabledAccount ? _constants2.headerTextColorInactive : _constants2.headerTextColor;
 }, function (props) {
   return getFullNameMargin(props);
@@ -67,25 +71,25 @@ var FullNameLabel = _styledComponents.default.span(_templateObject9 || (_templat
 
 exports.FullNameLabel = FullNameLabel;
 
-var LozengeWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), (0, _constants.gridSize)() * 2);
+var LozengeWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), (0, _constants.gridSize)() * 2);
 
 exports.LozengeWrapper = LozengeWrapper;
-var CustomLozengeContainer = (0, _styledComponents.default)(LozengeWrapper)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var CustomLozengeContainer = (0, _styledComponents.default)(LozengeWrapper)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
 exports.CustomLozengeContainer = CustomLozengeContainer;
 
-var JobTitleLabel = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
+var JobTitleLabel = _styledComponents.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
 
 exports.JobTitleLabel = JobTitleLabel;
 
-var AppTitleLabel = _styledComponents.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
+var AppTitleLabel = _styledComponents.default.span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
 
 exports.AppTitleLabel = AppTitleLabel;
 
-var SpinnerContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), (0, _constants.gridSize)() * 12);
+var SpinnerContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), (0, _constants.gridSize)() * 12);
 
 exports.SpinnerContainer = SpinnerContainer;
 
-var CardContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
+var CardContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
@@ -94,19 +98,19 @@ var CardContainer = _styledComponents.default.div(_templateObject15 || (_templat
     return '';
   }
 
-  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
+  return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
 });
 
 exports.CardContainer = CardContainer;
 
-var DetailsLabel = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
+var DetailsLabel = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
 
 exports.DetailsLabel = DetailsLabel;
 
-var DetailsLabelIcon = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
+var DetailsLabelIcon = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
 
 exports.DetailsLabelIcon = DetailsLabelIcon;
 
-var DetailsLabelText = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
+var DetailsLabelText = _styledComponents.default.span(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
 
 exports.DetailsLabelText = DetailsLabelText;

package/dist/cjs/util/analytics.js

@@ -56,7 +56,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.6.1"
+      packageVersion: "16.7.0"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.6.1"
+	"version": "16.7.0"
 }

package/dist/es2019/components/User/OverflowProfileCardButtons.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/custom-theme-button';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/glyph/more';
+import messages from '../../messages';
+import { OverflowActionButtonsWrapper } from '../../styled/Card';
+export const OverflowProfileCardButtons = props => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+    placement: 'bottom-end',
+    trigger: ({
+      triggerRef,
+      isSelected,
+      testId,
+      ...providedProps
+    }) => /*#__PURE__*/React.createElement(Button, _extends({
+      type: "button"
+    }, providedProps, {
+      ref: triggerRef,
+      iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
+        label: intl.formatMessage(messages.profileCardMoreIconLabel)
+      })
+    }))
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, props.actions.map(action => /*#__PURE__*/React.createElement(DropdownItem, {
+    key: action.id,
+    onClick: (event, ...args) => {
+      props.onItemClick(action, args, event);
+    },
+    href: action.link
+  }, action.label)))));
+};

package/dist/es2019/components/User/ProfileCard.js

@@ -15,6 +15,7 @@ import { ActionButtonGroup, ActionsFlexSpacer, AppTitleLabel, CardContainer, Car
 import { isBasicClick } from '../../util/click';
 import { ErrorMessage } from '../Error';
 import { IconLabel } from '../Icon';
+import { OverflowProfileCardButtons } from './OverflowProfileCardButtons';
 import ReportingLinesDetails from './ReportingLinesDetails';
 export default class Profilecard extends React.PureComponent {
   constructor(props) {
@@ -55,17 +56,7 @@ export default class Profilecard extends React.PureComponent {
       return /*#__PURE__*/React.createElement(Button, {
         appearance: idx === 0 ? 'default' : 'subtle',
         key: action.id || idx,
-        onClick: (event, ...args) => {
-          this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-            id: action.id || null,
-            duration: this.durationSince(this.timeOpen)
-          });
-
-          if (action.callback && isBasicClick(event)) {
-            event.preventDefault();
-            action.callback(event, ...args);
-          }
-        },
+        onClick: (event, ...args) => this.onActionClick(action, args, event),
         href: action.link
       }, action.label);
     });
@@ -114,7 +105,24 @@ export default class Profilecard extends React.PureComponent {
     }
 
     const actions = this.getActions();
-    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map((action, idx) => this.renderButton(action, idx)));
+    const firstTwoActions = actions.slice(0, 2);
+    const restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
+    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map((action, idx) => this.renderButton(action, idx)), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+      actions: restOfActions,
+      onItemClick: (action, args, event) => this.onActionClick(action, args, event)
+    }));
+  }
+
+  onActionClick(action, args, event) {
+    this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+      id: action.id || null,
+      duration: this.durationSince(this.timeOpen)
+    });
+
+    if (action.callback && isBasicClick(event)) {
+      event.preventDefault();
+      action.callback(event, ...args);
+    }
   }
 
   renderCardDetailsDefault() {

package/dist/es2019/messages.js

@@ -144,6 +144,11 @@ const messages = defineMessages({
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',
     description: 'Title for the button on the profile card for a user to give a kudos'
+  },
+  profileCardMoreIconLabel: {
+    id: 'pt.profile-card.more-icon-label',
+    defaultMessage: 'More',
+    description: 'Label for the meatballs icon on the profile card, which when clicked will provide more options'
   }
 });
 export default messages;

package/dist/es2019/styled/Card.js

@@ -33,6 +33,12 @@ export const ActionButtonGroup = styled.div`
     }
   }
 `;
+export const OverflowActionButtonsWrapper = styled.div`
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  margin-left: ${gridSize}px;
+`;
 export const CardContent = styled.div`
   display: flex;
   flex-direction: column;

package/dist/es2019/util/analytics.js

@@ -35,7 +35,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "16.6.1",
+    packageVersion: "16.7.0",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.6.1"
+	"version": "16.7.0"
 }

package/dist/esm/components/User/OverflowProfileCardButtons.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef", "isSelected", "testId"];
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/custom-theme-button';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/glyph/more';
+import messages from '../../messages';
+import { OverflowActionButtonsWrapper } from '../../styled/Card';
+export var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+    placement: 'bottom-end',
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+          isSelected = _ref.isSelected,
+          testId = _ref.testId,
+          providedProps = _objectWithoutProperties(_ref, _excluded);
+
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
+          label: intl.formatMessage(messages.profileCardMoreIconLabel)
+        })
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, props.actions.map(function (action) {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: action.id,
+      onClick: function onClick(event) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        props.onItemClick(action, args, event);
+      },
+      href: action.link
+    }, action.label);
+  }))));
+};

package/dist/esm/components/User/ProfileCard.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -28,6 +29,7 @@ import { ActionButtonGroup, ActionsFlexSpacer, AppTitleLabel, CardContainer, Car
 import { isBasicClick } from '../../util/click';
 import { ErrorMessage } from '../Error';
 import { IconLabel } from '../Icon';
+import { OverflowProfileCardButtons } from './OverflowProfileCardButtons';
 import ReportingLinesDetails from './ReportingLinesDetails';
 
 var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
@@ -80,20 +82,11 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         appearance: idx === 0 ? 'default' : 'subtle',
         key: action.id || idx,
         onClick: function onClick(event) {
-          _this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-            id: action.id || null,
-            duration: _this.durationSince(_this.timeOpen)
-          });
-
-          if (action.callback && isBasicClick(event)) {
-            event.preventDefault();
-
-            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-              args[_key - 1] = arguments[_key];
-            }
-
-            action.callback.apply(action, [event].concat(args));
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
           }
+
+          return _this.onActionClick(action, args, event);
         },
         href: action.link
       }, action.label);
@@ -157,10 +150,30 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var actions = this.getActions();
-      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map(function (action, idx) {
+      var firstTwoActions = actions.slice(0, 2);
+      var restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
+      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map(function (action, idx) {
         return _this4.renderButton(action, idx);
+      }), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+        actions: restOfActions,
+        onItemClick: function onItemClick(action, args, event) {
+          return _this4.onActionClick(action, args, event);
+        }
       }));
     }
+  }, {
+    key: "onActionClick",
+    value: function onActionClick(action, args, event) {
+      this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+        id: action.id || null,
+        duration: this.durationSince(this.timeOpen)
+      });
+
+      if (action.callback && isBasicClick(event)) {
+        event.preventDefault();
+        action.callback.apply(action, [event].concat(_toConsumableArray(args)));
+      }
+    }
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {

package/dist/esm/messages.js

@@ -144,6 +144,11 @@ var messages = defineMessages({
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',
     description: 'Title for the button on the profile card for a user to give a kudos'
+  },
+  profileCardMoreIconLabel: {
+    id: 'pt.profile-card.more-icon-label',
+    defaultMessage: 'More',
+    description: 'Label for the meatballs icon on the profile card, which when clicked will provide more options'
   }
 });
 export default messages;

package/dist/esm/styled/Card.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
@@ -15,20 +15,21 @@ export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _tag
 export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
 export var ActionButtonGroup = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * gridSize(), gridSize);
-export var CardContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
-export var DetailsGroup = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
-export var DisabledInfo = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);
-export var FullNameLabel = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
+export var OverflowActionButtonsWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), gridSize);
+export var CardContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
+export var DetailsGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
+export var DisabledInfo = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);
+export var FullNameLabel = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
   return props.isDisabledAccount ? headerTextColorInactive : headerTextColor;
 }, function (props) {
   return getFullNameMargin(props);
 }, 24 / 18);
-export var LozengeWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), gridSize() * 2);
-export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), gridSize() * 1.5, gridSize() / 2, gridSize() / 2);
-export var JobTitleLabel = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), headerTextColor, gridSize() * 1.5, 24 / 14);
-export var AppTitleLabel = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), appLabelBgColor, appLabelTextColor, borderRadius(), gridSize() * 1.5, 24 / 14);
-export var SpinnerContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), gridSize() * 12);
-export var CardContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
+export var LozengeWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), gridSize() * 2);
+export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), gridSize() * 1.5, gridSize() / 2, gridSize() / 2);
+export var JobTitleLabel = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), headerTextColor, gridSize() * 1.5, 24 / 14);
+export var AppTitleLabel = styled.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), appLabelBgColor, appLabelTextColor, borderRadius(), gridSize() * 1.5, 24 / 14);
+export var SpinnerContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), gridSize() * 12);
+export var CardContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
   return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
@@ -37,8 +38,8 @@ export var CardContainer = styled.div(_templateObject15 || (_templateObject15 =
     return '';
   }
 
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
 });
-export var DetailsLabel = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
-export var DetailsLabelIcon = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);
-export var DetailsLabelText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);
+export var DetailsLabel = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
+export var DetailsLabelIcon = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);
+export var DetailsLabelText = styled.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);

package/dist/esm/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.6.1"
+      packageVersion: "16.7.0"
     }, attributes), {}, {
       firedAt: getPageTime()
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.6.1"
+	"version": "16.7.0"
 }

package/dist/types/components/User/OverflowProfileCardButtons.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProfileCardAction } from '../../types';
+declare type OverflowButtonsProps = {
+    actions: ProfileCardAction[];
+    onItemClick: (action: ProfileCardAction, args: any, event: React.MouseEvent | React.KeyboardEvent) => void;
+};
+export declare const OverflowProfileCardButtons: (props: OverflowButtonsProps) => JSX.Element;
+export {};

package/dist/types/components/User/ProfileCard.d.ts

@@ -15,6 +15,7 @@ export default class Profilecard extends React.PureComponent<ProfilecardProps> {
     getActions(): ProfileCardAction[];
     renderButton: (action: ProfileCardAction, idx: number) => ReactElement;
     renderActionsButtons(): JSX.Element | null;
+    private onActionClick;
     renderCardDetailsDefault(): JSX.Element;
     renderCardDetailsForDisabledAccount(): JSX.Element;
     getDisabledAccountName(): string | JSX.Element | null | undefined;

package/dist/types/messages.d.ts

@@ -144,5 +144,10 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    profileCardMoreIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/types/styled/Card.d.ts

@@ -8,6 +8,7 @@ export declare const CardWrapper: import("styled-components").StyledComponentCla
 export declare const ProfileImage: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const ActionsFlexSpacer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const ActionButtonGroup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const OverflowActionButtonsWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const CardContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const DetailsGroup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const DisabledInfo: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "16.6.1",
+  "version": "16.7.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,6 +42,7 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/avatar-group": "^9.0.0",
     "@atlaskit/button": "^16.3.0",
+    "@atlaskit/dropdown-menu": "^11.2.0",
     "@atlaskit/give-kudos": "^0.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.0.0",