@atlaskit/mention 27.17.0 → 27.18.0

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

@@ -1,246 +1,20 @@
-/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-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) { _defineProperty(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 = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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 @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. */
-import React from 'react';
-import FocusRing from '@atlaskit/focus-ring';
-import MessagesIntlProvider from '../MessagesIntlProvider';
-import PrimitiveMention from './PrimitiveMention';
-import AsyncNoAccessTooltip from '../NoAccessTooltip';
-import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
-import { UNKNOWN_USER_ID } from '../../_constants';
-import { isRestricted, MentionType } from '../../types';
-import { fireAnalyticsMentionEvent } from '../../util/analytics';
+
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { UFOExperienceState } from '@atlaskit/ufo';
-import { UnknownUserError } from '../../util/i18n';
-import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
+import { fireAnalyticsMentionEvent } from '../../util/fire-analytics-mention-event';
+import { MentionInternal } from './MentionInternal';
 export var ANALYTICS_HOVER_DELAY = 1000;
-export { UNKNOWN_USER_ID } from '../../_constants';
-var avatarStyles = null;
-var avatarFallbackStyles = null;
-var avatarImageStyles = null;
-var agentAvatarStyles = null;
-export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
-  function MentionInternal(props) {
-    var _this;
-    _classCallCheck(this, MentionInternal);
-    _this = _callSuper(this, MentionInternal, [props]);
-    _defineProperty(_this, "state", {
-      hasAvatarError: false
-    });
-    _defineProperty(_this, "handleAvatarError", function () {
-      _this.setState({
-        hasAvatarError: true
-      });
-    });
-    _defineProperty(_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);
-      }
-    });
-    _defineProperty(_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);
-    });
-    _defineProperty(_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);
-      }
-    });
-    _defineProperty(_this, "getMentionType", function () {
-      var _this$props4 = _this.props,
-        accessLevel = _this$props4.accessLevel,
-        isHighlighted = _this$props4.isHighlighted,
-        isDisabled = _this$props4.isDisabled;
-      if (isDisabled) {
-        return MentionType.DISABLED;
-      }
-      if (isHighlighted) {
-        return MentionType.SELF;
-      }
-      if (isRestricted(accessLevel)) {
-        return MentionType.RESTRICTED;
-      }
-      return MentionType.DEFAULT;
-    });
-    mentionRenderedUfoExperience.getInstance(props.id).start();
-    return _this;
-  }
-  _inherits(MentionInternal, _React$PureComponent);
-  return _createClass(MentionInternal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      mentionRenderedUfoExperience.getInstance(this.props.id).success();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.hoverTimeout) {
-        clearTimeout(this.hoverTimeout);
-      }
-      var ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
-      if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
-        ufoInstance.abort();
-      }
-    }
-  }, {
-    key: "renderUnknownUserError",
-    value: function renderUnknownUserError(id) {
-      return /*#__PURE__*/React.createElement(UnknownUserError, {
-        values: {
-          userId: id.slice(-5)
-        }
-      }, function (message) {
-        return /*#__PURE__*/React.createElement(React.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(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 === MentionType.RESTRICTED;
-      var showDisabledTooltip = mentionType === 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 === MentionType.DISABLED;
-      var disabledA11yProps = isDisabledChip ? _objectSpread({
-        'aria-disabled': true,
-        tabIndex: 0
-      }, disabledTooltip ? {
-        'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
-      } : {}) : {};
-      var mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
-        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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        "aria-hidden": "true",
-        "data-testid": "mention-avatar-slot",
-        className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
-      }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
-        alt: "",
-        decoding: "async",
-        draggable: false,
-        height: 16,
-        loading: "lazy",
-        onError: handleAvatarError,
-        src: avatarUrl,
-        "data-testid": "mention-avatar",
-        width: 16,
-        className: ax(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
-      }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/React.createElement("span", null, visibleText || '...')) : text || '@...'));
-      var ssrPlaceholderProp = props.ssrPlaceholderId ? {
-        'data-ssr-placeholder': props.ssrPlaceholderId
-      } : {};
-      var wrappedMention = function () {
-        if (showRestrictedTooltip) {
-          return /*#__PURE__*/React.createElement(React.Suspense, {
-            fallback: mentionComponent
-          }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
-            name: text
-          }, mentionComponent));
-        }
-        if (showDisabledTooltip) {
-          return /*#__PURE__*/React.createElement(React.Suspense, {
-            fallback: mentionComponent
-          }, /*#__PURE__*/React.createElement(AsyncDisabledMentionTooltip, {
-            tooltip: disabledTooltip
-          }, mentionComponent));
-        }
-        return mentionComponent;
-      }();
-      return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-        id: id
-      }, /*#__PURE__*/React.createElement("span", _extends({
-        id: localId,
-        "data-mention-id": id,
-        "data-local-id": localId,
-        "data-access-level": accessLevel,
-        spellCheck: false
-      }, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, wrappedMention)));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.avatarUrl !== state.avatarUrl) {
-        return {
-          avatarUrl: props.avatarUrl,
-          hasAvatarError: false
-        };
-      }
-      return null;
-    }
-  }]);
-}(React.PureComponent);
+/**
+ * @deprecated Use `import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants'` instead.
+ */
+export { UNKNOWN_USER_ID } from '../../_constants';
 var MentionWithAnalytics = withAnalyticsEvents({
   onClick: function onClick(createEvent, props) {
     var id = props.id,
@@ -258,4 +32,9 @@ var MentionWithAnalytics = withAnalyticsEvents({
   }
 })(MentionInternal);
 var Mention = MentionWithAnalytics;
-export default Mention;
+export default Mention;
+
+/**
+ * @deprecated Use `import { MentionInternal } from '@atlaskit/mention/mention'` instead.
+ */
+export { MentionInternal } from './MentionInternal';

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import Avatar, { getAppearanceForAppType } from '@atlaskit/avatar';
-import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { isAppMention, isTeamMention } from '../../types';
+import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
+import { isAppMention } from '../../is-app-mention';
+import { isTeamMention } from '../../is-team-mention';
 export var MentionAvatar = function MentionAvatar(_ref) {
   var mention = _ref.mention,
     selected = _ref.selected;

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

@@ -8,22 +8,24 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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 @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+import React from 'react';
+import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
-import React from 'react';
-import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAgentMention, isRestricted } from '../../types';
+import { isAgentMention } from '../../is-agent-mention';
+import { isRestricted } from '../../is-restricted';
 import { NoAccessLabel } from '../../util/i18n';
-import { leftClick } from '../../util/mouse';
-import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import { leftClick } from '../../util/left-click';
 import AsyncLockCircleIcon from '../LockCircleIcon';
-import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
-import { renderHighlight } from './MentionHighlightHelpers';
+import { MentionAvatar } from '../MentionAvatar';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
-import { MentionAvatar } from '../MentionAvatar';
+import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import { renderHighlight } from './MentionHighlightHelpers';
+import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle as RowStyleLegacy, RowStyleNext, TimeStyle } from './styles';
 
 // Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
 // placeholder) doesn't enter the bundle for every `@atlaskit/mention`
@@ -31,6 +33,10 @@ import { MentionAvatar } from '../MentionAvatar';
 var MentionItemPlaceholder = /*#__PURE__*/React.lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder');
 });
