@atlaskit/emoji 71.7.3 → 71.7.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/emoji
 
+## 71.7.5
+
+### Patch Changes
+
+- [`2e769066c051f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e769066c051f) -
+  Stop propagation to stop Add emoji click closing picker
+- [`400e0ad47f25f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/400e0ad47f25f) -
+  Do not close picker on cancel/delete emoji in post update
+- Updated dependencies
+
+## 71.7.4
+
+### Patch Changes
+
+- [`eaa674ef4c640`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eaa674ef4c640) -
+  The popup for productivity color picker should render relative to, and move with picker
+- Updated dependencies
+
 ## 71.7.3
 
 ### Patch Changes

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

@@ -12,12 +12,22 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _featureGates = _interopRequireDefault(require("@atlaskit/feature-gate-js-client/feature-gates"));
 var _reactIntl = require("react-intl");
 var _i18n = require("../i18n");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
 var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
+var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!_featureGates.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = _featureGates.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
 var addCustomEmoji = null;
 
 // Generic Type for the wrapped functional component
@@ -26,7 +36,7 @@ var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
   var handleOpenUpload = (0, _react.useCallback)(function (event) {
-    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }

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

@@ -1,7 +1,8 @@
 
 ._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}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._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)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

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

@@ -21,7 +21,6 @@ var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
 var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
 var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
 var _ProductivityColorSelector = _interopRequireWildcard(require("./ProductivityColorSelector"));
