@atlaskit/editor-plugin-mentions 13.2.0 → 13.3.1

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # @atlaskit/editor-plugin-mentions
 
+## 13.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.3.0
+
+### Minor Changes
+
+- [`971e92e232624`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/971e92e232624) -
+  Added a new `DISABLED` visual variant for mention chips so rendering surfaces (such as the editor
+  mentions plugin) can render a chip in a non-interactive disabled state with an explanatory
+  tooltip. Includes optional `MentionProvider` hooks that let consumers drive the disabled state
+  reactively and observe mention deletions.
+
+  **`@atlaskit/mention`**
+  - New `MentionType.DISABLED` enum value and matching style on `PrimitiveMention`.
+  - New optional `isDisabled` and `disabledTooltip` props on the React `<Mention>` component. When
+    `isDisabled` is set the chip becomes non-clickable, exposes `aria-disabled="true"`, remains
+    keyboard-focusable (`tabindex="0"`), and — when `disabledTooltip` is also set — is wrapped in an
+    ADS `<Tooltip>` whose content is mirrored into `aria-label` for screen readers.
+  - New `MentionDisabledState` (`{ disabled: boolean; tooltip?: string }`) and
+    `MentionDisabledStateInput` (`{ id: string }`) types, re-exported from `@atlaskit/mention` and
+    `@atlaskit/mention/resource`.
+  - New optional `MentionResource` config option `getMentionDisabledState` (forwarded by
+    `ContextMentionResource`) that surfaces through three new optional methods on the
+    `MentionProvider` interface:
+    - `getMentionDisabledState?(mention)` — predicate the editor calls to determine whether a chip
+      should render disabled.
+    - `subscribeToDisabledStateChanges?(listener)` — lets the editor re-evaluate the predicate when
+      the consumer's inputs change.
+    - `notifyMentionDestroyed?(mention)` — lets the consumer observe chip removals (e.g. to update
+      its source of truth).
+
+    All three methods are optional so existing `MentionProvider` implementations continue to compile
+    and behave identically.
+
+  **`@atlaskit/editor-plugin-mentions` + `@atlaskit/editor-core`**
+  - The mention `NodeView` now reads `MentionProvider.getMentionDisabledState?.({ id })` on every
+    state update and re-evaluates whenever `subscribeToDisabledStateChanges` notifies. When the
+    predicate returns `{ disabled: true }` the chip gets a new `.mention-disabled` class,
+    `aria-disabled="true"`, and an ADS `<Tooltip>` (anchored to the chip via `portalProviderAPI`)
+    carrying the `tooltip` text. The chip remains keyboard-focusable.
+  - The mention `NodeView.destroy()` calls `notifyMentionDestroyed?.({ id })` on the subscribed
+    provider so consumers can react to chip removals without depending on the editor's `onChange`.
+  - Added a matching `.editor-mention-primitive.mention-disabled` style in `@atlaskit/editor-core`
+    so the new class renders correctly inside the editor content container.
+  - Providers that don't implement the new optional methods are entirely unaffected.
+
+  **`@atlassian/conversation-assistant`, `@atlassian/conversation-assistant-widget` (chat store)**
+  - New `addSelectedAgentId({ conversationId, agentId })` action — append-only, no-dedup push onto
+    the conversation's `selectedAgentIds` history. Each call adds exactly one entry; duplicates are
+    preserved so the history is a 1-to-1 log of every agent chip currently in the editor.
+  - New `removeSelectedAgentId({ conversationId, agentId })` action — removes the **rightmost**
+    occurrence of an id (preserving order of other entries) for use when a single agent chip is
+    deleted from the editor.
+  - `setSelectedAgentIds` retains its wholesale-replace semantics (unchanged externally).
+  - The picker callback in `chat-input-refresh` is now wired to `addSelectedAgentId`; chip-deletion
+    is wired to `removeSelectedAgentId`. The active agent is always `selectedAgentIds.at(-1)`.
+
+  **`@atlassian/conversation-assistant-chat-prompt-input`**
+  - `useChatMentionResource` accepts new options `getSelectedAgentIds`, `disabledAgentTooltip`, and
+    `onAgentMentionDestroyed` that wire the new `MentionProvider` capabilities described above.
+  - `withAgentSupport` extended with the same options, plus a `notifyMentionDestroyed`
+    implementation that forwards to the consumer when a known agent chip is destroyed (sourced from
+    the editor `NodeView` rather than from `onChange`, which is not reliably called on every chat
+    surface).
+  - `<RovoChatPromptInput>` exposes new optional `selectedAgentIds`, `disabledAgentTooltip`, and
+    `onAgentMentionDeleted` props for consumers that want to drive the disabled-agent chip state
+    from their own store.
+
+  **`@atlassian/conversation-assistant-store`**
+  - JSDoc on the `selectedAgentIds` conversation field updated to document the new append-only /
+    rightmost-remove semantics and the canonical read pattern (`.at(-1)` for the active agent). No
+    runtime or type-shape change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/disabledTooltipRenderer.compiled.css

