@atlaskit/emoji 70.16.6 → 70.17.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/emoji
 
+## 70.17.1
+
+### Patch Changes
+
+- [`0f549097540b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f549097540b7) -
+  Fix Unicode emoji rendering for standard emoji skin tone variations.
+
+## 70.17.0
+
+### Minor Changes
+
+- [`074057d77ce64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/074057d77ce64) -
+  Display Atlassian emoji subcategories
+
+### Patch Changes
+
+- [`5dd8cc218e393`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5dd8cc218e393) -
+  Release packages affected by an issue blocking you from installing <@compiled>/react due to a yarn
+  patch.
+- Updated dependencies
+
 ## 70.16.6
 
 ### Patch Changes

package/dist/cjs/api/EmojiRepository.js

@@ -17,6 +17,7 @@ var _EmojiRepositoryRegex = require("./EmojiRepositoryRegex");
 var _Comparators = require("./internal/Comparators");
 var _UsageFrequencyTracker = require("./internal/UsageFrequencyTracker");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 // FS-1097 - duplicated in mentions - extract at some point into a shared library
 var Tokenizer = /*#__PURE__*/function () {
   function Tokenizer() {
@@ -114,6 +115,7 @@ var findEmojiIndex = function findEmojiIndex(emojis, toFind) {
   });
   return match;
 };
