@atlaskit/emoji 71.3.1 → 71.3.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 71.3.3
+
+### Patch Changes
+
+- [`65b9427ab9649`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65b9427ab9649) -
+  Increase border radius of tone picker to match search input
+
+## 71.3.2
+
+### Patch Changes
+
+- [`7e7dc2539db50`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e7dc2539db50) -
+  Persist colour choice + do not have focus on button after select, do not have focus on selected
+  colour
+- Updated dependencies
+
 ## 71.3.1
 
 ### Patch Changes

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

@@ -94,10 +94,15 @@ var TonesWrapper = function TonesWrapper(props) {
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
   var tonePreviewButtonRef = (0, _react.useRef)(null);
+  var openProductivityColorSelectorWithKeyboard = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     focusTonePreviewButton = _useState2[0],
     setFocusTonePreviewButton = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    focusSelectedProductivityColorOnMount = _useState4[0],
+    setFocusSelectedProductivityColorOnMount = _useState4[1];
   (0, _react.useLayoutEffect)(function () {
     if (focusTonePreviewButton && !showToneSelector) {
       var _tonePreviewButtonRef;
@@ -120,8 +125,19 @@ var TonesWrapper = function TonesWrapper(props) {
   var onProductivityColorSelectedHandler = (0, _react.useCallback)(function (color) {
     onProductivityColorSelected === null || onProductivityColorSelected === void 0 || onProductivityColorSelected(color);
     onToneClose();
-    setFocusTonePreviewButton(true);
+    setFocusSelectedProductivityColorOnMount(false);
   }, [onProductivityColorSelected, onToneClose]);
+  var onProductivityColorToggle = (0, _react.useCallback)(function (event) {
+    var isKeyboardClick = (event === null || event === void 0 ? void 0 : event.detail) === 0;
+    setFocusSelectedProductivityColorOnMount(!showToneSelector && (openProductivityColorSelectorWithKeyboard.current || isKeyboardClick));
+    openProductivityColorSelectorWithKeyboard.current = false;
+    onToneToggle();
+  }, [onToneToggle, showToneSelector]);
+  var onProductivityColorPreviewKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      openProductivityColorSelectorWithKeyboard.current = true;
+    }
+  }, []);
   var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && _featureGateJsClient.default.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];
@@ -140,6 +156,7 @@ var TonesWrapper = function TonesWrapper(props) {
       className: (0, _runtime.ax)(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
     }, /*#__PURE__*/React.createElement(_ProductivityColorSelector.default, {
       colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
       selectedColor: selectedProductivityColor,
       onColorSelected: onProductivityColorSelectedHandler
     }))), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
@@ -148,7 +165,8 @@ var TonesWrapper = function TonesWrapper(props) {
       ariaExpanded: showToneSelector,
       emoji: previewEmoji,
       selectOnHover: true,
-      onSelected: onToneToggle,
+      onKeyDown: onProductivityColorPreviewKeyDown,
+      onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(_i18n.messages.emojiSelectColorButtonAriaLabelText)
     }));
   }
@@ -196,10 +214,10 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     query = props.query,
     _props$resultsCount = props.resultsCount,
     resultsCount = _props$resultsCount === void 0 ? 0 : _props$resultsCount;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    showToneSelector = _useState4[0],
