@atlaskit/emoji 71.0.0 → 71.0.1

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

@@ -2,6 +2,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';
@@ -62,7 +64,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onCloseDelete,
     onFileChooserClicked,
     onOpenUpload,
-    activeCategoryId
+    onProductivityColorSelected,
+    activeCategoryId,
+    selectedProductivityColor
   } = props;
   const {
     formatMessage
@@ -74,6 +78,8 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const categoryTracker = useMemo(() => new CategoryTracker(), []);
   const [categoriesChanged, setCategoriesChanged] = useState(false);
   const isTeamojiExperimentEnabled = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  const visibleEmojis = useMemo(() => isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis, [emojis, isTeamojiExperimentEnabled]);
+  const productivityColorPreviewEmojis = useMemo(() => isTeamojiExperimentEnabled ? getProductivityColorPreviewEmojis(visibleEmojis) : {}, [isTeamojiExperimentEnabled, visibleEmojis]);
   const addToCategoryMap = useCallback((categoryToGroupMap, emoji, category) => {
     if (!categoryToGroupMap[category]) {
       const categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
@@ -150,16 +156,23 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const buildEmojiGroupedByCategory = useCallback((emojis, currentUser) => {
     const categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(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 ? void 0 : _group$subcategories.forEach(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 ? void 0 : _group$subcategories2.forEach(subcategory => {
           subcategory.emojis.sort(byOrder);
         });
       }
       return group;
     }).sort(byOrder));
-  }, [groupByCategory]);
+  }, [groupByCategory, isTeamojiExperimentEnabled, selectedProductivityColor]);
   const buildEmojiRows = useCallback((items, category, title, emojis, showDelete) => {
     let remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
@@ -179,9 +192,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     }
   }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
   const buildVirtualItemFromGroup = useCallback(group => {
-    var _group$subcategories2;
+    var _group$subcategories3;
     const items = [];
-    const hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    const 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,
@@ -226,7 +239,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     } else {
       if (query) {
         const 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,
@@ -242,7 +255,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
           items = [...items, ...buildVirtualItemFromGroup({
             category: searchCategory,
             title: search.name,
-            emojis,
+            emojis: visibleEmojis,
             order: search.order
           })];
         }
@@ -270,7 +283,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       }
     }
     // 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]);
   const findCategoryToActivate = row => {
     let category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -364,9 +377,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   });
   useEffect(() => {
     if (!query) {
-      buildEmojiGroupedByCategory(emojis, currentUser);
+      buildEmojiGroupedByCategory(visibleEmojis, currentUser);
     }
-  }, [emojis, selectedTone, loading, query, currentUser, buildEmojiGroupedByCategory]);
+  }, [visibleEmojis, selectedTone, selectedProductivityColor, loading, query, currentUser, buildEmojiGroupedByCategory]);
   useEffect(() => {
     buildVirtualItems();
   }, [allEmojiGroups, buildVirtualItems]);
@@ -375,16 +388,17 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       onRowsRendered({
         startIndex: 0
       });
