@atlaskit/mention 24.0.3 → 24.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/mention
 
+## 24.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.1.0
+
+### Minor Changes
+
+- [#121564](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121564)
+  [`3de01b4441aaf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3de01b4441aaf) -
+  Team refreshed avatar support
+
 ## 24.0.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -44,6 +44,9 @@
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../people-and-teams/teams-avatar/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../people-and-teams/teams-avatar/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -44,6 +44,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../people-and-teams/teams-avatar/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/components/MentionAvatar/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionAvatar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
+var _types = require("../../types");
+var MentionAvatar = exports.MentionAvatar = function MentionAvatar(_ref) {
+  var mention = _ref.mention,
+    selected = _ref.selected;
+  var avatarUrl = mention.avatarUrl,
+    presence = mention.presence;
+  var borderColor = selected ? "var(--ds-border, #091E4224)" : undefined;
+  var _ref2 = presence || {},
+    status = _ref2.status;
+  if ((0, _types.isTeamMention)(mention)) {
+    return /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+      src: avatarUrl,
+      size: "medium",
+      borderColor: borderColor
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    src: avatarUrl,
+    size: "medium",
+    presence: status,
+    borderColor: borderColor
+  });
+};

package/dist/cjs/components/MentionDescriptionByline/styles.js

@@ -12,7 +12,7 @@ var _colors = require("@atlaskit/theme/colors");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var DescriptionBylineStyle = exports.DescriptionBylineStyle = _styled.default.span({
   color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: "var(--ds-space-025, 2px)",
   display: 'block',
   overflow: 'hidden',

package/dist/cjs/components/MentionItem/index.js

@@ -20,6 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _react = _interopRequireDefault(require("react"));
 var _informationEditorPanel = _interopRequireDefault(require("@atlaskit/icon/core/migration/information--editor-panel"));
@@ -32,6 +33,7 @@ var _styles = require("./styles");
 var _MentionHighlightHelpers = require("./MentionHighlightHelpers");
 var _MentionDescriptionByline = _interopRequireDefault(require("../MentionDescriptionByline"));
 var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
+var _MentionAvatar = require("../MentionAvatar");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function renderLozenge(lozenge) {
@@ -115,7 +117,10 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
         "data-selected": selected
       }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, {
         restricted: restricted
-      }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      }, (0, _platformFeatureFlags.fg)('team-avatar-in-mention-picker') ? /*#__PURE__*/_react.default.createElement(_MentionAvatar.MentionAvatar, {
+        selected: selected,
+        mention: mention
+      }) : /*#__PURE__*/_react.default.createElement(_avatar.default, {
         src: avatarUrl,
         size: "medium",
         presence: status,

package/dist/cjs/components/MentionItem/styles.js

@@ -75,7 +75,7 @@ var TimeStyle = exports.TimeStyle = _styled.default.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 var MENTION_ITEM_HEIGHT = exports.MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/cjs/util/analytics.js

@@ -12,7 +12,7 @@ var _types = require("../types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/mention";
-var packageVersion = "24.0.3";
+var packageVersion = "24.1.1";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/es2019/components/MentionAvatar/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import TeamAvatar from '@atlaskit/teams-avatar';
+import { isTeamMention } from '../../types';
+export const MentionAvatar = ({
+  mention,
+  selected
+}) => {
+  const {
+    avatarUrl,
+    presence
+  } = mention;
+  const borderColor = selected ? "var(--ds-border, #091E4224)" : undefined;
+  const {
+    status
+  } = presence || {};
+  if (isTeamMention(mention)) {
+    return /*#__PURE__*/React.createElement(TeamAvatar, {
+      src: avatarUrl,
+      size: "medium",
+      borderColor: borderColor
+    });
+  }
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: avatarUrl,
+    size: "medium",
+    presence: status,
+    borderColor: borderColor
+  });
+};

package/dist/es2019/components/MentionDescriptionByline/styles.js

@@ -4,7 +4,7 @@ import { N100 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const DescriptionBylineStyle = styled.span({
   color: `var(--ds-text-subtlest, ${N100})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: "var(--ds-space-025, 2px)",
   display: 'block',
   overflow: 'hidden',

package/dist/es2019/components/MentionItem/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Avatar from '@atlaskit/avatar';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N30 } from '@atlaskit/theme/colors';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/migration/information--editor-panel';
@@ -13,6 +14,7 @@ import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, Menti
 import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
+import { MentionAvatar } from '../MentionAvatar';
 export { MENTION_ITEM_HEIGHT } from './styles';
 function renderLozenge(lozenge) {
   if (typeof lozenge === 'string') {
@@ -92,7 +94,10 @@ export default class MentionItem extends React.PureComponent {
       "data-selected": selected
     }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
       restricted: restricted
-    }, /*#__PURE__*/React.createElement(Avatar, {
+    }, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
+      selected: selected,
+      mention: mention
+    }) : /*#__PURE__*/React.createElement(Avatar, {
       src: avatarUrl,
       size: "medium",
       presence: status,

package/dist/es2019/components/MentionItem/styles.js

@@ -61,7 +61,7 @@ export const TimeStyle = styled.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: `var(--ds-text-subtlest, ${N100})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export const MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "24.0.3";
+const packageVersion = "24.1.1";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

package/dist/esm/components/MentionAvatar/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import TeamAvatar from '@atlaskit/teams-avatar';
+import { isTeamMention } from '../../types';
+export var MentionAvatar = function MentionAvatar(_ref) {
+  var mention = _ref.mention,
+    selected = _ref.selected;
+  var avatarUrl = mention.avatarUrl,
+    presence = mention.presence;
+  var borderColor = selected ? "var(--ds-border, #091E4224)" : undefined;
+  var _ref2 = presence || {},
+    status = _ref2.status;
+  if (isTeamMention(mention)) {
+    return /*#__PURE__*/React.createElement(TeamAvatar, {
+      src: avatarUrl,
+      size: "medium",
+      borderColor: borderColor
+    });
+  }
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: avatarUrl,
+    size: "medium",
+    presence: status,
+    borderColor: borderColor
+  });
+};

package/dist/esm/components/MentionDescriptionByline/styles.js

@@ -4,7 +4,7 @@ import { N100 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var DescriptionBylineStyle = styled.span({
   color: "var(--ds-text-subtlest, ".concat(N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: "var(--ds-space-025, 2px)",
   display: 'block',
   overflow: 'hidden',

package/dist/esm/components/MentionItem/index.js

@@ -9,6 +9,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import Avatar from '@atlaskit/avatar';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N30 } from '@atlaskit/theme/colors';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/migration/information--editor-panel';
@@ -21,6 +22,7 @@ import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, Menti
 import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
+import { MentionAvatar } from '../MentionAvatar';
 export { MENTION_ITEM_HEIGHT } from './styles';
 function renderLozenge(lozenge) {
   if (typeof lozenge === 'string') {
@@ -103,7 +105,10 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
         "data-selected": selected
       }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
         restricted: restricted
-      }, /*#__PURE__*/React.createElement(Avatar, {
+      }, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
+        selected: selected,
+        mention: mention
+      }) : /*#__PURE__*/React.createElement(Avatar, {
         src: avatarUrl,
         size: "medium",
         presence: status,

package/dist/esm/components/MentionItem/styles.js

@@ -67,7 +67,7 @@ export var TimeStyle = styled.div({
   marginLeft: "var(--ds-space-250, 20px)",
   flex: 'none',
   color: "var(--ds-text-subtlest, ".concat(N100, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 export var MENTION_ITEM_HEIGHT = 48;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766

package/dist/esm/util/analytics.js

@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "24.0.3";
+var packageVersion = "24.1.1";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/components/MentionAvatar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type MentionDescription } from '../../types';
+type MentionAvatarProps = {
+    selected?: boolean;
+    mention: MentionDescription;
+};
+export declare const MentionAvatar: ({ mention, selected }: MentionAvatarProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/components/MentionAvatar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type MentionDescription } from '../../types';
+type MentionAvatarProps = {
+    selected?: boolean;
+    mention: MentionDescription;
+};
+export declare const MentionAvatar: ({ mention, selected }: MentionAvatarProps) => React.JSX.Element;
+export {};

package/package.json

@@ -37,11 +37,12 @@
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^24.1.0",
-		"@atlaskit/lozenge": "^12.0.0",
+		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/teams-avatar": "^2.1.0",
+		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.2.0",
@@ -91,6 +92,9 @@
 	"platform-feature-flags": {
 		"platform_editor_ai_remove_mentions_record": {
 			"type": "boolean"
+		},
+		"team-avatar-in-mention-picker": {
+			"type": "boolean"
 		}
 	},
 	"publishConfig": {
@@ -118,5 +122,5 @@
 			]
 		}
 	},
-	"version": "24.0.3"
+	"version": "24.1.1"
 }