@atlaskit/emoji 69.0.1 → 69.0.3

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

@@ -1,34 +1,36 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { createRef, PureComponent, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
 import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
-import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import EmojiActions from '../common/EmojiActions'; // ED-26865: use compiled EmojiActions when migrating picker to compiled css
-
-import { emojiPickerList } from './styles';
+import { CategoryHeadingItem as EmotionCategoryHeadingItem, EmojisRowItem as EmotionEmojisRowItem, LoadingItem as EmotionLoadingItem, virtualItemRenderer as virtualItemRendererEmotion } from './EmojiPickerVirtualItems';
+import { CategoryHeadingItem as CompiledCategoryHeadingItem, EmojisRowItem as CompiledEmojisRowItem, LoadingItem as CompiledLoadingItem, virtualItemRenderer as virtualItemRendererCompiled } from '../compiled/picker/EmojiPickerVirtualItems';
+import { default as EmotionEmojiActions } from '../common/EmojiActions';
+import { default as CompiledEmojiActions } from '../compiled/common/EmojiActions';
 import { emojiPickerHeightOffset, scrollToRow as _scrollToRow } from './utils';
-import { VirtualList } from './VirtualList';
-import { injectIntl } from 'react-intl-next';
-import { messages } from '../i18n';
+import { VirtualList as EmotionVirtualList } from './VirtualList';
+import { VirtualList as CompiledVirtualList } from '../compiled/picker/VirtualList';
 import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
+import { default as EmotionEmojiPickerTabPanel } from './EmojiPickerTabPanel';
+import { default as CompiledEmojiPickerTabPanel } from '../compiled/picker/EmojiPickerTabPanel';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG, functionWithFG } from '@atlaskit/platform-feature-flags-react';
+
+// when cleaning up `platform_editor_css_migrate_emoji`, delete these consts and rename the import
+var EmojiActions = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiActions, EmotionEmojiActions);
+var EmojiPickerTabPanel = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPickerTabPanel, EmotionEmojiPickerTabPanel);
+var VirtualList = componentWithFG('platform_editor_css_migrate_emoji', CompiledVirtualList, EmotionVirtualList);
+var virtualItemRenderer = functionWithFG('platform_editor_css_migrate_emoji', virtualItemRendererCompiled, virtualItemRendererEmotion);
 
 /**
  * Test id for wrapper Emoji Picker List div
@@ -43,43 +45,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() {
-    _classCallCheck(this, EmojiPickerTabPanelInternal);
-    return _callSuper(this, EmojiPickerTabPanelInternal, arguments);
-  }
-  _inherits(EmojiPickerTabPanelInternal, _PureComponent);
-  return _createClass(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 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: emojiPickerList,
-        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
-        id: RENDER_EMOJI_PICKER_LIST_TESTID,
-        role: "tabpanel",
-        "aria-label": formatMessage(messages.emojiPickerListPanel)
-      }, jsx(VisuallyHidden, {
-        id: "emoji-picker-table-description"
-      }, formatMessage(messages.emojiPickerGrid, {
-        showSearchResults: showSearchResults
-      })), children);
-    }
-  }]);
-}(PureComponent);
-var EmojiPickerTabPanel = injectIntl(EmojiPickerTabPanelInternal);
-export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureComponent2) {
+export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureComponent) {
   function EmojiPickerVirtualListInternalOld(_props) {
     var _this;
     _classCallCheck(this, EmojiPickerVirtualListInternalOld);
@@ -101,12 +67,22 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
       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 EmojisRowItem) {
-          // find uploaded emoji in each emoji row
-          columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
-            return emoji.id === emojiId;
-          });
-          return columnIndex !== -1;
+        if (fg('platform_editor_css_migrate_emoji')) {
+          if (rowItem instanceof CompiledEmojisRowItem) {
+            // 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 EmotionEmojisRowItem) {
+            // find uploaded emoji in each emoji row
+            columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+              return emoji.id === emojiId;
+            });
+            return columnIndex !== -1;
+          }
         }
         return false;
       });
@@ -116,29 +92,50 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
       };
     });
     _defineProperty(_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 CategoryHeadingItem({
-        id: group.category,
-        title: group.title,
-        className: categoryClassname
-      }));
+      if (fg('platform_editor_css_migrate_emoji')) {
+        items.push(new CompiledCategoryHeadingItem({
+          id: group.category,
+          title: group.title,
+          className: categoryClassname
+        }));
+      } else {
+        items.push(new EmotionCategoryHeadingItem({
+          id: group.category,
+          title: group.title,
+          className: categoryClassname
+        }));
+      }
       var remainingEmojis = group.emojis;
       while (remainingEmojis.length > 0) {
         var rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
         remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
-        items.push(new EmojisRowItem({
-          category: group.category,
-          emojis: rowEmojis,
-          title: group.title,
-          showDelete: group.title === userCustomTitle,
-          onSelected: onEmojiSelected,
-          onDelete: onEmojiDelete,
-          onMouseMove: _this.onEmojiActive,
-          onFocus: _this.onEmojiActive
-        }));
+        if (fg('platform_editor_css_migrate_emoji')) {
+          items.push(new CompiledEmojisRowItem({
+            category: group.category,
+            emojis: rowEmojis,
+            title: group.title,
+            showDelete: group.title === userCustomTitle,
+            onSelected: onEmojiSelected,
+            onDelete: onEmojiDelete,
+            onMouseMove: _this.onEmojiActive,
+            onFocus: _this.onEmojiActive
+          }));
+        } else {
+          items.push(new EmotionEmojisRowItem({
+            category: group.category,
+            emojis: rowEmojis,
+            title: group.title,
+            showDelete: group.title === userCustomTitle,
+            onSelected: onEmojiSelected,
+            onDelete: onEmojiDelete,
+            onMouseMove: _this.onEmojiActive,
+            onFocus: _this.onEmojiActive
+          }));
+        }
       }
       return items;
     });
@@ -150,7 +147,11 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
       var prevFirstCategory = _this.categoryTracker.getFirstCategory();
       _this.categoryTracker.reset();
       if (loading) {
-        items.push(new LoadingItem());
+        if (fg('platform_editor_css_migrate_emoji')) {
+          items.push(new CompiledLoadingItem());
+        } else {
+          items.push(new EmotionLoadingItem());
+        }
       } else {
         if (query) {
           var search = CategoryDescriptionMap.SEARCH;
@@ -223,10 +224,18 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
     });
     _defineProperty(_this, "findCategoryToActivate", function (row) {
       var category = null;
-      if (row instanceof CategoryHeadingItem) {
-        category = row.props.id;
-      } else if (row instanceof EmojisRowItem) {
-        category = row.props.category;
+      if (fg('platform_editor_css_migrate_emoji')) {
+        if (row instanceof CompiledCategoryHeadingItem) {
+          category = row.props.id;
+        } else if (row instanceof CompiledEmojisRowItem) {
+          category = row.props.category;
+        }
+      } else {
+        if (row instanceof EmotionCategoryHeadingItem) {
+          category = row.props.id;
+        } else if (row instanceof EmotionEmojisRowItem) {
+          category = row.props.category;
+        }
       }
       // your uploads is rendered, take it as upload category, so could be highlighted in category selector
       if (category === yourUploadsCategory) {
@@ -249,12 +258,22 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
       var list = _this.listRef.current;
 
       // update tabIndex manually, startIndex is not 0 based here
-      if (rowItem instanceof 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 EmojisRowItem) {
-        // if top of row rendered is emoji row, update it's tabIndex.
-        list === null || list === void 0 || list.updateFocusIndex(startIndex);
+      if (fg('platform_editor_css_migrate_emoji')) {
+        if (rowItem instanceof CompiledCategoryHeadingItem) {
+          // 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 CompiledEmojisRowItem) {
+          // if top of row rendered is emoji row, update it's tabIndex.
+          list === null || list === void 0 || list.updateFocusIndex(startIndex);
+        }
+      } else {
+        if (rowItem instanceof EmotionCategoryHeadingItem) {
+          // 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 EmotionEmojisRowItem) {
+          // 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
@@ -288,7 +307,7 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
     _this.buildVirtualItems(_props, _this.state);
     return _this;
   }
-  _inherits(EmojiPickerVirtualListInternalOld, _PureComponent2);
+  _inherits(EmojiPickerVirtualListInternalOld, _PureComponent);
   return _createClass(EmojiPickerVirtualListInternalOld, [{
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
@@ -350,29 +369,29 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
   }, {
     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 ? 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 ? defaultEmojiPickerSize : _this$props2$size,
+        emojis = _this$props2.emojis;
       var virtualListHeight = sizes.listHeight + emojiPickerHeightOffset(size);
-      return jsx(EmojiPickerTabPanel, {
+      return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
         showSearchResults: !!query
-      }, jsx(EmojiActions, {
+      }, /*#__PURE__*/React.createElement(EmojiActions, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
         onToneSelectorCancelled: onToneSelectorCancelled,
@@ -391,12 +410,12 @@ export var EmojiPickerVirtualListInternalOld = /*#__PURE__*/function (_PureCompo
         query: query,
         onChange: this.onSearch,
         resultsCount: emojis.length
-      }), jsx(EmojiPickerListContextProvider, {
+      }), /*#__PURE__*/React.createElement(EmojiPickerListContextProvider, {
         initialEmojisFocus: {
           rowIndex: 1,
           columnIndex: 0
         }
-      }, jsx(VirtualList, {
+      }, /*#__PURE__*/React.createElement(VirtualList, {
         ref: this.listRef,
         height: virtualListHeight,
         overscanRowCount: 10,
@@ -494,12 +513,22 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
     var list = listRef.current;
 
     // update tabIndex manually, startIndex is not 0 based here
-    if (rowItem instanceof 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 EmojisRowItem) {
-      // if top of row rendered is emoji row, update it's tabIndex.
-      list === null || list === void 0 || list.updateFocusIndex(startIndex);
+    if (fg('platform_editor_css_migrate_emoji')) {
+      if (rowItem instanceof CompiledCategoryHeadingItem) {
+        // 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 CompiledEmojisRowItem) {
+        // if top of row rendered is emoji row, update it's tabIndex.
+        list === null || list === void 0 || list.updateFocusIndex(startIndex);
+      }
+    } else {
+      if (rowItem instanceof EmotionCategoryHeadingItem) {
+        // 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 EmotionEmojisRowItem) {
+        // 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
@@ -537,25 +566,46 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
   };
   var buildVirtualItemFromGroup = useCallback(function (group) {
     var items = [];
-    items.push(new CategoryHeadingItem({
-      id: group.category,
-      title: group.title,
-      className: categoryClassname
-    }));
+    if (fg('platform_editor_css_migrate_emoji')) {
+      items.push(new CompiledCategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
+      }));
+    } else {
+      items.push(new EmotionCategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
+      }));
+    }
     var remainingEmojis = group.emojis;
     while (remainingEmojis.length > 0) {
       var rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
       remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
-      items.push(new EmojisRowItem({
-        category: group.category,
-        emojis: rowEmojis,
-        title: group.title,
-        showDelete: group.title === userCustomTitle,
-        onSelected: onEmojiSelected,
-        onDelete: onEmojiDelete,
-        onMouseMove: onEmojiActive,
-        onFocus: onEmojiActive
-      }));
+      if (fg('platform_editor_css_migrate_emoji')) {
+        items.push(new CompiledEmojisRowItem({
+          category: group.category,
+          emojis: rowEmojis,
+          title: group.title,
+          showDelete: group.title === userCustomTitle,
+          onSelected: onEmojiSelected,
+          onDelete: onEmojiDelete,
+          onMouseMove: onEmojiActive,
+          onFocus: onEmojiActive
+        }));
+      } else {
+        items.push(new EmotionEmojisRowItem({
+          category: group.category,
+          emojis: rowEmojis,
+          title: group.title,
+          showDelete: group.title === userCustomTitle,
+          onSelected: onEmojiSelected,
+          onDelete: onEmojiDelete,
+          onMouseMove: onEmojiActive,
+          onFocus: onEmojiActive
+        }));
+      }
     }
     return items;
   }, [onEmojiSelected, onEmojiDelete, onEmojiActive]);
@@ -564,7 +614,11 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
     var prevFirstCategory = categoryTracker.getFirstCategory();
     categoryTracker.reset();
     if (loading) {
-      items.push(new LoadingItem());
+      if (fg('platform_editor_css_migrate_emoji')) {
+        items.push(new CompiledLoadingItem());
+      } else {
+        items.push(new EmotionLoadingItem());
+      }
     } else {
       if (query) {
         var search = CategoryDescriptionMap.SEARCH;
@@ -602,10 +656,18 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
   }, [allEmojiGroups, loading, query, emojis]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
-    if (row instanceof CategoryHeadingItem) {
-      category = row.props.id;
-    } else if (row instanceof EmojisRowItem) {
-      category = row.props.category;
+    if (fg('platform_editor_css_migrate_emoji')) {
+      if (row instanceof CompiledCategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof CompiledEmojisRowItem) {
+        category = row.props.category;
+      }
+    } else {
+      if (row instanceof EmotionCategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof EmotionEmojisRowItem) {
+        category = row.props.category;
+      }
     }
     // your uploads is rendered, take it as upload category, so could be highlighted in category selector
     if (category === yourUploadsCategory) {
@@ -638,12 +700,22 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
     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 EmojisRowItem) {
-        // find uploaded emoji in each emoji row
-        columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
-          return emoji.id === emojiId;
-        });
-        return columnIndex !== -1;
+      if (fg('platform_editor_css_migrate_emoji')) {
+        if (rowItem instanceof CompiledEmojisRowItem) {
+          // 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 EmotionEmojisRowItem) {
+          // find uploaded emoji in each emoji row
+          columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
+            return emoji.id === emojiId;
+          });
+          return columnIndex !== -1;
+        }
       }
       return false;
     });
