@atlaskit/emoji 69.0.1 → 69.0.3

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

@@ -8,35 +8,39 @@ Object.defineProperty(exports, "__esModule", {
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _constants = require("../../util/constants");
 var _categories = require("./categories");
 var _CategoryTracker = _interopRequireDefault(require("./CategoryTracker"));
 var _EmojiPickerSizes = require("./EmojiPickerSizes");
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
+var _EmojiPickerVirtualItems2 = require("../compiled/picker/EmojiPickerVirtualItems");
 var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
-var _styles = require("./styles");
+var _EmojiActions2 = _interopRequireDefault(require("../compiled/common/EmojiActions"));
 var _utils = require("./utils");
 var _VirtualList = require("./VirtualList");
-var _reactIntlNext = require("react-intl-next");
-var _i18n = require("../i18n");
+var _VirtualList2 = require("../compiled/picker/VirtualList");
 var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
+var _EmojiPickerTabPanel = _interopRequireDefault(require("./EmojiPickerTabPanel"));
+var _EmojiPickerTabPanel2 = _interopRequireDefault(require("../compiled/picker/EmojiPickerTabPanel"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 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 _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; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// ED-26865: use compiled EmojiActions when migrating picker to compiled css
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// when cleaning up `platform_editor_css_migrate_emoji`, delete these consts and rename the import
+var EmojiActions = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiActions2.default, _EmojiActions.default);
+var EmojiPickerTabPanel = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiPickerTabPanel2.default, _EmojiPickerTabPanel.default);
+var VirtualList = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _VirtualList2.VirtualList, _VirtualList.VirtualList);
+var virtualItemRenderer = (0, _platformFeatureFlagsReact.functionWithFG)('platform_editor_css_migrate_emoji', _EmojiPickerVirtualItems2.virtualItemRenderer, _EmojiPickerVirtualItems.virtualItemRenderer);
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -50,43 +54,7 @@ var categoryClassname = 'emoji-category';
 var byOrder = function byOrder(orderableA, orderableB) {
   return (orderableA.order || 0) - (orderableB.order || 0);
 };
-
-/**
- * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file to functional component in future
- * ticket: COLLAB-2317
- */
-var EmojiPickerTabPanelInternal = /*#__PURE__*/function (_PureComponent) {
-  function EmojiPickerTabPanelInternal() {
-    (0, _classCallCheck2.default)(this, EmojiPickerTabPanelInternal);
-    return _callSuper(this, EmojiPickerTabPanelInternal, arguments);
-  }
-  (0, _inherits2.default)(EmojiPickerTabPanelInternal, _PureComponent);
-  return (0, _createClass2.default)(EmojiPickerTabPanelInternal, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        formatMessage = _this$props.intl.formatMessage,
-        children = _this$props.children,
-        showSearchResults = _this$props.showSearchResults;
-      return (0, _react2.jsx)("div", {
-        ref: "root"
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        css: _styles.emojiPickerList,
-        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
-        id: RENDER_EMOJI_PICKER_LIST_TESTID,
-        role: "tabpanel",
-        "aria-label": formatMessage(_i18n.messages.emojiPickerListPanel)
-      }, (0, _react2.jsx)(_visuallyHidden.default, {
-        id: "emoji-picker-table-description"
-      }, formatMessage(_i18n.messages.emojiPickerGrid, {
-        showSearchResults: showSearchResults
-      })), children);
-    }
-  }]);
-}(_react.PureComponent);
-var EmojiPickerTabPanel = (0, _reactIntlNext.injectIntl)(EmojiPickerTabPanelInternal);
-var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureComponent2) {
+var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureComponent) {
   function EmojiPickerVirtualListInternalOld(_props) {
     var _this;
     (0, _classCallCheck2.default)(this, EmojiPickerVirtualListInternalOld);
@@ -108,12 +76,22 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       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 = _this.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;
+        if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+          if (rowItem instanceof _EmojiPickerVirtualItems2.EmojisRowItem) {
+            // find uploaded emoji in each emoji row
+            columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+              return emoji.id === emojiId;
+            });
+            return columnIndex !== -1;
+          }
+        } else {
+          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;
       });
