@atlaskit/emoji 71.0.0 → 71.1.0

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

@@ -44,6 +44,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     _ref$optimisticImageU = _ref.optimisticImageURL,
     optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
     editorEmoji = _ref.editorEmoji,
+    _ref$renderUnicodeEmo = _ref.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _ref$renderUnicodeEmo === void 0 ? true : _ref$renderUnicodeEmo,
     _ref$pageTitleEmoji = _ref.pageTitleEmoji,
     pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
     placeholderXcss = _ref.placeholderXcss,
@@ -304,7 +306,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 var _default = exports.default = ResourcedEmojiComponent;

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

@@ -22,6 +22,8 @@ var emojiButtonOutline = null;
 var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.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,
@@ -33,7 +35,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     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: {
@@ -53,7 +55,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     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/cjs/components/i18n.js

@@ -71,6 +71,16 @@ var messages = exports.messages = (0, _reactIntl.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/cjs/components/picker/EmojiPickerComponent.js

@@ -39,6 +39,8 @@ var _analytics = require("../../util/analytics");
 var _useEmoji2 = require("../../hooks/useEmoji");
 var _useIsMounted = require("../../hooks/useIsMounted");
 var _i18n = require("../i18n");
+var _productivityColors = require("../../util/productivity-colors");
+var _hiddenEmojis = require("../../util/hidden-emojis");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -92,6 +94,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var _useEmoji = (0, _useEmoji2.useEmoji)(),
     emojiProvider = _useEmoji.emojiProvider,
     isUploadSupported = _useEmoji.isUploadSupported;
+  var isTeamojiExperimentEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     filteredEmojis = _useState2[0],
@@ -116,38 +119,42 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     selectedTone = _useState10[0],
     setSelectedTone = _useState10[1];
-  var _useState11 = (0, _react.useState)(true),
+  var _useState11 = (0, _react.useState)(_productivityColors.defaultProductivityColor),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
+    selectedProductivityColor = _useState12[0],
+    setSelectedProductivityColor = _useState12[1];
+  var _useState13 = (0, _react.useState)(true),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    uploading = _useState14[0],
-    setUploading = _useState14[1];
-  var _useState15 = (0, _react.useState)(),
+    loading = _useState14[0],
+    setLoading = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    selectedEmoji = _useState16[0],
-    setSelectedEmoji = _useState16[1];
-  var _useState17 = (0, _react.useState)(null),
+    uploading = _useState16[0],
+    setUploading = _useState16[1];
+  var _useState17 = (0, _react.useState)(),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    activeCategory = _useState18[0],
-    setActiveCategory = _useState18[1];
-  var _useState19 = (0, _react.useState)(false),
+    selectedEmoji = _useState18[0],
+    setSelectedEmoji = _useState18[1];
+  var _useState19 = (0, _react.useState)(null),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    disableCategories = _useState20[0],
-    setDisableCategories = _useState20[1];
-  var _useState21 = (0, _react.useState)(),
+    activeCategory = _useState20[0],
+    setActiveCategory = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    uploadErrorMessage = _useState22[0],
-    setUploadErrorMessage = _useState22[1];
+    disableCategories = _useState22[0],
+    setDisableCategories = _useState22[1];
   var _useState23 = (0, _react.useState)(),
     _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-    emojiToDelete = _useState24[0],
-    setEmojiToDelete = _useState24[1];
+    uploadErrorMessage = _useState24[0],
+    setUploadErrorMessage = _useState24[1];
   var _useState25 = (0, _react.useState)(),
     _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-    toneEmoji = _useState26[0],
-    setToneEmoji = _useState26[1];
+    emojiToDelete = _useState26[0],
+    setEmojiToDelete = _useState26[1];
+  var _useState27 = (0, _react.useState)(),
+    _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+    toneEmoji = _useState28[0],
+    setToneEmoji = _useState28[1];
   var emojiPickerList = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _react.createRef)();
   }, []);
