@atlaskit/emoji 71.0.0 → 71.1.0

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

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useEffect, useCallback, useContext, useMemo, forwardRef } from 'react';
+import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -21,6 +21,8 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getDocument } from '@atlaskit/browser-apis';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
+import { isSSR } from '../../util/is-ssr';
+import EmojiPlaceholder from './EmojiPlaceholder';
 const emojiSpriteContainer = null;
 const emojiImageContainer = null;
 
@@ -151,17 +153,123 @@ export const SpriteEmoji = props => {
     }))
   );
 };
-export const UnicodeEmoji = props => {
+const unicodeEmojiCanvasSize = 128;
+const unicodeEmojiCanvasFontSize = 124;
+const unicodeEmojiCanvasTopPadding = 8;
+const renderUnicodeEmojiToImagePath = async unicodeEmoji => {
+  const OffscreenCanvasCtor = globalThis['OffscreenCanvas'];
+  if (isSSR() || !OffscreenCanvasCtor || typeof URL === 'undefined') {
+    return undefined;
+  }
+  const canvas = new OffscreenCanvasCtor(unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return undefined;
+  }
+  context.clearRect(0, 0, unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
+  context.font = `${unicodeEmojiCanvasFontSize}px sans-serif`;
+  context.fillText(unicodeEmoji, unicodeEmojiCanvasSize / 2, unicodeEmojiCanvasSize / 2 + unicodeEmojiCanvasTopPadding);
+  const blob = await canvas.convertToBlob({
+    type: 'image/png'
+  });
+  return URL.createObjectURL(blob);
+};
+const useUnicodeEmojiImage = unicodeEmoji => {
+  const [state, setState] = useState({
+    status: 'loading'
+  });
+  useEffect(() => {
+    let cancelled = false;
+    let imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(imagePath => {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji,
+        imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji
+      });
+    }).catch(() => {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+const UnicodeEmojiImage = props => {
   const {
     emoji,
     fitToHeight,
+    showTooltip
+  } = props;
+  const emojiText = emoji.representation.unicodeEmoji;
+  const unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  const hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: {
+        ...emoji,
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export const UnicodeEmoji = props => {
+  var _props$fitToHeight;
+  const {
+    emoji,
     selected,
     selectOnHover,
-    className
+    className,
+    renderUnicodeEmojiAsImage = true
   } = props;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   const emojiText = emoji.representation.unicodeEmoji;
-  const size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight;
+  const size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
   const style = {
     display: 'inline-block',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -334,6 +442,7 @@ export const ImageEmoji = props => {
   );
 };
 export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
+  var _emoji$name;
   const {
     emoji,
     fitToHeight,
@@ -355,11 +464,12 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     type,
     editorEmoji,
+    renderUnicodeEmojiAsImage,
     ...other
   } = props;
   const intl = useContext(IntlContext);
   const 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/es2019/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/es2019/components/common/EmojiActions.js

@@ -3,13 +3,15 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -26,6 +28,7 @@ const addCustomEmoji = null;
 const addCustomEmojiButton = null;
 const emojiActionsWrapper = null;
 const emojiToneSelectorContainer = null;
+const productivityColorPopup = null;
 const previewFooter = null;
 const previewFooterNew = null;
 export const emojiActionsTestId = 'emoji-actions';
@@ -68,10 +71,16 @@ export const AddOwnEmoji = props => {
 };
 const TonesWrapper = props => {
   const {
+    activeCategoryId,
+    onProductivityColorSelected,
+    productivityColorPreviewEmojis,
+    selectedProductivityColor,
     toneEmoji,
     selectedTone = DEFAULT_TONE,
     intl,
+    onToneClose,
     onToneOpen,
+    onToneToggle,
     showToneSelector
   } = props;
   const {
@@ -102,6 +111,41 @@ const TonesWrapper = props => {
     onToneSelected(toneValue);
     setFocusTonePreviewButton(true);
   }, [props]);
+  const onProductivityColorSelectedHandler = useCallback(color => {
+    onProductivityColorSelected === null || onProductivityColorSelected === void 0 ? void 0 : onProductivityColorSelected(color);
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  }, [onProductivityColorSelected, onToneClose]);
+  const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
+  if (shouldShowProductivityColorSelector) {
+    const 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;
   }
@@ -148,8 +192,13 @@ export const EmojiActions = props => {
     resultsCount = 0
   } = props;
   const [showToneSelector, setShowToneSelector] = useState(false);
+  const wasProductivityColorSelectorOpen = useRef(false);
+  const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   const onToneOpenHandler = useCallback(() => setShowToneSelector(true), []);
   const onToneCloseHandler = useCallback(() => setShowToneSelector(false), []);
+  const onToneToggleHandler = useCallback(() => {
+    setShowToneSelector(isOpen => !isOpen);
+  }, []);
   const onToneSelectedHandler = useCallback(toneValue => {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -157,11 +206,24 @@ export const EmojiActions = props => {
     }
   }, [onToneSelected]);
   const onMouseLeaveHandler = useCallback(() => {
+    if (shouldUseProductivityColorControl) {
+      return;
+    }
     if (showToneSelector && onToneSelectorCancelled) {
       onToneSelectorCancelled();
     }
     setShowToneSelector(false);
-  }, [showToneSelector, onToneSelectorCancelled]);
+  }, [shouldUseProductivityColorControl, showToneSelector, onToneSelectorCancelled]);
+  useEffect(() => {
+    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"])
@@ -207,11 +269,12 @@ export const 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,
@@ -229,6 +292,7 @@ export const EmojiActions = props => {
     onToneOpen: onToneOpenHandler,
     onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
+    onToneToggle: onToneToggleHandler,
     showToneSelector: showToneSelector
   }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
 };

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

@@ -10,6 +10,7 @@ const getTargetNode = target => {
 const Popup = props => {
   const {
     relativePosition = 'auto',
+    horizontalAlign = 'start',
     offsetX = 0,
     offsetY = 0,
     zIndex = 9,
@@ -18,17 +19,27 @@ const Popup = props => {
   } = props;
   const popup = useRef();
   const [debounced, setDebounced] = useState(null);
+  const getLeftPosition = useCallback(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]);
   const applyBelowPosition = useCallback(() => {
     const targetNode = getTargetNode(target);
     if (targetNode && popup.current) {
       const box = targetNode.getBoundingClientRect();
       const top = box.bottom + (offsetY || 0);
-      const left = box.left + (offsetX || 0);
+      const left = getLeftPosition(box);
       popup.current.style.top = `${top}px`;
       popup.current.style.bottom = '';
       popup.current.style.left = `${left}px`;
     }
-  }, [offsetX, offsetY, target]);
+  }, [getLeftPosition, offsetY, target]);
   const applyAbovePosition = useCallback(() => {
     if (typeof window === 'undefined') {
       return;
@@ -37,12 +48,12 @@ const Popup = props => {
     if (targetNode && popup.current) {
       const box = targetNode.getBoundingClientRect();
       const bottom = window.innerHeight - box.top + (offsetY || 0);
-      const left = box.left + (offsetX || 0);
+      const left = getLeftPosition(box);
       popup.current.style.top = '';
       popup.current.style.bottom = `${bottom}px`;
       popup.current.style.left = `${left}px`;
     }
-  }, [offsetX, offsetY, target]);
+  }, [getLeftPosition, offsetY, target]);
   const applyAbsolutePosition = useCallback(() => {
     if (typeof window === 'undefined') {
       return;
@@ -97,6 +108,9 @@ const Popup = props => {
     }
     applyAbsolutePosition();
     renderPopup();
+    if (horizontalAlign !== 'start') {
+      applyAbsolutePosition();
+    }
     return () => {
       if (typeof window === 'undefined') {
         return;
@@ -107,7 +121,7 @@ const 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/es2019/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/es2019/components/common/ProductivityColorSelector.js

@@ -0,0 +1,98 @@
+/* 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 const productivityColorSelectorTestId = 'productivity-color-selector';
+export const productivityColorSelectorId = 'emoji-picker-productivity-color-selector';
+const selectorGrid = null;
+const visuallyHiddenLegend = null;
+const colorOption = null;
+const colorOptionEmoji = null;
+const getColorLabel = color => `${color.charAt(0).toUpperCase()}${color.slice(1)} productivity emoji colour`;
+export const ProductivityColorSelector = ({
+  colorPreviewEmojis,
+  onColorSelected,
+  selectedColor
+}) => {
+  const intl = useContext(IntlContext);
+  const radioRefs = useRef([]);
+  const hasFocusedSelectedColor = useRef(false);
+  const availableColors = productivityColors.filter(color => colorPreviewEmojis[color]);
+  const colorSelectorAriaLabel = intl ? intl.formatMessage(messages.emojiSelectColorListAriaLabelText) : messages.emojiSelectColorListAriaLabelText.defaultMessage;
+  if (!availableColors.length) {
+    return null;
+  }
+  const onArrowKey = (currentIndex, direction) => {
+    var _radioRefs$current$ne;
+    const nextIndex = (currentIndex + direction + availableColors.length) % availableColors.length;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 ? void 0 : _radioRefs$current$ne.focus();
+  };
+  const 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((color, index) => {
+    const emoji = colorPreviewEmojis[color];
+    if (!emoji) {
+      return null;
+    }
+    const 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: 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: () => onColorSelected(color),
+      onClick: stopPickerDismissal,
+      onKeyDown: handleKeyDown,
+      onMouseDown: stopPickerDismissal,
+      testId: `productivity-color-${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
+      }))
+    }));
+  }));
+};
+const _default_1 = /*#__PURE__*/memo(ProductivityColorSelector);
+export default _default_1;

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

@@ -24,6 +24,7 @@ export const ResourcedEmojiComponent = ({
   optimistic = false,
   optimisticImageURL = undefined,
   editorEmoji,
+  renderUnicodeEmojiAsImage = true,
   pageTitleEmoji = false,
   placeholderXcss,
   onEmojiLoadSuccess,
@@ -259,7 +260,8 @@ export const ResourcedEmojiComponent = ({
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 export default ResourcedEmojiComponent;

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

@@ -14,6 +14,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     emoji,
     selectOnHover,
+    ariaControls = 'emoji-picker-tone-selector',
     ariaLabelText,
     ariaExpanded,
     onSelected,
@@ -25,7 +26,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((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: {
@@ -45,7 +46,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((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/es2019/components/i18n.js

@@ -65,6 +65,16 @@ export const 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',