@atlaskit/mention 21.0.0 → 21.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/mention
 
+## 21.0.1
+
+### Patch Changes
+
+- [`9120f857a67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9120f857a67) - Remove react-intl v2 from dev dependencies
+- [`6ee0b5cac9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ee0b5cac9a) - Mention lozenge component rendering performance/reliability is now tracked
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 21.0.0
 
 ### Major Changes

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

@@ -37,8 +37,12 @@ var _analytics = require("../../util/analytics");
 
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 
+var _ufo = require("@atlaskit/ufo");
+
 var _i18n = require("../../util/i18n");
 
+var _ufoExperiences = require("./ufoExperiences");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -53,16 +57,11 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(MentionInternal);
 
-  function MentionInternal() {
+  function MentionInternal(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, MentionInternal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnClick", function (e) {
       var _this$props = _this.props,
           id = _this$props.id,
@@ -121,15 +120,29 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
 
       return _types.MentionType.DEFAULT;
     });
+
+    _ufoExperiences.mentionRenderedUfoExperience.getInstance(props.id).start();
+
     return _this;
   }
 
   (0, _createClass2.default)(MentionInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id).success();
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this.hoverTimeout) {
         clearTimeout(this.hoverTimeout);
       }
+
+      var ufoInstance = _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id);
+
+      if ([_ufo.UFOExperienceState['STARTED'], _ufo.UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
+        ufoInstance.abort();
+      }
     }
   }, {
     key: "renderUnknownUserError",
@@ -163,7 +176,9 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         spellCheck: false
       }, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
+        id: id
+      }, /*#__PURE__*/_react.default.createElement("span", {
         "data-mention-id": id,
         "data-access-level": accessLevel,
         spellCheck: false
@@ -171,7 +186,7 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         fallback: mentionComponent
       }, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
         name: text
-      }, mentionComponent)) : mentionComponent));
+      }, mentionComponent)) : mentionComponent)));
     }
   }]);
   return MentionInternal;

package/dist/cjs/components/Mention/ufoExperiences.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mentionRenderedUfoExperience = exports.UfoErrorBoundary = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ufo = require("@atlaskit/ufo");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var mentionRenderedUfoExperience = new _ufo.ConcurrentExperience('mention-rendered', {
+  platform: {
+    component: 'mention'
+  },
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+});
+exports.mentionRenderedUfoExperience = mentionRenderedUfoExperience;
+
+var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(UfoErrorBoundary, _React$Component);
+
+  var _super = _createSuper(UfoErrorBoundary);
+
+  function UfoErrorBoundary() {
+    (0, _classCallCheck2.default)(this, UfoErrorBoundary);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(UfoErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch() {
+      mentionRenderedUfoExperience.getInstance(this.props.id).failure();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+  return UfoErrorBoundary;
+}(_react.default.Component);
+
+exports.UfoErrorBoundary = UfoErrorBoundary;

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

@@ -50,7 +50,7 @@ var MENTION_ITEM_HEIGHT = 48;
 exports.MENTION_ITEM_HEIGHT = MENTION_ITEM_HEIGHT;
 
 var MentionItemStyle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  height: ", "px;\n  line-height: 1.2;\n  cursor: pointer;\n"])), function (props) {
-  return props.selected ? (0, _tokens.token)('color.background.brand', _colors.N30) : 'transparent';
+  return props.selected ? (0, _tokens.token)('color.background.selected', _colors.N30) : 'transparent';
 }, MENTION_ITEM_HEIGHT);
 
 exports.MentionItemStyle = MentionItemStyle;

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

@@ -21,7 +21,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-var Actions = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title*/\n  margin-right: ", "px;\n"])), (0, _constants.gridSize)() * 0.5, (0, _constants.gridSize)() * 0.5);
+var Actions = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n  margin-right: ", "px;\n"])), (0, _constants.gridSize)() * 0.5, (0, _constants.gridSize)() * 0.5);
 
 exports.Actions = Actions;
 
@@ -33,7 +33,7 @@ var Heading = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _t
 
 exports.Heading = Heading;
 
-var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/\n"])), (0, _tokens.token)('color.background.discovery', _colors.P50), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
+var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), (0, _tokens.token)('color.background.discovery', _colors.P50), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
 
 exports.Card = Card;
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/mention",
-	"version": "21.0.0",
+	"version": "21.0.1",
 	"sideEffects": false
 }

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