+      setCategoriesChanged(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   const virtualListHeight = useMemo(() => {
-    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, {
@@ -392,6 +406,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
+    activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,
     uploadEnabled: uploadEnabled,
     emojiToDelete: emojiToDelete,
@@ -403,9 +420,10 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     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/es2019/components/picker/VirtualList.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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';
 const virtualList = null;
@@ -55,13 +56,11 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     const elemBottom = elementRect.bottom;
     const parentTop = parentRect.top;
     const parentBottom = parentRect.bottom;
-
-    // Only completely visible elements return true:
-    const isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
+    const isVisible = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? elemTop >= parentTop && elemBottom <= parentBottom : elemBottom > parentTop && elemTop < parentBottom;
     return isVisible;
   };
   const getFirstVisibleListElementIndex = useCallback(() => {
-    var _parentRef$current, _parentRef$current$fi;
+    var _parentRef$current, _parentRef$current$fi, _virtualList$;
     const virtualList = rowVirtualizer.getVirtualItems();
     const renderedElements = (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$fi = _parentRef$current.firstChild) === null || _parentRef$current$fi === void 0 ? void 0 : _parentRef$current$fi.childNodes;
     if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
@@ -74,7 +73,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((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/es2019/util/analytics/analytics.js

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

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

@@ -0,0 +1,25 @@
+const 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;
+};
+const hasHiddenMetadataTag = emoji => {
+  const emojiWithMetadata = emoji;
+  const {
+    metadata
+  } = emojiWithMetadata;
+  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 const isHiddenEmoji = emoji => {
+  const emojiWithMetadata = emoji;
+  if (emojiWithMetadata.hidden) {
+    return true;
+  }
+  return hasHiddenMetadataTag(emoji);
+};
+export const filterHiddenEmojis = emojis => emojis.filter(emoji => !isHiddenEmoji(emoji));

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

@@ -0,0 +1,37 @@
+export const productivityColors = ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
+const productivityColorSet = new Set(productivityColors);
+const zeroSquareVariantParent = '0_zero_square_blue';
+export const defaultProductivityColor = 'blue';
+const getProductivityVariant = emoji => {
+  if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
+    return undefined;
+  }
+  return {
+    color: emoji.color
+  };
+};
+export const getProductivityColor = emoji => {
+  var _getProductivityVaria;
+  return (_getProductivityVaria = getProductivityVariant(emoji)) === null || _getProductivityVaria === void 0 ? void 0 : _getProductivityVaria.color;
+};
+export const isProductivityNumberEmoji = emoji => getProductivityColor(emoji) !== undefined;
+export const filterProductivityEmojisByColor = (emojis, selectedColor) => {
+  return emojis.filter(emoji => {
+    const variant = getProductivityVariant(emoji);
+    return !variant || variant.color === selectedColor;
+  });
+};
+const 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(variantChild => 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(variantChild => variantChild.includes('_square_')));
+};
+export const getProductivityColorPreviewEmojis = emojis => emojis.reduce((previewEmojis, emoji) => {
+  const color = getProductivityColor(emoji);
+  if (!color) {
+    return previewEmojis;
+  }
+  if (isZeroSquareProductivityEmoji(emoji) || !previewEmojis[color]) {
+    previewEmojis[color] = emoji;
+  }
+  return previewEmojis;
+}, {});

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

@@ -332,6 +332,7 @@ export var ImageEmoji = function ImageEmoji(props) {
   );
 };
 export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _emoji$name;
   var emoji = props.emoji,
     fitToHeight = props.fitToHeight,
     selected = props.selected,
@@ -356,7 +357,7 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     other = _objectWithoutProperties(props, _excluded);
   var intl = useContext(IntlContext);
   var ariaLabel = intl && fg('platform_change_emoji_button_label') ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
-    shortName: emoji.shortName
+    shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : editorEmoji ? undefined : emoji.shortName;
   return /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',

package/dist/esm/components/common/EmojiActions.compiled.css

@@ -1,9 +1,13 @@
 
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
 ._18u019bv{margin-left:10px}
 ._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
@@ -12,10 +16,14 @@
 ._1wpz1h6o{align-self:center}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}
 ._p12f3sup{max-width:285px}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f319bv{padding-right:10px}

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

@@ -4,13 +4,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./EmojiActions.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
+import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback, useEffect } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
 import ToneSelector from './ToneSelector';
+import ProductivityColorSelector, { productivityColorSelectorId } from './ProductivityColorSelector';
+import Popup from './Popup';
 import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
@@ -27,6 +29,7 @@ var addCustomEmoji = null;
 var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
+var productivityColorPopup = null;
 var previewFooter = null;
 var previewFooterNew = null;
 export var emojiActionsTestId = 'emoji-actions';
@@ -68,11 +71,17 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
   })));
 };
 var TonesWrapper = function TonesWrapper(props) {
-  var toneEmoji = props.toneEmoji,
+  var activeCategoryId = props.activeCategoryId,
+    onProductivityColorSelected = props.onProductivityColorSelected,
+    productivityColorPreviewEmojis = props.productivityColorPreviewEmojis,
+    selectedProductivityColor = props.selectedProductivityColor,
+    toneEmoji = props.toneEmoji,
     _props$selectedTone = props.selectedTone,
     selectedTone = _props$selectedTone === void 0 ? DEFAULT_TONE : _props$selectedTone,
     intl = props.intl,
+    onToneClose = props.onToneClose,
     onToneOpen = props.onToneOpen,
+    onToneToggle = props.onToneToggle,
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
   var tonePreviewButtonRef = useRef(null);
@@ -99,6 +108,41 @@ var TonesWrapper = function TonesWrapper(props) {
     onToneSelected(toneValue);
     setFocusTonePreviewButton(true);
   }, [props]);
