@atlaskit/emoji 71.0.0 → 71.0.1

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

@@ -0,0 +1,103 @@
+/* ProductivityColorSelector.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./ProductivityColorSelector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { memo, useContext, useRef } from 'react';
+import { IntlContext } from 'react-intl';
+import { Radio } from '@atlaskit/radio';
+import { productivityColors } from '../../util/productivity-colors';
+import { messages } from '../i18n';
+import Emoji from './Emoji';
+export var productivityColorSelectorTestId = 'productivity-color-selector';
+export var productivityColorSelectorId = 'emoji-picker-productivity-color-selector';
+var selectorGrid = null;
+var visuallyHiddenLegend = null;
+var colorOption = null;
+var colorOptionEmoji = null;
+var getColorLabel = function getColorLabel(color) {
+  return "".concat(color.charAt(0).toUpperCase()).concat(color.slice(1), " productivity emoji colour");
+};
+export var ProductivityColorSelector = function ProductivityColorSelector(_ref) {
+  var colorPreviewEmojis = _ref.colorPreviewEmojis,
+    onColorSelected = _ref.onColorSelected,
+    selectedColor = _ref.selectedColor;
+  var intl = useContext(IntlContext);
+  var radioRefs = useRef([]);
+  var hasFocusedSelectedColor = useRef(false);
+  var availableColors = productivityColors.filter(function (color) {
+    return colorPreviewEmojis[color];
+  });
+  var colorSelectorAriaLabel = intl ? intl.formatMessage(messages.emojiSelectColorListAriaLabelText) : messages.emojiSelectColorListAriaLabelText.defaultMessage;
+  if (!availableColors.length) {
+    return null;
+  }
+  var onArrowKey = function onArrowKey(currentIndex, direction) {
+    var _radioRefs$current$ne;
+    var nextIndex = (currentIndex + direction + availableColors.length) % availableColors.length;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
+  };
+  var stopPickerDismissal = function stopPickerDismissal(event) {
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/React.createElement("fieldset", {
+    id: productivityColorSelectorId,
+    "data-testid": productivityColorSelectorTestId,
+    className: ax(["_19itidpf _zulp1b66 _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c11p5 _yv0e1bbt _2z051y6t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _1ul9idpf"])
+  }, /*#__PURE__*/React.createElement("legend", {
+    className: ax(["_19itidpf _1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ogtohxbz _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
+  }, colorSelectorAriaLabel), availableColors.map(function (color, index) {
+    var emoji = colorPreviewEmojis[color];
+    if (!emoji) {
+      return null;
+    }
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        onArrowKey(index, -1);
+      }
+      if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        onArrowKey(index, 1);
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        onColorSelected(color);
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      key: color,
+      className: ax(["_4t3izwfg _kqswh2mm _1bsbzwfg _1355fajl _soq51h6o _ngzz1txw _1030zwfg _6vsr1h6o _ecyuidpf _8qdiidpf _7kzvidpf _ev8ridpf _6rawzwfg _tnsm1r31 _hxs6glyw _13yj1o36 _1pi91y54 _1rgq13zc _1eq11h6o _1vzltlke _17muzwfg _1wqq1h6o _1p1fzwfg _12ultlke _pytkzwfg _2x4gze3t _12hvze3t _x5bdze3t _1rgfze3t _1e7sidpf _khufstnw _5hv9zwfg _1nn0kb7n _smb7plhp _szw2w5lj"])
+    }, /*#__PURE__*/React.createElement(Radio, {
+      ref: function ref(el) {
+        radioRefs.current[index] = el;
+        if (selectedColor === color) {
+          if (el && !hasFocusedSelectedColor.current) {
+            el.focus();
+            hasFocusedSelectedColor.current = true;
+          }
+        }
+      },
+      ariaLabel: getColorLabel(color),
+      name: "productivity-emoji-colour",
+      isChecked: selectedColor === color,
+      onChange: function onChange() {
+        return onColorSelected(color);
+      },
+      onClick: stopPickerDismissal,
+      onKeyDown: handleKeyDown,
+      onMouseDown: stopPickerDismissal,
+      testId: "productivity-color-".concat(color),
+      value: color,
+      label: /*#__PURE__*/React.createElement("span", {
+        className: ax(["_4cvr1h6o _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg"])
+      }, /*#__PURE__*/React.createElement(Emoji, {
+        emoji: emoji,
+        shouldBeInteractive: false,
+        "aria-hidden": true,
+        fitToHeight: 24
+      }))
+    }));
+  }));
+};
+var _default_1 = /*#__PURE__*/memo(ProductivityColorSelector);
+export default _default_1;

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

