@atlaskit/mention 30.2.8 → 30.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/mention
 
+## 30.3.0
+
+### Minor Changes
+
+- [`d80c581b58fba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d80c581b58fba) -
+  Add optional email to mention results and show it as small subtext when no byline is already
+  shown, behind the platform_editor_mentions_email_search experiment's isEnabled parameter.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 30.2.9
+
+### Patch Changes
+
+- [`190c5847617e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/190c5847617e8) -
+  Align agent mention avatar hexagon geometry with agent avatars behind the
+  `platform_editor_agent_hexagon_ui_fix` experiment.
+
 ## 30.2.8
 
 ### Patch Changes

package/dist/cjs/components/Mention/MentionInternal.compiled.css

@@ -12,6 +12,7 @@
 ._4t3i1osq{height:100%}
 ._4t3i1x4e{height:1em}
 ._5ral1dfr{object-fit:cover}
+._mkrz1k6g{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)}
 ._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
 ._s7n410e5{vertical-align:-.125em}
 ._s7n4ux7c{vertical-align:.05em}

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

@@ -17,6 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring/focus-ring"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _experienceState = require("@atlaskit/ufo/experience-state");
 var _constants = require("../../_constants");
@@ -37,6 +38,7 @@ var avatarStyles = null;
 var avatarFallbackStyles = null;
 var avatarImageStyles = null;
 var agentAvatarStyles = null;
+var fixedAgentAvatarStyles = null;
 var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   function MentionInternal(props) {
     var _this;
@@ -199,6 +201,7 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
       var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
       var visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
       var shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+      var shouldApplyFixedAgentShape = shouldApplyAgentShape && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_agent_hexagon_ui_fix');
       var shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
       var showRestrictedTooltip = mentionType === _types.MentionType.RESTRICTED;
       var showDisabledTooltip = mentionType === _types.MentionType.DISABLED && !!disabledTooltip;
@@ -229,7 +232,7 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
       }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         "aria-hidden": "true",
         "data-testid": "mention-avatar-slot",
-        className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
+        className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", shouldApplyFixedAgentShape && "_mkrz1k6g", this.state.hasAvatarError && "_s7n4ux7c"])
       }, shouldRenderAvatar ? /*#__PURE__*/_react.default.createElement("img", {
         alt: "",
         ref: this.avatarImageRef,

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

@@ -11,6 +11,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _MentionHighlightHelpers = require("../MentionItem/MentionHighlightHelpers");
 var _styles = require("./styles");
 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)); }
