@atlaskit/mention 24.2.18 → 24.3.0

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

@@ -1,14 +1,33 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
  * Simple implementation of popup while waiting for ak-inline-dialog
  */
 export default class Popup extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.portalStyles = {
+      position: 'absolute',
+      top: null,
+      bottom: null,
+      left: null,
+      zIndex: null
+    };
+  }
+  setPortalStyles(styles) {
+    this.portalStyles = {
+      ...this.portalStyles,
+      ...styles
+    };
+  }
   componentDidMount() {
-    this.popup = document.createElement('div');
-    document.body.appendChild(this.popup);
-    this.popup.style.position = 'absolute';
+    if (!fg('mentions-migrate-react-dom')) {
+      this.popup = document.createElement('div');
+      document.body.appendChild(this.popup);
+      this.popup.style.position = 'absolute';
+    }
     this._applyAbsolutePosition();
     this._renderContent();
   }
@@ -16,9 +35,11 @@ export default class Popup extends React.PureComponent {
     this._renderContent();
   }
   componentWillUnmount() {
-    if (this.popup) {
-      ReactDOM.unmountComponentAtNode(this.popup);
-      document.body.removeChild(this.popup);
+    if (!fg('mentions-migrate-react-dom')) {
+      if (this.popup) {
+        ReactDOM.unmountComponentAtNode(this.popup);
+        document.body.removeChild(this.popup);
+      }
     }
   }
   _applyBelowPosition() {
@@ -27,10 +48,18 @@ export default class Popup extends React.PureComponent {
       const box = targetNode.getBoundingClientRect();
       const top = box.bottom + (this.props.offsetY || 0);
       const left = box.left + (this.props.offsetX || 0);
-      if (this.popup) {
-        this.popup.style.top = `${top}px`;
-        this.popup.style.bottom = '';
-        this.popup.style.left = `${left}px`;
+      if (fg('mentions-migrate-react-dom')) {
+        this.setPortalStyles({
+          top: `${top}px`,
+          bottom: '',
+          left: `${left}px`
+        });
+      } else {
+        if (this.popup) {
+          this.popup.style.top = `${top}px`;
+          this.popup.style.bottom = '';
+          this.popup.style.left = `${left}px`;
+        }
       }
     }
   }
@@ -40,10 +69,18 @@ export default class Popup extends React.PureComponent {
       const box = targetNode.getBoundingClientRect();
       const bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
       const left = box.left + (this.props.offsetX || 0);
-      if (this.popup) {
-        this.popup.style.top = '';
-        this.popup.style.bottom = `${bottom}px`;
-        this.popup.style.left = `${left}px`;
+      if (fg('mentions-migrate-react-dom')) {
+        this.setPortalStyles({
+          top: '',
+          bottom: `${bottom}px`,
+          left: `${left}px`
+        });
+      } else {
+        if (this.popup) {
+          this.popup.style.top = '';
+          this.popup.style.bottom = `${bottom}px`;
+          this.popup.style.left = `${left}px`;
+        }
       }
     }
   }
@@ -64,18 +101,37 @@ export default class Popup extends React.PureComponent {
         }
       }
     }