+  var onProductivityColorSelectedHandler = useCallback(function (color) {
+    onProductivityColorSelected === null || onProductivityColorSelected === void 0 || onProductivityColorSelected(color);
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  }, [onProductivityColorSelected, onToneClose]);
+  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  if (shouldShowProductivityColorSelector) {
+    var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
+    if (!previewEmoji) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
+    }, showToneSelector && tonePreviewButtonRef.current && /*#__PURE__*/React.createElement(Popup, {
+      target: tonePreviewButtonRef.current,
+      relativePosition: "below",
+      horizontalAlign: "end-to-start",
+      offsetY: 4,
+      zIndex: 510
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))), /*#__PURE__*/React.createElement(TonePreviewButton, {
+      ref: tonePreviewButtonRef,
+      ariaControls: productivityColorSelectorId,
+      ariaExpanded: showToneSelector,
+      emoji: previewEmoji,
+      selectOnHover: true,
+      onSelected: onToneToggle,
+      ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
+    }));
+  }
   if (!toneEmoji) {
     return null;
   }
@@ -147,12 +191,19 @@ export var EmojiActions = function EmojiActions(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     showToneSelector = _useState4[0],
     setShowToneSelector = _useState4[1];
+  var wasProductivityColorSelectorOpen = useRef(false);
+  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   var onToneOpenHandler = useCallback(function () {
     return setShowToneSelector(true);
   }, []);
   var onToneCloseHandler = useCallback(function () {
     return setShowToneSelector(false);
   }, []);
+  var onToneToggleHandler = useCallback(function () {
+    setShowToneSelector(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
   var onToneSelectedHandler = useCallback(function (toneValue) {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -160,11 +211,24 @@ export var EmojiActions = function EmojiActions(props) {
     }
   }, [onToneSelected]);
   var onMouseLeaveHandler = useCallback(function () {
+    if (shouldUseProductivityColorControl) {
+      return;
+    }
     if (showToneSelector && onToneSelectorCancelled) {
       onToneSelectorCancelled();
     }
     setShowToneSelector(false);
-  }, [showToneSelector, onToneSelectorCancelled]);
+  }, [shouldUseProductivityColorControl, showToneSelector, onToneSelectorCancelled]);
+  useEffect(function () {
+    if (shouldUseProductivityColorControl && showToneSelector) {
+      wasProductivityColorSelectorOpen.current = true;
+      return;
+    }
+    if (!shouldUseProductivityColorControl && wasProductivityColorSelectorOpen.current) {
+      setShowToneSelector(false);
+      wasProductivityColorSelectorOpen.current = false;
+    }
+  }, [shouldUseProductivityColorControl, showToneSelector]);
   if (uploading) {
     return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
@@ -210,11 +274,12 @@ export var EmojiActions = function EmojiActions(props) {
     onChange: onChange,
     query: query,
     resultsCount: resultsCount,
-    isVisible: !showToneSelector
+    isVisible: !showToneSelector || shouldUseProductivityColorControl
   }), /*#__PURE__*/React.createElement(TonesWrapper, _extends({}, props, {
     onToneOpen: onToneOpenHandler,
     onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
+    onToneToggle: onToneToggleHandler,
     showToneSelector: showToneSelector
   })))) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
@@ -232,6 +297,7 @@ export var EmojiActions = function EmojiActions(props) {
     onToneOpen: onToneOpenHandler,
     onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
+    onToneToggle: onToneToggleHandler,
     showToneSelector: showToneSelector
   }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
 };

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