+var teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
 var EmojiRepository = exports.default = /*#__PURE__*/function () {
   // protected to allow subclasses to access (for testing and storybooks).
 
@@ -203,6 +205,10 @@ var EmojiRepository = exports.default = /*#__PURE__*/function () {
     value: function findInCategory(categoryId) {
       if (categoryId === _constants.frequentCategory) {
         return this.getFrequentlyUsed();
+      } else if ((0, _expVal.expVal)(teamojiRefreshExperimentName, 'isEnabled', false) && categoryId === 'ATLASSIAN') {
+        return this.all().emojis.filter(function (emoji) {
+          return emoji.type === 'ATLASSIAN';
+        });
       } else {
         return this.all().emojis.filter(function (emoji) {
           return emoji.category === categoryId;
@@ -352,7 +358,7 @@ var EmojiRepository = exports.default = /*#__PURE__*/function () {
       this.asciiMap = new Map();
       var categorySet = new Set();
       this.emojis.forEach(function (emoji) {
-        categorySet.add(emoji.category);
+        categorySet.add(_this3.getDynamicCategoryForEmoji(emoji, (0, _expVal.expVal)(teamojiRefreshExperimentName, 'isEnabled', false)));
         _this3.addToMaps(emoji);
       });
       if (this.usageTracker.getOrder().length) {
@@ -414,11 +420,20 @@ var EmojiRepository = exports.default = /*#__PURE__*/function () {
   }, {
     key: "addToDynamicCategories",
     value: function addToDynamicCategories(emoji) {
-      var category = (0, _typeHelpers.getCategoryId)(emoji);
+      var category = this.getDynamicCategoryForEmoji(emoji, (0, _expVal.expVal)(teamojiRefreshExperimentName, 'isEnabled', false));
       if (_constants.defaultCategories.indexOf(category) === -1 && this.dynamicCategoryList.indexOf(category) === -1) {
         this.dynamicCategoryList.push(category);
       }
     }
+  }, {
+    key: "getDynamicCategoryForEmoji",
+    value: function getDynamicCategoryForEmoji(emoji, isTeamojiRefreshEnabled) {
+      var category = (0, _typeHelpers.getCategoryId)(emoji);
+      if (isTeamojiRefreshEnabled && emoji.type === 'ATLASSIAN' && category !== _constants.frequentCategory) {
+        return 'ATLASSIAN';
+      }
+      return category;
+    }
   }]);
 }();
 (0, _defineProperty2.default)(EmojiRepository, "defaultEmojiWeight", 1000000);

package/dist/cjs/api/EmojiUtils.js

@@ -117,6 +117,13 @@ var denormaliseServiceRepresentation = exports.denormaliseServiceRepresentation
 var denormaliseServiceAltRepresentation = exports.denormaliseServiceAltRepresentation = function denormaliseServiceAltRepresentation(altReps, meta) {
   return !altReps || Object.keys(altReps).length === 0 ? undefined : denormaliseServiceRepresentation(getAltRepresentation(altReps), meta);
 };
+var denormaliseStandardRepresentation = function denormaliseStandardRepresentation(emoji, meta) {
+  var unicodeEmoji = (0, _emojiIdToEmoji.emojiIdToEmoji)(emoji.id);
+  var useUnicodeRepresentation = !!(emoji.id && emoji.type === _types.ProviderTypes.STANDARD && unicodeEmoji && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis'));
+  return useUnicodeRepresentation ? {
+    unicodeEmoji: unicodeEmoji
+  } : denormaliseServiceRepresentation(emoji.representation, meta);
+};
 var denormaliseSkinEmoji = exports.denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
   if (!emoji.skinVariations) {
     return [];
@@ -124,12 +131,12 @@ var denormaliseSkinEmoji = exports.denormaliseSkinEmoji = function denormaliseSk
   var skinEmoji = emoji.skinVariations;
   var baseId = emoji.id;
   return skinEmoji.map(function (skin) {
-    var representation = skin.representation,
+    var _representation = skin.representation,
       altRepresentations = skin.altRepresentations,
       other = (0, _objectWithoutProperties2.default)(skin, _excluded3);
     return _objectSpread({
       baseId: baseId,
-      representation: denormaliseServiceRepresentation(representation, meta),
+      representation: denormaliseStandardRepresentation(skin, meta),
       altRepresentation: denormaliseServiceAltRepresentation(altRepresentations, meta)
     }, other);
   });
@@ -141,11 +148,7 @@ var denormaliseSkinEmoji = exports.denormaliseSkinEmoji = function denormaliseSk
  */
 var denormaliseEmojiServiceResponse = exports.denormaliseEmojiServiceResponse = function denormaliseEmojiServiceResponse(emojiData) {
   var emojis = emojiData.emojis.map(function (emoji) {
-    var unicodeEmoji = (0, _emojiIdToEmoji.emojiIdToEmoji)(emoji.id);
-    var useUnicodeRepresentation = !!(emoji.id && emoji.type === _types.ProviderTypes.STANDARD && unicodeEmoji && (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis'));
-    var newRepresentation = useUnicodeRepresentation ? {
-      unicodeEmoji: unicodeEmoji
-    } : denormaliseServiceRepresentation(emoji.representation, emojiData.meta);
+    var newRepresentation = denormaliseStandardRepresentation(emoji, emojiData.meta);
     var altRepresentation = denormaliseServiceAltRepresentation(emoji.altRepresentations, emojiData.meta);
     var newSkinVariations = denormaliseSkinEmoji(emoji, emojiData.meta);
 

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

@@ -28,6 +28,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 var RENDER_EMOJI_PICKER_LIST_TESTID = exports.RENDER_EMOJI_PICKER_LIST_TESTID = 'render-emoji-picker-list';
 var categoryClassname = 'emoji-category';
+var teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+var atlassianCategory = 'ATLASSIAN';
+var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
@@ -36,20 +39,27 @@ var categoryClassname = 'emoji-category';
 var byOrder = function byOrder(orderableA, orderableB) {
   return (orderableA.order || 0) - (orderableB.order || 0);
 };
+var noop = function noop() {};
+var getAtlassianSubcategoryTitle = function getAtlassianSubcategoryTitle(category) {
+  if (!category) {
+    return 'Other';
+  }
+  return category.charAt(0).toUpperCase() + category.slice(1).toLowerCase();
+};
 var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var emojis = props.emojis,
     currentUser = props.currentUser,
     _props$onEmojiSelecte = props.onEmojiSelected,
-    onEmojiSelected = _props$onEmojiSelecte === void 0 ? function () {} : _props$onEmojiSelecte,
+    onEmojiSelected = _props$onEmojiSelecte === void 0 ? noop : _props$onEmojiSelecte,
     _props$onEmojiActive = props.onEmojiActive,
-    onEmojiActive = _props$onEmojiActive === void 0 ? function () {} : _props$onEmojiActive,
+    onEmojiActive = _props$onEmojiActive === void 0 ? noop : _props$onEmojiActive,
     onEmojiLeave = props.onEmojiLeave,
     _props$onEmojiDelete = props.onEmojiDelete,
-    onEmojiDelete = _props$onEmojiDelete === void 0 ? function () {} : _props$onEmojiDelete,
+    onEmojiDelete = _props$onEmojiDelete === void 0 ? noop : _props$onEmojiDelete,
     _props$onCategoryActi = props.onCategoryActivated,
-    onCategoryActivated = _props$onCategoryActi === void 0 ? function () {} : _props$onCategoryActi,
+    onCategoryActivated = _props$onCategoryActi === void 0 ? noop : _props$onCategoryActi,
     _props$onSearch = props.onSearch,
-    onSearch = _props$onSearch === void 0 ? function () {} : _props$onSearch,
+    onSearch = _props$onSearch === void 0 ? noop : _props$onSearch,
     _props$size = props.size,
     size = _props$size === void 0 ? _constants.defaultEmojiPickerSize : _props$size,
     query = props.query,
@@ -92,16 +102,52 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     categoriesChanged = _useState8[0],
     setCategoriesChanged = _useState8[1];
+  var isTeamojiExperimentEnabled = _featureGateJsClient.default.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  var addToCategoryMap = (0, _react.useCallback)(function (categoryToGroupMap, emoji, category) {
+    if (!categoryToGroupMap[category]) {
+      var categoryDefinition = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew[category] : _categories.CategoryDescriptionMap[category];
+      categoryToGroupMap[category] = {
+        emojis: [],
+        title: categoryDefinition.name,
+        category: category,
+        order: categoryDefinition.order
+      };
+    }
+    categoryToGroupMap[category].emojis.push(emoji);
+    return categoryToGroupMap;
+  }, [isTeamojiExperimentEnabled]);
   var groupByCategory = (0, _react.useCallback)(function (currentUser) {
     return function (categoryToGroupMap, emoji) {
-      addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+      if (isTeamojiExperimentEnabled && emoji.type === 'ATLASSIAN' && emoji.category !== _constants.frequentCategory) {
+        addToCategoryMap(categoryToGroupMap, emoji, atlassianCategory);
+        var group = categoryToGroupMap[atlassianCategory];
+        if (group) {
+          if (!group.subcategories) {
+            group.subcategories = [];
+          }
+          var subcategoryTitle = getAtlassianSubcategoryTitle(emoji.category);
+          var subcategory = group.subcategories.find(function (existingSubcategory) {
+            return existingSubcategory.title === subcategoryTitle;
+          });
+          if (!subcategory) {
+            subcategory = {
+              title: subcategoryTitle,
+              emojis: []
+            };
+            group.subcategories.push(subcategory);
+          }
+          subcategory.emojis.push(emoji);
+        }
+      } else {
+        addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+      }
       // separate user emojis
       if (emoji.category === _constants.customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
         addToCategoryMap(categoryToGroupMap, emoji, _constants.yourUploadsCategory);
       }
       return categoryToGroupMap;
     };
-  }, []);
+  }, [addToCategoryMap, isTeamojiExperimentEnabled]);
 
   /**
    * onRowsRendered callback function
@@ -138,49 +184,72 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       return categoryToGroupMap[key];
     }).map(function (group) {
       if (group.category !== _constants.frequentCategory) {
+        var _group$subcategories;
         group.emojis.sort(byOrder);
+        (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 || _group$subcategories.forEach(function (subcategory) {
+          subcategory.emojis.sort(byOrder);
+        });
       }
       return group;
     }).sort(byOrder));
   }, [groupByCategory]);
-  var addToCategoryMap = function addToCategoryMap(categoryToGroupMap, emoji, category) {
-    if (!categoryToGroupMap[category]) {
-      var categoryDefinition = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? _categories.CategoryDescriptionMapNew[category] : _categories.CategoryDescriptionMap[category];
-      categoryToGroupMap[category] = {
-        emojis: [],
-        title: categoryDefinition.name,
-        category: category,
-        order: categoryDefinition.order
-      };
-    }
-    categoryToGroupMap[category].emojis.push(emoji);
-    return categoryToGroupMap;
-  };
-  var buildVirtualItemFromGroup = (0, _react.useCallback)(function (group) {
-    var items = [];
-    items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
-      id: group.category,
-      title: group.title,
-      className: categoryClassname
-    }));
-    var remainingEmojis = group.emojis;
+  var buildEmojiRows = (0, _react.useCallback)(function (items, category, title, emojis, showDelete) {
+    var remainingEmojis = 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,
+        category: category,
         emojis: rowEmojis,
-        title: group.title,
-        showDelete: group.title === _constants.userCustomTitle,
+        title: title,
+        showDelete: showDelete,
         onSelected: onEmojiSelected,
         onDelete: onEmojiDelete,
         onMouseMove: onEmojiActive,
         onFocus: onEmojiActive,
-        onMouseLeave: _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? onEmojiLeave : undefined
+        onMouseLeave: isTeamojiExperimentEnabled ? onEmojiLeave : undefined
+      }));
+    }
+  }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
+  var buildVirtualItemFromGroup = (0, _react.useCallback)(function (group) {
+    var _group$subcategories2;
+    var items = [];
+    var hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    if (!hasAtlassianSubcategories) {
+      items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
       }));
     }
+    if (hasAtlassianSubcategories && group.subcategories) {
+      var sortedSubcategories = (0, _toConsumableArray2.default)(group.subcategories).sort(function (a, b) {
+        var aIndex = atlassianSubcategoryOrder.indexOf(a.title);
+        var bIndex = atlassianSubcategoryOrder.indexOf(b.title);
+        if (aIndex !== -1 && bIndex !== -1) {
+          return aIndex - bIndex;
+        }
+        if (aIndex !== -1) {
+          return -1;
+        }
+        if (bIndex !== -1) {
+          return 1;
+        }
+        return a.title.localeCompare(b.title);
+      });
+      sortedSubcategories.forEach(function (subcategory) {
+        items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+          id: group.category,
+          title: subcategory.title,
+          className: categoryClassname
+        }));
+        buildEmojiRows(items, group.category, subcategory.title, subcategory.emojis, false);
+      });
+    } else {
+      buildEmojiRows(items, group.category, group.title, group.emojis, group.title === _constants.userCustomTitle);
+    }
     return items;
-  }, [onEmojiSelected, onEmojiDelete, onEmojiActive, onEmojiLeave]);
+  }, [buildEmojiRows, isTeamojiExperimentEnabled]);
   var buildVirtualItems = (0, _react.useCallback)(function () {
     var items = [];
     var prevFirstCategory = categoryTracker.getFirstCategory();
@@ -189,8 +258,8 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       items.push(new _EmojiPickerVirtualItems.LoadingItem());
     } else {
       if (query) {
-        var search = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? _categories.CategoryDescriptionMapNew.SEARCH : _categories.CategoryDescriptionMap.SEARCH;
-        if (emojis.length === 0 && _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+        var search = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew.SEARCH : _categories.CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
           items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
             id: _constants.searchCategory,
@@ -217,7 +286,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         allEmojiGroups.forEach(function (group) {
           // Optimisation - avoid re-rendering unaffected groups for the current selectedShortcut
           // by not passing it to irrelevant groups
-          categoryTracker.add(group.emojis[0].category, items.length);
+          categoryTracker.add(isTeamojiExperimentEnabled ? group.category : group.emojis[0].category, items.length);
           items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup(group)));
           if (group.category === _constants.yourUploadsCategory) {
             setLastYourUploadsRow(items.length - 1);
@@ -234,7 +303,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, loading, query, emojis, onOpenUpload, uploadEnabled, formatMessage]);
+  }, [allEmojiGroups, buildVirtualItemFromGroup, emojis, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
     if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
@@ -344,12 +413,12 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = (0, _react.useMemo)(function () {
-    if (query && emojis.length === 0 && _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+    if (query && emojis.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 _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
-  }, [size, query, emojis.length]);
+    return isTeamojiExperimentEnabled ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
+  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerTabPanel.default, {
     showSearchResults: !!query
   }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {

package/dist/cjs/util/analytics/analytics.js

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

package/dist/es2019/api/EmojiRepository.js

@@ -7,6 +7,7 @@ import { tokenizerRegex } from './EmojiRepositoryRegex';
 import { createSearchEmojiComparator, createUsageOnlyEmojiComparator } from './internal/Comparators';
 import { UsageFrequencyTracker } from './internal/UsageFrequencyTracker';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 // FS-1097 - duplicated in mentions - extract at some point into a shared library
 class Tokenizer {
   tokenize(text) {
@@ -91,6 +92,7 @@ const findEmojiIndex = (emojis, toFind) => {
   });
   return match;
 };
+const teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
 export default class EmojiRepository {
   // protected to allow subclasses to access (for testing and storybooks).
 
@@ -166,6 +168,8 @@ export default class EmojiRepository {
   findInCategory(categoryId) {
     if (categoryId === frequentCategory) {
       return this.getFrequentlyUsed();
+    } else if (expVal(teamojiRefreshExperimentName, 'isEnabled', false) && categoryId === 'ATLASSIAN') {
+      return this.all().emojis.filter(emoji => emoji.type === 'ATLASSIAN');
     } else {
       return this.all().emojis.filter(emoji => emoji.category === categoryId);
     }
@@ -284,7 +288,7 @@ export default class EmojiRepository {
     this.asciiMap = new Map();
     const categorySet = new Set();
     this.emojis.forEach(emoji => {
-      categorySet.add(emoji.category);
+      categorySet.add(this.getDynamicCategoryForEmoji(emoji, expVal(teamojiRefreshExperimentName, 'isEnabled', false)));
       this.addToMaps(emoji);
     });
     if (this.usageTracker.getOrder().length) {
@@ -325,10 +329,17 @@ export default class EmojiRepository {
     }
   }
   addToDynamicCategories(emoji) {
-    const category = getCategoryId(emoji);
+    const category = this.getDynamicCategoryForEmoji(emoji, expVal(teamojiRefreshExperimentName, 'isEnabled', false));
     if (defaultCategories.indexOf(category) === -1 && this.dynamicCategoryList.indexOf(category) === -1) {
       this.dynamicCategoryList.push(category);
     }
   }
+  getDynamicCategoryForEmoji(emoji, isTeamojiRefreshEnabled) {
+    const category = getCategoryId(emoji);
+    if (isTeamojiRefreshEnabled && emoji.type === 'ATLASSIAN' && category !== frequentCategory) {
+      return 'ATLASSIAN';
+    }
+    return category;
+  }
 }
 _defineProperty(EmojiRepository, "defaultEmojiWeight", 1000000);

package/dist/es2019/api/EmojiUtils.js

@@ -107,6 +107,13 @@ export const denormaliseServiceRepresentation = (representation, meta) => {
 export const denormaliseServiceAltRepresentation = (altReps, meta) => {
   return !altReps || Object.keys(altReps).length === 0 ? undefined : denormaliseServiceRepresentation(getAltRepresentation(altReps), meta);
 };
+const denormaliseStandardRepresentation = (emoji, meta) => {
+  const unicodeEmoji = emojiIdToEmoji(emoji.id);
+  const useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
+  return useUnicodeRepresentation ? {
+    unicodeEmoji
+  } : denormaliseServiceRepresentation(emoji.representation, meta);
+};
 export const denormaliseSkinEmoji = (emoji, meta) => {
   if (!emoji.skinVariations) {
     return [];
@@ -115,13 +122,13 @@ export const denormaliseSkinEmoji = (emoji, meta) => {
   const baseId = emoji.id;
   return skinEmoji.map(skin => {
     const {
-      representation,
+      representation: _representation,
       altRepresentations,
       ...other
     } = skin;
     return {
       baseId: baseId,
-      representation: denormaliseServiceRepresentation(representation, meta),
+      representation: denormaliseStandardRepresentation(skin, meta),
       altRepresentation: denormaliseServiceAltRepresentation(altRepresentations, meta),
       ...other
     };
@@ -134,11 +141,7 @@ export const denormaliseSkinEmoji = (emoji, meta) => {
  */
 export const denormaliseEmojiServiceResponse = emojiData => {
   const emojis = emojiData.emojis.map(emoji => {
-    const unicodeEmoji = emojiIdToEmoji(emoji.id);
-    const useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
-    const newRepresentation = useUnicodeRepresentation ? {
-      unicodeEmoji
-    } : denormaliseServiceRepresentation(emoji.representation, emojiData.meta);
+    const newRepresentation = denormaliseStandardRepresentation(emoji, emojiData.meta);
     const altRepresentation = denormaliseServiceAltRepresentation(emoji.altRepresentations, emojiData.meta);
     const newSkinVariations = denormaliseSkinEmoji(emoji, emojiData.meta);
 

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

@@ -18,22 +18,32 @@ import { messages } from '../i18n';
  */
 export const RENDER_EMOJI_PICKER_LIST_TESTID = 'render-emoji-picker-list';
 const categoryClassname = 'emoji-category';
+const teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+const atlassianCategory = 'ATLASSIAN';
+const atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
  */
 
 const byOrder = (orderableA, orderableB) => (orderableA.order || 0) - (orderableB.order || 0);
+const noop = () => {};
+const getAtlassianSubcategoryTitle = category => {
+  if (!category) {
+    return 'Other';
+  }
+  return category.charAt(0).toUpperCase() + category.slice(1).toLowerCase();
+};
 export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     emojis,
     currentUser,
-    onEmojiSelected = () => {},
-    onEmojiActive = () => {},
+    onEmojiSelected = noop,
+    onEmojiActive = noop,
     onEmojiLeave,
-    onEmojiDelete = () => {},
-    onCategoryActivated = () => {},
-    onSearch = () => {},
+    onEmojiDelete = noop,
+    onCategoryActivated = noop,
+    onSearch = noop,
     size = defaultEmojiPickerSize,
     query,
     loading,
@@ -63,14 +73,48 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const [lastYourUploadsRow, setLastYourUploadsRow] = useState(0);
   const categoryTracker = useMemo(() => new CategoryTracker(), []);
   const [categoriesChanged, setCategoriesChanged] = useState(false);
+  const isTeamojiExperimentEnabled = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  const addToCategoryMap = useCallback((categoryToGroupMap, emoji, category) => {
+    if (!categoryToGroupMap[category]) {
+      const categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
+      categoryToGroupMap[category] = {
+        emojis: [],
+        title: categoryDefinition.name,
+        category,
+        order: categoryDefinition.order
+      };
+    }
+    categoryToGroupMap[category].emojis.push(emoji);
+    return categoryToGroupMap;
+  }, [isTeamojiExperimentEnabled]);
   const groupByCategory = useCallback(currentUser => (categoryToGroupMap, emoji) => {
-    addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+    if (isTeamojiExperimentEnabled && emoji.type === 'ATLASSIAN' && emoji.category !== frequentCategory) {
+      addToCategoryMap(categoryToGroupMap, emoji, atlassianCategory);
+      const group = categoryToGroupMap[atlassianCategory];
+      if (group) {
+        if (!group.subcategories) {
+          group.subcategories = [];
+        }
+        const subcategoryTitle = getAtlassianSubcategoryTitle(emoji.category);
+        let subcategory = group.subcategories.find(existingSubcategory => existingSubcategory.title === subcategoryTitle);
+        if (!subcategory) {
+          subcategory = {
+            title: subcategoryTitle,
+            emojis: []
+          };
+          group.subcategories.push(subcategory);
+        }
+        subcategory.emojis.push(emoji);
+      }
+    } else {
+      addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+    }
     // separate user emojis
     if (emoji.category === customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
       addToCategoryMap(categoryToGroupMap, emoji, yourUploadsCategory);
     }
     return categoryToGroupMap;
-  }, []);
+  }, [addToCategoryMap, isTeamojiExperimentEnabled]);
 
   /**
    * onRowsRendered callback function
@@ -107,49 +151,72 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     const categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(group => {
       if (group.category !== frequentCategory) {
+        var _group$subcategories;
         group.emojis.sort(byOrder);
+        (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 ? void 0 : _group$subcategories.forEach(subcategory => {
+          subcategory.emojis.sort(byOrder);
+        });
       }
       return group;
     }).sort(byOrder));
   }, [groupByCategory]);
-  const addToCategoryMap = (categoryToGroupMap, emoji, category) => {
-    if (!categoryToGroupMap[category]) {
-      const categoryDefinition = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
-      categoryToGroupMap[category] = {
-        emojis: [],
-        title: categoryDefinition.name,
-        category,
-        order: categoryDefinition.order
-      };
-    }
-    categoryToGroupMap[category].emojis.push(emoji);
-    return categoryToGroupMap;
-  };
-  const buildVirtualItemFromGroup = useCallback(group => {
-    const items = [];
-    items.push(new CategoryHeadingItem({
-      id: group.category,
-      title: group.title,
-      className: categoryClassname
-    }));
-    let remainingEmojis = group.emojis;
+  const buildEmojiRows = useCallback((items, category, title, emojis, showDelete) => {
+    let remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
       const rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
       remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
       items.push(new EmojisRowItem({
-        category: group.category,
+        category,
         emojis: rowEmojis,
-        title: group.title,
-        showDelete: group.title === userCustomTitle,
+        title,
+        showDelete,
         onSelected: onEmojiSelected,
         onDelete: onEmojiDelete,
         onMouseMove: onEmojiActive,
         onFocus: onEmojiActive,
-        onMouseLeave: FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? onEmojiLeave : undefined
+        onMouseLeave: isTeamojiExperimentEnabled ? onEmojiLeave : undefined
       }));
     }
+  }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
+  const buildVirtualItemFromGroup = useCallback(group => {
+    var _group$subcategories2;
+    const items = [];
+    const hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    if (!hasAtlassianSubcategories) {
+      items.push(new CategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
+      }));
+    }
+    if (hasAtlassianSubcategories && group.subcategories) {
+      const sortedSubcategories = [...group.subcategories].sort((a, b) => {
+        const aIndex = atlassianSubcategoryOrder.indexOf(a.title);
+        const bIndex = atlassianSubcategoryOrder.indexOf(b.title);
+        if (aIndex !== -1 && bIndex !== -1) {
+          return aIndex - bIndex;
+        }
+        if (aIndex !== -1) {
+          return -1;
+        }
+        if (bIndex !== -1) {
+          return 1;
+        }
+        return a.title.localeCompare(b.title);
+      });
+      sortedSubcategories.forEach(subcategory => {
+        items.push(new CategoryHeadingItem({
+          id: group.category,
+          title: subcategory.title,
+          className: categoryClassname
+        }));
+        buildEmojiRows(items, group.category, subcategory.title, subcategory.emojis, false);
+      });
+    } else {
+      buildEmojiRows(items, group.category, group.title, group.emojis, group.title === userCustomTitle);
+    }
     return items;
-  }, [onEmojiSelected, onEmojiDelete, onEmojiActive, onEmojiLeave]);
+  }, [buildEmojiRows, isTeamojiExperimentEnabled]);
   const buildVirtualItems = useCallback(() => {
     let items = [];
     const prevFirstCategory = categoryTracker.getFirstCategory();
@@ -158,8 +225,8 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       items.push(new LoadingItem());
     } else {
       if (query) {
-        const search = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
-        if (emojis.length === 0 && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+        const search = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
           items.push(new CategoryHeadingItem({
             id: searchCategory,
@@ -186,7 +253,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
         allEmojiGroups.forEach(group => {
           // Optimisation - avoid re-rendering unaffected groups for the current selectedShortcut
           // by not passing it to irrelevant groups
-          categoryTracker.add(group.emojis[0].category, items.length);
+          categoryTracker.add(isTeamojiExperimentEnabled ? group.category : group.emojis[0].category, items.length);
           items = [...items, ...buildVirtualItemFromGroup(group)];
           if (group.category === yourUploadsCategory) {
             setLastYourUploadsRow(items.length - 1);
@@ -203,7 +270,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, loading, query, emojis, onOpenUpload, uploadEnabled, formatMessage]);
+  }, [allEmojiGroups, buildVirtualItemFromGroup, emojis, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled]);
   const findCategoryToActivate = row => {
     let category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -312,12 +379,12 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   const virtualListHeight = useMemo(() => {
-    if (query && emojis.length === 0 && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+    if (query && emojis.length === 0 && isTeamojiExperimentEnabled) {
       // No-results state: expand the list height to fit heading + illustration without scrolling
       return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
     }
-    return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size, query, emojis.length]);
+    return isTeamojiExperimentEnabled ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
+  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "70.16.5",
+    packageVersion: "70.17.0",
     ...attributes
   }
 });

package/dist/esm/api/EmojiRepository.js

@@ -10,6 +10,7 @@ import { tokenizerRegex } from './EmojiRepositoryRegex';
 import { createSearchEmojiComparator, createUsageOnlyEmojiComparator } from './internal/Comparators';
 import { UsageFrequencyTracker } from './internal/UsageFrequencyTracker';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 // FS-1097 - duplicated in mentions - extract at some point into a shared library
 var Tokenizer = /*#__PURE__*/function () {
   function Tokenizer() {
@@ -107,6 +108,7 @@ var findEmojiIndex = function findEmojiIndex(emojis, toFind) {
   });
   return match;
 };
+var teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
 var EmojiRepository = /*#__PURE__*/function () {
   // protected to allow subclasses to access (for testing and storybooks).
 
@@ -196,6 +198,10 @@ var EmojiRepository = /*#__PURE__*/function () {
     value: function findInCategory(categoryId) {
       if (categoryId === frequentCategory) {
         return this.getFrequentlyUsed();
+      } else if (expVal(teamojiRefreshExperimentName, 'isEnabled', false) && categoryId === 'ATLASSIAN') {
+        return this.all().emojis.filter(function (emoji) {
+          return emoji.type === 'ATLASSIAN';
+        });
       } else {
         return this.all().emojis.filter(function (emoji) {
           return emoji.category === categoryId;
@@ -345,7 +351,7 @@ var EmojiRepository = /*#__PURE__*/function () {
       this.asciiMap = new Map();
       var categorySet = new Set();
       this.emojis.forEach(function (emoji) {
-        categorySet.add(emoji.category);
+        categorySet.add(_this3.getDynamicCategoryForEmoji(emoji, expVal(teamojiRefreshExperimentName, 'isEnabled', false)));
         _this3.addToMaps(emoji);
       });
       if (this.usageTracker.getOrder().length) {
@@ -407,11 +413,20 @@ var EmojiRepository = /*#__PURE__*/function () {
   }, {
     key: "addToDynamicCategories",
     value: function addToDynamicCategories(emoji) {
-      var category = getCategoryId(emoji);
+      var category = this.getDynamicCategoryForEmoji(emoji, expVal(teamojiRefreshExperimentName, 'isEnabled', false));
       if (defaultCategories.indexOf(category) === -1 && this.dynamicCategoryList.indexOf(category) === -1) {
         this.dynamicCategoryList.push(category);
       }
     }
+  }, {
+    key: "getDynamicCategoryForEmoji",
+    value: function getDynamicCategoryForEmoji(emoji, isTeamojiRefreshEnabled) {
+      var category = getCategoryId(emoji);
+      if (isTeamojiRefreshEnabled && emoji.type === 'ATLASSIAN' && category !== frequentCategory) {
+        return 'ATLASSIAN';
+      }
+      return category;
+    }
   }]);
 }();
 _defineProperty(EmojiRepository, "defaultEmojiWeight", 1000000);

package/dist/esm/api/EmojiUtils.js

@@ -110,6 +110,13 @@ export var denormaliseServiceRepresentation = function denormaliseServiceReprese
 export var denormaliseServiceAltRepresentation = function denormaliseServiceAltRepresentation(altReps, meta) {
   return !altReps || Object.keys(altReps).length === 0 ? undefined : denormaliseServiceRepresentation(getAltRepresentation(altReps), meta);
 };
+var denormaliseStandardRepresentation = function denormaliseStandardRepresentation(emoji, meta) {
+  var unicodeEmoji = emojiIdToEmoji(emoji.id);
+  var useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
+  return useUnicodeRepresentation ? {
+    unicodeEmoji: unicodeEmoji
+  } : denormaliseServiceRepresentation(emoji.representation, meta);
+};
 export var denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
   if (!emoji.skinVariations) {
     return [];
@@ -117,12 +124,12 @@ export var denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
   var skinEmoji = emoji.skinVariations;
   var baseId = emoji.id;
   return skinEmoji.map(function (skin) {
-    var representation = skin.representation,
+    var _representation = skin.representation,
       altRepresentations = skin.altRepresentations,
       other = _objectWithoutProperties(skin, _excluded3);
     return _objectSpread({
       baseId: baseId,
-      representation: denormaliseServiceRepresentation(representation, meta),
+      representation: denormaliseStandardRepresentation(skin, meta),
       altRepresentation: denormaliseServiceAltRepresentation(altRepresentations, meta)
     }, other);
   });
@@ -134,11 +141,7 @@ export var denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
  */
 export var denormaliseEmojiServiceResponse = function denormaliseEmojiServiceResponse(emojiData) {
   var emojis = emojiData.emojis.map(function (emoji) {
-    var unicodeEmoji = emojiIdToEmoji(emoji.id);
-    var useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
-    var newRepresentation = useUnicodeRepresentation ? {
-      unicodeEmoji: unicodeEmoji
-    } : denormaliseServiceRepresentation(emoji.representation, emojiData.meta);
+    var newRepresentation = denormaliseStandardRepresentation(emoji, emojiData.meta);
     var altRepresentation = denormaliseServiceAltRepresentation(emoji.altRepresentations, emojiData.meta);
     var newSkinVariations = denormaliseSkinEmoji(emoji, emojiData.meta);
 

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

@@ -20,6 +20,9 @@ import { messages } from '../i18n';
  */
 export var RENDER_EMOJI_PICKER_LIST_TESTID = 'render-emoji-picker-list';
 var categoryClassname = 'emoji-category';
+var teamojiRefreshExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+var atlassianCategory = 'ATLASSIAN';
+var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
@@ -28,20 +31,27 @@ var categoryClassname = 'emoji-category';
 var byOrder = function byOrder(orderableA, orderableB) {
   return (orderableA.order || 0) - (orderableB.order || 0);
 };
+var noop = function noop() {};
+var getAtlassianSubcategoryTitle = function getAtlassianSubcategoryTitle(category) {
+  if (!category) {
+    return 'Other';
+  }
+  return category.charAt(0).toUpperCase() + category.slice(1).toLowerCase();
+};
 export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var emojis = props.emojis,
     currentUser = props.currentUser,
     _props$onEmojiSelecte = props.onEmojiSelected,
-    onEmojiSelected = _props$onEmojiSelecte === void 0 ? function () {} : _props$onEmojiSelecte,
+    onEmojiSelected = _props$onEmojiSelecte === void 0 ? noop : _props$onEmojiSelecte,
     _props$onEmojiActive = props.onEmojiActive,
-    onEmojiActive = _props$onEmojiActive === void 0 ? function () {} : _props$onEmojiActive,
+    onEmojiActive = _props$onEmojiActive === void 0 ? noop : _props$onEmojiActive,
     onEmojiLeave = props.onEmojiLeave,
     _props$onEmojiDelete = props.onEmojiDelete,
-    onEmojiDelete = _props$onEmojiDelete === void 0 ? function () {} : _props$onEmojiDelete,
+    onEmojiDelete = _props$onEmojiDelete === void 0 ? noop : _props$onEmojiDelete,
     _props$onCategoryActi = props.onCategoryActivated,
-    onCategoryActivated = _props$onCategoryActi === void 0 ? function () {} : _props$onCategoryActi,
+    onCategoryActivated = _props$onCategoryActi === void 0 ? noop : _props$onCategoryActi,
     _props$onSearch = props.onSearch,
-    onSearch = _props$onSearch === void 0 ? function () {} : _props$onSearch,
+    onSearch = _props$onSearch === void 0 ? noop : _props$onSearch,
     _props$size = props.size,
     size = _props$size === void 0 ? defaultEmojiPickerSize : _props$size,
     query = props.query,
@@ -84,16 +94,52 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     _useState8 = _slicedToArray(_useState7, 2),
     categoriesChanged = _useState8[0],
     setCategoriesChanged = _useState8[1];
+  var isTeamojiExperimentEnabled = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  var addToCategoryMap = useCallback(function (categoryToGroupMap, emoji, category) {
+    if (!categoryToGroupMap[category]) {
+      var categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
+      categoryToGroupMap[category] = {
+        emojis: [],
+        title: categoryDefinition.name,
+        category: category,
+        order: categoryDefinition.order
+      };
+    }
+    categoryToGroupMap[category].emojis.push(emoji);
+    return categoryToGroupMap;
+  }, [isTeamojiExperimentEnabled]);
   var groupByCategory = useCallback(function (currentUser) {
     return function (categoryToGroupMap, emoji) {
-      addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+      if (isTeamojiExperimentEnabled && emoji.type === 'ATLASSIAN' && emoji.category !== frequentCategory) {
+        addToCategoryMap(categoryToGroupMap, emoji, atlassianCategory);
+        var group = categoryToGroupMap[atlassianCategory];
+        if (group) {
+          if (!group.subcategories) {
+            group.subcategories = [];
+          }
+          var subcategoryTitle = getAtlassianSubcategoryTitle(emoji.category);
+          var subcategory = group.subcategories.find(function (existingSubcategory) {
+            return existingSubcategory.title === subcategoryTitle;
+          });
+          if (!subcategory) {
+            subcategory = {
+              title: subcategoryTitle,
+              emojis: []
+            };
+            group.subcategories.push(subcategory);
+          }
+          subcategory.emojis.push(emoji);
+        }
+      } else {
+        addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
+      }
       // separate user emojis
       if (emoji.category === customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
         addToCategoryMap(categoryToGroupMap, emoji, yourUploadsCategory);
       }
       return categoryToGroupMap;
     };
-  }, []);
+  }, [addToCategoryMap, isTeamojiExperimentEnabled]);
 
   /**
    * onRowsRendered callback function
@@ -130,49 +176,72 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       return categoryToGroupMap[key];
     }).map(function (group) {
       if (group.category !== frequentCategory) {
+        var _group$subcategories;
         group.emojis.sort(byOrder);
+        (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 || _group$subcategories.forEach(function (subcategory) {
+          subcategory.emojis.sort(byOrder);
+        });
       }
       return group;
     }).sort(byOrder));
   }, [groupByCategory]);
-  var addToCategoryMap = function addToCategoryMap(categoryToGroupMap, emoji, category) {
-    if (!categoryToGroupMap[category]) {
-      var categoryDefinition = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
-      categoryToGroupMap[category] = {
-        emojis: [],
-        title: categoryDefinition.name,
-        category: category,
-        order: categoryDefinition.order
-      };
-    }
-    categoryToGroupMap[category].emojis.push(emoji);
-    return categoryToGroupMap;
-  };
-  var buildVirtualItemFromGroup = useCallback(function (group) {
-    var items = [];
-    items.push(new CategoryHeadingItem({
-      id: group.category,
-      title: group.title,
-      className: categoryClassname
-    }));
-    var remainingEmojis = group.emojis;
+  var buildEmojiRows = useCallback(function (items, category, title, emojis, showDelete) {
+    var remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
       var rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
       remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
       items.push(new EmojisRowItem({
-        category: group.category,
+        category: category,
         emojis: rowEmojis,
-        title: group.title,
-        showDelete: group.title === userCustomTitle,
+        title: title,
+        showDelete: showDelete,
         onSelected: onEmojiSelected,
         onDelete: onEmojiDelete,
         onMouseMove: onEmojiActive,
         onFocus: onEmojiActive,
-        onMouseLeave: FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? onEmojiLeave : undefined
+        onMouseLeave: isTeamojiExperimentEnabled ? onEmojiLeave : undefined
+      }));
+    }
+  }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
+  var buildVirtualItemFromGroup = useCallback(function (group) {
+    var _group$subcategories2;
+    var items = [];
+    var hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    if (!hasAtlassianSubcategories) {
+      items.push(new CategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
       }));
     }
+    if (hasAtlassianSubcategories && group.subcategories) {
+      var sortedSubcategories = _toConsumableArray(group.subcategories).sort(function (a, b) {
+        var aIndex = atlassianSubcategoryOrder.indexOf(a.title);
+        var bIndex = atlassianSubcategoryOrder.indexOf(b.title);
+        if (aIndex !== -1 && bIndex !== -1) {
+          return aIndex - bIndex;
+        }
+        if (aIndex !== -1) {
+          return -1;
+        }
+        if (bIndex !== -1) {
+          return 1;
+        }
+        return a.title.localeCompare(b.title);
+      });
+      sortedSubcategories.forEach(function (subcategory) {
+        items.push(new CategoryHeadingItem({
+          id: group.category,
+          title: subcategory.title,
+          className: categoryClassname
+        }));
+        buildEmojiRows(items, group.category, subcategory.title, subcategory.emojis, false);
+      });
+    } else {
+      buildEmojiRows(items, group.category, group.title, group.emojis, group.title === userCustomTitle);
+    }
     return items;
-  }, [onEmojiSelected, onEmojiDelete, onEmojiActive, onEmojiLeave]);
+  }, [buildEmojiRows, isTeamojiExperimentEnabled]);
   var buildVirtualItems = useCallback(function () {
     var items = [];
     var prevFirstCategory = categoryTracker.getFirstCategory();
@@ -181,8 +250,8 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       items.push(new LoadingItem());
     } else {
       if (query) {
-        var search = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
-        if (emojis.length === 0 && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+        var search = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
           items.push(new CategoryHeadingItem({
             id: searchCategory,
@@ -209,7 +278,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
         allEmojiGroups.forEach(function (group) {
           // Optimisation - avoid re-rendering unaffected groups for the current selectedShortcut
           // by not passing it to irrelevant groups
-          categoryTracker.add(group.emojis[0].category, items.length);
+          categoryTracker.add(isTeamojiExperimentEnabled ? group.category : group.emojis[0].category, items.length);
           items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup(group)));
           if (group.category === yourUploadsCategory) {
             setLastYourUploadsRow(items.length - 1);
@@ -226,7 +295,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, loading, query, emojis, onOpenUpload, uploadEnabled, formatMessage]);
+  }, [allEmojiGroups, buildVirtualItemFromGroup, emojis, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -336,12 +405,12 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = useMemo(function () {
-    if (query && emojis.length === 0 && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+    if (query && emojis.length === 0 && isTeamojiExperimentEnabled) {
       // No-results state: expand the list height to fit heading + illustration without scrolling
       return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
     }
-    return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size, query, emojis.length]);
+    return isTeamojiExperimentEnabled ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
+  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {

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

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

package/dist/types/api/EmojiRepository.d.ts

@@ -71,4 +71,5 @@ export default class EmojiRepository {
     private getAllSearchableEmojis;
     private addToMaps;
     private addToDynamicCategories;
+    private getDynamicCategoryForEmoji;
 }

package/dist/types-ts4.5/api/EmojiRepository.d.ts

@@ -71,4 +71,5 @@ export default class EmojiRepository {
     private getAllSearchableEmojis;
     private addToMaps;
     private addToDynamicCategories;
+    private getDynamicCategoryForEmoji;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.16.6",
+	"version": "70.17.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,14 +55,14 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^93.0.0",
+		"@atlaskit/tmp-editor-statsig": "^94.0.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/util-service-support": "^6.4.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "patch:@compiled/react@npm%3A0.20.0#~/.yarn/patches/@compiled-react-npm-0.20.0-a771aa67a6.patch",
+		"@compiled/react": "^0.20.0",
 		"@tanstack/react-virtual": "3.0.0-beta.60",
 		"js-search": "^2.0.0",
 		"lru_map": "^0.4.1",