@atlaskit/mention 29.2.5 → 29.2.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/mention
 
+## 29.2.6
+
+### Patch Changes
+
+- [`90cc9e3c7fc0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90cc9e3c7fc0c) -
+  Support gated dark-background styling for the configured Rovo Chat agent mention in editors and
+  the renderer.
+
 ## 29.2.5
 
 ### Patch Changes

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

@@ -154,7 +154,8 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         localId = props.localId,
         disabledTooltip = props.disabledTooltip,
         isAvatarImagePreShaped = props.isAvatarImagePreShaped,
-        renderAvatarSlot = props.renderAvatarSlot;
+        renderAvatarSlot = props.renderAvatarSlot,
+        isRovoChat = props.isRovoChat;
       var mentionType = this.getMentionType();
       var failedMention = text === "@".concat(_constants.UNKNOWN_USER_ID);
       var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
@@ -185,7 +186,8 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         spellCheck: false,
         "data-testid": "mention-".concat(id),
         "data-mention-type": mentionType,
-        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
+        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip,
+        isRovoChat: isRovoChat
       }, 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",

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

@@ -10,9 +10,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _mentionStyle = require("./mention-style");
 var _templateObject;
-var _excluded = ["isAvatarVisible", "mentionType"];
+var _excluded = ["isAvatarVisible", "isRovoChat", "mentionType"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,12 +21,30 @@ var _excluded = ["isAvatarVisible", "mentionType"];
 /* eslint-disable @atlaskit/design-system/no-html-button */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getStyle = function getStyle(_ref, property) {
-  var mentionType = _ref.mentionType;
+  var mentionType = _ref.mentionType,
+    isRovoChat = _ref.isRovoChat;
+  var isRovoChatEnabled = isRovoChat && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo');
+  if (isRovoChatEnabled) {
+    if (property === 'text') {
+      return "var(--ds-text-inverse, #FFFFFF)";
+    }
+    if (property === 'background') {
+      return "var(--ds-background-neutral-bold, #292A2E)";
+    }
+    if (property === 'hoveredBackground') {
+      return "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+    }
+    if (property === 'pressedBackground') {
+      return "var(--ds-background-neutral-bold-pressed, #505258)";
+    }
+  }
   return _mentionStyle.mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var _ref2$isAvatarVisible = _ref2.isAvatarVisible,
     isAvatarVisible = _ref2$isAvatarVisible === void 0 ? false : _ref2$isAvatarVisible,
+    _ref2$isRovoChat = _ref2.isRovoChat,
+    isRovoChat = _ref2$isRovoChat === void 0 ? false : _ref2$isRovoChat,
     mentionType = _ref2.mentionType,
     other = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return (0, _react2.jsx)("span", (0, _extends2.default)({
@@ -33,17 +52,27 @@ var PrimitiveMention = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     "data-avatar-visible": isAvatarVisible || undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'background'), getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'text'), "var(--ds-font-weight-regular, 400)", getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'hoveredBackground'), getStyle({
-      mentionType: mentionType
-    }, 'pressedBackground'))
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'text'), getStyle({
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'pressedBackground'), getStyle({
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'text'))
   }, other));
 });
 var _default = exports.default = PrimitiveMention;

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

@@ -132,6 +132,7 @@ var ResourcedMention = exports.default = /*#__PURE__*/function (_React$PureCompo
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave,
         renderAvatarSlot: props.renderAvatarSlot,
+        isRovoChat: props.isRovoChat,
         ssrPlaceholderId: props.ssrPlaceholderId
       });
     }

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 = "29.2.4";
+var packageVersion = exports.packageVersion = "29.2.5";

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

@@ -142,7 +142,8 @@ export class MentionInternal extends React.PureComponent {
       localId,
       disabledTooltip,
       isAvatarImagePreShaped,
-      renderAvatarSlot
+      renderAvatarSlot,
+      isRovoChat
     } = props;
     const mentionType = this.getMentionType();
     const failedMention = text === `@${UNKNOWN_USER_ID}`;
@@ -175,7 +176,8 @@ export class MentionInternal extends React.PureComponent {
       spellCheck: false,
       "data-testid": `mention-${id}`,
       "data-mention-type": mentionType,
-      "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
+      "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip,
+      isRovoChat: isRovoChat
     }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       "aria-hidden": "true",
       "data-testid": "mention-avatar-slot",

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

@@ -3,18 +3,37 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-
 import { forwardRef } from 'react';
 
 /* eslint-disable @atlaskit/design-system/no-html-button */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { mentionStyle } from './mention-style';
 const getStyle = ({
-  mentionType
-}, property) => mentionStyle[mentionType][property];
+  mentionType,
+  isRovoChat
+}, property) => {
+  const isRovoChatEnabled = isRovoChat && isExperimentEnabled('platform_editor_mention_rovo');
+  if (isRovoChatEnabled) {
+    if (property === 'text') {
+      return "var(--ds-text-inverse, #FFFFFF)";
+    }
+    if (property === 'background') {
+      return "var(--ds-background-neutral-bold, #292A2E)";
+    }
+    if (property === 'hoveredBackground') {
+      return "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+    }
+    if (property === 'pressedBackground') {
+      return "var(--ds-background-neutral-bold-pressed, #505258)";
+    }
+  }
+  return mentionStyle[mentionType][property];
+};
 const PrimitiveMention = /*#__PURE__*/forwardRef(({
   isAvatarVisible = false,
+  isRovoChat = false,
   mentionType,
   ...other
 }, ref) => {
@@ -29,10 +48,12 @@ const PrimitiveMention = /*#__PURE__*/forwardRef(({
       mentionType
     }, 'borderColor')};
 					background: ${getStyle({
-      mentionType
+      mentionType,
+      isRovoChat
     }, 'background')};
 					color: ${getStyle({
-      mentionType
+      mentionType,
+      isRovoChat
     }, 'text')};
 					border-radius: 20px;
 					cursor: pointer;
@@ -46,13 +67,23 @@ const PrimitiveMention = /*#__PURE__*/forwardRef(({
 					}
 					&:hover {
 						background: ${getStyle({
-      mentionType
+      mentionType,
+      isRovoChat
     }, 'hoveredBackground')};
+						color: ${getStyle({
+      mentionType,
+      isRovoChat
+    }, 'text')};
 					}
 					&:active {
 						background: ${getStyle({
-      mentionType
+      mentionType,
+      isRovoChat
     }, 'pressedBackground')};
+						color: ${getStyle({
+      mentionType,
+      isRovoChat
+    }, 'text')};
 					}
 				`
   }, other));

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