-var _Popup = _interopRequireDefault(require("./Popup"));
 var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -30,7 +29,6 @@ var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
 var _constants = require("../../util/constants");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _constants2 = require("@atlaskit/theme/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!_featureGateJsClient.default.initializeCompleted()) {
@@ -49,6 +47,11 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
+var productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+var productivityColorPopupZIndex = 9999;
+var productivityColorPopupPosition = null;
 var previewFooter = null;
 var previewFooterNew = null;
 var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -112,7 +115,7 @@ var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
   var handleOpenUpload = (0, _react.useCallback)(function (event) {
-    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }
@@ -210,18 +213,9 @@ var TonesWrapper = function TonesWrapper(props) {
     }
     return /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
-    }, showToneSelector && tonePreviewButtonRef.current && /*#__PURE__*/React.createElement(_Popup.default, {
-      target: tonePreviewButtonRef.current,
-      relativePosition: "below",
-      horizontalAlign: "end-to-start",
-      offsetY: 4,
-      zIndex: _constants2.layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
       ref: tonePreviewButtonRef,
       ariaControls: _ProductivityColorSelector.productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -230,7 +224,14 @@ var TonesWrapper = function TonesWrapper(props) {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(_i18n.messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

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

@@ -56,7 +56,13 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2.default)(this, EmojiDeletePreview);
     _this = _callSuper(this, EmojiDeletePreview, [props]);
-    (0, _defineProperty2.default)(_this, "onSubmit", function () {
+    (0, _defineProperty2.default)(_this, "stopClickPropagationForRefreshEmojiPicker", function (event) {
+      if (isRefreshEmojiPickerEnabled()) {
+        event === null || event === void 0 || event.stopPropagation();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "onSubmit", function (event) {
+      _this.stopClickPropagationForRefreshEmojiPicker(event);
       var _this$props = _this.props,
         emoji = _this$props.emoji,
         onDeleteEmoji = _this$props.onDeleteEmoji,
@@ -77,7 +83,8 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)(_this, "onCancel", function () {
+    (0, _defineProperty2.default)(_this, "onCancel", function (event) {
+      _this.stopClickPropagationForRefreshEmojiPicker(event);
       _this.props.onCloseDelete();
     });
     _this.state = {

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

@@ -409,7 +409,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
   var cancelUpload = (0, _react.useCallback)(function (event) {
-    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 || event.preventDefault();
       event === null || event === void 0 || event.stopPropagation();
     }

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.7.2"
+      packageVersion: "71.7.4"
     }, attributes)
   };
 };

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

@@ -4,11 +4,21 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client/feature-gates';
 import { FormattedMessage } from 'react-intl';
 import { messages } from '../i18n';
 import Button from '@atlaskit/button/new';
 export const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
+const isRefreshEmojiPickerEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
 const addCustomEmoji = null;
 
 // Generic Type for the wrapped functional component
@@ -19,7 +29,7 @@ export const AddOwnEmoji = props => {
     uploadEnabled
   } = props;
   const handleOpenUpload = useCallback(event => {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }

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

@@ -1,7 +1,8 @@
 
 ._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}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._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)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

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

@@ -12,7 +12,6 @@ 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';
@@ -21,7 +20,6 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
 import { Box } from '@atlaskit/primitives/compiled';
-import { layers } from '@atlaskit/theme/constants';
 const isRefreshEmojiPickerEnabled = () => {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -39,6 +37,11 @@ const addCustomEmojiButton = null;
 const emojiActionsWrapper = null;
 const emojiToneSelectorContainer = null;
 const productivityColorPopup = null;
+const productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+const productivityColorPopupZIndex = 9999;
+const productivityColorPopupPosition = null;
 const previewFooter = null;
 const previewFooterNew = null;
 const atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -103,7 +106,7 @@ export const AddOwnEmoji = props => {
     uploadEnabled
   } = props;
   const handleOpenUpload = useCallback(event => {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }
@@ -200,18 +203,9 @@ const TonesWrapper = props => {
     }
     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: layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(TonePreviewButton, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(TonePreviewButton, {
       ref: tonePreviewButtonRef,
       ariaControls: productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -220,7 +214,14 @@ const TonesWrapper = props => {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

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

@@ -38,7 +38,13 @@ const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 class EmojiDeletePreview extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "onSubmit", () => {
+    _defineProperty(this, "stopClickPropagationForRefreshEmojiPicker", event => {
+      if (isRefreshEmojiPickerEnabled()) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+      }
+    });
+    _defineProperty(this, "onSubmit", event => {
+      this.stopClickPropagationForRefreshEmojiPicker(event);
       const {
         emoji,
         onDeleteEmoji,
@@ -60,7 +66,8 @@ class EmojiDeletePreview extends Component {
         });
       }
     });
-    _defineProperty(this, "onCancel", () => {
+    _defineProperty(this, "onCancel", event => {
+      this.stopClickPropagationForRefreshEmojiPicker(event);
       this.props.onCloseDelete();
     });
     this.state = {

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

@@ -360,7 +360,7 @@ const EmojiUploadPicker = props => {
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
   const cancelUpload = useCallback(event => {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 ? void 0 : event.preventDefault();
       event === null || event === void 0 ? void 0 : event.stopPropagation();
     }

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.7.2",
+    packageVersion: "71.7.4",
     ...attributes
   }
 });

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

@@ -4,11 +4,21 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client/feature-gates';
 import { FormattedMessage } from 'react-intl';
 import { messages } from '../i18n';
 import Button from '@atlaskit/button/new';
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
+var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
 var addCustomEmoji = null;
 
 // Generic Type for the wrapped functional component
@@ -17,7 +27,7 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
   var handleOpenUpload = useCallback(function (event) {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }

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

@@ -1,7 +1,8 @@
 
 ._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}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._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)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

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

@@ -13,7 +13,6 @@ 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';
@@ -22,7 +21,6 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
 import { Box } from '@atlaskit/primitives/compiled';
-import { layers } from '@atlaskit/theme/constants';
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -40,6 +38,11 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
+var productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+var productivityColorPopupZIndex = 9999;
+var productivityColorPopupPosition = null;
 var previewFooter = null;
 var previewFooterNew = null;
 var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -103,7 +106,7 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
   var handleOpenUpload = useCallback(function (event) {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event.preventDefault();
       event.stopPropagation();
     }
@@ -201,18 +204,9 @@ var TonesWrapper = function TonesWrapper(props) {
     }
     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: layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(TonePreviewButton, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(TonePreviewButton, {
       ref: tonePreviewButtonRef,
       ariaControls: productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -221,7 +215,14 @@ var TonesWrapper = function TonesWrapper(props) {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

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

@@ -47,7 +47,13 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EmojiDeletePreview);
     _this = _callSuper(this, EmojiDeletePreview, [props]);
-    _defineProperty(_this, "onSubmit", function () {
+    _defineProperty(_this, "stopClickPropagationForRefreshEmojiPicker", function (event) {
+      if (isRefreshEmojiPickerEnabled()) {
+        event === null || event === void 0 || event.stopPropagation();
+      }
+    });
+    _defineProperty(_this, "onSubmit", function (event) {
+      _this.stopClickPropagationForRefreshEmojiPicker(event);
       var _this$props = _this.props,
         emoji = _this$props.emoji,
         onDeleteEmoji = _this$props.onDeleteEmoji,
@@ -68,7 +74,8 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    _defineProperty(_this, "onCancel", function () {
+    _defineProperty(_this, "onCancel", function (event) {
+      _this.stopClickPropagationForRefreshEmojiPicker(event);
       _this.props.onCloseDelete();
     });
     _this.state = {

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

@@ -401,7 +401,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
   var cancelUpload = useCallback(function (event) {
-    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 || event.preventDefault();
       event === null || event === void 0 || event.stopPropagation();
     }

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.7.2"
+      packageVersion: "71.7.4"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.7.3",
+	"version": "71.7.5",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.168.0",
-		"@atlaskit/analytics-next": "^12.1.0",
+		"@atlaskit/analytics-next": "^12.2.0",
 		"@atlaskit/browser-apis": "^1.1.0",
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
 		"@atlaskit/tmp-editor-statsig": "^120.1.0",
-		"@atlaskit/tokens": "^15.3.0",
+		"@atlaskit/tokens": "^15.4.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.1.0",