@@ -0,0 +1 @@
+._1e0cglyw{display:none}

package/dist/cjs/nodeviews/disabledTooltipRenderer.js

@@ -0,0 +1,193 @@
+/* disabledTooltipRenderer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disabledTooltipRenderer = void 0;
+require("./disabledTooltipRenderer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _v = _interopRequireDefault(require("uuid/v4"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
+var styles = {
+  hiddenTrigger: "_1e0cglyw"
+};
+
+/**
+ * ADS `<Tooltip>` hands us a ref via its render-prop child. That ref may be
+ * either a callback ref or a mutable ref object — React supports both shapes
+ * and ADS's typing keeps both possible. This helper assigns the supplied
+ * element to whichever ref shape was provided so the tooltip ends up using
+ * the chip's bounding box for positioning and its DOM for trigger events.
+ */
+var assignRef = function assignRef(ref, element) {
+  if (typeof ref === 'function') {
+    ref(element);
+  } else if (ref) {
+    ref.current = element;
+  }
+};
+
+/**
+ * Names of the React-style trigger-prop handlers we forward from ADS
+ * `<Tooltip>` onto the chip element.
+ */
+
+/**
+ * Maps each React-style trigger-prop handler ADS `<Tooltip>` hands us in its
+ * render-prop callback to the DOM event name we attach to the chip via
+ * `bind-event-listener`. The chip lives in the ProseMirror document and is
+ * not a React child of the tooltip, so we have to bridge React handlers to
+ * native event listeners ourselves.
+ *
+ * Names are listed in the same order ADS internally registers them.
+ */
+var TRIGGER_EVENT_MAP = [['onMouseOver', 'mouseover'], ['onMouseOut', 'mouseout'], ['onMouseMove', 'mousemove'], ['onMouseDown', 'mousedown'], ['onFocus', 'focusin'], ['onBlur', 'focusout']];
+
+/**
+ * Anchors an ADS `<Tooltip>` to a ProseMirror chip element that is **not** a
+ * React child of the tooltip. The chip itself stays in the PM document; this
+ * renderer mounts an always-present React subtree via `portalProviderAPI` whose
+ * sole job is to host the tooltip and forward the ADS-provided trigger ref +
+ * event handlers onto the chip.
+ *
+ * The forwarding is deliberate: ADS `<Tooltip>` expects to attach its hover /
+ * focus / blur listeners to its render-prop child, but our render-prop child
+ * is a `display: none` placeholder span that no real event can reach. We bridge
+ * those listeners to the chip via `addEventListener` so the tooltip opens and
+ * closes in response to the user actually interacting with the chip — keyboard
+ * focus, mouse hover, screen-reader focus, the lot.
+ */
+
+/**
+ * Hook that mirrors ADS Tooltip's React trigger props onto a DOM element
+ * which is not a React child of the tooltip. Re-attaches whenever ADS hands
+ * us a fresh set of props (which happens on every render of the render-prop
+ * child) and cleans up on unmount.
+ *
+ * We use `bind-event-listener`'s `bindAll` rather than raw
+ * `addEventListener` / `removeEventListener` calls so the lifetime of every
+ * subscription is paired with a single `UnbindFn` — the AFM-mandated pattern
+ * for keeping listener bookkeeping leak-free.
+ */
+var useBridgedTriggerListeners = function useBridgedTriggerListeners(chip, triggerProps) {
+  (0, _react.useEffect)(function () {
+    // Build the bindAll bindings array out of only the handlers ADS actually
+    // supplied. Each React handler is wrapped in a thin adapter so the
+    // listener signature matches the native `EventListener` shape; ADS
+    // handlers ignore the synthetic-event-only fields they don't use
+    // (target, currentTarget), so passing the raw DOM event through
+    // `unknown` is safe in practice.
+    var bindings = TRIGGER_EVENT_MAP.flatMap(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        propName = _ref2[0],
+        eventName = _ref2[1];
+      var handler = triggerProps[propName];
+      if (!handler) {
+        return [];
+      }
+      return [{
+        type: eventName,
+        listener: function listener(event) {
+          handler(event);
+        }
+      }];
+    });
+    if (bindings.length === 0) {
+      return;
+    }
+    var unbind = (0, _bindEventListener.bindAll)(chip, bindings);
+    return unbind;
+  }, [chip, triggerProps]);
+};
+var AnchoredTooltip = function AnchoredTooltip(_ref3) {
+  var subscribe = _ref3.subscribe,
+    getInitialTooltip = _ref3.getInitialTooltip,
+    referenceElement = _ref3.referenceElement;
+  var _useState = (0, _react.useState)(getInitialTooltip),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tooltip = _useState2[0],
+    setTooltipState = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return subscribe(setTooltipState);
+  }, [subscribe]);
+  if (!tooltip) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: tooltip,
+    position: "top"
+  }, function (tooltipProps) {
+    return /*#__PURE__*/_react.default.createElement(TriggerBridge, {
+      referenceElement: referenceElement,
+      tooltipProps: tooltipProps
+    });
+  });
+};
+
+/**
+ * Render-prop child for ADS `<Tooltip>`. The element it returns is a
+ * `display: none` placeholder that satisfies the render-prop API; the
+ * real trigger surface is the chip in the PM document, which receives
+ * both the ADS ref and the bridged event listeners via the side-effects
+ * declared on this component.
+ */
+var TriggerBridge = function TriggerBridge(_ref4) {
+  var referenceElement = _ref4.referenceElement,
+    tooltipProps = _ref4.tooltipProps;
+  useBridgedTriggerListeners(referenceElement, tooltipProps);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    ref: function ref() {
+      return assignRef(tooltipProps.ref, referenceElement);
+    },
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([styles.hiddenTrigger])
+  });
+};
+var disabledTooltipRenderer = exports.disabledTooltipRenderer = function disabledTooltipRenderer(_ref5) {
+  var chipElement = _ref5.chipElement,
+    portalProviderAPI = _ref5.portalProviderAPI;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
+  var key = (0, _v.default)();
+  var currentTooltip;
+  var listeners = new Set();
+  var broadcast = function broadcast() {
+    listeners.forEach(function (listener) {
+      return listener(currentTooltip);
+    });
+  };
+  var getInitialTooltip = function getInitialTooltip() {
+    return currentTooltip;
+  };
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      listeners.delete(listener);
+    };
+  };
+  var renderElement = function renderElement() {
+    return /*#__PURE__*/_react.default.createElement(AnchoredTooltip, {
+      referenceElement: chipElement,
+      getInitialTooltip: getInitialTooltip,
+      subscribe: subscribe
+    });
+  };
+  portalProviderAPI.render(renderElement, chipElement, key);
+  return {
+    setTooltip: function setTooltip(text) {
+      currentTooltip = text;
+      broadcast();
+    },
+    destroy: function destroy() {
+      portalProviderAPI.remove(key);
+      listeners.clear();
+    }
+  };
+};

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -17,6 +17,7 @@ var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _disabledTooltipRenderer = require("./disabledTooltipRenderer");
 var _profileCardRenderer2 = require("./profileCardRenderer");
 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; }
