@atlaskit/profilecard 23.9.0 → 23.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/profilecard
 
+## 23.10.0
+
+### Minor Changes
+
+- [#147535](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147535)
+  [`cb92395c4a53d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb92395c4a53d) -
+  [ux] implement the function of "give kudos" in the TeamProfileCardWithContainer
+
+## 23.9.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.9.0
 
 ### Minor Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/team-profile-card/main.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.TeamProfileCard = void 0;
 require("./main.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -22,6 +24,7 @@ var _analytics = require("../../util/analytics");
 var _teamActions = require("./team-actions");
 var _main = require("./team-connections/main");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
+var _excluded = ["containerId", "teamId", "displayName", "description", "avatarImageUrl", "headerImageUrl", "memberAvatars", "memberCount", "cloudId", "userId", "isVerified", "teamProfileUrl"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var noop = function noop() {};
@@ -68,8 +71,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     userId = _ref3.userId,
     isVerified = _ref3.isVerified,
     teamProfileUrl = _ref3.teamProfileUrl,
-    isKudosEnabled = _ref3.isKudosEnabled,
-    otherActions = _ref3.otherActions;
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var _useTeamContainers = (0, _teamsPublic.useTeamContainers)(teamId),
     teamContainers = _useTeamContainers.teamContainers,
     loading = _useTeamContainers.loading;
@@ -150,11 +152,11 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), isKudosEnabled || otherActions ? /*#__PURE__*/_react.default.createElement(_teamActions.ButtonSection, {
+  })), props.isKudosEnabled || props.otherActions ? /*#__PURE__*/_react.default.createElement(_teamActions.ButtonSection, (0, _extends2.default)({
     teamProfileUrl: teamProfileUrl,
-    isKudosEnabled: isKudosEnabled,
-    otherActions: otherActions
-  }) : teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    cloudId: cloudId,
+    teamId: teamId
+  }, props)) : teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,

package/dist/cjs/components/team-profile-card/mocks.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.mockTeamContainersQueries = exports.mockProfileData = void 0;
 var _client = _interopRequireDefault(require("fetch-mock/cjs/client"));
 var mockProfileData = exports.mockProfileData = {
-  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  teamId: 'ari:cloud:identity::team/8ee37950-7de7-41ec-aee2-2c02c95949f4',
   displayName: 'THE SUPER TEAM',
   description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
   avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',

package/dist/cjs/components/team-profile-card/team-actions/index.js

@@ -10,15 +10,20 @@ exports.ButtonSection = void 0;
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _new = require("@atlaskit/button/new");
+var _giveKudos = require("@atlaskit/give-kudos");
 var _menu = require("@atlaskit/menu");
 var _primitives = require("@atlaskit/primitives");
+var _getTeamFromAGG = require("../../../client/getTeamFromAGG");
 var _analytics = require("../../../util/analytics");
 var _messages = require("./messages");
 var _moreActions = require("./more-actions");
+var _excluded = ["teamProfileUrl", "isKudosEnabled", "otherActions"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
@@ -29,11 +34,16 @@ var styles = {
 var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
   var teamProfileUrl = _ref.teamProfileUrl,
     isKudosEnabled = _ref.isKudosEnabled,
-    otherActions = _ref.otherActions;
+    otherActions = _ref.otherActions,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isKudosOpen = _useState2[0],
+    setIsKudosOpen = _useState2[1];
   var onTeamProfileClick = (0, _react.useCallback)(function () {
     if (createAnalyticsEvent) {
       (0, _analytics.fireEvent)(createAnalyticsEvent, {
@@ -44,17 +54,24 @@ var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
       });
     }
   }, [createAnalyticsEvent]);
+  var onKudosClick = (0, _react.useCallback)(function () {
+    setIsKudosOpen(true);
+  }, []);
   var extraActions = [];
+  var kudosProps = null;
   if (isKudosEnabled) {
     extraActions.push({
       id: GIVE_KUDOS_ACTION_ID,
-      item: /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, null, formatMessage(_messages.messages.giveKudos))
+      item: /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
+        onClick: onKudosClick
+      }, formatMessage(_messages.messages.giveKudos))
     });
+    kudosProps = props;
   }
   if (otherActions) {
     extraActions.push.apply(extraActions, (0, _toConsumableArray2.default)(otherActions));
   }
-  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     xcss: styles.containerStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050"
@@ -67,5 +84,19 @@ var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
     shouldFitContainer: true
   }, formatMessage(_messages.messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
     actions: extraActions
+  }))), isKudosEnabled && kudosProps && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
+    isOpen: isKudosOpen,
+    onClose: function onClose() {
+      return setIsKudosOpen(false);
+    },
+    recipient: {
+      type: _giveKudos.KudosType.TEAM,
+      recipientId: (0, _getTeamFromAGG.extractIdFromAri)(kudosProps.teamId)
+    },
+    analyticsSource: kudosProps.analyticsSource,
+    teamCentralBaseUrl: kudosProps.teamCentralBaseUrl,
+    cloudId: kudosProps.cloudId
   })));
 };

package/dist/cjs/util/analytics.js

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

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/team-profile-card/main.js

@@ -1,4 +1,5 @@
 /* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
@@ -56,8 +57,7 @@ export const TeamProfileCard = ({
   userId,
   isVerified,
   teamProfileUrl,
-  isKudosEnabled,
-  otherActions
+  ...props
 }) => {
   const {
     teamContainers,
@@ -137,11 +137,11 @@ export const TeamProfileCard = ({
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), isKudosEnabled || otherActions ? /*#__PURE__*/React.createElement(ButtonSection, {
+  })), props.isKudosEnabled || props.otherActions ? /*#__PURE__*/React.createElement(ButtonSection, _extends({
     teamProfileUrl: teamProfileUrl,
-    isKudosEnabled: isKudosEnabled,
-    otherActions: otherActions
-  }) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+    cloudId: cloudId,
+    teamId: teamId
+  }, props)) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,

package/dist/es2019/components/team-profile-card/mocks.js

@@ -1,6 +1,6 @@
 import fetchMock from 'fetch-mock/cjs/client';
 export const mockProfileData = {
-  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  teamId: 'ari:cloud:identity::team/8ee37950-7de7-41ec-aee2-2c02c95949f4',
   displayName: 'THE SUPER TEAM',
   description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
   avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',

package/dist/es2019/components/team-profile-card/team-actions/index.js

@@ -1,12 +1,14 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback } from 'react';
+import React, { Suspense, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { LinkButton } from '@atlaskit/button/new';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { ButtonItem } from '@atlaskit/menu';
 import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { extractIdFromAri } from '../../../client/getTeamFromAGG';
 import { fireEvent } from '../../../util/analytics';
 import { messages } from './messages';
 import { MoreActions } from './more-actions';
@@ -18,7 +20,8 @@ const styles = {
 export const ButtonSection = ({
   teamProfileUrl,
   isKudosEnabled,
-  otherActions
+  otherActions,
+  ...props
 }) => {
   const {
     createAnalyticsEvent
@@ -26,6 +29,7 @@ export const ButtonSection = ({
   const {
     formatMessage
   } = useIntl();
+  const [isKudosOpen, setIsKudosOpen] = useState(false);
   const onTeamProfileClick = useCallback(() => {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, {
@@ -36,17 +40,24 @@ export const ButtonSection = ({
       });
     }
   }, [createAnalyticsEvent]);
+  const onKudosClick = useCallback(() => {
+    setIsKudosOpen(true);
+  }, []);
   const extraActions = [];
+  let kudosProps = null;
   if (isKudosEnabled) {
     extraActions.push({
       id: GIVE_KUDOS_ACTION_ID,
-      item: /*#__PURE__*/React.createElement(ButtonItem, null, formatMessage(messages.giveKudos))
+      item: /*#__PURE__*/React.createElement(ButtonItem, {
+        onClick: onKudosClick
+      }, formatMessage(messages.giveKudos))
     });
+    kudosProps = props;
   }
   if (otherActions) {
     extraActions.push(...otherActions);
   }
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.containerStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050"
@@ -59,5 +70,17 @@ export const ButtonSection = ({
     shouldFitContainer: true
   }, formatMessage(messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/React.createElement(MoreActions, {
     actions: extraActions
+  }))), isKudosEnabled && kudosProps && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+    isOpen: isKudosOpen,
+    onClose: () => setIsKudosOpen(false),
+    recipient: {
+      type: KudosType.TEAM,
+      recipientId: extractIdFromAri(kudosProps.teamId)
+    },
+    analyticsSource: kudosProps.analyticsSource,
+    teamCentralBaseUrl: kudosProps.teamCentralBaseUrl,
+    cloudId: kudosProps.cloudId
   })));
 };

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.9.0",
+    packageVersion: "23.10.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.9.0");
+  headers.append('atl-client-version', "23.10.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/team-profile-card/main.js

@@ -1,4 +1,7 @@
 /* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["containerId", "teamId", "displayName", "description", "avatarImageUrl", "headerImageUrl", "memberAvatars", "memberCount", "cloudId", "userId", "isVerified", "teamProfileUrl"];
 import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
@@ -58,8 +61,7 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     userId = _ref3.userId,
     isVerified = _ref3.isVerified,
     teamProfileUrl = _ref3.teamProfileUrl,
-    isKudosEnabled = _ref3.isKudosEnabled,
-    otherActions = _ref3.otherActions;
+    props = _objectWithoutProperties(_ref3, _excluded);
   var _useTeamContainers = useTeamContainers(teamId),
     teamContainers = _useTeamContainers.teamContainers,
     loading = _useTeamContainers.loading;
@@ -140,11 +142,11 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), isKudosEnabled || otherActions ? /*#__PURE__*/React.createElement(ButtonSection, {
+  })), props.isKudosEnabled || props.otherActions ? /*#__PURE__*/React.createElement(ButtonSection, _extends({
     teamProfileUrl: teamProfileUrl,
-    isKudosEnabled: isKudosEnabled,
-    otherActions: otherActions
-  }) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+    cloudId: cloudId,
+    teamId: teamId
+  }, props)) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,

package/dist/esm/components/team-profile-card/mocks.js

@@ -1,6 +1,6 @@
 import fetchMock from 'fetch-mock/cjs/client';
 export var mockProfileData = {
-  teamId: '8ee37950-7de7-41ec-aee2-2c02c95949f4',
+  teamId: 'ari:cloud:identity::team/8ee37950-7de7-41ec-aee2-2c02c95949f4',
   displayName: 'THE SUPER TEAM',
   description: "Super team's super description - This is a very long line, adding more lines here to test the line limit of 3 that we enforce on the description of the team. In case the description very long, it should display an elipses at the end and hide that content that is overflowing",
   avatarImageUrl: 'https://test-prod-issue-create.atlassian.net/wiki/download/attachments/35061761/SUP-default?version=1&modificationDate=1739217199215&cacheVersion=1&api=v2',

package/dist/esm/components/team-profile-card/team-actions/index.js

@@ -1,13 +1,18 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["teamProfileUrl", "isKudosEnabled", "otherActions"];
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback } from 'react';
+import React, { Suspense, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { LinkButton } from '@atlaskit/button/new';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { ButtonItem } from '@atlaskit/menu';
 import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { extractIdFromAri } from '../../../client/getTeamFromAGG';
 import { fireEvent } from '../../../util/analytics';
 import { messages } from './messages';
 import { MoreActions } from './more-actions';
@@ -19,11 +24,16 @@ var styles = {
 export var ButtonSection = function ButtonSection(_ref) {
   var teamProfileUrl = _ref.teamProfileUrl,
     isKudosEnabled = _ref.isKudosEnabled,
-    otherActions = _ref.otherActions;
+    otherActions = _ref.otherActions,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isKudosOpen = _useState2[0],
+    setIsKudosOpen = _useState2[1];
   var onTeamProfileClick = useCallback(function () {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, {
@@ -34,17 +44,24 @@ export var ButtonSection = function ButtonSection(_ref) {
       });
     }
   }, [createAnalyticsEvent]);
+  var onKudosClick = useCallback(function () {
+    setIsKudosOpen(true);
+  }, []);
   var extraActions = [];
+  var kudosProps = null;
   if (isKudosEnabled) {
     extraActions.push({
       id: GIVE_KUDOS_ACTION_ID,
-      item: /*#__PURE__*/React.createElement(ButtonItem, null, formatMessage(messages.giveKudos))
+      item: /*#__PURE__*/React.createElement(ButtonItem, {
+        onClick: onKudosClick
+      }, formatMessage(messages.giveKudos))
     });
+    kudosProps = props;
   }
   if (otherActions) {
     extraActions.push.apply(extraActions, _toConsumableArray(otherActions));
   }
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.containerStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050"
@@ -57,5 +74,19 @@ export var ButtonSection = function ButtonSection(_ref) {
     shouldFitContainer: true
   }, formatMessage(messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/React.createElement(MoreActions, {
     actions: extraActions
+  }))), isKudosEnabled && kudosProps && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+    isOpen: isKudosOpen,
+    onClose: function onClose() {
+      return setIsKudosOpen(false);
+    },
+    recipient: {
+      type: KudosType.TEAM,
+      recipientId: extractIdFromAri(kudosProps.teamId)
+    },
+    analyticsSource: kudosProps.analyticsSource,
+    teamCentralBaseUrl: kudosProps.teamCentralBaseUrl,
+    cloudId: kudosProps.cloudId
   })));
 };

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.9.0"
+      packageVersion: "23.10.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/team-profile-card/main.d.ts

@@ -1,10 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
+/// <reference types="react" />
 import { type AvatarProps } from '@atlaskit/avatar-group';
-interface TeamProfileCardProps {
+import { ButtonSectionProps } from './team-actions';
+type TeamProfileCardProps = {
     containerId: string;
     teamId: string;
     displayName: string;
@@ -17,11 +14,6 @@ interface TeamProfileCardProps {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
-    isKudosEnabled?: boolean;
-    otherActions?: {
-        id: string;
-        item: React.ReactNode;
-    }[];
-}
-export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, isKudosEnabled, otherActions, }: TeamProfileCardProps) => JSX.Element;
+} & ButtonSectionProps;
+export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, ...props }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types/components/team-profile-card/team-actions/index.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
 import { ActionItem } from './more-actions';
-type ButtonSectionProps = {
+type BaseButtonSectionProps = {
     teamProfileUrl?: string;
-    isKudosEnabled?: boolean;
     otherActions?: ActionItem[];
+    cloudId: string;
+    teamId: string;
 };
-export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, }: ButtonSectionProps) => React.JSX.Element;
+type KudosEnabledProps = BaseButtonSectionProps & {
+    isKudosEnabled: true;
+    teamCentralBaseUrl: string;
+    analyticsSource: string;
+};
+type KudosDisabledProps = BaseButtonSectionProps & {
+    isKudosEnabled?: false;
+};
+export type ButtonSectionProps = KudosEnabledProps | KudosDisabledProps;
+export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, ...props }: ButtonSectionProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/components/team-profile-card/main.d.ts

@@ -1,10 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
+/// <reference types="react" />
 import { type AvatarProps } from '@atlaskit/avatar-group';
-interface TeamProfileCardProps {
+import { ButtonSectionProps } from './team-actions';
+type TeamProfileCardProps = {
     containerId: string;
     teamId: string;
     displayName: string;
@@ -17,11 +14,6 @@ interface TeamProfileCardProps {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
-    isKudosEnabled?: boolean;
-    otherActions?: {
-        id: string;
-        item: React.ReactNode;
-    }[];
-}
-export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, isKudosEnabled, otherActions, }: TeamProfileCardProps) => JSX.Element;
+} & ButtonSectionProps;
+export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, ...props }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/index.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
 import { ActionItem } from './more-actions';
-type ButtonSectionProps = {
+type BaseButtonSectionProps = {
     teamProfileUrl?: string;
-    isKudosEnabled?: boolean;
     otherActions?: ActionItem[];
+    cloudId: string;
+    teamId: string;
 };
-export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, }: ButtonSectionProps) => React.JSX.Element;
+type KudosEnabledProps = BaseButtonSectionProps & {
+    isKudosEnabled: true;
+    teamCentralBaseUrl: string;
+    analyticsSource: string;
+};
+type KudosDisabledProps = BaseButtonSectionProps & {
+    isKudosEnabled?: false;
+};
+export type ButtonSectionProps = KudosEnabledProps | KudosDisabledProps;
+export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, ...props }: ButtonSectionProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.9.0",
+	"version": "23.10.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,14 +64,14 @@
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
-		"@atlaskit/menu": "^3.2.0",
+		"@atlaskit/menu": "^4.0.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/people-teams-ui-public": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/rovo-agent-components": "^2.7.0",
-		"@atlaskit/rovo-triggers": "^2.10.0",
+		"@atlaskit/rovo-triggers": "^2.11.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/teams-public": "^0.24.0",