@atlaskit/emoji 67.8.8 → 67.8.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 67.8.9
+
+### Patch Changes
+
+- [#154815](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154815)
+  [`64d0333dd6b4b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64d0333dd6b4b) -
+  ED-24131 Refactors internal EmojiPickerList to a functional component and remediates usages of
+  UNSAFE lifecycle methods in elements/emoji
+
 ## 67.8.8
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiDeletePreview.js

@@ -25,6 +25,7 @@ var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"))
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _styles = require("./styles");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -74,10 +75,23 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EmojiDeletePreview, [{
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps) {
-      if (nextProps.emoji.id !== this.props.emoji.id) {
-        this.setState({
-          error: false
-        });
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (nextProps.emoji.id !== this.props.emoji.id) {
+          this.setState({
+            error: false
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (prevProps.emoji.id !== this.props.emoji.id) {
+          this.setState({
+            error: false
+          });
+        }
       }
     }
   }, {

package/dist/cjs/components/common/LoadingEmojiComponent.js

@@ -13,6 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
@@ -52,7 +53,18 @@ var LoadingEmojiComponent = exports.default = /*#__PURE__*/function (_Component)
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.loadEmojiProvider(nextProps.emojiProvider);
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        this.loadEmojiProvider(nextProps.emojiProvider);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (this.props !== prevProps) {
+          this.loadEmojiProvider(this.props.emojiProvider);
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -22,12 +22,13 @@ var _UploadEmoji = require("../common/UploadEmoji");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
 var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
-var _EmojiPickerList = _interopRequireDefault(require("./EmojiPickerList"));
+var _EmojiPickerList = require("./EmojiPickerList");
 var _analytics = require("../../util/analytics");
 var _styles = require("./styles");
 var _useEmoji2 = require("../../hooks/useEmoji");
 var _useIsMounted = require("../../hooks/useIsMounted");
 var _i18n = require("../i18n");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; } /**
  * @jsxRuntime classic
@@ -103,7 +104,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     toneEmoji = _useState28[0],
     setToneEmoji = _useState28[1];
   var emojiPickerList = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/(0, _react.createRef)();
+    return (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? /*#__PURE__*/(0, _react.createRef)() : /*#__PURE__*/(0, _react.createRef)();
   }, []);
   var openTime = (0, _react.useRef)(0);
   var isMounting = (0, _react.useRef)(true);
@@ -486,7 +487,35 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected
-  }), (0, _react2.jsx)(_EmojiPickerList.default, {
+  }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }) : (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
     emojis: filteredEmojis,
     currentUser: currentUser,
     onEmojiSelected: recordUsageOnSelection,

package/dist/cjs/components/picker/EmojiPickerList.js

@@ -1,10 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RENDER_EMOJI_PICKER_LIST_TESTID = void 0;
+exports.RENDER_EMOJI_PICKER_LIST_TESTID = exports.EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalNew = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -13,7 +15,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _constants = require("../../util/constants");
@@ -28,6 +30,8 @@ var _VirtualList = require("./VirtualList");
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -84,12 +88,12 @@ var EmojiPickerTabPanelInternal = /*#__PURE__*/function (_PureComponent) {
   return EmojiPickerTabPanelInternal;
 }(_react.PureComponent);
 var EmojiPickerTabPanel = (0, _reactIntlNext.injectIntl)(EmojiPickerTabPanelInternal);
-var EmojiPickerVirtualListInternal = exports.default = /*#__PURE__*/function (_PureComponent2) {
-  (0, _inherits2.default)(EmojiPickerVirtualListInternal, _PureComponent2);
-  var _super2 = _createSuper(EmojiPickerVirtualListInternal);
-  function EmojiPickerVirtualListInternal(_props) {
+var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureComponent2) {
+  (0, _inherits2.default)(EmojiPickerVirtualListInternalOld, _PureComponent2);
+  var _super2 = _createSuper(EmojiPickerVirtualListInternalOld);
+  function EmojiPickerVirtualListInternalOld(_props) {
     var _this;
-    (0, _classCallCheck2.default)(this, EmojiPickerVirtualListInternal);
+    (0, _classCallCheck2.default)(this, EmojiPickerVirtualListInternalOld);
     _this = _super2.call(this, _props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "virtualItems", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "categoryTracker", new _CategoryTracker.default());
@@ -295,7 +299,7 @@ var EmojiPickerVirtualListInternal = exports.default = /*#__PURE__*/function (_P
     _this.buildVirtualItems(_props, _this.state);
     return _this;
   }
-  (0, _createClass2.default)(EmojiPickerVirtualListInternal, [{
+  (0, _createClass2.default)(EmojiPickerVirtualListInternalOld, [{
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
       if (this.props.emojis !== nextProps.emojis || this.props.selectedTone !== nextProps.selectedTone || this.props.loading !== nextProps.loading || this.props.query !== nextProps.query) {
@@ -415,13 +419,344 @@ var EmojiPickerVirtualListInternal = exports.default = /*#__PURE__*/function (_P
       })));
     }
   }]);
-  return EmojiPickerVirtualListInternal;
+  return EmojiPickerVirtualListInternalOld;
 }(_react.PureComponent);
-(0, _defineProperty2.default)(EmojiPickerVirtualListInternal, "defaultProps", {
+(0, _defineProperty2.default)(EmojiPickerVirtualListInternalOld, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},
   onEmojiDelete: function onEmojiDelete() {},
   onCategoryActivated: function onCategoryActivated() {},
   onSearch: function onSearch() {},
   size: _constants.defaultEmojiPickerSize
+});
+var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNew = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var emojis = props.emojis,
+    currentUser = props.currentUser,
+    _props$onEmojiSelecte = props.onEmojiSelected,
+    onEmojiSelected = _props$onEmojiSelecte === void 0 ? function () {} : _props$onEmojiSelecte,
+    _props$onEmojiActive = props.onEmojiActive,
+    onEmojiActive = _props$onEmojiActive === void 0 ? function () {} : _props$onEmojiActive,
+    _props$onEmojiDelete = props.onEmojiDelete,
+    onEmojiDelete = _props$onEmojiDelete === void 0 ? function () {} : _props$onEmojiDelete,
+    _props$onCategoryActi = props.onCategoryActivated,
+    onCategoryActivated = _props$onCategoryActi === void 0 ? function () {} : _props$onCategoryActi,
+    _props$onSearch = props.onSearch,
+    onSearch = _props$onSearch === void 0 ? function () {} : _props$onSearch,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _constants.defaultEmojiPickerSize : _props$size,
+    query = props.query,
+    loading = props.loading,
+    selectedTone = props.selectedTone,
+    onToneSelected = props.onToneSelected,
+    onToneSelectorCancelled = props.onToneSelectorCancelled,
+    toneEmoji = props.toneEmoji,
+    uploading = props.uploading,
+    uploadEnabled = props.uploadEnabled,
+    emojiToDelete = props.emojiToDelete,
+    initialUploadName = props.initialUploadName,
+    uploadErrorMessage = props.uploadErrorMessage,
+    onUploadCancelled = props.onUploadCancelled,
+    onUploadEmoji = props.onUploadEmoji,
+    onDeleteEmoji = props.onDeleteEmoji,
+    onCloseDelete = props.onCloseDelete,
+    onFileChooserClicked = props.onFileChooserClicked,
+    onOpenUpload = props.onOpenUpload,
+    activeCategoryId = props.activeCategoryId;
+  var listRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    allEmojiGroups = _useState2[0],
+    setAllEmojiGroups = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    virtualItems = _useState4[0],
+    setVirtualItems = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    lastYourUploadsRow = _useState6[0],
+    setLastYourUploadsRow = _useState6[1];
+  var categoryTracker = (0, _react.useMemo)(function () {
+    return new _CategoryTracker.default();
+  }, []);
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    categoriesChanged = _useState8[0],
+    setCategoriesChanged = _useState8[1];
+  var groupByCategory = (0, _react.useCallback)(function (currentUser) {
+    return function (categoryToGroupMap, emoji) {
+      addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+      // separate user emojis
+      if (emoji.category === _constants.customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
+        addToCategoryMap(categoryToGroupMap, emoji, _constants.yourUploadsCategory);
+      }
+      return categoryToGroupMap;
+    };
+  }, []);
+
+  /**
+   * onRowsRendered callback function
+   *
+   * Check the category of top of rendered row and inform category selector to change active category
+   * Rove index of emoji picker list
+   */
+  var onRowsRendered = (0, _react.useCallback)(function (indexes) {
+    var startIndex = indexes.startIndex;
+    var rowItem = virtualItems[startIndex];
+    var list = listRef.current;
+
+    // update tabIndex manually, startIndex is not 0 based here
+    if (rowItem instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+      // if top of row rendered is category heading, update tabIndex for the next emoji row
+      list === null || list === void 0 || list.updateFocusIndex(startIndex + 1);
+    } else if (rowItem instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+      // if top of row rendered is emoji row, update it's tabIndex.
+      list === null || list === void 0 || list.updateFocusIndex(startIndex);
+    }
+    if (!query) {
+      // Calculate category in view - only relevant if categories shown, i.e. no query
+      var currentCategory = findCategoryToActivate(rowItem);
+      if (currentCategory !== null && activeCategoryId !== currentCategory) {
+        if (onCategoryActivated) {
+          onCategoryActivated(currentCategory);
+        }
+      }
+    }
+  }, [virtualItems, query, activeCategoryId, onCategoryActivated]);
+  var buildEmojiGroupedByCategory = (0, _react.useCallback)(function (emojis, currentUser) {
+    var categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
+    setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
+      return categoryToGroupMap[key];
+    }).map(function (group) {
+      if (group.category !== _constants.frequentCategory) {
+        group.emojis.sort(byOrder);
+      }
+      return group;
+    }).sort(byOrder));
+  }, [groupByCategory]);
+  var addToCategoryMap = function addToCategoryMap(categoryToGroupMap, emoji, category) {
+    if (!categoryToGroupMap[category]) {
+      var categoryDefinition = _categories.CategoryDescriptionMap[category];
+      categoryToGroupMap[category] = {
+        emojis: [],
+        title: categoryDefinition.name,
+        category: category,
+        order: categoryDefinition.order
+      };
+    }
+    categoryToGroupMap[category].emojis.push(emoji);
+    return categoryToGroupMap;
+  };
+  var buildVirtualItemFromGroup = (0, _react.useCallback)(function (group) {
+    var items = [];
+    items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+      id: group.category,
+      title: group.title,
+      className: categoryClassname
+    }));
+    var remainingEmojis = group.emojis;
+    while (remainingEmojis.length > 0) {
+      var rowEmojis = remainingEmojis.slice(0, _EmojiPickerSizes.sizes.emojiPerRow);
+      remainingEmojis = remainingEmojis.slice(_EmojiPickerSizes.sizes.emojiPerRow);
+      items.push(new _EmojiPickerVirtualItems.EmojisRowItem({
+        category: group.category,
+        emojis: rowEmojis,
+        title: group.title,
+        showDelete: group.title === _constants.userCustomTitle,
+        onSelected: onEmojiSelected,
+        onDelete: onEmojiDelete,
+        onMouseMove: onEmojiActive,
+        onFocus: onEmojiActive
+      }));
+    }
+    return items;
+  }, [onEmojiSelected, onEmojiDelete, onEmojiActive]);
+  var buildVirtualItems = (0, _react.useCallback)(function () {
+    var items = [];
+    var prevFirstCategory = categoryTracker.getFirstCategory();
+    categoryTracker.reset();
+    if (loading) {
+      items.push(new _EmojiPickerVirtualItems.LoadingItem());
+    } else {
+      if (query) {
+        var search = _categories.CategoryDescriptionMap.SEARCH;
+        // Only a single "result" category
+        items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup({
+          category: _constants.searchCategory,
+          title: search.name,
+          emojis: emojis,
+          order: search.order
+        })));
+      } else {
+        // Group by category
+
+        // Not searching show in categories.
+        allEmojiGroups.forEach(function (group) {
+          // Optimisation - avoid re-rendering unaffected groups for the current selectedShortcut
+          // by not passing it to irrelevant groups
+          categoryTracker.add(group.emojis[0].category, items.length);
+          items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup(group)));
+          if (group.category === _constants.yourUploadsCategory) {
+            setLastYourUploadsRow(items.length - 1);
+          }
+        });
+      }
+    }
+
+    // make sure virtualItems is up-to-date before calling onRowsRendered
+    setVirtualItems(items);
+    if (!loading && !query) {
+      if (categoryTracker.getFirstCategory() !== prevFirstCategory) {
+        setCategoriesChanged(true);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allEmojiGroups, loading, query, emojis]);
+  var findCategoryToActivate = function findCategoryToActivate(row) {
+    var category = null;
+    if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+      category = row.props.id;
+    } else if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+      category = row.props.category;
+    }
+    // your uploads is rendered, take it as upload category, so could be highlighted in category selector
+    if (category === _constants.yourUploadsCategory) {
+      return _constants.customCategory;
+      // search results is rendered, return null so won't be highlighted for category selector
+    } else if (category === _constants.searchCategory) {
+      return null;
+    }
+    return category;
+  };
+  var rowSize = function rowSize(index) {
+    var _virtualItems$index;
+    return ((_virtualItems$index = virtualItems[index]) === null || _virtualItems$index === void 0 ? void 0 : _virtualItems$index.height) || _EmojiPickerSizes.sizes.categoryHeadingHeight;
+  };
+  var renderRow = function renderRow(context) {
+    return (0, _EmojiPickerVirtualItems.virtualItemRenderer)(virtualItems, context);
+  };
+
+  /**
+   * After deleting emoji, we'll update the focus index to the first emoji of last row of your uploads, so when user navigate back focus will still work
+   * if last emoji in your uploads is deleted, the updated focus index will be outdated, as there will be no your uploads section
+   * however, it'll trigger onChange from VirtualList, which will update focus index automatically for us
+   */
+  var handleOnCloseDelete = function handleOnCloseDelete() {
+    var list = listRef.current;
+    list === null || list === void 0 || list.updateFocusIndex(lastYourUploadsRow);
+    onCloseDelete();
+  };
+  var findEmojiRowAndColumnById = function findEmojiRowAndColumnById(emojiId) {
+    var columnIndex = -1;
+    // for most of cases, it'd be in first emoji row, so should be quite fast to find in real world
+    var rowIndex = virtualItems.findIndex(function (rowItem) {
+      if (rowItem instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+        // find uploaded emoji in each emoji row
+        columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+          return emoji.id === emojiId;
+        });
+        return columnIndex !== -1;
+      }
+      return false;
+    });
+    return {
+      rowIndex: rowIndex,
+      columnIndex: columnIndex
+    };
+  };
+
+  /**
+   * Scrolls to a category in the list view
+   */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      reveal: function reveal(category) {
+        var row = categoryTracker.getRow(category);
+        (0, _utils.scrollToRow)(listRef, row);
+      },
+      scrollToBottom: function scrollToBottom() {
+        (0, _utils.scrollToRow)(listRef, virtualItems.length);
+      },
+      scrollToTop: function scrollToTop() {
+        (0, _utils.scrollToRow)(listRef, 0);
+      },
+      scrollToRow: function scrollToRow(index) {
+        (0, _utils.scrollToRow)(listRef, index);
+      },
+      scrollToRecentlyUploaded: function scrollToRecentlyUploaded(uploadedEmoji) {
+        // when search results is shown
+        if (query) {
+          var _findEmojiRowAndColum = findEmojiRowAndColumnById(uploadedEmoji.id),
+            rowIndex = _findEmojiRowAndColum.rowIndex,
+            columnIndex = _findEmojiRowAndColum.columnIndex;
+          if (rowIndex !== -1) {
+            var _listRef$current;
+            (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToEmojiAndFocus(rowIndex, columnIndex);
+          }
+        } else {
+          // when seeing all emojis
+          var row = lastYourUploadsRow;
+          if (row > 0) {
+            var _listRef$current2;
+            (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToRowAndFocusLastEmoji(lastYourUploadsRow);
+          }
+        }
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (!query) {
+      buildEmojiGroupedByCategory(emojis, currentUser);
+    }
+  }, [emojis, selectedTone, loading, query, currentUser, buildEmojiGroupedByCategory]);
+  (0, _react.useEffect)(function () {
+    buildVirtualItems();
+  }, [allEmojiGroups, buildVirtualItems]);
+  (0, _react.useEffect)(function () {
+    if (categoriesChanged) {
+      onRowsRendered({
+        startIndex: 0
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [virtualItems, categoriesChanged]);
+  var virtualListHeight = (0, _react.useMemo)(function () {
+    return _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
+  }, [size]);
+  return (0, _react2.jsx)(EmojiPickerTabPanel, {
+    showSearchResults: !!query
+  }, (0, _react2.jsx)(_EmojiActions.default, {
+    selectedTone: selectedTone,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    uploadEnabled: uploadEnabled,
+    emojiToDelete: emojiToDelete,
+    initialUploadName: initialUploadName,
+    uploadErrorMessage: uploadErrorMessage,
+    onUploadCancelled: onUploadCancelled,
+    onUploadEmoji: onUploadEmoji,
+    onCloseDelete: handleOnCloseDelete,
+    onDeleteEmoji: onDeleteEmoji,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    query: query,
+    onChange: onSearch,
+    resultsCount: emojis.length
+  }), (0, _react2.jsx)(_EmojiPickerListContext.EmojiPickerListContextProvider, {
+    initialEmojisFocus: {
+      rowIndex: 1,
+      columnIndex: 0
+    }
+  }, (0, _react2.jsx)(_VirtualList.VirtualList, {
+    ref: listRef,
+    height: virtualListHeight,
+    overscanRowCount: 10,
+    rowCount: virtualItems.length,
+    rowHeight: rowSize,
+    rowRenderer: renderRow,
+    scrollToAlignment: "start",
+    width: _EmojiPickerSizes.sizes.listWidth,
+    onRowsRendered: onRowsRendered
+  })));
 });

package/dist/cjs/components/picker/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiPickerHeightOffset = void 0;
+exports.scrollToRow = exports.emojiPickerHeightOffset = void 0;
 var _constants = require("../../util/constants");
 var emojiPickerHeightOffset = exports.emojiPickerHeightOffset = function emojiPickerHeightOffset(size) {
   if (size === 'medium') {
@@ -12,4 +12,10 @@ var emojiPickerHeightOffset = exports.emojiPickerHeightOffset = function emojiPi
     return _constants.sizeGap * 2;
   }
   return 0;
+};
+
+// this function is being exported so it can be mocked in unit tests
+var scrollToRow = exports.scrollToRow = function scrollToRow(listRef, index) {
+  var _listRef$current;
+  (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToRow(index);
 };

package/dist/cjs/components/typeahead/EmojiTypeAheadComponent.js

@@ -25,6 +25,7 @@ var _typeHelpers = require("../../util/type-helpers");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _EmojiTypeAheadList = _interopRequireDefault(require("./EmojiTypeAheadList"));
 var _styles = require("./styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -196,14 +197,33 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var prevEmojiProvider = this.props.emojiProvider;
-      var nextEmojiProvider = nextProps.emojiProvider;
-      if (prevEmojiProvider !== nextEmojiProvider) {
-        prevEmojiProvider.unsubscribe(this.onProviderChange);
-        nextEmojiProvider.subscribe(this.onProviderChange);
-        this.onSearch(nextProps.query);
-      } else if (this.props.query !== nextProps.query) {
-        this.onSearch(nextProps.query);
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        var prevEmojiProvider = this.props.emojiProvider;
+        var nextEmojiProvider = nextProps.emojiProvider;
+        if (prevEmojiProvider !== nextEmojiProvider) {
+          prevEmojiProvider.unsubscribe(this.onProviderChange);
+          nextEmojiProvider.subscribe(this.onProviderChange);
+          this.onSearch(nextProps.query);
+        } else if (this.props.query !== nextProps.query) {
+          this.onSearch(nextProps.query);
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji')) {
+        if (prevProps !== this.props) {
+          var prevEmojiProvider = prevProps.emojiProvider;
+          var nextEmojiProvider = this.props.emojiProvider;
+          if (prevEmojiProvider !== nextEmojiProvider) {
+            prevEmojiProvider.unsubscribe(this.onProviderChange);
+            nextEmojiProvider.subscribe(this.onProviderChange);
+            this.onSearch(this.props.query);
+          } else if (prevProps.query !== this.props.query) {
+            this.onSearch(this.props.query);
+          }
+        }
       }
     }
   }, {