@@ -88,7 +89,10 @@ var handleProviderName = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var getNewState = function getNewState(isHighlighted, isRestricted) {
+var getNewState = function getNewState(isHighlighted, isRestricted, isDisabled) {
+  if (isDisabled) {
+    return 'disabled';
+  }
   if (isHighlighted) {
     return 'self';
   }
@@ -103,7 +107,6 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       _api$mention$sharedSt,
       _this = this;
     (0, _classCallCheck2.default)(this, MentionNodeView);
-    (0, _defineProperty2.default)(this, "state", 'default');
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI;
@@ -119,9 +122,11 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     var _ref2 = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {},
       mentionProvider = _ref2.mentionProvider;
     this.updateState(mentionProvider);
+    this.subscribeToProviderDisabledStateChanges(mentionProvider);
     this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(function (_ref3) {
       var nextSharedState = _ref3.nextSharedState;
       _this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+      _this.subscribeToProviderDisabledStateChanges(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
     });
     var _profileCardRenderer = (0, _profileCardRenderer2.profileCardRenderer)({
         dom: dom,
@@ -147,10 +152,93 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(MentionNodeView, [{
     key: "setClassList",
-    value: function setClassList(state) {
-      var _this$mentionPrimitiv, _this$mentionPrimitiv2;
+    value: function setClassList(state, disabledTooltip) {
+      var _this$mentionPrimitiv, _this$mentionPrimitiv2, _this$mentionPrimitiv3;
       (_this$mentionPrimitiv = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv === void 0 || _this$mentionPrimitiv.classList.toggle('mention-self', state === 'self');
       (_this$mentionPrimitiv2 = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv2 === void 0 || _this$mentionPrimitiv2.classList.toggle('mention-restricted', state === 'restricted');
+      (_this$mentionPrimitiv3 = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv3 === void 0 || _this$mentionPrimitiv3.classList.toggle('mention-disabled', state === 'disabled');
+      // Mirror the React `<Mention>` a11y behaviour: when the chip is
+      // disabled, expose `aria-disabled` so assistive tech announces it as
+      // such. Also surface the tooltip text via `aria-label` so screen-reader
+      // users hear *why* the chip is disabled, matching the React `<Mention>`
+      // behaviour at `Mention/index.tsx` line 152.
+      if (this.domElement) {
+        if (state === 'disabled') {
+          this.domElement.setAttribute('aria-disabled', 'true');
+          if (disabledTooltip) {
+            var text = this.node.attrs.text || '@...';
+            this.domElement.setAttribute('aria-label', "".concat(text, " \u2014 ").concat(disabledTooltip));
+          }
+        } else {
+          this.domElement.removeAttribute('aria-disabled');
+          this.domElement.removeAttribute('aria-label');
+        }
+      }
+    }
+  }, {
+    key: "getDisabledState",
+    value: function getDisabledState(mentionProvider) {
+      var _mentionProvider$getM;
+      var input = {
+        id: this.node.attrs.id
+      };
+      return mentionProvider === null || mentionProvider === void 0 || (_mentionProvider$getM = mentionProvider.getMentionDisabledState) === null || _mentionProvider$getM === void 0 ? void 0 : _mentionProvider$getM.call(mentionProvider, input);
+    }
+
+    /**
+     * Subscribes this NodeView to disabled-state-change notifications on the
+     * supplied provider so already-rendered chips can re-evaluate themselves
+     * when the consumer's predicate inputs change (e.g. the active agent
+     * selection toggling in Rovo Chat). No-op for providers that don't
+     * implement `subscribeToDisabledStateChanges`.
+     *
+     * Idempotent: re-calling with the same provider keeps the existing
+     * subscription; passing a different provider tears the old subscription
+     * down before attaching the new one. Safe to call from the sharedState
+     * `onChange` handler when the editor swaps providers.
+     */
+  }, {
+    key: "subscribeToProviderDisabledStateChanges",
+    value: function subscribeToProviderDisabledStateChanges(mentionProvider) {
+      var _this$unsubscribeFrom,
+        _this2 = this;
+      if (this.subscribedProvider === mentionProvider) {
+        return;
+      }
+      (_this$unsubscribeFrom = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom === void 0 || _this$unsubscribeFrom.call(this);
+      this.unsubscribeFromDisabledStateChanges = undefined;
+      this.subscribedProvider = mentionProvider;
+      if (!(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.subscribeToDisabledStateChanges)) {
+        return;
+      }
+      this.unsubscribeFromDisabledStateChanges = mentionProvider.subscribeToDisabledStateChanges(function () {
+        _this2.updateState(_this2.subscribedProvider);
+      });
+    }
+  }, {
+    key: "syncDisabledTooltip",
+    value: function syncDisabledTooltip(disabledState) {
+      // Capture the tooltip text into a local so the rest of the method can
+      // branch on a truthy string instead of re-asserting non-null fields
+      // off of `disabledState`.
+      var tooltipText = disabledState !== null && disabledState !== void 0 && disabledState.disabled ? disabledState.tooltip : undefined;
+      var chip = this.mentionPrimitiveElement;
+      var portalProviderAPI = this.config.portalProviderAPI;
+      if (!chip || !portalProviderAPI) {
+        return;
+      }
+      if (tooltipText) {
+        if (!this.disabledTooltip) {
+          this.disabledTooltip = (0, _disabledTooltipRenderer.disabledTooltipRenderer)({
+            chipElement: chip,
+            portalProviderAPI: portalProviderAPI
+          });
+        }
+        this.disabledTooltip.setTooltip(tooltipText);
+      } else if (this.disabledTooltip) {
+        this.disabledTooltip.destroy();
+        this.disabledTooltip = undefined;
+      }
     }
   }, {
     key: "setTextContent",
@@ -180,24 +268,34 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     value: function () {
       var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
         var _mentionProvider$shou2, _this$config$options2;
-        var isHighlighted, newState, name;
+        var isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               isHighlighted = (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_mentions', 'isEnabled', true) ? this.shouldHighlightMention(mentionProvider) : (_mentionProvider$shou2 = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
                 id: this.node.attrs.id
               })) !== null && _mentionProvider$shou2 !== void 0 ? _mentionProvider$shou2 : false;
-              newState = getNewState(isHighlighted, (0, _types.isRestricted)(this.node.attrs.accessLevel));
-              if (newState !== this.state) {
-                this.setClassList(newState);
-                this.state = newState;
-              }
+              disabledState = this.getDisabledState(mentionProvider);
+              isDisabled = !!(disabledState !== null && disabledState !== void 0 && disabledState.disabled);
+              newState = getNewState(isHighlighted, (0, _types.isRestricted)(this.node.attrs.accessLevel), isDisabled);
+              disabledTooltip = disabledState !== null && disabledState !== void 0 && disabledState.disabled ? disabledState.tooltip : undefined; // `setClassList` always runs so the aria-label (which depends on the
+              // tooltip text) stays in sync when the tooltip reason changes while
+              // the chip remains disabled. State-change-only writes would leave a
+              // stale aria-label after a tooltip-text-only update.
+              this.setClassList(newState, disabledTooltip);
+              // Tooltip wiring runs every update (not just on state change) so that
+              // the tooltip text stays in sync if the disabled reason changes while
+              // the chip is already disabled.
+              this.syncDisabledTooltip(disabledState);
               _context2.next = 1;
               return handleProviderName(mentionProvider, this.node);
             case 1:
               name = _context2.sent;
               this.setTextContent(name);
-              if (name && this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider) {
+              // Only overwrite the disabled-state aria-label with the name-based one
+              // when the chip is NOT disabled; otherwise the disabled reason set in
+              // `setClassList` would be silently clobbered, regressing a11y.
+              if (name && this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider && newState !== 'disabled') {
                 this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
               }
             case 2:
@@ -236,9 +334,27 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$cleanup, _this$destroyProfileC;
+      var _this$cleanup, _this$destroyProfileC, _this$disabledTooltip, _this$unsubscribeFrom2;
+      // Surface the destruction to the provider before tearing down so the
+      // chat layer can react (e.g. drop the agent id from `selectedAgentIds`).
+      // This is the lowest-level deletion signal — fires for backspace,
+      // select-and-delete, programmatic doc replaces, and editor unmount.
+      try {
+        var _this$subscribedProvi, _this$subscribedProvi2;
+        (_this$subscribedProvi = this.subscribedProvider) === null || _this$subscribedProvi === void 0 || (_this$subscribedProvi2 = _this$subscribedProvi.notifyMentionDestroyed) === null || _this$subscribedProvi2 === void 0 || _this$subscribedProvi2.call(_this$subscribedProvi, {
+          id: this.node.attrs.id
+        });
+      } catch (_error) {
+        // Defensive: never let consumer-side notification errors prevent
+        // the NodeView from cleaning up its own resources below.
+      }
       (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
       (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 || _this$destroyProfileC.call(this);
+      (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 || _this$disabledTooltip.destroy();
+      this.disabledTooltip = undefined;
+      (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 || _this$unsubscribeFrom2.call(this);
+      this.unsubscribeFromDisabledStateChanges = undefined;
+      this.subscribedProvider = undefined;
     }
   }, {
     key: "deselectNode",

package/dist/cjs/pm-plugins/main.js

@@ -32,7 +32,7 @@ var ACTIONS = exports.ACTIONS = {
 var AGENT_USER_TYPES = new Set(['APP', 'AGENT']);
 var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "13.1.1";
+var PACKAGE_VERSION = "13.3.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/es2019/nodeviews/disabledTooltipRenderer.compiled.css

@@ -0,0 +1 @@
+._1e0cglyw{display:none}

package/dist/es2019/nodeviews/disabledTooltipRenderer.js

@@ -0,0 +1,168 @@
+/* disabledTooltipRenderer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./disabledTooltipRenderer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useState } from 'react';
+import { bindAll } from 'bind-event-listener';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
+import uuid from 'uuid/v4';
+import Tooltip from '@atlaskit/tooltip';
+const styles = {
+  hiddenTrigger: "_1e0cglyw"
+};
+
+/**
+ * ADS `<Tooltip>` hands us a ref via its render-prop child. That ref may be
+ * either a callback ref or a mutable ref object — React supports both shapes
+ * and ADS's typing keeps both possible. This helper assigns the supplied
+ * element to whichever ref shape was provided so the tooltip ends up using
+ * the chip's bounding box for positioning and its DOM for trigger events.
+ */
+const assignRef = (ref, element) => {
+  if (typeof ref === 'function') {
+    ref(element);
+  } else if (ref) {
+    ref.current = element;
+  }
+};
+
+/**
+ * Names of the React-style trigger-prop handlers we forward from ADS
+ * `<Tooltip>` onto the chip element.
+ */
+
+/**
+ * Maps each React-style trigger-prop handler ADS `<Tooltip>` hands us in its
+ * render-prop callback to the DOM event name we attach to the chip via
+ * `bind-event-listener`. The chip lives in the ProseMirror document and is
+ * not a React child of the tooltip, so we have to bridge React handlers to
+ * native event listeners ourselves.
+ *
+ * Names are listed in the same order ADS internally registers them.
+ */
+const TRIGGER_EVENT_MAP = [['onMouseOver', 'mouseover'], ['onMouseOut', 'mouseout'], ['onMouseMove', 'mousemove'], ['onMouseDown', 'mousedown'], ['onFocus', 'focusin'], ['onBlur', 'focusout']];
+
+/**
+ * Anchors an ADS `<Tooltip>` to a ProseMirror chip element that is **not** a
+ * React child of the tooltip. The chip itself stays in the PM document; this
+ * renderer mounts an always-present React subtree via `portalProviderAPI` whose
+ * sole job is to host the tooltip and forward the ADS-provided trigger ref +
+ * event handlers onto the chip.
+ *
+ * The forwarding is deliberate: ADS `<Tooltip>` expects to attach its hover /
+ * focus / blur listeners to its render-prop child, but our render-prop child
+ * is a `display: none` placeholder span that no real event can reach. We bridge
+ * those listeners to the chip via `addEventListener` so the tooltip opens and
+ * closes in response to the user actually interacting with the chip — keyboard
+ * focus, mouse hover, screen-reader focus, the lot.
+ */
+
+/**
+ * Hook that mirrors ADS Tooltip's React trigger props onto a DOM element
+ * which is not a React child of the tooltip. Re-attaches whenever ADS hands
+ * us a fresh set of props (which happens on every render of the render-prop
+ * child) and cleans up on unmount.
+ *
+ * We use `bind-event-listener`'s `bindAll` rather than raw
+ * `addEventListener` / `removeEventListener` calls so the lifetime of every
+ * subscription is paired with a single `UnbindFn` — the AFM-mandated pattern
+ * for keeping listener bookkeeping leak-free.
+ */
+const useBridgedTriggerListeners = (chip, triggerProps) => {
+  useEffect(() => {
+    // Build the bindAll bindings array out of only the handlers ADS actually
+    // supplied. Each React handler is wrapped in a thin adapter so the
+    // listener signature matches the native `EventListener` shape; ADS
+    // handlers ignore the synthetic-event-only fields they don't use
+    // (target, currentTarget), so passing the raw DOM event through
+    // `unknown` is safe in practice.
+    const bindings = TRIGGER_EVENT_MAP.flatMap(([propName, eventName]) => {
+      const handler = triggerProps[propName];
+      if (!handler) {
+        return [];
+      }
+      return [{
+        type: eventName,
+        listener: event => {
+          handler(event);
+        }
+      }];
+    });
+    if (bindings.length === 0) {
+      return;
+    }
+    const unbind = bindAll(chip, bindings);
+    return unbind;
+  }, [chip, triggerProps]);
+};
+const AnchoredTooltip = ({
+  subscribe,
+  getInitialTooltip,
+  referenceElement
+}) => {
+  const [tooltip, setTooltipState] = useState(getInitialTooltip);
+  useEffect(() => subscribe(setTooltipState), [subscribe]);
+  if (!tooltip) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltip,
+    position: "top"
+  }, tooltipProps => /*#__PURE__*/React.createElement(TriggerBridge, {
+    referenceElement: referenceElement,
+    tooltipProps: tooltipProps
+  }));
+};
+
+/**
+ * Render-prop child for ADS `<Tooltip>`. The element it returns is a
+ * `display: none` placeholder that satisfies the render-prop API; the
+ * real trigger surface is the chip in the PM document, which receives
+ * both the ADS ref and the bridged event listeners via the side-effects
+ * declared on this component.
+ */
+const TriggerBridge = ({
+  referenceElement,
+  tooltipProps
+}) => {
+  useBridgedTriggerListeners(referenceElement, tooltipProps);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: () => assignRef(tooltipProps.ref, referenceElement),
+    "aria-hidden": "true",
+    className: ax([styles.hiddenTrigger])
+  });
+};
+export const disabledTooltipRenderer = ({
+  chipElement,
+  portalProviderAPI
+}) => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
+  const key = uuid();
+  let currentTooltip;
+  const listeners = new Set();
+  const broadcast = () => {
+    listeners.forEach(listener => listener(currentTooltip));
+  };
+  const getInitialTooltip = () => currentTooltip;
+  const subscribe = listener => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const renderElement = () => /*#__PURE__*/React.createElement(AnchoredTooltip, {
+    referenceElement: chipElement,
+    getInitialTooltip: getInitialTooltip,
+    subscribe: subscribe
+  });
+  portalProviderAPI.render(renderElement, chipElement, key);
+  return {
+    setTooltip(text) {
+      currentTooltip = text;
+      broadcast();
+    },
+    destroy() {
+      portalProviderAPI.remove(key);
+      listeners.clear();
+    }
+  };
+};