-    if (this.props.zIndex && this.popup) {
-      this.popup.style.zIndex = `${this.props.zIndex}`;
+    if (fg('mentions-migrate-react-dom')) {
+      if (this.props.zIndex) {
+        this.setPortalStyles({
+          zIndex: this.props.zIndex
+        });
+      }
+    } else {
+      if (this.props.zIndex && this.popup) {
+        this.popup.style.zIndex = `${this.props.zIndex}`;
+      }
     }
   }
   _renderContent() {
-    if (this.popup) {
-      ReactDOM.render(this.props.children, this.popup);
+    if (!fg('mentions-migrate-react-dom')) {
+      if (this.popup) {
+        ReactDOM.render(this.props.children, this.popup);
+      }
     }
   }
   render() {
-    // Placeholder element for react to render inplace
-    return /*#__PURE__*/React.createElement("div", null);
+    if (fg('mentions-migrate-react-dom')) {
+      // https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide#dynamic-styles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      const content = /*#__PURE__*/React.createElement("div", {
+        style: this.portalStyles
+      }, this.props.children);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(content, document.body));
+    } else {
+      // Placeholder element for react to render inplace
+      /*#__PURE__*/React.createElement("div", null);
+    }
   }
 }
 _defineProperty(Popup, "defaultProps", {

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

@@ -5,7 +5,7 @@ import { ScrollableStyle } from './styles';
 export default class Scrollable extends React.PureComponent {
   constructor(...args) {
     super(...args);
-    // API
+    // Cleanup when removing mentions-migrate-react-dom
     _defineProperty(this, "reveal", child => {
       if (child && this.scrollableDiv) {
         const childNode = findDOMNode(child);
@@ -20,6 +20,19 @@ export default class Scrollable extends React.PureComponent {
         }
       }
     });
+    _defineProperty(this, "revealRef", ref => {
+      if (ref && ref.current && this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        const scrollableRect = this.scrollableDiv.getBoundingClientRect();
+        const elementRect = ref.current.getBoundingClientRect();
+        if (elementRect.top < scrollableRect.top) {
+          this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
+        } else if (elementRect.bottom > scrollableRect.bottom) {
+          this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
+        }
+      }
+    });
     _defineProperty(this, "handleRef", ref => {
       this.scrollableDiv = ref;
     });

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "24.2.17";
+const packageVersion = "0.0.0-development";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

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

@@ -1,3 +1,4 @@
+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";
@@ -76,7 +77,8 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var _this$props = this.props,
         mention = _this$props.mention,
-        selected = _this$props.selected;
+        selected = _this$props.selected,
+        forwardedRef = _this$props.forwardedRef;
       var id = mention.id,
         highlight = mention.highlight,
         avatarUrl = mention.avatarUrl,
@@ -102,7 +104,8 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
         "data-testid": "mention-item-".concat(id),
         "data-mention-id": id,
         "data-mention-name": mentionName,
-        "data-selected": selected
+        "data-selected": selected,
+        ref: forwardedRef
       }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
         restricted: restricted
       }, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
@@ -134,4 +137,9 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-export { MentionItem as default };
+export { MentionItem as default };
+export var MentionItemWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(MentionItem, _extends({}, props, {
+    forwardedRef: ref
+  }));
+});

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

@@ -7,9 +7,10 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import MentionItem from '../MentionItem';
+import MentionItem, { MentionItemWithRef } from '../MentionItem';
 import MentionListError from '../MentionListError';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import Scrollable from '../Scrollable';
@@ -102,11 +103,24 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "handleScrollableRef", function (ref) {
       _this.scrollable = ref;
     });
