@atlaskit/mention 27.11.0 → 27.12.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/mention
 
+## 27.12.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.12.0
+
+### Minor Changes
+
+- [`eb6534b29cb7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb6534b29cb7a) -
+  [ux] Fix alignment of NameSectionStyle with AvatarStyle and Add spacing between mention typeahead
+  sections
+
 ## 27.11.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -61,6 +61,9 @@
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../editor/tmp-editor-statsig/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -61,6 +61,9 @@
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../editor/tmp-editor-statsig/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
 		},

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

@@ -30,6 +30,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tag = _interopRequireDefault(require("@atlaskit/tag"));
 var _react = _interopRequireDefault(require("react"));
 var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
 var _i18n = require("../../util/i18n");
 var _mouse = require("../../util/mouse");
@@ -161,6 +162,7 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
       var restricted = (0, _types.isRestricted)(accessLevel);
       var nameHighlights = highlight && highlight.name;
       var xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon, #292A2E)";
+      var RowStyle = (0, _expValEquals.expValEquals)('platform_editor_agent_mentions', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_agent_mentions_drop_one_fixes') ? _styles.RowStyleNext : _styles.RowStyle;
       return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
         selected: selected,
         height: height,
@@ -173,7 +175,7 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
         "data-mention-name": mentionName,
         "data-selected": selected,
         ref: forwardedRef
-      }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, {
+      }, /*#__PURE__*/_react.default.createElement(RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, {
         restricted: restricted
       }, /*#__PURE__*/_react.default.createElement(_MentionAvatar.MentionAvatar, {
         selected: selected,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimeStyle = exports.RowStyle = exports.NameSectionStyle = exports.MentionItemStyle = exports.MENTION_ITEM_HEIGHT_REFRESHED = exports.MENTION_ITEM_HEIGHT = exports.InfoSectionStyle = exports.FullNameStyle = exports.AvatarStyle = exports.AvatarSkeletonWrapper = exports.AccessSectionStyle = void 0;
+exports.TimeStyle = exports.RowStyleNext = exports.RowStyle = exports.NameSectionStyle = exports.MentionItemStyle = exports.MENTION_ITEM_HEIGHT_REFRESHED = exports.MENTION_ITEM_HEIGHT = exports.InfoSectionStyle = exports.FullNameStyle = exports.AvatarStyle = exports.AvatarSkeletonWrapper = exports.AccessSectionStyle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -23,6 +23,18 @@ var RowStyle = exports.RowStyle = _styled.default.div({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var RowStyleNext = exports.RowStyleNext = _styled.default.div({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflow: 'hidden',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)"),
+  textOverflow: 'ellipsis',
+  verticalAlign: 'middle'
+});
+
 // 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
 var AvatarStyle = exports.AvatarStyle = _styled.default.span(function (props) {
   return {

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 = "27.10.1";
+var packageVersion = "27.12.0";
 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/MentionItem/index.js

@@ -5,12 +5,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isRestricted } from '../../types';
 import { NoAccessLabel } from '../../util/i18n';
 import { leftClick } from '../../util/mouse';
 import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import AsyncLockCircleIcon from '../LockCircleIcon';
-import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle, TimeStyle } from './styles';
+import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
 import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
@@ -130,6 +131,7 @@ export default class MentionItem extends React.PureComponent {
     const restricted = isRestricted(accessLevel);
     const nameHighlights = highlight && highlight.name;
     const xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon, #292A2E)";
+    const RowStyle = expValEquals('platform_editor_agent_mentions', 'isEnabled', true) && fg('platform_editor_agent_mentions_drop_one_fixes') ? RowStyleNext : RowStyleLegacy;
     return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
       selected: selected,
       height: height,

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

@@ -15,6 +15,18 @@ export const RowStyle = styled.div({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const RowStyleNext = styled.div({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflow: 'hidden',
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"}`,
+  textOverflow: 'ellipsis',
+  verticalAlign: 'middle'
+});
+
 // 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
 export const AvatarStyle = styled.span(props => ({
   position: 'relative',

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 = "27.10.1";
+const packageVersion = "27.12.0";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

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

@@ -13,12 +13,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import React from 'react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isRestricted } from '../../types';
 import { NoAccessLabel } from '../../util/i18n';
 import { leftClick } from '../../util/mouse';
 import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import AsyncLockCircleIcon from '../LockCircleIcon';
-import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle, TimeStyle } from './styles';
+import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
 import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
@@ -141,6 +142,7 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
       var restricted = isRestricted(accessLevel);
       var nameHighlights = highlight && highlight.name;
       var xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon, #292A2E)";
+      var RowStyle = expValEquals('platform_editor_agent_mentions', 'isEnabled', true) && fg('platform_editor_agent_mentions_drop_one_fixes') ? RowStyleNext : RowStyleLegacy;
       return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
         selected: selected,
         height: height,

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

@@ -15,6 +15,18 @@ export var RowStyle = styled.div({
   verticalAlign: 'middle'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var RowStyleNext = styled.div({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  overflow: 'hidden',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)"),
+  textOverflow: 'ellipsis',
+  verticalAlign: 'middle'
+});
+
 // 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
 export var AvatarStyle = styled.span(function (props) {
   return {

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 = "27.10.1";
+var packageVersion = "27.12.0";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/components/MentionItem/styles.d.ts

@@ -18,6 +18,10 @@ export declare const RowStyle: StyledComponent<{
     as?: React.ElementType;
     theme?: Theme;
 }, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RowStyleNext: StyledComponent<{
+    as?: React.ElementType;
+    theme?: Theme;
+}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AvatarStyle: StyledComponent<{
     as?: React.ElementType;
     theme?: Theme;

package/package.json

@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/avatar": "^26.4.0",
 		"@atlaskit/focus-ring": "^4.2.0",
-		"@atlaskit/heading": "^6.2.0",
+		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/icon": "^37.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
@@ -40,8 +40,9 @@
 		"@atlaskit/skeleton": "^4.2.0",
 		"@atlaskit/tag": "^15.4.0",
 		"@atlaskit/teams-avatar": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.6.0",
 		"@atlaskit/tokens": "^16.3.0",
-		"@atlaskit/tooltip": "^23.2.0",
+		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -99,6 +100,9 @@
 		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
+		},
+		"platform_editor_agent_mentions_drop_one_fixes": {
+			"type": "boolean"
 		}
 	},
 	"publishConfig": {
@@ -118,5 +122,5 @@
 		}
 	},
 	"types": "dist/types/index.d.ts",
-	"version": "27.11.0"
+	"version": "27.12.1"
 }