@@ -13,6 +13,8 @@ var emojiButtonOutline = null;
 export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
+    _props$ariaControls = props.ariaControls,
+    ariaControls = _props$ariaControls === void 0 ? 'emoji-picker-tone-selector' : _props$ariaControls,
     ariaLabelText = props.ariaLabelText,
     ariaExpanded = props.ariaExpanded,
     onSelected = props.onSelected,
@@ -24,7 +26,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick: onSelected,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
-    "aria-controls": "emoji-picker-tone-selector"
+    "aria-controls": ariaControls
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: {
@@ -44,7 +46,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick: onSelected,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
-    "aria-controls": "emoji-picker-tone-selector"
+    "aria-controls": ariaControls
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: {

package/dist/esm/components/i18n.js

@@ -65,6 +65,16 @@ export var messages = defineMessages({
     defaultMessage: 'Choose your skin tone, {selectedTone} selected',
     description: 'Message indicating the purpose of the skin tone selection button and the selected tone'
   },
+  emojiSelectColorButtonAriaLabelText: {
+    id: 'fabric.emoji.select.color.ariaLabel',
+    defaultMessage: 'Productivity emoji color selector',
+    description: 'Message indicating the purpose of the color selection button and the selected color'
+  },
+  emojiSelectColorListAriaLabelText: {
+    id: 'fabric.emoji.select.color.list.ariaLabel',
+    defaultMessage: 'Productivity emoji colour selector',
+    description: 'Message indicating the purpose of the productivity emoji color list selector'
+  },
   emojiSelectSkinToneListAriaLabelText: {
     id: 'fabric.emoji.select.skin.list.ariaLabel',
     defaultMessage: 'Skin tone selector',

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

@@ -33,6 +33,8 @@ import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPicker
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
+import { defaultProductivityColor } from '../../util/productivity-colors';
+import { filterHiddenEmojis } from '../../util/hidden-emojis';
 var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
@@ -83,6 +85,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var _useEmoji = useEmoji(),
     emojiProvider = _useEmoji.emojiProvider,
     isUploadSupported = _useEmoji.isUploadSupported;
+  var isTeamojiExperimentEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     filteredEmojis = _useState2[0],
@@ -107,38 +110,42 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     selectedTone = _useState10[0],
     setSelectedTone = _useState10[1];
-  var _useState11 = useState(true),
+  var _useState11 = useState(defaultProductivityColor),
     _useState12 = _slicedToArray(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
-  var _useState13 = useState(false),
+    selectedProductivityColor = _useState12[0],
+    setSelectedProductivityColor = _useState12[1];
+  var _useState13 = useState(true),
     _useState14 = _slicedToArray(_useState13, 2),
-    uploading = _useState14[0],
-    setUploading = _useState14[1];
-  var _useState15 = useState(),
+    loading = _useState14[0],
+    setLoading = _useState14[1];
+  var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    selectedEmoji = _useState16[0],
-    setSelectedEmoji = _useState16[1];
-  var _useState17 = useState(null),
+    uploading = _useState16[0],
+    setUploading = _useState16[1];
+  var _useState17 = useState(),
     _useState18 = _slicedToArray(_useState17, 2),
-    activeCategory = _useState18[0],
-    setActiveCategory = _useState18[1];
-  var _useState19 = useState(false),
+    selectedEmoji = _useState18[0],
+    setSelectedEmoji = _useState18[1];
+  var _useState19 = useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    disableCategories = _useState20[0],
-    setDisableCategories = _useState20[1];
-  var _useState21 = useState(),
+    activeCategory = _useState20[0],
+    setActiveCategory = _useState20[1];
+  var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    uploadErrorMessage = _useState22[0],
-    setUploadErrorMessage = _useState22[1];
+    disableCategories = _useState22[0],
+    setDisableCategories = _useState22[1];
   var _useState23 = useState(),
     _useState24 = _slicedToArray(_useState23, 2),
-    emojiToDelete = _useState24[0],
-    setEmojiToDelete = _useState24[1];
+    uploadErrorMessage = _useState24[0],
+    setUploadErrorMessage = _useState24[1];
   var _useState25 = useState(),
     _useState26 = _slicedToArray(_useState25, 2),
-    toneEmoji = _useState26[0],
-    setToneEmoji = _useState26[1];
+    emojiToDelete = _useState26[0],
+    setEmojiToDelete = _useState26[1];
+  var _useState27 = useState(),
+    _useState28 = _slicedToArray(_useState27, 2),
+    toneEmoji = _useState28[0],
+    setToneEmoji = _useState28[1];
   var emojiPickerList = useMemo(function () {
     return /*#__PURE__*/createRef();
   }, []);
@@ -149,11 +156,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var isProgrammaticScroll = useRef(false);
   var pickerRef = useRef(null);
   var setPickerRef = useCallback(function (el) {
-    if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+    if (isTeamojiExperimentEnabled) {
       pickerRef.current = el;
     }
     onPickerRef === null || onPickerRef === void 0 || onPickerRef(el);
-  }, [onPickerRef]);
+  }, [isTeamojiExperimentEnabled, onPickerRef]);
   var currentUser = useMemo(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -254,7 +261,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
   var onFrequentEmojiResult = useCallback(function (frequentEmoji) {
     // change the category of each of the featured emoji
-    var recategorised = frequentEmoji.map(function (emoji) {
+    var visibleFrequentEmoji = isTeamojiExperimentEnabled ? filterHiddenEmojis(frequentEmoji) : frequentEmoji;
+    var recategorised = visibleFrequentEmoji.map(function (emoji) {
       var clone = JSON.parse(JSON.stringify(emoji));
       clone.category = frequentCategory;
       return clone;
@@ -262,10 +270,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     setStateAfterEmojiChange({
       frequentEmoji: recategorised
     });
-  }, [setStateAfterEmojiChange]);
+  }, [isTeamojiExperimentEnabled, setStateAfterEmojiChange]);
   var onSearchResult = useCallback(function (searchResults) {
     var frequentlyUsedEmoji = frequentlyUsedEmojis || [];
     var searchQuery = searchResults.query || '';
+    var visibleSearchEmojis = isTeamojiExperimentEnabled ? filterHiddenEmojis(searchResults.emojis) : searchResults.emojis;
 
     /**
      * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
@@ -274,20 +283,20 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
      */
     var emojiToRender;
     if (!frequentlyUsedEmoji.length || query) {
-      emojiToRender = searchResults.emojis;
+      emojiToRender = visibleSearchEmojis;
     } else {
-      emojiToRender = [].concat(_toConsumableArray(searchResults.emojis), _toConsumableArray(frequentlyUsedEmoji));
+      emojiToRender = [].concat(_toConsumableArray(visibleSearchEmojis), _toConsumableArray(frequentlyUsedEmoji));
     }
     setStateAfterEmojiChange({
       searchQuery: searchQuery,
       emojiToRender: emojiToRender,
-      searchEmoji: searchResults.emojis
+      searchEmoji: visibleSearchEmojis
     });
     fireAnalytics(pickerSearchedEvent({
       queryLength: searchQuery.length,
-      numMatches: searchResults.emojis.length
+      numMatches: visibleSearchEmojis.length
     }));
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
+  }, [frequentlyUsedEmojis, isTeamojiExperimentEnabled, query, setStateAfterEmojiChange, fireAnalytics]);
   var onProviderChange = useMemo(function () {
     return {
       result: onSearchResult
@@ -329,6 +338,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onToneSelectorCancelled = useCallback(function () {
     fireAnalytics(toneSelectorClosedEvent());
   }, [fireAnalytics]);
+  var onProductivityColorSelected = useCallback(function (color) {
+    setSelectedProductivityColor(color);
+  }, []);
   var onSelectWrapper = useCallback(function (emojiId, emoji, event) {
     if (onSelection) {
       onSelection(emojiId, emoji, event);
@@ -359,17 +371,18 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
-        if (emojisInCategory && emojisInCategory.length > 0) {
-          newSelectedEmoji = getEmojiVariation(emojisInCategory[0], {
+        var visibleEmojisInCategory = isTeamojiExperimentEnabled ? filterHiddenEmojis(emojisInCategory || []) : emojisInCategory || [];
+        if (visibleEmojisInCategory.length > 0) {
+          newSelectedEmoji = getEmojiVariation(visibleEmojisInCategory[0], {
             skinTone: selectedTone
           });
         }
         if (emojiPickerList.current) {
-          if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+          if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
           emojiPickerList.current.reveal(categoryId);
-          if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+          if (isTeamojiExperimentEnabled) {
             // Clear the flag after the scroll animation has settled.
             setTimeout(function () {
               isProgrammaticScroll.current = false;
@@ -385,7 +398,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, isTeamojiExperimentEnabled, selectedTone, uploading, emojiToDelete]);
   var recordUsageOnSelection = useMemo(function () {
     return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(SearchSourceTypes.PICKER));
@@ -665,11 +678,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onSearch: onSearch,
     query: query,
     selectedTone: selectedTone,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     loading: loading,
     ref: emojiPickerList,
     initialUploadName: query,
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
+    onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     toneEmoji: toneEmoji,
     uploading: uploading,
     emojiToDelete: emojiToDelete,

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

@@ -4,6 +4,8 @@ import { useIntl } from 'react-intl';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
+import { filterProductivityEmojisByColor, getProductivityColorPreviewEmojis } from '../../util/productivity-colors';
+import { filterHiddenEmojis } from '../../util/hidden-emojis';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
@@ -71,7 +73,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onCloseDelete = props.onCloseDelete,
     onFileChooserClicked = props.onFileChooserClicked,
     onOpenUpload = props.onOpenUpload,
-    activeCategoryId = props.activeCategoryId;
+    onProductivityColorSelected = props.onProductivityColorSelected,
+    activeCategoryId = props.activeCategoryId,
+    selectedProductivityColor = props.selectedProductivityColor;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var listRef = useRef(null);
@@ -95,6 +99,12 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     categoriesChanged = _useState8[0],
     setCategoriesChanged = _useState8[1];
   var isTeamojiExperimentEnabled = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  var visibleEmojis = useMemo(function () {
+    return isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis;
+  }, [emojis, isTeamojiExperimentEnabled]);
+  var productivityColorPreviewEmojis = useMemo(function () {
+    return isTeamojiExperimentEnabled ? getProductivityColorPreviewEmojis(visibleEmojis) : {};
+  }, [isTeamojiExperimentEnabled, visibleEmojis]);
   var addToCategoryMap = useCallback(function (categoryToGroupMap, emoji, category) {
     if (!categoryToGroupMap[category]) {
       var categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
@@ -175,16 +185,23 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
       return categoryToGroupMap[key];
     }).map(function (group) {
-      if (group.category !== frequentCategory) {
+      if (isTeamojiExperimentEnabled && selectedProductivityColor) {
         var _group$subcategories;
-        group.emojis.sort(byOrder);
+        group.emojis = filterProductivityEmojisByColor(group.emojis, selectedProductivityColor);
         (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 || _group$subcategories.forEach(function (subcategory) {
+          subcategory.emojis = filterProductivityEmojisByColor(subcategory.emojis, selectedProductivityColor);
+        });
+      }
+      if (group.category !== frequentCategory) {
+        var _group$subcategories2;
+        group.emojis.sort(byOrder);
+        (_group$subcategories2 = group.subcategories) === null || _group$subcategories2 === void 0 || _group$subcategories2.forEach(function (subcategory) {
           subcategory.emojis.sort(byOrder);
         });
       }
       return group;
     }).sort(byOrder));
-  }, [groupByCategory]);
+  }, [groupByCategory, isTeamojiExperimentEnabled, selectedProductivityColor]);
   var buildEmojiRows = useCallback(function (items, category, title, emojis, showDelete) {
     var remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
@@ -204,9 +221,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     }
   }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
   var buildVirtualItemFromGroup = useCallback(function (group) {
-    var _group$subcategories2;
+    var _group$subcategories3;
     var items = [];
-    var hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    var hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories3 = group.subcategories) !== null && _group$subcategories3 !== void 0 && _group$subcategories3.length);
     if (!hasAtlassianSubcategories) {
       items.push(new CategoryHeadingItem({
         id: group.category,
@@ -251,7 +268,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     } else {
       if (query) {
         var search = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
-        if (emojis.length === 0 && isTeamojiExperimentEnabled) {
+        if (visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
           items.push(new CategoryHeadingItem({
             id: searchCategory,
@@ -267,7 +284,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
           items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup({
             category: searchCategory,
             title: search.name,
-            emojis: emojis,
+            emojis: visibleEmojis,
             order: search.order
           })));
         }
@@ -295,7 +312,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, buildVirtualItemFromGroup, emojis, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled]);
+  }, [allEmojiGroups, buildVirtualItemFromGroup, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled, visibleEmojis]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -390,9 +407,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
   });
   useEffect(function () {
     if (!query) {
-      buildEmojiGroupedByCategory(emojis, currentUser);
+      buildEmojiGroupedByCategory(visibleEmojis, currentUser);
     }
-  }, [emojis, selectedTone, loading, query, currentUser, buildEmojiGroupedByCategory]);
+  }, [visibleEmojis, selectedTone, selectedProductivityColor, loading, query, currentUser, buildEmojiGroupedByCategory]);
   useEffect(function () {
     buildVirtualItems();
   }, [allEmojiGroups, buildVirtualItems]);
@@ -401,16 +418,17 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       onRowsRendered({
         startIndex: 0
       });
+      setCategoriesChanged(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = useMemo(function () {
-    if (query && emojis.length === 0 && isTeamojiExperimentEnabled) {
+    if (query && visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
       // No-results state: expand the list height to fit heading + illustration without scrolling
       return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
     }
     return isTeamojiExperimentEnabled ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
+  }, [size, query, visibleEmojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {
@@ -418,6 +436,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
+    activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,
     uploadEnabled: uploadEnabled,
     emojiToDelete: emojiToDelete,
@@ -429,9 +450,10 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onDeleteEmoji: onDeleteEmoji,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
+    onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     query: query,
     onChange: onSearch,
-    resultsCount: emojis.length
+    resultsCount: visibleEmojis.length
   }), /*#__PURE__*/React.createElement(EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,

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

@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
 var virtualList = null;
@@ -55,13 +56,11 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var elemBottom = elementRect.bottom;
     var parentTop = parentRect.top;
     var parentBottom = parentRect.bottom;
-
-    // Only completely visible elements return true:
-    var isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
+    var isVisible = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? elemTop >= parentTop && elemBottom <= parentBottom : elemBottom > parentTop && elemTop < parentBottom;
     return isVisible;
   };
   var getFirstVisibleListElementIndex = useCallback(function () {
-    var _parentRef$current;
+    var _parentRef$current, _virtualList$;
     var virtualList = rowVirtualizer.getVirtualItems();
     var renderedElements = (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 || (_parentRef$current = _parentRef$current.firstChild) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.childNodes;
     if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
@@ -76,7 +75,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _virtualList$firstVis;
       return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
     }
-    return 0;
+    return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? ((_virtualList$ = virtualList[0]) === null || _virtualList$ === void 0 ? void 0 : _virtualList$.index) || 0 : 0;
   }, [rowVirtualizer]);
 
   /**

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.17.10"
+      packageVersion: "71.0.0"
     }, attributes)
   };
 };

package/dist/esm/util/hidden-emojis.js

@@ -0,0 +1,27 @@
+var hasHiddenTag = function hasHiddenTag(tags) {
+  var _tags$includes;
+  return (_tags$includes = tags === null || tags === void 0 ? void 0 : tags.includes('hidden')) !== null && _tags$includes !== void 0 ? _tags$includes : false;
+};
+var hasHiddenMetadataTag = function hasHiddenMetadataTag(emoji) {
+  var emojiWithMetadata = emoji;
+  var metadata = emojiWithMetadata.metadata;
+  if (typeof metadata === 'string') {
+    return metadata === 'hidden';
+  }
+  if (Array.isArray(metadata)) {
+    return hasHiddenTag(metadata);
+  }
+  return hasHiddenTag(metadata === null || metadata === void 0 ? void 0 : metadata.tags) || hasHiddenTag(emojiWithMetadata.tags);
+};
+export var isHiddenEmoji = function isHiddenEmoji(emoji) {
+  var emojiWithMetadata = emoji;
+  if (emojiWithMetadata.hidden) {
+    return true;
+  }
+  return hasHiddenMetadataTag(emoji);
+};
+export var filterHiddenEmojis = function filterHiddenEmojis(emojis) {
+  return emojis.filter(function (emoji) {
+    return !isHiddenEmoji(emoji);
+  });
+};

package/dist/esm/util/productivity-colors.js

@@ -0,0 +1,45 @@
+export var productivityColors = ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
+var productivityColorSet = new Set(productivityColors);
+var zeroSquareVariantParent = '0_zero_square_blue';
+export var defaultProductivityColor = 'blue';
+var getProductivityVariant = function getProductivityVariant(emoji) {
+  if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
+    return undefined;
+  }
+  return {
+    color: emoji.color
+  };
+};
+export var getProductivityColor = function getProductivityColor(emoji) {
+  var _getProductivityVaria;
+  return (_getProductivityVaria = getProductivityVariant(emoji)) === null || _getProductivityVaria === void 0 ? void 0 : _getProductivityVaria.color;
+};
+export var isProductivityNumberEmoji = function isProductivityNumberEmoji(emoji) {
+  return getProductivityColor(emoji) !== undefined;
+};
+export var filterProductivityEmojisByColor = function filterProductivityEmojisByColor(emojis, selectedColor) {
+  return emojis.filter(function (emoji) {
+    var variant = getProductivityVariant(emoji);
+    return !variant || variant.color === selectedColor;
+  });
+};
+var isZeroSquareProductivityEmoji = function isZeroSquareProductivityEmoji(emoji) {
+  var _emoji$variantChildre, _emoji$keywords, _emoji$variantChildre2;
+  return emoji.variantParent === zeroSquareVariantParent || ((_emoji$variantChildre = emoji.variantChildren) === null || _emoji$variantChildre === void 0 ? void 0 : _emoji$variantChildre.some(function (variantChild) {
+    return variantChild.includes('0_zero_square_');
+  })) || !!(emoji.variantBase && (_emoji$keywords = emoji.keywords) !== null && _emoji$keywords !== void 0 && _emoji$keywords.includes('0') && (_emoji$variantChildre2 = emoji.variantChildren) !== null && _emoji$variantChildre2 !== void 0 && _emoji$variantChildre2.some(function (variantChild) {
+    return variantChild.includes('_square_');
+  }));
+};
+export var getProductivityColorPreviewEmojis = function getProductivityColorPreviewEmojis(emojis) {
+  return emojis.reduce(function (previewEmojis, emoji) {
+    var color = getProductivityColor(emoji);
+    if (!color) {
+      return previewEmojis;
+    }
+    if (isZeroSquareProductivityEmoji(emoji) || !previewEmojis[color]) {
+      previewEmojis[color] = emoji;
+    }
+    return previewEmojis;
+  }, {});
+};

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

@@ -5,13 +5,16 @@
 import { type ComponentType, type FC } from 'react';
 import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
 import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
+import type { CategoryId } from '../picker/categories';
 import { type OnDeleteEmoji } from './EmojiDeletePreview';
 import { type OnUploadEmoji } from './EmojiUploadPicker';
+import type { ProductivityColor } from '../../util/productivity-colors';
 export interface Props {
     emojiToDelete?: EmojiDescription;
     initialUploadName?: string;
     onChange: (value: string) => void;
     onCloseDelete: () => void;
+    onProductivityColorSelected?: (color: ProductivityColor) => void;
     onDeleteEmoji: OnDeleteEmoji;
     onFileChooserClicked?: () => void;
     onOpenUpload: () => void;
@@ -21,6 +24,9 @@ export interface Props {
     onUploadEmoji: OnUploadEmoji;
     query?: string;
     resultsCount?: number;
+    activeCategoryId?: CategoryId | null;
+    productivityColorPreviewEmojis?: Partial<Record<ProductivityColor, EmojiDescription>>;
+    selectedProductivityColor?: ProductivityColor;
     selectedTone?: ToneSelection;
     toneEmoji?: EmojiDescriptionWithVariations;
     uploadEnabled: boolean;

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

@@ -2,6 +2,7 @@ import React, { type ReactElement } from 'react';
 import type { RelativePosition } from '../../types';
 export interface Props {
     children: ReactElement<any>;
+    horizontalAlign?: 'start' | 'end' | 'end-to-start';
     offsetX?: number;
     offsetY?: number;
     relativePosition?: RelativePosition;