@atlaskit/mention 27.5.2 → 27.6.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/mention
 
+## 27.6.0
+
+### Minor Changes
+
+- [`2aa9853a2c07d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2aa9853a2c07d) -
+  `ResourcedMention` and the editor-common `Mention` now accept an `isDisabled` (and
+  `disabledTooltip`) prop, forwarding the disabled mention visual state through the layered mention
+  components. A disabled mention bypasses the profile-card wrapper as it is non-interactive, while
+  retaining a readable neutral visual treatment so meaningful mention text remains perceivable.
+
+  Example usage:
+
+  ```tsx
+  <Mention
+  	id="agent-2"
+  	text="@Researcher"
+  	isDisabled
+  	disabledTooltip="Only one agent can be active at a time"
+  />
+  ```
+
+  Used in Rovo chat to grey out inactive (non-responding) agent @mentions in sent user messages: the
+  agent that responded to the turn stays fully styled while other mentioned agents render disabled.
+
 ## 27.5.2
 
 ### Patch Changes

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

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _types = require("../../types");
 var _react2 = require("react");
+var _mentionStyle = require("./mention-style");
 var _templateObject;
 var _excluded = ["mentionType"];
 /* eslint-disable @atlaskit/design-system/no-html-button */
@@ -20,36 +19,9 @@ var _excluded = ["mentionType"];
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.MentionType.SELF, {
-  background: "var(--ds-background-brand-bold, #1868DB)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-inverse, #FFFFFF)",
-  hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
-  pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
-}), _types.MentionType.RESTRICTED, {
-  background: 'transparent',
-  borderColor: "var(--ds-border-bold, #7D818A)",
-  text: "var(--ds-text, #292A2E)",
-  hoveredBackground: 'transparent',
-  pressedBackground: 'transparent'
-}), _types.MentionType.DEFAULT, {
-  background: "var(--ds-background-neutral, #0515240F)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-subtle, #505258)",
-  hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
-  pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
-}), _types.MentionType.DISABLED, {
-  background: "var(--ds-background-disabled, #0515240F)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-disabled, #080F214A)",
-  // Disabled chips do not change on hover / press.
-  hoveredBackground: "var(--ds-background-disabled, #0515240F)",
-  pressedBackground: "var(--ds-background-disabled, #0515240F)"
-});
 var getStyle = function getStyle(_ref, property) {
   var mentionType = _ref.mentionType;
-  var obj = mentionStyle[mentionType][property];
-  return typeof obj === 'string' ? obj : obj;
+  return _mentionStyle.mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref2, ref) {
   var mentionType = _ref2.mentionType,

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

@@ -120,6 +120,8 @@ var ResourcedMention = exports.default = /*#__PURE__*/function (_React$PureCompo
         id: props.id,
         text: props.text || state.resolvedMentionName || '',
         isHighlighted: state.isHighlighted,
+        isDisabled: props.isDisabled,
+        disabledTooltip: props.disabledTooltip,
         accessLevel: props.accessLevel,
         localId: props.localId,
         onClick: props.onClick,

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

@@ -148,7 +148,8 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
       // `aria-describedby`.
       var isDisabledChip = mentionType === _types.MentionType.DISABLED;
       var disabledA11yProps = isDisabledChip ? _objectSpread({
-        'aria-disabled': true
+        'aria-disabled': true,
+        tabIndex: 0
       }, disabledTooltip ? {
         'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
       } : {}) : {};

package/dist/cjs/components/Mention/mention-style.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mentionStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _types = require("../../types");
+var mentionStyle = exports.mentionStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.MentionType.SELF, {
+  background: "var(--ds-background-brand-bold, #1868DB)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-inverse, #FFFFFF)",
+  hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
+  pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
+}), _types.MentionType.RESTRICTED, {
+  background: 'transparent',
+  borderColor: "var(--ds-border-bold, #7D818A)",
+  text: "var(--ds-text, #292A2E)",
+  hoveredBackground: 'transparent',
+  pressedBackground: 'transparent'
+}), _types.MentionType.DEFAULT, {
+  background: "var(--ds-background-neutral, #0515240F)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-subtle, #505258)",
+  hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
+  pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
+}), _types.MentionType.DISABLED, {
+  background: "var(--ds-background-disabled, #0515240F)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-disabled, #080F214A)",
+  // Disabled chips do not change on hover / press.
+  hoveredBackground: "var(--ds-background-disabled, #0515240F)",
+  pressedBackground: "var(--ds-background-disabled, #0515240F)"
+});

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.5.1";
+var packageVersion = "27.5.2";
 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/Mention/PrimitiveMention.js

@@ -6,45 +6,11 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { MentionType } from '../../types';
 import { forwardRef } from 'react';
-const mentionStyle = {
-  [MentionType.SELF]: {
-    background: "var(--ds-background-brand-bold, #1868DB)",
-    borderColor: 'transparent',
-    text: "var(--ds-text-inverse, #FFFFFF)",
-    hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
-    pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
-  },
-  [MentionType.RESTRICTED]: {
-    background: 'transparent',
-    borderColor: "var(--ds-border-bold, #7D818A)",
-    text: "var(--ds-text, #292A2E)",
-    hoveredBackground: 'transparent',
-    pressedBackground: 'transparent'
-  },
-  [MentionType.DEFAULT]: {
-    background: "var(--ds-background-neutral, #0515240F)",
-    borderColor: 'transparent',
-    text: "var(--ds-text-subtle, #505258)",
-    hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
-    pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
-  },
-  [MentionType.DISABLED]: {
-    background: "var(--ds-background-disabled, #0515240F)",
-    borderColor: 'transparent',
-    text: "var(--ds-text-disabled, #080F214A)",
-    // Disabled chips do not change on hover / press.
-    hoveredBackground: "var(--ds-background-disabled, #0515240F)",
-    pressedBackground: "var(--ds-background-disabled, #0515240F)"
-  }
-};
+import { mentionStyle } from './mention-style';
 const getStyle = ({
   mentionType
-}, property) => {
-  const obj = mentionStyle[mentionType][property];
-  return typeof obj === 'string' ? obj : obj;
-};
+}, property) => mentionStyle[mentionType][property];
 const PrimitiveMention = /*#__PURE__*/forwardRef(({
   mentionType,
   ...other

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

@@ -94,6 +94,8 @@ export default class ResourcedMention extends React.PureComponent {
       id: props.id,
       text: props.text || state.resolvedMentionName || '',
       isHighlighted: state.isHighlighted,
+      isDisabled: props.isDisabled,
+      disabledTooltip: props.disabledTooltip,
       accessLevel: props.accessLevel,
       localId: props.localId,
       onClick: props.onClick,

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

@@ -128,6 +128,7 @@ export class MentionInternal extends React.PureComponent {
     const isDisabledChip = mentionType === MentionType.DISABLED;
     const disabledA11yProps = isDisabledChip ? {
       'aria-disabled': true,
+      tabIndex: 0,
       ...(disabledTooltip ? {
         'aria-label': `${text || '@...'} — ${disabledTooltip}`
       } : {})

package/dist/es2019/components/Mention/mention-style.js

@@ -0,0 +1,32 @@
+import { MentionType } from '../../types';
+export const mentionStyle = {
+  [MentionType.SELF]: {
+    background: "var(--ds-background-brand-bold, #1868DB)",
+    borderColor: 'transparent',
+    text: "var(--ds-text-inverse, #FFFFFF)",
+    hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
+    pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
+  },
+  [MentionType.RESTRICTED]: {
+    background: 'transparent',
+    borderColor: "var(--ds-border-bold, #7D818A)",
+    text: "var(--ds-text, #292A2E)",
+    hoveredBackground: 'transparent',
+    pressedBackground: 'transparent'
+  },
+  [MentionType.DEFAULT]: {
+    background: "var(--ds-background-neutral, #0515240F)",
+    borderColor: 'transparent',
+    text: "var(--ds-text-subtle, #505258)",
+    hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
+    pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
+  },
+  [MentionType.DISABLED]: {
+    background: "var(--ds-background-disabled, #0515240F)",
+    borderColor: 'transparent',
+    text: "var(--ds-text-disabled, #080F214A)",
+    // Disabled chips do not change on hover / press.
+    hoveredBackground: "var(--ds-background-disabled, #0515240F)",
+    pressedBackground: "var(--ds-background-disabled, #0515240F)"
+  }
+};

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

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject;
 var _excluded = ["mentionType"];
 /* eslint-disable @atlaskit/design-system/no-html-button */
@@ -11,38 +10,11 @@ var _excluded = ["mentionType"];
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { MentionType } from '../../types';
 import { forwardRef } from 'react';
-var mentionStyle = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MentionType.SELF, {
-  background: "var(--ds-background-brand-bold, #1868DB)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-inverse, #FFFFFF)",
-  hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
-  pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
-}), MentionType.RESTRICTED, {
-  background: 'transparent',
-  borderColor: "var(--ds-border-bold, #7D818A)",
-  text: "var(--ds-text, #292A2E)",
-  hoveredBackground: 'transparent',
-  pressedBackground: 'transparent'
-}), MentionType.DEFAULT, {
-  background: "var(--ds-background-neutral, #0515240F)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-subtle, #505258)",
-  hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
-  pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
-}), MentionType.DISABLED, {
-  background: "var(--ds-background-disabled, #0515240F)",
-  borderColor: 'transparent',
-  text: "var(--ds-text-disabled, #080F214A)",
-  // Disabled chips do not change on hover / press.
-  hoveredBackground: "var(--ds-background-disabled, #0515240F)",
-  pressedBackground: "var(--ds-background-disabled, #0515240F)"
-});
+import { mentionStyle } from './mention-style';
 var getStyle = function getStyle(_ref, property) {
   var mentionType = _ref.mentionType;
-  var obj = mentionStyle[mentionType][property];
-  return typeof obj === 'string' ? obj : obj;
+  return mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var mentionType = _ref2.mentionType,

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

@@ -111,6 +111,8 @@ var ResourcedMention = /*#__PURE__*/function (_React$PureComponent) {
         id: props.id,
         text: props.text || state.resolvedMentionName || '',
         isHighlighted: state.isHighlighted,
+        isDisabled: props.isDisabled,
+        disabledTooltip: props.disabledTooltip,
         accessLevel: props.accessLevel,
         localId: props.localId,
         onClick: props.onClick,

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

@@ -142,7 +142,8 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
       // `aria-describedby`.
       var isDisabledChip = mentionType === MentionType.DISABLED;
       var disabledA11yProps = isDisabledChip ? _objectSpread({
-        'aria-disabled': true
+        'aria-disabled': true,
+        tabIndex: 0
       }, disabledTooltip ? {
         'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
       } : {}) : {};

package/dist/esm/components/Mention/mention-style.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { MentionType } from '../../types';
+export var mentionStyle = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MentionType.SELF, {
+  background: "var(--ds-background-brand-bold, #1868DB)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-inverse, #FFFFFF)",
+  hoveredBackground: "var(--ds-background-brand-bold-hovered, #1558BC)",
+  pressedBackground: "var(--ds-background-brand-bold-pressed, #144794)"
+}), MentionType.RESTRICTED, {
+  background: 'transparent',
+  borderColor: "var(--ds-border-bold, #7D818A)",
+  text: "var(--ds-text, #292A2E)",
+  hoveredBackground: 'transparent',
+  pressedBackground: 'transparent'
+}), MentionType.DEFAULT, {
+  background: "var(--ds-background-neutral, #0515240F)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-subtle, #505258)",
+  hoveredBackground: "var(--ds-background-neutral-hovered, #0B120E24)",
+  pressedBackground: "var(--ds-background-neutral-pressed, #080F214A)"
+}), MentionType.DISABLED, {
+  background: "var(--ds-background-disabled, #0515240F)",
+  borderColor: 'transparent',
+  text: "var(--ds-text-disabled, #080F214A)",
+  // Disabled chips do not change on hover / press.
+  hoveredBackground: "var(--ds-background-disabled, #0515240F)",
+  pressedBackground: "var(--ds-background-disabled, #0515240F)"
+});

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

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

@@ -1,5 +1,5 @@
-import { MentionType } from '../../types';
 import { type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+import type { MentionType } from '../../types';
 export interface PrimitiveMentionProps extends HTMLAttributes<HTMLSpanElement> {
     mentionType: MentionType;
 }

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

@@ -3,7 +3,9 @@ import { type MentionProvider } from '../../api/MentionResource';
 import { type MentionEventHandler } from '../../types';
 export interface Props {
     accessLevel?: string;
+    disabledTooltip?: string;
     id: string;
+    isDisabled?: boolean;
     localId?: string;
     mentionProvider?: Promise<MentionProvider>;
     onClick?: MentionEventHandler;

package/dist/types/components/Mention/mention-style.d.ts

@@ -0,0 +1,10 @@
+import { MentionType } from '../../types';
+type MentionStyleEntry = {
+    background: string;
+    borderColor: string;
+    hoveredBackground: string;
+    pressedBackground: string;
+    text: string;
+};
+export declare const mentionStyle: Record<MentionType, MentionStyleEntry>;
+export {};

package/package.json

@@ -117,5 +117,5 @@
 		}
 	},
 	"types": "dist/types/index.d.ts",
-	"version": "27.5.2"
+	"version": "27.6.0"
 }