@@ -711,9 +783,9 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
   var virtualListHeight = useMemo(function () {
     return sizes.listHeight + emojiPickerHeightOffset(size);
   }, [size]);
-  return jsx(EmojiPickerTabPanel, {
+  return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
-  }, jsx(EmojiActions, {
+  }, /*#__PURE__*/React.createElement(EmojiActions, {
     selectedTone: selectedTone,
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
@@ -732,12 +804,12 @@ export var EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef(fun
     query: query,
     onChange: onSearch,
     resultsCount: emojis.length
-  }), jsx(EmojiPickerListContextProvider, {
+  }), /*#__PURE__*/React.createElement(EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,
       columnIndex: 0
     }
-  }, jsx(VirtualList, {
+  }, /*#__PURE__*/React.createElement(VirtualList, {
     ref: listRef,
     height: virtualListHeight,
     overscanRowCount: 10,

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

@@ -0,0 +1,59 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+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; })(); }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { PureComponent } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
+var emojiPickerList = 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() {
+    _classCallCheck(this, EmojiPickerTabPanelInternal);
+    return _callSuper(this, EmojiPickerTabPanelInternal, arguments);
+  }
+  _inherits(EmojiPickerTabPanelInternal, _PureComponent);
+  return _createClass(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 jsx("div", {
+        ref: "root",
+        css: emojiPickerList,
+        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
+        id: RENDER_EMOJI_PICKER_LIST_TESTID,
+        role: "tabpanel",
+        "aria-label": formatMessage(messages.emojiPickerListPanel)
+      }, jsx(VisuallyHidden, {
+        id: "emoji-picker-table-description"
+      }, formatMessage(messages.emojiPickerGrid, {
+        showSearchResults: showSearchResults
+      })), children);
+    }
+  }]);
+}(PureComponent);
+export default injectIntl(EmojiPickerTabPanelInternal);

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

