@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -8,22 +8,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.RENDER_EMOJI_PICKER_LIST_TESTID = exports.EmojiPickerVirtualListInternal = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
-var _react = _interopRequireWildcard(require("react"));
+var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
 var _constants = require("../../util/constants");
+var _filterHiddenEmojis = require("../../util/filter-hidden-emojis");
 var _productivityColors = require("../../util/productivity-colors");
-var _hiddenEmojis = require("../../util/hidden-emojis");
+var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
+var _i18n = require("../i18n");
 var _categories = require("./categories");
+var _CategoryHeadingItem = require("./CategoryHeadingItem");
 var _CategoryTracker = _interopRequireDefault(require("./CategoryTracker"));
 var _EmojiPickerSizes = require("./EmojiPickerSizes");
-var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
-var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
-var _utils = require("./utils");
-var _VirtualList = require("./VirtualList");
-var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
 var _EmojiPickerTabPanel = _interopRequireDefault(require("./EmojiPickerTabPanel"));
-var _i18n = require("../i18n");
+var _EmojisRowItem = require("./EmojisRowItem");
+var _LoadingItem = require("./LoadingItem");
+var _NoResultsItem = require("./NoResultsItem");
+var _VirtualList = require("./VirtualList");
+var _emojiPickerHeightOffset = require("./emojiPickerHeightOffset");
+var _scrollToRow2 = require("./scrollToRow");
+var _virtualItemRenderer = require("./virtualItemRenderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Test id for wrapper Emoji Picker List div
@@ -126,7 +131,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     setCategoriesChanged = _useState0[1];
   var isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
   var visibleEmojis = (0, _react.useMemo)(function () {
-    return isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojis) : emojis;
+    return isTeamojiExperimentEnabled ? (0, _filterHiddenEmojis.filterHiddenEmojis)(emojis) : emojis;
   }, [emojis, isTeamojiExperimentEnabled]);
   var productivityColorPreviewEmojis = (0, _react.useMemo)(function () {
     return isTeamojiExperimentEnabled ? (0, _productivityColors.getProductivityColorPreviewEmojis)(visibleEmojis) : {};
@@ -184,13 +189,13 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   }, [addToCategoryMap, isTeamojiExperimentEnabled]);
   var findAtlassianSubcategoryToActivate = (0, _react.useCallback)(function (startIndex) {
     var row = virtualItems[startIndex];
-    if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem && row.props.id === atlassianCategory) {
+    if (row instanceof _CategoryHeadingItem.CategoryHeadingItem && row.props.id === atlassianCategory) {
       var nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(function (item) {
-        return item instanceof _EmojiPickerVirtualItems.EmojisRowItem && item.props.category === atlassianCategory;
+        return item instanceof _EmojisRowItem.EmojisRowItem && item.props.category === atlassianCategory;
       });
       return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
     }
-    if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem && row.props.category === atlassianCategory) {
+    if (row instanceof _EmojisRowItem.EmojisRowItem && row.props.category === atlassianCategory) {
       return row.props.title;
     }
     return null;
@@ -208,10 +213,10 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     var list = listRef.current;
 
     // update tabIndex manually, startIndex is not 0 based here
-    if (rowItem instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+    if (rowItem instanceof _CategoryHeadingItem.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) {
+    } else if (rowItem instanceof _EmojisRowItem.EmojisRowItem) {
       // if top of row rendered is emoji row, update it's tabIndex.
       list === null || list === void 0 || list.updateFocusIndex(startIndex);
     }
@@ -258,7 +263,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     while (remainingEmojis.length > 0) {
       var rowEmojis = remainingEmojis.slice(0, _EmojiPickerSizes.sizes.emojiPerRow);
       remainingEmojis = remainingEmojis.slice(_EmojiPickerSizes.sizes.emojiPerRow);
-      items.push(new _EmojiPickerVirtualItems.EmojisRowItem({
+      items.push(new _EmojisRowItem.EmojisRowItem({
         category: category,
         emojis: rowEmojis,
         title: title,
@@ -276,7 +281,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     var items = [];
     var hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories3 = group.subcategories) !== null && _group$subcategories3 !== void 0 && _group$subcategories3.length);
     if (!hasAtlassianSubcategories) {
-      items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+      items.push(new _CategoryHeadingItem.CategoryHeadingItem({
         id: group.category,
         title: group.title,
         className: categoryClassname
@@ -298,7 +303,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         return a.title.localeCompare(b.title);
       });
       sortedSubcategories.forEach(function (subcategory) {
-        items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+        items.push(new _CategoryHeadingItem.CategoryHeadingItem({
           id: group.category,
           title: subcategory.title,
           className: categoryClassname
@@ -315,18 +320,18 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     var prevFirstCategory = categoryTracker.getFirstCategory();
     categoryTracker.reset();
     if (loading) {
-      items.push(new _EmojiPickerVirtualItems.LoadingItem());
+      items.push(new _LoadingItem.LoadingItem());
     } else {
       if (query) {
         var search = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew.SEARCH : _categories.CategoryDescriptionMap.SEARCH;
         if (visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
-          items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+          items.push(new _CategoryHeadingItem.CategoryHeadingItem({
             id: _constants.searchCategory,
             title: formatMessage(_i18n.messages.emojiPickerNoResults),
             className: categoryClassname
           }));
-          items.push(new _EmojiPickerVirtualItems.NoResultsItem({
+          items.push(new _NoResultsItem.NoResultsItem({
             onOpenUpload: onOpenUpload,
             uploadEnabled: uploadEnabled
           }));
@@ -366,9 +371,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   }, [allEmojiGroups, buildVirtualItemFromGroup, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled, visibleEmojis]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
-    if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+    if (row instanceof _CategoryHeadingItem.CategoryHeadingItem) {
       category = row.props.id;
-    } else if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+    } else if (row instanceof _EmojisRowItem.EmojisRowItem) {
       category = row.props.category;
     }
     // your uploads is rendered, take it as upload category, so could be highlighted in category selector
@@ -385,7 +390,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     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 (0, _virtualItemRenderer.virtualItemRenderer)(virtualItems, context);
   };
 
   /**
@@ -402,7 +407,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     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) {
+      if (rowItem instanceof _EmojisRowItem.EmojisRowItem) {
         // find uploaded emoji in each emoji row
         columnIndex = rowItem.props.emojis.findIndex(function (emoji) {
           return emoji.id === emojiId;
@@ -426,16 +431,16 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         var _categoryTracker$getR;
         var preferYourUploads = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
         var row = preferYourUploads && category === _constants.customCategory ? (_categoryTracker$getR = categoryTracker.getRow(_constants.yourUploadsCategory)) !== null && _categoryTracker$getR !== void 0 ? _categoryTracker$getR : categoryTracker.getRow(category) : categoryTracker.getRow(category);
-        (0, _utils.scrollToRow)(listRef, row);
+        (0, _scrollToRow2.scrollToRow)(listRef, row);
       },
       scrollToBottom: function scrollToBottom() {
-        (0, _utils.scrollToRow)(listRef, virtualItems.length);
+        (0, _scrollToRow2.scrollToRow)(listRef, virtualItems.length);
       },
       scrollToTop: function scrollToTop() {
-        (0, _utils.scrollToRow)(listRef, 0);
+        (0, _scrollToRow2.scrollToRow)(listRef, 0);
       },
       scrollToRow: function scrollToRow(index) {
-        (0, _utils.scrollToRow)(listRef, index);
+        (0, _scrollToRow2.scrollToRow)(listRef, index);
       },
       scrollToRecentlyUploaded: function scrollToRecentlyUploaded(uploadedEmoji) {
         var shouldFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -489,9 +494,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   var virtualListHeight = (0, _react.useMemo)(function () {
     if (query && visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
       // No-results state: expand the list height to fit heading + illustration without scrolling
-      return _EmojiPickerSizes.sizes.categoryHeadingHeight + _EmojiPickerSizes.sizes.noResultsHeight + (0, _utils.emojiPickerHeightOffset)(size);
+      return _EmojiPickerSizes.sizes.categoryHeadingHeight + _EmojiPickerSizes.sizes.noResultsHeight + (0, _emojiPickerHeightOffset.emojiPickerHeightOffset)(size);
     }
-    return isTeamojiExperimentEnabled ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) + (useFooterSpaceForList ? _constants.emojiPickerPreviewHeight : 0) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
+    return isTeamojiExperimentEnabled ? _EmojiPickerSizes.sizes.listHeightNew + (0, _emojiPickerHeightOffset.emojiPickerHeightOffset)(size) + (useFooterSpaceForList ? _constants.emojiPickerPreviewHeight : 0) : _EmojiPickerSizes.sizes.listHeight + (0, _emojiPickerHeightOffset.emojiPickerHeightOffset)(size);
   }, [size, query, visibleEmojis.length, isTeamojiExperimentEnabled, useFooterSpaceForList]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerTabPanel.default, {
     showSearchResults: !!query

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

@@ -1,99 +1,5 @@
-/* EmojiPickerVirtualItems.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.virtualItemRenderer = exports.NoResultsItem = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
-require("./EmojiPickerVirtualItems.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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 _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _EmojiPickerCategoryHeading = _interopRequireDefault(require("./EmojiPickerCategoryHeading"));
-var _EmojiPickerEmojiRow = _interopRequireDefault(require("./EmojiPickerEmojiRow"));
-var _EmojiPickerNoResults = _interopRequireDefault(require("./EmojiPickerNoResults"));
-var _EmojiPickerSizes = require("./EmojiPickerSizes");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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; })(); }
-var emojiPickerSpinner = null;
-var AbstractItem = exports.AbstractItem = /*#__PURE__*/(0, _createClass2.default)(function AbstractItem(props, height) {
-  (0, _classCallCheck2.default)(this, AbstractItem);
-  this.props = props;
-  this.height = height;
-});
-var EmojisRowItem = exports.EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
-  function EmojisRowItem(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, EmojisRowItem);
-    _this = _callSuper(this, EmojisRowItem, [props, _EmojiPickerSizes.sizes.emojiRowHeight]);
-    (0, _defineProperty2.default)(_this, "renderItem", function (context) {
-      return /*#__PURE__*/React.createElement(_EmojiPickerEmojiRow.default, (0, _extends2.default)({}, _this.props, {
-        virtualItemContext: context
-      }));
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(EmojisRowItem, _AbstractItem);
-  return (0, _createClass2.default)(EmojisRowItem);
-}(AbstractItem);
-var LoadingItem = exports.LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
-  function LoadingItem() {
-    var _this2;
-    (0, _classCallCheck2.default)(this, LoadingItem);
-    _this2 = _callSuper(this, LoadingItem, [{}, _EmojiPickerSizes.sizes.loadingRowHeight]);
-    (0, _defineProperty2.default)(_this2, "renderItem", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _4t3i1w81 _1bah1h6o _4cvr1h6o _nphsidpf _t1edidpf _1t3b1wug"])
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_spinner.default, {
-        size: "medium"
-      })));
-    });
-    return _this2;
-  }
-  (0, _inherits2.default)(LoadingItem, _AbstractItem2);
-  return (0, _createClass2.default)(LoadingItem);
-}(AbstractItem);
-var CategoryHeadingItem = exports.CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
-  function CategoryHeadingItem(props) {
-    var _this3;
-    (0, _classCallCheck2.default)(this, CategoryHeadingItem);
-    _this3 = _callSuper(this, CategoryHeadingItem, [props, _EmojiPickerSizes.sizes.categoryHeadingHeight]);
-    (0, _defineProperty2.default)(_this3, "renderItem", function () {
-      return /*#__PURE__*/React.createElement(_EmojiPickerCategoryHeading.default, _this3.props);
-    });
-    return _this3;
-  }
-  (0, _inherits2.default)(CategoryHeadingItem, _AbstractItem3);
-  return (0, _createClass2.default)(CategoryHeadingItem);
-}(AbstractItem);
-var NoResultsItem = exports.NoResultsItem = /*#__PURE__*/function (_AbstractItem4) {
-  function NoResultsItem(props) {
-    var _this4;
-    (0, _classCallCheck2.default)(this, NoResultsItem);
-    _this4 = _callSuper(this, NoResultsItem, [props, _EmojiPickerSizes.sizes.noResultsHeight]);
-    (0, _defineProperty2.default)(_this4, "renderItem", function () {
-      return /*#__PURE__*/React.createElement(_EmojiPickerNoResults.default, _this4.props);
-    });
-    return _this4;
-  }
-  (0, _inherits2.default)(NoResultsItem, _AbstractItem4);
-  return (0, _createClass2.default)(NoResultsItem);
-}(AbstractItem);
-var virtualItemRenderer = exports.virtualItemRenderer = function virtualItemRenderer(rows, context) {
-  var index = context.index,
-    key = context.key;
-  var row = rows[index];
-  return /*#__PURE__*/React.createElement("div", {
-    key: key
-  }, row && row.renderItem(context));
-};
+});

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

@@ -0,0 +1,39 @@
+/* EmojisRowItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojisRowItem = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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 _AbstractItem2 = require("./AbstractItem");
+var _EmojiPickerEmojiRow = _interopRequireDefault(require("./EmojiPickerEmojiRow"));
+var _EmojiPickerSizes = require("./EmojiPickerSizes");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; })(); }
+var EmojisRowItem = exports.EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
+  function EmojisRowItem(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmojisRowItem);
+    _this = _callSuper(this, EmojisRowItem, [props, _EmojiPickerSizes.sizes.emojiRowHeight]);
+    (0, _defineProperty2.default)(_this, "renderItem", function (context) {
+      return /*#__PURE__*/React.createElement(_EmojiPickerEmojiRow.default, (0, _extends2.default)({}, _this.props, {
+        virtualItemContext: context
+      }));
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(EmojisRowItem, _AbstractItem);
+  return (0, _createClass2.default)(EmojisRowItem);
+}(_AbstractItem2.AbstractItem);

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

@@ -0,0 +1,42 @@
+/* LoadingItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingItem = void 0;
+require("./LoadingItem.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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 _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _AbstractItem2 = require("./AbstractItem");
+var _EmojiPickerSizes = require("./EmojiPickerSizes");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; })(); }
+var emojiPickerSpinner = null;
+var LoadingItem = exports.LoadingItem = /*#__PURE__*/function (_AbstractItem) {
+  function LoadingItem() {
+    var _this;
+    (0, _classCallCheck2.default)(this, LoadingItem);
+    _this = _callSuper(this, LoadingItem, [{}, _EmojiPickerSizes.sizes.loadingRowHeight]);
+    (0, _defineProperty2.default)(_this, "renderItem", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _4t3i1w81 _1bah1h6o _4cvr1h6o _nphsidpf _t1edidpf _1t3b1wug"])
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_spinner.default, {
+        size: "medium"
+      })));
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(LoadingItem, _AbstractItem);
+  return (0, _createClass2.default)(LoadingItem);
+}(_AbstractItem2.AbstractItem);

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

@@ -0,0 +1,36 @@
+/* NoResultsItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoResultsItem = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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 _AbstractItem2 = require("./AbstractItem");
+var _EmojiPickerNoResults = _interopRequireDefault(require("./EmojiPickerNoResults"));
+var _EmojiPickerSizes = require("./EmojiPickerSizes");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; })(); }
+var NoResultsItem = exports.NoResultsItem = /*#__PURE__*/function (_AbstractItem) {
+  function NoResultsItem(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, NoResultsItem);
+    _this = _callSuper(this, NoResultsItem, [props, _EmojiPickerSizes.sizes.noResultsHeight]);
+    (0, _defineProperty2.default)(_this, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(_EmojiPickerNoResults.default, _this.props);
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(NoResultsItem, _AbstractItem);
+  return (0, _createClass2.default)(NoResultsItem);
+}(_AbstractItem2.AbstractItem);

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.categorySelectorCategoryTestId = void 0;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var categorySelectorCategoryTestId = exports.categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {
+  return "category-selector-".concat(categoryId);
+};

package/dist/cjs/components/picker/{utils.js → emojiPickerHeightOffset.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollToRow = exports.emojiPickerHeightOffset = void 0;
+exports.emojiPickerHeightOffset = void 0;
 var _constants = require("../../util/constants");
 var emojiPickerHeightOffset = exports.emojiPickerHeightOffset = function emojiPickerHeightOffset(size) {
   if (size === 'medium') {
@@ -12,10 +12,4 @@ 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/picker/emojiPickerLoader.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerLoader = void 0;
+var _emojiPickerModuleLoader = require("./emojiPickerModuleLoader");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var emojiPickerLoader = exports.emojiPickerLoader = function emojiPickerLoader() {
+  return (0, _emojiPickerModuleLoader.emojiPickerModuleLoader)().then(function (module) {
+    return module.default;
+  });
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerModuleLoader = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var emojiPickerModuleLoader = exports.emojiPickerModuleLoader = function emojiPickerModuleLoader() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent'));
+  });
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadEmojiPicker = void 0;
+var _EmojiPickerInternal = require("./EmojiPickerInternal");
+var _emojiPickerLoader = require("./emojiPickerLoader");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var preloadEmojiPicker = exports.preloadEmojiPicker = function preloadEmojiPicker() {
+  (0, _emojiPickerLoader.emojiPickerLoader)().then(function (component) {
+    _EmojiPickerInternal.EmojiPickerInternal.AsyncLoadedComponent = component;
+  });
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollToRow = void 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/picker/sortCategories.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortCategories = void 0;
+var _categories = require("./categories");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var sortCategories = exports.sortCategories = function sortCategories(c1, c2) {
+  return _categories.CategoryDescriptionMap[c1].order - _categories.CategoryDescriptionMap[c2].order;
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortCategoriesNew = void 0;
+var _categories = require("./categories");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var sortCategoriesNew = exports.sortCategoriesNew = function sortCategoriesNew(c1, c2) {
+  return _categories.CategoryDescriptionMapNew[c1].order - _categories.CategoryDescriptionMapNew[c2].order;
+};

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

@@ -0,0 +1,19 @@
+/* virtualItemRenderer.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.virtualItemRenderer = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var virtualItemRenderer = exports.virtualItemRenderer = function virtualItemRenderer(rows, context) {
+  var index = context.index,
+    key = context.key;
+  var row = rows[index];
+  return /*#__PURE__*/React.createElement("div", {
+    key: key
+  }, row && row.renderItem(context));
+};

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

@@ -17,10 +17,13 @@ var _reactDom = require("react-dom");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _types = require("../../types");
-var _analytics = require("../../util/analytics");
+var _typeaheadCancelledEvent = require("../../util/analytics/typeaheadCancelledEvent");
+var _typeaheadRenderedEvent = require("../../util/analytics/typeaheadRenderedEvent");
+var _typeaheadSelectedEvent = require("../../util/analytics/typeaheadSelectedEvent");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _constants = require("../../util/constants");
 var _logger = _interopRequireDefault(require("../../util/logger"));
-var _typeHelpers = require("../../util/type-helpers");
+var _toEmojiId = require("../../util/to-emoji-id");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _EmojiTypeAheadList = _interopRequireDefault(require("./EmojiTypeAheadList"));
 var _styles = require("./styles");
@@ -97,7 +100,7 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
         query = result.query;
       var wasVisible = _this.state.visible;
       var visible = emojis.length > 0;
-      _this.fireAnalyticsEvent((0, _analytics.typeaheadRenderedEvent)(Date.now() - _this.renderStartTime, query, emojis));
+      _this.fireAnalyticsEvent((0, _typeaheadRenderedEvent.typeaheadRenderedEvent)(Date.now() - _this.renderStartTime, query, emojis));
       (0, _logger.default)('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
 
       // Synchronously flush state update, because there is some analytics in fireSelectionEvent
@@ -116,7 +119,7 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
             return _this.fireAnalyticsEvent(analytic(_types.SearchSourceTypes.TYPEAHEAD));
           });
           _this.fireSelectionEvent(result.emojis[matchIndex], true);
-          onSelect((0, _typeHelpers.toEmojiId)(result.emojis[matchIndex]), result.emojis[matchIndex]);
+          onSelect((0, _toEmojiId.toEmojiId)(result.emojis[matchIndex]), result.emojis[matchIndex]);
         }
       }
       if (wasVisible !== visible) {
@@ -171,16 +174,16 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
       var emojis = this.state.emojis;
       emojiProvider.unsubscribe(this.onProviderChange);
       if (!this.selected) {
-        this.fireAnalyticsEvent((0, _analytics.typeaheadCancelledEvent)(Date.now() - this.openTime, query, emojis));
+        this.fireAnalyticsEvent((0, _typeaheadCancelledEvent.typeaheadCancelledEvent)(Date.now() - this.openTime, query, emojis));
       }
-      _analytics.ufoExperiences['emoji-searched'].abort({
+      _ufoExperiences.ufoExperiences['emoji-searched'].abort({
         metadata: {
           source: 'EmojiTypeAheadComponent',
           reason: 'unmount',
           query: query
         }
       });
-      _analytics.ufoExperiences['emoji-selection-recorded'].abort({
+      _ufoExperiences.ufoExperiences['emoji-selection-recorded'].abort({
         metadata: {
           source: 'EmojiTypeAheadComponent',
           reason: 'unmount',
@@ -240,7 +243,7 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
       var query = this.props.query;
       var emojis = this.state.emojis;
       this.selected = true;
-      this.fireAnalyticsEvent((0, _analytics.typeaheadSelectedEvent)(exactMatch || this.pressed, Date.now() - this.openTime, emoji, emojis, query, exactMatch));
+      this.fireAnalyticsEvent((0, _typeaheadSelectedEvent.typeaheadSelectedEvent)(exactMatch || this.pressed, Date.now() - this.openTime, emoji, emojis, query, exactMatch));
     }
   }, {
     key: "render",