@atlaskit/mention 27.17.0 → 27.18.0

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

@@ -1,11 +1,16 @@
-/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MentionInternal = exports.ANALYTICS_HOVER_DELAY = void 0;
+exports.ANALYTICS_HOVER_DELAY = void 0;
+Object.defineProperty(exports, "MentionInternal", {
+  enumerable: true,
+  get: function get() {
+    return _MentionInternal.MentionInternal;
+  }
+});
 Object.defineProperty(exports, "UNKNOWN_USER_ID", {
   enumerable: true,
   get: function get() {
@@ -13,261 +18,42 @@ Object.defineProperty(exports, "UNKNOWN_USER_ID", {
   }
 });
 exports.default = void 0;
-require("./index.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
-var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
-var _PrimitiveMention = _interopRequireDefault(require("./PrimitiveMention"));
-var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
-var _DisabledMentionTooltip = _interopRequireDefault(require("../DisabledMentionTooltip"));
-var _constants = require("../../_constants");
-var _types = require("../../types");
-var _analytics = require("../../util/analytics");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
-var _ufo = require("@atlaskit/ufo");
-var _i18n = require("../../util/i18n");
-var _ufoExperiences = require("./ufoExperiences");
-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; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-deprecated-imports, @typescript-eslint/ban-types -- Preserve existing mention implementation while focus-ring usage is reviewed separately. */
+var _fireAnalyticsMentionEvent = require("../../util/fire-analytics-mention-event");
+var _MentionInternal = require("./MentionInternal");
+var _constants = require("../../_constants");
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+/* eslint-disable @atlaskit/design-system/no-deprecated-imports, @typescript-eslint/ban-types -- Preserve existing mention implementation while focus-ring usage is reviewed separately. */
+
 var ANALYTICS_HOVER_DELAY = exports.ANALYTICS_HOVER_DELAY = 1000;
-var avatarStyles = null;
-var avatarFallbackStyles = null;
-var avatarImageStyles = null;
-var agentAvatarStyles = null;
-var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
-  function MentionInternal(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, MentionInternal);
-    _this = _callSuper(this, MentionInternal, [props]);
-    (0, _defineProperty2.default)(_this, "state", {
-      hasAvatarError: false
-    });
-    (0, _defineProperty2.default)(_this, "handleAvatarError", function () {
-      _this.setState({
-        hasAvatarError: true
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleOnClick", function (e) {
-      var _this$props = _this.props,
-        id = _this$props.id,
-        text = _this$props.text,
-        onClick = _this$props.onClick,
-        isDisabled = _this$props.isDisabled;
-      if (isDisabled) {
-        // Disabled chips do not invoke their click handler.
-        return;
-      }
-      if (onClick) {
-        onClick(id, text, e);
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleOnMouseEnter", function (e) {
-      var _this$props2 = _this.props,
-        id = _this$props2.id,
-        text = _this$props2.text,
-        onMouseEnter = _this$props2.onMouseEnter,
-        onHover = _this$props2.onHover;
-      if (onMouseEnter) {
-        onMouseEnter(id, text, e);
-      }
-      _this.hoverTimeout = window.setTimeout(function () {
-        if (onHover) {
-          onHover();
-        }
-        _this.hoverTimeout = undefined;
-      }, ANALYTICS_HOVER_DELAY);
-    });
-    (0, _defineProperty2.default)(_this, "handleOnMouseLeave", function (e) {
-      var _this$props3 = _this.props,
-        id = _this$props3.id,
-        text = _this$props3.text,
-        onMouseLeave = _this$props3.onMouseLeave;
-      if (onMouseLeave) {
-        onMouseLeave(id, text, e);
-      }
-      if (_this.hoverTimeout) {
-        clearTimeout(_this.hoverTimeout);
-      }
-    });
-    (0, _defineProperty2.default)(_this, "getMentionType", function () {
-      var _this$props4 = _this.props,
-        accessLevel = _this$props4.accessLevel,
-        isHighlighted = _this$props4.isHighlighted,
-        isDisabled = _this$props4.isDisabled;
-      if (isDisabled) {
-        return _types.MentionType.DISABLED;
-      }
-      if (isHighlighted) {
-        return _types.MentionType.SELF;
-      }
-      if ((0, _types.isRestricted)(accessLevel)) {
-        return _types.MentionType.RESTRICTED;
-      }
-      return _types.MentionType.DEFAULT;
-    });
-    _ufoExperiences.mentionRenderedUfoExperience.getInstance(props.id).start();
-    return _this;
-  }
-  (0, _inherits2.default)(MentionInternal, _React$PureComponent);
-  return (0, _createClass2.default)(MentionInternal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id).success();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.hoverTimeout) {
-        clearTimeout(this.hoverTimeout);
-      }
-      var ufoInstance = _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id);
-      if ([_ufo.UFOExperienceState['STARTED'], _ufo.UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
-        ufoInstance.abort();
-      }
-    }
-  }, {
-    key: "renderUnknownUserError",
-    value: function renderUnknownUserError(id) {
-      return /*#__PURE__*/_react.default.createElement(_i18n.UnknownUserError, {
-        values: {
-          userId: id.slice(-5)
-        }
-      }, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "@".concat(message));
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var handleAvatarError = this.handleAvatarError,
-        handleOnClick = this.handleOnClick,
-        handleOnMouseEnter = this.handleOnMouseEnter,
-        handleOnMouseLeave = this.handleOnMouseLeave,
-        props = this.props;
-      var appType = props.appType,
-        avatarUrl = props.avatarUrl,
-        text = props.text,
-        id = props.id,
-        accessLevel = props.accessLevel,
-        localId = props.localId,
-        disabledTooltip = props.disabledTooltip,
-        isAvatarImagePreShaped = props.isAvatarImagePreShaped,
-        renderAvatarSlot = props.renderAvatarSlot;
-      var mentionType = this.getMentionType();
-      var failedMention = text === "@".concat(_constants.UNKNOWN_USER_ID);
-      var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
-      var visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
-      var shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
-      var shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
-      var showRestrictedTooltip = mentionType === _types.MentionType.RESTRICTED;
-      var showDisabledTooltip = mentionType === _types.MentionType.DISABLED && !!disabledTooltip;
 
-      // A11y: when the chip is in the disabled visual state, expose
-      // `aria-disabled` so assistive tech announces it as such. The
-      // disabled-tooltip text is mirrored into `aria-label` so the
-      // announcement carries the reason even without portal-id wiring for
-      // `aria-describedby`.
-      var isDisabledChip = mentionType === _types.MentionType.DISABLED;
-      var disabledA11yProps = isDisabledChip ? _objectSpread({
-        'aria-disabled': true,
-        tabIndex: 0
-      }, disabledTooltip ? {
-        'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
-      } : {}) : {};
-      var mentionComponent = /*#__PURE__*/_react.default.createElement(_focusRing.default, null, /*#__PURE__*/_react.default.createElement(_PrimitiveMention.default, (0, _extends2.default)({
-        isAvatarVisible: showAvatarSlot,
-        mentionType: mentionType,
-        onClick: handleOnClick,
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        spellCheck: false,
-        "data-testid": "mention-".concat(id),
-        "data-mention-type": mentionType,
-        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
-      }, 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",
-        className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
-      }, shouldRenderAvatar ? /*#__PURE__*/_react.default.createElement("img", {
-        alt: "",
-        decoding: "async",
-        draggable: false,
-        height: 16,
-        loading: "lazy",
-        onError: handleAvatarError,
-        src: avatarUrl,
-        "data-testid": "mention-avatar",
-        width: 16,
-        className: (0, _runtime.ax)(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
-      }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/_react.default.createElement("span", null, visibleText || '...')) : text || '@...'));
-      var ssrPlaceholderProp = props.ssrPlaceholderId ? {
-        'data-ssr-placeholder': props.ssrPlaceholderId
-      } : {};
-      var wrappedMention = function () {
-        if (showRestrictedTooltip) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
-            fallback: mentionComponent
-          }, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
-            name: text
-          }, mentionComponent));
-        }
-        if (showDisabledTooltip) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
-            fallback: mentionComponent
-          }, /*#__PURE__*/_react.default.createElement(_DisabledMentionTooltip.default, {
-            tooltip: disabledTooltip
-          }, mentionComponent));
-        }
-        return mentionComponent;
-      }();
-      return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
-        id: id
-      }, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
-        id: localId,
-        "data-mention-id": id,
-        "data-local-id": localId,
-        "data-access-level": accessLevel,
-        spellCheck: false
-      }, ssrPlaceholderProp), /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, wrappedMention)));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.avatarUrl !== state.avatarUrl) {
-        return {
-          avatarUrl: props.avatarUrl,
-          hasAvatarError: false
-        };
-      }
-      return null;
-    }
-  }]);
-}(_react.default.PureComponent);
+/**
+ * @deprecated Use `import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants'` instead.
+ */
+
 var MentionWithAnalytics = (0, _withAnalyticsEvents.default)({
   onClick: function onClick(createEvent, props) {
     var id = props.id,
       text = props.text,
       accessLevel = props.accessLevel;
-    var event = (0, _analytics.fireAnalyticsMentionEvent)(createEvent)('mention', 'selected', text, id, accessLevel);
+    var event = (0, _fireAnalyticsMentionEvent.fireAnalyticsMentionEvent)(createEvent)('mention', 'selected', text, id, accessLevel);
     return event;
   },
   onHover: function onHover(createEvent, props) {
     var id = props.id,
       text = props.text,
       accessLevel = props.accessLevel;
-    var event = (0, _analytics.fireAnalyticsMentionEvent)(createEvent)('mention', 'hovered', text, id, accessLevel);
+    var event = (0, _fireAnalyticsMentionEvent.fireAnalyticsMentionEvent)(createEvent)('mention', 'hovered', text, id, accessLevel);
     return event;
   }
-})(MentionInternal);
+})(_MentionInternal.MentionInternal);
 var Mention = MentionWithAnalytics;
