@atlaskit/emoji 71.4.7 → 71.5.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 71.5.1
+
+### Patch Changes
+
+- [`488ec8f5b8696`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/488ec8f5b8696) -
+  Show the productivity emoji colour picker around productivity-related Atlassian subcategories
+- Updated dependencies
+
+## 71.5.0
+
+### Minor Changes
+
+- [`14bcafd107387`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14bcafd107387) -
+  Breaking backend changes to metadata needs category guard
+
 ## 71.4.7
 
 ### Patch Changes

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

@@ -51,6 +51,7 @@ var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
 var previewFooter = null;
 var previewFooterNew = null;
+var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
 var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
 var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
 
@@ -92,6 +93,7 @@ var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
 };
 var TonesWrapper = function TonesWrapper(props) {
   var activeCategoryId = props.activeCategoryId,
+    activeAtlassianSubcategory = props.activeAtlassianSubcategory,
     onProductivityColorSelected = props.onProductivityColorSelected,
     productivityColorPreviewEmojis = props.productivityColorPreviewEmojis,
     selectedProductivityColor = props.selectedProductivityColor,
@@ -149,7 +151,7 @@ var TonesWrapper = function TonesWrapper(props) {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   if (shouldShowProductivityColorSelector) {
     var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -230,7 +232,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     showToneSelector = _useState6[0],
     setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = (0, _react.useRef)(false);
-  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   var onToneOpenHandler = (0, _react.useCallback)(function () {
     return setShowToneSelector(true);
   }, []);

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

@@ -41,7 +41,8 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   return isEnabled;
 };
 var atlassianCategory = 'ATLASSIAN';
-var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
+var productivityAtlassianSubcategory = 'Productivity';
+var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
@@ -108,13 +109,17 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     lastYourUploadsRow = _useState6[0],
     setLastYourUploadsRow = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    activeAtlassianSubcategory = _useState8[0],
+    setActiveAtlassianSubcategory = _useState8[1];
   var categoryTracker = (0, _react.useMemo)(function () {
     return new _CategoryTracker.default();
   }, []);
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    categoriesChanged = _useState8[0],
-    setCategoriesChanged = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    categoriesChanged = _useState0[0],
+    setCategoriesChanged = _useState0[1];
   var isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
   var visibleEmojis = (0, _react.useMemo)(function () {
     return isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojis) : emojis;
@@ -123,8 +128,12 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     return isTeamojiExperimentEnabled ? (0, _productivityColors.getProductivityColorPreviewEmojis)(visibleEmojis) : {};
   }, [isTeamojiExperimentEnabled, visibleEmojis]);
   var addToCategoryMap = (0, _react.useCallback)(function (categoryToGroupMap, emoji, category) {
+    var _categoryToGroupMap$c;
     if (!categoryToGroupMap[category]) {
       var categoryDefinition = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew[category] : _categories.CategoryDescriptionMap[category];
+      if (!categoryDefinition && isTeamojiExperimentEnabled) {
+        return categoryToGroupMap;
+      }
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,
@@ -132,7 +141,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         order: categoryDefinition.order
       };
     }
-    categoryToGroupMap[category].emojis.push(emoji);
+    (_categoryToGroupMap$c = categoryToGroupMap[category]) === null || _categoryToGroupMap$c === void 0 || _categoryToGroupMap$c.emojis.push(emoji);
     return categoryToGroupMap;
   }, [isTeamojiExperimentEnabled]);
   var groupByCategory = (0, _react.useCallback)(function (currentUser) {
@@ -167,6 +176,19 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       return categoryToGroupMap;
     };
   }, [addToCategoryMap, isTeamojiExperimentEnabled]);