-    setShowToneSelector = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    showToneSelector = _useState6[0],
+    setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = (0, _react.useRef)(false);
   var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false));
   var onToneOpenHandler = (0, _react.useCallback)(function () {

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

@@ -5,6 +5,7 @@
 ._12hvze3t input{margin-right:var(--ds-space-0,0)}
 ._12ultlke input{cursor:pointer}
 ._13yj1o36 input:focus+span{outline-width:medium}
+._15fn7qp0 input:checked+span{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._17muzwfg label{height:2pc}
 ._18m915vq{overflow-y:hidden}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
@@ -52,7 +53,6 @@
 ._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)}

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

@@ -28,6 +28,8 @@ var getColorLabel = function getColorLabel(color) {
 };
 var ProductivityColorSelector = exports.ProductivityColorSelector = function ProductivityColorSelector(_ref) {
   var colorPreviewEmojis = _ref.colorPreviewEmojis,
+    _ref$focusSelectedCol = _ref.focusSelectedColorOnMount,
+    focusSelectedColorOnMount = _ref$focusSelectedCol === void 0 ? false : _ref$focusSelectedCol,
     onColorSelected = _ref.onColorSelected,
     selectedColor = _ref.selectedColor;
   var intl = (0, _react.useContext)(_reactIntl.IntlContext);
@@ -75,15 +77,13 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
     };
     return /*#__PURE__*/React.createElement("div", {
       key: color,
-      className: (0, _runtime.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"])
+      className: (0, _runtime.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 _15fn7qp0"])
     }, /*#__PURE__*/React.createElement(_radio.Radio, {
       ref: function ref(el) {
         radioRefs.current[index] = el;
-        if (selectedColor === color) {
-          if (el && !hasFocusedSelectedColor.current) {
-            el.focus();
-            hasFocusedSelectedColor.current = true;
-          }
+        if (focusSelectedColorOnMount && selectedColor === color && el && !hasFocusedSelectedColor.current) {
+          el.focus();
+          hasFocusedSelectedColor.current = true;
         }
       },
       ariaLabel: getColorLabel(color),

package/dist/cjs/components/common/TonePreviewButton.compiled.css

@@ -1,6 +1,7 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._19itidpf{border:0}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
 ._dqozglyw::-moz-focus-inner{border-style:none}
 ._19bvidpf{padding-left:0}

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

@@ -19,6 +19,7 @@ var tonePreviewTestId = exports.tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
 var hidden = null;
 var emojiButtonOutline = null;
+var emojiButtonBorderRadius = null;
 var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
@@ -26,6 +27,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     ariaControls = _props$ariaControls === void 0 ? 'emoji-picker-tone-selector' : _props$ariaControls,
     ariaLabelText = props.ariaLabelText,
     ariaExpanded = props.ariaExpanded,
+    onKeyDown = props.onKeyDown,
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
@@ -33,6 +35,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
   return _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls
@@ -43,7 +46,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: (0, _runtime.ax)(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51"])
+    className: (0, _runtime.ax)(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
   }, /*#__PURE__*/React.createElement(_Emoji.default, {
     emoji: emoji,
     selectOnHover: selectOnHover,
@@ -53,6 +56,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls

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

@@ -119,7 +119,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     selectedTone = _useState10[0],
     setSelectedTone = _useState10[1];
-  var _useState11 = (0, _react.useState)(_productivityColors.defaultProductivityColor),
+  var _useState11 = (0, _react.useState)(function () {
+      return isTeamojiExperimentEnabled ? (0, _productivityColors.getStoredProductivityColor)() : _productivityColors.defaultProductivityColor;
+    }),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     selectedProductivityColor = _useState12[0],
     setSelectedProductivityColor = _useState12[1];
@@ -349,6 +351,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [fireAnalytics]);
   var onProductivityColorSelected = (0, _react.useCallback)(function (color) {
     setSelectedProductivityColor(color);
+    (0, _productivityColors.storeProductivityColor)(color);
   }, []);
   var onSelectWrapper = (0, _react.useCallback)(function (emojiId, emoji, event) {
     if (onSelection) {

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: "71.3.0"
+      packageVersion: "71.3.2"
     }, attributes)
   };
 };

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.yourUploadsCategory = exports.userCustomTitle = exports.sizeGap = exports.selectedToneStorageKey = exports.searchCategory = exports.scaledEmojiHeightH4 = exports.scaledEmojiHeightH3 = exports.scaledEmojiHeightH2 = exports.scaledEmojiHeightH1 = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerPreviewHeight = exports.emojiPickerMinHeight = exports.emojiPickerListHeightNew = exports.emojiPickerListHeight = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.denseEmojiHeightH4 = exports.denseEmojiHeightH3 = exports.denseEmojiHeightH2 = exports.denseEmojiHeightH1 = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultInlineEmojiHeight = exports.defaultEmojiPickerSize = exports.defaultEmojiHeight = exports.defaultDenseEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = exports.KeyboardNavigationDirection = exports.KeyboardKeys = exports.EMOJI_SEARCH_DEBOUNCE = exports.EMOJI_LIST_PAGE_COUNT = exports.EMOJI_LIST_COLUMNS = exports.EMOJI_KEYBOARD_KEYS_SUPPORTED = exports.EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED = exports.DEFAULT_TONE = exports.CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED = void 0;
+exports.yourUploadsCategory = exports.userCustomTitle = exports.sizeGap = exports.selectedToneStorageKey = exports.selectedProductivityColorStorageKey = exports.searchCategory = exports.scaledEmojiHeightH4 = exports.scaledEmojiHeightH3 = exports.scaledEmojiHeightH2 = exports.scaledEmojiHeightH1 = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerPreviewHeight = exports.emojiPickerMinHeight = exports.emojiPickerListHeightNew = exports.emojiPickerListHeight = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.denseEmojiHeightH4 = exports.denseEmojiHeightH3 = exports.denseEmojiHeightH2 = exports.denseEmojiHeightH1 = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultInlineEmojiHeight = exports.defaultEmojiPickerSize = exports.defaultEmojiHeight = exports.defaultDenseEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = exports.KeyboardNavigationDirection = exports.KeyboardKeys = exports.EMOJI_SEARCH_DEBOUNCE = exports.EMOJI_LIST_PAGE_COUNT = exports.EMOJI_LIST_COLUMNS = exports.EMOJI_KEYBOARD_KEYS_SUPPORTED = exports.EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED = exports.DEFAULT_TONE = exports.CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED = void 0;
 var customCategory = exports.customCategory = 'CUSTOM';
 var frequentCategory = exports.frequentCategory = 'FREQUENT';
 var customType = exports.customType = 'SITE';
@@ -45,6 +45,7 @@ var emojiPickerPreviewHeight = exports.emojiPickerPreviewHeight = 54;
 var emojiPickerHeightWithPreview = exports.emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;
 var localStoragePrefix = exports.localStoragePrefix = 'fabric.emoji';
 var selectedToneStorageKey = exports.selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");
+var selectedProductivityColorStorageKey = exports.selectedProductivityColorStorageKey = "".concat(localStoragePrefix, ".selectedProductivityColor");
 var defaultCategories = exports.defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
 var KeyboardKeys = exports.KeyboardKeys = /*#__PURE__*/function (KeyboardKeys) {
   KeyboardKeys["ArrowLeft"] = "ArrowLeft";

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

@@ -1,13 +1,43 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.productivityColors = exports.isProductivityNumberEmoji = exports.getProductivityColorPreviewEmojis = exports.getProductivityColor = exports.filterProductivityEmojisByColor = exports.defaultProductivityColor = void 0;
+exports.storeProductivityColor = exports.productivityColors = exports.isProductivityNumberEmoji = exports.getStoredProductivityColor = exports.getProductivityColorPreviewEmojis = exports.getProductivityColor = exports.filterProductivityEmojisByColor = exports.defaultProductivityColor = void 0;
+var _constants = require("./constants");
+var _storageAvailable = _interopRequireDefault(require("./storage-available"));
 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 isProductivityColor = function isProductivityColor(color) {
+  return !!color && productivityColorSet.has(color);
+};
+var getStoredProductivityColor = exports.getStoredProductivityColor = function getStoredProductivityColor() {
+  if (typeof window === 'undefined' || !(0, _storageAvailable.default)('localStorage')) {
+    return defaultProductivityColor;
+  }
+  try {
+    var storedColor = window.localStorage.getItem(_constants.selectedProductivityColorStorageKey);
+    return isProductivityColor(storedColor) ? storedColor : defaultProductivityColor;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to load selected productivity emoji colour', error);
+    return defaultProductivityColor;
+  }
+};
+var storeProductivityColor = exports.storeProductivityColor = function storeProductivityColor(color) {
+  if (typeof window === 'undefined' || !(0, _storageAvailable.default)('localStorage')) {
+    return;
+  }
+  try {
+    window.localStorage.setItem(_constants.selectedProductivityColorStorageKey, color);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to store selected productivity emoji colour', error);
+  }
+};
 var getProductivityVariant = function getProductivityVariant(emoji) {
   if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
     return undefined;

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

@@ -87,7 +87,9 @@ const TonesWrapper = props => {
     formatMessage
   } = intl;
   const tonePreviewButtonRef = useRef(null);
+  const openProductivityColorSelectorWithKeyboard = useRef(false);
   const [focusTonePreviewButton, setFocusTonePreviewButton] = useState(false);
+  const [focusSelectedProductivityColorOnMount, setFocusSelectedProductivityColorOnMount] = useState(false);
   useLayoutEffect(() => {
     if (focusTonePreviewButton && !showToneSelector) {
       var _tonePreviewButtonRef;
@@ -114,8 +116,19 @@ const TonesWrapper = props => {
   const onProductivityColorSelectedHandler = useCallback(color => {
     onProductivityColorSelected === null || onProductivityColorSelected === void 0 ? void 0 : onProductivityColorSelected(color);
     onToneClose();
-    setFocusTonePreviewButton(true);
+    setFocusSelectedProductivityColorOnMount(false);
   }, [onProductivityColorSelected, onToneClose]);
+  const onProductivityColorToggle = useCallback(event => {
+    const isKeyboardClick = (event === null || event === void 0 ? void 0 : event.detail) === 0;
+    setFocusSelectedProductivityColorOnMount(!showToneSelector && (openProductivityColorSelectorWithKeyboard.current || isKeyboardClick));
+    openProductivityColorSelectorWithKeyboard.current = false;
+    onToneToggle();
+  }, [onToneToggle, showToneSelector]);
+  const onProductivityColorPreviewKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      openProductivityColorSelectorWithKeyboard.current = true;
+    }
+  }, []);
   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];
@@ -134,6 +147,7 @@ const TonesWrapper = props => {
       className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
     }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
       colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
       selectedColor: selectedProductivityColor,
       onColorSelected: onProductivityColorSelectedHandler
     }))), /*#__PURE__*/React.createElement(TonePreviewButton, {
@@ -142,7 +156,8 @@ const TonesWrapper = props => {
       ariaExpanded: showToneSelector,
       emoji: previewEmoji,
       selectOnHover: true,
-      onSelected: onToneToggle,
+      onKeyDown: onProductivityColorPreviewKeyDown,
+      onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
     }));
   }

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

@@ -5,6 +5,7 @@
 ._12hvze3t input{margin-right:var(--ds-space-0,0)}
 ._12ultlke input{cursor:pointer}
 ._13yj1o36 input:focus+span{outline-width:medium}
+._15fn7qp0 input:checked+span{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._17muzwfg label{height:2pc}
 ._18m915vq{overflow-y:hidden}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
@@ -52,7 +53,6 @@
 ._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)}

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

@@ -17,6 +17,7 @@ const colorOptionEmoji = null;
 const getColorLabel = color => `${color.charAt(0).toUpperCase()}${color.slice(1)} productivity emoji colour`;
 export const ProductivityColorSelector = ({
   colorPreviewEmojis,
+  focusSelectedColorOnMount = false,
   onColorSelected,
   selectedColor
 }) => {
@@ -63,15 +64,13 @@ export const ProductivityColorSelector = ({
     };
     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"])
+      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 _15fn7qp0"])
     }, /*#__PURE__*/React.createElement(Radio, {
       ref: el => {
         radioRefs.current[index] = el;
-        if (selectedColor === color) {
-          if (el && !hasFocusedSelectedColor.current) {
-            el.focus();
-            hasFocusedSelectedColor.current = true;
-          }
+        if (focusSelectedColorOnMount && selectedColor === color && el && !hasFocusedSelectedColor.current) {
+          el.focus();
+          hasFocusedSelectedColor.current = true;
         }
       },
       ariaLabel: getColorLabel(color),

package/dist/es2019/components/common/TonePreviewButton.compiled.css

@@ -1,6 +1,7 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._19itidpf{border:0}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
 ._dqozglyw::-moz-focus-inner{border-style:none}
 ._19bvidpf{padding-left:0}

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

@@ -10,6 +10,7 @@ export const tonePreviewTestId = 'tone-preview';
 const emojiButton = null;
 const hidden = null;
 const emojiButtonOutline = null;
+const emojiButtonBorderRadius = null;
 export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     emoji,
@@ -17,6 +18,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     ariaControls = 'emoji-picker-tone-selector',
     ariaLabelText,
     ariaExpanded,
+    onKeyDown,
     onSelected,
     isVisible = true
   } = props;
@@ -24,6 +26,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
   return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls
@@ -34,7 +37,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51"])
+    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
   }, /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover,
@@ -44,6 +47,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls

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

@@ -26,7 +26,7 @@ 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 { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
 import { filterHiddenEmojis } from '../../util/hidden-emojis';
 const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 const emojiPickerHeight = 295;
@@ -87,7 +87,7 @@ const EmojiPickerComponent = ({
   const [query, setQuery] = useState('');
   const [dynamicCategories, setDynamicCategories] = useState([]);
   const [selectedTone, setSelectedTone] = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined);
-  const [selectedProductivityColor, setSelectedProductivityColor] = useState(defaultProductivityColor);
+  const [selectedProductivityColor, setSelectedProductivityColor] = useState(() => isTeamojiExperimentEnabled ? getStoredProductivityColor() : defaultProductivityColor);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
   const [selectedEmoji, setSelectedEmoji] = useState();
@@ -290,6 +290,7 @@ const EmojiPickerComponent = ({
   }, [fireAnalytics]);
   const onProductivityColorSelected = useCallback(color => {
     setSelectedProductivityColor(color);
+    storeProductivityColor(color);
   }, []);
   const onSelectWrapper = useCallback((emojiId, emoji, event) => {
     if (onSelection) {

package/dist/es2019/util/analytics/analytics.js

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

package/dist/es2019/util/constants.js

@@ -39,6 +39,7 @@ export const emojiPickerPreviewHeight = 54;
 export const emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;
 export const localStoragePrefix = 'fabric.emoji';
 export const selectedToneStorageKey = `${localStoragePrefix}.selectedTone`;
+export const selectedProductivityColorStorageKey = `${localStoragePrefix}.selectedProductivityColor`;
 export const defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
 export let KeyboardKeys = /*#__PURE__*/function (KeyboardKeys) {
   KeyboardKeys["ArrowLeft"] = "ArrowLeft";

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

@@ -1,7 +1,34 @@
+import { selectedProductivityColorStorageKey } from './constants';
+import storageAvailable from './storage-available';
 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 isProductivityColor = color => !!color && productivityColorSet.has(color);
+export const getStoredProductivityColor = () => {
+  if (typeof window === 'undefined' || !storageAvailable('localStorage')) {
+    return defaultProductivityColor;
+  }
+  try {
+    const storedColor = window.localStorage.getItem(selectedProductivityColorStorageKey);
+    return isProductivityColor(storedColor) ? storedColor : defaultProductivityColor;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to load selected productivity emoji colour', error);
+    return defaultProductivityColor;
+  }
+};
+export const storeProductivityColor = color => {
+  if (typeof window === 'undefined' || !storageAvailable('localStorage')) {
+    return;
+  }
+  try {
+    window.localStorage.setItem(selectedProductivityColorStorageKey, color);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to store selected productivity emoji colour', error);
+  }
+};
 const getProductivityVariant = emoji => {
   if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
     return undefined;

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

@@ -85,10 +85,15 @@ var TonesWrapper = function TonesWrapper(props) {
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
   var tonePreviewButtonRef = useRef(null);
+  var openProductivityColorSelectorWithKeyboard = useRef(false);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focusTonePreviewButton = _useState2[0],
     setFocusTonePreviewButton = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusSelectedProductivityColorOnMount = _useState4[0],
+    setFocusSelectedProductivityColorOnMount = _useState4[1];
   useLayoutEffect(function () {
     if (focusTonePreviewButton && !showToneSelector) {
       var _tonePreviewButtonRef;
@@ -111,8 +116,19 @@ var TonesWrapper = function TonesWrapper(props) {
   var onProductivityColorSelectedHandler = useCallback(function (color) {
     onProductivityColorSelected === null || onProductivityColorSelected === void 0 || onProductivityColorSelected(color);
     onToneClose();
-    setFocusTonePreviewButton(true);
+    setFocusSelectedProductivityColorOnMount(false);
   }, [onProductivityColorSelected, onToneClose]);
+  var onProductivityColorToggle = useCallback(function (event) {
+    var isKeyboardClick = (event === null || event === void 0 ? void 0 : event.detail) === 0;
+    setFocusSelectedProductivityColorOnMount(!showToneSelector && (openProductivityColorSelectorWithKeyboard.current || isKeyboardClick));
+    openProductivityColorSelectorWithKeyboard.current = false;
+    onToneToggle();
+  }, [onToneToggle, showToneSelector]);
+  var onProductivityColorPreviewKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      openProductivityColorSelectorWithKeyboard.current = true;
+    }
+  }, []);
   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];
@@ -131,6 +147,7 @@ var TonesWrapper = function TonesWrapper(props) {
       className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
     }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
       colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
       selectedColor: selectedProductivityColor,
       onColorSelected: onProductivityColorSelectedHandler
     }))), /*#__PURE__*/React.createElement(TonePreviewButton, {
@@ -139,7 +156,8 @@ var TonesWrapper = function TonesWrapper(props) {
       ariaExpanded: showToneSelector,
       emoji: previewEmoji,
       selectOnHover: true,
-      onSelected: onToneToggle,
+      onKeyDown: onProductivityColorPreviewKeyDown,
+      onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
     }));
   }
@@ -187,10 +205,10 @@ export var EmojiActions = function EmojiActions(props) {
     query = props.query,
     _props$resultsCount = props.resultsCount,
     resultsCount = _props$resultsCount === void 0 ? 0 : _props$resultsCount;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showToneSelector = _useState4[0],
-    setShowToneSelector = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showToneSelector = _useState6[0],
+    setShowToneSelector = _useState6[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 () {

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

@@ -5,6 +5,7 @@
 ._12hvze3t input{margin-right:var(--ds-space-0,0)}
 ._12ultlke input{cursor:pointer}
 ._13yj1o36 input:focus+span{outline-width:medium}
+._15fn7qp0 input:checked+span{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._17muzwfg label{height:2pc}
 ._18m915vq{overflow-y:hidden}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
@@ -52,7 +53,6 @@
 ._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)}

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

@@ -19,6 +19,8 @@ var getColorLabel = function getColorLabel(color) {
 };
 export var ProductivityColorSelector = function ProductivityColorSelector(_ref) {
   var colorPreviewEmojis = _ref.colorPreviewEmojis,
+    _ref$focusSelectedCol = _ref.focusSelectedColorOnMount,
+    focusSelectedColorOnMount = _ref$focusSelectedCol === void 0 ? false : _ref$focusSelectedCol,
     onColorSelected = _ref.onColorSelected,
     selectedColor = _ref.selectedColor;
   var intl = useContext(IntlContext);
@@ -66,15 +68,13 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
     };
     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"])
+      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 _15fn7qp0"])
     }, /*#__PURE__*/React.createElement(Radio, {
       ref: function ref(el) {
         radioRefs.current[index] = el;
-        if (selectedColor === color) {
-          if (el && !hasFocusedSelectedColor.current) {
-            el.focus();
-            hasFocusedSelectedColor.current = true;
-          }
+        if (focusSelectedColorOnMount && selectedColor === color && el && !hasFocusedSelectedColor.current) {
+          el.focus();
+          hasFocusedSelectedColor.current = true;
         }
       },
       ariaLabel: getColorLabel(color),

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

@@ -1,6 +1,7 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._19itidpf{border:0}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
 ._dqozglyw::-moz-focus-inner{border-style:none}
 ._19bvidpf{padding-left:0}

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

@@ -10,6 +10,7 @@ export var tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
 var hidden = null;
 var emojiButtonOutline = null;
+var emojiButtonBorderRadius = null;
 export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
@@ -17,6 +18,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ariaControls = _props$ariaControls === void 0 ? 'emoji-picker-tone-selector' : _props$ariaControls,
     ariaLabelText = props.ariaLabelText,
     ariaExpanded = props.ariaExpanded,
+    onKeyDown = props.onKeyDown,
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
@@ -24,6 +26,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls
@@ -34,7 +37,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "data-testid": tonePreviewTestId,
     type: "button",
-    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51"])
+    className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
   }, /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover,
@@ -44,6 +47,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
+    onKeyDown: onKeyDown,
     "aria-label": ariaLabelText,
     "aria-expanded": ariaExpanded,
     "aria-controls": ariaControls

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

@@ -33,7 +33,7 @@ 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 { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } 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;
@@ -110,7 +110,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     selectedTone = _useState10[0],
     setSelectedTone = _useState10[1];
-  var _useState11 = useState(defaultProductivityColor),
+  var _useState11 = useState(function () {
+      return isTeamojiExperimentEnabled ? getStoredProductivityColor() : defaultProductivityColor;
+    }),
     _useState12 = _slicedToArray(_useState11, 2),
     selectedProductivityColor = _useState12[0],
     setSelectedProductivityColor = _useState12[1];
@@ -340,6 +342,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, [fireAnalytics]);
   var onProductivityColorSelected = useCallback(function (color) {
     setSelectedProductivityColor(color);
+    storeProductivityColor(color);
   }, []);
   var onSelectWrapper = useCallback(function (emojiId, emoji, event) {
     if (onSelection) {

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.3.0"
+      packageVersion: "71.3.2"
     }, attributes)
   };
 };

package/dist/esm/util/constants.js

@@ -39,6 +39,7 @@ export var emojiPickerPreviewHeight = 54;
 export var emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;
 export var localStoragePrefix = 'fabric.emoji';
 export var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");
+export var selectedProductivityColorStorageKey = "".concat(localStoragePrefix, ".selectedProductivityColor");
 export var defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
 export var KeyboardKeys = /*#__PURE__*/function (KeyboardKeys) {
   KeyboardKeys["ArrowLeft"] = "ArrowLeft";

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

@@ -1,7 +1,36 @@
+import { selectedProductivityColorStorageKey } from './constants';
+import storageAvailable from './storage-available';
 export var productivityColors = ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
 var productivityColorSet = new Set(productivityColors);
 var zeroSquareVariantParent = '0_zero_square_blue';
 export var defaultProductivityColor = 'blue';
+var isProductivityColor = function isProductivityColor(color) {
+  return !!color && productivityColorSet.has(color);
+};
+export var getStoredProductivityColor = function getStoredProductivityColor() {
+  if (typeof window === 'undefined' || !storageAvailable('localStorage')) {
+    return defaultProductivityColor;
+  }
+  try {
+    var storedColor = window.localStorage.getItem(selectedProductivityColorStorageKey);
+    return isProductivityColor(storedColor) ? storedColor : defaultProductivityColor;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to load selected productivity emoji colour', error);
+    return defaultProductivityColor;
+  }
+};
+export var storeProductivityColor = function storeProductivityColor(color) {
+  if (typeof window === 'undefined' || !storageAvailable('localStorage')) {
+    return;
+  }
+  try {
+    window.localStorage.setItem(selectedProductivityColorStorageKey, color);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('failed to store selected productivity emoji colour', error);
+  }
+};
 var getProductivityVariant = function getProductivityVariant(emoji) {
   if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
     return undefined;

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

@@ -9,9 +9,10 @@ export declare const productivityColorSelectorTestId = "productivity-color-selec
 export declare const productivityColorSelectorId = "emoji-picker-productivity-color-selector";
 export interface Props {
     colorPreviewEmojis: Partial<Record<ProductivityColor, EmojiDescription>>;
+    focusSelectedColorOnMount?: boolean;
     onColorSelected: (color: ProductivityColor) => void;
     selectedColor: ProductivityColor;
 }
-export declare const ProductivityColorSelector: ({ colorPreviewEmojis, onColorSelected, selectedColor, }: Props) => JSX.Element | null;
+export declare const ProductivityColorSelector: ({ colorPreviewEmojis, focusSelectedColorOnMount, onColorSelected, selectedColor, }: Props) => JSX.Element | null;
 declare const _default_1: MemoExoticComponent<typeof ProductivityColorSelector>;
 export default _default_1;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ForwardRefExoticComponent, type MemoExoticComponent, type RefAttributes } from 'react';
+import { type ForwardRefExoticComponent, type KeyboardEventHandler, type MemoExoticComponent, type MouseEventHandler, type RefAttributes } from 'react';
 import type { EmojiDescription } from '../../types';
 export declare const tonePreviewTestId = "tone-preview";
 export interface Props {
@@ -11,7 +11,8 @@ export interface Props {
     ariaLabelText?: string;
     emoji: EmojiDescription;
     isVisible?: boolean;
-    onSelected?: () => void;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onSelected?: MouseEventHandler<HTMLButtonElement>;
     selectOnHover?: boolean;
 }
 export declare const TonePreviewButton: ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;

package/dist/types/util/constants.d.ts

@@ -36,6 +36,7 @@ export declare const emojiPickerPreviewHeight = 54;
 export declare const emojiPickerHeightWithPreview: number;
 export declare const localStoragePrefix = "fabric.emoji";
 export declare const selectedToneStorageKey: 'fabric.emoji.selectedTone';
+export declare const selectedProductivityColorStorageKey: 'fabric.emoji.selectedProductivityColor';
 export declare const defaultCategories: CategoryId[];
 export declare enum KeyboardKeys {
     ArrowLeft = "ArrowLeft",

package/dist/types/util/productivity-colors.d.ts

@@ -2,6 +2,8 @@ import type { EmojiDescription } from '../types';
 export declare const productivityColors: readonly ["gray", "magenta", "purple", "blue", "teal", "green", "lime", "yellow", "orange", "red"];
 export type ProductivityColor = (typeof productivityColors)[number];
 export declare const defaultProductivityColor: ProductivityColor;
+export declare const getStoredProductivityColor: () => ProductivityColor;
+export declare const storeProductivityColor: (color: ProductivityColor) => void;
 export declare const getProductivityColor: (emoji: EmojiDescription) => ProductivityColor | undefined;
 export declare const isProductivityNumberEmoji: (emoji: EmojiDescription) => boolean;
 export declare const filterProductivityEmojisByColor: (emojis: EmojiDescription[], selectedColor: ProductivityColor) => EmojiDescription[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.3.1",
+	"version": "71.3.3",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/radio": "^9.0.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.4.0",
+		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",