@atlaskit/editor-plugin-mentions 13.1.1 → 13.3.0

package/dist/esm/nodeviews/mentionNodeView.js

@@ -12,6 +12,7 @@ import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention
 import { isRestricted } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { disabledTooltipRenderer } from './disabledTooltipRenderer';
 import { profileCardRenderer } from './profileCardRenderer';
 var primitiveClassName = 'editor-mention-primitive';
 // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
@@ -81,7 +82,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';
   }
@@ -96,7 +100,6 @@ export var MentionNodeView = /*#__PURE__*/function () {
       _api$mention$sharedSt,
       _this = this;
     _classCallCheck(this, MentionNodeView);
-    _defineProperty(this, "state", 'default');
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI;
@@ -112,9 +115,11 @@ export var 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 = profileCardRenderer({
         dom: dom,
@@ -140,10 +145,93 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }
   return _createClass(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 = disabledTooltipRenderer({
+            chipElement: chip,
+            portalProviderAPI: portalProviderAPI
+          });
+        }
+        this.disabledTooltip.setTooltip(tooltipText);
+      } else if (this.disabledTooltip) {
+        this.disabledTooltip.destroy();
+        this.disabledTooltip = undefined;
+      }
     }
   }, {
     key: "setTextContent",
@@ -173,24 +261,34 @@ export var MentionNodeView = /*#__PURE__*/function () {
     value: function () {
       var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
         var _mentionProvider$shou2, _this$config$options2;
-        var isHighlighted, newState, name;
+        var isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               isHighlighted = 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, 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, 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:
@@ -229,9 +327,27 @@ export var 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/esm/pm-plugins/main.js

@@ -24,7 +24,7 @@ export var 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.0";
+var PACKAGE_VERSION = "13.2.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/types/mentionsPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin, EditorCommand, TypeAheadSectionTitleUpdate } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -16,10 +16,12 @@ export type MentionActionAnnounceMentionsInsertion = (mentionIds: {
     type: 'added' | 'deleted';
 }[]) => void;
 export type MentionActionSetProvider = (provider: Promise<MentionProvider>) => Promise<boolean>;
+export type MentionActionUpdateSectionTitle = (props: TypeAheadSectionTitleUpdate) => boolean;
 export type MentionActions = {
     announceMentionsInsertion: MentionActionAnnounceMentionsInsertion;
     openTypeAhead: MentionActionOpenTypeAhead;
     setProvider: MentionActionSetProvider;
+    updateSectionTitle: MentionActionUpdateSectionTitle;
 };
 export type MentionPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,

package/dist/types/nodeviews/disabledTooltipRenderer.d.ts

@@ -0,0 +1,25 @@
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+/**
+ * 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.
+ */
+export interface DisabledTooltipController {
+    /** Tear down the React subtree. */
+    destroy: () => void;
+    /** Update the tooltip text. Passing `undefined` hides the tooltip. */
+    setTooltip: (text: string | undefined) => void;
+}
+export declare const disabledTooltipRenderer: ({ chipElement, portalProviderAPI, }: {
+    chipElement: HTMLElement;
+    portalProviderAPI: PortalProviderAPI;
+}) => DisabledTooltipController;

package/dist/types/nodeviews/mentionNodeView.d.ts

@@ -10,7 +10,6 @@ interface MentionNodeViewProps {
     portalProviderAPI: PortalProviderAPI;
 }
 export declare class MentionNodeView implements NodeView {
-    private state;
     dom: Node;
     domElement: HTMLElement | undefined;
     contentDOM: HTMLElement | undefined;
@@ -20,8 +19,26 @@ export declare class MentionNodeView implements NodeView {
     private destroyProfileCard;
     private removeProfileCard;
     private mentionPrimitiveElement;
+    private disabledTooltip;
+    private unsubscribeFromDisabledStateChanges;
+    private subscribedProvider;
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
+    private getDisabledState;
+    /**
+     * 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.
+     */
+    private subscribeToProviderDisabledStateChanges;
+    private syncDisabledTooltip;
     private setTextContent;
     private shouldHighlightMention;
     private updateState;

package/dist/types-ts4.5/mentionsPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin, EditorCommand, TypeAheadSectionTitleUpdate } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -16,10 +16,12 @@ export type MentionActionAnnounceMentionsInsertion = (mentionIds: {
     type: 'added' | 'deleted';
 }[]) => void;
 export type MentionActionSetProvider = (provider: Promise<MentionProvider>) => Promise<boolean>;
+export type MentionActionUpdateSectionTitle = (props: TypeAheadSectionTitleUpdate) => boolean;
 export type MentionActions = {
     announceMentionsInsertion: MentionActionAnnounceMentionsInsertion;
     openTypeAhead: MentionActionOpenTypeAhead;
     setProvider: MentionActionSetProvider;
+    updateSectionTitle: MentionActionUpdateSectionTitle;
 };
 export type MentionPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,

package/dist/types-ts4.5/nodeviews/disabledTooltipRenderer.d.ts

@@ -0,0 +1,25 @@
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+/**
+ * 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.
+ */
+export interface DisabledTooltipController {
+    /** Tear down the React subtree. */
+    destroy: () => void;
+    /** Update the tooltip text. Passing `undefined` hides the tooltip. */
+    setTooltip: (text: string | undefined) => void;
+}
+export declare const disabledTooltipRenderer: ({ chipElement, portalProviderAPI, }: {
+    chipElement: HTMLElement;
+    portalProviderAPI: PortalProviderAPI;
+}) => DisabledTooltipController;

package/dist/types-ts4.5/nodeviews/mentionNodeView.d.ts

@@ -10,7 +10,6 @@ interface MentionNodeViewProps {
     portalProviderAPI: PortalProviderAPI;
 }
 export declare class MentionNodeView implements NodeView {
-    private state;
     dom: Node;
     domElement: HTMLElement | undefined;
     contentDOM: HTMLElement | undefined;
@@ -20,8 +19,26 @@ export declare class MentionNodeView implements NodeView {
     private destroyProfileCard;
     private removeProfileCard;
     private mentionPrimitiveElement;
+    private disabledTooltip;
+    private unsubscribeFromDisabledStateChanges;
+    private subscribedProvider;
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
+    private getDisabledState;
+    /**
+     * 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.
+     */
+    private subscribeToProviderDisabledStateChanges;
+    private syncDisabledTooltip;
     private setTextContent;
     private shouldHighlightMention;
     private updateState;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "13.1.1",
+	"version": "13.3.0",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,12 +35,12 @@
 		"@atlaskit/editor-plugin-base": "^12.0.0",
 		"@atlaskit/editor-plugin-context-identifier": "^11.0.0",
 		"@atlaskit/editor-plugin-selection": "^11.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^11.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/insm": "^0.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/mention": "^26.1.0",
+		"@atlaskit/mention": "^26.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/portal": "^5.5.0",
@@ -48,8 +48,9 @@
 		"@atlaskit/profilecard": "^25.8.0",
 		"@atlaskit/teams-app-config": "^1.12.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
+		"@atlaskit/tmp-editor-statsig": "^89.1.0",
 		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/user-picker": "^12.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -59,7 +60,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.2.0",
+		"@atlaskit/editor-common": "^115.5.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"