+    _this.itemsRefs = new Map();
     _this.setDefaultSelectionState();
     return _this;
   }
   _inherits(MentionList, _React$PureComponent);
   return _createClass(MentionList, [{
+    key: "createItemRef",
+    value: function createItemRef(key) {
+      var itemRef = /*#__PURE__*/React.createRef();
+      this.itemsRefs.set(key, itemRef);
+      return itemRef;
+    }
+  }, {
+    key: "getItemRef",
+    value: function getItemRef(key) {
+      return this.itemsRefs.get(key);
+    }
+  }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       // adjust selection
@@ -147,9 +161,16 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
     value:
     // Internal
     function revealItem(key) {
-      var item = this.items[key];
-      if (item && this.scrollable) {
-        this.scrollable.reveal(item);
+      if (fg('mentions-migrate-react-dom')) {
+        var itemRef = this.getItemRef(key);
+        if (itemRef && this.scrollable) {
+          itemRef && this.scrollable.revealRef(itemRef);
+        }
+      } else {
+        var item = this.items[key];
+        if (item && this.scrollable) {
+          this.scrollable.reveal(item);
+        }
       }
     }
 
@@ -173,24 +194,40 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
         this.items = {};
         return /*#__PURE__*/React.createElement("div", null, this.props.initialHighlightElement, mentions.map(function (mention, idx) {
           var key = mention.id;
-          var item = /*#__PURE__*/React.createElement(MentionItem, {
-            mention: mention,
-            selected: _this2.isSelectedMention(mention, idx),
-            key: key,
-            onMouseMove: _this2.selectIndexOnHover
-            /* Cannot use onclick, as onblur will close the element, and prevent
-             * onClick from firing.
-             */,
-            onSelection: _this2.itemSelected,
-            ref: function ref(_ref) {
-              if (_ref) {
-                _this2.items[key] = _ref;
-              } else {
-                delete _this2.items[key];
+          var ref = _this2.createItemRef(key);
+          if (fg('mentions-migrate-react-dom')) {
+            var item = /*#__PURE__*/React.createElement(MentionItemWithRef, {
+              mention: mention,
+              selected: _this2.isSelectedMention(mention, idx),
+              key: key,
+              onMouseMove: _this2.selectIndexOnHover
+              /* Cannot use onclick, as onblur will close the element, and prevent
+              * onClick from firing.
+              */,
+              onSelection: _this2.itemSelected,
+              ref: ref
+            });
+            return item;
+          } else {
+            var _item = /*#__PURE__*/React.createElement(MentionItem, {
+              mention: mention,
+              selected: _this2.isSelectedMention(mention, idx),
+              key: key,
+              onMouseMove: _this2.selectIndexOnHover
+              /* Cannot use onclick, as onblur will close the element, and prevent
+              * onClick from firing.
+              */,
+              onSelection: _this2.itemSelected,
+              ref: function ref(_ref) {
+                if (_ref) {
+                  _this2.items[key] = _ref;
+                } else {
+                  delete _this2.items[key];
+                }
               }
-            }
-          });
-          return item;
+            });
+            return _item;
+          }
         }));
       }
       return null;

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

@@ -6,10 +6,10 @@ 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 { Text } from '@atlaskit/primitives/compiled';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { IntlProvider, injectIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fireAnalyticsMentionTypeaheadEvent } from '../../util/analytics';
 import uniqueId from '../../util/id';
 import debug from '../../util/logger';

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

@@ -4,25 +4,44 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; })(); }
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
  * Simple implementation of popup while waiting for ak-inline-dialog
  */
 var Popup = /*#__PURE__*/function (_React$PureComponent) {
-  function Popup() {
+  function Popup(props) {
+    var _this;
     _classCallCheck(this, Popup);
-    return _callSuper(this, Popup, arguments);
+    _this = _callSuper(this, Popup, [props]);
+    _this.portalStyles = {
+      position: 'absolute',
+      top: null,
+      bottom: null,
+      left: null,
+      zIndex: null
+    };
+    return _this;
   }
   _inherits(Popup, _React$PureComponent);
   return _createClass(Popup, [{
+    key: "setPortalStyles",
+    value: function setPortalStyles(styles) {
+      this.portalStyles = _objectSpread(_objectSpread({}, this.portalStyles), styles);
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.popup = document.createElement('div');
-      document.body.appendChild(this.popup);
-      this.popup.style.position = 'absolute';
+      if (!fg('mentions-migrate-react-dom')) {
+        this.popup = document.createElement('div');
+        document.body.appendChild(this.popup);
+        this.popup.style.position = 'absolute';
+      }
       this._applyAbsolutePosition();
       this._renderContent();
     }
@@ -34,9 +53,11 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.popup) {
-        ReactDOM.unmountComponentAtNode(this.popup);
-        document.body.removeChild(this.popup);
+      if (!fg('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          ReactDOM.unmountComponentAtNode(this.popup);
+          document.body.removeChild(this.popup);
+        }
       }
     }
   }, {
@@ -47,10 +68,18 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
         var box = targetNode.getBoundingClientRect();
         var top = box.bottom + (this.props.offsetY || 0);
         var left = box.left + (this.props.offsetX || 0);
-        if (this.popup) {
-          this.popup.style.top = "".concat(top, "px");
-          this.popup.style.bottom = '';
-          this.popup.style.left = "".concat(left, "px");
+        if (fg('mentions-migrate-react-dom')) {
+          this.setPortalStyles({
+            top: "".concat(top, "px"),
+            bottom: '',
+            left: "".concat(left, "px")
+          });
+        } else {
+          if (this.popup) {
+            this.popup.style.top = "".concat(top, "px");
+            this.popup.style.bottom = '';
+            this.popup.style.left = "".concat(left, "px");
+          }
         }
       }
     }
@@ -62,10 +91,18 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
         var box = targetNode.getBoundingClientRect();
         var bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
         var left = box.left + (this.props.offsetX || 0);
-        if (this.popup) {
-          this.popup.style.top = '';
-          this.popup.style.bottom = "".concat(bottom, "px");
-          this.popup.style.left = "".concat(left, "px");
+        if (fg('mentions-migrate-react-dom')) {
+          this.setPortalStyles({
+            top: '',
+            bottom: "".concat(bottom, "px"),
+            left: "".concat(left, "px")
+          });
+        } else {
+          if (this.popup) {
+            this.popup.style.top = '';
+            this.popup.style.bottom = "".concat(bottom, "px");
+            this.popup.style.left = "".concat(left, "px");
+          }
         }
       }
     }
@@ -88,22 +125,41 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-      if (this.props.zIndex && this.popup) {
-        this.popup.style.zIndex = "".concat(this.props.zIndex);
+      if (fg('mentions-migrate-react-dom')) {
+        if (this.props.zIndex) {
+          this.setPortalStyles({
+            zIndex: this.props.zIndex
+          });
+        }
+      } else {
+        if (this.props.zIndex && this.popup) {
+          this.popup.style.zIndex = "".concat(this.props.zIndex);
+        }
       }
     }
   }, {
     key: "_renderContent",
     value: function _renderContent() {
-      if (this.popup) {
-        ReactDOM.render(this.props.children, this.popup);
+      if (!fg('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          ReactDOM.render(this.props.children, this.popup);
+        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      // Placeholder element for react to render inplace
-      return /*#__PURE__*/React.createElement("div", null);
+      if (fg('mentions-migrate-react-dom')) {
+        // https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide#dynamic-styles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        var content = /*#__PURE__*/React.createElement("div", {
+          style: this.portalStyles
+        }, this.props.children);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(content, document.body));
+      } else {
+        // Placeholder element for react to render inplace
+        /*#__PURE__*/React.createElement("div", null);
+      }
     }
   }]);
 }(React.PureComponent);

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