@@ -7,12 +7,14 @@ import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import { isRestricted, MentionType } from '../../types';
 import { fireAnalyticsMentionEvent } from '../../util/analytics';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import { UnknownUserError } from '../../util/i18n';
+import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
 export const ANALYTICS_HOVER_DELAY = 1000;
 export const UNKNOWN_USER_ID = '_|unknown|_';
 export class MentionInternal extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "handleOnClick", e => {
       const {
@@ -79,12 +81,24 @@ export class MentionInternal extends React.PureComponent {
 
       return MentionType.DEFAULT;
     });
+
+    mentionRenderedUfoExperience.getInstance(props.id).start();
+  }
+
+  componentDidMount() {
+    mentionRenderedUfoExperience.getInstance(this.props.id).success();
   }
 
   componentWillUnmount() {
     if (this.hoverTimeout) {
       clearTimeout(this.hoverTimeout);
     }
+
+    const ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
+
+    if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
+      ufoInstance.abort();
+    }
   }
 
   renderUnknownUserError(id) {
@@ -116,7 +130,9 @@ export class MentionInternal extends React.PureComponent {
       onMouseLeave: handleOnMouseLeave,
       spellCheck: false
     }, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+      id: id
+    }, /*#__PURE__*/React.createElement("span", {
       "data-mention-id": id,
       "data-access-level": accessLevel,
       spellCheck: false
@@ -124,7 +140,7 @@ export class MentionInternal extends React.PureComponent {
       fallback: mentionComponent
     }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
       name: text
-    }, mentionComponent)) : mentionComponent));
+    }, mentionComponent)) : mentionComponent)));
   }
 
 }