+
+/**
+ * @deprecated Use `import { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from '@atlaskit/mention/mention-item/styles'` instead.
+ */
 export { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from './styles';
 var lozengeAppearanceToTagColor = {
   default: 'standard',

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

@@ -7,8 +7,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
+import { actualMouseMove } from '../../util/actual-mouse-move';
 import debug from '../../util/logger';
-import { actualMouseMove, mouseLocation } from '../../util/mouse';
+import { mouseLocation } from '../../util/mouse-location';
 import { MentionItemWithRef } from '../MentionItem';
 import MentionListError from '../MentionListError';
 import MessagesIntlProvider from '../MessagesIntlProvider';

package/dist/esm/components/MentionPicker/MentionPicker.js

@@ -0,0 +1,225 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { Text } from '@atlaskit/primitives/compiled';
+import { fireAnalyticsMentionTypeaheadEvent } from '../../util/fire-analytics-mention-typeahead-event';
+import uniqueId from '../../util/id';
+import debug from '../../util/logger';
+import Popup from '../Popup';
+import ResourcedMentionList from '../ResourcedMentionList';
+import { MentionPickerInfoStyle, MentionPickerStyle } from './styles';
+
+/**
+ * @class MentionPicker
+ */
+export var MentionPicker = /*#__PURE__*/function (_React$PureComponent) {
+  function MentionPicker(props) {
+    var _this;
+    _classCallCheck(this, MentionPicker);
+    _this = _callSuper(this, MentionPicker, [props]);
+    _defineProperty(_this, "selectNext", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectNext();
+      }
+    });
+    _defineProperty(_this, "selectPrevious", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectPrevious();
+      }
+    });
+    _defineProperty(_this, "selectIndex", function (index, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectIndex(index, callback);
+      }
+    });
+    _defineProperty(_this, "selectId", function (id, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectId(id, callback);
+      }
+    });
+    _defineProperty(_this, "chooseCurrentSelection", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.chooseCurrentSelection();
+      }
+    });
+    _defineProperty(_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.
+     */
+    _defineProperty(_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
+    _defineProperty(_this, "filterChange", function (mentions, query, stats) {
+      debug('ak-mention-picker.filterChange', mentions.length);
+      var wasVisible = _this.state.visible;
+      var visible = mentions.length > 0;
+      _this.setState({
+        visible: visible
+      });
+      _this.onFilterVisibilityChange(wasVisible, visible);
+      fireAnalyticsMentionTypeaheadEvent(_this.props)('rendered', stats && stats.duration, mentions.map(function (mention) {
+        return mention.id;
+      }), query);
+    });
+    _defineProperty(_this, "filterError", function (error) {
+      debug('ak-mention-picker.filterError', error);
+      var wasVisible = _this.state.visible;
+      _this.setState({
+        visible: true,
+        info: undefined
+      });
+      _this.onFilterVisibilityChange(wasVisible, true);
+    });
+    _defineProperty(_this, "filterInfo", function (info) {
+      debug('ak-mention-picker.filterInfo', info);
+      _this.setState({
+        info: info
+      });
+    });
+    _defineProperty(_this, "handleMentionListRef", function (ref) {
+      _this.mentionListRef = ref;
+    });
+    _this.subscriberKey = uniqueId('ak-mention-picker');
+    _this.state = {
+      visible: false
+    };
+    _this.applyPropChanges({}, props);
+    return _this;
+  }
+  _inherits(MentionPicker, _React$PureComponent);
+  return _createClass(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.createElement(ResourcedMentionList, {
+        resourceProvider: resourceProvider,
+        presenceProvider: presenceProvider,
+        onSelection: onSelection,
+        query: query,
+        ref: this.handleMentionListRef
+      });
+      var infoContent = info && !visible ? /*#__PURE__*/React.createElement(MentionPickerInfoStyle, null, /*#__PURE__*/React.createElement(Text, {
+        as: "p"
+      }, info)) : null;
+      var content;
+      if (position) {
+        debug('target, position', target, position);
+        if (target) {
+          content = /*#__PURE__*/React.createElement(Popup, {
+            target: target,
+            relativePosition: position,
+            zIndex: zIndex,
+            offsetX: offsetX,
+            offsetY: offsetY
+          }, /*#__PURE__*/React.createElement(IntlProvider, {
+            locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
+          }, /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent)));
+        } else {
+          // don't show if we have a position, but no target yet
+          content = null;
+        }
+      } else {
+        content = /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent);
+      }
+      return (
+        /*#__PURE__*/
+        /* old classnames are essential for Confluence tests */
+        React.createElement(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.PureComponent);
+_defineProperty(MentionPicker, "defaultProps", {
+  onSelection: function onSelection() {},
+  onOpen: function onOpen() {},
+  onClose: function onClose() {}
+});