@atlaskit/emoji 71.0.0 → 71.1.0

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)}

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/ResourcedEmojiComponent.js

@@ -35,6 +35,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     _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,
@@ -295,7 +297,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 export default ResourcedEmojiComponent;

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,