@@ -25,10 +26,14 @@ var UserMentionDescriptionByline = exports.default = /*#__PURE__*/function (_Rea
     key: "render",
     value: function render() {
       var _this$props$mention = this.props.mention,
+        email = _this$props$mention.email,
         highlight = _this$props$mention.highlight,
         name = _this$props$mention.name,
         nickname = _this$props$mention.nickname;
       var nicknameHighlights = highlight && highlight.nickname;
+      if (email && (!nickname || name === nickname) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mentions_email_search')) {
+        return /*#__PURE__*/_react.default.createElement(_styles.DescriptionBylineStyle, null, email);
+      }
       if (name === nickname) {
         return null;
       }

package/dist/cjs/util/package-version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.packageVersion = void 0;
-var packageVersion = exports.packageVersion = "30.2.7";
+var packageVersion = exports.packageVersion = "30.2.9";

package/dist/es2019/components/Mention/MentionInternal.compiled.css

@@ -12,6 +12,7 @@
 ._4t3i1osq{height:100%}
 ._4t3i1x4e{height:1em}
 ._5ral1dfr{object-fit:cover}
+._mkrz1k6g{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)}
 ._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
 ._s7n410e5{vertical-align:-.125em}
 ._s7n4ux7c{vertical-align:.05em}

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

@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import React from 'react';
 import FocusRing from '@atlaskit/focus-ring/focus-ring';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
 import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '../../_constants';
@@ -23,6 +24,7 @@ const avatarStyles = null;
 const avatarFallbackStyles = null;
 const avatarImageStyles = null;
 const agentAvatarStyles = null;
+const fixedAgentAvatarStyles = null;
 export class MentionInternal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -186,6 +188,7 @@ export class MentionInternal extends React.PureComponent {
     const showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
     const visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
     const shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+    const shouldApplyFixedAgentShape = shouldApplyAgentShape && isExperimentEnabled('platform_editor_agent_hexagon_ui_fix');
     const shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
     const showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
     const showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
@@ -217,7 +220,7 @@ export class MentionInternal extends React.PureComponent {
     }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       "aria-hidden": "true",
       "data-testid": "mention-avatar-slot",
-      className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
+      className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", shouldApplyFixedAgentShape && "_mkrz1k6g", this.state.hasAvatarError && "_s7n4ux7c"])
     }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
       alt: "",
       ref: this.avatarImageRef,

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

@@ -1,14 +1,19 @@
 import React from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { renderHighlight } from '../MentionItem/MentionHighlightHelpers';
 import { DescriptionBylineStyle } from './styles';
 export default class UserMentionDescriptionByline extends React.PureComponent {
   render() {
     const {
+      email,
       highlight,
       name,
       nickname
     } = this.props.mention;
     const nicknameHighlights = highlight && highlight.nickname;
+    if (email && (!nickname || name === nickname) && isExperimentEnabled('platform_editor_mentions_email_search')) {
+      return /*#__PURE__*/React.createElement(DescriptionBylineStyle, null, email);
+    }
     if (name === nickname) {
       return null;
     }

package/dist/es2019/util/package-version.js

@@ -1 +1 @@
-export const packageVersion = "30.2.7";
+export const packageVersion = "30.2.9";

package/dist/esm/components/Mention/MentionInternal.compiled.css

@@ -12,6 +12,7 @@
 ._4t3i1osq{height:100%}
 ._4t3i1x4e{height:1em}
 ._5ral1dfr{object-fit:cover}
+._mkrz1k6g{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)}
 ._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
 ._s7n410e5{vertical-align:-.125em}
 ._s7n4ux7c{vertical-align:.05em}

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

@@ -16,6 +16,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React from 'react';
 import FocusRing from '@atlaskit/focus-ring/focus-ring';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
 import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '../../_constants';
@@ -32,6 +33,7 @@ var avatarStyles = null;
 var avatarFallbackStyles = null;
 var avatarImageStyles = null;
 var agentAvatarStyles = null;
+var fixedAgentAvatarStyles = null;
 export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   function MentionInternal(props) {
     var _this;
@@ -194,6 +196,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
       var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
       var visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
       var shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+      var shouldApplyFixedAgentShape = shouldApplyAgentShape && isExperimentEnabled('platform_editor_agent_hexagon_ui_fix');
       var shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
       var showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
       var showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
@@ -224,7 +227,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
       }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         "aria-hidden": "true",
         "data-testid": "mention-avatar-slot",
-        className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
+        className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", shouldApplyFixedAgentShape && "_mkrz1k6g", this.state.hasAvatarError && "_s7n4ux7c"])
       }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
         alt: "",
         ref: this.avatarImageRef,

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

@@ -6,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { renderHighlight } from '../MentionItem/MentionHighlightHelpers';
 import { DescriptionBylineStyle } from './styles';
 var UserMentionDescriptionByline = /*#__PURE__*/function (_React$PureComponent) {
@@ -18,10 +19,14 @@ var UserMentionDescriptionByline = /*#__PURE__*/function (_React$PureComponent)
     key: "render",
     value: function render() {
       var _this$props$mention = this.props.mention,
+        email = _this$props$mention.email,
         highlight = _this$props$mention.highlight,
         name = _this$props$mention.name,
         nickname = _this$props$mention.nickname;
       var nicknameHighlights = highlight && highlight.nickname;
+      if (email && (!nickname || name === nickname) && isExperimentEnabled('platform_editor_mentions_email_search')) {
+        return /*#__PURE__*/React.createElement(DescriptionBylineStyle, null, email);
+      }
       if (name === nickname) {
         return null;
       }

package/dist/esm/util/package-version.js

@@ -1 +1 @@
-export var packageVersion = "30.2.7";
+export var packageVersion = "30.2.9";

package/dist/types/types.d.ts

@@ -222,6 +222,7 @@ export interface RealMentionDescription {
     avatarUrl?: string;
     context?: MentionDescContext;
     description?: string;
+    email?: string;
     highlight?: Highlight;
     id: string;
     inContext?: boolean;

package/package.json

@@ -40,7 +40,7 @@
 		"@atlaskit/lozenge": "^17.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/skeleton": "^4.4.0",
 		"@atlaskit/tag": "^17.0.0",
@@ -67,7 +67,7 @@
 		"@atlassian/a11y-playwright-testing": "^0.13.0",
 		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
-		"@atlassian/testing-library": "^0.11.0",
+		"@atlassian/testing-library": "^0.12.0",
 		"@atlassian/workbench": "workspace:*",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -124,5 +124,5 @@
 		"*.compiled.css"
 	],
 	"types": "dist/types/index.d.ts",
-	"version": "30.2.8"
+	"version": "30.3.0"
 }