@@ -158,11 +165,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var isProgrammaticScroll = (0, _react.useRef)(false);
   var pickerRef = (0, _react.useRef)(null);
   var setPickerRef = (0, _react.useCallback)(function (el) {
-    if (_featureGateJsClient.default.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 = (0, _react.useMemo)(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -263,7 +270,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
   var onFrequentEmojiResult = (0, _react.useCallback)(function (frequentEmoji) {
     // change the category of each of the featured emoji
-    var recategorised = frequentEmoji.map(function (emoji) {
+    var visibleFrequentEmoji = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(frequentEmoji) : frequentEmoji;
+    var recategorised = visibleFrequentEmoji.map(function (emoji) {
       var clone = JSON.parse(JSON.stringify(emoji));
       clone.category = _constants.frequentCategory;
       return clone;
@@ -271,10 +279,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     setStateAfterEmojiChange({
       frequentEmoji: recategorised
     });
-  }, [setStateAfterEmojiChange]);
+  }, [isTeamojiExperimentEnabled, setStateAfterEmojiChange]);
   var onSearchResult = (0, _react.useCallback)(function (searchResults) {
     var frequentlyUsedEmoji = frequentlyUsedEmojis || [];
     var searchQuery = searchResults.query || '';
+    var visibleSearchEmojis = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.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
@@ -283,20 +292,20 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
      */
     var emojiToRender;
     if (!frequentlyUsedEmoji.length || query) {
-      emojiToRender = searchResults.emojis;
+      emojiToRender = visibleSearchEmojis;
     } else {
-      emojiToRender = [].concat((0, _toConsumableArray2.default)(searchResults.emojis), (0, _toConsumableArray2.default)(frequentlyUsedEmoji));
+      emojiToRender = [].concat((0, _toConsumableArray2.default)(visibleSearchEmojis), (0, _toConsumableArray2.default)(frequentlyUsedEmoji));
     }
     setStateAfterEmojiChange({
       searchQuery: searchQuery,
       emojiToRender: emojiToRender,
-      searchEmoji: searchResults.emojis
+      searchEmoji: visibleSearchEmojis
     });
     fireAnalytics((0, _analytics.pickerSearchedEvent)({
       queryLength: searchQuery.length,
-      numMatches: searchResults.emojis.length
+      numMatches: visibleSearchEmojis.length
     }));
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
+  }, [frequentlyUsedEmojis, isTeamojiExperimentEnabled, query, setStateAfterEmojiChange, fireAnalytics]);
   var onProviderChange = (0, _react.useMemo)(function () {
     return {
       result: onSearchResult
@@ -338,6 +347,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onToneSelectorCancelled = (0, _react.useCallback)(function () {
     fireAnalytics((0, _analytics.toneSelectorClosedEvent)());
   }, [fireAnalytics]);
+  var onProductivityColorSelected = (0, _react.useCallback)(function (color) {
+    setSelectedProductivityColor(color);
+  }, []);
   var onSelectWrapper = (0, _react.useCallback)(function (emojiId, emoji, event) {
     if (onSelection) {
       onSelection(emojiId, emoji, event);
@@ -368,17 +380,18 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
-        if (emojisInCategory && emojisInCategory.length > 0) {
-          newSelectedEmoji = (0, _EmojiRepository.getEmojiVariation)(emojisInCategory[0], {
+        var visibleEmojisInCategory = isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojisInCategory || []) : emojisInCategory || [];
+        if (visibleEmojisInCategory.length > 0) {
+          newSelectedEmoji = (0, _EmojiRepository.getEmojiVariation)(visibleEmojisInCategory[0], {
             skinTone: selectedTone
           });
         }
         if (emojiPickerList.current) {
-          if (_featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+          if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
           emojiPickerList.current.reveal(categoryId);
-          if (_featureGateJsClient.default.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;
@@ -394,7 +407,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, isTeamojiExperimentEnabled, selectedTone, uploading, emojiToDelete]);
   var recordUsageOnSelection = (0, _react.useMemo)(function () {
     return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
@@ -674,11 +687,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/cjs/components/picker/EmojiPickerList.js

@@ -12,6 +12,8 @@ var _reactIntl = require("react-intl");
 var _react = _interopRequireWildcard(require("react"));
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _constants = require("../../util/constants");
+var _productivityColors = require("../../util/productivity-colors");
+var _hiddenEmojis = require("../../util/hidden-emojis");
 var _categories = require("./categories");
 var _CategoryTracker = _interopRequireDefault(require("./CategoryTracker"));
 var _EmojiPickerSizes = require("./EmojiPickerSizes");
@@ -79,7 +81,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onCloseDelete = props.onCloseDelete,
     onFileChooserClicked = props.onFileChooserClicked,
     onOpenUpload = props.onOpenUpload,
-    activeCategoryId = props.activeCategoryId;
+    onProductivityColorSelected = props.onProductivityColorSelected,
+    activeCategoryId = props.activeCategoryId,
+    selectedProductivityColor = props.selectedProductivityColor;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var listRef = (0, _react.useRef)(null);
@@ -103,6 +107,12 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     categoriesChanged = _useState8[0],
     setCategoriesChanged = _useState8[1];
   var isTeamojiExperimentEnabled = _featureGateJsClient.default.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  var visibleEmojis = (0, _react.useMemo)(function () {
+    return isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojis) : emojis;
+  }, [emojis, isTeamojiExperimentEnabled]);
+  var productivityColorPreviewEmojis = (0, _react.useMemo)(function () {
+    return isTeamojiExperimentEnabled ? (0, _productivityColors.getProductivityColorPreviewEmojis)(visibleEmojis) : {};
+  }, [isTeamojiExperimentEnabled, visibleEmojis]);
   var addToCategoryMap = (0, _react.useCallback)(function (categoryToGroupMap, emoji, category) {
     if (!categoryToGroupMap[category]) {
       var categoryDefinition = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew[category] : _categories.CategoryDescriptionMap[category];
@@ -183,16 +193,23 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
       return categoryToGroupMap[key];
     }).map(function (group) {
-      if (group.category !== _constants.frequentCategory) {
+      if (isTeamojiExperimentEnabled && selectedProductivityColor) {
         var _group$subcategories;
-        group.emojis.sort(byOrder);
+        group.emojis = (0, _productivityColors.filterProductivityEmojisByColor)(group.emojis, selectedProductivityColor);
         (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 || _group$subcategories.forEach(function (subcategory) {
+          subcategory.emojis = (0, _productivityColors.filterProductivityEmojisByColor)(subcategory.emojis, selectedProductivityColor);
+        });
+      }
+      if (group.category !== _constants.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 = (0, _react.useCallback)(function (items, category, title, emojis, showDelete) {
     var remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
@@ -212,9 +229,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     }
   }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
   var buildVirtualItemFromGroup = (0, _react.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 _EmojiPickerVirtualItems.CategoryHeadingItem({
         id: group.category,
@@ -259,7 +276,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     } else {
       if (query) {
         var search = isTeamojiExperimentEnabled ? _categories.CategoryDescriptionMapNew.SEARCH : _categories.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 _EmojiPickerVirtualItems.CategoryHeadingItem({
             id: _constants.searchCategory,
@@ -275,7 +292,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
           items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup({
             category: _constants.searchCategory,
             title: search.name,
-            emojis: emojis,
+            emojis: visibleEmojis,
             order: search.order
           })));
         }
@@ -303,7 +320,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       }
     }
     // 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 _EmojiPickerVirtualItems.CategoryHeadingItem) {
@@ -398,9 +415,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   });
   (0, _react.useEffect)(function () {
     if (!query) {
-      buildEmojiGroupedByCategory(emojis, currentUser);
+      buildEmojiGroupedByCategory(visibleEmojis, currentUser);
     }
-  }, [emojis, selectedTone, loading, query, currentUser, buildEmojiGroupedByCategory]);
+  }, [visibleEmojis, selectedTone, selectedProductivityColor, loading, query, currentUser, buildEmojiGroupedByCategory]);
   (0, _react.useEffect)(function () {
     buildVirtualItems();
   }, [allEmojiGroups, buildVirtualItems]);
@@ -409,16 +426,17 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       onRowsRendered({
         startIndex: 0
       });
+      setCategoriesChanged(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = (0, _react.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 _EmojiPickerSizes.sizes.categoryHeadingHeight + _EmojiPickerSizes.sizes.noResultsHeight + (0, _utils.emojiPickerHeightOffset)(size);
     }
     return isTeamojiExperimentEnabled ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
-  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
+  }, [size, query, visibleEmojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerTabPanel.default, {
     showSearchResults: !!query
   }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {
@@ -426,6 +444,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
+    activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,
     uploadEnabled: uploadEnabled,
     emojiToDelete: emojiToDelete,
@@ -437,9 +458,10 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onDeleteEmoji: onDeleteEmoji,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
+    onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     query: query,
     onChange: onSearch,
-    resultsCount: emojis.length
+    resultsCount: visibleEmojis.length
   }), /*#__PURE__*/_react.default.createElement(_EmojiPickerListContext.EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactVirtual = require("@tanstack/react-virtual");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
 var _constants = require("../../util/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -64,13 +65,11 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
     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 = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? elemTop >= parentTop && elemBottom <= parentBottom : elemBottom > parentTop && elemTop < parentBottom;
     return isVisible;
   };
   var getFirstVisibleListElementIndex = (0, _react.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) {
@@ -85,7 +84,7 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
       var _virtualList$firstVis;
       return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
     }
-    return 0;
+    return _featureGateJsClient.default.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/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.17.10"
+      packageVersion: "71.0.1"
     }, attributes)
   };
 };

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isHiddenEmoji = exports.filterHiddenEmojis = void 0;
+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);
+};
+var isHiddenEmoji = exports.isHiddenEmoji = function isHiddenEmoji(emoji) {
+  var emojiWithMetadata = emoji;
+  if (emojiWithMetadata.hidden) {
+    return true;
+  }
+  return hasHiddenMetadataTag(emoji);
+};
+var filterHiddenEmojis = exports.filterHiddenEmojis = function filterHiddenEmojis(emojis) {
+  return emojis.filter(function (emoji) {
+    return !isHiddenEmoji(emoji);
+  });
+};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.productivityColors = exports.isProductivityNumberEmoji = exports.getProductivityColorPreviewEmojis = exports.getProductivityColor = exports.filterProductivityEmojisByColor = exports.defaultProductivityColor = void 0;
+var productivityColors = exports.productivityColors = ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
+var productivityColorSet = new Set(productivityColors);
+var zeroSquareVariantParent = '0_zero_square_blue';
+var defaultProductivityColor = exports.defaultProductivityColor = 'blue';
+var getProductivityVariant = function getProductivityVariant(emoji) {
+  if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
+    return undefined;
+  }
+  return {
+    color: emoji.color
+  };
+};
+var getProductivityColor = exports.getProductivityColor = function getProductivityColor(emoji) {
+  var _getProductivityVaria;
+  return (_getProductivityVaria = getProductivityVariant(emoji)) === null || _getProductivityVaria === void 0 ? void 0 : _getProductivityVaria.color;
+};
+var isProductivityNumberEmoji = exports.isProductivityNumberEmoji = function isProductivityNumberEmoji(emoji) {
+  return getProductivityColor(emoji) !== undefined;
+};
+var filterProductivityEmojisByColor = exports.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_');
+  }));
+};
+var getProductivityColorPreviewEmojis = exports.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;
+  }, {});
+};