@@ -123,29 +101,50 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       };
     });
     (0, _defineProperty2.default)(_this, "buildVirtualItemFromGroup", function (group) {
-      var _this$props2 = _this.props,
-        onEmojiSelected = _this$props2.onEmojiSelected,
-        onEmojiDelete = _this$props2.onEmojiDelete;
+      var _this$props = _this.props,
+        onEmojiSelected = _this$props.onEmojiSelected,
+        onEmojiDelete = _this$props.onEmojiDelete;
       var items = [];
-      items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
-        id: group.category,
-        title: group.title,
-        className: categoryClassname
-      }));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        items.push(new _EmojiPickerVirtualItems2.CategoryHeadingItem({
+          id: group.category,
+          title: group.title,
+          className: categoryClassname
+        }));
+      } else {
+        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: _this.onEmojiActive,
-          onFocus: _this.onEmojiActive
-        }));
+        if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+          items.push(new _EmojiPickerVirtualItems2.EmojisRowItem({
+            category: group.category,
+            emojis: rowEmojis,
+            title: group.title,
+            showDelete: group.title === _constants.userCustomTitle,
+            onSelected: onEmojiSelected,
+            onDelete: onEmojiDelete,
+            onMouseMove: _this.onEmojiActive,
+            onFocus: _this.onEmojiActive
+          }));
+        } else {
+          items.push(new _EmojiPickerVirtualItems.EmojisRowItem({
+            category: group.category,
+            emojis: rowEmojis,
+            title: group.title,
+            showDelete: group.title === _constants.userCustomTitle,
+            onSelected: onEmojiSelected,
+            onDelete: onEmojiDelete,
+            onMouseMove: _this.onEmojiActive,
+            onFocus: _this.onEmojiActive
+          }));
+        }
       }
       return items;
     });