package/dist/es2019/components/Mention/ufoExperiences.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
+export const mentionRenderedUfoExperience = new ConcurrentExperience('mention-rendered', {
+  platform: {
+    component: 'mention'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+});
+export class UfoErrorBoundary extends React.Component {
+  componentDidCatch() {
+    mentionRenderedUfoExperience.getInstance(this.props.id).failure();
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}

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

@@ -50,7 +50,7 @@ export const TimeStyle = styled.div`
 `;
 export const MENTION_ITEM_HEIGHT = 48;
 export const MentionItemStyle = styled.div`
-  background-color: ${props => props.selected ? token('color.background.brand', N30) : 'transparent'};
+  background-color: ${props => props.selected ? token('color.background.selected', N30) : 'transparent'};
   display: block;
   overflow: hidden;
   list-style-type: none;

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

@@ -5,7 +5,7 @@ import { h400 } from '@atlaskit/theme/typography';
 import { token } from '@atlaskit/tokens';
 export const Actions = styled.div`
   justify-content: flex-end;
-  margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to middle align x button with title*/
+  margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to middle align x button with title */
   margin-right: ${gridSize() * 0.5}px;
 `;
 export const Title = styled.div`
@@ -26,7 +26,7 @@ export const Card = styled.div`
   padding-bottom: ${gridSize() * 2}px;
   padding-left: ${gridSize() * 2}px;
   padding-right: 0px;
-  margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/
+  margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */
 `;
 export const Content = styled.div`
   max-width: 290px;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/mention",
-	"version": "21.0.0",
+	"version": "21.0.1",
 	"sideEffects": false
 }

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

@@ -18,7 +18,9 @@ import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import { isRestricted, MentionType } from '../../types';
 import { fireAnalyticsMentionEvent } from '../../util/analytics';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import { UnknownUserError } from '../../util/i18n';
+import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
 export var ANALYTICS_HOVER_DELAY = 1000;
 export var UNKNOWN_USER_ID = '_|unknown|_';
 export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
@@ -26,16 +28,12 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(MentionInternal);
 
-  function MentionInternal() {
+  function MentionInternal(props) {
     var _this;
 
     _classCallCheck(this, MentionInternal);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (e) {
       var _this$props = _this.props,
@@ -99,15 +97,27 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
       return MentionType.DEFAULT;
     });
 
+    mentionRenderedUfoExperience.getInstance(props.id).start();
     return _this;
   }
 
   _createClass(MentionInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      mentionRenderedUfoExperience.getInstance(this.props.id).success();
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this.hoverTimeout) {
         clearTimeout(this.hoverTimeout);
       }
+
+      var ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
+
+      if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
+        ufoInstance.abort();
+      }
     }
   }, {
     key: "renderUnknownUserError",
@@ -139,7 +149,9 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         onMouseLeave: handleOnMouseLeave,
         spellCheck: false
       }, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+        id: id
+      }, /*#__PURE__*/React.createElement("span", {
         "data-mention-id": id,
         "data-access-level": accessLevel,
         spellCheck: false
@@ -147,7 +159,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         fallback: mentionComponent
       }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
         name: text
-      }, mentionComponent)) : mentionComponent));
+      }, mentionComponent)) : mentionComponent)));
     }
   }]);
 

package/dist/esm/components/Mention/ufoExperiences.js

@@ -0,0 +1,44 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
+export var mentionRenderedUfoExperience = new ConcurrentExperience('mention-rendered', {
+  platform: {
+    component: 'mention'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+});
+export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(UfoErrorBoundary, _React$Component);
+
+  var _super = _createSuper(UfoErrorBoundary);
+
+  function UfoErrorBoundary() {
+    _classCallCheck(this, UfoErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UfoErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch() {
+      mentionRenderedUfoExperience.getInstance(this.props.id).failure();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return UfoErrorBoundary;
+}(React.Component);

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

@@ -19,6 +19,6 @@ export var InfoSectionStyle = styled.div(_templateObject5 || (_templateObject5 =
 export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), token('color.text.subtlest', N100));
 export var MENTION_ITEM_HEIGHT = 48;
 export var MentionItemStyle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  height: ", "px;\n  line-height: 1.2;\n  cursor: pointer;\n"])), function (props) {
-  return props.selected ? token('color.background.brand', N30) : 'transparent';
+  return props.selected ? token('color.background.selected', N30) : 'transparent';
 }, MENTION_ITEM_HEIGHT);
 export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), token('color.text.subtle', N500));

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

@@ -7,10 +7,10 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { P50 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
 import { token } from '@atlaskit/tokens';
-export var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title*/\n  margin-right: ", "px;\n"])), gridSize() * 0.5, gridSize() * 0.5);
+export var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n  margin-right: ", "px;\n"])), gridSize() * 0.5, gridSize() * 0.5);
 export var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 0px;\n"])), h400);
 export var Heading = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  margin-bottom: ", "px;\n"])), gridSize() * 2, gridSize() * 0.5);
-export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/\n"])), token('color.background.discovery', P50), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
+export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  background-color: ", ";\n  overflow: hidden;\n  line-height: 21px;\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: 0px;\n  margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), token('color.background.discovery', P50), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
 export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 290px;\n  display: flex;\n"])));
 export var Section = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
 export var Aside = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  opacity: 0.8;\n"])));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/mention",
-	"version": "21.0.0",
+	"version": "21.0.1",
 	"sideEffects": false
 }

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

@@ -16,6 +16,8 @@ export declare type OwnProps = {
 export declare type Props = OwnProps & WithAnalyticsEventsProps;
 export declare class MentionInternal extends React.PureComponent<Props, {}> {
     private hoverTimeout?;
+    constructor(props: Props);
+    componentDidMount(): void;
     private handleOnClick;
     private handleOnMouseEnter;
     private handleOnMouseLeave;

package/dist/types/components/Mention/ufoExperiences.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConcurrentExperience } from '@atlaskit/ufo';
+export declare const mentionRenderedUfoExperience: ConcurrentExperience;
+export declare class UfoErrorBoundary extends React.Component<{
+    id: string;
+}> {
+    componentDidCatch(): void;
+    render(): React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mention",
-  "version": "21.0.0",
+  "version": "21.0.1",
   "description": "A React component used to display user profiles in a list for 'Mention' functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,8 +34,9 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -51,8 +52,8 @@
   "devDependencies": {
     "@atlaskit/adf-utils": "^16.0.0",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-core": "^162.0.0",
-    "@atlaskit/editor-test-helpers": "^16.1.0",
+    "@atlaskit/editor-core": "^163.0.0",
+    "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
@@ -70,7 +71,6 @@
     "query-string": "^6.14.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "serialize-javascript": "^5.0.1",
     "typescript": "3.9.6"