@atlaskit/profilecard 16.12.1 → 17.1.0

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

@@ -7,13 +7,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OverflowProfileCardButtons = void 0;
+exports.OverflowProfileCardButtons = exports.ACTION_OVERFLOW_THRESHOLD = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -27,21 +29,53 @@ var _messages = _interopRequireDefault(require("../../messages"));
 
 var _Card = require("../../styled/Card");
 
+var _analytics = require("../../util/analytics");
+
 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 ACTION_OVERFLOW_THRESHOLD = 2;
+exports.ACTION_OVERFLOW_THRESHOLD = ACTION_OVERFLOW_THRESHOLD;
+
 var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
   var intl = (0, _reactIntlNext.useIntl)();
-  return /*#__PURE__*/_react.default.createElement(_Card.OverflowActionButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      setOpen = _useState2[1];
+
+  var actions = props.actions,
+      onItemClick = props.onItemClick,
+      fireAnalyticsWithDuration = props.fireAnalyticsWithDuration;
+  var numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
+  var onOpenChange = (0, _react.useCallback)(function (_ref) {
+    var nextOpen = _ref.isOpen;
+    setOpen(function (prevOpen) {
+      if (nextOpen && !prevOpen) {
+        fireAnalyticsWithDuration(function (duration) {
+          return (0, _analytics.moreActionsClicked)('user', {
+            duration: duration,
+            numActions: numActions
+          });
+        });
+      }
+
+      return nextOpen;
+    });
+  }, [numActions, fireAnalyticsWithDuration]);
+  return /*#__PURE__*/_react.default.createElement(_Card.OverflowActionButtonsWrapper, {
+    "data-testid": "profilecard-actions-overflow"
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    onOpenChange: onOpenChange,
     placement: 'bottom-end',
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-          isSelected = _ref.isSelected,
-          testId = _ref.testId,
-          providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          isSelected = _ref2.isSelected,
+          testId = _ref2.testId,
+          providedProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
       return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
         type: "button"
       }, providedProps, {
@@ -51,7 +85,7 @@ var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
         })
       }));
     }
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, props.actions.map(function (action) {
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, actions.map(function (action, index) {
     return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
       key: action.id,
       onClick: function onClick(event) {
@@ -59,7 +93,7 @@ var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
           args[_key - 1] = arguments[_key];
         }
 
-        props.onItemClick(action, args, event);
+        onItemClick(action, args, event, index);
       },
       href: action.link
     }, action.label);