@@ -106,6 +106,7 @@ export default class ResourcedMention extends React.PureComponent {
       onMouseEnter: props.onMouseEnter,
       onMouseLeave: props.onMouseLeave,
       renderAvatarSlot: props.renderAvatarSlot,
+      isRovoChat: props.isRovoChat,
       ssrPlaceholderId: props.ssrPlaceholderId
     });
   }

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

@@ -1 +1 @@
-export const packageVersion = "29.2.4";
+export const packageVersion = "29.2.5";

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

@@ -149,7 +149,8 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         localId = props.localId,
         disabledTooltip = props.disabledTooltip,
         isAvatarImagePreShaped = props.isAvatarImagePreShaped,
-        renderAvatarSlot = props.renderAvatarSlot;
+        renderAvatarSlot = props.renderAvatarSlot,
+        isRovoChat = props.isRovoChat;
       var mentionType = this.getMentionType();
       var failedMention = text === "@".concat(UNKNOWN_USER_ID);
       var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
@@ -180,7 +181,8 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         spellCheck: false,
         "data-testid": "mention-".concat(id),
         "data-mention-type": mentionType,
-        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
+        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip,
+        isRovoChat: isRovoChat
       }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         "aria-hidden": "true",
         "data-testid": "mention-avatar-slot",

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