@@ -11,6 +11,8 @@ var getTargetNode = function getTargetNode(target) {
 var Popup = function Popup(props) {
   var _props$relativePositi = props.relativePosition,
     relativePosition = _props$relativePositi === void 0 ? 'auto' : _props$relativePositi,
+    _props$horizontalAlig = props.horizontalAlign,
+    horizontalAlign = _props$horizontalAlig === void 0 ? 'start' : _props$horizontalAlig,
     _props$offsetX = props.offsetX,
     offsetX = _props$offsetX === void 0 ? 0 : _props$offsetX,
     _props$offsetY = props.offsetY,
@@ -24,17 +26,27 @@ var Popup = function Popup(props) {
     _useState2 = _slicedToArray(_useState, 2),
     debounced = _useState2[0],
     setDebounced = _useState2[1];
+  var getLeftPosition = useCallback(function (box) {
+    if (horizontalAlign === 'end-to-start') {
+      return box.left - 152;
+    }
+    if (horizontalAlign === 'end') {
+      var _popup$current;
+      return box.right - (((_popup$current = popup.current) === null || _popup$current === void 0 ? void 0 : _popup$current.offsetWidth) || 0) + (offsetX || 0);
+    }
+    return box.left + (offsetX || 0);
+  }, [horizontalAlign, offsetX]);
   var applyBelowPosition = useCallback(function () {
     var targetNode = getTargetNode(target);
     if (targetNode && popup.current) {
       var box = targetNode.getBoundingClientRect();
       var top = box.bottom + (offsetY || 0);
-      var left = box.left + (offsetX || 0);
+      var left = getLeftPosition(box);
       popup.current.style.top = "".concat(top, "px");
       popup.current.style.bottom = '';
       popup.current.style.left = "".concat(left, "px");
     }
-  }, [offsetX, offsetY, target]);
+  }, [getLeftPosition, offsetY, target]);
   var applyAbovePosition = useCallback(function () {
     if (typeof window === 'undefined') {
       return;
@@ -43,12 +55,12 @@ var Popup = function Popup(props) {
     if (targetNode && popup.current) {
       var box = targetNode.getBoundingClientRect();
       var bottom = window.innerHeight - box.top + (offsetY || 0);
-      var left = box.left + (offsetX || 0);
+      var left = getLeftPosition(box);
       popup.current.style.top = '';
       popup.current.style.bottom = "".concat(bottom, "px");
       popup.current.style.left = "".concat(left, "px");
     }
-  }, [offsetX, offsetY, target]);
+  }, [getLeftPosition, offsetY, target]);
   var applyAbsolutePosition = useCallback(function () {
     if (typeof window === 'undefined') {
       return;
@@ -103,6 +115,9 @@ var Popup = function Popup(props) {
     }
     applyAbsolutePosition();
     renderPopup();
+    if (horizontalAlign !== 'start') {
+      applyAbsolutePosition();
+    }
     return function () {
       if (typeof window === 'undefined') {
         return;
@@ -113,7 +128,7 @@ var Popup = function Popup(props) {
         document.body.removeChild(popup.current);
       }
     };
-  }, [applyAbsolutePosition, handleResize, renderPopup]);
+  }, [applyAbsolutePosition, handleResize, horizontalAlign, renderPopup]);
   return /*#__PURE__*/React.createElement("div", null);
 };
 export default Popup;

package/dist/esm/components/common/ProductivityColorSelector.compiled.css

@@ -0,0 +1,59 @@
+
+._1355fajl input+span{border-radius:var(--ds-radius-small,3px)}
+._19itidpf{border:0}
+._zulp1b66{gap:var(--ds-space-050,4px)}._1030zwfg input+span{height:2pc}
+._12hvze3t input{margin-right:var(--ds-space-0,0)}
+._12ultlke input{cursor:pointer}
+._13yj1o36 input:focus+span{outline-width:medium}
+._17muzwfg label{height:2pc}
+._18m915vq{overflow-y:hidden}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bvidpf{padding-left:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsbt94y{width:1px}
+._1bsbzwfg{width:2pc}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._1e7sidpf input{opacity:0}
+._1eq11h6o label{align-items:center}
+._1nn0kb7n input{z-index:1}
+._1p1fzwfg label{width:2pc}
+._1pi91y54 input:focus+span{box-shadow:0 0 0 2px var(--ds-border-focused,#4688ec)}
+._1reo15vq{overflow-x:hidden}
+._1rgfze3t input{margin-left:var(--ds-space-0,0)}
+._1rgq13zc input:focus+span{transition-duration:0s,.2s}
+._1ul9idpf{min-width:0}
+._1vzltlke label{cursor:pointer}
+._1wqq1h6o label{justify-content:center}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._2x4gze3t input{margin-top:var(--ds-space-0,0)}
+._2z051y6t{grid-template-rows:repeat(2,2pc)}
+._4cvr1h6o{align-items:center}
+._4t3it94y{height:1px}
+._4t3izwfg{height:2pc}
+._5hv9zwfg input{width:2pc}
+._6rawzwfg input+span{width:2pc}
+._6vsr1h6o input+span{justify-content:center}
+._7kzvidpf input+span{padding-inline-end:0}
+._8qdiidpf input+span{padding-block-start:0}
+._ca0qidpf{padding-top:0}
+._ecyuidpf input+span{padding-block-end:0}
+._ev8ridpf input+span{padding-inline-start:0}
+._hxs6glyw input:focus+span{outline-style:none}
+._khufstnw input{position:absolute}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdidpf{padding-bottom:0}
+._ngzz1txw input+span{display:flex}
+._o5721q9c{white-space:nowrap}
+._ogtohxbz{clip:rect(0 0 0 0)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._pytkzwfg input{height:2pc}
+._smb7plhp input:hover+span{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
+._soq51h6o input+span{align-items:center}
+._szw2w5lj input:checked+span{box-shadow:0 0 0 2px var(--ds-border-selected,#1868db)}
+._tnsm1r31 input:focus+span{outline-color:currentColor}
+._u5f3idpf{padding-right:0}
+._x5bdze3t input{margin-bottom:var(--ds-space-0,0)}
+._yv0e1bbt{grid-template-columns:repeat(5,2pc)}