-var _default = exports.default = Mention;
+var _default = exports.default = Mention;
+/**
+ * @deprecated Use `import { MentionInternal } from '@atlaskit/mention/mention'` instead.
+ */

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

@@ -8,10 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.MentionAvatar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
-var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar/teams-avatar"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _types = require("../../types");
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar/teams-avatar"));
+var _isAppMention = require("../../is-app-mention");
+var _isTeamMention = require("../../is-team-mention");
 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); }
 var MentionAvatar = exports.MentionAvatar = function MentionAvatar(_ref) {
   var mention = _ref.mention,
@@ -22,7 +23,7 @@ var MentionAvatar = exports.MentionAvatar = function MentionAvatar(_ref) {
   var borderColor = selected ? "var(--ds-border, #0B120E24)" : undefined;
   var _ref2 = presence || {},
     status = _ref2.status;
-  if ((0, _types.isTeamMention)(mention)) {
+  if ((0, _isTeamMention.isTeamMention)(mention)) {
     return /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
       src: avatarUrl,
       size: "medium",
@@ -32,7 +33,7 @@ var MentionAvatar = exports.MentionAvatar = function MentionAvatar(_ref) {
 
   // Agent providers can request GraphQL `identityAccount { picture }` and pass it as
   // `avatarUrl`; this component only applies the hexagon agent shape.
-  var shouldRenderAgentMentionAvatar = (0, _types.isAppMention)(mention) && mention.appType === 'agent' && (0, _isExperimentEnabled.isExperimentEnabled)('rovo_chat_mention_agents');
+  var shouldRenderAgentMentionAvatar = (0, _isAppMention.isAppMention)(mention) && mention.appType === 'agent' && (0, _isExperimentEnabled.isExperimentEnabled)('rovo_chat_mention_agents');
   var avatarAppearance = shouldRenderAgentMentionAvatar ? 'hexagon' : (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_issue_view_comment_mentions') ? (0, _avatar.getAppearanceForAppType)(appType) : undefined;
   return /*#__PURE__*/_react.default.createElement(_avatar.default, {
     src: avatarUrl,

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

@@ -25,25 +25,26 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tag = _interopRequireDefault(require("@atlaskit/tag"));
-var _react = _interopRequireDefault(require("react"));
-var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _types = require("../../types");
+var _isAgentMention = require("../../is-agent-mention");
+var _isRestricted = require("../../is-restricted");
 var _i18n = require("../../util/i18n");
-var _mouse = require("../../util/mouse");
-var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
+var _leftClick = require("../../util/left-click");
 var _LockCircleIcon = _interopRequireDefault(require("../LockCircleIcon"));
-var _styles = require("./styles");
-var _MentionHighlightHelpers = require("./MentionHighlightHelpers");
+var _MentionAvatar = require("../MentionAvatar");
 var _MentionDescriptionByline = _interopRequireDefault(require("../MentionDescriptionByline"));
 var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
-var _MentionAvatar = require("../MentionAvatar");
+var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
+var _MentionHighlightHelpers = require("./MentionHighlightHelpers");
+var _styles = require("./styles");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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" != (0, _typeof2.default)(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); }
+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" != (0, _typeof2.default)(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 @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
 // Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
 // placeholder) doesn't enter the bundle for every `@atlaskit/mention`
 // consumer — only when an `isPlaceholder` mention is actually rendered.
@@ -52,6 +53,11 @@ var MentionItemPlaceholder = /*#__PURE__*/_react.default.lazy(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder'));
   });
 });
+
+/**
+ * @deprecated Use `import { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from '@atlaskit/mention/mention-item/styles'` instead.
+ */
+
 var lozengeAppearanceToTagColor = {
   default: 'standard',
   success: 'lime',
@@ -111,7 +117,7 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
     _this = _callSuper(this, MentionItem, [].concat(args));
     // internal, used for callbacks
     (0, _defineProperty2.default)(_this, "onMentionSelected", function (event) {
-      if ((0, _mouse.leftClick)(event) && _this.props.onSelection) {
+      if ((0, _leftClick.leftClick)(event) && _this.props.onSelection) {
         event.preventDefault();
         _this.props.onSelection(_this.props.mention, event);
       }
@@ -159,14 +165,14 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
       }
       var _ref = presence || {},
         time = _ref.time;
-      var restricted = (0, _types.isRestricted)(accessLevel);
+      var restricted = (0, _isRestricted.isRestricted)(accessLevel);
       var nameHighlights = highlight && highlight.name;
       var xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon, #292A2E)";
       var RowStyle = _styles.RowStyle;
       var isAgent = false;
       if ((0, _expValEquals.expValEquals)('platform_editor_agent_mentions', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_agent_mentions_drop_one_fixes')) {
         RowStyle = _styles.RowStyleNext;
-        isAgent = (0, _types.isAgentMention)(mention);
+        isAgent = (0, _isAgentMention.isAgentMention)(mention);
       }
       return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
         selected: selected,

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

@@ -12,8 +12,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _actualMouseMove = require("../../util/actual-mouse-move");
 var _logger = _interopRequireDefault(require("../../util/logger"));
-var _mouse = require("../../util/mouse");
+var _mouseLocation = require("../../util/mouse-location");
 var _MentionItem = require("../MentionItem");
 var _MentionListError = _interopRequireDefault(require("../MentionListError"));
 var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
@@ -95,8 +96,8 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
       if (!event) {
         return;
       }
-      var mousePosition = (0, _mouse.mouseLocation)(event);
-      if ((0, _mouse.actualMouseMove)(_this.lastMousePosition, mousePosition)) {
+      var mousePosition = (0, _mouseLocation.mouseLocation)(event);
+      if ((0, _actualMouseMove.actualMouseMove)(_this.lastMousePosition, mousePosition)) {
         _this.selectId(mention.id);
       }
       _this.lastMousePosition = mousePosition;

package/dist/cjs/components/MentionPicker/MentionPicker.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionPicker = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _fireAnalyticsMentionTypeaheadEvent = require("../../util/fire-analytics-mention-typeahead-event");
+var _id = _interopRequireDefault(require("../../util/id"));
+var _logger = _interopRequireDefault(require("../../util/logger"));
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _ResourcedMentionList = _interopRequireDefault(require("../ResourcedMentionList"));
+var _styles = require("./styles");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/**
+ * @class MentionPicker
+ */
+var MentionPicker = exports.MentionPicker = /*#__PURE__*/function (_React$PureComponent) {
+  function MentionPicker(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, MentionPicker);
+    _this = _callSuper(this, MentionPicker, [props]);
+    (0, _defineProperty2.default)(_this, "selectNext", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectNext();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "selectPrevious", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectPrevious();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "selectIndex", function (index, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectIndex(index, callback);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "selectId", function (id, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectId(id, callback);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "chooseCurrentSelection", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.chooseCurrentSelection();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "mentionsCount", function () {
+      if (_this.mentionListRef) {
+        return _this.mentionListRef.mentionsCount();
+      }
+      return 0;
+    });
+    /**
+     * Called after the 'visible' state is changed to decide whether the onOpen or onClose
+     * handlers should be called.
+     *
+     * It should be noted that the visible state of the component is not considered in
+     * this function. Instead the old state and new state should be passed as parameters.
+     */
+    (0, _defineProperty2.default)(_this, "onFilterVisibilityChange", function (oldVisibility, newVisibility) {
+      if (oldVisibility !== newVisibility) {
+        if (newVisibility) {
+          if (_this.props.onOpen) {
+            _this.props.onOpen();
+          }
+        } else {
+          if (_this.props.onClose) {
+            _this.props.onClose();
+          }
+        }
+      }
+    });
+    // internal, used for callbacks
+    (0, _defineProperty2.default)(_this, "filterChange", function (mentions, query, stats) {
+      (0, _logger.default)('ak-mention-picker.filterChange', mentions.length);
+      var wasVisible = _this.state.visible;
+      var visible = mentions.length > 0;
+      _this.setState({
+        visible: visible
+      });
+      _this.onFilterVisibilityChange(wasVisible, visible);
+      (0, _fireAnalyticsMentionTypeaheadEvent.fireAnalyticsMentionTypeaheadEvent)(_this.props)('rendered', stats && stats.duration, mentions.map(function (mention) {
+        return mention.id;
+      }), query);
+    });
+    (0, _defineProperty2.default)(_this, "filterError", function (error) {
+      (0, _logger.default)('ak-mention-picker.filterError', error);
+      var wasVisible = _this.state.visible;
+      _this.setState({
+        visible: true,
+        info: undefined
+      });
+      _this.onFilterVisibilityChange(wasVisible, true);
+    });
+    (0, _defineProperty2.default)(_this, "filterInfo", function (info) {
+      (0, _logger.default)('ak-mention-picker.filterInfo', info);
+      _this.setState({
+        info: info
+      });
+    });
+    (0, _defineProperty2.default)(_this, "handleMentionListRef", function (ref) {
+      _this.mentionListRef = ref;
+    });
+    _this.subscriberKey = (0, _id.default)('ak-mention-picker');
+    _this.state = {
+      visible: false
+    };
+    _this.applyPropChanges({}, props);
+    return _this;
+  }
+  (0, _inherits2.default)(MentionPicker, _React$PureComponent);
+  return (0, _createClass2.default)(MentionPicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.subscribeResourceProvider(this.props.resourceProvider);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.applyPropChanges(this.props, nextProps);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeResourceProvider(this.props.resourceProvider);
+    }
+  }, {
+    key: "applyPropChanges",
+    value:
+    // Internal
+    function applyPropChanges(prevProps, nextProps) {
+      var oldResourceProvider = prevProps.resourceProvider;
+      var newResourceProvider = nextProps.resourceProvider;
+      var resourceProviderChanged = oldResourceProvider !== newResourceProvider;
+
+      // resource provider
+      if (resourceProviderChanged) {
+        this.unsubscribeResourceProvider(oldResourceProvider);
+        this.subscribeResourceProvider(newResourceProvider);
+      }
+    }
+  }, {
+    key: "subscribeResourceProvider",
+    value: function subscribeResourceProvider(resourceProvider) {
+      if (resourceProvider) {
+        resourceProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, this.filterInfo, undefined);
+      }
+    }
+  }, {
+    key: "unsubscribeResourceProvider",
+    value: function unsubscribeResourceProvider(resourceProvider) {
+      if (resourceProvider) {
+        resourceProvider.unsubscribe(this.subscriberKey);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        resourceProvider = _this$props.resourceProvider,
+        presenceProvider = _this$props.presenceProvider,
+        onSelection = _this$props.onSelection,
+        query = _this$props.query,
+        target = _this$props.target,
+        position = _this$props.position,
+        zIndex = _this$props.zIndex,
+        offsetX = _this$props.offsetX,
+        offsetY = _this$props.offsetY,
+        intl = _this$props.intl;
+      var _this$state = this.state,
+        visible = _this$state.visible,
+        info = _this$state.info;
+      var resourceMentionList = /*#__PURE__*/_react.default.createElement(_ResourcedMentionList.default, {
+        resourceProvider: resourceProvider,
+        presenceProvider: presenceProvider,
+        onSelection: onSelection,
+        query: query,
+        ref: this.handleMentionListRef
+      });
+      var infoContent = info && !visible ? /*#__PURE__*/_react.default.createElement(_styles.MentionPickerInfoStyle, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        as: "p"
+      }, info)) : null;
+      var content;
+      if (position) {
+        (0, _logger.default)('target, position', target, position);
+        if (target) {
+          content = /*#__PURE__*/_react.default.createElement(_Popup.default, {
+            target: target,
+            relativePosition: position,
+            zIndex: zIndex,
+            offsetX: offsetX,
+            offsetY: offsetY
+          }, /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+            locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
+          }, /*#__PURE__*/_react.default.createElement("div", null, resourceMentionList, infoContent)));
+        } else {
+          // don't show if we have a position, but no target yet
+          content = null;
+        }
+      } else {
+        content = /*#__PURE__*/_react.default.createElement("div", null, resourceMentionList, infoContent);
+      }
+      return (
+        /*#__PURE__*/
+        /* old classnames are essential for Confluence tests */
+        _react.default.createElement(_styles.MentionPickerStyle
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "ak-mention-picker",
+          visible: visible || info
+        }, content)
+      );
+    }
+  }]);
+}(_react.default.PureComponent);
+(0, _defineProperty2.default)(MentionPicker, "defaultProps", {
+  onSelection: function onSelection() {},
+  onOpen: function onOpen() {},
+  onClose: function onClose() {}
+});