@@ -2,25 +2,43 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["isAvatarVisible", "mentionType"];
+var _excluded = ["isAvatarVisible", "isRovoChat", "mentionType"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-
 import { forwardRef } from 'react';
 
 /* eslint-disable @atlaskit/design-system/no-html-button */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { mentionStyle } from './mention-style';
 var getStyle = function getStyle(_ref, property) {
-  var mentionType = _ref.mentionType;
+  var mentionType = _ref.mentionType,
+    isRovoChat = _ref.isRovoChat;
+  var isRovoChatEnabled = isRovoChat && isExperimentEnabled('platform_editor_mention_rovo');
+  if (isRovoChatEnabled) {
+    if (property === 'text') {
+      return "var(--ds-text-inverse, #FFFFFF)";
+    }
+    if (property === 'background') {
+      return "var(--ds-background-neutral-bold, #292A2E)";
+    }
+    if (property === 'hoveredBackground') {
+      return "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+    }
+    if (property === 'pressedBackground') {
+      return "var(--ds-background-neutral-bold-pressed, #505258)";
+    }
+  }
   return mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$isAvatarVisible = _ref2.isAvatarVisible,
     isAvatarVisible = _ref2$isAvatarVisible === void 0 ? false : _ref2$isAvatarVisible,
+    _ref2$isRovoChat = _ref2.isRovoChat,
+    isRovoChat = _ref2$isRovoChat === void 0 ? false : _ref2$isRovoChat,
     mentionType = _ref2.mentionType,
     other = _objectWithoutProperties(_ref2, _excluded);
   return jsx("span", _extends({
@@ -28,17 +46,27 @@ var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     "data-avatar-visible": isAvatarVisible || undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t\tcolor: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'background'), getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'text'), "var(--ds-font-weight-regular, 400)", getStyle({
-      mentionType: mentionType
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
     }, 'hoveredBackground'), getStyle({
-      mentionType: mentionType
-    }, 'pressedBackground'))
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'text'), getStyle({
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'pressedBackground'), getStyle({
+      mentionType: mentionType,
+      isRovoChat: isRovoChat
+    }, 'text'))
   }, other));
 });
 export default PrimitiveMention;

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

@@ -123,6 +123,7 @@ var ResourcedMention = /*#__PURE__*/function (_React$PureComponent) {
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave,
         renderAvatarSlot: props.renderAvatarSlot,
+        isRovoChat: props.isRovoChat,
         ssrPlaceholderId: props.ssrPlaceholderId
       });
     }

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

@@ -1 +1 @@
-export var packageVersion = "29.2.4";
+export var packageVersion = "29.2.5";

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

@@ -6,6 +6,7 @@ import { type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes
 import type { MentionType } from '../../types';
 export interface PrimitiveMentionProps extends HTMLAttributes<HTMLSpanElement> {
     isAvatarVisible?: boolean;
+    isRovoChat?: boolean;
     mentionType: MentionType;
 }
 declare const PrimitiveMention: ForwardRefExoticComponent<PrimitiveMentionProps & RefAttributes<HTMLSpanElement>>;

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

@@ -9,6 +9,7 @@ export interface Props {
     id: string;
     isAvatarImagePreShaped?: boolean;
     isDisabled?: boolean;
+    isRovoChat?: boolean;
     localId?: string;
     mentionProvider?: Promise<MentionProvider>;
     onClick?: MentionEventHandler;

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

@@ -38,6 +38,8 @@ export type OwnProps = {
     onMouseLeave?: MentionEventHandler;
     /** Whether the upstream integration has enabled the avatar treatment for this mention. */
     renderAvatarSlot?: boolean;
+    /** Whether this mention represents the Rovo Chat agent. */
+    isRovoChat?: boolean;
     ssrPlaceholderId?: string;
     text: string;
 };

package/dist/types/types.d.ts

@@ -3,6 +3,7 @@ import { type ServiceConfig } from '@atlaskit/util-service-support/types';
 export interface MentionNodeData {
     appType?: string | null;
     avatarUrl?: string;
+    isRovoChat?: boolean;
     /** The image already contains its intended user/agent shape and must not be clipped again. */
     isAvatarImagePreShaped?: boolean;
 }
@@ -183,6 +184,8 @@ export interface MentionProvider extends ResourceProvider<MentionDescription[]>,
     }): void;
     recordMentionSelection(mention: MentionDescription, contextIdentifier?: MentionContextIdentifier): void;
     shouldHighlightMention(mention: MentionDescription): boolean;
+    /** Optional async identity for the product's default Rovo Chat agent. */
+    getRovoChatAgentIdentityAccountId?(): Promise<string | undefined>;
     /**
      * Optional. When implemented, lets the rendering surface subscribe to
      * changes in the disabled-state predicate so already-rendered chips can

package/package.json

@@ -121,5 +121,5 @@
 		"*.compiled.css"
 	],
 	"types": "dist/types/index.d.ts",
-	"version": "29.2.5"
+	"version": "29.2.6"
 }