@@ -58,15 +58,6 @@ export var categorySelectorTablist = css({
 
 /// EmojiPickerList
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var emojiPickerList = 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
 export var virtualList = css({

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 import { AbstractResource } from '@atlaskit/util-service-support';
 import { Emoji, EmojiPlaceholder } from './element';
 import ResourcedEmoji from './components/common/ResourcedEmoji';
-import EmojiPicker, { preloadEmojiPicker } from './components/picker/EmojiPicker';
+import { EmojiPicker } from './picker';
+import { preloadEmojiPicker } from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';

package/dist/esm/picker.js

@@ -1 +1,5 @@
-export { default as EmojiPicker } from './components/picker/EmojiPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { default as EmotionEmojiPicker } from './components/picker/EmojiPicker';
+import { default as CompiledEmojiPicker } from './components/compiled/picker/EmojiPicker';
+var EmojiPicker = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPicker, EmotionEmojiPicker);
+export { EmojiPicker };

package/dist/esm/util/analytics/analytics.js

@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.0.1"
+      packageVersion: "69.0.3"
     }, attributes)
   };
 };

package/dist/types/components/compiled/picker/CategorySelector.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { CategoryDescription, OnCategory } from '../../../types';
+import { type CategoryGroupKey, type CategoryId } from '../../picker/categories';
+export interface Props {
+    dynamicCategories?: CategoryId[];
+    activeCategoryId?: CategoryId | null;
+    disableCategories?: boolean;
+    onCategorySelected?: OnCategory;
+}
+export type CategoryMap = {
+    [id: string]: CategoryDescription;
+};
+export declare const sortCategories: (c1: CategoryGroupKey, c2: CategoryGroupKey) => number;
+export declare const categorySelectorComponentTestId = "category-selector-component";
+export declare const categorySelectorCategoryTestId: (categoryId: string) => string;
+declare const CategorySelector: (props: Props) => JSX.Element;
+export default CategorySelector;