+  var findAtlassianSubcategoryToActivate = (0, _react.useCallback)(function (startIndex) {
+    var row = virtualItems[startIndex];
+    if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem && row.props.id === atlassianCategory) {
+      var nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(function (item) {
+        return item instanceof _EmojiPickerVirtualItems.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) {
+      return row.props.title;
+    }
+    return null;
+  }, [virtualItems]);
 
   /**
    * onRowsRendered callback function
@@ -190,13 +212,19 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     if (!query) {
       // Calculate category in view - only relevant if categories shown, i.e. no query
       var currentCategory = findCategoryToActivate(rowItem);
+      if (isTeamojiExperimentEnabled) {
+        var currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
+        if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
+          setActiveAtlassianSubcategory(currentAtlassianSubcategory);
+        }
+      }
       if (currentCategory !== null && activeCategoryId !== currentCategory) {
         if (onCategoryActivated) {
           onCategoryActivated(currentCategory);
         }
       }
     }
-  }, [virtualItems, query, activeCategoryId, onCategoryActivated]);
+  }, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
   var buildEmojiGroupedByCategory = (0, _react.useCallback)(function (emojis, currentUser) {
     var categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
@@ -467,6 +495,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
     activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
     productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
     selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,

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: "71.4.6"
+      packageVersion: "71.5.0"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiActions.js

@@ -41,6 +41,7 @@ const emojiToneSelectorContainer = null;
 const productivityColorPopup = null;
 const previewFooter = null;
 const previewFooterNew = null;
+const atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
 export const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
 
@@ -83,6 +84,7 @@ export const AddOwnEmoji = props => {
 const TonesWrapper = props => {
   const {
     activeCategoryId,
+    activeAtlassianSubcategory,
     onProductivityColorSelected,
     productivityColorPreviewEmojis,
     selectedProductivityColor,
@@ -140,7 +142,7 @@ const TonesWrapper = props => {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   if (shouldShowProductivityColorSelector) {
     const previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -219,7 +221,7 @@ export const EmojiActions = props => {
   } = props;
   const [showToneSelector, setShowToneSelector] = useState(false);
   const wasProductivityColorSelectorOpen = useRef(false);
-  const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   const onToneOpenHandler = useCallback(() => setShowToneSelector(true), []);
   const onToneCloseHandler = useCallback(() => setShowToneSelector(false), []);
   const onToneToggleHandler = useCallback(() => {

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

@@ -31,7 +31,8 @@ const isRefreshEmojiPickerEnabled = () => {
   return isEnabled;
 };
 const atlassianCategory = 'ATLASSIAN';
-const atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
+const productivityAtlassianSubcategory = 'Productivity';
+const atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
@@ -84,14 +85,19 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const [allEmojiGroups, setAllEmojiGroups] = useState([]);
   const [virtualItems, setVirtualItems] = useState([]);
   const [lastYourUploadsRow, setLastYourUploadsRow] = useState(0);
+  const [activeAtlassianSubcategory, setActiveAtlassianSubcategory] = useState(null);
   const categoryTracker = useMemo(() => new CategoryTracker(), []);
   const [categoriesChanged, setCategoriesChanged] = useState(false);
   const isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
   const visibleEmojis = useMemo(() => isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis, [emojis, isTeamojiExperimentEnabled]);
   const productivityColorPreviewEmojis = useMemo(() => isTeamojiExperimentEnabled ? getProductivityColorPreviewEmojis(visibleEmojis) : {}, [isTeamojiExperimentEnabled, visibleEmojis]);
   const addToCategoryMap = useCallback((categoryToGroupMap, emoji, category) => {
+    var _categoryToGroupMap$c;
     if (!categoryToGroupMap[category]) {
       const categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
+      if (!categoryDefinition && isTeamojiExperimentEnabled) {
+        return categoryToGroupMap;
+      }
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,
@@ -99,7 +105,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
         order: categoryDefinition.order
       };
     }
-    categoryToGroupMap[category].emojis.push(emoji);
+    (_categoryToGroupMap$c = categoryToGroupMap[category]) === null || _categoryToGroupMap$c === void 0 ? void 0 : _categoryToGroupMap$c.emojis.push(emoji);
     return categoryToGroupMap;
   }, [isTeamojiExperimentEnabled]);
   const groupByCategory = useCallback(currentUser => (categoryToGroupMap, emoji) => {
@@ -130,6 +136,17 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     }
     return categoryToGroupMap;
   }, [addToCategoryMap, isTeamojiExperimentEnabled]);
+  const findAtlassianSubcategoryToActivate = useCallback(startIndex => {
+    const row = virtualItems[startIndex];
+    if (row instanceof CategoryHeadingItem && row.props.id === atlassianCategory) {
+      const nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(item => item instanceof EmojisRowItem && item.props.category === atlassianCategory);
+      return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
+    }
+    if (row instanceof EmojisRowItem && row.props.category === atlassianCategory) {
+      return row.props.title;
+    }
+    return null;
+  }, [virtualItems]);
 
   /**
    * onRowsRendered callback function
@@ -155,13 +172,19 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     if (!query) {
       // Calculate category in view - only relevant if categories shown, i.e. no query
       const currentCategory = findCategoryToActivate(rowItem);
+      if (isTeamojiExperimentEnabled) {
+        const currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
+        if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
+          setActiveAtlassianSubcategory(currentAtlassianSubcategory);
+        }
+      }
       if (currentCategory !== null && activeCategoryId !== currentCategory) {
         if (onCategoryActivated) {
           onCategoryActivated(currentCategory);
         }
       }
     }
-  }, [virtualItems, query, activeCategoryId, onCategoryActivated]);
+  }, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
   const buildEmojiGroupedByCategory = useCallback((emojis, currentUser) => {
     const categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(group => {
@@ -427,6 +450,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
     activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
     productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
     selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,

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

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

package/dist/esm/components/common/EmojiActions.js

@@ -42,6 +42,7 @@ var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
 var previewFooter = null;
 var previewFooterNew = null;
+var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
 
@@ -83,6 +84,7 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
 };
 var TonesWrapper = function TonesWrapper(props) {
   var activeCategoryId = props.activeCategoryId,
+    activeAtlassianSubcategory = props.activeAtlassianSubcategory,
     onProductivityColorSelected = props.onProductivityColorSelected,
     productivityColorPreviewEmojis = props.productivityColorPreviewEmojis,
     selectedProductivityColor = props.selectedProductivityColor,
@@ -140,7 +142,7 @@ var TonesWrapper = function TonesWrapper(props) {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   if (shouldShowProductivityColorSelector) {
     var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -221,7 +223,7 @@ export var EmojiActions = function EmojiActions(props) {
     showToneSelector = _useState6[0],
     setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = useRef(false);
-  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
   var onToneOpenHandler = useCallback(function () {
     return setShowToneSelector(true);
   }, []);

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

@@ -33,7 +33,8 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   return isEnabled;
 };
 var atlassianCategory = 'ATLASSIAN';
-var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
+var productivityAtlassianSubcategory = 'Productivity';
+var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
 
 /**
  * Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
@@ -100,13 +101,17 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     _useState6 = _slicedToArray(_useState5, 2),
     lastYourUploadsRow = _useState6[0],
     setLastYourUploadsRow = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeAtlassianSubcategory = _useState8[0],
+    setActiveAtlassianSubcategory = _useState8[1];
   var categoryTracker = useMemo(function () {
     return new CategoryTracker();
   }, []);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    categoriesChanged = _useState8[0],
-    setCategoriesChanged = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    categoriesChanged = _useState0[0],
+    setCategoriesChanged = _useState0[1];
   var isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
   var visibleEmojis = useMemo(function () {
     return isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis;
@@ -115,8 +120,12 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     return isTeamojiExperimentEnabled ? getProductivityColorPreviewEmojis(visibleEmojis) : {};
   }, [isTeamojiExperimentEnabled, visibleEmojis]);
   var addToCategoryMap = useCallback(function (categoryToGroupMap, emoji, category) {
+    var _categoryToGroupMap$c;
     if (!categoryToGroupMap[category]) {
       var categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
+      if (!categoryDefinition && isTeamojiExperimentEnabled) {
+        return categoryToGroupMap;
+      }
       categoryToGroupMap[category] = {
         emojis: [],
         title: categoryDefinition.name,
@@ -124,7 +133,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
         order: categoryDefinition.order
       };
     }
-    categoryToGroupMap[category].emojis.push(emoji);
+    (_categoryToGroupMap$c = categoryToGroupMap[category]) === null || _categoryToGroupMap$c === void 0 || _categoryToGroupMap$c.emojis.push(emoji);
     return categoryToGroupMap;
   }, [isTeamojiExperimentEnabled]);
   var groupByCategory = useCallback(function (currentUser) {
@@ -159,6 +168,19 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       return categoryToGroupMap;
     };
   }, [addToCategoryMap, isTeamojiExperimentEnabled]);
+  var findAtlassianSubcategoryToActivate = useCallback(function (startIndex) {
+    var row = virtualItems[startIndex];
+    if (row instanceof CategoryHeadingItem && row.props.id === atlassianCategory) {
+      var nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(function (item) {
+        return item instanceof EmojisRowItem && item.props.category === atlassianCategory;
+      });
+      return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
+    }
+    if (row instanceof EmojisRowItem && row.props.category === atlassianCategory) {
+      return row.props.title;
+    }
+    return null;
+  }, [virtualItems]);
 
   /**
    * onRowsRendered callback function
@@ -182,13 +204,19 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     if (!query) {
       // Calculate category in view - only relevant if categories shown, i.e. no query
       var currentCategory = findCategoryToActivate(rowItem);
+      if (isTeamojiExperimentEnabled) {
+        var currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
+        if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
+          setActiveAtlassianSubcategory(currentAtlassianSubcategory);
+        }
+      }
       if (currentCategory !== null && activeCategoryId !== currentCategory) {
         if (onCategoryActivated) {
           onCategoryActivated(currentCategory);
         }
       }
     }
-  }, [virtualItems, query, activeCategoryId, onCategoryActivated]);
+  }, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
   var buildEmojiGroupedByCategory = useCallback(function (emojis, currentUser) {
     var categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
@@ -459,6 +487,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
     activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
     productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
     selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,

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: "71.4.6"
+      packageVersion: "71.5.0"
     }, attributes)
   };
 };

package/dist/types/components/common/EmojiActions.d.ts

@@ -11,6 +11,7 @@ import { type OnUploadEmoji } from './EmojiUploadPicker';
 import type { ProductivityColor } from '../../util/productivity-colors';
 export interface Props {
     activeCategoryId?: CategoryId | null;
+    activeAtlassianSubcategory?: string | null;
     emojiToDelete?: EmojiDescription;
     initialUploadName?: string;
     onChange: (value: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.4.7",
+	"version": "71.5.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
 		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^111.0.0",
+		"@atlaskit/tmp-editor-statsig": "^112.0.0",
 		"@atlaskit/tokens": "^15.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -76,7 +76,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlassian/a11y-jest-testing": "^0.12.0",
+		"@atlassian/a11y-jest-testing": "^0.13.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/dom": "^10.1.0",