@@ -17,7 +17,7 @@ var Scrollable = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, Scrollable, [].concat(args));
-    // API
+    // Cleanup when removing mentions-migrate-react-dom
     _defineProperty(_this, "reveal", function (child) {
       if (child && _this.scrollableDiv) {
         var childNode = findDOMNode(child);
@@ -32,6 +32,19 @@ var Scrollable = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
     });
+    _defineProperty(_this, "revealRef", function (ref) {
+      if (ref && ref.current && _this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        var scrollableRect = _this.scrollableDiv.getBoundingClientRect();
+        var elementRect = ref.current.getBoundingClientRect();
+        if (elementRect.top < scrollableRect.top) {
+          _this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
+        } else if (elementRect.bottom > scrollableRect.bottom) {
+          _this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
+        }
+      }
+    });
     _defineProperty(_this, "handleRef", function (ref) {
       _this.scrollableDiv = ref;
     });

package/dist/esm/util/analytics.js

@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "24.2.17";
+var packageVersion = "0.0.0-development";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/components/MentionItem/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type MentionDescription, type OnMentionEvent } from '../../types';
 export { MENTION_ITEM_HEIGHT } from './styles';
 export interface Props {
+    forwardedRef?: React.Ref<HTMLDivElement>;
     mention: MentionDescription;
     onMouseEnter?: OnMentionEvent;
     onMouseMove?: OnMentionEvent;
@@ -14,3 +15,4 @@ export default class MentionItem extends React.PureComponent<Props, {}> {
     private onMentionMenuItemMouseEnter;
     render(): React.JSX.Element;
 }
+export declare const MentionItemWithRef: React.ForwardRefExoticComponent<Omit<Props, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/MentionList/index.d.ts

@@ -18,7 +18,10 @@ export default class MentionList extends React.PureComponent<Props, State> {
     private lastMousePosition;
     private scrollable?;
     private items;
+    private itemsRefs;
     constructor(props: Props);
+    createItemRef(key: string): React.RefObject<HTMLDivElement>;
+    getItemRef(key: string): React.RefObject<HTMLDivElement> | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(): void;
     selectNext: () => void;

package/dist/types/components/MentionPicker/index.d.ts

@@ -1,6 +1,6 @@
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { type IntlShape } from 'react-intl-next';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { type MentionProvider } from '../../api/MentionResource';
 import { type PresenceProvider } from '../../api/PresenceResource';
 import { type OnMentionEvent } from '../../types';

package/dist/types/components/Popup/index.d.ts

@@ -9,6 +9,9 @@ export interface Props {
 }
 export default class Popup extends React.PureComponent<Props, {}> {
     private popup?;
+    private portalStyles;
+    constructor(props: Props);
+    setPortalStyles(styles: Record<string, string | number | null>): void;
     static defaultProps: {
         relativePosition: string;
         offsetX: number;
@@ -22,5 +25,5 @@ export default class Popup extends React.PureComponent<Props, {}> {
     _applyAbovePosition(): void;
     _applyAbsolutePosition(): void;
     _renderContent(): void;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
 }

package/dist/types/components/Scrollable/index.d.ts

@@ -6,6 +6,7 @@ export interface Props {
 export default class Scrollable extends React.PureComponent<Props, {}> {
     private scrollableDiv?;
     reveal: (child: MentionItem) => void;
+    revealRef: (ref: React.RefObject<HTMLDivElement>) => void;
     private handleRef;
     render(): React.JSX.Element;
 }

package/dist/types-ts4.5/components/MentionItem/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type MentionDescription, type OnMentionEvent } from '../../types';
 export { MENTION_ITEM_HEIGHT } from './styles';
 export interface Props {
+    forwardedRef?: React.Ref<HTMLDivElement>;
     mention: MentionDescription;
     onMouseEnter?: OnMentionEvent;
     onMouseMove?: OnMentionEvent;
@@ -14,3 +15,4 @@ export default class MentionItem extends React.PureComponent<Props, {}> {
     private onMentionMenuItemMouseEnter;
     render(): React.JSX.Element;
 }
+export declare const MentionItemWithRef: React.ForwardRefExoticComponent<Omit<Props, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/components/MentionList/index.d.ts

@@ -18,7 +18,10 @@ export default class MentionList extends React.PureComponent<Props, State> {
     private lastMousePosition;
     private scrollable?;
     private items;
+    private itemsRefs;
     constructor(props: Props);
+    createItemRef(key: string): React.RefObject<HTMLDivElement>;
+    getItemRef(key: string): React.RefObject<HTMLDivElement> | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(): void;
     selectNext: () => void;

package/dist/types-ts4.5/components/MentionPicker/index.d.ts

@@ -1,6 +1,6 @@
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { type IntlShape } from 'react-intl-next';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { type MentionProvider } from '../../api/MentionResource';
 import { type PresenceProvider } from '../../api/PresenceResource';
 import { type OnMentionEvent } from '../../types';

package/dist/types-ts4.5/components/Popup/index.d.ts

@@ -9,6 +9,9 @@ export interface Props {
 }
 export default class Popup extends React.PureComponent<Props, {}> {
     private popup?;
+    private portalStyles;
+    constructor(props: Props);
+    setPortalStyles(styles: Record<string, string | number | null>): void;
     static defaultProps: {
         relativePosition: string;
         offsetX: number;
@@ -22,5 +25,5 @@ export default class Popup extends React.PureComponent<Props, {}> {
     _applyAbovePosition(): void;
     _applyAbsolutePosition(): void;
     _renderContent(): void;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
 }