@@ -157,7 +156,11 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       var prevFirstCategory = _this.categoryTracker.getFirstCategory();
       _this.categoryTracker.reset();
       if (loading) {
-        items.push(new _EmojiPickerVirtualItems.LoadingItem());
+        if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+          items.push(new _EmojiPickerVirtualItems2.LoadingItem());
+        } else {
+          items.push(new _EmojiPickerVirtualItems.LoadingItem());
+        }
       } else {
         if (query) {
           var search = _categories.CategoryDescriptionMap.SEARCH;
@@ -230,10 +233,18 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
     });
     (0, _defineProperty2.default)(_this, "findCategoryToActivate", function (row) {
       var category = null;
-      if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
-        category = row.props.id;
-      } else if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
-        category = row.props.category;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        if (row instanceof _EmojiPickerVirtualItems2.CategoryHeadingItem) {
+          category = row.props.id;
+        } else if (row instanceof _EmojiPickerVirtualItems2.EmojisRowItem) {
+          category = row.props.category;
+        }
+      } else {
+        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) {
@@ -256,12 +267,22 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       var list = _this.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 ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        if (rowItem instanceof _EmojiPickerVirtualItems2.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 _EmojiPickerVirtualItems2.EmojisRowItem) {
+          // if top of row rendered is emoji row, update it's tabIndex.
+          list === null || list === void 0 || list.updateFocusIndex(startIndex);
+        }
+      } else {
+        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 (!_this.props.query) {
         // Calculate category in view - only relevant if categories shown, i.e. no query
@@ -278,7 +299,7 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
       return ((_this$virtualItems$in = _this.virtualItems[index]) === null || _this$virtualItems$in === void 0 ? void 0 : _this$virtualItems$in.height) || _EmojiPickerSizes.sizes.categoryHeadingHeight;
     });
     (0, _defineProperty2.default)(_this, "renderRow", function (context) {
-      return (0, _EmojiPickerVirtualItems.virtualItemRenderer)(_this.virtualItems, context);
+      return virtualItemRenderer(_this.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
@@ -295,7 +316,7 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
     _this.buildVirtualItems(_props, _this.state);
     return _this;
   }
-  (0, _inherits2.default)(EmojiPickerVirtualListInternalOld, _PureComponent2);
+  (0, _inherits2.default)(EmojiPickerVirtualListInternalOld, _PureComponent);
   return (0, _createClass2.default)(EmojiPickerVirtualListInternalOld, [{
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
@@ -357,29 +378,29 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        query = _this$props3.query,
-        selectedTone = _this$props3.selectedTone,
-        onToneSelected = _this$props3.onToneSelected,
-        onToneSelectorCancelled = _this$props3.onToneSelectorCancelled,
-        toneEmoji = _this$props3.toneEmoji,
-        uploading = _this$props3.uploading,
-        uploadEnabled = _this$props3.uploadEnabled,
-        emojiToDelete = _this$props3.emojiToDelete,
-        initialUploadName = _this$props3.initialUploadName,
-        uploadErrorMessage = _this$props3.uploadErrorMessage,
-        onUploadCancelled = _this$props3.onUploadCancelled,
-        onUploadEmoji = _this$props3.onUploadEmoji,
-        onDeleteEmoji = _this$props3.onDeleteEmoji,
-        onFileChooserClicked = _this$props3.onFileChooserClicked,
-        onOpenUpload = _this$props3.onOpenUpload,
-        _this$props3$size = _this$props3.size,
-        size = _this$props3$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props3$size,
-        emojis = _this$props3.emojis;
+      var _this$props2 = this.props,
+        query = _this$props2.query,
+        selectedTone = _this$props2.selectedTone,
+        onToneSelected = _this$props2.onToneSelected,
+        onToneSelectorCancelled = _this$props2.onToneSelectorCancelled,
+        toneEmoji = _this$props2.toneEmoji,
+        uploading = _this$props2.uploading,
+        uploadEnabled = _this$props2.uploadEnabled,
+        emojiToDelete = _this$props2.emojiToDelete,
+        initialUploadName = _this$props2.initialUploadName,
+        uploadErrorMessage = _this$props2.uploadErrorMessage,
+        onUploadCancelled = _this$props2.onUploadCancelled,
+        onUploadEmoji = _this$props2.onUploadEmoji,
+        onDeleteEmoji = _this$props2.onDeleteEmoji,
+        onFileChooserClicked = _this$props2.onFileChooserClicked,
+        onOpenUpload = _this$props2.onOpenUpload,
+        _this$props2$size = _this$props2.size,
+        size = _this$props2$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props2$size,
+        emojis = _this$props2.emojis;
       var virtualListHeight = _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
-      return (0, _react2.jsx)(EmojiPickerTabPanel, {
+      return /*#__PURE__*/_react.default.createElement(EmojiPickerTabPanel, {
         showSearchResults: !!query
-      }, (0, _react2.jsx)(_EmojiActions.default, {
+      }, /*#__PURE__*/_react.default.createElement(EmojiActions, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
         onToneSelectorCancelled: onToneSelectorCancelled,
@@ -398,12 +419,12 @@ var EmojiPickerVirtualListInternalOld = exports.EmojiPickerVirtualListInternalOl
         query: query,
         onChange: this.onSearch,
         resultsCount: emojis.length
-      }), (0, _react2.jsx)(_EmojiPickerListContext.EmojiPickerListContextProvider, {
+      }), /*#__PURE__*/_react.default.createElement(_EmojiPickerListContext.EmojiPickerListContextProvider, {
         initialEmojisFocus: {
           rowIndex: 1,
           columnIndex: 0
         }
-      }, (0, _react2.jsx)(_VirtualList.VirtualList, {
+      }, /*#__PURE__*/_react.default.createElement(VirtualList, {
         ref: this.listRef,
         height: virtualListHeight,
         overscanRowCount: 10,
@@ -501,12 +522,22 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
     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 ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+      if (rowItem instanceof _EmojiPickerVirtualItems2.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 _EmojiPickerVirtualItems2.EmojisRowItem) {
+        // if top of row rendered is emoji row, update it's tabIndex.
+        list === null || list === void 0 || list.updateFocusIndex(startIndex);
+      }
+    } else {
+      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
@@ -544,25 +575,46 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
   };
   var buildVirtualItemFromGroup = (0, _react.useCallback)(function (group) {
     var items = [];
-    items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
-      id: group.category,
-      title: group.title,
-      className: categoryClassname
-    }));
+    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+      items.push(new _EmojiPickerVirtualItems2.CategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
+      }));
+    } else {
+      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
-      }));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        items.push(new _EmojiPickerVirtualItems2.EmojisRowItem({
+          category: group.category,
+          emojis: rowEmojis,
+          title: group.title,
+          showDelete: group.title === _constants.userCustomTitle,
+          onSelected: onEmojiSelected,
+          onDelete: onEmojiDelete,
+          onMouseMove: onEmojiActive,
+          onFocus: onEmojiActive
+        }));
+      } else {
+        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]);
@@ -571,7 +623,11 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
     var prevFirstCategory = categoryTracker.getFirstCategory();
     categoryTracker.reset();
     if (loading) {
-      items.push(new _EmojiPickerVirtualItems.LoadingItem());
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        items.push(new _EmojiPickerVirtualItems2.LoadingItem());
+      } else {
+        items.push(new _EmojiPickerVirtualItems.LoadingItem());
+      }
     } else {
       if (query) {
         var search = _categories.CategoryDescriptionMap.SEARCH;
@@ -609,10 +665,18 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
   }, [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;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+      if (row instanceof _EmojiPickerVirtualItems2.CategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof _EmojiPickerVirtualItems2.EmojisRowItem) {
+        category = row.props.category;
+      }
+    } else {
+      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) {
@@ -628,7 +692,7 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
     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);
+    return virtualItemRenderer(virtualItems, context);
   };
 
   /**
@@ -645,12 +709,22 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
     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;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        if (rowItem instanceof _EmojiPickerVirtualItems2.EmojisRowItem) {
+          // find uploaded emoji in each emoji row
+          columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+            return emoji.id === emojiId;
+          });
+          return columnIndex !== -1;
+        }
+      } else {
+        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;
     });
@@ -718,9 +792,9 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
   var virtualListHeight = (0, _react.useMemo)(function () {
     return _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
   }, [size]);
-  return (0, _react2.jsx)(EmojiPickerTabPanel, {
+  return /*#__PURE__*/_react.default.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
-  }, (0, _react2.jsx)(_EmojiActions.default, {
+  }, /*#__PURE__*/_react.default.createElement(EmojiActions, {
     selectedTone: selectedTone,
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
@@ -739,12 +813,12 @@ var EmojiPickerVirtualListInternalNew = exports.EmojiPickerVirtualListInternalNe
     query: query,
     onChange: onSearch,
     resultsCount: emojis.length
-  }), (0, _react2.jsx)(_EmojiPickerListContext.EmojiPickerListContextProvider, {
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerListContext.EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,
       columnIndex: 0
     }
-  }, (0, _react2.jsx)(_VirtualList.VirtualList, {
+  }, /*#__PURE__*/_react.default.createElement(VirtualList, {
     ref: listRef,
     height: virtualListHeight,
     overscanRowCount: 10,

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../i18n");
+var _EmojiPickerList = require("./EmojiPickerList");
+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 _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; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var emojiPickerList = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  // To force Firefox/IE/Edge to shrink the list, if necessary (e.g. when upload panel in place)
+  height: '0'
+});
+
+/**
+ * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file + EmojiPickerList to functional component in future
+ * ticket: COLLAB-2317
+ */
+var EmojiPickerTabPanelInternal = /*#__PURE__*/function (_PureComponent) {
+  function EmojiPickerTabPanelInternal() {
+    (0, _classCallCheck2.default)(this, EmojiPickerTabPanelInternal);
+    return _callSuper(this, EmojiPickerTabPanelInternal, arguments);
+  }
+  (0, _inherits2.default)(EmojiPickerTabPanelInternal, _PureComponent);
+  return (0, _createClass2.default)(EmojiPickerTabPanelInternal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        formatMessage = _this$props.intl.formatMessage,
+        children = _this$props.children,
+        showSearchResults = _this$props.showSearchResults;
+      return (0, _react2.jsx)("div", {
+        ref: "root",
+        css: emojiPickerList,
+        "data-testid": _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID,
+        id: _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID,
+        role: "tabpanel",
+        "aria-label": formatMessage(_i18n.messages.emojiPickerListPanel)
+      }, (0, _react2.jsx)(_visuallyHidden.default, {
+        id: "emoji-picker-table-description"
+      }, formatMessage(_i18n.messages.emojiPickerGrid, {
+        showSearchResults: showSearchResults
+      })), children);
+    }
+  }]);
+}(_react.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(EmojiPickerTabPanelInternal);

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerList = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiActionsContainerWithBottomShadow = exports.categorySelectorTablist = exports.categorySelector = void 0;
+exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiActionsContainerWithBottomShadow = exports.categorySelectorTablist = exports.categorySelector = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _sharedStyles = require("../../util/shared-styles");
@@ -65,15 +65,6 @@ var categorySelectorTablist = exports.categorySelectorTablist = (0, _react.css)(
 
 /// EmojiPickerList
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var emojiPickerList = exports.emojiPickerList = (0, _react.css)({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  // To force Firefox/IE/Edge to shrink the list, if necessary (e.g. when upload panel in place)
-  height: '0'
-});
-
 // focus style is enabled by default - turn it off
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var virtualList = exports.virtualList = (0, _react.css)({